/* ============================================================================
   262-php-17-vote-list — Abstimmungen

   Alle Farben, Groessen und Abstaende kommen aus assets/css/01-type-color.css.
   Hier steht KEIN Farbwert und KEINE Schriftgroesse in Pixeln — nur Anordnung.
   Das ist die Regel fuer jeden Baustein dieser Website.
   ========================================================================== */

/* ---- Abstimmungstag (Gruppe) --------------------------------------------
   Der Tag ist die Einheit, nicht die einzelne Vorlage: an einem Sonntag
   stehen mehrere Vorlagen zugleich zur Abstimmung. Deshalb traegt die
   GRUPPE das Datum, und keine Zeile wiederholt es.                        */
.x262-voteday {
    border: 1px solid var(--border);
    /* Green top edge for what is still to come (votazioni-design.html);
       grey once the day has been voted on. */
    border-top: 3px solid var(--green-600);
    background: var(--surface);
    margin-top: 1.5rem;
}
.x262-voteday--past { border-top-color: var(--faint); }
.x262-voteday:first-child { margin-top: 0; }

.x262-voteday__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
/* The day's date: .date--stacked from the style guide — the element the
   guide itself uses for event dates. */
.x262-voteday__date {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--w-display);
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--text);
}
/* Etiketten wie .t-label im Stilguide (Versalien, var(--tr-label)) —
   aber in --fs-body-sm statt 12px: auf dieser Website steht kein Text
   unter 16px. Gilt fuer Ebene, Art und Parole gleichermassen. */
.x262-voteday__level {
    font-size: var(--fs-body-sm);
    font-weight: var(--w-heading, 500);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--text-2);
    border: 1px solid var(--border);
    padding: .15rem .5rem;
    background: var(--surface);
}

/* ---- Eine Vorlage --------------------------------------------------------
   Bild links, Text rechts — dieselbe Anordnung wie bei einer Beitragskarte,
   damit die Seite nicht wie ein Behoerdenformular wirkt. Ohne Bild rueckt
   der Text einfach auf; es entsteht keine leere Spalte.                    */
/* Text | image. The parola box on the left is gone (2026-09-11): our parola
   stands with the result in ONE box inside the text, so the text has the
   full width. Without an image the text simply takes the space. */
.x262-vote {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10rem;
    gap: 0 1.5rem;
    padding: 1.4rem 1.25rem;
}
.x262-vote--noimg { grid-template-columns: minmax(0, 1fr); }
.x262-vote + .x262-vote { border-top: 1px solid var(--border-soft); }

/* The photo: rounded corners and no frame, like the portraits on svp.ch
   (.fraktionImgBox, border-radius 10px). It keeps its 4:3 shape, so a chart
   (lohndumping) is not cut. */
.x262-vote__media {
    display: block;
    align-self: start;
    overflow: hidden;
    border-radius: .625rem;
}
.x262-vote__media img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.x262-vote__kind {
    font-size: var(--fs-body-sm);
    font-weight: var(--w-heading, 500);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Title size as the design's item <h3>: display face at --fs-h3. */
.x262-vote__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--w-heading, 500);
    line-height: var(--lh-h3);
    letter-spacing: var(--tr-h3);
    margin: .25rem 0 0;
}
.x262-vote__title a { color: inherit; text-decoration: none; }
.x262-vote__title a:hover { color: var(--brand-strong); text-decoration: underline; }

.x262-vote__text {
    margin: .5rem 0 0;
    color: var(--text-2);
    max-width: var(--measure-mid, 42rem);
}

/* ---- Our parola and the result: ONE box ----------------------------------
   Two tags of the same width — "Parola NO" | "Esito NO" — and, once voted,
   the figures below. The same box in the list and on the vote's article
   page. No verdict label and no bar (2026-09-11): the two tags side by side
   say it, as on the official site. Colours: end of this file. */
.x262-vote__result {
    margin-top: .9rem;
    padding: .75rem .9rem;
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.x262-vote__figures {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin: .6rem 0 0;
    font-size: var(--fs-body-sm);
    color: var(--text-2);
}
.x262-vote__figures b { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--text); }

/* ---- Foot: "Approfondisci" and the campaign link, close together ----------
   The campaign link is not a filled button (too heavy next to the coloured
   tags): an outlined tag the size of "Parola" / "Esito", its web address in
   small underneath at the same width. */
.x262-vote__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .75rem 1.5rem;
    margin-top: .9rem;
}
.x262-vote__more { display: inline-block; margin-top: .15rem; }
.x262-vote__campaign {
    display: inline-grid;
    gap: .2rem;
    min-width: 9rem;
    text-align: center;
}
.x262-vote__campaignbtn {
    display: block;
    padding: .1rem .5rem;
    font-size: var(--fs-body-sm);
    font-weight: var(--w-heading, 500);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--green-700);
    border: 1px solid var(--green-600);
    text-decoration: none;
}
.x262-vote__campaignbtn:hover { background: var(--green-050); }
.x262-vote__campaignurl { font-size: var(--fs-body-sm); color: var(--text-muted); }

/* ---- Archiv nach Jahr ----------------------------------------------------
   <details> statt Skript: das Auf- und Zuklappen kann der Browser selbst,
   und ohne JavaScript bleibt es bedienbar.                                */
.x262-votearchive { margin-top: 1.5rem; }
.x262-voteyear { border-top: 1px solid var(--border); }
.x262-voteyear > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: 1rem .25rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--w-display);
    line-height: 1.2;
}
.x262-voteyear > summary::-webkit-details-marker { display: none; }
.x262-voteyear > summary::after {
    content: "+";
    margin-left: auto;
    color: var(--brand-strong);
}
.x262-voteyear[open] > summary::after { content: "–"; }
.x262-voteyear > summary span {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
}

