/* geek.ch theme for Pollaris.
 *
 * Pollaris loads public/custom.css after its own stylesheet. Its whole UI hangs
 * on Radix-style colour scales (1 = app background … 9 = solid … 12 = strong
 * text), so the theme maps the GeekDesign tokens onto those scales instead of
 * restyling components one by one: iris = accent, mauve = neutral. Components
 * that hard-code a radius or a shadow are flattened at the end.
 *
 * Source of the values: GeekDesign tokens/geek-tokens.css ("Füller, Blei & Rot").
 * Fonts are served from this image, not from Google: a poll tool should not
 * hand its visitors' addresses to a third party.
 */

@font-face {
    font-family: "IBM Plex Sans";
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-weight: 600;
    font-display: swap;
    src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Serif";
    font-weight: 600;
    font-display: swap;
    src: url("fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-weight: 600;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

/* --- Tokens (light) ------------------------------------------------------- */

:root {
    --g-font-serif: "IBM Plex Serif", Georgia, serif;
    --g-font-sans: "IBM Plex Sans", system-ui, sans-serif;
    --g-font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --g-bg: #FBFBF9;
    --g-bg-2: #F0F0ED;
    --g-panel: #FFFFFF;
    --g-border: #DBDBD6;
    --g-text: #191917;
    --g-accent-text: #1F3D7A;
    --g-grid-tint: rgba(60, 80, 150, 0.09);
    --g-grid-size: 28px;

    /* Accent: Tintenblau. 1 is the text on solid buttons and the header. */
    --color-iris1: #FBFBF9;
    --color-iris2: #F4F6FA;
    --color-iris3: #E9EDF5;
    --color-iris4: #DCE3F0;
    --color-iris5: #CDD6EA;
    --color-iris6: #B4C2DE;
    --color-iris7: #95A8CF;
    --color-iris8: #6E87BC;
    --color-iris9: #1F3D7A;
    --color-iris10: #3A5FB0;
    --color-iris11: #1F3D7A;
    --color-iris12: #132A5C;

    /* Neutral: paper, line, muted, ink */
    --color-mauve1: #FBFBF9;
    --color-mauve2: #F6F6F3;
    --color-mauve3: #F0F0ED;
    --color-mauve4: #E8E8E4;
    --color-mauve5: #E1E1DC;
    --color-mauve6: #DBDBD6;
    --color-mauve7: #CBCBC6;
    --color-mauve8: #A7A7A2;
    --color-mauve9: #8A8A85;
    --color-mauve10: #787874;
    --color-mauve11: #494947;
    --color-mauve12: #191917;

    /* Dark scales; Pollaris maps primary/grey onto these in dark mode */
    --color-iris-dark1: #111112;
    --color-iris-dark2: #161A24;
    --color-iris-dark3: #1A2236;
    --color-iris-dark4: #1E2A45;
    --color-iris-dark5: #233255;
    --color-iris-dark6: #2B3D66;
    --color-iris-dark7: #354A7A;
    --color-iris-dark8: #3F5690;
    --color-iris-dark9: #3A5FB0;
    --color-iris-dark10: #4569BE;
    --color-iris-dark11: #6E93D6;
    --color-iris-dark12: #C9D7F0;

    --color-mauve-dark1: #111112;
    --color-mauve-dark2: #161617;
    --color-mauve-dark3: #1A1A1B;
    --color-mauve-dark4: #1F1F20;
    --color-mauve-dark5: #242426;
    --color-mauve-dark6: #363638;
    --color-mauve-dark7: #424245;
    --color-mauve-dark8: #55555A;
    --color-mauve-dark9: #6B6B70;
    --color-mauve-dark10: #84848A;
    --color-mauve-dark11: #ADADB0;
    --color-mauve-dark12: #F1F1EF;

    /* One column for header and page. Wide tables (poll results) scroll. */
    --page-width: 860px;
    --page-padding: var(--space-large);

    /* Eckig & technisch */
    --border-radius: 0;
    --border-radius-small: 0;
}

/* --- Tokens (dark) -------------------------------------------------------- */

/* The header and .button--primary use the light iris scale directly, also in
 * dark mode. Tintenblau on #111112 is 1.8:1, so the solid steps switch to
 * Himmel here (light text on it 5.7:1), as GeekDesign does. */
[data-color-scheme="dark"] {
    --g-bg: #111112;
    --g-bg-2: #1A1A1B;
    --g-panel: #1A1A1B;
    --g-border: #363638;
    --g-text: #F1F1EF;
    --g-accent-text: #6E93D6;
    --g-grid-tint: rgba(120, 150, 220, 0.06);
    --g-grid-size: 34px;

    --color-iris1: #F1F1EF;
    --color-iris9: #3A5FB0;
    --color-iris12: #1F3D7A;
}

/* --- Base ----------------------------------------------------------------- */

body {
    font-family: var(--g-font-sans);
    background-image:
        linear-gradient(var(--g-grid-tint) 1px, transparent 1px),
        linear-gradient(90deg, var(--g-grid-tint) 1px, transparent 1px);
    background-size: var(--g-grid-size) var(--g-grid-size);
}

h1,
h2,
h3 {
    color: var(--g-text);
    font-family: var(--g-font-serif);
    font-weight: 600;
}

legend,
label,
th {
    font-family: var(--g-font-sans);
}

/* --- Layout: ein Blatt auf Rasterpapier ----------------------------------- */

/* Pollaris centres narrow columns in a 1600px body, so on a wide screen the
 * content floats in the middle while the header runs edge to edge. Here the
 * page is one sheet of --page-width, and the header lines up with it. */
.layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.layout__body {
    flex: 1;
    width: 100%;
    max-width: var(--page-width);
    padding: var(--space-larger) var(--page-padding);

    background-color: var(--g-bg);
    border-inline: 1px solid var(--g-border);
}

/* Pollaris narrows its pages to 650px wrappers inside; on the sheet they take
 * its full width, so text, panels and header share one left edge. */
.layout__body .wrapper:not(.wrapper--text) {
    --wrapper-max-width: 100%;
}

.layout__body .form--standard,
.layout__body .poll-view--list .poll {
    max-width: none;
}

/* --- Header: Kopfband statt blauer Balken --------------------------------- */

.header {
    padding-inline: max(var(--page-padding), calc((100% - var(--page-width)) / 2 + var(--page-padding)));

    color: var(--g-text);
    background-color: var(--g-bg-2);
    background-image:
        linear-gradient(var(--g-grid-tint) 1px, transparent 1px),
        linear-gradient(90deg, var(--g-grid-tint) 1px, transparent 1px);
    background-size: var(--g-grid-size) var(--g-grid-size);
    border-bottom: 1px solid var(--g-border);
    box-shadow: none;
}

.header .col--extend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-medium);
}

