/* Votes page politiq.ch/live/abstimmungen/ (PRP-VOTE-001 §7). Uses the shell tokens (--s-*, --ci-*)
   like live.css; dark by default, light on request (CI 1.1). Votes are shown in colour AND text. */

#pq-start-designs .vt{--vt-top:0px;--vt-notice-h:0px;
  --vt-prov-bg:#f2c230;--vt-prov-ink:#1b1b1b;--vt-prov-soft:rgba(242,194,48,.12);
  --vt-yes-bg:rgba(92,194,140,.18);--vt-yes-line:#5cc28c;--vt-yes-ink:#bff0d4;
  --vt-no-bg:rgba(255,107,107,.18);--vt-no-line:#ff7b7b;--vt-no-ink:#ffd0d0;
  --vt-abstain-bg:rgba(138,180,232,.18);--vt-abstain-line:#8ab4e8;--vt-abstain-ink:#d8e7fb;
  --vt-unknown-line:#e8c79a;--vt-unknown-ink:#f3dcb8;
  --vt-notice-bg:#7f1d1d;--vt-notice-ink:#fff;
  max-width:1500px;margin:0 auto;padding:0 5% 36px}
html[data-theme=light] #pq-start-designs .vt{
  --vt-yes-bg:#e1f3e8;--vt-yes-line:#1f7a4a;--vt-yes-ink:#124a2c;
  --vt-no-bg:#fbe3e3;--vt-no-line:#b3261e;--vt-no-ink:#7a1a14;
  --vt-abstain-bg:#e3ecfa;--vt-abstain-line:#1d4f91;--vt-abstain-ink:#163d70;
  --vt-unknown-line:#8a5a00;--vt-unknown-ink:#6b4500;
  --vt-notice-bg:#b71c1c;--vt-notice-ink:#fff}
#pq-start-designs .vt-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


#pq-start-designs .vt-bar{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 22px;margin:18px 0 6px}
#pq-start-designs .vt-title{font-size:clamp(24px,2.4vw,32px)}
#pq-start-designs .vt-back{order:2;margin-left:auto;font-size:14px;text-decoration:underline;text-underline-offset:3px}
#pq-start-designs .vt-method{max-width:110ch;font-size:14px;line-height:1.55;color:var(--s-muted);margin-bottom:14px}
#pq-start-designs .vt-method a{color:var(--s-ink);text-decoration:underline;text-underline-offset:3px}
#pq-start-designs .vt-credit{display:block;margin-top:4px;font-size:12.5px}
#pq-start-designs .vt-state{margin:0 0 14px;padding:10px 14px;border:1px solid var(--s-gold);border-radius:6px;background:var(--s-surface);color:var(--s-ink);max-width:none}
#pq-start-designs .vt-state.is-error{border-color:var(--s-red)}

/* ---- layout ---- */
#pq-start-designs .vt-grid{display:grid;grid-template-columns:minmax(290px,30%) minmax(0,1fr);gap:28px;align-items:start}
#pq-start-designs .vt-side{position:sticky;top:calc(var(--vt-top) + var(--vt-notice-h) + 12px);max-height:calc(100vh - var(--vt-top) - var(--vt-notice-h) - 24px);overflow:auto;padding-right:6px;scrollbar-gutter:stable}
#pq-start-designs .vt-side-head{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
#pq-start-designs .vt-field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--s-muted)}
#pq-start-designs .vt-field select,#pq-start-designs .vt-field input{font:inherit;font-size:15px;color:var(--s-ink);background:var(--s-surface);border:1px solid var(--s-line);border-radius:6px;min-height:42px;padding:6px 10px;min-width:0}
#pq-start-designs .vt-field input:focus,#pq-start-designs .vt-field select:focus{outline:2px solid var(--ci-focus);outline-offset:1px}
#pq-start-designs .vt-excel{min-height:40px;padding:6px 14px;font-size:14px;justify-content:flex-start}