.x262-votearchive ul { list-style: none; margin: 0; padding: 0 0 .75rem; }
.x262-votearchive li {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    gap: .25rem 1.25rem;
    align-items: baseline;
    padding: .7rem .25rem;
    border-top: 1px dotted var(--border);
}
.x262-votearchive .d { font-size: var(--fs-body-sm); color: var(--text-muted); }
.x262-votearchive .t { color: var(--text); font-weight: var(--w-heading, 500); }
.x262-votearchive .t a { color: inherit; text-decoration: none; }
.x262-votearchive .t a:hover { color: var(--brand-strong); text-decoration: underline; }
.x262-votearchive .r { justify-self: end; }
/* Our parola and the result as two tags of the SAME width — in the result
   box and in every archive row. The grid gives both the width of the
   wider one, at least 9rem, so they line up from row to row. */
.x262-vote__chips {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(9rem, 1fr);
    gap: .4rem;
    margin: 0;
}
.x262-vote__chip {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: .3rem;
    padding: .1rem .5rem;
    font-size: var(--fs-body-sm);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid var(--border);
}
.x262-vote__chip b { font-weight: 700; }

.x262-vote-empty {
    padding: 2rem 1.25rem;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 46rem) {
    .x262-vote,
    .x262-vote--noimg { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .x262-vote__media { max-width: 12rem; }
    .x262-votearchive li { grid-template-columns: minmax(0, 1fr); }
    .x262-votearchive .r { justify-self: start; }
    .x262-votesec__hint { display: none; }
}

/* ---- Hinweis zum Abstimmungstag -----------------------------------------
   Steht OBEN, direkt unter dem Datum: er erklaert die Liste darunter.
   Aussehen kommt von .x-notice aus assets/css/02-elements.css — hier nur
   die Anordnung von Zeichen und Text nebeneinander. */
.x262-voteday__notice { padding: 1.25rem 1.25rem 0; }

.x262-voteday__note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .625rem;
    align-items: start;
}
.x262-voteday__icon {
    display: block;
    color: var(--brand-strong);
    margin-top: .05rem;
}
.x262-voteday__icon svg { display: block; width: 1.125rem; height: 1.125rem; }

/* ---- Inhaltsverzeichnis in der Seitenspalte ------------------------------
   Sprungmarken auf die Abstimmungstage. Ruhig gesetzt: es ist der Wegweiser
   zur Seite, nicht ihr Inhalt. */
.x262-votetoc {
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 1rem 1.125rem;
    margin-bottom: 1.5rem;
}
.x262-votetoc__title {
    margin: 0 0 .5rem;
    font: var(--w-heading, 500) var(--fs-body-sm)/1.3 var(--font-body);
    color: var(--text);
}
.x262-votetoc__group {
    margin: .875rem 0 .25rem;
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
}
.x262-votetoc__group:first-of-type { margin-top: 0; }

.x262-votetoc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.x262-votetoc__list li { display: grid; gap: .05rem; }
.x262-votetoc__list a {
    font-size: var(--fs-body-sm);
    color: var(--text);
    text-decoration: none;
}
.x262-votetoc__list a:hover { color: var(--brand-strong); text-decoration: underline; }
.x262-votetoc__list span { font-size: var(--fs-body-sm); color: var(--text-muted); }

/* ---- Abschnitt als Akkordeon ---------------------------------------------
   „Prossime votazioni", „Già votate", „Anni precedenti" — dasselbe Muster wie
   die Archivjahre („+" / „–" rechts), eine Ebene höher. Die Überschrift
   behält das h3-Aussehen der Website; hier steht nur Anordnung und Zeichen. */
.x262-votesec { margin-top: 2.5rem; }

.x262-votesec__head {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: 0 0 .625rem;
    border-bottom: 1px solid var(--border);
}
.x262-votesec__head::-webkit-details-marker { display: none; }
.x262-votesec__head::after {
    content: "+";
    margin-left: auto;
    font: var(--w-heading, 500) var(--fs-h4)/1 var(--font-display);
    color: var(--brand-strong);
}
.x262-votesec[open] > .x262-votesec__head::after { content: "–"; }
.x262-votesec__head:hover .x262-votesec__title { color: var(--brand-strong); }
.x262-votesec__head:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

/* Section title as the design's <h2> ("Archivio votazioni"): display face
   at --fs-h2, the style guide's H2. It stays an h3 in the page outline. */
.x262-votesec__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--w-display);
    line-height: var(--lh-h2);
    letter-spacing: var(--tr-h2);
}
/* The section's one-line hint sits right of the title, as in the design's
   section heads ("Per anno"); the + / – follows it. */
.x262-votesec__hint {
    margin-left: auto;
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
}
.x262-votesec__head:has(.x262-votesec__hint)::after { margin-left: .75rem; }
.x262-votesec__body  { padding-top: .75rem; }

/* ---- Colours: sì = green, no = red — everywhere ---------------------------
   Our parola and the result of the vote speak the same language, as on
   svp.ch/parolen: solid colour, white letters. Freedom of vote stays
   neutral; a parola not yet decided is dashed. Last in the file, so it wins
   over the border shorthand of each element above. */
.x262-vote__chip--ja    { color: var(--paper); background: var(--green-600); border-color: var(--green-600); }
.x262-vote__chip--nein  { color: var(--paper); background: var(--red-600); border-color: var(--red-600); }
.x262-vote__chip--frei  { color: var(--text-2); background: var(--surface-2); border-color: var(--border); }
.x262-vote__chip--offen { color: var(--text-muted); background: transparent; border-color: var(--border); border-style: dashed; }