.header__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 0;

    font-family: var(--g-font-mono);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Lucide calendar-check, coloured by the theme through the mask */
.header__title::before {
    content: "";
    width: 1.6rem;
    height: 1.6rem;
    background-color: var(--g-accent-text);
    mask: url("wede-icon.svg") center / contain no-repeat;
}

.header__link {
    padding-inline: 0;

    font-family: var(--g-font-mono);
    font-size: var(--font-size-smaller);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.header__button {
    --outline-color: var(--g-accent-text);
    --button-color: var(--g-text);
}

/* Language and light/dark in the header (custom.js replaces the
 * "Preferences" button with them) */
.geek-prefs {
    display: flex;
    align-items: center;
    gap: var(--space-small);
}

.geek-prefs__languages {
    display: flex;
}

.geek-prefs button {
    --outline-color: var(--g-accent-text);
    --button-padding: var(--space-smaller) var(--space-small);
    --button-color: var(--g-text);
    --button-background-color: transparent;
    --button-border-color: var(--g-border);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;

    font-family: var(--g-font-mono);
    font-size: var(--font-size-smaller);
    letter-spacing: 0.08em;
}

/* One strip of buttons: shared borders instead of doubled ones */
.geek-prefs__language + .geek-prefs__language {
    margin-left: -1px;
}

.geek-prefs .geek-prefs__language[aria-current="true"] {
    --button-color: var(--color-iris1);
    --button-background-color: var(--color-iris9);
    --button-border-color: var(--color-iris9);

    position: relative;
    cursor: default;
}

@media (max-width: 600px) {
    :root {
        --page-padding: var(--space-medium);
    }

    .layout__body {
        padding-block: var(--space-large);
        border-inline: none;
    }

    /* Two rows: name and "my polls", then language and light/dark */
    .header {
        flex-wrap: wrap;
        row-gap: var(--space-smaller);
        padding-block: var(--space-small);
    }

    .header .col--extend {
        flex-basis: 100%;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .header__title {
        white-space: nowrap;
    }

    .header__link {
        text-align: right;
    }

    .header__link {
        letter-spacing: 0.06em;
    }
}

/* --- Panels: Karte mit Haarlinie statt Farbfläche ------------------------- */

.panel,
.panel--primary,
.panel--white {
    background-color: var(--g-panel);
    border: 1px solid var(--g-border);
}

.panel--border.panel--primary {
    border-color: var(--g-accent-text);
}

/* The poll table: a card like the other panels; the light blue stays only
 * where the visitor votes, so the input rows stand out. */
.poll-view--table .poll,
.poll-view--table .poll .poll-toolbar {
    background-color: var(--g-panel);
}

.poll-view--table .poll {
    border: 1px solid var(--g-border);
}

/* --- Flat: Borders statt Schatten ---------------------------------------- */

/* The scroll shadows of the proposals table stay: they tell that it scrolls. */
.modal__box {
    border: 1px solid var(--g-border);
    box-shadow: none;
}

hr {
    border-width: 1px;
    border-radius: 0;
}

/* --- Home (templates/home/custom.html.twig) ------------------------------ */

.geek-home__icon {
    width: 3.5rem;
    height: 3.5rem;

    color: var(--g-accent-text);
}

.geek-home__eyebrow {
    margin: 0;

    color: var(--g-accent-text);
    font-family: var(--g-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.geek-home__footer {
    padding-top: var(--space-medium);

    font-size: var(--font-size-small);

    border-top: 1px solid var(--g-border);
}