/* ---- list of votes ---- */
#pq-start-designs .vt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
#pq-start-designs .vt-item{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;min-height:0;padding:10px 12px;text-align:left;border-radius:10px;background:var(--s-surface)}
#pq-start-designs .vt-item[aria-current=true]{border-color:var(--s-gold);box-shadow:inset 4px 0 0 var(--s-gold)}
#pq-start-designs .vt-item-top{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:13px;color:var(--s-muted)}
#pq-start-designs .vt-item-top time{font-weight:700;color:var(--s-ink);font-variant-numeric:tabular-nums}
#pq-start-designs .vt-item-top .vt-status{margin-left:auto}
#pq-start-designs .vt-item-subject{font-size:14.5px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#pq-start-designs .vt-item-business{font-size:12.5px;line-height:1.35;color:var(--s-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#pq-start-designs .vt-status{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid currentColor;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap;color:var(--s-muted)}
#pq-start-designs .vt-status.is-official{color:var(--vt-abstain-ink);border-color:var(--vt-abstain-line)}
#pq-start-designs .vt-status.is-provisional{color:var(--vt-prov-ink);background:var(--vt-prov-bg);border-color:var(--vt-prov-bg)}
#pq-start-designs .vt-provisional{margin:0;padding:8px 12px;border:1px solid var(--vt-prov-bg);border-left-width:5px;border-radius:6px;background:var(--vt-prov-soft);color:var(--s-ink);font-size:14px;font-weight:600;line-height:1.45;max-width:none}

/* ---- totals ---- */
#pq-start-designs .vt-totals{display:flex;flex-wrap:wrap;gap:4px 6px}
#pq-start-designs .vt-total{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;border:1px solid var(--s-line);font-size:12px;color:var(--s-ink);white-space:nowrap}
#pq-start-designs .vt-total b{font-variant-numeric:tabular-nums}

/* ---- head of the selected vote ---- */
#pq-start-designs .vt-main{scroll-margin-top:10px}
#pq-start-designs .vt-head{padding:14px 16px;border:1px solid var(--s-line);border-radius:10px;background:var(--s-surface);display:flex;flex-direction:column;gap:8px}
#pq-start-designs .vt-head-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:13px;color:var(--s-muted);max-width:none}
#pq-start-designs .vt-head-meta time{color:var(--s-ink);font-weight:600;font-variant-numeric:tabular-nums}
#pq-start-designs .vt-head-title{font-size:clamp(17px,1.4vw,20px);line-height:1.3;max-width:none}
#pq-start-designs .vt-head-title a{text-decoration:underline;text-underline-offset:4px}
#pq-start-designs .vt-head-subject{font-size:15px;max-width:none}
#pq-start-designs .vt-label{color:var(--s-muted);font-size:13px;margin-right:6px}
#pq-start-designs .vt-wording{padding:8px 10px;border-left:3px solid var(--s-line)}
#pq-start-designs .vt-meaning{display:grid;grid-template-columns:max-content 1fr;gap:2px 10px;margin:0;font-size:14px}
#pq-start-designs .vt-wording-note{margin-top:4px;font-size:12px;font-style:italic;color:var(--s-muted);max-width:none}
#pq-start-designs .vt-meaning dt{color:var(--s-muted);font-size:13px}
#pq-start-designs .vt-meaning dd{margin:0}
#pq-start-designs .vt-totals-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;max-width:none}
#pq-start-designs .vt-totals-row .vt-label{min-width:5em}
#pq-start-designs .vt-checks,#pq-start-designs .vt-pdf{font-size:13.5px;color:var(--s-muted);max-width:none}
#pq-start-designs .vt-pdf a{color:var(--s-ink);text-decoration:underline;text-underline-offset:3px}
#pq-start-designs .vt-hint{margin:10px 0 0;padding:10px 14px;font-weight:600;border:1px solid var(--vt-no-line);border-left-width:4px;border-radius:6px;font-size:14px;max-width:none}
#pq-start-designs .vt-hint.is-official{border-color:var(--vt-abstain-line)}

/* ---- tools ---- */
#pq-start-designs .vt-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;margin:14px 0 10px}
#pq-start-designs .vt-search{flex:1 1 240px}
#pq-start-designs .vt-tools .vt-field:not(.vt-search){flex:0 1 220px}
#pq-start-designs .vt-count{font-size:13px;color:var(--s-muted);margin:0 0 10px;max-width:none}
#pq-start-designs .vt-tools .vt-excel{margin-left:auto}

/* ---- table: scrolls in its own frame, never the page (S-9); sized to fit below header and notice.
   The shell's scroll-padding-top already covers the sticky header. ---- */
#pq-start-designs .vt-table-wrap{overflow:auto;max-height:max(320px, calc(100vh - var(--vt-top) - 36px));scroll-margin-top:10px;border:1px solid var(--s-line);border-radius:10px;background:var(--s-surface)}
#pq-start-designs .vt-table-wrap:focus{outline:2px solid var(--ci-focus);outline-offset:2px}
#pq-start-designs .vt-table{width:100%;border-collapse:collapse;font-size:14px}
#pq-start-designs .vt-table thead th{position:sticky;top:0;z-index:1;background:var(--s-surface);border-bottom:1px solid var(--s-line);padding:0;text-align:left;white-space:nowrap}
#pq-start-designs .vt-sort{display:flex;align-items:center;gap:6px;width:100%;min-height:40px;padding:6px 10px;border:0;border-radius:0;background:transparent;color:var(--s-ink);font-size:13px;font-weight:700;justify-content:flex-start}
#pq-start-designs .vt-sort:hover{background:var(--s-soft)}
#pq-start-designs .vt-sort:focus-visible{outline:2px solid var(--ci-focus);outline-offset:-2px}
#pq-start-designs .vt-sort-mark{font-size:11px;color:var(--s-muted)}
#pq-start-designs th[aria-sort=ascending] .vt-sort-mark,#pq-start-designs th[aria-sort=descending] .vt-sort-mark{color:var(--s-ink)}
#pq-start-designs .vt-table tbody th,#pq-start-designs .vt-table td{padding:6px 10px;text-align:left;vertical-align:middle;white-space:nowrap;border-top:1px solid var(--ci-border)}
#pq-start-designs .vt-table tbody th{font-weight:600}
/* the name stays in view while the table scrolls sideways */
#pq-start-designs .vt-table tbody th{position:sticky;left:0;background:var(--s-surface)}
#pq-start-designs .vt-table thead th:first-child{left:0;z-index:2}
#pq-start-designs .vt-table tbody tr:hover>*{background:var(--s-soft)}
#pq-start-designs .vt-name.is-empty{font-weight:400;font-style:italic;color:var(--s-muted)}
#pq-start-designs .vt-num{font-variant-numeric:tabular-nums}
#pq-start-designs .vt-empty{margin:12px 0;font-size:14px;color:var(--s-muted)}

/* ---- votes: colour and text (S-7); "not recognised" dashed, "no vote" hollow ---- */
#pq-start-designs .vt-vote{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;border:1px solid transparent;font-size:13px;font-weight:600;line-height:1.35}
#pq-start-designs .vt-v-yes{background:var(--vt-yes-bg);border-color:var(--vt-yes-line);color:var(--vt-yes-ink)}
#pq-start-designs .vt-v-no{background:var(--vt-no-bg);border-color:var(--vt-no-line);color:var(--vt-no-ink)}
#pq-start-designs .vt-v-abstain{background:var(--vt-abstain-bg);border-color:var(--vt-abstain-line);color:var(--vt-abstain-ink)}
#pq-start-designs .vt-vote.vt-v-none{background:transparent;border-color:var(--s-line);color:var(--s-muted);font-weight:500}
#pq-start-designs .vt-vote.vt-v-unrecognised,#pq-start-designs .vt-vote.vt-v-not_in_view{background:transparent;border:1px dashed var(--vt-unknown-line);color:var(--vt-unknown-ink);font-style:italic}
#pq-start-designs .vt-vote-mark{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--vt-unknown-line);color:var(--s-bg);font-style:normal;font-size:11px;font-weight:800}
#pq-start-designs .vt-vote.vt-v-absent,#pq-start-designs .vt-vote.vt-v-excused,#pq-start-designs .vt-vote.vt-v-president{background:var(--s-soft);border-color:var(--s-line);color:var(--s-muted);font-weight:500}
#pq-start-designs .vt-vote.vt-v-empty{color:var(--s-muted);font-weight:400}
#pq-start-designs .vt-total.vt-v-unrecognised{border-style:dashed}
#pq-start-designs .vt-total.vt-v-none,#pq-start-designs .vt-total.vt-v-absent,#pq-start-designs .vt-total.vt-v-excused{color:var(--s-muted)}

/* ---- phone and tablet ---- */
@media(max-width:1023px){
  #pq-start-designs .vt-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  #pq-start-designs .vt-side{position:static;max-height:none;overflow:visible;padding:0}
  #pq-start-designs .vt-list{max-height:42vh;overflow:auto;padding-right:4px}
  #pq-start-designs .vt-tools .vt-excel{margin-left:0;flex:1 1 100%;justify-content:center}
  #pq-start-designs .vt-back{order:0;margin-left:0;flex-basis:100%}
}