/* Liberty Score. One stylesheet for every page. Tokens come from the first site draft
   (projects/brand/site/index.html): the yellow field, the ink, Big Shoulders over Public Sans. */
:root{
  --field:#F4C430; --on-field:#14120B; --field-edge:#8F7420; --field-hi:#FFD95A;
  --bg:#101010; --panel:#191918; --sunk:#0A0A0A; --raise:#232322;
  --ink:#F3F1EA; --dim:#B4B2A8; --line:#2B2A27;
  --seal:#E9D9A6;
  --ga:#46CC82; --gb:#A9D84E; --gc:#E8DC82; --gd:#FF9A3D; --gf:#FF5A48; --on-grade:#16140A;
  --rep:#E5564A; --dem:#5B8DEF; --ind:#B9B7A6;
  --display:"Big Shoulders Display","Big Shoulders","Arial Narrow","Roboto Condensed",sans-serif;
  --body:"Public Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --gutter:16px; --col:72rem; --r:6px; --r2:10px;
  /* 13 October 2026, the calmer pass (Armin: "messy and chaotic, too much clutter ... simplified and look more
     beautiful"). One scale of space, used by everything new and by the section rhythm: 4 8 12 16 24 36 48.
     The line between things is quieter (it was #34332F), so a border separates without drawing a box. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:36px; --s7:48px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body);overflow-x:hidden}
::selection{background:var(--field);color:var(--on-field)}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--field);outline-offset:2px;border-radius:2px}
.field :focus-visible{outline-color:var(--field)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.95;margin:0;text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
/* Section heads were up to 3.25rem, as loud as a page title. One step down, so a page has one headline. */
h2{font-size:clamp(1.75rem,5vw,2.6rem);line-height:1}
h3{font-size:1.4rem;line-height:1.05}
p{margin:0}
.wrap{max-width:var(--col);margin:0 auto;padding:0 var(--gutter)}
.dim{color:var(--dim)}
.num{font-variant-numeric:tabular-nums lining-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.vh:focus{position:fixed;left:8px;top:8px;z-index:60;width:auto;height:auto;clip:auto;padding:12px 16px;background:var(--field);color:var(--on-field);font-weight:700}

/* top bar */
.stagebar{background:var(--gf);color:var(--on-grade);font-weight:700;font-size:.85rem;text-align:center;padding:6px 12px}
.top{position:sticky;top:0;z-index:20;background:var(--sunk);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;min-height:60px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.35rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.mark img{width:44px;height:44px;border-radius:50%}
.mark b{color:var(--field);font-weight:800}
/* A reader, 8 October 2026: on a computer monitor the stamp is too small to make out. The bar is 60px, so 56 fits. */
@media(min-width:1000px){.mark img{width:56px;height:56px}}
.top nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.top nav a{display:none;padding:10px 12px;text-decoration:none;font-weight:600;font-size:.95rem;border-radius:var(--r)}
.top nav a:hover{background:var(--raise)}
.top nav a[aria-current="page"]{color:var(--field)}
.top nav a.join{display:inline-flex;align-items:center;min-height:44px;background:var(--field);color:var(--on-field);padding:0 16px;font-weight:700}
.top nav a.join:hover{background:var(--field-hi)}
/* The links sit in the bar only where all of them fit on one line beside the mark (seven of them since
   4 October 2026; at 900px they ran over the mark). Narrower than that, the strip under the bar carries them. */
@media(min-width:1220px){.top nav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;padding:10px 9px}.top nav{gap:2px}}
.subnav{position:relative;display:flex;align-items:stretch;background:var(--sunk);border-bottom:1px solid var(--line);padding:0 0 0 8px}
/* the links fade out where they run under More, so the strip reads as one that scrolls */
.subnav-s{display:flex;gap:4px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:20px}
.subnav-s::-webkit-scrollbar{display:none}
.subnav .nav-more{border-left:1px solid var(--line)}
.subnav .nav-more-l{right:6px}
.subnav a{flex:none;padding:12px 10px;min-height:44px;text-decoration:none;font-weight:600;font-size:.92rem;color:var(--dim)}
.subnav a[aria-current="page"]{color:var(--field)}
@media(min-width:1220px){.subnav{display:none}}

/* the yellow field */
/* The head of a page and the closing band. Both were blocks of solid yellow until 5 October 2026, when
   Armin called the bright yellow ugly ("just fix it"). They are black now, like the rest of the page,
   and the yellow is spent on three things only: the headline, the buttons and the links. */
.field{background:var(--sunk);color:var(--ink);border-bottom:1px solid var(--line)}
.field h1{color:var(--field)}
.field h1 i{font-style:normal;color:var(--ink)}
.field.call{background:var(--panel);border-top:1px solid var(--line);border-bottom:0}
.field .btn-ink{background:var(--field);color:var(--on-field)}
.field .btn-ink:hover{background:var(--field-hi)}
.field .wrap{padding-top:var(--s6);padding-bottom:var(--s6)}
/* The front page's headline is two sentences since 7 October 2026 ("See how they voted. Then do something about
   it."). Until then it was the two-word wordmark LIBERTY SCORE at 21vw. Sized so the first sentence is one line on
   a 360px phone and in the left column of a wide screen. */
.hero h1{font-size:clamp(2.2rem,10.8vw,4.2rem);font-weight:900;line-height:.9;letter-spacing:-.01em}
@media(min-width:900px){.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end;padding-top:64px;padding-bottom:56px}}
.lede{font-size:1.25rem;line-height:1.35;font-weight:600;max-width:34ch;margin-top:16px}
.field .sub{margin-top:10px;max-width:46ch;color:var(--dim)}
.find{margin-top:24px;position:relative}
.find label{display:block;font-weight:700;margin-bottom:6px}
.find input,.tools input,.tools select{width:100%;min-height:52px;padding:0 14px;font:500 1.05rem/1 var(--body);color:var(--ink);background:var(--panel);border:1px solid var(--field-edge);border-radius:var(--r)}
.find input:focus,.tools input:focus,.tools select:focus{border-color:var(--field)}
.find input::placeholder{color:var(--dim)}
.hits{position:absolute;left:0;right:0;top:100%;z-index:10;margin:4px 0 0;padding:0;list-style:none;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 28px -8px rgba(0,0,0,.6);max-height:60vh;overflow:auto}
.hits:empty{display:none}
.hits a{display:flex;align-items:center;gap:10px;padding:10px 12px;min-height:48px;text-decoration:none;border-bottom:1px solid var(--line)}
.hits a:hover,.hits a:focus-visible{background:var(--raise)}
.hits .none{padding:12px;color:var(--dim)}
.hits a.allhits{font-weight:700;color:var(--field)}
.statepick{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.statepick select{min-height:48px;padding:0 12px;font:600 1rem/1 var(--body);background:var(--panel);color:var(--ink);border:1px solid var(--field-edge);border-radius:var(--r);max-width:100%}
.ballot{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-weight:600;max-width:46ch}
.ballot b{font:900 1.6rem/1 var(--display);letter-spacing:.01em;color:var(--field)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;font:700 1rem/1 var(--body);text-decoration:none;border-radius:var(--r);border:2px solid transparent;cursor:pointer;transition:transform .15s cubic-bezier(.16,1,.3,1),background-color .15s}
.btn:active{transform:translateY(1px)}
.btn-key{background:var(--field);color:var(--on-field)}
/* A filled button keeps its own text colour wherever it sits. Until 6 October 2026 a container that colours its links (.prose a and nine like it) beat .btn-key, so the support button on About was yellow on yellow: a blank block (found by a reader). */
.btn.btn-key,.btn.btn-key:visited{color:var(--on-field)}
.btn-key:hover{background:var(--field-hi)}
.btn-ink{background:var(--on-field);color:var(--field)}
.btn-ink:hover{background:#2A2710}
.btn-line{border-color:currentColor;background:transparent;color:inherit}
.btn-line:hover{background:rgba(127,127,110,.16)}
.row{display:flex;flex-wrap:wrap;gap:10px}

/* sections */
/* 14 October 2026 (look.css says why): space does the separating. A section has more room and no longer draws a line
   above itself. These three lines are changed HERE and not in look.css, because rules further down this file give
   single sections their own padding (.disc, .latest, .nudge-sec) and a later ".sec" would have undone them. */
.sec{padding:56px 0}
@media(max-width:699px){.sec{padding:44px 0}}
.sec + .sec{border-top:0}
.sec + .sec-alt,.sec-alt + .sec{border-top:0}
.sec-alt{background:var(--panel)}
.sec h2 + p{margin-top:12px;max-width:62ch;color:var(--dim);font-size:1.05rem}
.more{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-weight:700}

/* grade stamps */
.g{display:inline-flex;align-items:center;justify-content:center;font:900 1.9rem/1 var(--display);width:56px;height:56px;flex:none;border-radius:var(--r);color:var(--on-grade);letter-spacing:0}
.g-a{background:var(--ga)}.g-b{background:var(--gb)}.g-c{background:var(--gc)}.g-d{background:var(--gd)}.g-f{background:var(--gf)}
.g-n{background:transparent;color:var(--dim);border:2px dashed var(--line);font-size:1.3rem}
.g-sm{width:40px;height:40px;font-size:1.4rem}
.tile.empty{opacity:.62}

/* distribution */
.dist{margin-top:22px;display:grid;gap:8px}
.dist-row{display:grid;grid-template-columns:28px 1fr 3.2rem;gap:10px;align-items:center}
.dist-row b{font:900 1.5rem/1 var(--display)}
.dist-bar{height:26px;background:var(--sunk);border-radius:2px;overflow:hidden;display:flex}
.dist-bar i{display:block;height:100%}
.dist-bar .r{background:var(--rep)}.dist-bar .d{background:var(--dem)}.dist-bar .i{background:var(--ind)}
.dist-row span{text-align:right;color:var(--dim)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;color:var(--dim);font-size:.9rem}
.legend i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* people rows and cards */
.people{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
@media(min-width:700px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1060px){.people.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.person{display:flex;align-items:center;gap:12px;padding:10px 12px;min-height:76px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);text-decoration:none;transition:border-color .15s,background-color .15s}
.sec-alt .person{background:var(--bg)}
.person:hover{border-color:var(--field);background:var(--raise)}
.face{width:52px;height:52px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 18%;background:var(--raise);border:2px solid var(--ind)}
.face.R{border-color:var(--rep)}.face.D{border-color:var(--dem)}
span.face{display:inline-flex;align-items:center;justify-content:center;font:800 1.2rem/1 var(--display);color:var(--dim)}
.person .who{min-width:0;flex:1}
.person .who strong{display:block;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.person .who span{display:block;color:var(--dim);font-size:.88rem;line-height:1.3;margin-top:2px}
.person .who .tag{display:inline-block;font-size:.75rem;margin-top:5px;color:var(--field)}
.tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border:1px solid currentColor;border-radius:2px;white-space:nowrap}
.tag.ballot-tag{color:var(--field)}
.two{display:grid;gap:32px}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr}}
.two .people{grid-template-columns:1fr}
@media(max-width:340px){.person{gap:8px;padding:8px}.face{width:40px;height:40px}.person>.g{width:46px;height:46px;font-size:1.6rem}}

/* measures */
.measures{margin:22px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
@media(min-width:760px){.measures{grid-template-columns:1fr 1fr;column-gap:40px}}
.measures div{padding:14px 0;border-bottom:1px solid var(--line)}
.measures dt{font:800 1.3rem/1.05 var(--display);text-transform:uppercase}
.measures dd{margin:6px 0 0;color:var(--dim)}

/* steps */
.steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:18px}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr);gap:28px}}
.steps strong{display:block;font:800 1.5rem/1 var(--display);text-transform:uppercase;margin-bottom:6px}
.steps span{color:var(--dim)}
.facts3 a{color:var(--ink);font-weight:600}

/* call to join */
.call h2{font-size:clamp(2.4rem,9vw,4.5rem);font-weight:900}
.call p{margin-top:12px;font-weight:600;font-size:1.1rem;max-width:44ch}
.call .row{margin-top:20px}

/* list tools */
.tools{display:grid;gap:10px;margin-top:20px}
@media(min-width:760px){.tools{grid-template-columns:repeat(3,minmax(0,1fr))}.tools>div:first-child{grid-column:1/-1}}
@media(min-width:1060px){.tools{grid-template-columns:1.6fr repeat(6,minmax(0,1fr))}.tools>div:first-child{grid-column:auto}}
.racehint{margin-top:14px;max-width:62ch;font-weight:600}
.racehint a{color:var(--field)}
.count a{color:var(--field);font-weight:600}
.tools input,.tools select{background:var(--panel);color:var(--ink);border:1px solid var(--line);min-height:48px;font-size:1rem}
.tools input::placeholder{color:var(--dim)}
.tools label{display:block;font-size:.8rem;font-weight:700;color:var(--dim);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.check{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:12px;font-weight:600}
.check input{width:22px;height:22px;accent-color:var(--field)}
.count{margin-top:14px;color:var(--dim)}
[hidden]{display:none!important}

/* member page */
.crumb{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none;color:var(--dim)}
.crumb:hover{color:var(--ink)}
.member{display:flex;flex-direction:column;padding:8px 0 40px}
.member .bio{order:0;margin-bottom:24px}
.member-main{display:contents}
.member-main>*{order:6}
.member-main>.verdict{order:1}.member-main>.tiles{order:2}.member-main>.share{order:3}.member-main>.money{order:3}
/* Campaign money (render.py money_block, money_line): what a campaign reported to the FEC. */
.money{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.money h3{margin-top:26px;font:700 1.05rem/1.3 var(--body);letter-spacing:0;text-transform:none}
.money-sum{margin-top:10px;font-size:1.05rem}.money-sum .num{font-weight:800;font-size:1.5rem;color:var(--ink)}
.money-split,.money-rows{list-style:none;margin:12px 0 0;padding:0}
.money-split li{display:grid;grid-template-columns:3.4em 1fr auto;gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.money-split b{font-size:1.15rem}.money-split li>.num{color:var(--dim)}
.money-rows li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.money-rows li span:first-child{min-width:0;overflow-wrap:anywhere}.money-rows .num{flex:none;font-weight:600}
.money .dim{margin-top:10px;font-size:.92rem}.money-src a{color:var(--field)}
.cand-money{margin-top:12px;font-size:.92rem;color:var(--dim)}.cand-money a{color:var(--field);white-space:nowrap}
.member .factbox{order:4;margin-top:28px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
@media(min-width:900px){.member{display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:48px;row-gap:8px;grid-template-areas:"bio main" "facts main";grid-template-rows:auto 1fr;align-items:start}.member .bio{margin-bottom:0}.member-main{display:block}.member .factbox{margin-top:16px;padding:0;background:none;border:0}}
.bio{grid-area:bio;display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:center}
.member-main{grid-area:main;min-width:0}
.factbox{grid-area:facts}
@media(min-width:900px){.bio{display:block}}
.portrait{width:88px;height:auto;align-self:start;aspect-ratio:9/11;object-fit:cover;border-radius:var(--r);border:3px solid var(--ind);background:var(--raise)}
.portrait.R{border-color:var(--rep)}.portrait.D{border-color:var(--dem)}
span.portrait{display:flex;align-items:center;justify-content:center;font:900 2.4rem/1 var(--display);color:var(--dim)}
@media(min-width:900px){.portrait{width:100%}}
.bio h1{font-size:2.1rem;overflow-wrap:anywhere}
@media(min-width:900px){.bio h1{margin-top:16px;font-size:2.4rem}}
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.95rem}
.facts dt{color:var(--dim)}
.facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.reach{margin-top:14px;display:grid;gap:8px}
.reach .btn{padding:0 12px;white-space:nowrap}
.verdict{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.verdict .g{width:112px;height:112px;font-size:4.6rem}
.verdict .g-n{font-size:1.1rem;text-align:center;padding:8px;line-height:1.15;font-family:var(--body);font-weight:700}
.verdict h2{font-size:clamp(1.7rem,5vw,2.4rem)}
.verdict p{margin-top:8px;color:var(--dim)}
/* A phone: the 112px grade beside the score squeezed the sentence to five words a line (31 October 2026). The grade now sits
   beside the short heading only ("Gets an F"), and the score and everything under it run the full width below. */
@media(max-width:599px){
  .verdict{row-gap:12px}
  .verdict>div{display:contents}
  .verdict .g{width:88px;height:88px;font-size:3.6rem}
  .verdict .g-n{font-size:1rem;padding:6px}
  .verdict>div>*:not(h2){grid-column:1/-1}
  .verdict>div>p:first-of-type{margin-top:0}
}
.tiles{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:620px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);min-height:64px}
.tile b{display:block;font-size:.9rem;line-height:1.2}
.tile div span{display:block;color:var(--dim);font-size:.82rem;margin-top:2px}
.share{margin-top:20px}
.votes-head{margin-top:40px}
.chips{display:flex;gap:8px;overflow-x:auto;margin:16px calc(var(--gutter) * -1) 0;padding:0 var(--gutter) 6px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.chip{flex:none;min-height:44px;padding:0 14px;font:600 .92rem/1 var(--body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--field);color:var(--on-field);border-color:var(--field)}
.votes{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.vote{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.vote .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--dim);font-size:.88rem}
.vote h3{font:700 1.12rem/1.3 var(--body);text-transform:none;letter-spacing:0;margin-top:8px}
.vote p{margin-top:8px;color:var(--dim);max-width:70ch}
.sides{margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(min-width:620px){.sides{grid-template-columns:1fr 1fr 1fr}}
.sides div{background:var(--bg);padding:10px 12px}
.sides dt{color:var(--dim);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.sides dd{margin:4px 0 0;font-weight:700}
.sides .out{grid-column:1/-1}
@media(min-width:620px){.sides .out{grid-column:auto}}
.out.aligned dd{color:var(--ga)}.out.against dd{color:var(--gf)}.out.none dd{color:var(--dim)}
/* the letter beside one line or one vote, the same box as the tiles above the list */
.sides .out.lt{position:relative;padding-left:64px;min-height:60px;display:flex;flex-direction:column;justify-content:center}
.out.lt .g{position:absolute;left:12px;top:50%;transform:translateY(-50%)}
.vote .links{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.92rem}
.vote .links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* vote pages: tighter member rows, the party split under a count, and titles that link to a vote */
.tight .person{min-height:56px;padding:6px 10px}
.tight .face{width:40px;height:40px}
.sides dd.by{color:var(--dim);font-weight:400;font-size:.88rem}
.vote h3 a,.reg strong a{display:inline-block;min-height:0;padding:10px 0;margin:-10px 0;font:inherit}

/* the November ballot: race cards, candidate cards, the side-by-side table */
.racelist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
@media(min-width:700px){.racelist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1060px){.racelist{grid-template-columns:repeat(3,minmax(0,1fr))}}
.race{display:grid;gap:10px;align-content:start;height:100%;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .15s,background-color .15s}
.sec-alt .race{background:var(--bg)}
.race:hover{border-color:var(--field);background:var(--raise)}
.rc-head{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.rc-head strong{font:800 1.4rem/1 var(--display);text-transform:uppercase;margin-right:auto}
.rc-head .tag{color:var(--field)}
.rc-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center}
.rc-row .face{width:44px;height:44px}
.rc-row b{display:block;line-height:1.2;overflow-wrap:anywhere}
.rc-row small{display:block;color:var(--dim);font-size:.84rem;line-height:1.3;margin-top:2px}
.rc-more{color:var(--dim);font-size:.88rem}
.statepick select option,.tools select option{color:var(--ink);background:var(--panel)}
.cands{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:760px){.cands{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cand{display:grid;gap:14px;align-content:start;padding:16px;background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--ind);border-radius:var(--r)}
.cand.R{border-top-color:var(--rep)}.cand.D{border-top-color:var(--dem)}
.cand-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.cand-top h2{font-size:clamp(1.6rem,6vw,2.2rem);overflow-wrap:anywhere}
.cand-top p{color:var(--dim);margin-top:4px;font-size:.95rem}
.cand-grade{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.cand-grade .g{width:76px;height:76px;font-size:3.2rem}
.cand-grade .g-n{font:700 .88rem/1.15 var(--body);text-align:center;padding:6px}
.cand-grade b{display:block;font-size:1.15rem}
.cand-grade p{color:var(--dim);margin-top:4px}
.cmp{margin-top:18px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cmp-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:1px;background:var(--line)}
.cmp-m{grid-column:1/-1;background:var(--panel);padding:8px 12px;font-weight:700}
.cmp-c{background:var(--bg);padding:10px 12px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;min-height:60px}
.cmp-c b{display:block;font-size:.78rem;color:var(--dim);font-weight:700;text-transform:uppercase;letter-spacing:.04em;overflow-wrap:anywhere}
.cmp-c span{font-size:.9rem;line-height:1.3}
.cmp-c .g{font-size:1.4rem}
.cmp-c a{color:var(--field)}
@media(min-width:760px){.cmp-row{grid-template-columns:minmax(0,1.2fr) repeat(var(--n),minmax(0,1fr))}.cmp-m{grid-column:auto;display:flex;align-items:center}}
.vote blockquote{margin:10px 0 0;padding:2px 0 2px 12px;border-left:3px solid var(--field-edge);max-width:70ch}
.member-main>.racenote{order:1}
.racenote{margin-top:18px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--field);border-radius:var(--r);display:grid;gap:12px;justify-items:start}
.racenote p{font-weight:600;max-width:60ch}

/* prose pages */
.prose{max-width:68ch}
.prose h2{margin-top:44px;font-size:2rem}
.prose h3{margin-top:28px}
.prose p,.prose ul,.prose ol{margin-top:14px}
.prose li{margin-top:6px}
.prose a{color:var(--field)}
.prose a.person{color:var(--ink)}
.prose .people li{margin-top:0}
.big{font-size:1.3rem;line-height:1.4;font-weight:600}
.table{width:100%;border-collapse:collapse;margin-top:16px;font-size:.95rem}
.table th,.table td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.table th{color:var(--dim);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.scroll{overflow-x:auto}
.reg{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;max-width:none}
.reg li{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0}
.reg .meta{color:var(--dim);font-size:.86rem;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.reg strong{display:block;margin-top:4px}
.reg .why{color:var(--dim);margin-top:4px;font-size:.95rem}
.reg .lk{display:flex;gap:20px}
.reg a{display:inline-flex;align-items:center;min-height:44px;color:var(--field);font-weight:600;font-size:.9rem}

/* the two questions, and plain paragraphs after a section lead */
.sec .plain{margin-top:12px;max-width:62ch;font-size:1.05rem}
.qs{list-style:none;counter-reset:q;margin:18px 0 6px;padding:0;display:grid;gap:14px;max-width:60ch}
.qs li{counter-increment:q;display:grid;grid-template-columns:2.4rem 1fr;gap:6px;font-size:1.2rem;line-height:1.4;font-weight:600}
.qs li::before{content:counter(q);font:900 2.2rem/1 var(--display);color:var(--field)}

/* the notice above the header, and the note box on every page */
.beta{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;min-height:44px;padding:8px 14px;background:var(--raise);color:var(--ink);font-size:.92rem;text-align:center;text-decoration:none;border-bottom:1px solid var(--line)}
.beta b{color:var(--field);text-decoration:underline;text-underline-offset:3px}
.fb{background:var(--panel);border-top:1px solid var(--line)}
.fbform{margin-top:20px;max-width:44rem;display:grid;gap:8px}
.fbform fieldset{border:0;margin:0;padding:0;min-width:0}
.fbform legend,.fbform>label{display:block;padding:0;margin-top:10px;font-weight:700}
.picks{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pick{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:var(--bg);border:1px solid var(--line);border-radius:999px;font-weight:600;font-size:.95rem;cursor:pointer}
.pick input{width:18px;height:18px;margin:0;accent-color:var(--field)}
.pick:has(input:checked){border-color:var(--field)}
.fbform textarea,.fbform input[type=text],.fbform input[type=url],.fbform input[type=email]{width:100%;padding:12px 14px;font:500 1rem/1.5 var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.fbform input[type=text],.fbform input[type=url],.fbform input[type=email]{min-height:48px;padding:0 14px}
.fbrow{display:grid;gap:8px}
.fbrow>label{margin-top:10px;font-weight:700}
.fbhint{color:var(--dim);font-size:.92rem;max-width:62ch}
.fbcheck{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.fbcheck input{width:20px;height:20px;margin:0;accent-color:var(--field)}
.fbnote a{color:var(--field);font-weight:700}
.fbform textarea{min-height:8rem;resize:vertical}
.fbform textarea::placeholder{color:var(--dim)}
.fbform .row{margin-top:10px}
.fbform button[disabled]{opacity:.6;cursor:default}
.fbabout{margin-top:10px;padding:8px 12px;background:var(--bg);border:1px solid var(--field-edge);border-radius:var(--r);font-size:.95rem;overflow-wrap:anywhere}
.fbnote{min-height:1.5em;font-weight:600;color:var(--ga)}
.fbnote.bad{color:var(--gd)}
.fbfine{margin-top:14px;color:var(--dim);font-size:.92rem;max-width:62ch}
.fbfine a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600}

/* footer */
/* 13 October 2026, second pass: the footer was 1,129px tall on a phone. It is one line about the site, the links the
   menu does not hold (two columns on a phone, one row on a wide screen), and the one sentence the law asks for. What it
   used to say about sources and photographs is on methodology/#sources and photos/. */
footer{background:var(--sunk);border-top:1px solid var(--line);padding:20px 0 96px;color:var(--dim);font-size:.9rem;line-height:1.5}
footer .foot-who strong{color:var(--ink)}
footer a{display:inline-flex;align-items:center;min-height:40px;color:var(--ink);font-weight:600;line-height:1.25}
footer ul{list-style:none;margin:0;padding:0}
footer .foot-l{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
@media(min-width:760px){footer .foot-l{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:0}}
footer .fine{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);max-width:80ch;font-size:.85rem}


/* faces everywhere a candidate is named, and the mark for a candidate with no votes: the same letter in
   the same box as a grade made of votes, drawn as an outline instead of filled, so the two can be compared
   and never mistaken for each other */
.face-lg{width:76px;height:76px}
span.face-lg{font-size:1.7rem}
.g-r{background:transparent;border:3px solid currentColor}
.g-sm.g-r{border-width:2px}
.r-a{color:var(--ga)}.r-b{color:var(--gb)}.r-c{color:var(--gc)}.r-d{color:var(--gd)}.r-f{color:var(--gf)}
.key{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;max-width:64ch}
.key li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;color:var(--dim);font-size:.92rem;line-height:1.35}
.key .g{justify-self:start}
@media(min-width:1000px){.key{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:none}}
.hits .face{width:40px;height:40px}
.hits .who{flex:1;min-width:0}

/* asking the reader for one specific thing: the strip on a page, the three jobs on the front page, and
   the button that stays in the corner */
.ask{display:grid;gap:12px;justify-items:start;margin-top:18px;padding:14px 16px;background:var(--panel);border:1px solid var(--field-edge);border-radius:var(--r)}
.ask p{font-weight:600;max-width:60ch}
.ask p a{color:var(--field)}

/* what readers say: their words, the videos they shared, and what other readers made of them.
   The build prints the heading, one line and the buttons; community.js draws the posts between them. */
.talk{margin-top:44px;scroll-margin-top:84px}
.talk>h2{font-size:2rem}
.talk-lede{margin-top:10px;max-width:62ch;color:var(--dim)}
.talk-h1{font-size:clamp(2.2rem,8vw,3.6rem);font-weight:900;overflow-wrap:anywhere}
.talk-all{margin-top:26px}
.talk-list,.mod-list{max-width:48rem}
.tv-youtube .tv-play{aspect-ratio:16/9;min-height:0}      /* no minimum height: with a fixed shape, a minimum height forces a width wider than a phone */
.talk-sort{margin-top:0}
.talk-go{margin-top:14px}
.said{scroll-margin-top:84px}
.said .meta b{color:var(--ink)}
.said .meta .tag{color:var(--dim)}
.said .meta .tag.best{color:var(--field)}
.tag.ok{color:var(--ga)}
.said blockquote{font-size:1.05rem;line-height:1.5;overflow-wrap:anywhere;white-space:pre-line}
.said-on,.said-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--field);overflow-wrap:anywhere}
.said-link{font-weight:600;margin-top:4px}
/* a post only its author can see yet: a dashed edge, and the reason in a line of its own */
.said.own{border-style:dashed;border-color:var(--field-edge)}
.vote .said-note{margin-top:12px;color:var(--ink);font-size:.95rem;font-weight:600}
.vote .said-msg{margin-top:8px;font-size:.92rem;font-weight:600;color:var(--dim)}
.vote .said-msg.bad{color:var(--gd)}
/* like, unlike, report */
.said-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.vt{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;background:var(--bg);border:1px solid var(--line);border-radius:999px;color:var(--ink);font:600 .92rem/1 var(--body);cursor:pointer;transition:border-color .15s,background-color .15s,color .15s,transform .15s cubic-bezier(.16,1,.3,1)}
.vt svg{flex:none}
.vt b{font-weight:700;font-variant-numeric:tabular-nums lining-nums;min-width:1ch;text-align:right}
.vt:hover{border-color:var(--dim)}
.vt:active{transform:translateY(1px)}
.vt-up[aria-pressed="true"]{background:var(--ga);border-color:var(--ga);color:var(--on-grade)}
.vt-down[aria-pressed="true"]{background:var(--gf);border-color:var(--gf);color:var(--on-grade)}
.vt[disabled]{color:var(--dim);cursor:default}
.vt[disabled]:hover{border-color:var(--line)}
.rp{position:relative;margin-left:auto}
.rp-b{min-height:44px;padding:0 6px;background:none;border:0;color:var(--dim);font:600 .9rem/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rp-b:hover,.rp-b[aria-expanded="true"]{color:var(--ink)}
.rp-m{position:absolute;right:0;top:calc(100% + 2px);z-index:12;display:grid;width:max-content;min-width:13rem;max-width:calc(100vw - 64px);padding:4px;background:var(--raise);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 30px -10px rgba(0,0,0,.75)}
.rp-m button{min-height:46px;padding:0 12px;text-align:left;background:none;border:0;border-radius:2px;color:var(--ink);font:600 .95rem/1.2 var(--body);cursor:pointer}
.rp-m button:hover,.rp-m button:focus-visible{background:var(--panel)}
.rp-team{margin:0;padding:8px 12px;max-width:17rem;border-top:1px solid var(--line);color:var(--field);font:600 .8rem/1.4 var(--body)}
.rp-done{display:inline-flex;align-items:center;min-height:44px;color:var(--dim);font-size:.9rem;font-weight:600}
/* waiting, nothing yet, could not load: the same box, so the page does not jump between them */
.talk-list{margin-top:16px}
.vote.sk{min-height:92px}
.vote.sk::before,.vote.sk::after{content:"";display:block;height:12px;border-radius:2px;background:var(--raise)}
.vote.sk::before{width:36%}
.vote.sk::after{width:84%;margin-top:16px;box-shadow:0 24px 0 var(--raise)}
.talk-state{display:grid;gap:12px;align-content:center;justify-items:start;min-height:194px;padding:20px 16px;border:1px dashed var(--line);border-radius:var(--r)}
.talk-state p{max-width:44ch;font-weight:600;font-size:1.05rem}
.mod-list .talk-state{min-height:0}

/* the account control in the header */
.top nav a.acct{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line);font-weight:700;white-space:nowrap}
.top nav a.acct:hover{background:var(--raise);border-color:var(--dim)}
.top nav a.acct.in{padding:0 12px 0 6px;border-color:transparent}
.acct-i{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:50%;background:var(--field);color:var(--on-field);font:800 1.15rem/1 var(--display)}
.acct-n{max-width:9rem;overflow:hidden;text-overflow:ellipsis}
@media(max-width:559px){.acct-n{display:none}.top nav a.acct.in{padding:0 6px}}
@media(min-width:1220px){.acct-n{display:none}.top nav a.acct.in{padding:0 6px}}
.mark{min-height:44px;flex-shrink:0}
@media(max-width:419px){.top .wrap{gap:8px}.mark{font-size:1.15rem;gap:8px}.mark img{width:34px;height:34px}.top nav a.acct{padding:0 9px}.top nav a.join{padding:0 12px}}
/* replies to you (6 October 2026): a count on the corner of the reader's letter, which is the one part of
   the control on screen at every width. It is laid over the letter and takes no room of its own, so the bar
   is exactly as wide as without it and the menu cannot be pushed over the site name again. Cream, not red:
   red on this site is a grade and a party. The list it stands for is at the top of the account panel. */
.acct-i{position:relative}
.acct-c{position:absolute;top:-5px;right:-8px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--ink);color:var(--on-field);box-shadow:0 0 0 2px var(--sunk);font:800 .75rem/18px var(--body);text-align:center;font-variant-numeric:tabular-nums}
/* the reader's own picture in the header in place of the letter (community.js paintHeader, 15 October 2026) */
.acct-i.acct-pic{background:var(--raise);box-shadow:0 0 0 2px var(--field)}
.acct-i.acct-pic img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
/* a face that has its picture: the letter's coloured ground no longer shows */
.av.av-pic{background:var(--raise)}
.ry{display:grid;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ry h3{font-size:1.35rem}
.ry-list{list-style:none;margin:0;padding:0;display:grid}
.ry-list li+li{border-top:1px solid var(--line)}
.ry-go{display:grid;gap:2px;align-content:center;min-height:44px;padding:10px 0;text-decoration:none}
.ry-go:hover .ry-t{text-decoration:underline;text-underline-offset:3px}
.ry-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;color:var(--dim);font-size:.92rem}
.ry-who b{color:var(--ink);overflow-wrap:anywhere}
.ry-who .tag{color:var(--field)}
.ry-sub{white-space:nowrap}
.ry-t{overflow-wrap:anywhere}

/* the panel: create an account, sign in, check your email, your account. A real dialog; it sits at the
   bottom of a phone screen and in the middle of a computer screen. */
.sheet{width:100%;max-width:100%;max-height:100%;margin:auto 0 0;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.sheet::backdrop{background:rgba(6,6,4,.74)}
.sheet-in{display:flex;flex-direction:column;max-height:92vh;max-height:92dvh;background:var(--panel);border-radius:var(--r) var(--r) 0 0;box-shadow:0 -18px 44px -12px rgba(0,0,0,.8)}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 16px;background:var(--field);color:var(--on-field);border-radius:var(--r) var(--r) 0 0}
.sheet-top h2{font-size:1.9rem;font-weight:900}
.sheet-top h2:focus{outline:0}
.sheet-x{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;background:none;border:0;border-radius:var(--r);color:var(--on-field);cursor:pointer}
.sheet-x:hover{background:rgba(22,20,10,.12)}
.sheet-top :focus-visible{outline-color:var(--on-field)}
.sheet-body{display:grid;gap:14px;align-content:start;padding:16px 16px 24px;overflow-y:auto;overscroll-behavior:contain}
@media(min-width:640px){.sheet{width:min(30rem,calc(100% - 32px));margin:auto}.sheet-in{max-height:min(52rem,94vh);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 30px 70px -20px rgba(0,0,0,.9)}.sheet-body{padding:20px 20px 24px}}
@media(prefers-reduced-motion:no-preference){.sheet[open] .sheet-in{animation:sheet-up .24s cubic-bezier(.16,1,.3,1)}}
@keyframes sheet-up{from{transform:translateY(18px)}}
/* Google's own button: white, with its mark, as Google asks for it to be drawn */
.gbtn{width:100%;min-height:52px;gap:12px;background:#fff;border-color:#fff;color:#1F1F1F;font-size:1.05rem}
.gbtn:hover{background:#F1F1EC;border-color:#F1F1EC}
.gbtn svg{flex:none}
.sheet-or{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:.9rem;font-weight:600}
.sheet-or::before,.sheet-or::after{content:"";flex:1;height:1px;background:var(--line)}
.sheet-msg.gmsg:empty{display:none}
.sheet-why{padding:10px 12px;background:var(--bg);border:1px solid var(--field-edge);border-radius:var(--r);font-weight:600}
.sheet-lead{font-size:1.15rem;line-height:1.4;font-weight:600}
.sheet-lead b{color:var(--field);overflow-wrap:anywhere}
.sheet-hint{color:var(--dim);font-size:.92rem}
.sheet-form{display:grid;gap:14px}
.sheet-f{display:grid;gap:6px}
.sheet-f label{font-weight:700}
.sheet input[type=text],.sheet input[type=email],.sheet input[type=password],.sheet input[type=url]{display:block;width:100%;min-height:52px;padding:0 14px;font:500 1rem/1.5 var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.sheet input:focus-visible,.fbform input:focus-visible,.fbform textarea:focus-visible{border-color:var(--field)}
.sheet input,.fbform input,.fbform textarea,.mod-csv{caret-color:var(--field)}
.pw{position:relative}
.sheet .pw input{padding-right:78px}
.pw-eye{position:absolute;right:3px;top:3px;bottom:3px;min-width:66px;background:var(--raise);border:0;border-radius:2px;color:var(--ink);font:700 .9rem/1 var(--body);cursor:pointer}
.pw-eye:hover{background:var(--line)}
.seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;gap:3px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.seg button{min-height:46px;background:none;border:0;border-radius:2px;color:var(--dim);font:700 .98rem/1 var(--body);cursor:pointer;transition:background-color .15s,color .15s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--sunk)}
.sheet-check{display:flex;align-items:center;gap:12px;min-height:44px;font-weight:600;cursor:pointer}
.sheet-check input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--field)}
/* a switch is a checkbox drawn as a track and a knob */
.sw input{appearance:none;-webkit-appearance:none;position:relative;width:48px;height:28px;border-radius:999px;background:var(--line);cursor:pointer;transition:background-color .15s}
.sw input::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--ink);transition:transform .18s cubic-bezier(.16,1,.3,1),background-color .15s}
.sw input:checked{background:var(--field)}
.sw input:checked::after{transform:translateX(20px);background:var(--on-field)}
.sw input:disabled{opacity:.6}
.sheet-msg{font-weight:600;color:var(--ga)}
.sheet-msg:empty{display:none}
.sheet-msg.bad{color:var(--gd)}
.sheet-go{width:100%;min-height:52px;font-size:1.05rem}
.sheet .btn[disabled],.mod-list .btn[disabled],.vt[disabled]{opacity:.6;cursor:default}
.sheet-acts{display:grid;gap:10px}
.sheet-text{display:flex;align-items:center;justify-self:start;min-height:44px;padding:0;background:none;border:0;color:var(--ink);font:600 .95rem/1.3 var(--body);text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sheet-text:hover{color:var(--field)}
.sheet-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;min-height:44px}
.sheet-k{font-weight:700}
.sheet-v{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.danger{color:var(--gf)}
.armed,.btn.armed:hover{padding:0 14px;background:var(--gf);border-color:var(--gf);border-radius:var(--r);color:var(--on-grade);text-decoration:none}

/* the box: how long, who is sending, and what to do after a video is sent */
.fbcount{color:var(--dim);font-size:.88rem;text-align:right;font-variant-numeric:tabular-nums}
.fbcount.bad{color:var(--gd);font-weight:700}
.fbwho{color:var(--dim);font-size:.92rem}
.fbdone{display:grid;gap:10px;justify-items:start;margin-top:4px;padding:14px 16px;background:var(--bg);border:1px solid var(--field-edge);border-radius:var(--r)}
.fbdone .fbrow{width:100%;justify-items:start}
.fbdone a{color:var(--field);font-weight:700}

/* mod/: for the people who run the site */
.mod-h{font-size:1.9rem;margin-top:40px}
.mod-hold{margin-top:20px}
.mod-top{margin-top:6px}
.mod-mail{overflow-wrap:anywhere}
.vote .mod-mail{color:var(--ink)}
.mod-list .row{margin-top:12px}
.mod-csv{display:block;width:100%;max-width:48rem;margin-top:12px;padding:12px 14px;font:500 .9rem/1.5 ui-monospace,Consolas,monospace;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r)}
.tv{margin-top:12px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tv-play{position:relative;display:grid;align-content:end;min-height:190px;text-decoration:none;color:var(--ink)}
.tv-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.tv-go{position:absolute;left:50%;top:42%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--field);box-shadow:0 6px 18px -4px rgba(0,0,0,.7)}
.tv-go::after{content:"";position:absolute;left:25px;top:19px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent var(--on-field)}
.tv-what{position:relative;display:grid;gap:2px;padding:44px 14px 12px;background:linear-gradient(transparent,rgba(12,12,9,.94) 55%)}
.tv-what b{font-weight:700;overflow-wrap:anywhere}
.tv-what span{color:var(--dim);font-size:.9rem}
.tv-play:hover .tv-go{background:var(--field-hi)}
.tv iframe{display:block;width:100%;border:0;background:var(--sunk)}
.tv-youtube iframe{aspect-ratio:16/9}
.tv-x iframe{height:560px}
.tv-instagram iframe{height:640px}
/* A post from X is drawn at most 550px wide, and its frame's page is light while ours is dark. A frame
   whose colour scheme differs from its page is painted solid white by the browser, so an X post sat in a
   white slab with a scrollbar (Armin, 14 Oct 2026: "What is that white space?"). Matching the frame's
   scheme to the post's makes it see-through; the width cap and scrolling="no" (discussion.js) do the rest.
   Measured in build/x-msg-probe.html. */
.tv-x iframe,.tv-instagram iframe{color-scheme:light;background:transparent}
.tv-x.on,.tv-instagram.on{max-width:550px;background:none;border:0}
.member-main>.ask{order:3}
.project{background:var(--sunk)}
.jobs{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
@media(min-width:760px){.jobs{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
.jobs li{display:grid;gap:10px;align-content:start;justify-items:start;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.jobs strong{font:800 1.5rem/1 var(--display);text-transform:uppercase}
.jobs span{color:var(--dim)}
.jobs span b{color:var(--ink);font:900 1.3rem/1 var(--display)}
.jobs .btn{margin-top:4px}
.fab{position:fixed;right:12px;bottom:12px;z-index:15;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 16px;background:var(--field);color:var(--on-field);font-weight:600;font-size:.95rem;text-decoration:none;border-radius:999px;border:2px solid var(--on-field);box-shadow:0 8px 22px -6px rgba(0,0,0,.7)}
.fab:hover{background:var(--field-hi)}
.fab b{font-weight:800;text-decoration:underline;text-underline-offset:3px}
.fab.off{visibility:hidden}

/* a discussion on every page, replies, the tag on a post, and the newest posts on the front page */
.talk-sec .talk{margin-top:0}
.said .meta .tag.kind{letter-spacing:.03em}
.said .meta .tag.kind-wrong,.said .meta .tag.kind-bug{color:var(--gd)}
.said .meta .tag.kind-idea,.said .meta .tag.kind-source{color:var(--seal)}
.vote .said-about{margin-top:8px;font-size:.92rem;color:var(--dim);overflow-wrap:anywhere}
.reply-b{min-height:44px;padding:0 12px;background:none;border:0;border-radius:999px;color:var(--ink);font:700 .92rem/1 var(--body);cursor:pointer}
.reply-b:hover{background:var(--raise)}
.reply-b[aria-expanded="true"]{color:var(--field)}
.said-acts{display:flex;align-items:center;gap:8px;margin-left:auto}
.said-acts .rp{margin-left:auto}
@media(max-width:520px){.said-acts{flex-basis:100%;margin-left:0}.said-acts .reply-b{margin-left:-12px}}
.replies .said-acts{flex-basis:100%;margin-left:0}
.reply-f{display:grid;gap:10px;margin-top:14px}
.reply-f textarea{width:100%;min-height:5.5rem;padding:12px 14px;font:500 1rem/1.5 var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);resize:vertical;caret-color:var(--field)}
.reply-f textarea::placeholder{color:var(--dim)}
.reply-f .btn{min-height:44px;padding:0 16px}
.reply-f .btn[disabled]{opacity:.6;cursor:default}
.replies{list-style:none;margin:14px 0 0;padding:0 0 0 12px;border-left:3px solid var(--line);display:grid;gap:8px}
.replies .vote{padding:12px;background:var(--bg)}
.replies .said blockquote{font-size:1rem;border-left:0;padding-left:0}
.said-more{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:700;color:var(--field)}
.latest{padding:26px 0}
.latest-none{max-width:62ch;font-size:1.05rem}
.latest-none a{display:inline-flex;align-items:center;min-height:44px;color:var(--field);font-weight:700}
.latest.on{padding:44px 0}
.latest-list{max-width:none}
@media(min-width:900px){.latest-list{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}}
.latest-list blockquote{font-size:1rem}
.latest-go{margin-top:16px}
.news-hint{margin-top:-4px}
.mod-go{max-width:48rem}
.mod-go-sum{margin-top:10px;overflow-wrap:anywhere}
.mod-go-t td{font-size:.9rem}

/* ---- the record, or the discussion. One switch under the header on every page that has both; it stays
   on screen while the reader scrolls, so the other side is always one tap away.
   ONE GRAMMAR: the side the reader is on is FILLED (a block that slides across), the side they are not on
   is a button to press. The record is cream, the discussion is yellow, on both sides of the switch and in
   both modes. Before 5 October 2026 the record was underlined and the Discussion was a filled yellow
   button, so the side that looked switched on was the one the reader was not on (Armin: "the switch
   between each page and the discussion and back needs to be more intuitive"). The mode is read from the
   html element, which the script in the head sets before the page is drawn. ---- */
.modes{position:sticky;top:60px;z-index:19;background:var(--sunk);border-bottom:1px solid var(--line)}
.modes .wrap{display:flex;align-items:center;gap:8px;padding:6px 8px}
.modes-sw{position:relative;flex:1 1 auto;min-width:0;display:grid;grid-template-columns:1fr 1fr;padding:3px;background:var(--bg);border:1px solid var(--line);border-radius:999px}
.mode{position:relative;z-index:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 10px;border-radius:999px;font:700 .96rem/1 var(--body);text-decoration:none;color:var(--ink);white-space:nowrap;transition:color .2s,background-color .2s,box-shadow .2s}
.mode:focus-visible{border-radius:999px}
.mode>span{min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.mode svg{flex:none}
.mode-d{color:var(--field)}
/* the block under the side the reader is on */
.modes-on .modes-sw::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.55);transition:transform .28s cubic-bezier(.16,1,.3,1),background-color .28s}
.modes-on[data-mode="discussion"] .modes-sw::before{transform:translateX(100%);background:var(--field)}
.modes-on[data-mode="record"] .mode-r,.modes-on[data-mode="discussion"] .mode-d{color:var(--on-field);cursor:default}
/* the side the reader is not on is a button. The way to the discussion is the one thing a page asks for,
   so it is ringed and tinted yellow, never a quiet word (Armin, 5 October 2026: "a better encouragement
   to switch to the discussion"). The way back to the record is plain and always in the same place. */
.modes-on[data-mode="record"] .mode-d{background:rgba(245,196,0,.14);box-shadow:inset 0 0 0 1.5px var(--field)}
.modes-on[data-mode="record"] .mode-d:hover{background:rgba(245,196,0,.26)}
.modes-on[data-mode="discussion"] .mode-r:hover{background:var(--raise)}
.mode-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;background:var(--field);color:var(--on-field);border-radius:999px;font-size:.8rem;font-weight:800}
.modes-on[data-mode="discussion"] .mode-n{background:var(--on-field);color:var(--field)}
.mode-n[hidden]{display:none}
/* On a phone the word, its icon and a post count do not fit one half of the switch: the word was cut to
   "Discussi...". Once there is a count, the count is the mark, and the icon gives way. */
@media(max-width:430px){.mode-d:has(.mode-n:not([hidden])) svg{display:none}}
.mode-share{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;background:none;border:1px solid var(--line);border-radius:999px;color:var(--dim);font:600 .92rem/1 var(--body);cursor:pointer;white-space:nowrap}
.mode-share:hover{color:var(--ink);border-color:var(--dim)}
.mode-share span{display:none}
.mode-share.said span{display:inline;color:var(--ga)}
@media(max-width:429px){.mode-r svg{display:none}}
@media(min-width:760px){.modes .wrap{padding:8px var(--gutter)}.modes-sw{flex:0 1 27rem}.mode-share{margin-left:auto;border-color:transparent}.mode-share span{display:inline}}
.modes-on[data-mode="record"] #discussion,.modes-on[data-mode="discussion"] #record{display:none}
html.modes-on{scroll-padding-top:128px}
.modes-on .said,.modes-on .talk{scroll-margin-top:128px}

/* the discussion of a page: what it is about, the box, then the posts */
.disc{padding-top:10px}
.disc-back{margin-bottom:8px}
.nudge.kept .nudge-in>span{color:var(--ink)}
.disc-col{max-width:46rem}
.disc-head{display:flex;align-items:center;gap:12px}
.disc-head>div{min-width:0}
.disc-eye{font:800 .8rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--field)}
.disc-head h2{margin-top:6px;font-size:clamp(1.9rem,7vw,2.8rem);overflow-wrap:anywhere}
.disc .talk-lede{margin-top:12px;font-size:1rem}
.disc-col>.fb{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:8px}
.disc-col>.fb:focus-within{border-color:var(--field-edge)}
/* All discussions: the side starts a reader on people to answer (community.js drawJump), the box to start a thread comes last. */
.jump{margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.jump-h{margin:0 0 8px;font:700 .78rem/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.jump-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.jump-list li{padding:10px 12px;background:var(--raise);border-radius:8px}
.jump-who{margin:0;font-size:.8rem;color:var(--dim)}
.jump-t{margin:2px 0 8px;font-size:.95rem;line-height:1.45;overflow-wrap:anywhere}
.jump-b{min-height:40px;font-size:.88rem}
.jump-live{display:block;margin:0 0 12px;padding:10px 12px;border:1px solid #C8102E;border-radius:8px;color:var(--ink);text-decoration:none}
.jump-live b{display:block;color:var(--field)}
.jump-live b::before{content:'';display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#C8102E;vertical-align:middle}
.jump-live span{display:block;font-size:.9rem;color:var(--dim)}
.disc-col .fbform{margin-top:0;max-width:none}
.fbform>label#fbmsglab{margin-top:0;font-size:1.1rem;line-height:1.3}
.disc-col .fbform textarea{min-height:5.5rem}
.fb .picks{gap:6px;margin-top:4px}
.fb .pick{position:relative;min-height:40px;padding:0 12px;font-size:.88rem}
.fb .pick input{position:absolute;opacity:0;width:1px;height:1px}
.fb .pick.on,.fb .pick:has(input:checked){background:var(--field);border-color:var(--field);color:var(--on-field)}
.fb .pick:focus-within{outline:3px solid var(--field);outline-offset:2px}
.disc-col .fbnote:empty{min-height:0}
.disc-col .fbabout{display:flex;align-items:center;gap:10px;margin-top:0}
.fbabout-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-width:0}
.fbabout-x{flex:none;margin-left:auto;min-height:44px;padding:0 6px;background:none;border:0;color:var(--dim);font:600 .9rem/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fbabout-x:hover{color:var(--ink)}
.fbsend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px}
.fbsend .fbhint{flex:1 1 14rem}
.disc .talk{margin-top:24px}
/* A reader, 8 October 2026: on a computer the discussion opened on the writing box, the first post started near the
   bottom of the screen, and the right third of the column sat empty. From 1100px the box sits in that empty side
   and stays in view while the posts scroll, so the posts start at the top and the one ask of the page is always
   in reach. Narrower than that nothing changes: the box is first, then the posts. A box the page moves under a
   post to answer it is no longer a child of .disc-col, so it is drawn where it was moved to. */
@media(min-width:1100px){
  .disc-col{max-width:none;display:grid;grid-template-columns:minmax(0,46rem) minmax(0,1fr);column-gap:40px;align-items:start}
  .disc-col>*{grid-column:1}
  .disc-col>.fb{grid-column:2;grid-row:2 / span 12;position:sticky;top:140px;margin-top:6px}
}
.talk-ctl .chips{margin-top:0}
/* A reader, 12 October 2026: on a computer the nine chips over the list of all discussions are about 870px in one
   row and the column is 46rem, so the last ones were cut off and could only be reached by a thin sideways
   scrollbar. From 760px the row wraps and every chip is on screen. Narrower, it still slides under a thumb. */
@media(min-width:760px){
  .talk-ctl .chips{flex-wrap:wrap;overflow-x:visible}
}
.chips-gap{flex:none;width:1px;margin:8px 4px;background:var(--line)}

/* the page's question, high on the record, shaped like a box to write in. A tap opens the discussion. */
.nudge{display:grid;gap:10px;max-width:46rem;margin-top:20px;padding:14px;background:var(--panel);border:1px solid var(--field-edge);border-radius:8px;text-decoration:none;color:var(--ink)}
.nudge:hover{border-color:var(--field)}
.member-main>.nudge{order:1}
.nudge-sec{padding:20px 0}
.nudge-sec + .sec{border-top:0}
.nudge-sec .nudge{margin-top:0}
/* Directly above the ON AIR band the prompt takes the band's width, so the two right edges line up (31 October 2026: 736px
   over 1120px on a state page). */
.nudge:has(+ .tband),.nudge-sec:has(+ .tband) .nudge{max-width:none}
/* The count chip ("3 people · 15 comments") sits on its own line under the question: beside it, it squeezed the question
   until "home?" stood alone on a line, and to five words a line on a phone (31 October 2026). */
.nudge-q{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:6px;align-items:start;font-size:1.1rem;line-height:1.3}
.nudge-q svg{margin-top:3px;color:var(--field)}
.nudge-q b{font-weight:700}
.nudge-n{grid-column:2;justify-self:start;padding:3px 9px;background:var(--raise);border-radius:999px;font-size:.82rem;font-weight:700;color:var(--field);white-space:nowrap}
.nudge-n[hidden],.nudge-top[hidden]{display:none}
.nudge-top{display:block;padding-left:12px;border-left:3px solid var(--field-edge);color:var(--dim);font-size:.98rem;line-height:1.45;overflow-wrap:anywhere}
.nudge-top b{color:var(--ink);font-weight:600}
.nudge-in{display:flex;align-items:center;gap:10px;min-height:52px;padding:4px 4px 4px 16px;background:var(--bg);border:1px solid var(--line);border-radius:999px;color:var(--dim);font-size:.98rem;line-height:1.25}
.nudge-in>span{flex:1 1 auto;min-width:0}
.nudge-in i{flex:none;display:inline-flex;align-items:center;min-height:42px;padding:0 16px;background:var(--field);color:var(--on-field);border-radius:999px;font-style:normal;font-weight:700}
.nudge:hover .nudge-in i{background:var(--field-hi)}

/* the end of the record: the one thing the record asks for */
.band-top{margin-top:16px;max-width:44rem;padding:12px 14px;background:var(--raise);border-left:4px solid var(--field);border-radius:var(--r)}
.band-top[hidden]{display:none}
.band-top blockquote{margin:0;font-size:1.1rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere;white-space:pre-line}
.call .band-top p{margin-top:6px;font-size:.9rem;font-weight:700}
/* nothing to show yet: no height and no line, and still there for the script to watch (a part that is
   not drawn at all never tells the script it has come near the screen) */
.latest:not(.on){padding:0;border:0}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---- 5 October 2026: one button in the header (Sign in), YouTube as a mark, the daily call as a bubble ---- */
.top nav a.yt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 8px;font-weight:700;white-space:nowrap}
.top nav a.yt span{display:none}
@media(min-width:620px){.top nav a.yt span{display:inline}}
.yt-i{flex:none;display:block}
footer a.yt-f{display:inline-flex;align-items:center;gap:8px}
/* 12 October 2026: the bubble says WHEN (data/whats-on.json, build/whatson.py). One row for each thing that is on,
   each its own link, so it is a small rounded card and no longer a pill. A row whose thing is on NOW carries the
   red dot; a row for something later carries a quiet ring. Still one bubble, and the cross still puts it away. */
.calls{position:fixed;right:10px;bottom:10px;z-index:15;display:flex;align-items:flex-start;max-width:min(calc(100vw - 20px),21rem);background:#0C0C09;color:#F2F1E6;border:2px solid var(--field);border-radius:14px;box-shadow:0 10px 30px -8px rgba(0,0,0,.65)}
.calls-rows{display:grid;min-width:0;flex:1}
.calls-a{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 2px 4px 12px;color:inherit;text-decoration:none}
.calls-a + .calls-a{border-top:1px solid var(--line)}
.calls-a i{flex:none;width:10px;height:10px;border-radius:50%;border:2px solid var(--dim)}
.calls-a.live i{border:0;background:#C8102E;box-shadow:0 0 0 4px rgba(200,16,46,.25)}
.calls-a b{display:block;font:800 .95rem/1.15 var(--body);color:var(--field)}
.calls-a small{display:block;font:600 .8rem/1.2 var(--body);opacity:.85}
.calls-x{flex:none;width:40px;height:44px;border:0;background:transparent;color:inherit;font:700 1.4rem/1 var(--body);cursor:pointer;border-radius:0 12px 0 0}
footer .on-when{display:block;margin:2px 0 4px;font-size:.8rem;font-weight:400;color:var(--dim);line-height:1.3}
.calls-x:hover,.calls-a:hover b{text-decoration:underline}
.calls.off{display:none}
/* While it would sit on the button that sends a post, it steps aside (build/whatson.js, duck). It keeps its place, so nothing moves. */
.calls.duck{visibility:hidden}
/* Never over the box a reader is typing in, or over the sign-in panel. */
body:has(textarea:focus) .calls,body:has(input:focus) .calls,body:has(.sheet[open]) .calls{display:none}
footer{padding-bottom:84px}
@media print{.calls{display:none}}
.disc-all{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-weight:700;color:var(--field)}
.why{margin-top:26px;max-width:62ch}
.why h3{font-size:1.45rem}
.why ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.why li{padding-left:14px;border-left:3px solid var(--field);line-height:1.5}
.bfacts{list-style:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.bfacts li{padding-left:14px;border-left:3px solid var(--field);line-height:1.55}
.bfacts .src{display:block;margin-top:6px;font-size:.9rem;color:var(--dim)}
.bfacts .src a{display:inline;min-height:0;overflow-wrap:anywhere}
/* All discussions, one card a discussion (community.js groupCard, 31 October 2026): its name, its size and when it last
   moved, the newest words in it as the button that opens it, and once open its posts with their replies. */
.dg{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px 14px;scroll-margin-top:180px}
.dg-on{border-color:var(--field)}
/* 4 November 2026 (Armin: "so confusing"): a closed card is ONE tap. Its button (.dg-p) covers the whole card, so the name,
   the count and the words all open it; the name links to its page only once the card is open (community.js groupCard). */
.dg:not(.dg-on):hover{border-color:var(--field)}
.dg:not(.dg-on) .dg-t{padding:2px 0 4px}
.dg:has(.dg-p:focus-visible){outline:2px solid var(--field);outline-offset:2px}
.dg-h{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px}
.dg-t{flex:1 1 12rem;min-width:0;display:inline-block;padding:10px 0;font:700 1.15rem/1.3 var(--body);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
a.dg-t:hover{color:var(--field);text-decoration:underline}
.dg-x{flex:none;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:700 .95rem/1 var(--body);cursor:pointer}
.dg-x:hover{border-color:var(--field)}
.dg-m{flex:1 0 100%;margin:0;color:var(--dim);font-size:.9rem}
.dg-p{display:grid;gap:8px;inline-size:100%;margin-top:10px;padding:10px 0 0;text-align:start;background:none;border:0;border-top:1px solid var(--line);border-radius:0;color:var(--dim);font:inherit;line-height:1.45;cursor:pointer}
.dg-p::after{content:'';position:absolute;inset:0;border-radius:var(--r)}
.dg-p:focus-visible{outline:none}
.dg-q{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dg-q b{color:var(--ink);font-weight:700}
.dg-go{justify-self:end;font-weight:700;font-size:.92rem;color:var(--field)}
.dg-go::after{content:' →'}
[dir="rtl"] .dg-go::after{content:' ←'}
.dg-l{margin-top:12px}
.dg-l>.vote{background:var(--bg)}
.dg-sum{margin:0 0 10px;color:var(--dim);font-weight:600}
/* All discussions' one picker, Show, beside Newest and Busiest (it took the place of ten chips, 4 November 2026). */
.talk-ctl .chips:has(.talk-show){flex-wrap:wrap;overflow-x:visible;align-items:center}
.talk-show{display:inline-flex;align-items:center;gap:8px;margin-inline-start:auto;color:var(--dim);font:600 .92rem/1 var(--body)}
.talk-show select{min-height:44px;max-width:100%;padding:0 12px;font:600 .92rem/1 var(--body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;cursor:pointer}
.talk-show select:hover{border-color:var(--field)}
.talk-show select option{color:var(--ink);background:var(--panel)}
.dg-more{display:flex;justify-content:center;padding:4px 0}
/* ---- your own grade (you/): twelve questions, a letter, and who in Congress votes like the reader.
   Nothing here is hidden and animated back in: a card's answer is shown or it is not. ---- */
.youline{margin-top:12px;font-weight:600;max-width:46ch}
.youline a{display:inline}
.yq{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:46rem}
.yq-i{padding:18px 16px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--r)}
.yq-i.done{border-left-color:var(--field)}
.yq-i.with{border-left-color:var(--ga)}
.yq-i.against{border-left-color:var(--gf)}
.yq-n{font:800 .8rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.yq-q{font:700 1.3rem/1.25 var(--body);text-transform:none;letter-spacing:0;margin-top:8px;text-wrap:pretty}
.yq-c{margin-top:8px;color:var(--dim);font-size:.98rem;max-width:60ch}
.yq-b{display:flex;gap:8px;margin-top:14px}
.yq-v{flex:1 1 0;min-width:0;min-height:52px;padding:0 12px;font:700 1.05rem/1 var(--body);color:var(--ink);background:var(--bg);border:2px solid var(--line);border-radius:var(--r);cursor:pointer}
.yq-v:hover{border-color:var(--dim)}
.yq-v.on{background:var(--field);border-color:var(--field);color:var(--on-field)}
.yq-s{flex:0 0 auto;min-width:76px;color:var(--dim);font-weight:600}
.yq-s.on{background:var(--raise);border-color:var(--dim);color:var(--ink)}
.yq-a{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:8px;max-width:60ch}
.yq-a[hidden]{display:none}
.yq-a .dim{font-size:.95rem}
.yq-a a{font-weight:700;white-space:nowrap}
.yq-you{font-weight:700}
.with .yq-you{color:var(--ga)}
.against .yq-you{color:var(--gf)}
.yq-end{margin-top:20px;display:grid;gap:10px;justify-items:start;max-width:46rem}
.yq-end p{font-weight:600}
.yq-end .btn[disabled]{opacity:.45;cursor:not-allowed}
.yq-res{background:var(--panel)}
.yq-res[hidden]{display:none}
.yq-res .person{background:var(--bg)}
.yq-grade{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.yq-grade .g{width:96px;height:96px;font-size:4rem;border-width:4px}
.yq-grade b{display:block;font:800 clamp(1.8rem,7vw,2.6rem)/1 var(--display);text-transform:uppercase;letter-spacing:.005em}
.yq-grade p{margin-top:8px;color:var(--dim)}
.yq-rank{margin-top:16px;font-weight:600;font-size:1.1rem;max-width:60ch}
.yq-h2{font-size:1.7rem;margin-top:32px}
.yq-h2 + .dim{margin-top:8px;font-size:.95rem;max-width:60ch}
.person .who .yq-m{color:var(--field);font-weight:700}
.yq-st{margin-top:32px;display:grid;gap:6px;max-width:24rem}
.yq-st label{font:800 1.7rem/.95 var(--display);text-transform:uppercase}
.yq-st select{min-height:48px;margin-top:6px;padding:0 12px;font:600 1rem/1 var(--body);background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:var(--r);max-width:100%}
.yq-res .nudge{margin-top:28px}
.yq-chg{margin-top:16px;font-size:.95rem}
.yq-got{display:inline-block;margin-bottom:14px;padding:8px 12px;background:var(--field);color:var(--on-field);font-weight:700;border-radius:var(--r)}
.yq-got[hidden]{display:none}
/* Once there is a grade, the one Share button under the header carries it, and says so. */
.mode-share.yq-share{background:var(--field);border-color:var(--field);color:var(--on-field)}
.mode-share.yq-share:hover{color:var(--on-field);background:var(--field-hi)}
.mode-share.yq-share span{display:none}
@media(min-width:620px){.mode-share.yq-share span{display:inline}}
.yq-sh{margin-top:8px;font-size:.95rem;max-width:60ch}
/* the discussion as a conversation (5 October 2026, Armin: "Improve the discussion sections ... people
   should be able to reply to each other ... Make it a lot better"). A post is a face, a name, how long ago,
   then the words with no quote bar. Replies are a thread under the post, not boxes inside a box. On a phone
   the likes are a thumb and a number, so likes, Reply and Report share one line. */
.said-head{display:flex;align-items:center;gap:10px}
.said-head .meta{flex:1;min-width:0;gap:4px 8px}
.said .who{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;overflow-wrap:anywhere}
.said .who b{font-size:.98rem}
/* 16 October 2026: every name and face on a post leads to that profile, Team to the team page (community.js nameOf_, faceLink). */
.who-link{color:inherit;text-decoration:none;padding:13px 0;margin:-13px 0}.who-link:hover,.who-link:focus-visible{text-decoration:underline;text-underline-offset:3px}.av-link{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;margin:-4px;border-radius:50%;text-decoration:none}.replies .av-link{margin:-8px}.tag-link{display:inline-grid;align-items:center;min-height:44px;margin:-10px 0;text-decoration:none}.tag-link:hover .tag,.tag-link:focus-visible .tag{filter:brightness(1.15);text-decoration:underline;text-underline-offset:2px}
.said-sub{white-space:nowrap}
.av{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--raise);color:var(--ink);font:800 1rem/1 var(--body)}
.av img{display:block;width:100%;height:100%;object-fit:cover}
.av-0{background:oklch(.40 .07 25)}
.av-1{background:oklch(.40 .06 75)}
.av-2{background:oklch(.40 .06 150)}
.av-3{background:oklch(.40 .06 205)}
.av-4{background:oklch(.40 .07 265)}
.av-5{background:oklch(.40 .07 325)}
.av-host{background:var(--bg);border:2px solid var(--field)}
.said .meta .tag.host{color:var(--on-field);background:var(--field);border-color:var(--field)}
/* Someone on the team: the reader's own letter inside a ring, and the tag in outline. The site itself is the filled one. */
.av-team{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--field)}
.said .meta .tag.team{color:var(--field);border-color:var(--field)}
.said blockquote{margin-top:12px;padding:0;border-left:0;max-width:66ch}
.said .at{font-weight:700;color:var(--field)}
.said-bar{gap:6px;margin-top:12px}
.vt{justify-content:center;min-width:56px;padding:0 12px}
.said-acts{flex:1 1 auto;margin-left:0;gap:4px}
.said-acts .rp,.said-acts .del-b{margin-left:auto}
@media(max-width:520px){
  .vt>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .said-acts{flex:1 1 auto;margin-left:0}
  .said-acts .reply-b{margin-left:0}
}
.replies .said-acts{flex:1 1 auto}
.said-go{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;color:var(--ink);font:700 .92rem/1 var(--body);text-decoration:none}
.said-go:hover{background:var(--raise)}
.del-b{min-height:44px;padding:0 6px;background:none;border:0;color:var(--dim);font:600 .9rem/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.del-b:hover{color:var(--ink)}
.del-b.armed{color:var(--gf);font-weight:700}
.del-b[disabled]{cursor:default;text-decoration:none}
/* the thread: one thin line down the side, replies as rows on it */
.replies{margin:14px 0 0;padding:0 0 0 14px;border-left:1px solid var(--line);gap:14px}
.replies .vote{padding:0;background:none;border:0;border-radius:0}
.replies .said.own{padding:10px 12px;border:1px dashed var(--field-edge);border-radius:var(--r)}
.replies .av{width:28px;height:28px;font-size:.8rem}
.replies .said blockquote{margin-top:8px}
.replies .said-bar{margin-top:6px}
.replies .vt{min-width:52px;background:none}
/* a reply to the signed-in reader that they have not seen yet: its own colour inside the thread (community.js ryHere) */
.said.ry-new,.replies .said.ry-new{padding:10px 12px;background:rgba(217,180,90,.13);background:color-mix(in srgb,var(--field) 14%,transparent);border:0;border-inline-start:3px solid var(--field);border-radius:var(--r)}
.said .meta .tag.new{color:var(--on-field);background:var(--field-hi);border-color:var(--field-hi)}
.thread-more{display:inline-flex;align-items:center;min-height:44px;margin:6px 0 0 14px;padding:0;background:none;border:0;color:var(--field);font:700 .92rem/1 var(--body);cursor:pointer}
.thread-more:hover{text-decoration:underline;text-underline-offset:3px}
.reply-f{margin-top:10px}
.reply-f textarea:focus-visible{border-color:var(--field);outline:0}
/* the box at rest: the question, a place to type, the button. site.js wakes it on the first tap. */
.fb.rest fieldset,.fb.rest .fbsend .fbhint,.fb.rest .fbwho{display:none}

/* ---- 13 October 2026: the mission board (act/), the front page's way into it, and the three doors.
   Armin: the act part "needs to be front and center ... like a video game. Gamified, a quest and side quests",
   and the whole site "simplified ... people should know exactly what this page is about by just glancing at it".
   The markup is printed by render.py (act, q_card) and run by build/quests.js; its contract is at the top of that
   file. Colour stays as it was decided on 5 October: black, and yellow only on the headline, the buttons and the
   links. So a chip that is on is a yellow button, the XP bar is the one filled thing, and icons are cream.
   Nothing here is hidden and then animated in: a part only the script can run (.q-js) is simply not drawn
   until the page's own first line of script has said scripts are on. */
.q-js{display:none}
html.q-js-on .q-js:not([hidden]){display:block}
html.q-js-on p.q-chain:not([hidden]){display:flex}
.q-head h1{font-size:clamp(2.5rem,11.5vw,4.8rem);font-weight:900;line-height:.9}
.q-head .lede{max-width:44ch;margin-top:8px;font-size:1rem;font-weight:500;line-height:1.35}
.q-head .wrap{padding-top:16px;padding-bottom:20px}
.q-rank{margin-top:12px;max-width:30rem;display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:baseline}
.q-rank-l{grid-row:1;grid-column:1}.q-rank-n{grid-row:1;grid-column:2}
.q-rank-l{display:flex;align-items:baseline;gap:10px}
.q-rank-l b{font:800 1.5rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.q-rank-l span{font-weight:700;color:var(--seal)}
.q-rank-n{color:var(--dim);font-size:.9rem;text-align:right}
.q-bar{grid-row:2;grid-column:1/-1;height:8px;border-radius:999px;background:var(--raise);overflow:hidden}
.q-bar i{display:block;height:100%;width:0;min-width:8px;border-radius:999px;background:var(--field);transition:width .5s cubic-bezier(.16,1,.3,1)}
/* The chooser is one block that flows: each row starts a new line (its label, then its chips), and where the reader
   lives follows the last chips on the same line when there is room. On a 375px phone it is four lines, 40px each, and the
   whole of it ends above 640px (measured), so a phone shows the headline, the rank and every choice without scrolling.
   The one line over it says what the chips are for, which is what a stranger taps first. */
.q-pick{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;max-width:46rem}
.q-cue{flex:0 0 100%;font-weight:700;font-size:.98rem;margin-bottom:2px}
.q-row{display:contents}
.q-row::before{content:"";flex:0 0 100%;height:0}
.q-row.q-row-w::before{display:none}
.q-row .q-chips{display:contents}
.q-lab{font-weight:700;color:var(--dim);font-size:.9rem;margin-right:1px}
.q-chips{display:flex;flex-wrap:wrap;gap:8px}
.q-chip{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:700 .9rem/1 var(--body);text-decoration:none;cursor:pointer;white-space:nowrap}
/* A chip changes at once: it is a switch, and a switch that fades reads as slow. */
.q-chip:hover{border-color:var(--field)}
.q-chip[aria-pressed="true"]{background:var(--field);border-color:var(--field);color:var(--on-field)}
.q-row-w .q-lab{margin-left:4px}
.q-row-w select{flex:1 1 8.5rem;min-width:8.5rem;min-height:40px;max-width:15rem;padding:0 12px;font:700 .95rem/1 var(--body);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:999px}
.q-row-w select:focus,.q-row-w select:hover{border-color:var(--field)}

/* the reader's mission, and the board */
.q-yours{padding:28px 0}
.q-yours.q-empty .q-best,.q-yours.q-empty .q-also{display:none}
.q-yours h2,.q-mine h2,.q-top h2{font-size:clamp(1.5rem,5vw,2rem)}
.q-best{margin-top:14px;max-width:46rem}
.q-also{margin-top:10px;display:grid;gap:8px;max-width:46rem}
.q-also-h{color:var(--dim);font-weight:700;font-size:.92rem;margin-top:6px}
.q-also:empty{display:none}
.q-goal{max-width:46rem;font-size:1.1rem;line-height:1.45;color:var(--dim)}
.q-goal b{color:var(--ink);font-weight:700}
.q-tier{margin-top:36px}
.q-tier[hidden]{display:none}
.q-tier h2 i{font-style:normal;color:var(--field)}
.q-tier h2 + p{margin-top:8px;color:var(--dim);max-width:56ch;font-size:1rem}
.q-chain{align-items:center;gap:12px;margin-top:14px;color:var(--dim);font-weight:700;font-size:.92rem}
.q-dots{display:flex;gap:5px}
.q-dots i{display:block;width:22px;height:8px;border-radius:999px;background:var(--raise)}
.q-dots i.now{background:var(--field-edge)}
.q-dots i.on{background:var(--field)}
.q-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;max-width:46rem}
.q-list li[hidden]{display:none}
/* From a tablet up the board uses the width: two columns of cards, three for the side quests on a wide screen. An open
   card keeps its own height (align-items:start), so opening one never stretches its neighbour. The head of the page is two
   columns from 900px: what the board is on the left, the choices on the right, so the chooser is a block and not one thin line. */
@media(min-width:700px){.q-list{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;align-items:start}.q-also{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;max-width:none}.q-also-h{grid-column:1/-1}}
@media(min-width:1100px){.q-tier-side .q-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){
  .q-head .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);column-gap:48px;align-items:start;padding-top:36px;padding-bottom:36px}
  html.q-js-on .q-head .q-js:not([hidden]){display:contents}
  .q-head h1,.q-head .lede,.q-head .q-rank{grid-column:1}
  .q-head .lede{font-size:1.15rem}
  .q-head .q-rank{margin-top:20px}
  .q-head .q-pick{grid-column:2;grid-row:1/span 4;margin-top:0;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);gap:8px 6px}
  .q-best{max-width:none}
  .q-big summary{align-items:center}
  .hero .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto;align-items:start}
  .hero h1{grid-column:1;grid-row:1/span 2;align-self:start;font-size:clamp(3.2rem,5.3vw,4.2rem)}
  .hero .lede{grid-column:2;grid-row:1;margin-top:0;max-width:40ch}
  .hero .q-front{grid-column:2;grid-row:2;margin-top:18px}
  .morelist{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
}
.q-m{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;transition:border-color .15s}
.q-m:hover,.q-m[open]{border-color:var(--field-edge)}
.q-m summary{display:grid;grid-template-columns:44px minmax(0,1fr) 16px;gap:12px;align-items:center;min-height:68px;padding:12px 14px;cursor:pointer;list-style:none}
.q-m summary::-webkit-details-marker{display:none}
.q-m summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg);justify-self:center;margin-top:-4px;transition:transform .2s}
.q-m[open] summary::after{transform:rotate(225deg);margin-top:4px}
.q-ic{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--raise);color:var(--seal)}
.q-stage{position:absolute;right:-5px;bottom:-5px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:999px;background:var(--bg);border:1px solid var(--line);color:var(--ink);font:800 .78rem/1 var(--body);font-style:normal}
.q-t{display:grid;gap:4px;min-width:0}
.q-title{font-weight:700;font-size:1.05rem;line-height:1.25}
.q-meta{display:flex;flex-wrap:wrap;gap:2px 12px;color:var(--dim);font-size:.88rem;font-weight:600}
.q-xp{color:var(--seal);font-weight:800}
.q-until{color:var(--gd)}
.q-done[hidden],.q-state[hidden]{display:none}
.q-state{justify-self:start;padding:3px 9px;border-radius:999px;background:var(--raise);font-size:.82rem;font-weight:700;color:var(--ink)}
.q-s-accepted.q-state,.q-state.q-s-accepted{color:var(--ga)}
.q-state.q-s-back{color:var(--gd)}
.q-state.q-s-reported,.q-state.q-s-draft{color:var(--seal)}
.q-hook-s{color:var(--dim);font-size:.98rem;line-height:1.4}
.q-body{padding:2px 14px 16px;display:grid;gap:12px;border-top:1px solid var(--line)}
.q-body>:first-child{margin-top:14px}
.q-hook{font-size:1.08rem;line-height:1.45;font-weight:600;max-width:58ch}
.q-only{color:var(--dim);font-size:.92rem;font-weight:700}
.q-why{max-width:62ch;color:var(--dim);line-height:1.55}
.q-why b,.q-proof b{color:var(--ink)}
.q-why .src{display:block;margin-top:4px;font-size:.88rem}
.q-why .src a{color:var(--field);overflow-wrap:anywhere}
.q-steps{margin:0;padding:0;list-style:none;counter-reset:qs;display:grid;gap:10px;max-width:62ch}
.q-steps li{counter-increment:qs;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;line-height:1.5}
.q-steps li::before{content:counter(qs);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--raise);color:var(--ink);font:800 .85rem/1 var(--body);font-variant-numeric:tabular-nums}
.q-proof{max-width:62ch;line-height:1.5}
.q-never{max-width:62ch;color:var(--gd);font-weight:600;font-size:.95rem}
.q-repeat{max-width:62ch;color:var(--seal);font-weight:600;font-size:.95rem}
.q-links{list-style:none;margin:0;padding:0;display:grid}
.q-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--field);font-weight:700}
.q-act{display:grid;gap:10px}
.q-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.q-btns [hidden]{display:none}
.q-text{min-height:44px;padding:0 6px;background:none;border:0;color:var(--dim);font:600 .95rem/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.q-text:hover{color:var(--ink)}
.q-say{font-weight:600;color:var(--seal);max-width:60ch;overflow-wrap:anywhere}
.q-say:empty{display:none}
.q-say.bad{color:var(--gd)}
.q-ns{color:var(--dim);font-size:.92rem}
.q-form{display:grid;gap:8px;max-width:44rem;padding:14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r2)}
.q-form[hidden]{display:none}
.q-form label{font-weight:700}
.q-form textarea,.q-form input{width:100%;padding:12px 14px;font:500 1rem/1.5 var(--body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.q-form input{min-height:48px;padding:0 14px}
.q-form textarea{min-height:7rem;resize:vertical}
.q-form textarea:focus,.q-form input:focus{border-color:var(--field)}
.q-form textarea::placeholder,.q-form input::placeholder{color:var(--dim)}
.q-form button[disabled]{opacity:.6;cursor:default}
.q-hint{color:var(--dim);font-size:.9rem;max-width:60ch}
/* the reader's own mission: the same card, larger, with its one line showing and a way in that looks like one */
.q-big{border-color:var(--field-edge)}
.q-big summary{grid-template-columns:52px minmax(0,1fr) 16px;padding:16px;align-items:start}
.q-big .q-ic{width:52px;height:52px}
.q-big .q-title{font:800 1.75rem/1.02 var(--display);text-transform:uppercase;letter-spacing:.01em}
.q-big .q-body .q-hook,.q-small .q-body .q-hook{display:none}
.q-big .q-meta{font-size:.95rem;margin-top:2px}
.q-small .q-hook-s{display:none}
.q-big summary::before{content:attr(data-q-go);grid-column:2;grid-row:2;justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r);background:var(--field);color:var(--on-field);font-weight:700}
.q-big[open] summary::before{display:none}
/* my missions */
.q-mine{padding:28px 0}
.q-mine[hidden],.q-top[hidden]{display:none}
.q-minelist{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;max-width:46rem}
.q-mine-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;min-height:52px;padding:8px 14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);text-decoration:none}
.q-mine-a:hover{border-color:var(--field)}
.q-mine-a b{font-weight:700}
.q-mine-why{margin:6px 14px 0;color:var(--dim);font-size:.95rem;overflow-wrap:anywhere}
/* the leaderboard, how XP works, and the reading that was the old guide */
.q-toplist{list-style:none;counter-reset:qt;margin:14px 0 0;padding:0;display:grid;gap:0;max-width:34rem}
.q-toplist li{counter-increment:qt;display:grid;grid-template-columns:2rem minmax(0,1fr) auto auto;gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.q-toplist li::before{content:counter(qt);font:800 1.2rem/1 var(--display);color:var(--dim)}
.q-toplist b{overflow-wrap:anywhere}
.q-top-l{color:var(--dim);font-size:.88rem}
.q-top-x{font-weight:800;color:var(--seal)}
.q-read .wrap{max-width:calc(46rem + 2*var(--gutter));margin-left:auto;margin-right:auto}
@media(min-width:1000px){.q-read .wrap{max-width:var(--col)}.q-fold{max-width:46rem}}
.q-read-h{margin-top:36px;font-size:clamp(1.5rem,5vw,2rem)}
.q-fold{border-bottom:1px solid var(--line)}
.q-read-h + .q-fold{margin-top:8px}
.q-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;font-weight:700;font-size:1.08rem;cursor:pointer;list-style:none}
.q-fold>summary::-webkit-details-marker{display:none}
.q-fold>summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(45deg);transition:transform .2s}
.q-fold[open]>summary::after{transform:rotate(225deg)}
.q-fold-b{padding:0 0 22px;max-width:64ch}
.q-fold-b>p{margin-top:10px;line-height:1.6}
.q-fold-b>:first-child{margin-top:0}
.q-fold-b h3{margin-top:22px;font-size:1.25rem}
.q-ladder{list-style:none;margin:12px 0 0;padding:0}
.q-ladder li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}
.q-ladder li:last-child{border-bottom:0}
.q-ladder b{flex:none;color:var(--seal)}
/* Congress at a glance, on the scorecard: three sections of the old front page, folded into one line above the list */
.glance{margin-top:18px;max-width:none;border-top:1px solid var(--line)}
.glance-b{padding:4px 0 26px}
.glance-b>p{max-width:62ch;color:var(--dim)}
.glance-b h3{margin-top:26px}
.glance-b .two{margin-top:6px}
.glance + .tools{margin-top:18px}
/* the front page: the way onto a mission, and the three doors to the record */
.q-front{margin-top:22px}
.q-front-q{font-weight:700;font-size:1.1rem}
.q-front .q-chips{margin-top:10px;display:flex}
.q-front .q-chip{min-height:50px;padding:0 16px;font-size:1rem;background:var(--field);border-color:var(--field);color:var(--on-field)}
.q-front .q-chip:hover{background:var(--field-hi)}
.q-front-n{margin-top:4px}
.q-front-n a{display:inline-flex;align-items:center;min-height:44px;color:var(--dim);font-weight:600}
.hero .lede{max-width:36ch}
.doors-sec{padding:28px 0}
.doors{display:grid;gap:10px}
@media(min-width:900px){.doors{grid-template-columns:1.25fr 1fr 1fr;align-items:stretch}}
.door{display:block;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);text-decoration:none;transition:border-color .15s}
a.door{display:grid;gap:6px;align-content:start;min-height:96px}
a.door:hover{border-color:var(--field)}
a.door b{font:800 1.5rem/1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--field)}
a.door span{color:var(--dim);line-height:1.45}
.door-find .find{margin-top:0}
.door-find .find label{font:800 1.5rem/1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--field);margin-bottom:10px}
.door-find .statepick select{width:100%}
/* The newest posts on the front page are a taste, not the thread: four lines each, the rest is one tap away. */
.latest-list blockquote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
@media(max-width:899px){.latest.on{padding:var(--s5) 0}.latest .latest-go{margin-top:10px}.latest-list{gap:8px}.latest-list .said{padding-top:12px;padding-bottom:12px}}
.more-sec h2,.latest h2{font-size:clamp(1.5rem,5vw,2rem)}
.morelist{list-style:none;margin:10px 0 0;padding:0;max-width:46rem}
.morelist a{display:grid;gap:2px;padding:9px 0;min-height:56px;border-bottom:1px solid var(--line);text-decoration:none}
.morelist li:last-child a{border-bottom:0}
.morelist b{color:var(--field);font-weight:700}
.morelist span{color:var(--dim);font-size:.95rem;line-height:1.4}
.morelist a:hover b{text-decoration:underline;text-underline-offset:3px}
/* More, in the menu: a native <details>, so it opens with scripts off */
.nav-more{position:relative;flex:none}
.nav-more>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:12px 10px;font-weight:600;font-size:.92rem;color:var(--dim);cursor:pointer;list-style:none;white-space:nowrap;border-radius:var(--r)}
.nav-more>summary::-webkit-details-marker{display:none}
.nav-more>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.nav-more[open]>summary::after{transform:rotate(225deg);margin-top:3px}
.nav-more>summary.on{color:var(--field)}
.nav-more-l{position:absolute;right:0;top:100%;z-index:30;min-width:13rem;display:grid;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);box-shadow:0 14px 30px -10px rgba(0,0,0,.7)}
.nav-more .nav-more-l a{display:flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink);font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap;border-radius:var(--r)}
.nav-more .nav-more-l a:hover{background:var(--raise)}
.nav-more .nav-more-l a[aria-current="page"]{color:var(--field)}
.nav-more-h{margin:10px 12px 4px;font:700 .75rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.nav-more-h:first-child{margin-top:6px}
.top nav .nav-more{display:none}
@media(min-width:1220px){.top nav .nav-more{display:block}.top nav .nav-more>summary{color:var(--ink);font-size:.95rem;padding:10px 9px}.top nav .nav-more>summary:hover{background:var(--raise)}}

/* The country tabs (build/world.py, bar), on Elections and Scorecard only since 15 October 2026. Plain links in a
   row: every country is in sight before a tap, nothing opens, and the browser draws no list of its own. On a phone
   the row wraps instead of scrolling, so no country is ever hidden past the edge. */
.ctabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 22px}
.ctabs-h{display:inline-flex;align-items:center;gap:7px;font:600 .92rem/1 var(--body);color:var(--dim);white-space:nowrap}
.ctabs-h svg{color:var(--field);flex:none}
.ctabs-l{display:flex;flex-wrap:wrap;gap:8px}
.ctabs-l a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;font:700 .95rem/1 var(--body);color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.ctabs-l a:hover{border-color:var(--field)}
.ctabs-l a[aria-current="page"]{background:var(--field);border-color:var(--field);color:var(--on-field)}
/* The bar is as wide as the page's column and no wider, and before the switch it was full to within 4px
   (measured 6 October 2026: name 188, menu 916, in 1120). The switch takes 126, so on a wide screen the
   menu gives that back: the YouTube mark loses its words (it is a mark, not a button), and the links sit
   a little closer. build/community-test.html fails the bar if the menu runs over the name or off the edge. */
@media(min-width:1220px){.top-c nav a{padding:10px 8px;font-size:.92rem}.top-c nav a.yt{padding:0 6px}.top-c nav a.yt span{display:none}}
/* A reader, 8 October 2026, in three posts: the menu letters are too small and too close, the YouTube mark does
   not say there is a live show behind it, and the country switch says nothing about what it does. All three came
   from the squeeze above, and measuring it that day found worse: with Sign in showing, the menu ran 26px past the
   end of the bar at every computer width (the test above measured it signed in, where the control is narrower).
   So from 1220px the bar is as wide as the screen allows, up to 100rem, and no longer held to the page's column.
   The menu takes back what it gave up as the room appears (measured 8 October 2026, signed out, the widest state):
     1220px  as before: .92rem letters, 8px each side            needs 1157 of 1188
     1360px  full-size letters, 10px each side                   needs about 1236 of 1328
     1440px  and the words Watch live beside the YouTube mark    needs about 1321 of 1408
     1560px  12px each side                                      needs about 1383 of 1528
     1680px  and "Elections in" beside the country switch        needs 1471 of 1568
   build/community-test.html fails the bar at each of these widths if the menu passes the end of the bar. */
@media(min-width:1220px){.top .wrap{max-width:100rem}}
@media(min-width:1360px){.top-c nav a{padding:10px;font-size:1rem}}
@media(min-width:1440px){.top-c nav a.yt{padding:0 10px}.top-c nav a.yt span{display:inline}}
@media(min-width:1560px){.top-c nav{gap:4px}.top-c nav a{padding:10px 12px}}
/* the cards of the other countries: their own list, so the checks on the Senate race cards do not count them */
.wlist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
@media(min-width:700px){.wlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.wlist{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* the Elections cards (world.wcard, 30 October 2026): flag, where the vote stands, what is at stake, the race drawn */
.hflags{display:flex;gap:8px;margin-bottom:18px}
.hflag{width:44px;height:33px;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.18);object-fit:cover}
.ekey{display:flex;align-items:center;gap:8px;margin-top:16px;color:var(--dim);font-size:.95rem;max-width:62ch}
.ekey .g{flex:none}
.ekey-t{flex:1;min-width:0;margin-left:4px;line-height:1.4}
.eg-h{font-size:clamp(1.9rem,6vw,2.6rem);margin-top:8px}
.eg-h ~ .eg-h{margin-top:48px}
.eg-p{color:var(--dim);margin-top:6px}
.elist{gap:18px}
@media(min-width:760px){.elist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ec{min-width:0}
.ec-a{display:flex;flex-direction:column;height:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.35);transition:border-color .18s,transform .18s,box-shadow .18s}
.ec-a:hover{border-color:var(--field);transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 40px rgba(0,0,0,.5)}
.ec-a,.ec-a *{text-decoration:none}
/* the United States card: the whole row, its parts side by side from 760px */
.ec-us{grid-column:1/-1}
@media(min-width:760px){
  .ec-us .ec-head{padding:24px 24px 18px}
  .ec-us .ec-flag{width:84px;height:63px}
  .ec-us .ec-t strong{font-size:2.6rem}
  .ec-us .ec-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px 32px;padding:4px 24px 22px}
  .ec-us .ec-stake{font-size:1.7rem;grid-column:1}
  .ec-us .ec-list{grid-column:1}
  .ec-us .ec-big{grid-column:2;grid-row:1/span 3;align-self:start}
  .ec-us .ec-go{grid-column:1}
}
.ec-a:focus-visible{outline:3px solid var(--field);outline-offset:2px}
.ec-head{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:center;padding:18px 16px 16px;overflow:hidden;isolation:isolate}
.ec-wash{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(22px) saturate(1.4);opacity:.5;z-index:-2}
.ec-head::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,.25),var(--panel) 96%);z-index:-1}
.ec-flag{width:64px;height:48px;border-radius:6px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 6px 18px rgba(0,0,0,.45)}
.ec-t strong{display:block;font:800 clamp(1.7rem,6vw,2.1rem)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em}
.ec-t small{display:block;margin-top:6px;color:var(--ink);opacity:.85;font-size:.88rem;line-height:1.3}
.ec-chip{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 10px;border-radius:999px;font:700 .8rem/1 var(--body);letter-spacing:.02em;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18)}
.ec-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.ec-soon{color:var(--field)}
.ec-talks{color:#7FC8F8}
.ec-done{color:#8ED18A}
.ec-body{display:flex;flex-direction:column;gap:12px;flex:1;padding:4px 16px 16px}
.ec-stake{font:800 1.3rem/1.15 var(--display);letter-spacing:.005em;color:var(--ink)}
.ec-how{color:var(--dim);font-size:.8rem;line-height:1.3}
.ec-seats{display:flex;flex-direction:column;gap:8px}
.ec-strip{position:relative;display:flex;height:16px;border-radius:4px;overflow:hidden;background:var(--sunk)}
.ec-strip i{display:block;height:100%;box-shadow:inset -1px 0 0 rgba(0,0,0,.35)}
.ec-strip em{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--ink)}
.ec-camps{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.86rem;color:var(--dim)}
.ec-camps b{color:var(--ink);font-size:1rem}
.ec-need{margin-left:auto}
.ec-need b{color:var(--field)}
.ec-rows{display:flex;flex-direction:column;gap:10px}
.ec-row{display:grid;grid-template-columns:44px minmax(0,1fr) 4.8em auto;gap:10px;align-items:center}      /* 4.8em holds "132 seats" (72px): at 3.9em it ran over the bar on a phone, 31 Oct 2026 */
.ec-val{text-align:right}
@media(max-width:420px){.ec-row{grid-template-columns:38px minmax(0,1fr) 4.8em auto;gap:8px}.ec-row .face{width:38px;height:38px}.ec-body{padding:4px 14px 16px}.ec-head{padding:16px 14px 14px}}
.ec-row .face{width:44px;height:44px}
.ec-who b{display:block;line-height:1.2;overflow-wrap:anywhere}
.ec-who small{display:block;color:var(--dim);font-size:.82rem;line-height:1.3;margin-top:1px}
.ec-bar{display:block;height:4px;margin-top:6px;border-radius:2px;background:var(--sunk);overflow:hidden}
.ec-bar i{display:block;height:100%;background:var(--dim);border-radius:2px}
.ec-lead .ec-bar i{background:var(--field)}
.ec-val{font-weight:700;font-size:.92rem;white-space:nowrap}
.ec-more{color:var(--dim);font-size:.86rem}
.ec-big{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ec-big span{display:flex;flex-direction:column;gap:4px;padding:10px;background:var(--sunk);border-radius:var(--r);font-size:.82rem;line-height:1.25;color:var(--dim)}
.ec-big b{font:800 2rem/1 var(--display);color:var(--ink)}
.ec-list{display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.ec-list span::before{content:"\2713";color:var(--field);font-weight:800;margin-right:8px}
.ec-go{margin-top:auto;padding-top:6px;font-weight:800;color:var(--field)}
.ec-a:hover .ec-go{text-decoration:underline}
.tflag{width:22px;height:16px;border-radius:2px;margin-right:8px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
@media (prefers-reduced-motion:reduce){.ec-a,.ec-a:hover{transition:none;transform:none}}
.rc-when{color:var(--dim);font-size:.9rem;line-height:1.3;margin-top:-4px}
.cand-stand{color:var(--dim);font-size:.92rem;line-height:1.4}
/* measure by measure, everyone on one line that wraps */
.wmx{margin-top:18px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.wmx-row{display:grid;gap:1px;background:var(--line)}
.wmx-m{background:var(--panel);padding:10px 12px}
.wmx-m b{display:block}
.wmx-m span{display:block;color:var(--dim);font-size:.88rem;line-height:1.35;margin-top:2px}
.wmx-cs{background:var(--bg);padding:8px 10px;display:flex;flex-wrap:wrap;gap:6px 14px}
.wmx-c{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:2px 6px 2px 2px;text-decoration:none;border-radius:var(--r)}
.wmx-c:hover{background:var(--raise)}
.wmx-c b{display:block;font-size:.92rem;font-weight:700;line-height:1.2}
.wmx-c small{display:block;color:var(--dim);font-size:.8rem;line-height:1.2;margin-top:1px}
@media(min-width:900px){.wmx-row{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}.wmx-cs{align-content:center}}
/* what the country votes on next */
.wcal{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;max-width:56rem}
.wcal li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.wcal-d{display:grid;align-content:start;justify-items:start;gap:2px}
.wcal-d b{font:900 1.5rem/1 var(--display);text-transform:uppercase;color:var(--field)}
.wcal-d span{color:var(--dim);font-weight:700;font-size:.92rem}
.wcal h3{font-size:1.5rem}
.wcal h3 .tag{vertical-align:middle;margin-left:6px;font-family:var(--body);color:var(--dim)}
.wcal p{margin-top:8px;max-width:64ch}
.wcal-n{font-weight:700}
.wcal .links{margin-top:6px;display:flex;flex-wrap:wrap;gap:0 18px;font-size:.92rem}
.wcal .links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
/* A country page on a phone (Armin note vvyso03a, 30 Oct 2026): the opening paragraph at reading size instead of a
   twelve-line wall above the calculator, a vote's date over its text instead of a narrow column beside it, and the
   long "Every line on ..." button set as a centred two-line label. */
@media(max-width:719px){
  .wlede{font-size:1.08rem;font-weight:500;line-height:1.5}
  .wcal li{grid-template-columns:minmax(0,1fr);gap:8px}
  .wcal-d{display:flex;align-items:baseline;gap:8px}
  .cand .row .btn{text-align:center;line-height:1.25;padding-top:10px;padding-bottom:10px}
}
/* a politician's page: the original words under our translation, and a measure tile that jumps to its lines */
.vote .orig{margin-top:6px;padding-left:15px;font-size:.88rem;line-height:1.45;color:var(--dim)}
.vote .orig span{font-weight:700}
.vote .orig q{font-style:italic;quotes:"\201C" "\201D"}
.tile.tile-l{display:block;padding:0}
.tile.tile-l a{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px;min-height:64px;text-decoration:none;border-radius:var(--r)}
.tile.tile-l a:hover{background:var(--raise)}

/* ---- 12 October 2026: how to vote (build/vote.py). Plain text and plain links: a date is a fact in the sentence,
   and the chip beside it (build/vote.js) is the only thing here that knows what day it is. ---- */
.vg h2{margin-top:40px;font-size:2rem}
.vg h2 + p{color:inherit;font-size:inherit;max-width:none}
.vg-list{list-style:none;padding:0;display:grid;gap:10px}
.vg-list li{margin-top:0;padding-left:14px;border-left:3px solid var(--line)}
.vg time{font-weight:700;color:var(--ink)}
.vg-chip{display:inline-block;padding:1px 8px;border:1px solid var(--field-edge);border-radius:999px;font-size:.8rem;font-weight:700;line-height:1.5;color:var(--field);white-space:nowrap;vertical-align:1px}
.vg-chip.gone{color:var(--dim);border-color:var(--line)}
.vg-chip.now{background:var(--field);border-color:var(--field);color:var(--on-field)}
.vg-open{padding-left:14px;border-left:3px solid var(--field);font-weight:600}
.vg .src{font-size:.9rem;color:var(--dim)}
.vg .src a{overflow-wrap:anywhere}
.vg-rule{font-size:.92rem;color:var(--dim)}
.vg-states{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.vg-states li{margin-top:0}
.vg-states a{display:flex;align-items:center;min-height:44px;font-weight:600}
@media(min-width:720px){.vg-states{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vg-offer{max-width:62ch}
.vg-front .youline{margin-top:0;max-width:62ch}
/* A state's own ballot measures (render.py state_measures, data/ballot-measures.json): one card a measure, stacked on a phone */
.props{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.prop{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.prop .meta{color:var(--dim);font-size:.88rem}
.prop h3{font:700 1.12rem/1.3 var(--body);text-transform:none;letter-spacing:0;margin-top:8px;overflow-wrap:anywhere}
.prop dl{margin:12px 0 0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.prop dl div{background:var(--bg);padding:10px 12px}
.prop dt{color:var(--dim);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.prop dd{margin:4px 0 0}
.prop p{margin-top:12px;max-width:70ch}
.prop .prop-note{color:var(--dim);font-size:.95rem}
.prop-side.with b{color:var(--ga)}.prop-side.against b{color:var(--gf)}.prop-side.none{color:var(--dim)}
.prop .links{margin-top:8px;display:flex;flex-wrap:wrap;gap:0 18px;font-size:.92rem}
.prop .links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.props-end{margin-top:14px;max-width:62ch}
@media(min-width:900px){.props{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
/* The site speaks to you (17 October 2026): a message from the site in its own face, in the corner above the show's
   bubble, drawn by community.js ("the site speaks to you"). A message from someone, so a face and a card, never a
   banner, and fixed, so nothing on the first screen of a page moves under it. Who is speaking and what it may say:
   ../../characters.md, "Every page talks to you". Gone while the discussion is open. Nothing hides and animates in. */
.hi{position:fixed;inset-inline-end:10px;bottom:10px;z-index:15;width:min(calc(100vw - 20px),24rem);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 32px -10px rgba(0,0,0,.7)}
html[data-mode="discussion"] .hi{display:none}
.hi-w{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;gap:10px;align-items:start;padding:12px 4px 12px 12px;max-width:none;margin:0}
[dir="rtl"] .hi-w,html[lang="fa"] .hi-w{padding:12px 12px 12px 4px}
.hi-face{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--sunk);border:1px solid var(--line)}
.hi-b{min-width:0}
.hi-who{margin:0;font-weight:700;font-size:.82rem;line-height:1.3;color:var(--field)}
.hi-say{margin:2px 0 0;font-size:.95rem;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.hi-q{color:var(--dim)}
html[lang="fa"] .hi-q{quotes:"\00AB" "\00BB"}
.hi-acts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.hi-go{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--field);background:var(--field);color:var(--on-field);font:700 .95rem/1.2 var(--body);text-decoration:none;cursor:pointer}
.hi-go:hover{background:var(--field-hi)}
.hi-go.hi-alt{background:transparent;color:var(--ink);border-color:var(--line)}
.hi-go.hi-alt:hover{border-color:var(--field);background:transparent}
.hi-x{display:grid;place-items:center;width:40px;height:40px;margin:-6px 0 0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--dim);cursor:pointer}
.hi-x:hover{background:var(--raise);color:var(--ink)}
.hi-go:focus-visible,.hi-x:focus-visible{outline:2px solid var(--field);outline-offset:2px}
@media print{.hi{display:none}}

/* the link to the terms beside every box that takes something (build/consent.py, 26 October 2026): a 40px tap target */
.consent-note a{display:inline-flex;align-items:center;min-height:40px}

/* People first (4 November 2026): every comment says what it answers, the site's own answers sit folded under the comment
   they answer, and the side of All discussions offers comments worth answering (community.js, row, groupCard, drawJump). */
.said-to{display:flex;flex-direction:column;gap:2px;margin:8px 0 2px;padding:6px 10px;min-height:40px;justify-content:center;border-inline-start:3px solid var(--field);background:var(--raise);border-radius:6px;color:var(--dim);font-size:.85rem;line-height:1.35;text-decoration:none}
.said-to:hover{color:var(--ink)}
.said-to-w{font-weight:700;color:var(--ink)}
.said-to q{quotes:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.said-to q::before{content:'\201C'}.said-to q::after{content:'\201D'}
.said.fold{padding:0;background:transparent;border-style:dashed}
.said.fold>:not(.said-fold){display:none}
.said-fold{display:flex;align-items:center;gap:10px;inline-size:100%;min-height:44px;padding:8px 12px;border:0;background:transparent;color:var(--dim);font:600 .88rem/1.3 var(--body);text-align:start;cursor:pointer}
.said-fold-w{flex:1 1 auto;min-width:0}
.said-fold-w::before{content:'';display:inline-block;inline-size:8px;block-size:8px;margin-inline-end:8px;border-radius:50%;background:var(--field);vertical-align:middle}
.said-fold-when{flex:none;font-weight:500}
.said-fold-go{flex:none;color:var(--field);font-weight:700}
.said-fold:hover .said-fold-go{text-decoration:underline}
.said-lit{outline:2px solid var(--field);outline-offset:2px}
.said .meta .tag.xp{color:var(--field);font-weight:700}
.said .meta .tag.newbie{color:var(--ga);font-weight:700}
.reply-here{display:grid;gap:4px;padding:8px 10px;background:var(--raise);border-radius:6px;font-size:.88rem;color:var(--dim)}
.reply-here-w{margin:0}
.reply-here-w b{color:var(--ink)}
.reply-here q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.dg-k{flex:1 0 100%;margin-top:0;font:700 .75rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.dg-wait{display:inline-block;margin-inline-start:4px;padding:2px 8px;border-radius:999px;background:var(--raise);color:var(--ink);font-weight:700;font-size:.82rem}
.dg-c{display:grid;gap:2px}
.dg-c+.dg-c{padding-top:8px;border-top:1px solid var(--line)}
.dg-who{font-size:.86rem;color:var(--dim)}
.dg-who b{color:var(--ink)}
.dg-to{font-weight:600}
.dg-c .dg-q{color:var(--ink);-webkit-line-clamp:2}
.jump-best{display:grid;gap:4px;margin:0 0 14px;padding:12px;border:1px solid var(--field);border-radius:8px;color:var(--ink);text-decoration:none}
.jump-best:hover{background:var(--raise)}
.jump-best-k{font:700 .75rem/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--field)}
.jump-best-k::before{content:'';display:inline-block;inline-size:10px;block-size:10px;margin-inline-end:6px;background:var(--field);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);vertical-align:-1px}
.jump-best-who{font-size:.82rem;color:var(--dim)}
.jump-best-t{font-size:.95rem;line-height:1.45;overflow-wrap:anywhere}
.jump-to{margin:2px 0 0;font-size:.82rem;color:var(--dim)}
.jump-why{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.jump-why span{padding:2px 8px;border-radius:999px;background:var(--bg);color:var(--dim);font-size:.78rem;font-weight:700}
.replies>.said.reply{position:relative}
.said .meta>.who{flex-shrink:0;max-width:100%}
html[lang="fa"] .said-to q::before{content:"\00AB"}html[lang="fa"] .said-to q::after{content:"\00BB"}
.said .who>.said-sub{flex-shrink:0}
.replies .said .meta>.who{flex-basis:100%}
/* THE LOOK OF 14 OCTOBER 2026. This file is added after site.css by the build (render.py, extras): the site still
   loads one stylesheet. Where both files speak, this one decides.

   Armin, 14 October 2026: "The whole website needs to become a lot more beautiful, with a cleaner design, a better
   user interface, and a lot easier to understand what's going on ... less messy ... When people come to the website,
   they have to think, 'Oh my god, this is the most beautiful website in the world.'" The brief is
   projects/brand/community-strategy.md, section 7: dark stays; one idea per screen; far fewer boxes inside boxes;
   bigger and calmer type; real pictures (public-domain classical art in the brand's two tones); ranks that are drawn.

   WHAT CHANGED, in one place:
   - ONE TYPE SCALE (--t1 to --t7) and nothing between its steps.
   - SPACE DOES THE SEPARATING. A section no longer draws a line above itself; a thing that sits on a panel no
     longer draws an outline round the panel. An outline is kept only where it means "you can type here" or
     "this is the one you are on".
   - Two corner sizes, both softer (8 and 14).
   - PICTURES: .art is a painting from data/art.json behind a head, with the ground of the site under it and a
     shade over it, so words read before it loads and after.
   - No colour was added. Every colour here is a token of site.css, which mirrors projects/brand/brands.json.
     Yellow is still only the headline, the buttons and the links.
   - NOTHING IS HIDDEN AND ANIMATED IN. The only movement is a card answering a finger. */
:root{
  --r:8px; --r2:14px; --line:#262523;
  --t1:.8125rem; --t2:.9375rem; --t3:1rem; --t4:1.1875rem; --t5:1.5rem; --t6:clamp(1.9rem,6.4vw,3rem); --t7:clamp(2.7rem,12.4vw,5.6rem);
  --ease:cubic-bezier(.16,1,.3,1);
}
body{font-size:var(--t3);line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media(min-width:900px){body{font-size:1.0625rem}}
::selection{background:var(--field);color:var(--on-field)}
html{scrollbar-color:#3a3936 var(--sunk)}
textarea,input{caret-color:var(--field)}
h1{font-weight:900;letter-spacing:-.005em}
h2{font-size:var(--t6);line-height:.98}
h3{font-size:var(--t5)}
a{text-decoration-thickness:1px;text-underline-offset:.2em}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------------------------------------------------------------- sections: space, not lines */
/* (the padding of a section and the line above it are changed in site.css itself, at ".sec": see the note there) */
.sec-p{margin-top:12px;max-width:56ch;color:var(--dim);font-size:var(--t3);line-height:1.55}
.field{border-bottom:0}
.field.call{border-top:0}
.lede{font-size:var(--t4);line-height:1.4;font-weight:500}
.crumb{font-size:var(--t2)}

/* ---------------------------------------------------------------- the header: one calm bar, and a strip that belongs to it */
.top{background:#0A0A0A;border-bottom:0}
.top .wrap{min-height:60px}
.mark{font-size:1.4rem;letter-spacing:.03em}
.top nav a{font-size:var(--t2);font-weight:600;color:var(--dim);border-radius:var(--r);transition:color .15s}
.top nav a:hover{background:none;color:var(--ink)}
.top nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--field);border-radius:0}
.top nav a.acct{color:var(--ink);border-color:#3a3936;border-radius:999px;padding:0 16px}
.top nav a.acct:hover{border-color:var(--seal);background:none}
.subnav{background:#0A0A0A;border-bottom:1px solid var(--line);padding-left:var(--gutter)}
.subnav-s{gap:2px;align-items:center}
.subnav a{padding:12px 11px;font-size:var(--t2);transition:color .15s}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--field)}
.subnav .nav-more{border-left:0}
.nav-more>summary{font-size:var(--t2)}
.nav-more>summary.on{color:var(--ink)}
.nav-more-l{border:0;border-radius:var(--r2);background:var(--raise);box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}
.nav-more .nav-more-l a:hover{background:rgba(243,241,234,.07)}
/* Every list a select opens is dark (Armin, 15 October 2026, a screenshot of the country switch opening white). Chrome on
   Windows paints an open list from the select's own ground, and the switch's ground was transparent here, so it opened white.
   No select on the site may be see-through: the rule is written for all of them, at the end of the file, so a pill that
   looks see-through (.q-row-w) gets the page's own colour instead. */
.ctabs-l a{border-color:#3a3936}
/* Solid, not .96: at .96 the text scrolling under the bars showed through as a ghost (bug sweep, 14 Oct 2026). */
.modes{background:#0A0A0A}

/* ---------------------------------------------------------------- pictures */
/* A painting behind a head. The ground is there first; the picture arrives on it; a shade keeps the words readable
   wherever the painter put his lights. Nothing waits for the picture and nothing moves when it comes. */
.art{display:block;background:var(--sunk)}
.art img{display:block;width:100%;height:100%;object-fit:cover}
.hero-art{position:relative;isolation:isolate;overflow:hidden;background:var(--bg)}
/* A phone: the painting is a picture at the top of the head (the three by two cut), and it fades into the ground
   below it. A shade sits only over the top, where the headline is, and the headline carries its own shadow. */
.hero-art>.art{position:absolute;left:0;right:0;top:0;height:min(340px,92%);z-index:-2;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.hero-art>.art img{object-position:50% 40%}
.hero-art::after{content:"";position:absolute;left:0;right:0;top:0;height:min(340px,92%);z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,.44) 0%,rgba(10,10,10,.3) 45%,rgba(10,10,10,.06) 100%)}
.hero-art .wrap{position:relative;display:block;padding-top:32px;padding-bottom:36px}
.hero-art h1{font-size:var(--t7);line-height:.9;color:var(--field);text-shadow:0 2px 3px rgba(0,0,0,.6),0 0 26px rgba(0,0,0,.8)}
.hero-art h1 i{font-style:normal;color:var(--ink)}
.hero-art .lede{max-width:30ch;margin-top:14px;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 18px rgba(0,0,0,.85)}
.hero-art .crumb{color:var(--ink);text-shadow:0 1px 3px rgba(0,0,0,.8)}
@media(min-width:700px){
  /* a computer: the wide cut fills the head; the shade is on the left, where the words are, and gone by the middle */
  .hero-art>.art,.hero-art::after{top:0;bottom:0;height:auto}
  .hero-art>.art{-webkit-mask-image:none;mask-image:none}
  .hero-art>.art img{object-position:50% 45%}
  .hero-art::after{background:linear-gradient(90deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.72) 30%,rgba(10,10,10,.12) 62%,rgba(10,10,10,0) 100%),linear-gradient(180deg,transparent 78%,var(--bg) 100%)}
  .hero-art .wrap{padding-top:72px;padding-bottom:72px}
  .hero-art .lede{max-width:36ch}
}
.hero-page .wrap{padding-top:16px}
.hero-page h1{font-size:clamp(2.4rem,10.4vw,4.6rem);margin-top:8px}
@media(min-width:700px){.hero-page .wrap{padding-top:40px;padding-bottom:56px}.hero-page h1{max-width:13ch}}
/* the rank over a painting keeps its contrast */
.hero-art .q-rank{text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.7)}

/* ---------------------------------------------------------------- the front page: the headline and the front question
   (rebuilt 14 October 2026, evening: the three ways in are gone; the first and only ask of the first screen is the front
   question, build/members.py. Its own parts are styled where it is built; this only places it.) */
.hero-home .wrap{padding-top:24px;padding-bottom:28px}
.hero-home .lede{margin-top:10px;font-size:1.0625rem;max-width:36ch}
.hero-home h1{font-size:clamp(2.3rem,11.2vw,5.6rem)}
.front-q{margin-top:18px;max-width:34rem}
.front-q:empty{display:none}
@media(min-width:900px){
  .hero-home .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,30rem);column-gap:56px;align-items:end;padding-top:84px;padding-bottom:84px}
  .hero-home h1{grid-column:1;grid-row:1;font-size:clamp(4rem,7vw,6.2rem)}
  .hero-home .lede{grid-column:1;grid-row:2;font-size:1.3rem}
  .hero-home .front-q{grid-column:2;grid-row:1/span 2;margin-top:0;align-self:end}
}

/* the reader's rank, and their next mission */
.you-sec{padding:36px 0 44px}
.you-h,.q-yours h2,.q-mine h2,.q-top h2{font-size:var(--t5);letter-spacing:.02em;color:var(--dim)}
.you-sec .q-rank{margin-top:14px}
.you-next{margin-top:18px;max-width:46rem}
.q-next{position:relative;display:block;padding:20px 54px 20px 20px;border-radius:var(--r2);background:var(--panel);text-decoration:none;transition:background-color .18s,transform .2s var(--ease)}
.q-next:hover{background:var(--raise);transform:translateY(-1px)}
.q-next::after{content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;margin-top:-6px;border-right:2.5px solid var(--field);border-bottom:2.5px solid var(--field);transform:rotate(-45deg)}
.q-next-t{display:grid;gap:6px}
.q-next b{font:800 clamp(1.7rem,7vw,2.3rem)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.q-next-h{color:var(--dim);line-height:1.45;max-width:52ch}
.you-all{margin-top:6px}
.you-all a{display:inline-flex;align-items:center;min-height:44px;color:var(--field);font-weight:700}
.you-row{display:grid;gap:4px}
.you-next-w .you-h{margin-top:18px;font-size:var(--t2);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.you-next-w .you-next{margin-top:8px}
@media(min-width:900px){
  .you-row{grid-template-columns:minmax(0,22rem) minmax(0,1fr);column-gap:56px;align-items:end}
  .you-row .you-next{max-width:none}
}

/* the journey in three acts: each a painting, a numeral and one line */
.journey{padding-top:20px}
.acts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.act-c{position:relative;isolation:isolate;display:block;min-height:132px;border-radius:var(--r2);overflow:hidden;text-decoration:none;background:var(--sunk)}
.act-c>.art{position:absolute;inset:0;z-index:-2}
.act-c>.art img{object-position:50% 50%;transition:transform .6s var(--ease)}
.act-c::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.82) 54%,rgba(10,10,10,.12) 80%,rgba(10,10,10,0) 100%)}
.act-c:hover>.art img{transform:scale(1.04)}
.act-t{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;min-height:132px;padding:16px 20px}
.act-n,.q-act-n{grid-row:1/span 3;font:900 3.4rem/1 var(--display);color:var(--field);width:1.5em;text-align:center;letter-spacing:.02em}
.act-t b{align-self:end;font:800 2.1rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.act-l{color:var(--ink);font-size:var(--t2);line-height:1.35}
.act-x{align-self:start;color:var(--seal);font-size:var(--t1);font-weight:700}
/* THE MAIN MISSION IS THE BIGGEST DOOR. The act marked "main" in data/missions.json carries act-main (missions.front_missions):
   Scout, the Intel Room, since 15 October 2026 (Armin: "This should be the main mission"); Gather until then. Four acts: one
   column on a phone, two from 800px, one row of four from 1100px with the main one, second, the widest. */
.act-main .act-c,.act-main .act-t{min-height:184px}
.act-main .act-t b{font-size:2.6rem}
.act-main .act-c{box-shadow:inset 0 0 0 1px rgba(244,196,48,.35)}
/* On a phone the other three doors are rows, not posters (15 October 2026): four acts at the old height put the front page past
   its 4,500px, and the main door has to stand out by size anyway. */
@media(max-width:799px){
  .acts{gap:6px;margin-top:10px}
  .acts .act-l{font-size:var(--t1)}
  .acts .act-c,.acts .act-t{min-height:88px}
  .acts .act-t{padding:10px 16px;column-gap:12px;align-content:center}
  .acts .act-n{font-size:2.5rem;width:3.75rem}
  .acts .act-t b{font-size:1.7rem}
  /* The main door stands out by its height and its gold edge, never by its own indent: its bigger numeral made a wider
     column and pushed Scout's words 22px right of the other three (31 October 2026). The numeral column is one fixed width. */
  .acts .act-main .act-c,.acts .act-main .act-t{min-height:150px}
  .acts .act-main .act-t b{font-size:2.4rem}
}
@media(min-width:800px){
  .acts{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .act-main .act-c,.act-main .act-t{min-height:300px}
  .act-main .act-t b{font-size:3.2rem}
  .act-c,.act-t{min-height:260px}
  .act-c::after{background:linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,0) 42%,rgba(10,10,10,.78) 72%,rgba(10,10,10,.94) 100%)}
  .act-t{grid-template-columns:1fr;align-content:end;row-gap:4px;padding:24px}
  .act-n{grid-row:auto;width:auto;text-align:left;font-size:4rem}
  .act-t b{font-size:2.6rem}
}
@media(min-width:1100px){
  .acts{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
  .act-c,.act-t{min-height:300px}
  .act-main .act-c,.act-main .act-t{min-height:340px}
  .act-t b{font-size:2.2rem}
  .act-l{min-height:4.05em}      /* three lines kept for every act's line, so the four names sit on one line (1 Nov 2026: Rally's sat higher) */
}

/* the record, as one calm door */
.record-sec{padding-bottom:20px}
.rec-find{margin-top:22px;max-width:34rem}
.rec-find .find{margin-top:0}
.find label{font-size:var(--t3)}
.find input,.tools input,.tools select,.statepick select{border-color:#3a3936;border-radius:var(--r);background:var(--panel)}
.find input:focus,.tools input:focus,.tools select:focus,.statepick select:focus{border-color:var(--field)}
.rec-find .statepick select{width:100%}
.rec-l{list-style:none;margin:18px 0 0;padding:0;max-width:34rem}
.rec-l a{position:relative;display:grid;gap:2px;min-height:64px;padding:13px 34px 13px 0;border-top:1px solid var(--line);text-decoration:none}
.rec-l li:first-child a{border-top:0}
.rec-l b{font:800 1.45rem/1.05 var(--display);text-transform:uppercase;letter-spacing:.015em;color:var(--field)}
.rec-l span{color:var(--dim);font-size:var(--t2);line-height:1.4}
.rec-l a::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-5px;border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);transform:rotate(-45deg);transition:transform .2s var(--ease),border-color .2s}
.rec-l a:hover::after{border-color:var(--field);transform:translateX(3px) rotate(-45deg)}
.vg-front{padding:0 0 44px}
.vg-front .youline{max-width:34rem}
@media(min-width:900px){
  .record-sec .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px}
  .record-sec h2,.record-sec .sec-p,.record-sec .rec-find{grid-column:1}
  .record-sec .rec-l{grid-column:2;grid-row:1/span 3;margin-top:0;align-self:start}
}
.nudge-sec{padding:8px 0 28px}
.proof{margin-top:10px;color:var(--seal);font-weight:600;font-size:var(--t2)}
/* THE BUBBLE IS ON SCREEN FROM THE FIRST PIXEL (14 October 2026, evening). It no longer steps aside; the page keeps room at
   its foot instead, so the bubble never sits on the last line of the footer. */
body:has(#calls:not(.off)){padding-bottom:120px}
/* The body already keeps 120px for the bubble, so the footer does not keep its own 96px as well (15 October 2026: the two
   together pushed the front page past its 4,500px on a phone). */
body:has(#calls:not(.off)) footer{padding-bottom:40px}

/* ---------------------------------------------------------------- the Missions page */
.q-head .wrap{padding-top:32px;padding-bottom:14px}      /* 32, as every painted head: at 16 the headline sat flush under the tab bar on a phone (31 Oct 2026) */
.q-head h1{font-size:clamp(2.7rem,12.6vw,5.4rem)}
.q-head .lede{max-width:34ch;margin-top:10px;font-size:var(--t3);font-weight:500;line-height:1.45}
@media(min-width:900px){
  .q-head .wrap{display:block;padding-top:64px;padding-bottom:56px}
  .q-head .lede{font-size:var(--t4);max-width:40ch}
}
/* the rank: a drawing, the name, the XP, the way to the next one, and what the rank means */
.q-rank,html.q-js-on .q-head .q-rank:not([hidden]),html.q-js-on .q-rank.q-js:not([hidden]){display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 14px;align-items:center;max-width:30rem;margin-top:18px}
.q-rank[hidden]{display:none}
html:not(.q-js-on) .q-rank.q-js{display:none}
.q-ins{grid-row:1;grid-column:1;display:grid;place-items:center;width:64px;height:64px}
.q-ins [hidden]{display:none}
.ins{display:block;color:var(--seal)}
.ins .y{fill:var(--field)}
.q-rank-t{grid-column:2;display:grid;gap:5px;min-width:0}
.q-rank-l{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.q-rank-l b{font:800 1.75rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.q-rank-l span{font-weight:700;color:var(--seal);font-size:var(--t2)}
.q-bar{grid-row:auto;grid-column:auto;height:6px;border-radius:999px;background:rgba(243,241,234,.14);overflow:hidden}
.q-bar i{min-width:6px}
.q-rank-n{grid-row:auto;grid-column:auto;text-align:left;color:var(--dim);font-size:var(--t1);font-weight:600}
.q-rank-s{color:var(--dim);font-size:var(--t1);line-height:1.4}
/* your next mission, and the chooser one tap under it */
.q-yours{padding:8px 0 4px}
.q-best{margin-top:12px}
.q-world{margin-top:10px;color:var(--seal);font-weight:600;max-width:46rem}
.q-world[hidden]{display:none}
.q-fit{margin-top:6px;max-width:46rem}
.q-fit>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--field);font-weight:700;cursor:pointer;list-style:none}
.q-fit>summary::-webkit-details-marker{display:none}
.q-fit>summary::after{content:"";width:8px;height:8px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease)}
.q-fit[open]>summary::after{transform:rotate(225deg);margin-top:4px}
.q-pick{margin-top:4px;padding:16px;border-radius:var(--r2);background:var(--panel);display:grid;gap:14px;max-width:none}
.q-cue{flex:none;margin:0;color:var(--dim);font-weight:500;font-size:var(--t2)}
.q-row{display:grid;gap:6px}
.q-row::before{display:none}
.q-row .q-chips{display:flex;flex-wrap:wrap;gap:8px}
.q-lab{margin:0;color:var(--ink);font-size:var(--t2)}
.q-chip{border-color:#3a3936;background:transparent;font-size:var(--t2);font-weight:600;transition:border-color .15s,background-color .15s}
.q-chip:hover{border-color:var(--seal)}
.q-row-w .q-lab{margin-left:0}
.q-row-w select,.q-need select{flex:none;width:100%;max-width:20rem;min-height:44px;padding:0 14px;font:600 var(--t2)/1 var(--body);background:transparent;color:var(--ink);border:1px solid #3a3936;border-radius:999px}
.q-row-w select option,.q-need select option{color:var(--ink);background:var(--panel)}
@media(min-width:900px){.q-head .q-pick{grid-column:auto;grid-row:auto;border:0;padding:16px}}
/* the three acts */
.q-board{padding:8px 0 24px}
.q-tier{margin-top:22px;scroll-margin-top:130px}
.q-act-h{position:relative;isolation:isolate;display:block;min-height:96px;border-radius:var(--r2);overflow:hidden;background:var(--sunk)}
.q-act-h>.art{position:absolute;inset:0;z-index:-2}
.q-act-h>.art img{object-position:50% 50%}
.q-act-h::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.82) 54%,rgba(10,10,10,.12) 80%,rgba(10,10,10,0) 100%)}
@media(min-width:700px){.q-act-h::after{background:linear-gradient(90deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.72) 26%,rgba(10,10,10,.06) 52%,rgba(10,10,10,0) 100%)}}
.q-act-t{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-content:center;align-items:center;min-height:96px;padding:10px 18px}
.q-act-n{grid-row:1/span 2}
.q-act-t h2{align-self:end;font-size:clamp(2.4rem,10vw,3.4rem);color:var(--ink)}
.q-act-l{align-self:start;margin:2px 0 0;color:var(--ink);font-size:var(--t2);font-weight:600}
.q-tier h2 + p.q-act-l{margin-top:2px;color:var(--ink);font-size:var(--t2);max-width:none}
.q-act-p{margin-top:10px;max-width:60ch;color:var(--dim);line-height:1.5;font-size:var(--t2)}
.q-act-c{color:var(--seal);font-weight:700;white-space:nowrap}
.q-nojs{display:inline}
html.q-js-on .q-nojs{display:none}
html.q-js-on span.q-js:not([hidden]){display:inline}
.q-doors{margin-top:8px;display:flex;flex-wrap:wrap;gap:0 22px}
.q-doors a{display:inline-flex;align-items:center;min-height:44px;color:var(--field);font-weight:700}
.q-chain-l{margin-top:10px;max-width:60ch;color:var(--dim);font-size:var(--t2);line-height:1.5}
.q-chain-l b{color:var(--ink)}
/* the rest of an act: one native fold, the same grammar as "Make this fit me" */
.q-more{margin-top:6px}
.q-more[hidden]{display:none}
.q-more>summary{display:flex;align-items:center;gap:8px;min-height:48px;color:var(--field);font-weight:700;cursor:pointer;list-style:none}
.q-more>summary::-webkit-details-marker{display:none}
.q-more>summary::after{content:"";width:8px;height:8px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s var(--ease)}
.q-more[open]>summary::after{transform:rotate(225deg);margin-top:4px}
.q-more>.q-list{margin-top:4px}
/* an open card takes the whole row of the grid, so its neighbours do not stand beside a hole */
@media(min-width:700px){.q-list>li:has(>.q-m[open]){grid-column:1/-1}}
.q-list{margin-top:16px;gap:10px}
@media(min-width:700px){.q-act-h,.q-act-t{min-height:210px}.q-act-t{padding:28px 32px}.q-act-n{font-size:5rem}.q-list{gap:12px}}
@media(min-width:1100px){.q-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* the main act (q-tier-main: Scout, the Intel Room, since 15 October 2026) has the biggest band */
.q-tier-main .q-act-h,.q-tier-main .q-act-t{min-height:124px}
.q-tier-main .q-act-t h2{font-size:clamp(2.9rem,13vw,4.4rem)}
.q-tier-main .q-act-h{box-shadow:inset 0 0 0 1px rgba(244,196,48,.35)}
@media(min-width:700px){.q-tier-main .q-act-h,.q-tier-main .q-act-t{min-height:280px}}
/* Four acts on a phone (15 October 2026): the three that are not the main one take a smaller name and a tighter gap, so the
   Missions page stays under its 4,500px with everything closed. */
@media(max-width:699px){.q-tier:not(.q-tier-main) .q-act-t h2{font-size:2rem}.q-tier:not(.q-tier-main) .q-act-t{padding:6px 16px}.q-act-p{margin-top:6px;font-size:var(--t1)}}
/* two on show in Scout and four in Gather: two columns each, so no row holds a hole */
@media(min-width:1100px){.q-tier-gather .q-list,.q-tier-intel .q-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* what a mission does for liberty: the first line of an open card (14 October 2026, evening) */
.q-for{margin:0 0 12px;padding-left:12px;border-left:2px solid var(--field);color:var(--ink);font-size:var(--t3);line-height:1.45;max-width:60ch}
/* a mission that ticks itself (the account, the two answers, the profile) */
.q-auto{color:var(--seal);font-weight:700}
.q-auto.done::before{content:"✓ ";color:var(--field)}
/* a mission: a thing you pick up. No outline: the panel is the card, and it lifts under a finger. */
.q-m{border:0;border-radius:var(--r2);background:var(--panel);transition:background-color .18s,transform .22s var(--ease)}
.q-m:hover{background:#1f1f1e}
.q-m:not([open]):hover{transform:translateY(-2px)}
.q-m[open]{background:#1c1c1b}
.q-m summary{grid-template-columns:40px minmax(0,1fr) 14px;gap:5px 12px;align-items:center;padding:12px 14px 13px}
.q-m summary::after{grid-column:3;grid-row:1;margin-top:-4px}
.q-m[open] summary::after{margin-top:4px}
.q-ic{grid-column:1;grid-row:1;width:40px;height:40px}
.q-t{display:contents}
.q-title{grid-column:2;grid-row:1}
.q-hook-s,.q-meta,.q-state{grid-column:1/-1}
.q-state{justify-self:start}
.q-ic{border-radius:50%;background:rgba(233,217,166,.1)}
.q-mode-host .q-ic{background:var(--seal);color:var(--on-field)}
.q-stage{right:-4px;bottom:-4px;background:var(--bg);border:0;color:var(--seal)}
.q-t{gap:5px}
.q-title{font-size:1.0625rem;line-height:1.25}
.q-hook-s{font-size:.90625rem;line-height:1.38;color:var(--dim)}
.q-small .q-hook-s{display:block}
.q-meta{gap:2px 14px;font-size:var(--t1);font-weight:600;color:var(--dim)}
.q-xp{color:var(--seal)}
.q-mode-host .q-mode{color:var(--ink)}
.q-state{margin-top:2px}
.q-body{border-top:1px solid rgba(243,241,234,.07);padding:4px 16px 18px;gap:14px}
.q-steps li::before{background:rgba(243,241,234,.09)}
.q-rules{max-width:62ch;padding:14px 16px;border-radius:var(--r);background:rgba(243,241,234,.045)}
.q-rules-h{font-weight:700;font-size:var(--t2);color:var(--ink)}
.q-rules ul{margin:8px 0 0;padding:0 0 0 18px;display:grid;gap:6px;color:var(--dim);font-size:var(--t2);line-height:1.45}
.q-rules-m{margin-top:4px}
.q-rules-m a{display:inline-flex;align-items:center;min-height:44px;color:var(--field);font-weight:700;font-size:var(--t2)}
.q-need{max-width:62ch;padding:14px 16px;border-radius:var(--r);background:rgba(233,217,166,.08)}
html.q-js-on .q-need.q-js:not([hidden]){display:grid;gap:10px}
.q-need[hidden]{display:none}
.q-need p{color:var(--ink);font-size:var(--t2);line-height:1.45}
.q-form{border:0;background:var(--bg)}
.q-form textarea,.q-form input{border-color:#3a3936}
.q-ok{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;min-height:44px;padding:6px 0;font-weight:600;font-size:var(--t2);line-height:1.4;cursor:pointer}
.q-form .q-ok input{width:22px;height:22px;min-height:0;padding:0;margin:1px 0 0;accent-color:var(--field)}
/* the next mission, large */
.q-big{background:var(--panel)}
.q-big summary{grid-template-columns:48px minmax(0,1fr) 14px;gap:8px 14px;padding:16px 16px}
.q-big .q-ic{width:48px;height:48px}
.q-big .q-title{font:800 clamp(1.6rem,6.6vw,2.4rem)/1 var(--display);letter-spacing:.01em}
.q-big .q-hook-s{font-size:var(--t2)}
.q-big summary::before{grid-column:1/-1;grid-row:auto;order:9;margin-top:2px;border-radius:999px;padding:0 22px}
.q-mine-a{border:0}
.q-mine-a:hover{background:var(--raise)}
/* the ranks */
.q-ranks{padding-top:12px;padding-bottom:28px}
/* the ranks: six drawings in one row, the reader's own lit and the rest quiet; the line of meaning of the reader's rank
   and of the next one under the row (quests.js sets data-q-rk-is: on, next, or nothing) */
.q-rkrow{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;max-width:46rem}
.q-rkrow li{display:grid;justify-items:center;align-content:start;gap:4px;padding:10px 2px;border-radius:var(--r);text-align:center;opacity:.42;filter:grayscale(1)}
.q-rkrow li[data-q-rk-is="next"]{opacity:.7}
.q-rkrow li[data-q-rk-is="on"]{opacity:1;filter:none;background:rgba(233,217,166,.08)}
.q-rkrow .ins{width:44px;height:44px}
.q-rkrow b{font:800 1.05rem/1.02 var(--display);text-transform:uppercase;letter-spacing:.02em;overflow-wrap:normal;word-break:keep-all;hyphens:none}
/* a phone: three by two, so every name sits whole (two words may take two lines, a word never breaks) */
@media(max-width:559px){.q-rkrow{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}
.q-rkrow li[data-q-rk-is="on"] b{color:var(--field)}
.q-rkrow span{color:var(--seal);font-weight:700;font-size:var(--t1)}
.q-rklines{margin-top:14px;display:grid;gap:8px;max-width:46rem}
.q-rk-line{color:var(--dim);font-size:var(--t2);line-height:1.45}
.q-rk-line:not([data-q-rk-is="on"]):not([data-q-rk-is="next"]){display:none}
.q-rk-line::before{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:999px;font-size:var(--t1);font-weight:700}
.q-rk-line[data-q-rk-is="on"]::before{content:attr(data-now);background:var(--seal);color:var(--on-field)}
.q-rk-line[data-q-rk-is="next"]::before{content:attr(data-next);background:rgba(243,241,234,.1);color:var(--ink)}
.q-rk-line b{color:var(--ink)}
@media(min-width:700px){.q-rkrow{gap:10px}.q-rkrow .ins{width:56px;height:56px}.q-rkrow b{font-size:1.15rem}}
.q-nextline{margin-top:16px;max-width:60ch;color:var(--dim);font-size:var(--t2)}
.q-read{padding-top:20px}
.q-reading .q-fold-b{padding-bottom:6px}
.q-reading .q-fold:last-child{border-bottom:0}
.q-nextline b{color:var(--ink)}
.q-fold{border-bottom-color:var(--line)}

/* ---------------------------------------------------------------- the host guide and the safety page */
.hg .prose{max-width:64ch}
.hg .prose>h2:first-child,.hg .prose>ol:first-child{margin-top:0}
.hg-steps,.sf-rules{list-style:none;padding:0;counter-reset:hg;display:grid;gap:18px}
.prose .hg-steps li,.prose .sf-rules li{counter-increment:hg;position:relative;margin:0;padding-left:54px;min-height:40px}
.hg-steps li::before,.sf-rules li::before{content:counter(hg);position:absolute;left:0;top:-2px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(233,217,166,.1);color:var(--seal);font:800 1.35rem/1 var(--display);font-variant-numeric:tabular-nums}
.hg-steps b{color:var(--ink)}
.prose .sf-rules h2{margin:0;padding-top:6px;font-size:var(--t5);line-height:1.1}
.hg .prose h2 + p{color:inherit;font-size:inherit;max-width:none}
.prose .sf-rules p{margin-top:6px}
.hg .row{margin-top:26px}
.hg-asks{padding-left:18px}
.hg-part{margin-top:22px}
.prose .hg-part h3{margin-top:0}
.prose .hg-part p{margin-top:6px}
.hg .src{display:block;margin-top:6px;color:var(--dim);font-size:var(--t1);line-height:1.5}
.hg .src a{overflow-wrap:anywhere}

/* ---------------------------------------------------------------- the same site on every other page */
/* A row of a list, a race, a tile: the panel is the thing. Its outline is gone, and so is the box drawn round a box. */
.person,.race,.tile,.door,.said,.card,.vcard,.ccard,.q-mine-a,.you-q{border-color:transparent}
.person:hover,.race:hover{border-color:transparent;background:var(--raise)}
.person,.race{border-radius:var(--r2);transition:background-color .18s}
.disc-col>.fb{border-color:#3a3936;border-radius:var(--r2)}
.nudge{border-radius:var(--r2);border-color:transparent;background:var(--panel)}
.nudge:hover{border-color:var(--field-edge)}
.btn{border-radius:999px;transition:background-color .15s,transform .15s}
.btn-line{border-width:1.5px}
.call h2{font-size:var(--t6)}
.call p{font-weight:500;font-size:var(--t4);line-height:1.45}
.field.call .wrap{padding-top:56px;padding-bottom:56px}
.prose h2{font-size:clamp(1.7rem,5.4vw,2.2rem);margin-top:48px}
.prose p,.prose li{line-height:1.68}
.glance{border-top:0}
/* A note is a panel, not a card with a coloured stripe down one side; and a thing that floats has a shadow or an edge, not both. */
.racenote{border:0;border-radius:var(--r2)}
.band-top{border-left:0;border-radius:var(--r2)}
.hits,.rp-m{border:0;border-radius:var(--r2)}
@media(min-width:640px){.sheet-in{border:0;border-radius:var(--r2)}}
/* the XP bar is set, not slid: a width that animates makes the page lay itself out again on every frame */
.q-bar i{transition:none}

/* ---------------------------------------------------------------- the footer: a mark, three short columns, one sentence */
/* On a phone it is one sentence, the links in two columns and the line the law asks for: the mark and the three
   column heads are for a screen that has the room (the footer was 1,129px on a phone once, and was cut on purpose). */
footer{padding:28px 0 96px;border-top:1px solid var(--line);font-size:var(--t2)}
.foot-mark,.foot-h{display:none}
.foot-mark img{width:40px;height:40px;border-radius:50%}
.foot-mark b{color:var(--field);font-weight:800}
footer .foot-who{max-width:44ch;line-height:1.5}
.foot-cols{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.foot-c,footer .foot-cols .foot-l{display:contents}
footer a{color:var(--ink);font-weight:600;transition:color .15s}
footer .foot-l a:hover{color:var(--field)}
footer .on-when{color:var(--dim)}
footer .fine{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:var(--t1);line-height:1.55}
@media(min-width:760px){
  footer{padding-top:64px}
  .foot-top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:28px}
  .foot-mark{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font:800 1.4rem/1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
  .foot-cols{grid-template-columns:1.6fr 1fr 1fr;gap:40px;margin-top:36px}
  .foot-c{display:block}
  footer .foot-cols .foot-l{display:grid;grid-template-columns:1fr;margin-top:4px}
  .foot-h{display:block;font:800 1.05rem/1 var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--seal)}
  footer .fine{margin-top:28px}
}
/* ---------------------------------------------------------------- THE COMPOSITION PASS (14 October 2026, late)
   Armin: "Significantly improve the way LibertyPolitics.com looks ... Don't break anything." Nothing here adds a word, a
   colour or a feature; it only places what was already there. Four things:
   1. A COMPUTER USES ITS WIDTH. Every front-page section below the head used the left half of a 72rem column and left the
      right half black. Each now has two sides: what it says on the left, what you do (or what you have) on the right.
   2. THE HEAD'S THREE ANSWERS HAVE A FIRST ONE. They were three identical grey pills at ragged widths; the first is now
      the gold button and the other two sit under it, all the same width on a phone. (Since 15 October 2026 the head has
      one button only, "Join the fight"; the answers are the first question after sign-up.)
   3. THE HEADLINE READS ON A PHONE. The painting stays; the shade over it is heavier where the words are (left and
      bottom) and lighter where the Acropolis is, and the lines have room between them.
   4. THE PAGE HAS CHAPTERS. The missions and what readers posted sit on the deepest ground with a faint lamp-light at
      their top edge (the seal's own tone, at 4%), so the long scroll reads as rooms, not one black sheet. Still no line
      above a section: the ground changes, nothing is drawn. Nothing is hidden or animated in. */

/* 2. the head's answers became ONE gold button, "Join the fight" (15 October 2026, Armin: "at the top we should just have
   one call to action"): it is drawn in members.css for both sites; over the painting it carries the lede's shadow */
.hero-art .fq .fq-go{box-shadow:0 8px 30px rgba(0,0,0,.55)}

/* 3. the head on a phone: a shade weighted to where the words are, and room between the lines */
@media(max-width:699px){
  .hero-art::after{background:linear-gradient(90deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,.32) 70%,rgba(10,10,10,.16) 100%),linear-gradient(180deg,rgba(10,10,10,.22) 0%,rgba(10,10,10,.14) 28%,rgba(10,10,10,.58) 70%,rgba(10,10,10,.88) 100%)}
  .hero-home h1{line-height:.95}
  .hero-home .lede{margin-top:16px}
  .hero-home .front-q{margin-top:24px}
}
/* a computer: the headline sits on its own line of text, not floated above a gap, and the answers keep their contrast
   over the brightest part of the painting */
@media(min-width:900px){
  .hero-home .wrap{grid-template-rows:minmax(0,1fr) auto;row-gap:0}
  .hero-home h1{align-self:end}
  .hero-home .lede{margin-top:22px}
  .hero-home::after{background:linear-gradient(90deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.72) 30%,rgba(10,10,10,.12) 62%,rgba(10,10,10,0) 100%),radial-gradient(ellipse 44% 54% at 78% 66%,rgba(10,10,10,.68) 0%,rgba(10,10,10,.42) 55%,rgba(10,10,10,0) 100%),linear-gradient(180deg,transparent 78%,var(--bg) 100%)}
}
/* the line above the front question sat on the sunlit Acropolis with no shade (his screenshot, 15 October 2026): it gets
   the same shadow as the lede, and the shade above (centre raised from 78% to 66%) now reaches it, while the temple
   above stays bright */
.hero-art .fq-lead{text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 18px rgba(0,0,0,.9)}

/* 4. chapters: the deepest ground and a lamp at its top edge, for the two rooms that hold pictures and people */
.front-missions,.latest.on{background:radial-gradient(90% 280px at 50% 0%,rgba(233,217,166,.045),rgba(233,217,166,0) 100%),var(--sunk)}
.front-missions{padding:48px 0 52px}
@media(min-width:900px){.front-missions{padding:72px 0 76px}.latest.on{padding:64px 0 72px}}

/* 1. a computer uses its width */
@media(min-width:900px){
  /* the gatherings board: what it is on the left, the way in on the right; the gatherings themselves across the whole row */
  .mb-front .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-items:end}
  .mb-front .mb-front-h{grid-column:1;grid-row:1}
  .mb-front .mb-go{grid-column:2;grid-row:1;margin:0;justify-content:flex-end}
  .mb-front .mb-list{grid-column:1/-1;grid-row:2;margin-top:28px}
  /* the missions: the act's promise and your rank on the left, your next mission on the right, level with your rank */
  .front-missions .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px}
  .front-missions .wrap>*{grid-column:1/-1}
  .front-missions .wrap>h2{grid-column:1;grid-row:1}
  .front-missions .wrap>.sec-p{grid-column:1;grid-row:2}
  .front-missions .wrap>.proof{grid-column:1;grid-row:3}
  .front-missions .you-row{display:contents}
  .front-missions .q-rank{grid-column:1;grid-row:4;margin-top:22px}
  .front-missions .you-next-w{grid-column:2;grid-row:1/span 4;align-self:end}
  .front-missions .you-next-w .you-h{margin-top:0}
  .front-missions .acts{grid-row:5;margin-top:36px}
  .front-missions .you-all{grid-row:6;margin-top:10px}
  /* the acts stand on one line (two from 800px, four from 1100px), so the main act rises above its neighbours instead of hanging below them */
  .front-missions .acts{align-items:end}
  /* how to vote: the same two columns as the record above it, the question left and the picker under the record's doors */
  .vg-front .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:center}
  .vg-front .statepick select{width:100%}
  /* what readers posted: the heading and the way to all of it on one line, the three posts under them */
  .latest.on .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-items:end}
  .latest.on .wrap>h2{grid-column:1;grid-row:1}
  .latest.on .latest-go{grid-column:2;grid-row:1;margin:0}
  .latest.on .latest-list{grid-column:1/-1;grid-row:2;margin-top:24px;align-items:stretch}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* No see-through select (15 October 2026, the note above .ctabs-l): the open list takes this ground. */
select:not([multiple]){background-color:var(--panel)}
select option,select optgroup{color:var(--ink);background-color:var(--panel)}

/* ---------------------------------------------------------------- the invitation to come on the show (19 October 2026)
   render.py team_band(): one slim band at the end of the page's content, above the footer. Static: no animation, not
   floating, not in the corner. The red dot is the live mark of the bubble (.calls-a.live i), still. */
.tband{margin:0;background:var(--sunk);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tband-w{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);padding-top:var(--s3);padding-bottom:var(--s3)}
.tband-on{display:inline-flex;align-items:center;gap:7px;margin-inline-end:6px;vertical-align:2px;font:800 var(--t1)/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);padding:4px 9px;border:1px solid #3a3936;border-radius:999px}
.tband-on i{width:8px;height:8px;border-radius:50%;background:#C8102E;box-shadow:0 0 0 3px rgba(200,16,46,.25)}
.tband-l{flex:1 1 18rem;margin:0;font-weight:600;font-size:var(--t3);line-height:1.45}
@media(min-width:760px){.tband-l{font-size:var(--t4)}}
.tband-a{display:inline-flex;align-items:center;gap:.3em;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--field);color:var(--field);font-weight:800;text-decoration:none}      /* gap, 31 Oct 2026: the arrow's own leading space is dropped at the start of its flex item, so it read "on→" */
.tband-a:hover,.tband-a:focus-visible{background:var(--field);color:var(--on-field);text-decoration:none}
/* 20 October 2026: the band moved up the page (render.py place_band). Inside a page's own column (after the question near
   the top of a record, or between the Intel Room's map and its list) it is a box of that column, with no .wrap of its own. */
.tband-in{margin:var(--s4) 0;border:1px solid var(--line);border-radius:var(--r2)}
.tband-in .tband-w{padding:var(--s3) var(--s4)}
.ir-main>.tband-in{margin:0}
@media(min-width:1000px){.ir-main:has(>.tband){grid-template-rows:minmax(0,1fr) auto}.ir-main>.tband{grid-column:1/-1;grid-row:2}}

/* THE PILL IN THE HEADER (20 October 2026, render.py nav_go): "Join the panel", on screen without scrolling on every page.
   On a phone it is the first thing in the strip under the bar, outside the part that scrolls; from 1220px the first link in
   the bar. Still: no animation. */
.subnav a.navgo,.top nav a.navgo{flex:none;align-self:center;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 13px;margin-inline-end:6px;border:1px solid var(--field);border-radius:999px;background:rgba(244,196,48,.12);color:var(--ink);font-weight:700;font-size:var(--t2);white-space:nowrap;text-decoration:none;box-shadow:none}
.subnav a.navgo:hover,.top nav a.navgo:hover{background:var(--field);color:var(--on-field)}
.subnav a.navgo[aria-current="page"],.top nav a.navgo[aria-current="page"]{background:var(--field);color:var(--on-field);box-shadow:none;border-radius:999px}
.top nav a.navgo{display:none}
@media(min-width:1220px){.top nav a.navgo{display:inline-flex;margin-inline-end:4px}}
/* 31 October 2026: a third group, Tools (../TOOLS.md), ran the bar 25px past its end at 1220px. Every link stays; between 1220
   and 1365px each one gives up 2px of its side padding (9 to 7), which measured 36px back. */
@media(min-width:1220px) and (max-width:1365px){.top nav>a:not(.navgo):not(.acct):not(.yt),.top nav .nav-more>summary{padding-inline:7px}.top nav a.navgo{padding:0 11px}}
/* 4 November 2026: the War Room became the Strategy Room (render.py nav), 44px longer. Measured in headless Chrome on the built
   strategy/ page: the bar ran 18px past its end at 1220px (page scrolled sideways to 1238) and the strip under it cut Intel Room
   by 26px at 760px. Every link stays: from 1220 to 1259px the bar's links give up 2px more a side (7 to 5, 36px back), and from
   760 to 819px the strip's give up 3px a side (11 to 8, 30px back). */
@media(min-width:1220px) and (max-width:1259px){.top nav>a:not(.navgo):not(.acct):not(.yt),.top nav .nav-more>summary{padding-inline:5px}}
@media(min-width:760px) and (max-width:819px){.subnav .subnav-s>a{padding-inline:8px}}
/* THE PHONE MENU (31 October 2026, render.py more_s; Armin: "it's really hard to maneuver the menu at the very top"). Under
   760px the five links no longer slide in a window one link wide: the strip is the pill and one Menu button, and Menu
   opens every page at once, the five places as tiles first. From 760px they fit beside the pill and the button says More.
   phone-test.html ("THE MENU CAN BE USED") measures it at 320 and 360px. */
.nav-menu .nm-p,.nav-more-l .nav-main{display:none}
@media(max-width:759px){
  .subnav{padding:5px var(--gutter);gap:8px;align-items:center}
  .subnav-s{display:none}
  .subnav a.navgo{margin-inline-end:0;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .subnav .nav-menu{position:static;margin-left:auto;border-left:0}
  .subnav .nav-menu .nm-w{display:none}
  .subnav .nav-menu .nm-p{display:inline-flex;align-items:center;gap:8px}
  .subnav .nav-menu>summary{min-height:40px;padding:0 16px;border:1px solid #3a3936;border-radius:999px;color:var(--ink);font-weight:700}
  .subnav .nav-menu>summary::after{display:none}
  .subnav .nav-menu[open]>summary{background:var(--ink);border-color:var(--ink);color:#0A0A0A}
  .subnav .nav-menu .nav-more-l{left:8px;right:8px;width:auto;min-width:0;margin-top:2px;max-height:calc(100dvh - 140px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
  .nav-more-l .nav-main{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px 4px 6px}
  .nav-more .nav-more-l .nav-main a{min-height:52px;padding:0 14px;border:1px solid #3a3936;border-radius:var(--r);background:rgba(243,241,234,.04);font-size:1rem;font-weight:700;white-space:normal}
  .nav-more .nav-more-l .nav-main a:last-child:nth-child(odd){grid-column:1/-1}
  .nav-more .nav-more-l .nav-main a[aria-current="page"]{border-color:var(--field);background:rgba(244,196,48,.1);color:var(--ink)}
}
/* THE ELECTIONS PAGES ON A PHONE (31 October 2026, render.py elections_strip): the row of eight showed one whole at 360px.
   Under 760px it is one button naming the page you are on, and it opens the eight with their one-line descriptions. */
.epick-w{display:none}
@media(max-width:759px){
  .estrip .estrip-l{display:none}
  .epick-w{display:block;padding-top:6px;padding-bottom:6px}
  .estrip .epick{position:relative}
  .estrip .epick>summary{display:flex;width:100%;box-sizing:border-box;min-height:44px;padding:0 14px;border:1px solid #3a3936;border-radius:var(--r2);background:var(--raise);color:var(--ink)}
  .epick .ep-k{flex:none;font:700 .78rem/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--field)}
  .epick .ep-t{flex:1 1 auto;min-width:0;margin-left:10px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .epick .ep-l{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;display:grid;gap:2px;padding:6px;background:var(--raise);border-radius:var(--r2);box-shadow:0 18px 40px -12px rgba(0,0,0,.8);max-height:calc(100dvh - 200px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
  .epick .ep-l a{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:52px;padding:8px 12px;border-radius:var(--r);color:var(--ink);text-decoration:none}
  .epick .ep-l a:hover{background:rgba(243,241,234,.07)}
  .epick .ep-l a small{font:500 .82rem/1.3 var(--body);color:var(--dim)}
  .epick .ep-l a[aria-current="page"]{background:rgba(244,196,48,.1);box-shadow:inset 3px 0 0 var(--field)}
}
/* The bar on the smallest phones: look.css's mark size above outranked site.css's small-phone size, so at 320px the bar
   was 21px wider than the screen (measured 31 October 2026). */
@media(max-width:419px){.mark{font-size:1.15rem;gap:8px}.mark img{width:34px;height:34px}}
@media(max-width:359px){.top .wrap{gap:6px;padding:0 12px}.mark{font-size:1rem;gap:6px}.mark img{width:30px;height:30px}.top nav a.yt{min-width:40px;padding:0 4px}}
/* THE ELECTIONS PAGES (29 October 2026, Armin: "the names are not clear about what each thing does or where I am supposed to
   go ... able to go from one to the other one"). The menu's Elections items carry one plain line under their name (.nav-x),
   and the six pages share one row across their top (.estrip, render.py elections_strip), the page you are on lit. On a phone
   the row slides inside itself; it never makes the page wider. */
.nav-more .nav-more-l a.nav-x{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:9px 12px;white-space:normal}
.nav-more .nav-more-l a.nav-x small{font:500 .82rem/1.3 var(--body);color:var(--dim)}
.nav-more .nav-more-l a.nav-x[aria-current="page"] small{color:var(--ink)}
.nav-more-l:has(.nav-x){width:min(21rem,calc(100vw - 24px))}
.estrip{background:#0A0A0A;border-bottom:1px solid var(--line)}
.estrip-l{display:flex;gap:6px;padding-top:8px;padding-bottom:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.estrip-l::-webkit-scrollbar{display:none}
.estrip-l a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;font:600 .9rem/1 var(--body);color:var(--dim);text-decoration:none;white-space:nowrap}
.estrip-l a:hover{color:var(--ink);background:var(--raise)}
.estrip-l a[aria-current="page"]{background:var(--ink);color:#0A0A0A}
/* Centred by auto margins, never justify-content:center: on a scroller that centring pushes the first link past the left
   edge where no scroll can reach it ("ountry" on races/ at 1600px, 30 October 2026). Auto margins collapse to 0 instead. */
@media(min-width:900px){.estrip-l a:first-child{margin-left:auto}.estrip-l a:last-child{margin-right:auto}}
/* 30 October 2026 (Armin: "If somebody is looking for Israel and they look at this menu, they wouldn't know that Israel is right
   under there"). Every country is a pill under Every country (.nav-cty), and the US items sit under a heading that names the
   United States and its day (.nav-more-s). races/ lists every country as a card (.ecard), the US first. */
.nav-more .nav-more-l .nav-cty{display:flex;flex-wrap:wrap;gap:6px;margin:0 8px 8px;padding:0 4px}
.nav-more .nav-more-l .nav-cty a{display:inline-flex;min-height:40px;padding:0 13px;border:1px solid var(--line);border-radius:999px;font-size:.88rem;white-space:nowrap}
.nav-more-s{margin:10px 12px 4px;padding-top:10px;border-top:1px solid var(--line);font:700 .78rem/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--field)}
.kicker{margin:0 0 10px;font:700 .8rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--field)}
.ecard .ecard-t{display:block;margin-top:10px;font:500 .95rem/1.4 var(--body);color:var(--dim)}
/* The results map at the top of Who is running, from two weeks before the vote to six weeks after (render.py results_band). */
.eband{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 18px;margin:0 0 26px;padding:18px 20px;border-radius:var(--r2);background:var(--field);color:var(--on-field);text-decoration:none}
.eband-k{grid-column:1/-1;display:inline-flex;align-items:center;gap:8px;font:800 .8rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.eband-k i{width:10px;height:10px;border-radius:50%;background:#E23B2E;box-shadow:0 0 0 3px rgba(226,59,46,.25)}
.eband strong{font:900 clamp(1.9rem,7vw,2.6rem)/.92 var(--display);text-transform:uppercase}
.eband-t{grid-column:1;font:500 .98rem/1.4 var(--body)}
.eband-go{grid-column:2;grid-row:2/4;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--on-field);color:var(--field);font:700 .95rem/1 var(--body);white-space:nowrap}
.eband:hover .eband-go{background:#000}
@media(max-width:620px){.eband{grid-template-columns:1fr}.eband-go{grid-column:1;grid-row:auto;justify-self:start}}
.eband-line{margin:0 0 20px;color:var(--dim)}

/* ---------------------------------------------------------------- a tool's two doors beside the page's own buttons
   31 October 2026 (audit at 1440: "How it works" and "Stream view" were 40px and 13px words next to 44px buttons on Tools,
   Beat the Markets, You and Israel). Their look is build/tour.js's (one home, both sites); this only makes them the height
   and the size of words of the buttons they stand with. A page that sizes them itself (.rg-acts, .tk-jump) still does. */
.lpt-doors .lpt-how,.lpt-doors .lps-go{min-height:44px;padding:0 16px 0 13px;font-size:var(--t2,.9375rem);font-weight:700}
/* The share panel (build/share.js): what opens when a reader taps Share. ONE FILE FOR BOTH SITES. Each site's
   render.py adds it to the end of its own site.css, so it is written with the names both stylesheets share
   (--panel --sunk --raise --bg --ink --dim --line --field --on-field --ga --on-grade --r --r2 --body --s1..--s5)
   and with inline-start / inline-end only, so the Persian pages mirror by themselves.
   The panel itself is the sign-in panel's (.sheet .sheet-in .sheet-top .sheet-body): at the foot of a phone's
   screen, in the middle of a computer's. Everything here is what goes inside it.
   The apps are drawn in the site's own ink, not in each app's colours: six logos in six colours would be the
   loudest thing on a site that keeps its one colour for the thing to press. The colour arrives under the
   finger. */
.shr [hidden]{display:none!important}
.shr .sheet-body{gap:var(--s3);padding-block-end:var(--s4)}
.shr-lead{font-weight:600;line-height:1.45;text-wrap:pretty}
/* The card is not clipped (overflow:hidden would let the panel squeeze it shut on a short screen instead of
   scrolling), so the picture rounds its own top corners. */
.shr-card{margin:0;background:var(--sunk);border-radius:var(--r2)}
.shr-pic{display:block;inline-size:100%;block-size:auto;aspect-ratio:1200/630;object-fit:cover;background:var(--raise);border-radius:var(--r2) var(--r2) 0 0}
.shr-meta{display:grid;gap:2px;padding:var(--s3) var(--s4)}
.shr-t{font-weight:700;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.shr-h{color:var(--dim);font-size:.85rem;line-height:1.4;text-align:start;unicode-bidi:plaintext}
.shr-copy{display:flex;align-items:stretch;gap:var(--s2)}
.sheet .shr-url{flex:1 1 0;inline-size:auto;min-inline-size:0;color:var(--dim);font-size:.95rem;text-overflow:ellipsis;text-align:left}
.shr-go{flex:none;min-block-size:52px;gap:8px;padding-inline:var(--s4);white-space:nowrap}
.shr-go-i{display:grid;place-items:center;font-style:normal}
.shr-go.ok,.shr-go.ok:hover{background:var(--ga);color:var(--on-grade)}
.shr-say{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shr-say:not(:empty).shr-say-on{position:static;inline-size:auto;block-size:auto;clip:auto;white-space:normal;font-weight:600}
.shr-apps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(4rem,1fr));gap:var(--s2) var(--s1)}
.shr-app{display:flex;flex-direction:column;align-items:center;gap:6px;inline-size:100%;min-block-size:78px;padding:var(--s1) 2px;background:none;border:0;border-radius:var(--r);color:var(--ink);font:600 .8rem/1.25 var(--body);text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.shr-ic{display:grid;place-items:center;flex:none;inline-size:48px;block-size:48px;border-radius:50%;background:var(--raise);color:var(--ink);font-style:normal;transition:background-color .15s,color .15s,transform .15s cubic-bezier(.16,1,.3,1)}
.shr-app:hover .shr-ic,.shr-app:focus-visible .shr-ic{background:var(--field);color:var(--on-field)}
.shr-app:active .shr-ic{transform:scale(.93)}
.shr-app:focus-visible{outline-offset:-2px}
.shr-after{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);padding-block-start:var(--s4);border-block-start:1px solid var(--line);font-weight:600;line-height:1.45}
.shr-after-a{display:inline-flex;align-items:center;min-block-size:44px;color:var(--field);font-weight:700}
.shr-note{color:var(--dim);font-size:.85rem;line-height:1.5}
/* A phone's browser leaves about 650px of height once its own bars are drawn, and the whole panel has to be
   there without scrolling: the picture, the link and every app. So on a short screen the picture stands
   alone (it carries the name and the site already; the title comes back when there is no picture), and it is
   shown whole and a little smaller, never cropped. */
@media(max-height:719px){
  .shr-has-pic .shr-meta{display:none}
  .shr-has-pic{background:none}
  .shr-has-pic .shr-pic{inline-size:auto;max-inline-size:100%;block-size:clamp(120px,27vh,172px);margin-inline:auto;border-radius:var(--r2)}
}
@media(max-height:619px){.shr-has-pic .shr-pic{block-size:clamp(84px,17vh,120px)}}
/* Four to a row on any phone, so eight apps are two even rows and never five and an orphan on a wider phone. */
@media(max-width:639px){.shr-apps{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:640px){.shr .sheet-body{gap:var(--s4);padding-block-end:var(--s5)}}
@media(prefers-reduced-motion:reduce){.shr-ic{transition:none}}

/* THE PICTURE TO POST (build/shareimg.js, 30 October 2026). Its own sheet (.shot, the share panel's look), the row at
   the top of the share panel (.shr-shot) when the page has a picture, and the "Make a picture" button a tool puts
   beside its Share button (.shot-make). The picture keeps its place while it is being drawn: the box is the picture's
   own shape from the first frame, so nothing jumps when it arrives. */
.shot .sheet-body{gap:var(--s3)}
.shot-fig{position:relative;margin:0 auto;inline-size:auto;block-size:clamp(220px,44vh,560px);aspect-ratio:1080/1350;max-inline-size:100%;background:var(--sunk);border-radius:var(--r2);overflow:hidden}
.shot-fig.is-story{aspect-ratio:1080/1920}
.shot-img{display:block;inline-size:100%;block-size:100%;object-fit:contain}
.shot-fig.is-busy .shot-img,.shot-fig.is-bad .shot-img{visibility:hidden}
.shot-wait{display:none;position:absolute;inset:0;place-items:center;padding:var(--s3);color:var(--dim);font-weight:600;text-align:center}
.shot-fig.is-busy .shot-wait,.shot-fig.is-bad .shot-wait{display:grid}
.shot-sizes{display:flex;gap:var(--s2);justify-content:center}
.shot-size{min-block-size:44px;padding:0 var(--s4);background:none;border:1.5px solid var(--line);border-radius:999px;color:var(--ink);font:600 .95rem/1 var(--body);cursor:pointer}
.shot-size[aria-pressed="true"]{border-color:var(--field);color:var(--field)}
.shot-acts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.shot-acts .btn{flex:1 1 9rem;gap:8px;min-block-size:52px}
.shot-i{display:grid;place-items:center;font-style:normal}
.shot .shr-go{flex:none}
.shot-tip{color:var(--dim);font-size:.92rem;line-height:1.45}
.shot-say{font-weight:600;color:var(--field)}
.shot-say:empty{display:none}
.shr-shot{display:flex;align-items:center;gap:var(--s3);padding:var(--s2);background:var(--sunk);border-radius:var(--r2)}
.shr-shot-pic{flex:none;inline-size:84px;aspect-ratio:1080/1350;padding:0;background:var(--raise);border:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in}
.shr-shot-pic img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
.shr-shot-t{display:grid;gap:var(--s2);min-inline-size:0;justify-items:start}
.shr-shot-l{font-weight:700;line-height:1.35}
.shr-shot-save{min-block-size:48px}
/* on a phone the picture to post takes the place of the link's own picture, so the whole panel still fits */
@media(max-width:639px),(max-height:719px){
  .shr.shr-has-shot .shr-card .shr-pic{display:none}
  .shr.shr-has-shot .shr-card .shr-meta{display:grid}
  .shr.shr-has-shot .shr-card{background:var(--sunk)}
}
.shot-make{gap:8px}
.shot-make svg{flex:none}
/* The coalition calculator (build/coalition.py, build/coalition.js), added to the end of site.css by render.py.
   Each party's colour arrives as --pc on its row; the site's own yellow is kept for the majority line and the
   number once a government has a majority, so the one thing that matters is the one thing that lights up. */
.coal{margin:var(--s6) 0;padding:var(--s5) var(--s4);background:var(--panel);border:1px solid var(--line);border-radius:var(--r2)}
@media(min-width:720px){.coal{padding:var(--s6)}}
.coal-head{max-width:62ch}
.coal-kicker{display:flex;align-items:flex-start;gap:var(--s2);font-size:.85rem;font-weight:700;color:var(--dim);letter-spacing:.02em;line-height:1.4}
.coal-live{width:8px;height:8px;margin-top:.42em;border-radius:50%;background:var(--ga);flex:none;box-shadow:0 0 0 3px rgba(70,204,130,.18)}
.coal h2{margin-top:var(--s2);font-size:clamp(2rem,7vw,3rem)}
.coal-lede{margin-top:var(--s2);font-size:1.05rem;color:var(--dim)}
.coal-lede b{color:var(--ink)}
.coal-grid{display:grid;gap:var(--s5);margin-top:var(--s5)}
@media(min-width:960px){.coal-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s6);align-items:start}.coal-stage{position:sticky;top:84px}}
.coal-sub{font:700 .8rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0 0 var(--s2)}
.coal-sub-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}

/* the chamber */
.coal-chamber{position:relative}
.coal-hemi{width:100%;height:auto;display:block;overflow:visible}
.coal-hemi circle{transition:fill .35s ease,fill-opacity .35s ease,stroke-opacity .35s ease;stroke-width:0;fill-opacity:1}
.coal-hemi circle.d-g{fill-opacity:1}
.coal-hemi circle.d-o{fill-opacity:.22;stroke-width:1.6;stroke-opacity:1}
.coal-hemi circle.d-x{fill-opacity:.13}
.coal-mid{stroke:var(--field);stroke-width:1.5;stroke-dasharray:3 4;opacity:.8}
.coal.is-empty .coal-mid{opacity:.35}
.coal-count{position:absolute;left:0;right:0;bottom:0;text-align:center;line-height:1}
.coal-count>b{display:block;font:900 clamp(2.5rem,10vw,3.8rem)/.85 var(--display);color:var(--ink);transition:color .25s}
.coal-count>span{display:block;margin-top:4px;font-size:clamp(.75rem,2.6vw,.88rem);color:var(--dim);white-space:nowrap}
.coal-count>span b{color:var(--ink)}
.coal-count .coal-plus{display:block;color:var(--gc);font-weight:700}
.coal.is-maj .coal-count>b{color:var(--field)}
.coal.is-min .coal-count>b{color:var(--gc)}

/* the bar to the majority */
.coal-bar{position:relative;height:14px;margin-top:var(--s5);background:var(--sunk);border-radius:999px;border:1px solid var(--line)}
.coal-bar-in,.coal-bar-out{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:999px;transition:width .45s cubic-bezier(.16,1,.3,1),left .45s cubic-bezier(.16,1,.3,1),background-color .25s}
.coal-bar-in{background:var(--ink)}
.coal.is-maj .coal-bar{border-color:var(--field);box-shadow:0 0 16px color-mix(in srgb,var(--field) 35%,transparent)}
.coal-bar-out{background:repeating-linear-gradient(135deg,var(--gc) 0 4px,transparent 4px 8px)}
.coal-bar-line{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--field)}
.coal-bar-line span{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;font-size:.75rem;font-weight:700;color:var(--field)}
.coal-say{margin-top:var(--s6);font-size:1.02rem;min-height:3.2em}
.coal-say b{color:var(--ink)}
.coal.is-maj .coal-say b{color:var(--field)}
/* how free the government would be (coalition.js liberty()), and its leaders lit in Side by side */
.coal-lib{display:flex;align-items:flex-start;gap:var(--s3);margin-top:var(--s3);padding:var(--s3);border-radius:var(--r);background:var(--raise);border:1px solid var(--line);font-size:.95rem;line-height:1.45}
.coal-lib[hidden]{display:none}
.coal-lib .g{flex:none}
.coal-lib b{color:var(--ink)}
.coal-lib a{font-weight:700;white-space:nowrap}
.coal-who .coal-g{display:inline-block;width:auto;height:auto;min-width:2.1em;padding:1px 5px;margin-left:6px;border-width:1.5px;border-radius:4px;font-size:.78rem;line-height:1.25;text-align:center;vertical-align:1px}
.wmx-gov{margin-top:12px;padding:10px 12px;border-radius:var(--r);border:1px solid var(--field);font-size:.92rem}
.wmx-gov[hidden]{display:none}
.wmx-gov a{font-weight:700}
.wmx.has-gov .wmx-c{transition:opacity .2s}
.wmx.has-gov .wmx-c:not(.is-gov){opacity:.38}
.wmx.has-gov .wmx-c.is-gov{background:var(--raise);box-shadow:inset 0 0 0 1px var(--field)}
.coal-warn{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s2)}
.coal-warn:empty{display:none}
.coal-warn li{display:flex;gap:var(--s2);padding:var(--s3);border-radius:var(--r);background:rgba(255,154,61,.1);border:1px solid rgba(255,154,61,.45);font-size:.95rem}
.coal-warn li{font-size:.9rem;line-height:1.45}
.coal-warn a,.coal-next a,.coal-said-p a{font-weight:700;padding:11px 2px;margin:0 -2px}
.coal-tools{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}
.coal-tools .btn[hidden]{display:none}
.coal-share{background:var(--field);color:var(--on-field)}
.coal-pres{margin-top:var(--s5)}
.coal-pre-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.coal-pre{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--raise);color:var(--ink);font:600 .92rem/1 var(--body);cursor:pointer}
.coal-pre span{color:var(--dim);font-weight:700}
.coal-pre:hover{border-color:var(--dim)}
.coal-pre[aria-pressed="true"]{border-color:var(--field);background:rgba(244,196,48,.12)}
.coal-pre[aria-pressed="true"] span{color:var(--field)}
.coal:not(.is-live) .coal-pres,.coal:not(.is-live) .coal-tools,.coal:not(.is-live) .coal-ways,.coal:not(.is-live) .coal-out,.coal:not(.is-live) .coal-key{display:none}

/* the parties */
.coal-key{display:flex;gap:var(--s3);font-size:.75rem;letter-spacing:.02em;text-transform:none;font-weight:600}
.coal-key span{display:inline-flex;align-items:center;gap:6px}
.coal-key span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink)}
.coal-key .coal-key-out::before{background:transparent;border:1.5px solid var(--ink)}
.coal-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.coal-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-radius:var(--r2);background:var(--sunk);border:1px solid var(--line);transition:border-color .2s,background-color .2s}
.coal-row::before{content:none}
.coal-pick{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:60px;padding:8px 8px 8px 16px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:var(--r2)}
.coal-tick{width:22px;height:22px;flex:none;border-radius:6px;border:2px solid var(--dim);position:relative;transition:background-color .2s,border-color .2s}
.coal-face{width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 18%;background:var(--raise);border:2px solid var(--pc)}
span.coal-face{display:inline-flex;align-items:center;justify-content:center;font:800 1rem/1 var(--display);color:var(--dim)}
.coal-name{display:flex;flex-direction:column;min-width:0;gap:2px}
.coal-name b{font-weight:700;font-size:1rem;line-height:1.2}
.coal-bloc{font-size:.8rem;color:var(--dim)}
.coal-seats{margin-left:auto;font:800 1.7rem/1 var(--display);min-width:2ch;text-align:right}
.coal-out{min-height:40px;margin-right:10px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--dim);font:600 .8rem/1 var(--body);cursor:pointer}
.coal-out:hover{color:var(--ink);border-color:var(--dim)}
.coal-who{grid-column:1/-1;margin:-6px 0 0;padding:0 16px 10px 102px;font-size:.82rem;color:var(--dim)}
.coal:not(.is-live) .coal-who{padding-left:68px}
.coal-who a{color:var(--dim)}
.coal-who a:hover{color:var(--ink)}
.coal-row.is-in{border-color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,var(--sunk))}
.coal-row.is-in .coal-tick{background:var(--pc);border-color:var(--pc)}
.coal-row.is-in .coal-tick::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid var(--on-grade);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.coal-row.is-out{border-style:dashed;border-color:var(--pc)}
.coal-row.is-out .coal-tick{border-color:var(--pc);border-style:dashed}
.coal-out[aria-pressed="true"]{color:var(--on-grade);background:var(--gc);border-color:var(--gc)}
.coal:not(.is-live) .coal-tick{display:none}
/* On a phone the calculator runs edge to edge (Armin note vvyso03a, 30 Oct: party names had about 90px and broke
   over two and three lines), and each row's chrome before the name is trimmed. */
@media(max-width:719px){
  .coal{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding:var(--s5) var(--s3);border-radius:0;border-left:0;border-right:0}
  .coal-head{padding:0 var(--s1)}
  .coal-pick{gap:10px;padding-left:14px}
  .coal-face{width:38px;height:38px}
  .coal-who{padding-left:94px}
  .coal:not(.is-live) .coal-who{padding-left:62px}
  .coal-out{margin-right:8px;padding:0 10px}
}
@media(max-width:380px){.coal-pick{gap:var(--s2);padding-left:12px}.coal-face{width:34px;height:34px}.coal-who{padding-left:84px}.coal-out{margin-right:6px;padding:0 8px}}

/* every smallest team that makes a majority */
.coal-ways{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.coal-ways h3.coal-sub{font-family:var(--body)}
.coal-ways-l{max-width:66ch;font-size:.95rem}
.coal-ways-list{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s2)}
@media(min-width:720px){.coal-ways-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.coal-way{display:grid;gap:6px;width:100%;min-height:56px;padding:12px 14px;border-radius:var(--r2);border:1px solid var(--line);background:var(--sunk);color:inherit;font:inherit;text-align:left;cursor:pointer;height:100%;align-content:start}
.coal-way:hover{border-color:var(--field)}
.coal-way.is-best{border-color:var(--field);background:color-mix(in srgb,var(--field) 7%,var(--sunk))}
.coal-way.is-remote .coal-chips{opacity:.75}
.coal-way-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.coal-best{font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--bg);background:var(--field);padding:3px 8px;border-radius:999px}
.coal-like{display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid currentColor}
.coal-like.is-likely{color:var(--ga)}
.coal-like.is-possible{color:var(--gb)}
.coal-like.is-unlikely{color:var(--gd)}
.coal-like.is-remote{color:var(--gf)}
.coal-way-name{font-size:1.02rem;line-height:1.3;color:var(--dim)}
.coal-way-name b{font-family:var(--display);font-weight:800;font-size:1.12rem;color:var(--ink);letter-spacing:.01em}
.coal-way-pm{font-size:.82rem;color:var(--dim)}
.coal-way-body{display:flex;align-items:center;gap:var(--s3);margin-top:2px}
.coal-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;min-width:0}
.coal-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 8px;border-radius:999px;font-size:.82rem;font-weight:600;background:color-mix(in srgb,var(--pc) 22%,transparent);border:1px solid color-mix(in srgb,var(--pc) 70%,transparent)}
.coal-chip.is-have{background:transparent;border-style:dashed;color:var(--dim)}
.coal-chip.is-outside{background:transparent;border-style:dotted}
.coal-chip-o{font-size:.76rem;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.coal-chip .num{font-weight:800}
.coal-way-n{font:900 1.6rem/1 var(--display);color:var(--field);margin-left:auto;flex:none}
.coal-way-why{font-size:.84rem;line-height:1.4;color:var(--ink);opacity:.85}
.coal-now{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
.coal-now-t{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--ink)}
.coal-now-q{font-family:var(--body);font-weight:500;font-size:.95rem;color:var(--dim)}
.coal-say .coal-now{display:flex}
.coal-ways-list .btn{width:100%}
.coal-more-li{grid-column:1/-1}
.coal-src{margin-top:var(--s5);font-size:.85rem;max-width:80ch}
.coal-src a{color:var(--dim)}
.coal-teaser{display:block;margin-top:var(--s3);font-weight:700;color:var(--field)}
.coal-teaser::after{content:" \2192"}
@media(prefers-reduced-motion:reduce){.coal *{transition:none!important}}

/* who will govern with whom, and what happens next */
.coal-warn li.is-soft{background:rgba(232,220,130,.08);border-color:rgba(232,220,130,.4)}
.coal-said{margin-top:var(--s6);border-top:1px solid var(--line);padding-top:var(--s4)}
.coal-said summary{cursor:pointer;display:flex;flex-direction:column;gap:4px;min-height:44px;justify-content:center;list-style:none}
.coal-said summary::-webkit-details-marker{display:none}
.coal-said summary .coal-sub{margin:0;display:flex;align-items:center;gap:8px}
.coal-said summary .coal-sub::after{content:"+";font-size:1.1rem;color:var(--field)}
.coal-said[open] summary .coal-sub::after{content:"\2212"}
.coal-said summary .dim{font-size:.92rem}
.coal-said-l{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s4)}
@media(min-width:720px){.coal-said-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
.coal-said-p{padding-left:14px;border-left:2px solid var(--pc)}
.coal-said-p ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;font-size:.92rem}
.coal-said-p a{font-weight:700}
.coal-said-k{display:inline-block;padding:2px 8px;margin-right:4px;border-radius:999px;font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--raise);color:var(--dim)}
.coal-k-wont-sit-with,.coal-k-only-with{background:rgba(255,154,61,.16);color:var(--gd)}
.coal-said-k.is-soft{background:rgba(232,220,130,.14);color:var(--gc)}
.coal-k-open-to,.coal-k-outside-support{background:rgba(70,204,130,.14);color:var(--ga)}
.coal-next{margin-top:var(--s5)}
.coal-next ol{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s2)}
.coal-next li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--s3);font-size:.95rem}
.coal-next li b{color:var(--field)}
.coal-next a{color:var(--dim);font-weight:700}
@media(max-width:420px){.coal-next li{grid-template-columns:1fr;gap:0}}
/* The seat count docked to the bottom of a phone screen while the chamber is scrolled away (coalition.js; Armin
   notes qkdl1tzs and vvyso03a, 30 Oct). Docked to the edge like an app's own bar, lit along its top in the site's
   yellow, so it reads as the page's scoreboard and not as one more card. The next-show bubble steps aside while it
   is up; the site's other floating buttons ride above it. */
.coal-stage{scroll-margin-top:136px}
.coal-mini{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;gap:10px;width:100%;margin:0;padding:12px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,color-mix(in srgb,var(--field) 9%,var(--raise)),var(--raise) 70%);color:var(--ink);border:2px solid var(--field);border-bottom:0;outline:1px solid color-mix(in srgb,var(--field) 45%,transparent);outline-offset:2px;border-radius:18px 18px 0 0;box-shadow:0 -14px 34px rgba(0,0,0,.6);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.coal-mini[hidden]{display:none}
.coal-mini-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-width:0}
.coal-mini-n{display:flex;flex-direction:column;align-items:center;min-width:3.2rem;line-height:1}
.coal-mini b{display:block;font:900 2.1rem/.9 var(--display);color:var(--ink);transition:color .25s;white-space:nowrap}
.coal-mini b small{font-size:.55em;color:var(--gc);margin-left:2px;vertical-align:.55em}
.coal-mini.is-maj b{color:var(--field)}
.coal-mini.is-min b{color:var(--gc)}
.coal-mini-of{margin-top:4px;color:var(--dim);font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.coal-mini-say{display:grid;gap:3px;min-width:0}
.coal-mini-h,.coal-mini-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coal-mini-h{font:800 1.08rem/1.15 var(--display);letter-spacing:.01em;color:var(--ink)}
.coal-mini.is-empty .coal-mini-h{color:var(--field)}
.coal-mini.is-maj .coal-mini-h{color:var(--field)}
.coal-mini-s{font-size:.82rem;line-height:1.3;color:var(--dim)}
.coal-mini-s .coal-like{font-style:normal;padding:1px 7px;font-size:.75rem;margin-right:2px}
.coal-mini-up{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:66px;min-height:46px;border-radius:12px;background:var(--sunk);border:1px solid var(--line);color:var(--dim);font-size:.75rem;font-weight:700}
.coal-mini:hover .coal-mini-up,.coal-mini:focus-visible .coal-mini-up{color:var(--ink);border-color:var(--dim)}
.coal-mini-bar{position:relative;display:block;height:14px}
.coal-mini-segs{display:flex;height:100%;overflow:hidden;border-radius:999px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line)}
.coal-mini-segs i{display:block;height:100%;flex:none;background:var(--pc);box-shadow:inset -2px 0 0 var(--raise);transition:width .3s ease}
.coal-mini-segs i:last-child{box-shadow:none}
.coal-mini-segs i.is-o{background:repeating-linear-gradient(135deg,var(--pc) 0 3px,transparent 3px 6px)}
/* the seats still missing to the majority, so "short" is something you can see */
.coal-mini-gap{position:absolute;top:0;bottom:0;border-radius:999px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--field) 30%,transparent) 0 2px,transparent 2px 5px)}
.coal-mini-line{position:absolute;top:-5px;bottom:-5px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--field);box-shadow:0 0 0 2px var(--raise)}
.coal-mini.is-maj .coal-mini-segs{box-shadow:inset 0 0 0 1px var(--field),0 0 14px color-mix(in srgb,var(--field) 35%,transparent)}
/* every tap: the top edge flares and the number pops, so the eye goes to it */
@keyframes coal-flash{from{box-shadow:0 -4px 26px color-mix(in srgb,var(--field) 55%,transparent),0 -14px 34px rgba(0,0,0,.6)}to{box-shadow:0 0 0 transparent,0 -14px 34px rgba(0,0,0,.6)}}
@keyframes coal-pop{0%{transform:scale(1.28)}100%{transform:scale(1)}}
.coal-mini.is-flash{animation:coal-flash .8s ease-out}
.coal-mini.is-flash b{animation:coal-pop .45s cubic-bezier(.16,1,.3,1)}
/* while the bar is up, the next-show bubble steps aside and the other floating buttons ride above it */
html.coal-docked .calls{visibility:hidden}
html.coal-docked .fab,html.coal-docked .hi{bottom:calc(var(--coal-dock,96px) + 10px)}
@media(prefers-reduced-motion:reduce){.coal-mini.is-flash,.coal-mini.is-flash b{animation:none}}
@media(min-width:960px){.coal-mini{display:none!important}}

/* THE LOOK OF 1 NOVEMBER 2026 (Armin: "They don't visually look good at all ... beautiful to look at, easy to understand").
   The thick coloured stripe down each party's left edge (the most recognisable tell of a generated page, DESIGN.md) is gone:
   a party's colour now lives in its face ring, its tick, the tint of a picked row and a thin bar along the row's foot that
   is its size against the biggest party (--sh, coalition.py). The prime minister the build implies is a card set against the
   markets (coalition.js pmOdds). Every size stays at or over the phone test's floors. */
.coal-row{border-radius:14px;border-color:#2c2b27;background:var(--panel);overflow:hidden}
.coal-row::after{content:"";position:absolute;left:16px;bottom:0;height:3px;width:calc((100% - 32px) * var(--sh, 0) / 100);border-radius:3px 3px 0 0;background:var(--pc);opacity:.55;pointer-events:none}
.coal-row.is-in{background:color-mix(in srgb,var(--pc) 16%,var(--panel))}
.coal-row.is-in::after{opacity:1}
.coal-pick{padding-left:14px}
.coal-face{box-shadow:0 0 0 2px var(--panel)}
.coal-seats{font-size:1.9rem}
.coal-pre{border-radius:12px;background:var(--panel);border-color:#2f2e2a}
.coal-way{border-radius:14px;background:var(--panel);border-color:#2c2b27}
.coal-way.is-best{background:color-mix(in srgb,var(--field) 8%,var(--panel))}
/* the prime minister of the build, against the markets */
.coal-say .coal-pm{display:grid;gap:8px;margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);font-size:.9375rem}
.coal-pm-h{font-size:.9375rem;font-weight:800;color:var(--ink)}
.coal-pm-r{display:grid;grid-template-columns:minmax(6.5em,auto) minmax(0,1fr) 3.2em;align-items:center;gap:10px}
.coal-pm-n{font-weight:800;color:var(--ink);white-space:nowrap}
.coal-pm-n small{display:block;font-size:.75rem;font-weight:700;color:var(--dim)}
.coal-pm-b{height:10px;border-radius:999px;background:var(--sunk);overflow:hidden}
.coal-pm-b i{display:block;height:100%;border-radius:999px;background:#6f6c63}
.coal-pm-r.is-mine .coal-pm-b i{background:var(--field)}
.coal-pm-r b{font:900 1.35rem/1 var(--display);text-align:right;color:var(--ink)}
.coal-pm-s{font-size:.875rem;color:var(--dim)}
.coal-pm-s a{display:inline-flex;align-items:center;min-height:40px;margin-left:4px;font-weight:700;color:var(--ink)}
.coal-pm-s a span{color:var(--field)}
html.lp-stream .coal-say .coal-pm{display:none}

/* THE STREAM VIEW (build/stream.js, build/stream.css; Armin, 31 October 2026: "when I'm showing these tools on a live stream,
   it makes perfect sense, and people can see what's going on, even if it's on a small screen"). The calculator on one
   1280 x 720 canvas, zoomed to the screen: the chamber and what it says on the left, the plans, the betting markets and the
   ways to a majority beside it, and every party on the right, one line each (face, name, seats, leader with the PM odds,
   Outside). What each leader said and what happens next stay on the page (reading, not the calculator), and so does the
   markets' prime minister list, whose numbers each party's line already carries. Only the layout changes (.coal-grid and
   .coal-stage lend their parts to one grid); every control works as on the page. */
html.lp-stream #coalition{zoom:var(--lps-z);width:var(--lps-w);height:var(--lps-h);padding:12px 18px 14px;display:grid;
  grid-template-columns:330px 270px minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto minmax(0,1fr);
  grid-template-areas:"head head head" "ch pres side" "bar pres side" "say mk side" "lib mk side" "warn ways side" "tools ways side";gap:0 16px}
html.lp-stream #coalition>.coal-said,html.lp-stream #coalition>.coal-next,html.lp-stream #coalition>.coal-src,html.lp-stream .coal-mini{display:none!important}
html.lp-stream .coal-grid,html.lp-stream .coal-stage{display:contents}
html.lp-stream .coal-head{grid-area:head;max-width:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 18px;padding:0 250px 10px 0}
/* Spain's caption (the poll, its fieldwork and its day) is twice Israel's: wrapped under the title it made the head 135px
   and cut the foot of the party list (1 November 2026). On a stream it sits beside the title, in two lines at most (the whole of it is on the page itself). */
html.lp-stream .coal-head{flex-wrap:nowrap}
html.lp-stream .coal-head .coal-kicker{flex:1 1 0;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}
html.lp-stream .coal-head .coal-live{display:inline-block;vertical-align:.1em;margin:0 8px 0 0}
html.lp-stream .coal h2{order:-1;margin:0;font-size:2.1rem}
html.lp-stream .coal-lede{display:none}
html.lp-stream .coal-chamber{grid-area:ch}
html.lp-stream .coal-bar{grid-area:bar;margin-top:8px}
html.lp-stream .coal-say{grid-area:say;margin-top:24px;font-size:.95rem}
/* A long verdict (Spain's "PP alone, Vox outside": a minority government, why it survives, who leads it) ran the left column
   80px past a 1280 x 720 stream. It keeps its size and scrolls in its own box, as the list of governments beside it does. */
html.lp-stream .coal-say{max-height:9.5em;overflow:auto;overscroll-behavior:contain}
html.lp-stream .coal-lib{grid-area:lib}
html.lp-stream .coal-warn{grid-area:warn}
html.lp-stream .coal-tools{grid-area:tools;margin-top:8px;align-self:start;display:flex;flex-wrap:wrap;gap:6px}
html.lp-stream .coal-tools .btn{min-height:40px;padding:0 14px;font-size:.8rem}
html.lp-stream .coal-pres{grid-area:pres;margin:0;align-self:start}
html.lp-stream .coal-pre-row{gap:6px}
html.lp-stream .coal-pre{min-height:40px;padding:0 12px;font-size:.82rem}
html.lp-stream #coalition .mk{grid-area:mk;margin:10px 0 0;align-self:start}
html.lp-stream .coal-ways{grid-area:ways;margin:10px 0 0;padding:10px 0 0;min-height:0;overflow:auto;overscroll-behavior:contain}
html.lp-stream .coal-ways-list{grid-template-columns:minmax(0,1fr)}
html.lp-stream #coalition .mk-q2,html.lp-stream #coalition .mk-rank,html.lp-stream #coalition .mk-src{display:none}
html.lp-stream .coal-lib{margin-top:8px}
html.lp-stream .coal-ways-l{display:none}
html.lp-stream .coal-side{grid-area:side;min-height:0;overflow:hidden}
html.lp-stream .coal-list{gap:3px}
html.lp-stream .coal-row{grid-template-columns:minmax(0,1fr) 210px auto;align-items:center}
html.lp-stream .coal-tick{display:none}
html.lp-stream .coal-pick{grid-column:1;grid-row:1;min-height:40px;gap:8px;padding:2px 6px 2px 12px}
html.lp-stream .coal-face{width:32px;height:32px}
html.lp-stream .coal-name{gap:0}
html.lp-stream .coal-name b{font-size:.9rem;line-height:1.15}
html.lp-stream .coal-bloc{font-size:.75rem;line-height:1.2}
html.lp-stream .coal-seats{font-size:1.6rem}
html.lp-stream .coal-who{grid-column:2;grid-row:1;margin:0;padding:0 4px;font-size:0;line-height:1.2}
html.lp-stream .coal-who>*{font-size:.75rem}
html.lp-stream .coal-who .coal-g{margin-left:4px}
html.lp-stream .coal-out{grid-column:3;grid-row:1;margin:0 8px 0 0;padding:0 10px}
/* Call the Midterms (build/midterms.py, build/midterms.js), added to the end of site.css by render.py.
   Blue is the Democrats (--dem), red the Republicans (--rep), --ind the independents, the site's own yellow is kept
   for what the reader did: the mood marker, a race they called, the button that runs the night. */
.mt{margin:var(--s5) 0 var(--s6);padding:var(--s5) var(--s4);background:var(--panel);border:1px solid var(--line);border-radius:var(--r2)}
@media(min-width:720px){.mt{padding:var(--s6)}}
.mt-head{max-width:62ch}
.mt-kicker{font-size:.85rem;font-weight:700;color:var(--dim);letter-spacing:.02em}
.mt-live{display:inline-block;vertical-align:middle;margin:-2px 8px 0 0;width:8px;height:8px;border-radius:50%;background:var(--field);flex:none;box-shadow:0 0 0 3px rgba(244,196,48,.18)}
.mt h2{margin-top:var(--s2);font-size:clamp(2rem,7vw,3rem)}
.mt-lede{margin-top:var(--s2);font-size:1.05rem;color:var(--dim)}
/* the three steps: the number in the site's yellow and what you do, in words (Armin, 30 October 2026: "What are we doing here?") */
.mt-step{display:flex;align-items:center;gap:10px;font:700 1.02rem/1.3 var(--body);color:var(--ink)}
.mt-n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--field);color:var(--on-field);font:900 1rem/1 var(--display)}

/* the two chambers, side by side on every screen: one drag, both change */
.mt-boards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);margin-top:var(--s3)}
@media(min-width:720px){.mt-boards{gap:var(--s5)}}
.mt-board{padding:var(--s3);background:var(--sunk);border:1px solid var(--line);border-top:3px solid var(--line);border-radius:var(--r2);transition:border-color .3s;min-width:0}
@media(min-width:720px){.mt-board{padding:var(--s4) var(--s5) var(--s5)}}
.mt-board.is-D{border-top-color:var(--dem)}
.mt-board.is-R{border-top-color:var(--rep)}
.mt-board.is-I{border-top-color:var(--ind)}
.mt-bname{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px}
.mt-bname b{font:900 clamp(1.3rem,5vw,1.9rem)/1 var(--display);letter-spacing:.01em}
.mt-need{font-size:.75rem;color:var(--dim);font-weight:600}
.mt-chamber{margin-top:var(--s2)}
.mt-hemi{width:100%;height:auto;display:block;overflow:visible}
.mt-hemi circle{transition:fill .3s ease,fill-opacity .3s ease;fill:var(--line);stroke:none}
.mt-hemi circle.p-D{fill:var(--dem)}
.mt-hemi circle.p-R{fill:var(--rep)}
.mt-hemi circle.p-I{fill:var(--ind)}
.mt-hemi circle.p-U{fill:#2E2D2A}
.mt-hemi circle.is-fixed{fill-opacity:.4}
.mt-hemi circle.is-pin{stroke:var(--field);stroke-width:1.6}
.mt-dots[data-ch="H"] circle.is-pin{stroke-width:1}
.mt-hemi circle.is-real{stroke:var(--ink);stroke-width:1.2}
.mt-mid{stroke:var(--field);stroke-width:1.5;stroke-dasharray:3 4;opacity:.75}
.mt-count{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:6px;line-height:1}
.mt-count b,.mt-count span{font:900 clamp(1.7rem,7.5vw,2.8rem)/.9 var(--display)}
.mt-n-D{color:var(--dem)}
.mt-n-R{color:var(--rep)}
.mt-n-I{color:var(--ind);font-size:clamp(1.1rem,4.5vw,1.6rem)!important}
.mt-verdict{margin-top:var(--s2);font-size:.92rem;line-height:1.3;color:var(--dim)}
.mt-v-w{font:800 1.05rem/1.2 var(--display);letter-spacing:.01em;color:var(--ink)}
.mt-board.is-D .mt-v-w{color:var(--dem)}
.mt-board.is-R .mt-v-w{color:var(--rep)}
.mt-gain{margin-top:4px;font-size:.78rem;line-height:1.35}
.mt-odds{margin-top:var(--s3);display:grid;gap:5px;font-size:.78rem;line-height:1.35;color:var(--dim)}
.mt-odds b{font-weight:800}
.mt-odds b.is-D{color:var(--dem)}
.mt-odds b.is-R{color:var(--rep)}
.mt-odds-bar{display:block;height:6px;border-radius:999px;background:var(--rep);overflow:hidden}
.mt-odds-d{display:block;height:100%;background:var(--dem);transition:width .4s cubic-bezier(.16,1,.3,1)}
@media(min-width:720px){.mt-verdict{font-size:1rem}.mt-v-w{font-size:1.3rem}.mt-gain,.mt-odds{font-size:.85rem}}

/* the mood of the country */
.mt-mood{margin-top:var(--s4);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r2);background:var(--bg);scroll-margin-top:140px}
@media(min-width:720px){.mt-mood{padding:var(--s5)}}
.mt-mood-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.mt-mood-v{font:900 clamp(1.6rem,6.5vw,2.4rem)/1 var(--display);color:var(--ink)}
.mt-mood-v.is-D{color:var(--dem)}
.mt-mood-v.is-R{color:var(--rep)}
.mt-track{position:relative;margin-top:var(--s2);padding:34px 0 30px}
.mt-track.is-stack{padding-top:60px}
.mt-track input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.mt-track input:focus{outline:none}
.mt-track input::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--dem),#3B4A6E 46%,#4A3E3C 54%,var(--rep))}
.mt-track input::-moz-range-track{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--dem),#3B4A6E 46%,#4A3E3C 54%,var(--rep))}
.mt-track input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-9px;border-radius:50%;background:var(--ink);border:3px solid var(--bg);box-shadow:0 0 0 2px var(--ink),0 2px 10px rgba(0,0,0,.5)}
.mt-track input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ink);border:3px solid var(--bg);box-shadow:0 0 0 2px var(--ink)}
.mt-track input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--ink),0 0 0 6px rgba(244,196,48,.55)}
.mt-track input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--ink),0 0 0 6px rgba(244,196,48,.55)}
.mt-track input:disabled{cursor:default;opacity:.6}
.mt-pin{position:absolute;transform:translateX(-50%);pointer-events:none;white-space:nowrap}
.mt-pin[hidden]{display:none}
/* polls today: the yellow mark under the bar, with its name */
.mt-pin-today{bottom:2px;font:700 .75rem/1 var(--body);color:var(--field)}
.mt-pin-today::before{content:"";display:block;width:0;height:0;margin:0 auto 3px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid var(--field)}
/* where each chamber changes hands: a tag with the chamber's name and a stem down to the bar */
.mt-pin-S,.mt-pin-H,.mt-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;font:800 .75rem/1 var(--body);letter-spacing:.02em;color:var(--on-field);background:var(--ink)}
.mt-pin-H,.mt-tag-H{background:var(--seal)}
.mt-pin-S,.mt-pin-H{top:6px}
.mt-pin-S::after,.mt-pin-H::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:23px;margin-left:-1px;background:inherit}
.mt-track.is-stack .mt-pin-S{top:32px}
.mt-track.is-stack .mt-pin-S::after{height:23px}
.mt-track.is-stack .mt-pin-H::after{height:49px}
.mt-ends{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:.78rem;font-weight:700}
.mt-ends span:first-child{color:var(--dem)}
.mt-ends span:last-child{color:var(--rep)}
.mt-flips{display:grid;gap:6px;margin-top:var(--s3);font-size:.9rem;line-height:1.4;color:var(--dim)}
.mt-flips:empty{display:none}
.mt-flip b.num{color:var(--ink)}
.mt-tag{margin-right:4px;vertical-align:1px}
.mt-pre-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3)}
.mt-pre{display:inline-flex;align-items:center;gap:5px;min-height:40px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--raise);color:var(--ink);font:600 .84rem/1 var(--body);cursor:pointer}
.mt-pre span{color:var(--dim);font-weight:700}
.mt-pre:hover{border-color:var(--dim)}
.mt-pre[aria-pressed="true"]{border-color:var(--field);background:var(--field);color:var(--on-field)}
.mt-pre[aria-pressed="true"] span{color:var(--on-field)}
.mt-pre:disabled{opacity:.5;cursor:default}
.mt-year{min-height:40px;max-width:100%;padding:0 30px 0 10px;border-radius:999px;border:1px solid var(--line);background:var(--raise);color:var(--ink);font:600 .84rem/1 var(--body)}
.mt-year.is-on{border-color:var(--field);background:var(--field);color:var(--on-field)}
.mt-year option{background:var(--raise);color:var(--ink)}
.mt-year:disabled{opacity:.5}
/* the live count under the slider: a drag shows its result on the same screen, whatever the phone */
.mt-result{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:var(--s3);padding:8px 12px;border-radius:var(--r);background:var(--sunk);font-size:.9rem}
.mt-result i{font:900 1.25rem/1 var(--display);font-style:normal}

/* the buttons */
.mt-tools{margin-top:var(--s5)}
.mt-tools-b{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s3)}
.mt-tools .btn[hidden]{display:none}
.mt-run{background:var(--field);color:var(--on-field)}
.mt-run:disabled{opacity:.5;cursor:default}
.mt-run span{font-size:.8em}

/* election night */
.mt-night{margin-top:var(--s4);padding:var(--s4);border-radius:var(--r2);background:#0B0B0A;border:1px solid var(--line)}
.mt-night[hidden]{display:none}
.mt-night-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4)}
.mt-clock{display:flex;flex-direction:column;gap:2px}
.mt-clock b{font:900 clamp(1.8rem,7vw,2.6rem)/1 var(--display);color:var(--ink)}
.mt-clock span{font-size:.78rem;color:var(--dim)}
.mt-called{font-size:.85rem;color:var(--dim);font-weight:600;flex:1 1 auto}
.mt-skip[hidden]{display:none}
.mt-flash{margin-top:var(--s3);padding:12px 14px;border-radius:var(--r);font:800 clamp(1.05rem,4.4vw,1.35rem)/1.25 var(--display);letter-spacing:.01em;background:var(--raise)}
.mt-flash[hidden]{display:none}
.mt-flash.is-D{background:color-mix(in srgb,var(--dem) 22%,var(--sunk));color:#CFDDFB}
.mt-flash.is-R{background:color-mix(in srgb,var(--rep) 22%,var(--sunk));color:#F9D2CE}
.mt-flash.is-end{background:color-mix(in srgb,var(--field) 12%,var(--sunk));color:var(--ink);border:1px solid rgba(244,196,48,.45)}
.mt-flash-k{display:block;margin-bottom:4px;font:700 .75rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--field)}
.mt-feed{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:6px}
.mt-feed li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline;padding:6px 10px;border-left:2px solid var(--line);background:var(--sunk);border-radius:var(--r);font-size:.88rem;animation:mt-in .35s ease}
.mt-feed li.is-D{border-left-color:var(--dem)}
.mt-feed li.is-R{border-left-color:var(--rep)}
.mt-feed li.is-I{border-left-color:var(--ind)}
.mt-feed-t{color:var(--dim);font-size:.78rem;white-space:nowrap}
.mt-feed em{font-style:normal;font-weight:800;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;margin-left:4px;border-radius:999px;background:var(--raise);color:var(--field);white-space:nowrap}
@keyframes mt-in{from{background:var(--raise)}to{background:var(--sunk)}}
.mt-night-end{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}
.mt-night-end[hidden]{display:none}

/* the races */
.mt-races{position:relative;margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.mt-score{position:sticky;z-index:5;display:flex;align-items:center;gap:var(--s3);height:44px;margin:0 calc(-1 * var(--s4)) -44px;padding:0 var(--s4);background:rgba(10,10,10,.95);border-bottom:1px solid var(--line);font-size:.85rem;color:var(--ink);text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(6px)}
.mt-score.is-on{opacity:1;pointer-events:auto}
.mt-score-c{white-space:nowrap}
.mt-score-c b{font-weight:700;color:var(--dim)}
.mt-score i{font:900 1.15rem/1 var(--display);font-style:normal}
.mt .mt-s-D,.mt .mt-h-D{color:var(--dem)}
.mt .mt-s-R,.mt .mt-h-R{color:var(--rep)}
.mt-score-m{margin-left:auto;font-weight:800;color:var(--field)}
@media(min-width:720px){.mt-score{margin:0 calc(-1 * var(--s6)) -44px;padding:0 var(--s6)}}
.mt-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.mt-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--dim);font:700 1rem/1 var(--body);cursor:pointer}
.mt-tab span{font-size:.85rem;opacity:.85}
.mt-tab[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mt-where{min-height:44px;max-width:100%;padding:0 34px 0 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--raise);color:var(--ink);font:600 .92rem/1 var(--body)}
@media(min-width:560px){.mt-where{margin-left:auto}}
.mt-races .mt-how{margin-bottom:var(--s3)}
.mt-list{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s3)}
@media(min-width:720px){.mt.is-live .mt-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.mt.is-live .mt-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mt:not(.is-live) .mt-list li{font-size:.95rem}
.mt-race{display:grid;gap:8px;padding:12px;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r2);min-width:0}
.mt-race.is-pin{border-color:rgba(244,196,48,.6)}
.mt-race.is-real{border-color:var(--ink)}
.mt-rhead{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.85rem}
.mt-rname{display:inline-flex;align-items:center;min-height:40px;font-weight:800;font-size:1rem;color:var(--ink);text-decoration:none}
.mt-rname:hover{text-decoration:underline}
.mt-rate{padding:2px 8px;border-radius:999px;background:var(--raise);color:var(--dim);font-size:.75rem;font-weight:700;white-space:nowrap}
.mt-state{margin-left:auto;color:var(--dim);font-size:.8rem}
.mt-race.is-pin .mt-state{color:var(--field);font-weight:700}
.mt-pair{display:grid;gap:6px}
.mt-pick{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:6px 10px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background-color .2s,border-color .2s,opacity .2s}
.mt-pick:hover:not(:disabled){border-color:var(--dim)}
.mt-pick:disabled{cursor:default}
.mt-pick.is-win.is-D{background:color-mix(in srgb,var(--dem) 20%,var(--panel));border-color:var(--dem)}
.mt-pick.is-win.is-R{background:color-mix(in srgb,var(--rep) 20%,var(--panel));border-color:var(--rep)}
.mt-pick.is-win.is-I{background:color-mix(in srgb,var(--ind) 18%,var(--panel));border-color:var(--ind)}
.mt-pick.is-lose{opacity:.55}
.mt-pick[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--field)}
.mt-face{width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 18%;background:var(--raise);border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font:800 .9rem/1 var(--display);color:var(--dim)}
.mt-pick.is-D .mt-face{border-color:var(--dem)}
.mt-pick.is-R .mt-face{border-color:var(--rep)}
.mt-pick.is-I .mt-face{border-color:var(--ind)}
.mt-who{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.mt-who b{font-weight:700;font-size:.95rem;line-height:1.2;overflow-wrap:anywhere}
.mt-who small{font-size:.75rem;color:var(--dim)}
.mt-pick .g{width:30px;height:30px;font-size:1.05rem;flex:none}
.mt-win{flex:none;font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.mt-win:empty{display:none}
.mt-pick[aria-pressed="true"] .mt-win{color:var(--field)}
.mt-meter{position:relative;height:4px;border-radius:999px;background:var(--raise)}
.mt-meter::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--dim)}
.mt-meter-in{position:absolute;top:0;bottom:0;border-radius:999px;transition:width .25s,left .25s}
.mt-meter-in.is-D{background:var(--dem)}
.mt-meter-in.is-R{background:var(--rep)}
.mt-meter-in.is-I{background:var(--ind)}
.mt-empty{padding:var(--s4)}
.mt-more-p{margin-top:var(--s3)}
.mt-more[hidden]{display:none}
.mt-mine{margin-top:var(--s3);font-size:.9rem}
.mt-mine[hidden]{display:none}
.mt-clear{min-height:40px;padding:0 4px;background:none;border:0;color:var(--field);font:700 .9rem/1 var(--body);text-decoration:underline;cursor:pointer}
.mt-src{margin-top:var(--s5);font-size:.82rem;line-height:1.55;max-width:90ch}
.mt-src summary{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--dim);cursor:pointer}
.mt-src p{margin-top:var(--s2)}
.mt-src a{color:var(--dim);font-weight:700;padding:13px 1px;margin:0 -1px}
.mt:not(.is-live) .mt-mood,.mt:not(.is-live) .mt-tools,.mt:not(.is-live) .mt-tabs,.mt:not(.is-live) .mt-how,.mt:not(.is-live) .mt-lede,.mt:not(.is-live) .mt-score,.mt:not(.is-live) .mt-odds{display:none}
@media(max-width:380px){.mt{padding:var(--s4) var(--s3)}.mt-board{padding:10px}.mt-pre{padding:0 10px;font-size:.84rem}.mt-score{margin:0 calc(-1 * var(--s3)) -44px;padding:0 var(--s3);gap:8px;font-size:.78rem}}
@media(prefers-reduced-motion:reduce){.mt *{transition:none!important;animation:none!important}}
.mt-sec{padding:var(--s3) 0 0}

/* The betting markets (build/markets.py, assets/markets.json; Armin, 30 October 2026: "people could compare what they have
   to the betting markets ... in a way that doesn't make it too crowded"). Under each chamber, two thin bars: the chance of
   the reader's own map and the markets' chance. On a race card, one chip beside the experts' rating; a call that goes
   against the markets lights it in the site's yellow. Nothing is added to a race the markets do not price. */
.mt-odds{gap:6px}
.mt-vs-h{font-size:.75rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.mt-vs{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 8px}
.mt-vs-k{font-size:.75rem;font-weight:700;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-vs b{font-weight:800;white-space:nowrap}
.mt-vs .mt-odds-bar{grid-column:1/-1;grid-row:2;height:5px}
.mt-vs.is-mk .mt-vs-k::before{content:"";display:inline-block;width:6px;height:6px;margin:0 6px 1px 0;border-radius:50%;background:var(--field);vertical-align:middle}
.mt-vs.is-mk .mt-odds-bar{opacity:.85;background-image:repeating-linear-gradient(135deg,transparent 0 3px,rgba(0,0,0,.22) 3px 5px);background-color:var(--rep)}
.mt-vs.is-mk .mt-odds-d{background-image:repeating-linear-gradient(135deg,transparent 0 3px,rgba(0,0,0,.22) 3px 5px);background-color:var(--dem)}
.mt-vs-say{font-size:.75rem;font-weight:700;color:var(--field);line-height:1.3}
@media(min-width:720px){.mt-vs-k,.mt-vs-say{font-size:.82rem}}
.mt-mk{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:.75rem;font-weight:700;color:var(--dim);white-space:nowrap}
.mt-mk b{font-weight:800}
.mt-mk.is-D b{color:var(--dem)}
.mt-mk.is-R b{color:var(--rep)}
.mt-mk.is-I b{color:var(--ind)}
.mt-race.is-against{border-color:rgba(244,196,48,.45)}
.mt-race.is-against .mt-mk{border-color:var(--field);background:rgba(244,196,48,.12);color:var(--field)}
.mt-race.is-against .mt-mk::before{content:"\26A1\FE0E";font-size:.8rem}
.mt-boldsum{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0 0 var(--s3);padding:6px 12px;border-radius:var(--r);background:var(--sunk);border:1px solid var(--line);font-size:.9rem;line-height:1.4}
.mt-boldsum[hidden]{display:none}
.mt-bs-i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(244,196,48,.15);color:var(--field);font-weight:900}
.mt-boldsum > span:last-child{flex:1 1 220px}
.mt-bs-go{display:inline-flex;align-items:center;min-height:40px;padding:0 4px;background:none;border:0;color:var(--field);font:700 .9rem/1 var(--body);text-decoration:underline;cursor:pointer}
.mt-pre-mk[hidden]{display:none}
.mt-pre-mk::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--field)}
.mt-pre-mk[aria-pressed="true"]::before{background:var(--on-field)}
.mt-vs-s{display:none}
@media(max-width:560px){.mt-vs-l{display:none}.mt-vs-s{display:inline}}

/* The margin on every race card, in percentage points (Elysa, 30 October 2026: "show the actual percentage points for
   margin of victory"): a pill in the winner's colour, the number first. */
.mt-state{display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border-radius:999px;background:var(--raise);color:var(--ink);font-size:.8rem;font-weight:700;white-space:nowrap}
.mt-state:empty{display:none}
.mt-state b{font-weight:900;font-size:.95rem;letter-spacing:.01em}
.mt-state .mt-su{font-size:.75rem;font-weight:700;color:var(--dim)}
.mt-state .mt-sk{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.mt-state.is-D{background:color-mix(in srgb,var(--dem) 22%,var(--raise))}
.mt-state.is-D b{color:#A9C3FF}
.mt-state.is-R{background:color-mix(in srgb,var(--rep) 22%,var(--raise))}
.mt-state.is-R b{color:#FFB0A6}
.mt-state.is-I{background:color-mix(in srgb,var(--ind) 22%,var(--raise))}
.mt-state.is-mine{background:var(--field);color:var(--on-field)}
.mt-race.is-pin .mt-state{color:var(--on-field);font-weight:800}
.mt-state.is-won,.mt-state.is-real{box-shadow:inset 0 0 0 1px rgba(243,241,234,.35)}
/* election night: how far through the night, and each close call's margin */
.mt-called{display:flex;flex-direction:column;gap:6px}
.mt-prog{display:block;height:6px;border-radius:999px;background:var(--raise);overflow:hidden;max-width:22rem}
.mt-prog i{display:block;height:100%;background:var(--field);border-radius:999px;transition:width .2s linear}
.mt-feed li{grid-template-columns:auto minmax(0,1fr) auto}
.mt-feed-m{font-size:.8rem;font-weight:900}
.mt-feed li.is-D .mt-feed-m{color:#A9C3FF}
.mt-feed li.is-R .mt-feed-m{color:#FFB0A6}

/* THE LOOK OF 1 NOVEMBER 2026 (Armin: "They don't visually look good at all ... Make our tools a lot more useful for the
   betting markets"). Calmer surfaces with one lit edge, the chambers' chances as clean bars with the edge said in words,
   and on every race the markets price a win chance row: the map's chance as a bar, the markets' as a yellow tick on the
   same bar, both numbers, and the gap. "Biggest edges" lists where the two part most. Sizes stay at or over the floors the
   phone test measures (words 12px, taps 40px). */
.mt-mood{border-radius:16px;background:linear-gradient(180deg,#151513,var(--bg));border-color:#2f2e2a}
.mt-board{border-radius:16px;border-width:1px;border-color:#2c2b27;background:var(--panel)}
.mt-board.is-D{border-color:color-mix(in srgb,var(--dem) 60%,#2c2b27)}.mt-board.is-R{border-color:color-mix(in srgb,var(--rep) 60%,#2c2b27)}.mt-board.is-I{border-color:color-mix(in srgb,var(--ind) 60%,#2c2b27)}
.mt-bname b{letter-spacing:.015em}
.mt-count b,.mt-count span{letter-spacing:-.01em}
.mt-odds{gap:7px;padding-top:10px;border-top:1px solid #2a2925}
.mt-vs .mt-odds-bar{height:7px}
.mt-vs-edge{display:block;padding:6px 8px;border-radius:8px;background:var(--sunk);color:var(--dim);font-weight:600}
.mt-vs-edge b{color:var(--field)}
.mt-vs-edge.is-big{color:var(--ink);box-shadow:inset 0 0 0 1px var(--field-edge)}
.mt-vs-src a{display:inline-flex;align-items:center;min-height:40px}      /* 4 Nov 2026: with one market link left there is no text beside it, so it is a control and needs 40px (phone-test) */
/* a phone: each chamber gets the whole width, its seats on the left and the count and who controls it on the right, the
   chances under both; side by side at 360px the words broke on every line ("Chance to win it" on two) */
@media(max-width:559px){
  .mt-boards{grid-template-columns:minmax(0,1fr)}
  .mt-board{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:14px;align-items:start}
  .mt-bname{grid-column:1/-1;grid-row:1}
  .mt-chamber{grid-column:1;grid-row:2/4}
  .mt-verdict{grid-column:2;grid-row:2;align-self:end;margin-top:6px}
  .mt-gain{grid-column:2;grid-row:3}
  .mt-odds{grid-column:1/-1;grid-row:4}
}
.mt-race{border-radius:14px;border-color:#2c2b27;background:var(--panel);gap:10px;padding:12px 12px 10px}
.mt-pick{border-radius:10px;background:var(--sunk);border-color:#2c2b27}
/* the win chance row */
.mt-pr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;margin:0;padding:9px 11px;border-radius:10px;background:var(--sunk);font-size:.8125rem;line-height:1.25;color:var(--dim)}
.mt-pr[hidden]{display:none}
.mt-pr-who{grid-column:1;font-weight:800;color:var(--ink)}
.mt-pr-bar{grid-column:2;position:relative;height:8px;border-radius:999px;background:var(--raise)}
.mt-pr-map{grid-column:1;grid-row:2;white-space:nowrap}
.mt-pr-bar ~ .mt-mk{grid-column:2/4;grid-row:2;white-space:nowrap}
.mt-pr-e{grid-column:3;grid-row:1}
.mt-pr-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--dem)}
.mt-pr-bar.is-R i{background:var(--rep)}
.mt-pr-bar.is-I i{background:var(--ind)}
.mt-pr-bar b{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--field);box-shadow:0 0 0 2px var(--sunk)}
.mt-pr-map b,.mt-pr .mt-mk b{color:var(--ink);font-weight:800}
.mt-pr .mt-mk{padding:0;border:0;background:none;color:var(--dim);font-size:.8125rem}
.mt-pr .mt-mk::before{content:"";display:inline-block;width:3px;height:10px;margin-right:5px;border-radius:2px;background:var(--field);vertical-align:-1px}
.mt-race.is-against .mt-pr .mt-mk{border:0;background:none;color:var(--dim)}
.mt-race.is-against .mt-pr .mt-mk::before{content:"";font-size:0}
.mt-pr-e{margin-left:auto;padding:2px 8px;border-radius:999px;background:var(--raise);color:var(--dim);font-weight:800;white-space:nowrap}
.mt-pr-e.is-big{background:rgba(244,196,48,.16);color:var(--field)}
/* the biggest edges */
.mt-gaps{margin:0 0 var(--s4);padding:14px;border:1px solid var(--field-edge);border-radius:16px;background:var(--panel)}
.mt-gaps[hidden]{display:none}
.mt-gaps-h{display:flex;flex-direction:column;gap:2px;margin:0 0 10px}
.mt-gaps-h b{font:900 1.3rem/1.1 var(--display);text-transform:uppercase;color:var(--ink)}
.mt-gaps-h span{font-size:.8125rem;color:var(--dim)}
.mt-gaps-l{display:grid;gap:8px;margin:0;padding:0;list-style:none}
@media(min-width:900px){.mt-gaps-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mt-gap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--sunk)}
.mt-gap-n{display:inline-flex;align-items:center;min-height:40px;font-weight:800;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.mt-gap-n:hover{text-decoration:underline}
.mt-gap-w{grid-column:2;grid-row:1;justify-self:end;font-weight:800;font-size:.875rem}
.mt-gap-w.is-D{color:#A9C3FF}.mt-gap-w.is-R{color:#FFB0A6}
.mt-gap-b{position:relative;grid-column:1/-1;height:8px;border-radius:999px;background:var(--raise)}
.mt-gap-b i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--dem)}
.mt-gap-b i.is-R{background:var(--rep)}.mt-gap-b i.is-I{background:var(--ind)}
.mt-gap-b b{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--field);box-shadow:0 0 0 2px var(--sunk)}
.mt-gap-v{font-size:.8125rem;color:var(--dim)}
.mt-gap-v b{color:var(--ink)}
.mt-gap-e{grid-column:2;justify-self:end;padding:3px 9px;border-radius:999px;background:rgba(244,196,48,.16);color:var(--field);font:900 1rem/1 var(--display)}
.mt-gap-l{grid-column:1/-1;font-size:.8125rem}
.mt-gap-l a{display:inline-flex;align-items:center;min-height:40px;color:var(--dim);font-weight:700}
.mt-gap-l a:hover{color:var(--ink)}
.mt-gaps-go{margin-top:10px;min-height:44px;white-space:normal;text-align:center}
.mk-off .mt-gaps,.mk-off .mt-pr{display:none}

/* THE STREAM VIEW (build/stream.js, build/stream.css; Armin, 31 October 2026: "when I'm showing these tools on a live stream,
   it makes perfect sense, and people can see what's going on, even if it's on a small screen"). The whole board on one
   1280 x 720 canvas, zoomed to the screen: 1 the slider on the left and 2 election night under it, the two chambers in the
   middle, 3 the races on the right (election night takes their place while it runs). Only the layout changes; every control
   works as on the page. */
html.lp-stream #midterms{zoom:var(--lps-z);width:var(--lps-w);height:var(--lps-h);padding:14px 18px 14px;display:grid;
  grid-template-columns:390px minmax(0,1fr) 322px;grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"head head head" "mood boards races" "tools boards races";gap:12px 18px;background:var(--panel)}
html.lp-stream #midterms>.mt-score,html.lp-stream #midterms>.mt-src{display:none!important}
html.lp-stream .mt-head{grid-area:head;max-width:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 18px;padding-right:300px}
html.lp-stream .mt h2{order:-1;margin:0;font-size:2.4rem}
html.lp-stream .mt-lede{display:none}
html.lp-stream .mt-mood{grid-area:mood;margin:0;padding:12px 16px;min-height:0;overflow:hidden}
html.lp-stream .mt-mood-top{flex-direction:column;align-items:flex-start;gap:2px}
html.lp-stream .mt-mood-v{font-size:2.3rem}
html.lp-stream .mt-track{margin-top:0}
html.lp-stream .mt-track.is-mk-l #mt-pin-mk,html.lp-stream .mt-track.is-mk-r #mt-pin-today{margin-left:-6px}
html.lp-stream .mt-track.is-mk-l #mt-pin-today,html.lp-stream .mt-track.is-mk-r #mt-pin-mk{margin-left:6px}
html.lp-stream .mt-result{margin-top:6px}
html.lp-stream .mt-flips{margin-top:6px;gap:2px}
html.lp-stream .mt-pre-row{margin-top:8px}
html.lp-stream .mt-mksw{margin-top:6px}
html.lp-stream .mt-boards{grid-area:boards;margin:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:12px;min-height:0}
html.lp-stream .mt-board{display:grid;grid-template-columns:minmax(0,1fr) 205px;grid-template-rows:auto auto minmax(0,1fr);column-gap:14px;align-content:start;padding:8px 14px 10px;min-height:0;overflow:hidden}
html.lp-stream .mt-bname{grid-column:1;grid-row:1}
html.lp-stream .mt-chamber{grid-column:1;grid-row:2/-1;min-height:0;margin-top:2px;display:flex;flex-direction:column}
html.lp-stream .mt-hemi{flex:1 1 auto;min-height:0;max-height:100%}
html.lp-stream .mt-verdict,html.lp-stream .mt-gain,html.lp-stream .mt-odds{grid-column:2}
html.lp-stream .mt-verdict{grid-row:1;margin:0;align-self:center;line-height:1.15}
html.lp-stream .mt-gain{grid-row:2;margin-top:6px}
html.lp-stream .mt-odds{grid-row:3;align-self:start}
html.lp-stream .mt-run span{font-size:1em}
html.lp-stream .mt-state .mt-sk{font-size:.75rem}
html.lp-stream .mt-odds{margin-top:8px}
html.lp-stream .mt-tools{grid-area:tools;margin:0;align-self:end}
html.lp-stream .mt-tools-b{margin:0;gap:8px}
html.lp-stream .mt-tools .btn{min-height:42px;padding:0 16px;font-size:.85rem}
html.lp-stream .mt-night,html.lp-stream .mt-races{grid-area:races;grid-row:2/4;margin:0;min-height:0;overflow:auto;overscroll-behavior:contain}
html.lp-stream .mt-races{padding-top:0;border-top:0}
html.lp-stream #midterms:has(#mt-night:not([hidden])) .mt-races{display:none}
html.lp-stream .mt.is-live .mt-list{grid-template-columns:minmax(0,1fr)}
html.lp-stream .mt-where{margin-left:0}
html.lp-stream .mt-vs-l{display:none}
html.lp-stream .mt-vs-s{display:inline}
html.lp-stream .mt-gaps{display:none}
html.lp-stream .mt-odds{padding-top:0;border-top:0;gap:4px}
html.lp-stream .mt-vs-edge{padding:0;background:none;box-shadow:none}
/* The betting markets on a race page, a race card and a country page (build/markets.py, build/markets.js), added to the end
   of site.css by render.py. Quiet by design (Armin, 30 October 2026: "doesn't make people miss out on it and also doesn't
   annoy people who aren't interested"): one labelled panel, thin bars, the party colours, the site's yellow only as the dot
   that marks money on the line. */
.mk{margin-top:var(--s4);padding:12px 14px;border:1px solid var(--line);border-radius:var(--r2);background:var(--sunk);max-width:640px}
.mk[hidden]{display:none}
.mk-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.mk-k{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.mk-k::before{content:"";display:inline-block;width:7px;height:7px;margin:0 7px 1px 0;border-radius:50%;background:var(--field);vertical-align:middle}
.mk-t{font-size:.75rem;color:var(--dim)}
.mk-ends{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:.95rem;font-weight:600;line-height:1.25}
.mk-ends span:last-child{text-align:right}
.mk-ends b{font:900 1.35rem/1 var(--display)}
.mk .is-D b,.mk b.is-D{color:var(--dem)}
.mk .is-R b,.mk b.is-R{color:var(--rep)}
.mk .is-I b,.mk b.is-I{color:var(--ind)}
.mk-bar{display:flex;justify-content:space-between;height:8px;margin-top:8px;border-radius:999px;background:var(--raise);overflow:hidden}
.mk-bar i{display:block;height:100%;transition:width .4s cubic-bezier(.16,1,.3,1)}
.mk-bar i.is-D{background:var(--dem)}
.mk-bar i.is-R{background:var(--rep)}
.mk-bar i.is-I{background:var(--ind)}
.mk-src{margin-top:8px;font-size:.8rem;line-height:1.45;color:var(--dim)}
.mk-src a{color:var(--dim);font-weight:700;padding:12px 0;margin:-12px 0}
/* a country: the question, then one row a name */
.mk-w{max-width:720px;margin-top:var(--s5)}
.mk-q{margin-top:6px;font:900 clamp(1.4rem,5.5vw,1.9rem)/1.05 var(--display)}
.mk-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.mk-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 10px}
.mk-face{width:36px;height:36px;grid-row:span 2;border-radius:50%;object-fit:cover;object-position:50% 18%;background:var(--raise);display:inline-flex;align-items:center;justify-content:center;font:800 .8rem/1 var(--display);color:var(--dim)}
.mk-nm{font-weight:700;font-size:.95rem;min-width:0;overflow-wrap:anywhere}
.mk-nm a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.mk-nm a:hover{text-decoration:underline}
.mk-list b{font:900 1.2rem/1 var(--display);color:var(--ink)}
.mk-list li:first-child b{color:var(--field)}
.mk-bar1{grid-column:2/-1;display:block;height:5px;border-radius:999px;background:var(--raise);overflow:hidden}
.mk-bar1 i{display:block;height:100%;background:var(--dim);border-radius:999px;transition:width .4s cubic-bezier(.16,1,.3,1)}
.mk-list li:first-child .mk-bar1 i{background:var(--field)}
/* a race card in a list */
.rc-mk{display:block;margin-top:2px;font-size:.8rem;color:var(--dim)}
.rc-mk[hidden]{display:none}
.rc-mk b{font-weight:800}
.rc-mk b.is-D{color:var(--dem)}
.rc-mk b.is-R{color:var(--rep)}
.rc-mk b.is-I{color:var(--ind)}
/* THE ODDS SWITCH (markets.py switch(), markets.js; Armin, 30 October 2026: "in a way that could be ignored for people who
   don't like it ... Maybe it should just be there"). On by default. Off is html.mk-off, remembered per reader: every market
   number on the site goes, and each block shrinks to one dashed line holding the switch, so it can be turned back on where
   it was turned off. Nothing is hidden and animated back: off is display:none, on is the page as built. */
.mk-sw{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:-8px 0;padding:0 2px;background:none;border:0;color:var(--dim);font:700 .75rem/1 var(--body);letter-spacing:.03em;cursor:pointer}
.mk-h .mk-sw{margin-left:auto}
.mk-sw-t{position:relative;flex:none;width:30px;height:18px;border-radius:999px;background:var(--field)}
.mk-sw-t i{position:absolute;top:2px;left:14px;width:14px;height:14px;border-radius:50%;background:var(--on-field)}
.mk-sw:focus-visible{outline:2px solid var(--field);outline-offset:2px;border-radius:6px}
.mk-off .mk-sw-t{background:var(--raise);box-shadow:inset 0 0 0 1px var(--line)}
.mk-off .mk-sw-t i{left:2px;background:var(--dim)}
.mk-off .mk{padding-top:4px;padding-bottom:4px;background:none;border-style:dashed}
.mk-off .mk > :not(.mk-h),.mk-off .mk .mk-k,.mk-off .mk .mk-t{display:none}
.mk-off .rc-mk,.mk-off .mk-chip,.mk-off .coal-mk,.mk-off .mt-pin-mk,.mk-off .rg-mk ul,.mk-off .rg-mk .mk-aff,.mk-off .rg-mk-t{display:none!important}
.mk-aff{display:block;margin-top:4px;font-style:italic}
/* inside the coalition calculator (markets.py coal_strip, pm_chip; coalition.js pmOdds): who becomes prime minister as four
   names and bars, the questions that bear on the government, a leader's chance on each party row */
.mk-in{max-width:none;margin-top:var(--s4)}
.mk-q2{margin-top:6px;font-weight:800;font-size:.95rem;line-height:1.3}
.mk-rank{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.mk-rank li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:3px 8px}
.mk-rank .mk-nm{font-size:.9rem;overflow-wrap:anywhere}
.mk-rank b{font:900 1.05rem/1 var(--display);color:var(--ink)}
.mk-rank li:first-child b{color:var(--field)}
.mk-rank li:first-child .mk-bar1 i{background:var(--field)}
.mk-xs{list-style:none;margin:10px 0 0;padding:0}
.mk-x a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:.9rem;line-height:1.3}
.mk-x a:hover span{text-decoration:underline}
.mk-x b{flex:none;font:900 1.05rem/1 var(--display)}
.mk-x[hidden]{display:none}
.mk-chip{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);font-size:.75rem;font-weight:700;color:var(--dim);white-space:nowrap;vertical-align:1px}
.mk-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--field)}
.mk-chip b{font-weight:800;color:var(--ink)}
.mk-chip[hidden]{display:none}
.coal-mk{color:var(--dim)}
.coal-mk b{color:var(--ink)}
/* Call the Midterms (midterms.py, midterms.js): the Markets mark under the slider beside Polls today, the switch under the
   presets, and where each chamber's market number was read. Two marks closer than a label stand back to back, each label
   leaning away from the other, each triangle still under its own point. */
.mt-pin-mk{bottom:2px;font:700 .75rem/1 var(--body);color:var(--ink)}
.mt-pin-mk::before{content:"";display:block;width:0;height:0;margin:0 auto 3px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid var(--dim)}
.mt-track.is-mk-l .mt-pin-mk,.mt-track.is-mk-r .mt-pin-today{text-align:right}
.mt-track.is-mk-l .mt-pin-mk::before,.mt-track.is-mk-r .mt-pin-today::before{margin:0 0 3px auto;border-left-width:3px;border-right-width:3px}
.mt-track.is-mk-l .mt-pin-today::before,.mt-track.is-mk-r .mt-pin-mk::before{margin:0 auto 3px 0;border-left-width:3px;border-right-width:3px}
.mt-mksw{display:flex;justify-content:flex-end;margin-top:var(--s2)}
.mt-mksw[hidden]{display:none}
.mt-vs-src{font-size:.75rem;color:var(--dim);line-height:1.4}
.mt-vs-src a{color:var(--dim);font-weight:700;padding:12px 0;margin:-12px 0}
@media(prefers-reduced-motion:reduce){.mk *{transition:none!important}}
/* Make your call: the shared call widget (build/calls.js) and the Beat the Markets page (build/calls.py, markets/). The plan,
   the names and the scoring rule are ../CALLS.md; nothing here restates them. Added to the end of site.css by render.py,
   so every page that mounts a widget has its looks with no second request.
   The three numbers, in this order everywhere: Markets, Readers, You. Market prices go with the one odds switch
   (html.mk-off, build/markets.js): Readers and You stay. Nothing here is hidden and animated in; the only movement is
   a card answering a finger, and only transform and box-shadow ever move. */

/* ---------------------------------------------------------------- a mount, and its cards */
.lpc{margin-top:var(--s4)}
.lpc[hidden]{display:none}
.lpc-l{display:grid;gap:var(--s3);grid-template-columns:minmax(0,1fr);align-items:start}      /* 31 Oct 2026: a card is as tall as what it says; stretched to the tallest in its row, a two-option card had 150-250px of nothing above its Polymarket link */
@media(min-width:700px){.lpc-l{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
.lpc-c{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:var(--r2);background:var(--panel);scroll-margin-top:96px}
.lpc-c:target{box-shadow:0 0 0 2px var(--field)}
.lpc-meta{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:.8125rem;line-height:1.35;color:var(--dim)}
.lpc-meta .lpc-st{font-weight:700;color:var(--ink)}
.lpc-meta .lpc-st.is-won{color:var(--ga)}
.lpc-q{margin:0;font:700 1.0625rem/1.3 var(--body);text-transform:none;letter-spacing:0;color:var(--ink);overflow-wrap:anywhere}

/* the three numbers */
.lpc-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.lpc-n{display:flex;flex-direction:column;gap:1px;min-width:0;min-height:76px;padding:8px 10px;border-radius:var(--r);background:var(--sunk);border:1px solid transparent;text-align:left;color:var(--ink);font:inherit}
.lpc-k{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.lpc-n b{font:900 1.55rem/1.05 var(--display);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpc-n small{font-size:.75rem;line-height:1.3;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 31 Oct 2026 (audit at 1440: "Alexandria O...", "Prince Reza P..."): a name in a number's box takes two lines before it is cut */
div.lpc-n small:not(:empty){white-space:normal;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.lpc-n-y.is-set{border-color:var(--field-edge)}
.lpc-n-y.is-set b{color:var(--field)}
.lpc-n-y.is-won b{color:var(--ga)}
.lpc-n-y.is-lost b{color:var(--gf)}
/* signed out: the third number is visibly missing, and the empty slot is the way in */
button.lpc-n-y{cursor:pointer;border:1px dashed #4a4843;background:transparent;justify-content:center}
button.lpc-n-y small{white-space:normal;color:var(--ink);font-weight:600;font-size:.8125rem}
button.lpc-n-y:hover{border-color:var(--field)}
.lpc-sp{display:block;width:100%;max-width:72px;height:16px;margin-top:2px}
.lpc-sp polyline{fill:none;stroke:var(--field);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* Your build says (LPCalls.mine): the calculator's own answer, one tap from being the reader's call */
.lpc-mine{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;width:100%;min-height:44px;margin:0;padding:8px 12px;border:1px dashed var(--field-edge);border-radius:var(--r);background:transparent;color:var(--dim);font:500 .875rem/1.35 var(--body);text-align:left}
.lpc-mine b{color:var(--ink)}
.lpc-mine small{font-size:.8125rem;font-weight:700;color:var(--field)}
button.lpc-mine{cursor:pointer}
button.lpc-mine:hover{border-style:solid}
.lpc-mine.is-same{border-style:solid}
.lpc-mine.is-same small{color:var(--dim)}
/* a tool's heading over its calls (data-lpc-h): the title, the one line, the way to keep score */
.lpc-hd{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:var(--s3)}
.lpc-h{display:flex;flex-direction:column;gap:2px;min-width:0;margin:0}
.lpc-h b{font:900 1.25rem/1.15 var(--display);color:var(--ink)}
.lpc-h span{font-size:.875rem;line-height:1.4;color:var(--dim)}
.lpc-rec{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:700 .875rem/1 var(--body);text-decoration:none;cursor:pointer;white-space:nowrap}
.lpc-rec:hover{border-color:var(--field)}
.lpc-new{padding:3px 7px;border-radius:999px;background:var(--field);color:var(--bg);font-size:.75rem;font-weight:800}
@media(min-width:700px){.lpc[data-lpc-n="2"] .lpc-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.lpc-n small{white-space:normal}}      /* a phone: "Democratic Party" on two lines, never "Democrat..." */
/* the calls in a tool step aside in its stream view: the tool fills the screen (build/stream.js) */
html.lp-stream .lpc[data-lpc-tool]:not([data-lpc-page]){display:none}

/* the options: one tap is the call */
.lpc-o{display:grid;gap:6px}
.lpc-b{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--sunk);color:var(--ink);font:600 .9375rem/1.25 var(--body);text-align:left;cursor:pointer;overflow:hidden;transition:transform .15s var(--ease,ease),box-shadow .15s}
.lpc-b:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 14px -6px rgba(0,0,0,.7)}
.lpc-b:disabled{cursor:default}
.lpc-bl{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.lpc-bp{flex:none;font:800 1.05rem/1 var(--display);font-variant-numeric:tabular-nums lining-nums;color:var(--dim)}
.lpc-bi{position:absolute;left:0;bottom:0;height:3px;background:#55534c;border-radius:0 2px 2px 0}
.lpc-b[aria-pressed="true"]{border-color:var(--field);box-shadow:inset 0 0 0 1px var(--field)}
.lpc-b[aria-pressed="true"] .lpc-bl::before{content:"\2713\00a0";color:var(--field);font-weight:900}
.lpc-b[aria-pressed="true"] .lpc-bi{background:var(--field)}
.lpc-b.is-won{border-color:var(--ga)}
.lpc-b.is-won .lpc-bl::after{content:"\00a0 Won";color:var(--ga);font-weight:800;font-size:.8125rem}
.lpc-more1{justify-self:start;min-height:40px;padding:0 4px;background:none;border:0;color:var(--dim);font:700 .875rem/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lpc-more1:hover{color:var(--ink)}

/* what the call is worth, and where the market lives */
.lpc-say{min-height:1.4em;font-size:.9375rem;line-height:1.4;color:var(--ink)}
.lpc-say:empty{display:none}
.lpc-say b{color:var(--field)}
.lpc-say.is-bad{color:#ff8a80}
.lpc-say.is-won b{color:var(--ga)}
.lpc-say.is-lost b{color:var(--gf)}
.lpc-src{margin-top:auto;font-size:.8125rem;line-height:1.45;color:var(--dim)}
.lpc-src a{color:var(--dim);font-weight:700}
.lpc-src a:hover{color:var(--ink)}

/* More calls: the rest, under the first ones, so nothing above the finger moves */
.lpc-more{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin-top:var(--s3)}
.lpc-more .btn{min-height:44px}
.lpc-none{padding:var(--s4);border:1px dashed var(--line);border-radius:var(--r2);color:var(--dim)}
.lpc-aff{margin-top:var(--s3);font-size:.8125rem;color:var(--dim)}
.lpc-aff:empty{display:none}

/* the odds switch: market numbers go, Readers and You stay */
.mk-off .lpc-n-m,.mk-off .lpc-bp,.mk-off .lpc-bi,.lpc-stale .lpc-n-m,.lpc-stale .lpc-bp,.lpc-stale .lpc-bi{display:none}
.mk-off .lpc-3,.lpc-stale .lpc-3{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------------------------------------------------------------- the Beat the Markets page (markets/) */
.btm-hero .wrap{padding-top:var(--s6);padding-bottom:var(--s5)}
.btm-hero h1{font-size:clamp(2.4rem,11vw,4.4rem);line-height:.92}
.btm-lede{margin-top:var(--s3);max-width:62ch;font-size:1.0625rem;line-height:1.5;color:var(--ink)}
.btm-rule{margin-top:6px;max-width:62ch;font-size:.9375rem;line-height:1.5;color:var(--dim)}
.btm-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:440px;margin-top:var(--s5);padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
.btm-tab{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 12px;border-radius:999px;color:var(--dim);font:700 .9375rem/1 var(--body);text-decoration:none}
.btm-tab[aria-current="true"]{background:var(--field);color:var(--on-field)}
.btm-tab:hover{color:var(--ink)}
.btm-tab[aria-current="true"]:hover{color:var(--on-field)}
.btm-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--gf);color:var(--on-grade);font:800 .75rem/1 var(--body)}
.btm-badge[hidden]{display:none}
.btm-sec{padding:var(--s5) 0 var(--s7)}
.btm-sec[hidden]{display:none}
.btm-bar{display:grid;gap:var(--s3);margin-bottom:var(--s4)}
.btm-bar .chips{margin-top:0}
.btm-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2) var(--s3);align-items:end}
.btm-row .btm-f:first-child{grid-column:1/-1}
@media(min-width:760px){.btm-row{grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto}.btm-row .btm-f:first-child{grid-column:auto}}
.btm-f label{display:block;margin-bottom:4px;font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.btm-f input,.btm-f select{width:100%;min-height:48px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);font:500 1rem/1 var(--body)}
.btm-f input:focus,.btm-f select:focus{border-color:var(--field);outline:none}
.btm-f input::placeholder{color:var(--dim)}
.btm-sw{display:flex;align-items:center;min-height:48px}
.btm-sw .mk-sw{margin:0}
.btm-count{font-size:.875rem;color:var(--dim)}
.btm-age{font-size:.8125rem;color:var(--dim)}
.btm-age:not(:empty)::before{content:"·  "}

/* Your record */
.btm-rec{display:grid;gap:var(--s4);max-width:60rem}
.btm-head{font:900 clamp(1.7rem,7vw,2.6rem)/1 var(--display);text-transform:uppercase;color:var(--ink)}
.btm-head b{color:var(--field);font-weight:900}
.btm-head.is-down b{color:var(--gf)}
.btm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
@media(min-width:700px){.btm-stats{grid-template-columns:repeat(5,minmax(0,1fr))}}
.btm-stats li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r);background:var(--panel)}
.btm-stats b{font:900 1.6rem/1 var(--display);font-variant-numeric:tabular-nums lining-nums}
.btm-stats span{font-size:.8125rem;color:var(--dim)}
.btm-h3{font:800 .875rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.btm-list{display:grid;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.btm-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:10px 12px;border-radius:var(--r);background:var(--panel)}
.btm-list .btm-lq{font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.btm-list .btm-lq a{color:var(--ink)}
.btm-list .btm-lc{grid-column:1;font-size:.8125rem;color:var(--dim)}
.btm-list .btm-lp{grid-row:1/span 2;grid-column:2;font:900 1.25rem/1 var(--display);font-variant-numeric:tabular-nums lining-nums}
.btm-list .is-up{color:var(--ga)}
.btm-list .is-down{color:var(--gf)}
.btm-new{padding:12px 14px;border:1px solid var(--field-edge);border-radius:var(--r2);background:var(--panel)}
.btm-new .btn{margin-top:10px;min-height:44px}
.btm-pub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4)}
.btm-pubsw{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;background:none;border:0;color:var(--ink);font:600 .9375rem/1.3 var(--body);cursor:pointer;text-align:left}
.btm-pubsw .mk-sw-t{background:var(--raise);box-shadow:inset 0 0 0 1px var(--line)}
.btm-pubsw .mk-sw-t i{left:2px;background:var(--dim)}
.btm-pubsw[aria-checked="true"] .mk-sw-t{background:var(--field);box-shadow:none}
.btm-pubsw[aria-checked="true"] .mk-sw-t i{left:14px;background:var(--on-field)}
.btm-note{font-size:.9375rem;line-height:1.5;color:var(--dim);max-width:60ch}
.btm-note.is-bad{color:#ff8a80}
.btm-out{display:grid;gap:var(--s3);max-width:40rem;padding:var(--s4);border:1px dashed #4a4843;border-radius:var(--r2)}
.btm-out .btn{justify-self:start}

/* ---------------------------------------------------------------- THE LOOK OF 1 NOVEMBER 2026
   Armin: "They don't visually look good at all ... beautiful to look at, easy to understand, easy to use, intuitive". The
   card reads top to bottom as a bettor reads a market: where it trades, the question, the price big, the edge in one line,
   then the options as filled bars (the fill IS the price). The page opens on how a call scores, drawn on two prices, then
   three short rails (closing soon, coin flips, biggest moves) over the list. Every rule below sizes nothing a test measures
   below its floor: words 12px+, every tap 40px+. */
.lpc-c{gap:12px;padding:16px 14px;border-radius:14px;border-color:#2f2e2a;background:var(--panel);transition:border-color .15s}
.lpc-c:hover{border-color:#3d3b35}
.lpc-meta{align-items:center;gap:4px 10px}
.lpc-pf{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:999px;background:var(--raise);color:var(--ink);font-weight:700;font-size:.75rem;line-height:1.2}
.lpc-pf::before{content:"";width:8px;height:8px;border-radius:50%;background:#7aa2ff}
.lpc-pf.is-k::before{background:#3ccf91}
.lpc-q{font-size:1.125rem;line-height:1.28}
.lpc-n{min-height:68px;border-radius:10px;background:var(--sunk)}
.lpc-n-m b{font-size:1.9rem;color:var(--ink)}
.lpc-n-r b{font-size:1.55rem}
.lpc-n-y.is-set{background:rgba(244,196,48,.07)}
/* the options: the fill behind each name is its price, so the bars ARE the chart */
.lpc-b{min-height:46px;border-radius:10px;border-color:#2c2b28;background:var(--sunk)}
.lpc-bl,.lpc-bp{position:relative;z-index:1}
.lpc-bp{color:var(--ink);font-size:1.15rem}
.lpc-bi{top:0;bottom:0;height:auto;border-radius:9px 0 0 9px;background:rgba(255,255,255,.075)}
.lpc-b[aria-pressed="true"]{background:#14130e}
.lpc-b[aria-pressed="true"] .lpc-bi{background:rgba(244,196,48,.22)}
.lpc-b.is-won .lpc-bi{background:rgba(70,204,130,.18)}
/* the edge: readers against the market, one plain line */
.lpc-edge{display:flex;align-items:baseline;gap:8px;margin:0;font-size:.875rem;line-height:1.4;color:var(--dim)}
.lpc-edge-k{flex:none;padding:2px 7px;border-radius:999px;background:var(--raise);color:var(--field);font:800 .75rem/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase}
.lpc-edge b{color:var(--field)}
.mk-off .lpc-edge,.lpc-stale .lpc-edge{display:none}
.lpc-src a{display:inline-flex;align-items:center;gap:4px;min-height:40px;color:var(--ink);text-decoration:none;font-weight:700}
.lpc-src a:hover{color:var(--field)}
.lpc-src a span{color:var(--field)}

/* the page: the title beside how a call scores */
.btm-top{display:grid;gap:var(--s5)}
@media(min-width:900px){.btm-top{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end}}
.btm-stat{margin-top:var(--s3);font-size:.9375rem;line-height:1.5;color:var(--dim)}
.btm-stat b{color:var(--ink);font-weight:800}
.btm-stat:empty{display:none}
.btm-score{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.btm-score-h{font:800 .8125rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.btm-pts{display:grid;gap:12px;margin:12px 0 0;padding:0;list-style:none}
.btm-pt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center}
.btm-pt-p{font-size:.9375rem;color:var(--dim)}
.btm-pt-p b{font:900 1.4rem/1 var(--display);color:var(--ink)}
.btm-pt-bar{grid-column:1/-1;height:8px;border-radius:999px;background:var(--sunk);overflow:hidden}
.btm-pt-bar i{display:block;height:100%;border-radius:999px;background:var(--field)}
.btm-pt-r{display:flex;gap:12px;font-size:.875rem;color:var(--dim);white-space:nowrap}
.btm-pt-r b{font:900 1.15rem/1 var(--display)}
.btm-pt-r .is-up b{color:var(--ga)}
.btm-pt-r .is-down b{color:var(--gf)}
.btm-score .btm-rule{margin-top:12px;font-size:.875rem}

/* the rails: closing soon, coin flips, biggest moves. Two tiles a rail on a phone, three columns of three on a computer. A tile opens its market whole in the box under them. */
.btm-rails{display:grid;gap:var(--s4);margin:0 0 var(--s5)}
.btm-rails[hidden]{display:none}
@media(min-width:1000px){.btm-rails{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}
.btm-rail{min-width:0}
.btm-rail-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 8px}
.btm-rail-h b{font:900 1.3rem/1.1 var(--display);text-transform:uppercase;color:var(--ink)}
.btm-rail-h span{font-size:.875rem;color:var(--dim)}
.btm-rail-l{display:grid;gap:8px}
/* a phone: two tiles a rail, each one line of question beside its price (the rail never scrolls sideways: the phone test measures every tile inside the screen) */
@media(max-width:999px){.btm-tile{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px}.btm-tile-q{grid-column:1;grid-row:1}.btm-tile-p{grid-column:2;grid-row:1/3;flex-direction:column;align-items:flex-end;gap:2px;max-width:9.5rem}.btm-tile-p span{max-width:100%}.btm-tile-s{grid-column:1;grid-row:2}.btm-tile-bar{grid-column:1/-1;grid-row:3}.btm-rail-l .btm-tile:nth-child(n+3){display:none}}
.btm-tile{display:grid;gap:7px;align-content:start;min-width:0;min-height:44px;padding:12px 13px;border:1px solid #2f2e2a;border-radius:12px;background:var(--panel);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform .15s,box-shadow .15s}

.btm-tile:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(0,0,0,.9)}
.btm-tile[aria-pressed="true"]{border-color:var(--field);box-shadow:inset 0 0 0 1px var(--field)}
.btm-tile-q{font:700 .9375rem/1.3 var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.btm-tile-p{display:flex;align-items:baseline;gap:8px;min-width:0}
.btm-tile-p b{font:900 1.6rem/1 var(--display);font-variant-numeric:tabular-nums lining-nums}
.btm-tile-p span{min-width:0;font-size:.8125rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btm-tile-bar{height:6px;border-radius:999px;background:var(--sunk);overflow:hidden}
.btm-tile-bar i{display:block;height:100%;border-radius:999px;background:var(--field)}
.btm-tile-s{font-size:.8125rem;color:var(--dim)}
.mk-off .btm-tile-p b,.mk-off .btm-tile-bar{display:none}
.btm-focus{margin:0 0 var(--s5);padding:12px;border:1px solid var(--field-edge);border-radius:16px;background:var(--raise)}
.btm-focus[hidden]{display:none}
.btm-focus-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.btm-focus-h{font-weight:800;color:var(--ink)}
.btm-focus-x{min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:700 .875rem/1 var(--body);cursor:pointer}
.btm-focus-x:hover{border-color:var(--field)}
.btm-focus .lpc{margin-top:10px}
@media(min-width:700px){.btm-focus .lpc-l{grid-template-columns:minmax(0,40rem)}}
html.lp-stream .btm-rails,html.lp-stream .btm-focus,html.lp-stream .btm-score{display:none}

/* ---------------------------------------------------------------- the stream view (build/stream.js: html.lp-stream, #btm is the box)
   One 1280 x 720 canvas, zoomed to the screen (--lps-z). The head and the filters on two rows, the cards in three columns
   that scroll inside their own box; nothing on the canvas under 13.4px, so 20px on a 1920 x 1080 stream. */
html.lp-stream #btm{zoom:var(--lps-z);width:var(--lps-w);height:var(--lps-h);display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
html.lp-stream #btm .tband,html.lp-stream .btm-lede,html.lp-stream #btm noscript{display:none}
html.lp-stream .btm-hero{flex:none;border:0}
html.lp-stream .btm-hero .wrap{max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:14px 24px 8px}
html.lp-stream .btm-hero h1{font-size:2.6rem}
html.lp-stream .btm-rule{order:5;flex-basis:100%;margin:0;font-size:.875rem}
html.lp-stream .btm-tabs{margin:0;width:340px}
html.lp-stream .btm-hero .lpt-doors{margin:0 0 0 auto}
html.lp-stream .btm-sec{flex:1 1 auto;min-height:0;padding:0;display:flex;flex-direction:column}
html.lp-stream .btm-sec > .wrap{max-width:none;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:0 24px 12px}
html.lp-stream .btm-bar{flex:none;margin-bottom:8px;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:8px 16px}
html.lp-stream .btm-bar .chips{overflow:visible;flex-wrap:wrap;margin:0;padding:0}
html.lp-stream .btm-row{grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto}
html.lp-stream .btm-row .btm-f:first-child{grid-column:auto}
html.lp-stream .btm-f label{font-size:.875rem}
html.lp-stream .btm-count{grid-column:1/-1;font-size:.875rem}
html.lp-stream .btm-age{font-size:.875rem}
html.lp-stream #btm-list,html.lp-stream #btm-recbox{flex:1 1 auto;min-height:0;margin:0;overflow:auto;overscroll-behavior:contain}
html.lp-stream .lpc-l{grid-template-columns:repeat(3,minmax(0,1fr))}
html.lp-stream .lpc-k,html.lp-stream .lpc-n small,html.lp-stream .lpc-meta,html.lp-stream .lpc-src,html.lp-stream .btm-badge,html.lp-stream .lpc-more1,html.lp-stream .lpc-aff{font-size:.875rem}
html.lp-stream .btm-rec{max-width:none}
html.lp-stream .btm-stats span,html.lp-stream .btm-list .btm-lc{font-size:.875rem}
/* THE STREAM VIEW (build/stream.js; the tour card and the doors are styled by build/tour.js itself), added to the end of site.css by
   render.py. Each tool's own stream layout is in its own CSS under html.lp-stream (midterms.css, coalition.css, regime.css).
   Nothing here hides content and animates it back. */

/* ---------------------------------------------------------------- the doors and the tour card
   Their look moved into build/tour.js on 1 November 2026 (one home, injected as <style id="lpt-css">, so Iran Uncensored's
   pages wear it too). Only what the stream view does to them is here. */
.lpt-how[hidden],.lps-go[hidden]{display:none}

/* ---------------------------------------------------------------- the stream view: the tool alone, filling the screen */
/* one rem step up on the canvas (18px, not 16), so a tool's smallest words (.75rem) are 13.5px there and 20px on a 1920 x 1080 stream */
html.lp-stream{font-size:18px}
html.lp-stream,html.lp-stream body{overflow:hidden!important;height:100%;background:var(--bg)}
html.lp-stream body{padding:0!important;margin:0!important}
/* everything that is not on the way to the tool goes (dialogs and the tour stay: they are opened from the tool) */
html.lp-stream .lps-path>:not(.lps-path):not(.lps-root):not(.lps-keep):not(dialog){display:none!important}
html.lp-stream .lps-path{display:block!important;position:static!important;transform:none!important;filter:none!important;contain:none!important;content-visibility:visible!important;margin:0!important;padding:0!important;border:0!important;min-height:0!important}
html.lp-stream #calls,html.lp-stream .top,html.lp-stream .modes,html.lp-stream footer{display:none!important}
html.lp-stream .lps-root{position:fixed!important;top:0!important;left:0!important;right:auto!important;bottom:auto!important;width:100vw;height:100vh;max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;z-index:40;overflow:hidden;background:var(--bg)}
html.lp-stream .lps-root .lpt-doors,html.lp-stream .lps-root .acct-ask{display:none!important}
/* the corner: the site's address, and the way out. Sized with the zoom, so it reads on the stream like the tool does. */
.lps-bar{display:none}
html.lp-stream .lps-bar{display:flex;position:fixed;top:calc(10px * var(--lps-z,1));right:calc(14px * var(--lps-z,1));z-index:60;align-items:center;gap:calc(10px * var(--lps-z,1))}
.lps-mark{font:800 calc(14px * var(--lps-z,1))/1 var(--display);letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.lps-mark b{color:var(--field);font-weight:800}
.lps-x{min-height:max(40px,calc(30px * var(--lps-z,1)));padding:0 calc(12px * var(--lps-z,1));border:1px solid #3a3936;border-radius:999px;background:var(--panel);color:var(--dim);font:700 max(13px,calc(13.5px * var(--lps-z,1)))/1 var(--body);cursor:pointer}
.lps-x:hover{color:var(--ink);border-color:var(--dim)}
/* THE CONFLICT SIMULATOR (build/wargame.py, wargame.js). Added to the end of site.css by render.py; Iran Uncensored loads it as
   assets/scenarios.css?v=b16251faaa. Own prefix: wg-, wgi- (never a class a linked stylesheet styles: deploy_guard no_style_clash).
   1 November 2026 (Armin: "a very high-end strategic video game look ... real video game visualizations"): THE BOARD IS THE
   PAGE. The theatre fills the first screen under the site's header, a WebGL board (wargame.js) with the command interface
   drawn over it on dark glass: the top bar, the order of battle (left), the panel (right; on a phone a bottom sheet), the
   timeline with the intel feed (bottom), the minimap and the camera buttons. The brief outranks the site's editorial look
   here; the yellow of the site (#F4C430) is the accent. Every word 12px or more, every control 40px or more. Nothing is
   hidden and animated back in: what moves is the board, a gauge filling and a hover. */
.wg{--wg-glass:rgba(7,11,17,.78);--wg-glass2:rgba(12,18,27,.9);--wg-edge:rgba(150,180,215,.16);--wg-edge2:rgba(150,180,215,.28);--wg-ink:#E9EEF4;--wg-dim:#9AA7B6;--wg-gold:#F4C430;--wg-blue:#3D8BFF;--wg-red:#FF4A3A;--wg-cyan:#7FE3FF;--wg-hd:"Big Shoulders Display","Bahnschrift","Arial Narrow","Roboto Condensed",var(--display),sans-serif;padding:0;background:#05070a}
.wg-app{position:relative;height:calc(100vh - 113px);min-height:440px;overflow:hidden;background:#05070a;isolation:isolate;color:var(--wg-ink)}
@supports (height:100svh){.wg-app{height:calc(100svh - 113px)}}
@media(max-width:1219px){.wg-app{height:calc(100svh - 163px)}}

/* the board */
.wg-stage{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;background:#05070a}
.wg-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--wg-gold)}
.wg-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wg-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.wg-app.flat .wg-poster{visibility:hidden}
.wg-tags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wg-tag{position:absolute;left:0;top:0;display:block;padding:0 5px;font:700 12px/18px var(--body);letter-spacing:.02em;color:#EDF1F6;white-space:nowrap;text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.95);will-change:transform}
.wg-tag.t-blue{color:#CFE2FF}.wg-tag.t-red{color:#FFD5CF}
.wg-tag.cap{font:800 13px/18px var(--body);color:#FFE9A8;letter-spacing:.06em;text-transform:uppercase}
.wg-tag.off{color:var(--wg-dim);font-weight:600}
.wg-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 46%,transparent 58%,rgba(0,0,0,.55) 100%),linear-gradient(to bottom,rgba(0,0,0,.38),transparent 16%,transparent 78%,rgba(0,0,0,.5))}
.wg-ns{position:absolute;left:12px;right:12px;bottom:12px;margin:0;padding:12px 14px;background:var(--wg-glass);border:1px solid var(--wg-edge);border-radius:10px;color:var(--wg-ink);font-size:.95rem}

/* the command interface: dark glass over the board */
.wg-hud{position:absolute;inset:0;z-index:3;pointer-events:none}
.wg-hud>*{pointer-events:auto}
.wg-top,.wg-orb,.wg-panel,.wg-tl,.wg-nav,.wg-mini,.wg-bf{background:var(--wg-glass);border:1px solid var(--wg-edge);border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.wg-hud button,.wg-bf button{font:inherit;color:inherit;cursor:pointer}
.wg-ib{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border:1px solid var(--wg-edge);border-radius:9px;background:rgba(255,255,255,.04);color:var(--wg-ink);font:800 15px/1 var(--body);transition:background .15s,border-color .15s}
.wg-ib:hover{background:rgba(244,196,48,.12);border-color:rgba(244,196,48,.45)}
.wg-ib[aria-pressed="true"]{background:rgba(244,196,48,.18);border-color:var(--wg-gold);color:var(--wg-gold)}
.wg-ib:focus-visible,.wg-hud a:focus-visible,.wg-hud button:focus-visible,.wg-bf button:focus-visible{outline:2px solid var(--wg-gold);outline-offset:2px}
.wg-k{margin:0;font:800 12px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--wg-gold)}

/* the top bar */
.wg-top{position:absolute;top:10px;left:10px;right:10px;height:56px;display:flex;align-items:center;gap:12px;padding:0 8px 0 12px}
.wg-brand{display:flex;align-items:center;gap:10px;min-width:0}
.wg-logo{width:16px;height:16px;flex:none;transform:rotate(45deg);border:2px solid var(--wg-gold);box-shadow:0 0 12px rgba(244,196,48,.6),inset 0 0 6px rgba(244,196,48,.5)}
.wg-bn{font:800 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--wg-gold);white-space:nowrap}
.wg-thn{font:800 24px/1 var(--wg-hd);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.wg-ths{display:flex;gap:4px;margin-inline-start:6px}
.wg-th{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:8px;color:var(--wg-dim);font:700 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1px solid transparent}
.wg-th:hover{color:var(--wg-ink);border-color:var(--wg-edge)}
.wg-th[aria-current="page"]{color:var(--wg-ink);background:rgba(244,196,48,.12);border-color:rgba(244,196,48,.4)}
.wg-clock{margin-inline-start:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.wg-cdate{font:800 22px/1 var(--wg-hd);letter-spacing:.04em;white-space:nowrap;color:#fff}
.wg-dn{font:700 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--wg-gold);white-space:nowrap}
.wg-tx{display:flex;gap:6px}
.wg-play{background:var(--wg-gold)!important;border-color:var(--wg-gold)!important;color:#14120B!important;box-shadow:0 0 18px rgba(244,196,48,.35)}
.wg-spd{min-width:48px}

/* the order of battle */
.wg-orb{position:absolute;top:76px;left:10px;width:272px;padding:6px 10px 10px}
.wg-orb-t{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:0 4px;border:0;background:none;color:var(--wg-ink);font:800 12px/1 var(--body)!important;letter-spacing:.18em;text-transform:uppercase}
.wg-orb-t svg{color:var(--wg-gold)}
.wg-orb:not(.open) .wg-orb-b{display:none}
.wg-orb:not(.open){width:auto;padding:0 6px}
.wg-orb-sides{display:flex;justify-content:space-between;gap:10px;margin:2px 0 8px;font:800 12px/1.25 var(--body);letter-spacing:.04em}
.wg-ob{color:#9CC4FF}.wg-or{color:#FFB3A8;text-align:end}
.wg-orow{margin-top:7px}
.wg-on{display:block;font:700 12px/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--wg-dim);text-align:center}
.wg-obar{position:relative;display:grid;grid-template-columns:auto 1fr 1fr auto;align-items:center;gap:6px;margin-top:3px}
.wg-onb,.wg-onr{font:800 13px/1 var(--body);min-width:38px}
.wg-onb{color:#9CC4FF}.wg-onr{color:#FFB3A8;text-align:end}
.wg-ofb,.wg-ofr{position:relative;height:8px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.wg-ofb::after,.wg-ofr::after{content:"";position:absolute;top:0;bottom:0;width:calc(var(--f,1) * 100%);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.wg-ofb::after{right:0;background:linear-gradient(90deg,#1E5FD0,#5EA2FF);box-shadow:0 0 10px rgba(61,139,255,.6)}
.wg-ofr::after{left:0;background:linear-gradient(90deg,#FF6A55,#C42A1E);box-shadow:0 0 10px rgba(255,74,58,.55)}

/* the camera buttons and the minimap */
.wg-nav{position:absolute;right:420px;top:78px;display:flex;flex-direction:column;gap:6px;padding:6px}      /* 2 Nov 2026: under the top bar (the caption below grows and covered them at bottom:120px) */
.wg-mini{position:absolute;left:10px;bottom:120px;width:200px;height:170px;padding:4px;cursor:crosshair;overflow:hidden}
.wg-mini canvas{display:block;width:100%;height:100%;border-radius:8px}
.wg-credit{position:absolute;right:420px;bottom:10px;margin:0;padding:0 2px;font:600 12px/1.3 var(--body);color:rgba(233,238,244,.55);pointer-events:none;text-shadow:0 1px 2px #000;display:none}
.wg-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:10px 16px;border-radius:999px;background:var(--wg-glass);border:1px solid var(--wg-edge);font:700 13px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--wg-gold)}

/* the timeline and the intel feed */
.wg-tl{position:absolute;left:10px;right:420px;bottom:10px;padding:8px 12px 6px}
.wg-feed{min-height:46px}
.wg-feed p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-fh{display:flex;align-items:baseline;gap:10px;font:700 16px/1.35 var(--body);color:#fff}
.wg-fk{flex:none;padding:2px 7px;border-radius:4px;background:rgba(244,196,48,.16);border:1px solid rgba(244,196,48,.45);color:var(--wg-gold);font:800 12px/1.2 var(--body);letter-spacing:.18em}
#wg-fht{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-fl{font:500 13px/1.45 var(--body);color:#C6D0DA}
.wg-fl:nth-child(n+5){display:none}
.wg-fl i{display:inline-block;width:8px;height:8px;margin-inline-end:8px;border-radius:50%;vertical-align:1px;box-shadow:0 0 8px currentColor}
.wg-fl a{color:var(--wg-gold);text-decoration:none;font-weight:700}
.wg-fl a:hover{text-decoration:underline}
.wg-scrub{position:relative;height:40px;margin-top:4px;cursor:pointer;touch-action:none;outline:none}
.wg-scrub::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,rgba(244,196,48,.6),rgba(150,180,215,.25))}
.wg-scrub:focus-visible{box-shadow:0 0 0 2px var(--wg-gold);border-radius:6px}
.wg-ticks{position:absolute;left:8px;right:8px;top:6px;bottom:6px}
.wg-ticks i{position:absolute;bottom:50%;width:3px;margin-left:-1.5px;border-radius:2px;transform:translateY(50%);opacity:.85}
.wg-head{position:absolute;top:2px;bottom:2px;left:0;width:4px;margin-left:6px;border-radius:2px;background:var(--wg-gold);box-shadow:0 0 12px var(--wg-gold);transition:left .3s}

/* the panel: Simulate, Replay, Briefing room */
.wg-panel{position:absolute;top:76px;right:10px;bottom:10px;width:396px;display:flex;flex-direction:column;overflow:hidden;transition:width .25s}
.wg-panel.aar{width:min(540px,48%)}
.wg-panel.aar~.wg-tl,.wg-panel.aar~.wg-nav{right:calc(min(540px,48%) + 24px)}
.wg-app.aar .wg-nav{right:calc(min(540px,48%) + 24px)}.wg-app.aar .wg-legend{right:calc(min(540px,48%) + 80px)}
.wg-grab{display:none}
.wg-ph{display:flex;justify-content:flex-end;gap:6px;padding:8px 10px 0}
.wg-ph:empty{display:none}
.wg-ph .lpt-doors{display:flex;gap:6px;margin:0}
.wg-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:8px 10px 0;padding:4px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid var(--wg-edge)}
.wg-tab{min-height:40px;padding:0 6px;border:0;border-radius:7px;background:none;color:var(--wg-dim);font:800 13px/1.1 var(--body)!important;letter-spacing:.08em;text-transform:uppercase}
.wg-tab:hover{color:var(--wg-ink)}
.wg-tab[aria-selected="true"]{background:linear-gradient(180deg,rgba(244,196,48,.24),rgba(244,196,48,.1));color:var(--wg-gold);box-shadow:inset 0 0 0 1px rgba(244,196,48,.5)}
.wg-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px 76px;font-size:14px;line-height:1.45;scrollbar-width:thin;scrollbar-color:rgba(150,180,215,.3) transparent}
.wg-step{margin-bottom:14px}
.wg-step h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:800 13px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--wg-ink)}
.wg-step h3 i{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:4px;border:1px solid var(--wg-gold);color:var(--wg-gold);font:800 12px/1 var(--body);font-style:normal}
.wg-hint,.wg-fine{margin:6px 0 10px;color:var(--wg-dim);font-size:13px;line-height:1.45}
.wg-fine{font-size:12px}
.wg-lens{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wg-lb,.wg-chip,.wg-seg button,.wg-date,.wg-seat{min-height:40px;padding:6px 10px;border:1px solid var(--wg-edge);border-radius:8px;background:rgba(255,255,255,.035);color:var(--wg-ink);font:700 13px/1.25 var(--body);text-align:start}
.wg-lb:hover,.wg-chip:hover,.wg-seg button:hover,.wg-date:hover,.wg-seat:hover{border-color:var(--wg-edge2);background:rgba(255,255,255,.07)}
.wg-lb[aria-checked="true"],.wg-seg button[aria-checked="true"],.wg-date[aria-pressed="true"],.wg-seat.on{border-color:var(--wg-gold);background:rgba(244,196,48,.14);color:#FFE7A0;box-shadow:0 0 14px rgba(244,196,48,.12)}
.wg-chip{display:inline-flex;align-items:center;margin:0 6px 6px 0}
.wg-presets{margin:10px 0 2px}
.wg-seated{display:flex;flex-wrap:wrap;gap:6px}
.wg-exs{padding:0;border:0;background:none;min-height:40px}
.wg-ex.wg-exs .wg-face b{font-size:13px}
.wg-lv{margin:0 0 10px}
.wg-lv>span{display:block;margin-bottom:5px;font:700 12px/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--wg-dim)}
.wg-seg{display:flex;flex-wrap:wrap;gap:6px}
.wg-seg button{flex:1 1 auto}
.wg-dates{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.wg-date{display:grid;gap:2px;min-width:0;white-space:normal;width:100%}
.wg-date b{font:800 14px/1.2 var(--body)}
.wg-date span{color:var(--wg-dim);font-weight:500;font-size:13px}
.wg-run{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:6px 0 4px;padding:0 16px;border:1px solid var(--wg-gold);border-radius:10px;background:linear-gradient(180deg,#FFD24A,#E8B21A);color:#14120B;font:800 15px/1.1 var(--body)!important;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 6px 24px rgba(244,196,48,.25),inset 0 1px 0 rgba(255,255,255,.4)}
.wg-run:hover{filter:brightness(1.06)}
.wg-run:disabled{filter:grayscale(.4) brightness(.8);cursor:progress}
.wg-run.on{background:rgba(244,196,48,.12);color:var(--wg-gold)}
.wg-pms{display:grid;gap:12px;margin-top:8px}
.wg-pm{display:grid;gap:4px;font-size:13px}
.wg-pm span{display:flex;justify-content:space-between;gap:8px;font-weight:700}
.wg-pm output{color:var(--wg-gold)}
.wg-pm small{color:var(--wg-dim);font-size:12px}
.wg-pmr{width:100%;min-height:40px;accent-color:var(--wg-gold)}
.wg-mk{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.wg-mk li{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.035);border:1px solid var(--wg-edge);font-size:13px}
.wg-mk b{font:800 18px/1 var(--wg-hd);color:var(--wg-gold);min-width:46px}
.wg-mk a,.wg-bet a,.wg-fine a,.wg-place a,.wg-bf a{color:var(--wg-gold)}
.wg-fine a{display:inline-flex;align-items:center;min-height:40px}

/* the briefing room */
.wg-room{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wg-room li{position:relative;display:flex;flex-direction:column;border:1px solid var(--wg-edge);border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));overflow:hidden}
.wg-room li.on{border-color:rgba(244,196,48,.6);box-shadow:0 0 0 1px rgba(244,196,48,.25),0 0 18px rgba(244,196,48,.12)}
.wg-room li::before{content:"";position:absolute;left:6px;top:6px;width:10px;height:10px;border-left:2px solid var(--wg-gold);border-top:2px solid var(--wg-gold);opacity:.7;z-index:1;pointer-events:none}
.wg-ex{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:0;background:none;text-align:start;color:var(--wg-ink)}
.wg-ex .wg-face{width:100%;height:auto;aspect-ratio:4/3;border-radius:0}
.wg-exn{display:grid;gap:3px;padding:8px 9px 6px}
.wg-exn b{font:800 14px/1.2 var(--body)}
.wg-exn>span:not(.wg-lean){color:var(--wg-dim);font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wg-seat{margin:0 8px 8px;text-align:center;justify-content:center}
.wg-face{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#1B2633,#0D131B);border:1px solid var(--wg-edge)}
.wg-face img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;filter:saturate(.85) contrast(1.05)}
.wg-face b{font:800 16px/1 var(--wg-hd);color:var(--wg-gold);letter-spacing:.06em}
.wg-face.org b{color:#9CC4FF}
.wg-face.tiny{width:40px;height:40px;border-radius:50%}
.wg-face.big{width:132px;height:164px;border-radius:6px}
.wg-ex .wg-face b{font-size:30px}
.wg-lean{justify-self:start;display:inline-block;padding:2px 7px;border-radius:4px;font:800 12px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.06);color:var(--wg-dim);border:1px solid var(--wg-edge)}
.wg-lean.l-hawk,.wg-lean.l-optimist{color:#FFB3A8;border-color:rgba(255,74,58,.45);background:rgba(255,74,58,.1)}
.wg-lean.l-dove,.wg-lean.l-skeptic,.wg-lean.l-pessimist{color:#9CC4FF;border-color:rgba(61,139,255,.45);background:rgba(61,139,255,.1)}
.wg-lean.l-realist{color:#E8DC82;border-color:rgba(232,220,130,.4);background:rgba(232,220,130,.08)}

/* replay */
.wg-hist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wg-hb{display:grid;gap:4px;width:100%;min-height:40px;padding:10px 12px;border:1px solid var(--wg-edge);border-radius:10px;background:linear-gradient(90deg,rgba(255,74,58,.08),rgba(255,255,255,.02) 40%);text-align:start;color:var(--wg-ink)}
.wg-hb:hover{border-color:var(--wg-edge2)}
.wg-hb.on{border-color:var(--wg-gold);background:linear-gradient(90deg,rgba(244,196,48,.18),rgba(255,255,255,.02) 60%)}
.wg-hb b{font:800 15px/1.2 var(--body)}
.wg-hb .num{color:var(--wg-gold);font-size:12px;font-weight:700;letter-spacing:.04em}
.wg-ops{color:var(--wg-dim);font-size:12px;line-height:1.35}
.wg-now{margin-bottom:14px;padding:12px;border-radius:10px;border:1px solid rgba(244,196,48,.4);background:rgba(244,196,48,.06)}
.wg-now h3{margin:4px 0 2px;font:800 20px/1.1 var(--wg-hd);letter-spacing:.02em}
.wg-sum{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0 0}
.wg-sum div{padding:8px 9px;border-radius:8px;background:rgba(0,0,0,.28);border:1px solid var(--wg-edge)}
.wg-sum dt{font:700 12px/1.3 var(--body);color:var(--wg-dim)}
.wg-sum dd{margin:3px 0 0;font:800 16px/1.2 var(--wg-hd);letter-spacing:.02em;color:#fff}
.wg-res{margin:10px 0 0;font-size:13px}
.wg-res:empty{display:none}

/* the after-action report */
.wg-aar-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wg-aar-h .wg-chip{margin:0}
.wg-big{margin:8px 0 12px;font:800 22px/1.2 var(--wg-hd);letter-spacing:.02em}
.wg-ocs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wg-oc{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;padding:10px;border-radius:10px;border:1px solid var(--wg-edge);background:rgba(0,0,0,.25)}
.wg-oc.top{border-color:rgba(244,196,48,.55);box-shadow:inset 0 0 24px rgba(244,196,48,.08)}
.wg-oc-g{position:relative;width:84px;height:84px}
.wg-oc-g b{position:absolute;inset:0;display:grid;place-items:center;font:800 22px/1 var(--wg-hd)}
.wg-gauge{width:84px;height:84px;transform:rotate(-90deg)}
.wg-g0{fill:none;stroke:rgba(255,255,255,.08);stroke-width:7}
.wg-g1{fill:none;stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 4px currentColor)}
.wg-oc-t h4{margin:0;font:800 15px/1.2 var(--body)}
.wg-oc-t>p{margin:2px 0 0;color:var(--wg-dim);font-size:13px}
.wg-bet{margin:8px 0 0;padding:7px 9px;border-radius:8px;background:rgba(61,139,255,.08);border:1px solid rgba(61,139,255,.3);font-size:13px;line-height:1.4}
.wg-bet>span{font-weight:700}
.wg-bet b{font:800 15px/1 var(--wg-hd)}
.wg-bet b.up{color:#7EE2A8}.wg-bet b.dn{color:#FF9A8D}
.wg-bet small{display:block;margin-top:3px;color:var(--wg-dim);font-size:12px}
.wg-start{margin:10px 0 0}
.wg-aar-b{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin:12px 0}
.wg-aar-b .wg-run,.wg-aar-b .wg-chip{margin:0}
.wg-body h4{margin:16px 0 6px;font:800 12px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--wg-gold)}
.wg-calls{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wg-calls li{display:flex;gap:10px;align-items:center;font-size:13px}
.wg-calls em{font-style:normal;font-weight:800}
.wg-share{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.wg-share .wg-run{flex:1 1 200px;margin:0}
.wg-open{margin-top:6px}

/* the briefing, over the board */
.wg-bf{position:absolute;z-index:6;left:10px;top:76px;bottom:10px;width:min(470px,calc(100% - 440px));padding:0;overflow:hidden;border-color:rgba(244,196,48,.35);background:linear-gradient(160deg,rgba(9,14,22,.94),rgba(6,9,14,.88))}
.wg-bf::before,.wg-bf::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--wg-gold);pointer-events:none}
.wg-bf::before{left:8px;top:8px;border-right:0;border-bottom:0}.wg-bf::after{right:8px;bottom:8px;border-left:0;border-top:0}
.wg-bf-in{height:100%;overflow-y:auto;padding:16px 18px 18px;font-size:14px;line-height:1.5}
.wg-bf-top{display:flex;justify-content:space-between;align-items:center}
.wg-bf-who{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:end;margin:12px 0}
.wg-bf-pic{position:relative}
.wg-bf-pic i{position:absolute;inset:0;border-radius:6px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),linear-gradient(to top,rgba(244,196,48,.18),transparent 40%);pointer-events:none;box-shadow:inset 0 0 0 1px rgba(244,196,48,.4)}
.wg-bf h3{margin:0;font:800 28px/1 var(--wg-hd);letter-spacing:.02em;text-transform:uppercase}
.wg-bf-r{margin:6px 0 8px;color:var(--wg-dim);font-size:13px}
.wg-bf-q{margin:0 0 12px;padding:10px 14px;border-inline-start:3px solid var(--wg-gold);background:rgba(244,196,48,.06);font:600 16px/1.45 var(--body);color:#fff;min-height:1.5em}
.wg-bf-l{margin:0;padding-inline-start:20px;display:grid;gap:6px}
.wg-bf-l li{color:#BAC6D2;transition:color .3s}
.wg-bf-l li.on{color:#fff}
.wg-bf-l li.on::marker{color:var(--wg-gold)}
.wg-bf-own{margin:12px 0;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.3);font-size:13px}
.wg-bf h4{margin:14px 0 6px;font:800 12px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--wg-gold)}
.wg-bf-nums,.wg-bf-src{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.wg-bf-nums li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline}
.wg-bf-nums b{color:var(--wg-gold);font:800 16px/1 var(--wg-hd)}
.wg-bf-nums small{display:block;color:var(--wg-dim);font-size:12px}
.wg-bf-b{position:sticky;bottom:-18px;display:grid;grid-template-columns:40px 1fr 40px;gap:8px;margin:14px -18px -18px;padding:10px 18px;background:rgba(6,9,14,.96);border-top:1px solid var(--wg-edge)}
.wg-bf-b .wg-run{margin:0}

/* a place: its dossier */
.wg-sheet{position:absolute;z-index:7;left:296px;top:76px;width:min(420px,calc(100% - 740px))}
.wg-sheet[hidden]{display:none}
.wg-sh-in{position:relative;max-height:min(560px,62vh);overflow-y:auto;padding:18px 18px 16px;border-radius:14px;background:linear-gradient(160deg,rgba(13,20,30,.96),rgba(8,12,18,.94));border:1px solid rgba(244,196,48,.38);color:var(--wg-ink);box-shadow:0 8px 16px rgba(0,0,0,.5);font-size:14px;line-height:1.5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wg-sh-in h3{margin:4px 0 6px;font:800 26px/1.05 var(--wg-hd);letter-spacing:.02em;text-transform:uppercase}
.wg-sh-in h4{margin:14px 0 6px;font:800 12px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--wg-gold)}
.wg-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:1px solid var(--wg-edge);border-radius:9px;background:rgba(255,255,255,.04);color:var(--wg-ink);font:700 22px/1 var(--body);cursor:pointer}
.wg-pips{display:flex;gap:4px;margin:2px 0 10px}
.wg-pips i{width:18px;height:5px;border-radius:2px;background:rgba(255,255,255,.12)}
.wg-pips i.on{background:var(--wg-gold);box-shadow:0 0 6px rgba(244,196,48,.6)}
.wg-dim{color:var(--wg-dim)}
.wg-fs{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.wg-fs li{padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--wg-edge)}

/* the page below the board */
.wg-below{padding-top:var(--s5,28px);padding-bottom:var(--s6,36px);color:var(--ink)}
@media(max-width:759px){.wg-below{padding-top:var(--s4,16px);padding-bottom:var(--s4,16px)}}      /* the page question stays in the first two phone screens (phone-test.html), 1 Nov 2026 */
.wg-crumb{margin:var(--s3,12px) 0 0;font:700 .9rem/1.3 var(--body);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wg-crumb>a{color:var(--field);display:inline-flex;align-items:center;min-height:40px}
.wg-sibs{display:inline-flex;flex-wrap:wrap;gap:6px}
.wg-sib{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);color:var(--dim);text-decoration:none;letter-spacing:.04em}
.wg-sib:hover{border-color:var(--field);color:var(--ink)}
.wg h1,.wgi h1{font-size:clamp(2.1rem,8vw,4rem);line-height:.92}
.wg-lede{margin-top:var(--s3,12px);color:var(--dim);max-width:62ch;font-size:1.02rem}
.wg-below .lpc{margin:18px 0}
.wg-how,.wg-wars,.wg-xs{margin-top:var(--s3,12px);border-top:1px solid var(--line);padding-top:var(--s3,12px)}
.wg-how summary,.wg-wars summary,.wg-xs summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-weight:800}
.wg-how ol,.wg-how ul,.wg-wars ul,.wg-xs ul{padding-inline-start:20px;color:var(--dim);max-width:72ch}
.wg-how li,.wg-wars li,.wg-xs li{margin:6px 0}
.wg-wars p,.wg-xs p{margin:4px 0 0}
.wg-xs-w{color:var(--dim);font-size:.92em}
.wg-how h4{margin:16px 0 6px}
.wg-how-p{font-size:.92rem}
.wg-foot{margin-top:var(--s4,16px);color:var(--dim);font-size:.9rem;max-width:72ch}

/* a phone: the top bar is a strip, the panel is a bottom sheet with a handle, the timeline sits on it */
@media(max-width:759px){
  .wg-top{top:0;left:0;right:0;height:52px;border-radius:0;border-width:0 0 1px;gap:6px;padding:0 6px 0 10px}
  .wg-bn,.wg-ths{display:none}
  .wg-thn{font-size:19px}
  .wg-cdate{font-size:16px}
  .wg-tx{gap:4px}
  .wg-spd{min-width:40px}
  .wg-orb{top:60px;left:8px;width:min(300px,calc(100% - 70px));z-index:2}
  .wg-orb:not(.open){width:auto}
  .wg-nav{right:8px;top:60px;bottom:auto;padding:4px;gap:4px}
  .wg-mini,.wg-credit{display:none}
  .wg-panel{left:0;right:0;top:auto;bottom:0;width:auto;height:46%;border-radius:16px 16px 0 0;border-width:1px 0 0;transition:height .25s}
  .wg-panel.aar{width:auto}
  .wg-panel.aar~.wg-tl{right:8px}.wg-panel.aar~.wg-nav{right:8px}.wg-app.aar .wg-nav{right:8px}.wg-app.aar .wg-legend{right:60px}
  .wg-panel[data-sheet="min"]{height:178px}
  .wg-panel[data-sheet="max"]{height:calc(100% - 56px)}
  .wg-grab{display:grid;place-items:center;width:52%;height:40px;flex:none;padding:0;border:0;background:none;touch-action:none;cursor:grab}
  .wg-grab i{width:44px;height:5px;border-radius:3px;background:rgba(233,238,244,.4)}
  .wg-ph{position:absolute;inset-inline-end:8px;top:0;padding:0}      /* the doors sit at the far end from the handle, in Persian too */
  .wg-ph .lpt-doors{height:40px;align-items:center}
  .wg-tabs{margin-top:0}
  .wg-tl{left:8px;right:8px;bottom:calc(46% + 8px);padding:6px 10px 2px}
  .wg-panel[data-sheet="min"]~.wg-tl{bottom:186px}
  .wg-panel[data-sheet="max"]~.wg-tl{display:none}
  .wg-feed{min-height:24px}
  .wg-fl{display:none}
  .wg-fh{font-size:14px}
  .wg-scrub{height:40px}
  .wg-room{grid-template-columns:1fr 1fr}
  .wg-bf{inset:52px 0 80px 0;width:auto;border-radius:0 0 14px 14px;z-index:8}      /* 80px: the site's live-show bubble sits under it, never on Seat */
  .wg-bf-who{grid-template-columns:96px 1fr;gap:12px}
  .wg-face.big{width:96px;height:120px}
  .wg-bf h3{font-size:22px}
  .wg-sheet{left:0;right:0;top:auto;bottom:0;width:auto;z-index:9}
  .wg-sh-in{max-height:62vh;border-radius:16px 16px 0 0;padding-bottom:84px}
}
@media(max-width:380px){.wg-thn{font-size:17px}.wg-cdate{font-size:15px}}
@media(min-width:760px) and (max-width:1099px){
  .wg-panel{width:340px}.wg-tl{right:360px}.wg-nav{right:360px}.wg-orb{width:236px}.wg-mini{display:none}
  .wg-sheet{left:10px;width:min(400px,calc(100% - 380px));z-index:7}
  .wg-bf{width:min(440px,calc(100% - 370px))}
}
@media(prefers-reduced-motion:reduce){.wg-ofb::after,.wg-ofr::after,.wg-head,.wg-panel,.wg-bf-l li{transition:none}}

/* the full screen (the button) */
.wg.wg-full{position:fixed;inset:0;z-index:50;overflow:hidden}
.wg.wg-full .wg-app{height:100vh!important}
.wg.wg-full .wg-below{display:none}

/* THE STREAM VIEW (build/stream.js): the board is the screen, the interface zoomed to it, every word 20px+ at 1920 x 1080 */
html.lp-stream .wg{width:100vw;height:100vh;padding:0;overflow:hidden}
html.lp-stream .wg .wg-app{height:100vh!important;min-height:0}
html.lp-stream .wg .wg-below{display:none}
html.lp-stream .wg .wg-top,html.lp-stream .wg .wg-orb,html.lp-stream .wg .wg-panel,html.lp-stream .wg .wg-tl,html.lp-stream .wg .wg-bf,html.lp-stream .wg .wg-load,html.lp-stream .wg .wg-sheet{zoom:var(--lps-z,1)}
html.lp-stream .wg .wg-nav,html.lp-stream .wg .wg-mini,html.lp-stream .wg .wg-credit{display:none}
html.lp-stream .wg .wg-top{right:190px}
html.lp-stream .wg .wg-orb{top:76px}
html.lp-stream .wg .wg-panel{width:360px;top:76px}
html.lp-stream .wg .wg-tl{right:380px}
html.lp-stream .wg .wg-bf{width:min(470px,calc(100% - 400px))}
html.lp-stream .wg .wg-tag{font-size:calc(14px * var(--lps-z,1));line-height:calc(20px * var(--lps-z,1))}
html.lp-stream .wg .wg-tag.cap{font-size:calc(15px * var(--lps-z,1))}
html.lp-stream .wg .wg-k,html.lp-stream .wg .wg-bn,html.lp-stream .wg .wg-dn,html.lp-stream .wg .wg-on,html.lp-stream .wg .wg-fine,html.lp-stream .wg .wg-hint,html.lp-stream .wg .wg-fl,html.lp-stream .wg .wg-orb-sides,html.lp-stream .wg .wg-lv>span,html.lp-stream .wg .wg-ops,html.lp-stream .wg .wg-sum dt,html.lp-stream .wg .wg-date span,html.lp-stream .wg .wg-exn>span,html.lp-stream .wg .wg-lean,html.lp-stream .wg .wg-fk,html.lp-stream .wg .wg-bet small,html.lp-stream .wg .wg-pm small,html.lp-stream .wg .wg-hb .num,html.lp-stream .wg .wg-face b,html.lp-stream .wg .wg-onb,html.lp-stream .wg .wg-onr,html.lp-stream .wg .wg-mk li,html.lp-stream .wg .wg-step h3 i,html.lp-stream .wg .wg-orb-t,html.lp-stream .wg .wg-tab,html.lp-stream .wg .wg-lb,html.lp-stream .wg .wg-chip,html.lp-stream .wg .wg-seg button,html.lp-stream .wg .wg-seat,html.lp-stream .wg .wg-calls li,html.lp-stream .wg .wg-oc-t>p,html.lp-stream .wg .wg-bet,html.lp-stream .wg .wg-body,html.lp-stream .wg .wg-bf-in,html.lp-stream .wg .wg-bf-r,html.lp-stream .wg .wg-bf-own,html.lp-stream .wg .wg-bf-nums,html.lp-stream .wg .wg-bf-src,html.lp-stream .wg .wg-step h3,html.lp-stream .wg .wg-body h4,html.lp-stream .wg .wg-bf h4{font-size:14px!important}
html.lp-stream .wg .wg-fh{font-size:17px}
html.lp-stream .wg .lpt-doors button{font-size:14px}

/* the index: the three theatres */
.wgi{padding:var(--s5,28px) 0 var(--s6,36px)}
.wgi .wg-lede{margin-bottom:var(--s4,16px)}
.wgi-head{padding-bottom:var(--s3,12px)}.wgi-cards{padding-top:var(--s4,16px)}
.wgi-l{list-style:none;margin:0;padding:0;display:grid;gap:16px}
@media(min-width:760px){.wgi-l{grid-template-columns:repeat(3,1fr)}}
.wgi-l a{position:relative;display:flex;flex-direction:column;height:100%;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#080B10;color:var(--ink);text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}
.wgi-l a:hover{transform:translateY(-3px);border-color:rgba(244,196,48,.6);box-shadow:0 12px 24px rgba(0,0,0,.5)}
.wgi-pic{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.wgi-pic img{width:100%;height:100%;object-fit:cover;display:block}
.wgi-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#080B10,transparent 55%)}
.wgi-k{display:block;margin:-30px 16px 0;position:relative;font:800 12px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--field)}
.wgi-l b{position:relative;display:block;margin:6px 16px 0;font:800 1.5rem/1.05 var(--display);text-transform:uppercase}
.wgi-p{display:block;margin:8px 16px 0;color:var(--dim);font-size:.95rem}
.wgi-m{display:block;margin:10px 16px 0;color:var(--dim);font-size:.82rem}
.wgi-go{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:14px 16px 16px;margin-top:auto;padding:0 16px;border-radius:10px;background:var(--field);color:var(--on-field);font:800 .9rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase}

/* ---------------------------------------------------------------- THE PLAN, WATCH, COMPARE (1 November 2026, TOOLS.md "The second rebuild") */
.wg-tabs{grid-template-columns:repeat(4,1fr)}
.wg-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 0 12px;padding:0;list-style:none}
.wg-steps button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;min-height:52px;padding:4px 2px;border:1px solid var(--wg-edge);border-radius:9px;background:rgba(255,255,255,.03);color:var(--wg-dim);font:800 12px/1.1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.wg-steps button i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid currentColor;font:800 12px/1 var(--body);font-style:normal}
.wg-steps button[aria-selected="true"]{color:#14120B;background:linear-gradient(180deg,#FFD24A,#E8B21A);border-color:var(--wg-gold);box-shadow:0 0 18px rgba(244,196,48,.28)}
.wg-steps button[aria-selected="true"] i{border-color:#14120B}
.wg-stepb h4,.wg-body h4{margin:14px 0 8px;font:800 12px/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--wg-gold)}
.wg-who{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:6px 10px;border-radius:10px;background:rgba(244,196,48,.08);border:1px solid rgba(244,196,48,.35);font:700 13px/1.3 var(--body);color:#FFE7A0}
.wg-warn{margin:4px 0 10px;padding:8px 10px;border-radius:8px;background:rgba(255,90,72,.1);border:1px solid rgba(255,90,72,.4);color:#FFB4A8;font:700 13px/1.4 var(--body)}
.wg-foot2{position:sticky;bottom:-76px;z-index:2;margin:14px -12px 0;padding:10px 12px 12px;background:rgba(9,13,19,.97);border-top:1px solid var(--wg-edge);display:flex;flex-wrap:wrap;gap:6px}
.wg-foot2 .wg-run{flex:1 1 auto;margin:0;min-height:44px;font-size:13px!important;letter-spacing:.08em}
.wg-foot2{flex-wrap:nowrap;align-items:stretch}
.wg-foot2 .wg-chip{flex:0 1 auto;font-size:12px;white-space:normal}
.wg-next{margin-top:12px!important}
.wg-foot2 .wg-chip{margin:0}
.wg-fcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.wg-fc{position:relative;display:flex;flex-direction:column;border:1px solid var(--wg-edge);border-radius:10px;background:linear-gradient(180deg,rgba(26,36,48,.9),rgba(10,14,20,.95));overflow:hidden;transition:border-color .15s,opacity .15s}
.wg-fc.t-blue.on{border-color:rgba(61,139,255,.75);box-shadow:0 0 0 1px rgba(61,139,255,.35),0 6px 18px rgba(61,139,255,.12)}
.wg-fc.off{opacity:.55}
.wg-fc.t-red{border-color:rgba(255,74,58,.35)}
.wg-fc-pic{display:block;aspect-ratio:4/3;background:radial-gradient(120% 90% at 50% 35%,rgba(140,170,210,.22),rgba(0,0,0,0) 70%),linear-gradient(180deg,#1b2532,#0b1016);border-bottom:1px solid var(--wg-edge)}
.wg-fc-pic img{display:block;width:100%;height:100%;object-fit:contain}
.wg-fc-pic img.glyph{object-fit:none;opacity:.8}
.wg-fc-t{display:flex;flex-direction:column;gap:2px;padding:7px 8px 8px}
.wg-fc-t b{font:700 13px/1.25 var(--body);color:var(--wg-ink)}
.wg-fc-n{font:800 18px/1.1 var(--wg-hd);color:#fff;letter-spacing:.03em}
.wg-fc-w{font:700 12px/1.3 var(--body);color:#8FE3A8}
.wg-fc-w.far{color:#FFB25A}
.wg-fc-tg{margin:0 8px 8px;min-height:40px;border-radius:8px;border:1px solid var(--wg-edge2);background:rgba(255,255,255,.04);color:var(--wg-ink);font:800 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.wg-fc-tg[aria-pressed="true"]{background:rgba(61,139,255,.22);border-color:#3D8BFF;color:#CFE2FF}
.wg-fc-i{position:absolute;top:6px;right:6px;width:40px;height:40px;border-radius:50%;border:1px solid var(--wg-edge2);background:rgba(5,7,10,.7);color:var(--wg-ink);font:italic 800 15px/1 Georgia,serif}
.wg-tgs{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.wg-tg{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:10px;border:1px solid var(--wg-edge);border-radius:10px;background:rgba(255,255,255,.025)}
.wg-tg.on{border-color:rgba(244,196,48,.45);background:linear-gradient(90deg,rgba(244,196,48,.08),rgba(255,255,255,.02))}
.wg-tg-r{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--wg-edge2);font:800 18px/1 var(--wg-hd);color:var(--wg-gold)}
.wg-tg-t b{display:block;font:800 14px/1.3 var(--body);color:#fff}
.wg-tg-t b .num{float:right;color:var(--wg-gold)}
.wg-tg-t p{margin:4px 0 0;font-size:13px;line-height:1.4;color:#C6D0DA}
.wg-tg-t p i{font:800 12px/1 var(--body);font-style:normal;letter-spacing:.12em;text-transform:uppercase;margin-inline-end:4px}
.wg-buys i{color:#8FE3A8}.wg-costs i{color:#FF9B8A}
.wg-tg-b{grid-column:1/-1;display:flex;gap:6px;justify-content:flex-end}
.wg-tg-b .wg-chip{margin:0}
.wg-tg-b .wg-ib:disabled{opacity:.3}
.wg-advs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.wg-adv{display:flex;flex-direction:column;border:1px solid var(--wg-edge);border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#141c26,#0a0e14)}
.wg-adv.cur{border-color:var(--wg-gold);box-shadow:0 0 0 1px rgba(244,196,48,.4),0 8px 24px rgba(244,196,48,.12)}
.wg-adv-p{display:block;padding:0;border:0;background:none;cursor:pointer}
.wg-face.card{width:100%;height:auto;aspect-ratio:4/5;border-radius:0;border:0;border-bottom:2px solid var(--lc,#B9B7A6)}
.wg-face.card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,7,10,.75),transparent 45%),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);pointer-events:none}
.wg-face .wg-bust{display:block;width:100%;height:100%}
.wg-adv-t{display:flex;flex-direction:column;gap:3px;padding:8px 9px 4px}
.wg-adv-t b{font:800 14px/1.2 var(--body);color:#fff}
.wg-adv-t>span{font-size:12px;line-height:1.35;color:var(--wg-dim)}
.wg-adv-b{display:flex;flex-wrap:wrap;gap:6px;padding:4px 9px 10px;margin-top:auto}
.wg-adv-b .wg-chip{margin:0;flex:1 1 auto;justify-content:center}
.wg-use{background:rgba(244,196,48,.14)!important;border-color:rgba(244,196,48,.6)!important;color:#FFE7A0!important}
.wg-chip.on{border-color:var(--wg-gold);background:rgba(244,196,48,.14);color:#FFE7A0}
.wg-bf-plan{margin:12px 0;padding:10px 12px;border-radius:10px;border:1px solid rgba(244,196,48,.4);background:rgba(244,196,48,.06)}
.wg-bf-plan p{margin:4px 0}
.wg-why{font:600 13px/1.4 var(--body)!important;color:#FFE7A0!important;white-space:normal!important}
.wg-cmp{overflow-x:auto;margin:10px -12px;padding:0 12px}
.wg-cmp table{border-collapse:separate;border-spacing:0;min-width:100%;font-size:13px}
.wg-cmp th,.wg-cmp td{padding:7px 8px;border-bottom:1px solid var(--wg-edge);text-align:start;vertical-align:top}
.wg-cmp thead th{min-width:130px;vertical-align:bottom}
.wg-cmp thead th b{display:block;font:800 14px/1.2 var(--body);color:#fff}
.wg-cmp thead th small{display:block;margin:3px 0 6px;color:var(--wg-dim);font-weight:500;line-height:1.35}
.wg-cmp tbody th{font-weight:700;color:var(--wg-dim);min-width:120px}
.wg-cmp td{position:relative;white-space:nowrap;font-weight:700}
.wg-cmp .best{background:rgba(244,196,48,.08)}
.wg-bestk{display:inline-block;margin-bottom:4px;padding:2px 7px;border-radius:999px;background:var(--wg-gold);color:#14120B;font:800 12px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase}
.wg-bar{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--f) * 100%);background:var(--c)}
.wg-cmp-b{display:flex;gap:6px;align-items:center}
.wg-cmp-b .wg-chip{margin:0}
.wg-unit-pic{display:block;width:100%;max-width:320px;height:auto;margin:6px auto 10px;border-radius:10px;background:radial-gradient(120% 90% at 50% 35%,rgba(140,170,210,.22),rgba(0,0,0,0) 70%),#0e141c}
.wg-lnk{display:inline-flex;align-items:center;padding:0;border:0;background:none;color:var(--wg-gold);font:inherit;text-decoration:underline;cursor:pointer;min-height:40px}
@media(max-width:759px){
  .wg-fcs,.wg-advs{gap:6px}
  .wg-steps button{min-height:48px;font-size:12px;letter-spacing:.02em}      /* 12px is the phone floor (phone test) */
  .wg-tab{font-size:12px!important;letter-spacing:.04em}
}
html.lp-stream .wg .wg-steps *,html.lp-stream .wg .wg-stepb *,html.lp-stream .wg .wg-foot2 *,html.lp-stream .wg .wg-next,html.lp-stream .wg .wg-why,html.lp-stream .wg .wg-cmp *,html.lp-stream .wg .wg-who *,html.lp-stream .wg .wg-bf-plan *{font-size:14px!important}      /* the stream view: nothing under 20px at 1920 (phone-test, the tool tours and the stream view) */
.wg-mini.wg-hid{display:none}      /* it steps aside when the forces panel reaches down to it (layout() in wargame.js) */
.wg-feed .wg-fh{white-space:normal;align-items:flex-start}#wg-fht{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip}      /* the caption wraps to two lines rather than cutting a word */

/* ---------------------------------------------------------------- NOW, SIMULATE, REPLAY (1 November 2026; wargame.js "NOW")
   Armin: "the default needs to be that I could see where everything stands right now ... with live updates". The switch at the
   top (on a phone, at the top of the sheet, under the thumb); the live panel: how tense it is, the ticker newest first, the
   situation; the breaking banner; the heat's names on the map; the goal, the grade and the cost; the Best plan; the guide. */
.wg-modes{display:flex;gap:2px;margin-inline-start:10px;padding:3px;border-radius:11px;background:rgba(0,0,0,.42);border:1px solid var(--wg-edge)}
.wg-mode{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border:0;border-radius:8px;background:none;color:var(--wg-dim);font:800 13px/1 var(--body)!important;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:background .15s,color .15s}
.wg-mode svg{width:17px;height:17px;flex:none}
.wg-mode:hover{color:var(--wg-ink);background:rgba(255,255,255,.05)}
.wg-mode[aria-selected="true"]{color:#14120B;background:linear-gradient(180deg,#FFD24A,#E8B21A);box-shadow:0 2px 10px rgba(244,196,48,.3)}
.wg-mode[data-mode="now"][aria-selected="true"] svg circle{animation:wgPulse 1.6s ease-in-out infinite}
.wg-mode.hint:not([aria-selected="true"]){color:#FFE7A0;box-shadow:inset 0 0 0 1px rgba(244,196,48,.7),0 0 16px rgba(244,196,48,.35)}
@keyframes wgPulse{0%,100%{opacity:1}50%{opacity:.35}}
.wg-modes-s{display:none}
.wg-app:not(.m-sim) .wg-tabs{display:none}
.wg-app.m-now .wg-play,.wg-app.m-now .wg-spd,.wg-app.m-now .wg-scrub,.wg-app.m-now .wg-orb{display:none}
.wg-app.m-now .wg-feed{min-height:0}
/* the live panel */
.wg-lv{display:flex;align-items:center;gap:10px;margin:2px 0 12px;font:700 13px/1.2 var(--body);color:var(--wg-dim)}
.wg-lv-on,.wg-lv-off{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border-radius:999px;font:800 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.wg-lv-on{color:#FFD9D4;background:rgba(255,59,48,.16);box-shadow:inset 0 0 0 1px rgba(255,90,72,.55)}
.wg-lv-on i{width:8px;height:8px;border-radius:50%;background:#FF3B30;box-shadow:0 0 10px #FF3B30;animation:wgPulse 1.4s ease-in-out infinite}
.wg-lv-off{color:#FFD58A;background:rgba(244,180,48,.12);box-shadow:inset 0 0 0 1px rgba(244,180,48,.45)}
.wg-lv-off i{width:8px;height:8px;border-radius:50%;background:#C9A23A}
.wg-thr{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;margin:0 0 6px;padding:10px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--wg-edge)}
.wg-thr-d{position:relative;width:96px;height:58px}
.wg-dial{display:block;width:96px;height:56px}
.wg-dial0{fill:none;stroke:rgba(255,255,255,.1);stroke-width:9;stroke-linecap:round}
.wg-dial1{fill:none;stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.wg-thr-d b{position:absolute;left:0;right:0;bottom:-2px;text-align:center;font:800 26px/1 var(--wg-hd)}
.wg-thr-t{display:grid;gap:3px;min-width:0}
.wg-thr-t>b{font:800 26px/1 var(--wg-hd);letter-spacing:.04em;text-transform:uppercase}
.wg-thr-x{font:700 12px/1.3 var(--body);color:var(--wg-dim)}
.wg-thr-x.up{color:#FF9A8D}.wg-thr-x.dn{color:#8FE3A8}
.wg-tick{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wg-tk{position:relative;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid var(--wg-edge);transition:border-color .15s,background .15s}
.wg-tk:hover{border-color:var(--wg-edge2);background:rgba(255,255,255,.06)}
.wg-tk.on{border-color:var(--kc);background:rgba(255,255,255,.07);box-shadow:0 0 0 1px var(--kc),0 4px 16px rgba(0,0,0,.35)}
.wg-tk-b{display:grid;gap:4px;width:100%;min-height:44px;padding:9px 11px 6px;border:0;background:none;color:var(--wg-ink);text-align:start;cursor:pointer}
.wg-tk-m{display:flex;align-items:center;gap:8px;min-width:0;font:700 12px/1.2 var(--body);color:var(--wg-dim)}
.wg-tk-m i{width:9px;height:9px;flex:none;border-radius:50%;background:var(--kc);box-shadow:0 0 8px var(--kc)}
.wg-tk.fresh .wg-tk-m i{animation:wgPulse 1.2s ease-in-out infinite}
.wg-tk-m b{color:var(--kc);letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.wg-tk-m span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#D5DCE4}
.wg-tk-m time{margin-inline-start:auto;flex:none}
.wg-tk-t{display:block;font:600 14px/1.38 var(--body);color:#F1F4F8;text-align:start;unicode-bidi:plaintext}      /* a headline in another language keeps its own direction on the Persian page */
.wg-tk-s{display:inline-flex;align-items:center;min-height:40px;margin:0 11px 6px;font:700 12px/1 var(--body);color:var(--wg-gold);text-decoration:none}
.wg-tk-s:hover{text-decoration:underline}
.wg-sit{margin:14px 0 6px;padding:11px 12px;border-radius:10px;background:rgba(0,0,0,.28);border:1px solid var(--wg-edge);font-size:13.5px;line-height:1.5;color:#D5DCE4}
.wg-sit p{margin:4px 0 0}
.wg-sit .wg-fine{margin:6px 0 0}
/* the breaking banner: calm, over the board, under the top bar */
.wg-brk{position:absolute;z-index:4;top:76px;left:calc((100% - 416px) / 2);transform:translateX(-50%);width:min(620px,calc(100% - 470px));display:flex;align-items:center;gap:10px;padding:6px 6px 6px 12px;border-radius:12px;background:rgba(18,8,9,.88);border:1px solid rgba(255,90,72,.45);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 32px rgba(255,59,48,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wg-brk[hidden]{display:none}
.wg-brk-k{display:inline-flex;align-items:center;gap:7px;flex:none;font:800 12px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:#FF8A7A}
.wg-brk-k i{width:8px;height:8px;border-radius:50%;background:#FF3B30;box-shadow:0 0 10px #FF3B30;animation:wgPulse 1.4s ease-in-out infinite}
.wg-brk-t{display:grid;gap:2px;flex:1;min-width:0;min-height:40px;padding:2px 0;border:0;background:none;color:#fff;text-align:start;cursor:pointer}
.wg-brk-t b{font:700 15px/1.3 var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;unicode-bidi:plaintext}
.wg-brk-t span{font:600 12px/1.2 var(--body);color:#E8C3BE}
.wg-brk-s{flex:none;font:700 12px/1 var(--body);color:var(--wg-gold);text-decoration:none;white-space:nowrap}
.wg-brk-x{flex:none}
/* the names of the hot places on the map */
.wg-tag.hot{padding:2px 8px;border-radius:999px;font:800 12px/16px var(--body);letter-spacing:.03em;color:#fff;background:rgba(8,10,14,.78);box-shadow:inset 0 0 0 1px var(--kc,#FF6A3D),0 0 14px var(--kc,#FF6A3D);text-shadow:none}
/* the cost of the run on the board, as it plays */
.wg-cost{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:4px 0 0;font:700 12px/1.4 var(--body);color:var(--wg-dim)}
.wg-cost[hidden]{display:none}
.wg-cost b{color:var(--wg-gold);letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.wg-cost em{font-style:normal;color:#fff;font-weight:800}
.wg-cost i{font-style:normal;padding:1px 6px;border-radius:4px;background:rgba(255,255,255,.06);color:var(--wg-dim)}
/* the goal, the grade */
.wg-goal{margin:0 0 12px}
.wg-gls{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.wg-gb{min-height:40px;padding:6px 12px;border:1px solid var(--wg-edge);border-radius:999px;background:rgba(255,255,255,.035);color:var(--wg-ink);font:700 13px/1.2 var(--body)}
.wg-gb:hover{border-color:var(--wg-edge2)}
.wg-gb[aria-checked="true"]{border-color:var(--wg-gold);background:rgba(244,196,48,.16);color:#FFE7A0}
.wg-gw{margin:6px 0 0;color:var(--wg-dim);font-size:13px}
.wg-grade{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center;margin:10px 0 12px;padding:12px;border-radius:12px;background:radial-gradient(120% 140% at 0% 50%,color-mix(in srgb,var(--gc) 16%,transparent),transparent 60%),rgba(0,0,0,.25);border:1px solid color-mix(in srgb,var(--gc) 45%,transparent)}
.wg-grade-l{display:grid;place-items:center;align-content:center;width:76px;height:76px;border-radius:50%;box-shadow:inset 0 0 0 3px var(--gc),0 0 22px color-mix(in srgb,var(--gc) 40%,transparent)}
.wg-grade-l b{font:800 40px/1 var(--wg-hd);color:var(--gc)}
.wg-grade-l small{font:800 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--wg-dim)}
.wg-grade-t h4{margin:0 0 4px!important;font:800 18px/1.15 var(--body)!important;letter-spacing:0!important;text-transform:none!important;color:#fff!important}
.wg-grade-t p{margin:0;font-size:13.5px;line-height:1.45}
.wg-grade-t .num{color:var(--gc)}
/* the cost on both sides */
.wg-costs h4{display:flex;align-items:center;gap:8px}
.wg-est{padding:1px 7px;border-radius:4px;background:rgba(255,255,255,.07);color:var(--wg-dim);font:700 12px/1.4 var(--body);letter-spacing:.06em;text-transform:none}
.wg-ct{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.wg-ct th,.wg-ct td{padding:8px 8px;border-bottom:1px solid var(--wg-edge);text-align:start;vertical-align:top}
.wg-ct thead th{font:800 12px/1.3 var(--body);letter-spacing:.06em}
.wg-ct thead th.b{color:#9CC4FF}.wg-ct thead th.r{color:#FFB3A8}
.wg-ct tbody th{font-weight:700;color:var(--wg-dim);width:34%}
.wg-ct td{font-weight:800;color:#fff}
.wg-tobest{margin:10px 0 0!important;border-color:rgba(244,196,48,.5)!important;color:#FFE7A0!important}
/* the Best plan */
.wg-bsides{margin:0 0 10px}
.wg-prog{position:relative;height:10px;margin:18px 0 8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.wg-prog i{position:absolute;inset-inline-start:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#E8B21A,#FFD24A);box-shadow:0 0 14px rgba(244,196,48,.5);transition:width .2s}
.wg-bests{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.wg-bp{padding:12px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--wg-edge)}
.wg-bp:first-child{border-color:color-mix(in srgb,var(--gc) 55%,transparent);box-shadow:inset 0 0 30px color-mix(in srgb,var(--gc) 9%,transparent)}
.wg-bp-h{display:flex;align-items:center;gap:10px}
.wg-bp-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--wg-edge2);font:800 14px/1 var(--wg-hd);color:var(--wg-dim)}
.wg-bp-g{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:color-mix(in srgb,var(--gc) 18%,transparent);color:var(--gc);font:800 22px/1 var(--wg-hd)}
.wg-bp-p{margin-inline-start:auto;font:800 26px/1 var(--wg-hd);color:#fff}
.wg-bp-s{margin:8px 0 6px;color:#D5DCE4;font-size:13px;line-height:1.45}
.wg-drv{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:13px}
.wg-drv b{color:#8FE3A8;font:800 15px/1 var(--wg-hd)}
.wg-bp-b{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}
.wg-bp-b .wg-run,.wg-bp-b .wg-chip{margin:0}
.wg-xbars{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wg-xbars li{display:grid;grid-template-columns:40px minmax(0,1fr) 30% 44px;gap:8px;align-items:center;font-size:13px}
.wg-xb-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wg-xb-b{position:relative;height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.wg-xb-b i{position:absolute;inset-inline-start:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#3D8BFF,#7FB2FF)}
.wg-xbars b{text-align:end}
.wg-tsrc{display:inline-block;margin-top:3px;font:700 12px/1 var(--body);color:var(--wg-gold);text-decoration:none}
.wg-cmp .wg-gr th,.wg-cmp .wg-gr td{border-bottom:2px solid var(--wg-edge2)}
.wg-cmp .wg-gr b{font:800 16px/1 var(--wg-hd);margin-inline-end:4px}
/* the guide: three steps, the first visit only */
.wg-guide{position:absolute;z-index:9;left:50%;bottom:132px;transform:translateX(-50%);width:min(380px,calc(100% - 460px));min-width:280px;padding:16px 18px 14px;border-radius:16px;background:linear-gradient(180deg,rgba(18,24,34,.97),rgba(10,14,20,.97));border:1px solid rgba(244,196,48,.5);box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4);color:var(--wg-ink);text-align:center}
.wg-guide[hidden]{display:none}
.wg-gd-dots{display:flex;justify-content:center;gap:6px}
.wg-gd-dots i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.15)}
.wg-gd-dots i.on{background:var(--wg-gold)}
.wg-gd-e{display:grid;place-items:center;width:44px;height:44px;margin:12px auto 6px;border-radius:50%;background:rgba(244,196,48,.14);color:var(--wg-gold)}
.wg-gd-e svg{width:24px;height:24px}
.wg-guide h3{margin:0;font:800 24px/1.1 var(--wg-hd);letter-spacing:.03em;text-transform:uppercase}
.wg-guide p{margin:6px 0 0;font-size:14px;line-height:1.5;color:#D5DCE4}
.wg-gd-b{display:grid;grid-template-columns:auto 1fr;gap:8px;margin-top:14px}
.wg-gd-b .wg-run,.wg-gd-b .wg-chip{margin:0}
@media(max-width:1099px){.wg-brk{left:calc((100% - 360px) / 2);width:calc(100% - 400px)}}
@media(max-width:759px){
  .wg-top .wg-modes{display:none}
  .wg-modes-s{display:grid;grid-template-columns:repeat(3,1fr);margin:0 10px 6px;flex:none}
  .wg-modes-s .wg-mode{justify-content:center;padding:0 6px;font-size:12px!important;letter-spacing:.04em}
  .wg-app.m-now .wg-clock .wg-cdate{display:none}
  .wg-panel[data-sheet="min"]{height:206px}
  .wg-lv{display:none}      /* the top bar already says Live and how long ago */
  .wg-panel[data-sheet="min"] .wg-foot2{display:none}      /* the low sheet shows how tense it is; Simulate is one tap above it */
  .wg-app.brk-on .wg-nav{top:128px}      /* the breaking banner sits where the camera buttons start */
  .wg-panel[data-sheet="min"]~.wg-tl{bottom:214px}
  .wg-brk{top:58px;left:8px;right:8px;width:auto;transform:none}
  .wg-brk-s{display:none}
  .wg-guide{left:10px;right:10px;width:auto;min-width:0;transform:none;bottom:auto;top:64px}
  .wg-thr{grid-template-columns:80px 1fr;padding:8px 10px}
  .wg-thr-d,.wg-dial{width:80px}
  .wg-thr-t>b{font-size:22px}
  .wg-xbars li{grid-template-columns:40px minmax(0,1fr) 22% 40px}
  .wg-cost{gap:2px 10px}
}
@media(prefers-reduced-motion:reduce){.wg-lv-on i,.wg-brk-k i,.wg-tk.fresh .wg-tk-m i,.wg-mode svg circle{animation:none}}
/* the stream view: Now readable from across a room (stream.js zooms the board's interface to the screen) */
html.lp-stream .wg .wg-brk,html.lp-stream .wg .wg-guide{zoom:var(--lps-z,1)}
html.lp-stream .wg .wg-brk{top:76px;left:calc((100vw / var(--lps-z,1) - 380px) / 2);width:min(620px,calc(100vw / var(--lps-z,1) - 420px))}
html.lp-stream .wg .wg-tk-t{font-size:15px!important}
html.lp-stream .wg .wg-tk-m,html.lp-stream .wg .wg-lv,html.lp-stream .wg .wg-sit,html.lp-stream .wg .wg-gw,html.lp-stream .wg .wg-gb,html.lp-stream .wg .wg-cost,html.lp-stream .wg .wg-ct,html.lp-stream .wg .wg-drv,html.lp-stream .wg .wg-bp-s,html.lp-stream .wg .wg-xbars li,html.lp-stream .wg .wg-thr-x,html.lp-stream .wg .wg-mode{font-size:14px!important}
html.lp-stream .wg .wg-app.m-now .wg-fh{font-size:20px}
html.lp-stream .wg .wg-app.m-now .wg-fl{font-size:15px}
html.lp-stream .wg .wg-tag.hot{font-size:calc(14px * var(--lps-z,1));line-height:calc(20px * var(--lps-z,1))}
.wg-bf-cite{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;font:700 12px/1.3 var(--body)}
.wg-bf-cite span{color:var(--wg-dim);letter-spacing:.12em;text-transform:uppercase}
.wg-bf-cite a{display:inline-flex;align-items:center;min-height:40px;padding:0 9px;border-radius:999px;background:rgba(244,196,48,.1);border:1px solid rgba(244,196,48,.35);color:#FFE7A0;text-decoration:none}
.wg-bf-cite a:hover{background:rgba(244,196,48,.2)}
html.lp-stream .wg .wg-bn{display:none}
html.lp-stream .wg .wg-top{gap:8px}
html.lp-stream .wg .wg-modes{margin-inline-start:4px}
html.lp-stream .wg .wg-mode{padding:0 10px}
html.lp-stream .wg .wg-th{padding:0 9px}
/* THE KEY (2 November 2026, the visual rebuild): what each symbol, line and colour on the board means, one tap from the board */
.wg-legend{position:absolute;right:476px;top:78px;z-index:6;width:300px;max-width:calc(100% - 24px);max-height:calc(100% - 230px);overflow:auto;padding:10px 12px;background:var(--wg-glass2);border:1px solid var(--wg-edge2);border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.5);color:var(--wg-ink)}
.wg-legend[hidden]{display:none}
.wg-leg-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font:800 12px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--wg-dim)}
.wg-legend ul{list-style:none;margin:6px 0 0;padding:0}
.wg-legend li{display:flex;align-items:center;gap:10px;padding:4px 0;font:600 13px/1.3 var(--body)}
.wg-legend li svg{flex:none}
.wg-legend p{margin:6px 0 0;font:500 12px/1.4 var(--body);color:var(--wg-dim)}
@media (max-width:759px){.wg-legend{right:60px;top:60px;bottom:auto;width:auto;left:12px;max-height:calc(100% - 200px)}}
.wg-moments{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:6px}
.wg-moments button{display:flex;gap:10px;align-items:baseline;width:100%;min-height:40px;padding:8px 10px;text-align:start;background:rgba(255,255,255,.03);border:1px solid var(--wg-edge);border-radius:8px;color:var(--wg-ink);font:600 13px/1.35 var(--body);cursor:pointer}
.wg-moments button:hover{border-color:var(--wg-edge2);background:rgba(255,255,255,.06)}
.wg-moments b{flex:none;color:var(--wg-gold);font-weight:800}
/* YOUR LIBERTY SCORE (you/): the look of 1 November 2026. Armin: "significantly improve every single tool. They need to
   look so much better ... beautiful to look at, easy to understand, easy to use, intuitive". The page (render.py you())
   and its script (build/you.js) are unchanged in what they count; this file is how it looks. Added after site.css by
   render.py extras, so where site.css's older .yq rules and these both speak, these decide. Class prefix: yq-.
   Nothing here hides content and animates it back; the only movement is a button answering a finger.
   Words 12px or more, taps 40px or more, at 360px. The stream view (build/stream.js) is at the foot. */

/* the head: title, one line, the strip of eight */
.yq-hero .wrap{padding-bottom:0}
.yq-top{max-width:46rem}
.yq-h1{font-size:clamp(2.6rem,10vw,4.5rem);font-weight:900;line-height:.95}
.yq-lede{margin-top:14px;max-width:40ch}
.yq-priv{margin-top:10px;max-width:62ch;font-size:.9375rem}
.yq-top .lpt-doors{margin-top:14px}
.yq-prog{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:20px}
.yq-prog-d{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;flex:1 1 220px;max-width:420px}
.yq-prog-d i{display:block;height:8px;border-radius:999px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line)}
.yq-prog-d i.is-on{background:var(--field);box-shadow:none}
.yq-prog-d i.is-skip{background:#5a5850;box-shadow:none}
.yq-prog-t{font-size:.9375rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* a question: its number and principle, the question big, the two answers big and the skip quiet */
.yq{gap:12px}
.yq-i{position:relative;padding:18px 16px 16px;border:1px solid #2f2e2a;border-left-width:1px;border-left-color:#2f2e2a;border-radius:14px;background:var(--panel);transition:border-color .15s}
.yq-i.done{border-left-color:#2f2e2a;border-color:#3a3833}
.yq-i.with{border-color:rgba(70,204,130,.55)}
.yq-i.against{border-color:rgba(255,90,72,.55)}
.yq-n{display:flex;align-items:center;gap:10px;font:700 .8125rem/1.2 var(--body);letter-spacing:.02em;text-transform:none;color:var(--dim)}
.yq-k{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--raise);color:var(--ink);font:900 1rem/1 var(--display)}
.yq-i.done .yq-k{background:var(--field);color:var(--on-field)}
.yq-i.with .yq-k{background:var(--ga);color:var(--on-grade)}
.yq-i.against .yq-k{background:var(--gf);color:var(--on-grade)}
.yq-pr{padding:3px 9px;border-radius:999px;background:var(--raise);color:var(--ink);font-weight:700;font-size:.8125rem}
.yq-q{font:700 clamp(1.2rem,4.6vw,1.45rem)/1.25 var(--body);margin-top:12px}
.yq-c{margin-top:8px;font-size:.9375rem;line-height:1.5}
.yq-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;margin-top:16px}
.yq-v{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border-radius:12px;border:1px solid #3a3833;background:var(--sunk);font:800 1.0625rem/1 var(--body);transition:transform .12s,box-shadow .12s,border-color .12s}
.yq-v:hover{border-color:#6b685f;transform:translateY(-1px);box-shadow:0 6px 16px -10px rgba(0,0,0,.9)}
.yq-vi{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--raise);font-size:.8125rem;font-weight:900;color:var(--dim)}
.yq-v.on{background:var(--field);border-color:var(--field);color:var(--on-field)}
.yq-v.on .yq-vi{background:rgba(20,18,11,.16);color:var(--on-field)}
.yq-s{min-width:72px;border-color:transparent;background:transparent;color:var(--dim);font-weight:700;font-size:.9375rem}
.yq-s:hover{border-color:var(--line)}
.yq-s.on{background:var(--raise);border-color:var(--line);color:var(--ink)}
.yq-a{margin-top:16px;padding:14px;border-top:0;border-radius:10px;background:var(--sunk)}
.yq-end{position:relative;margin-top:16px;padding:16px;border:1px solid var(--field-edge);border-radius:14px;background:var(--panel);justify-items:stretch}
@media(min-width:620px){.yq-end{grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-items:start}}
.yq-end p{font-size:1rem}
.yq-end .btn{min-height:52px;padding:0 26px;font-size:1.0625rem}

/* the result: the letter in a ring that fills to the score */
.yq-res{background:transparent}
.yq-tool .yq-hero{padding-bottom:12px}
.yq-tool .yq-res{padding-top:12px}
.yq-tool .yq-res + .sec{padding-top:24px}
.yq-grade{gap:18px;padding:18px;border:1px solid #2f2e2a;border-radius:16px;background:var(--panel);max-width:46rem}
.yq-ring{--pct:0;--rc:var(--field);display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--rc) calc(var(--pct) * 1%),var(--raise) 0)}
.yq-ring.r-a{--rc:var(--ga)}.yq-ring.r-b{--rc:var(--gb)}.yq-ring.r-c{--rc:var(--gc)}.yq-ring.r-d{--rc:var(--gd)}.yq-ring.r-f{--rc:var(--gf)}
.yq-ring .g{width:92px;height:92px;font-size:3.4rem;border-width:0;border-radius:50%;background:var(--sunk)}
.yq-grade b{font-size:clamp(1.6rem,6.4vw,2.4rem)}
.yq-grade p{font-size:1rem;line-height:1.45}
.yq-rank{max-width:46rem;margin-top:14px}
.yq-dist{max-width:46rem;margin:18px 0 0;padding:16px 16px 14px;border:1px solid #2f2e2a;border-radius:16px;background:var(--panel)}
.yq-dist[hidden]{display:none}
.yq-dist-h{font:800 .8125rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.yq-dist-c{position:relative;margin-top:30px;padding-bottom:30px}
.yq-dist-s{display:block;width:100%;height:110px}
.yq-b-D{fill:var(--dem)}.yq-b-R{fill:var(--rep)}.yq-b-I{fill:var(--ind)}
.yq-you-m{position:absolute;top:-26px;bottom:30px;width:2px;margin-left:-1px;background:var(--field)}
.yq-you-m span{position:absolute;top:0;left:0;transform:translateX(-50%);padding:3px 8px;border-radius:999px;background:var(--field);color:var(--on-field);font:800 .8125rem/1.2 var(--body);white-space:nowrap}
.yq-you-m.is-r span{transform:translateX(-100%)}
.yq-you-m.is-l span{transform:none}
.yq-you-m b{font-weight:900}
.yq-bands{position:absolute;left:0;right:0;bottom:0;height:24px}
.yq-band{position:absolute;top:0;bottom:0;display:grid;place-items:center;border-top:3px solid var(--line);font-size:.8125rem;color:var(--dim)}
.yq-band b{font:900 .9375rem/1 var(--display)}
.yq-band.r-a{border-top-color:var(--ga)}.yq-band.r-b{border-top-color:var(--gb)}.yq-band.r-c{border-top-color:var(--gc)}.yq-band.r-d{border-top-color:var(--gd)}.yq-band.r-f{border-top-color:var(--gf)}
.yq-dist-k{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:.8125rem;color:var(--dim)}
.yq-dist-k span::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:3px;vertical-align:-1px}
.yq-dk-D::before{background:var(--dem)}.yq-dk-R::before{background:var(--rep)}.yq-dk-Y::before{background:var(--field)}
.yq-h2{font-size:1.5rem;margin-top:28px}
.yq-res .people{max-width:46rem}
.yq-st{max-width:46rem}
.yq-st label{font-size:1.5rem}

/* ---------------------------------------------------------------- the stream view (build/stream.js: html.lp-stream, #you)
   One 1280 x 720 canvas zoomed to the screen: the title, the strip and the grade down the left, the eight questions as a
   grid of four by two on the right, each with its answers. What a stream cannot use (the long lines under each question,
   the lists of members, the methodology line) steps aside; every word on the canvas is 13.4px or more (20px at 1080p). */
html.lp-stream #you{zoom:var(--lps-z);width:var(--lps-w);height:var(--lps-h);display:grid;grid-template-columns:300px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);overflow:hidden;background:var(--bg)}
html.lp-stream #you > section{padding:0;margin:0;border:0;min-height:0}
html.lp-stream #you .wrap{max-width:none;padding:0}
html.lp-stream .yq-hero{grid-column:1;grid-row:1;padding:20px 0 0 22px !important}
html.lp-stream .yq-h1{font-size:2.6rem}
html.lp-stream .yq-lede{font-size:1rem;margin-top:10px}
html.lp-stream .yq-priv,html.lp-stream .yq-got,html.lp-stream .yq-c,html.lp-stream .yq-a,html.lp-stream .yq-how,html.lp-stream #yq-like,html.lp-stream .yq-sh,html.lp-stream .yq-chg,html.lp-stream .yq-dist,html.lp-stream #you .nudge,html.lp-stream #you noscript{display:none !important}
html.lp-stream .yq-prog{margin-top:14px}
html.lp-stream .yq-prog-d{flex-basis:100%}
html.lp-stream .yq-res{grid-column:1;grid-row:2;align-self:start;padding:14px 0 0 22px !important}
html.lp-stream .yq-res > .wrap{padding:0}
html.lp-stream .yq-grade{grid-template-columns:1fr;justify-items:start;gap:10px;padding:14px}
html.lp-stream .yq-ring{width:100px;height:100px}
html.lp-stream .yq-ring .g{width:82px;height:82px;font-size:3rem}
html.lp-stream .yq-grade b{font-size:1.5rem}
html.lp-stream .yq-grade p,html.lp-stream .yq-rank{font-size:.875rem;margin-top:6px}
html.lp-stream #you > section:last-child{grid-column:2;grid-row:1 / span 2;padding:52px 22px 14px 18px}
html.lp-stream #you > section:last-child > .wrap{height:100%;display:flex;flex-direction:column}
html.lp-stream .yq{flex:1 1 auto;min-height:0;max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}
html.lp-stream .yq-i{display:flex;flex-direction:column;min-height:0;padding:12px}
html.lp-stream .yq-n{font-size:.875rem}
html.lp-stream .yq-pr{font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html.lp-stream .yq-q{font-size:1.0625rem;line-height:1.25;margin-top:8px}
html.lp-stream .yq-b{margin-top:auto;padding-top:10px;grid-template-columns:1fr 1fr;gap:6px}
html.lp-stream .yq-s{grid-column:1 / -1;min-height:40px}
html.lp-stream .yq-v{min-height:44px;font-size:1rem}
html.lp-stream .yq-end{flex:none;max-width:none;margin-top:10px;padding:10px 14px;grid-template-columns:minmax(0,1fr) auto;align-items:center}
html.lp-stream .yq-end p{font-size:.9375rem}
html.lp-stream .yq-end .btn{min-height:44px}
html.lp-stream #you .lpt-doors{margin-top:12px}
html.lp-stream .yq-vi{font-size:.875rem}
html.lp-stream #you .tband{display:none}

/* ---------------------------------------------------------------- one header (November 2026)
   Six things on a wide screen: the mark, Tools, Community, Watch live, Join the panel, Sign in.
   At 760px and under, one row of 56px: the mark, Join the panel, and Menu. Menu opens the same
   groups as a sheet. The old second bar (nav.subnav) is not used. */
nav.subnav{display:none}
header.top .wrap{position:relative}
.nav-burger{display:none;align-items:center;justify-content:center;flex:none;width:44px;height:40px;margin:0;padding:0;border:1px solid #3a3936;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.nav-burger[aria-expanded="true"]{background:var(--ink);color:#0A0A0A;border-color:var(--ink)}
.nav-burger[aria-expanded="true"] svg{display:none}
.nav-burger[aria-expanded="true"]::before{content:"\00d7";font:400 1.7rem/1 var(--body)}
.navgroup{position:relative;flex:none}
.navgroup-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 10px;border:0;border-radius:var(--r);background:transparent;color:var(--ink);font:600 var(--t2)/1 var(--body);cursor:pointer;white-space:nowrap}
.navgroup-btn:hover{color:var(--field)}
.navgroup-btn.on{box-shadow:inset 0 -2px 0 var(--field)}
.navgroup-btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.navgroup-btn[aria-expanded="true"]::after{transform:rotate(225deg);margin-top:2px}
.navgroup-btn[aria-expanded="true"]{color:var(--field)}
.navgroup-panel{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:16rem;padding:8px;background:var(--raise);border-radius:var(--r2);box-shadow:0 18px 40px -12px rgba(0,0,0,.8);max-height:calc(100vh - 88px);overflow:auto}
.navgroup-panel[hidden]{display:none}
header.top .navgroup[data-group="tools"]{position:static}
header.top .navgroup[data-group="tools"] .navgroup-panel{left:0;right:0;width:auto;top:100%;padding:14px 16px 16px}
.navmega{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) minmax(0,.95fr);gap:8px 22px}
.navmega-h{margin:2px 8px 6px;font:700 .75rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--field)}
header.top .navgroup-panel a{display:flex;align-items:center;min-height:44px;padding:6px 10px;border-radius:var(--r);color:var(--ink);font-weight:600;font-size:var(--t2);text-decoration:none;box-shadow:none}
header.top .navgroup-panel a:hover{background:rgba(243,241,234,.07);color:var(--ink)}
header.top .navgroup-panel a[aria-current="page"]{color:var(--field);box-shadow:inset 3px 0 0 var(--field)}
header.top .navgroup-panel a.nav-x{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:8px 10px;white-space:normal}
header.top .navgroup-panel a.nav-x small{font:500 .82rem/1.35 var(--body);color:var(--dim)}
header.top .navgroup-panel a.nav-x[aria-current="page"] small{color:var(--ink)}
header.top .navgroup-panel .nav-cty{display:flex;flex-wrap:wrap;gap:6px;margin:2px 8px 8px}
header.top .navgroup-panel .nav-cty a{display:inline-flex;flex:none;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;font-size:.88rem}
header.top .navgroup-panel .nav-cty a[aria-current="page"]{border-color:var(--field);background:rgba(244,196,48,.12);box-shadow:none}
@media(min-width:761px){
  header.top .nav-burger{display:none}
  header.top .sitenav{margin-left:auto;display:flex;align-items:center;gap:2px}
  header.top .sitenav>a.navgo{display:inline-flex}
  header.top .navgroup{display:block}
  /* The old bar hid the words "Watch live" from 1220 to 1439 because eleven items did not fit.
     Six items do, so the words stay. */
  header.top nav a.yt span{display:inline}
}
@media(max-width:760px){
  header.top{height:56px;max-height:56px;box-sizing:border-box}
  header.top .wrap{height:100%;min-height:0;max-height:none;gap:8px;flex-wrap:nowrap}
  header.top .mark{min-height:0;font-size:1.02rem;gap:6px;min-width:0}
  header.top .mark img{width:32px;height:32px}
  header.top .mark span{overflow:hidden;text-overflow:ellipsis}
  header.top .sitenav{display:contents}
  header.top .navgroup,header.top .sitenav>a.acct{display:none}
  header.top .sitenav>a.navgo{display:inline-flex;margin-left:auto;min-height:36px;padding:0 12px;font-size:.8125rem}
  header.top .nav-burger{display:inline-flex;margin-left:8px}
  /* the show invitation, collapsed to a dot on the mark */
  header.top .sitenav>a.yt{position:absolute;left:calc(var(--gutter) + 18px);top:2px;z-index:3;display:inline-flex;width:28px;height:28px;min-width:28px;min-height:28px;padding:0;border-radius:50%;background:radial-gradient(circle at center,var(--field) 0 5px,transparent 6px);overflow:visible}
  header.top .sitenav>a.yt .yt-i,header.top .sitenav>a.yt span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  html:not(.nav-open) header.top a.yt.calls-live{background:radial-gradient(circle at center,#C8102E 0 5px,transparent 6px)}
  html:not(.nav-open) header.top a.yt.calls-live::after{content:none;display:none}
  .modes{top:56px}
  html{scroll-padding-top:64px}
  html.nav-open{overflow:hidden}
  html.nav-open header.top .sitenav{display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:40;top:56px;left:0;right:0;bottom:0;margin:0;padding:8px 16px 40px;gap:2px;overflow:auto;background:#0A0A0A;border-top:1px solid var(--line)}
  html.nav-open header.top .navgroup{display:block;position:static}
  html.nav-open header.top .navgroup-btn{width:100%;justify-content:flex-start;margin-top:14px;padding:8px 4px 4px;min-height:36px;pointer-events:none;font:800 .78rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--field);box-shadow:none}
  html.nav-open header.top .navgroup-btn::after{display:none}
  html.nav-open header.top .navgroup-panel{position:static;left:auto;right:auto;top:auto;width:auto;min-width:0;max-height:none;overflow:visible;padding:0 0 8px;background:transparent;box-shadow:none}
  html.nav-open .navmega{display:block;width:auto}
  html.nav-open .navmega-col{margin-top:8px}
  html.nav-open header.top .sitenav>a.yt{position:static;width:auto;height:auto;min-height:48px;margin-top:12px;padding:0 8px;border-radius:var(--r);background:none;justify-content:flex-start}
  html.nav-open header.top .sitenav>a.yt .yt-i,html.nav-open header.top .sitenav>a.yt span{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
  html.nav-open header.top .sitenav>a.yt span{display:inline}
  html.nav-open header.top .sitenav>a.acct{display:inline-flex;align-self:flex-start;margin-top:8px}
  html.nav-open header.top .sitenav>a.navgo{position:fixed;top:8px;right:68px;z-index:41;margin:0}
  html.nav-open header.top .nav-burger{margin-left:auto}
}
@media(max-width:390px){
  header.top .mark{font-size:.92rem}
  header.top .sitenav>a.navgo{padding:0 10px}
}

/* ---------------------------------------------------------------- support this website
   Gold control in the header, immediately before Watch live. The panel and /support/
   offer Give once, Give monthly, and a smaller Skool link. URLs are not here:
   assets/support-config.js. This is not a second floating control beside .calls. */
header.top nav a.support{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:44px;margin-inline:2px 4px;padding:0 14px;border-radius:999px;background:var(--field);color:var(--on-field);font-weight:800;font-size:.92rem;line-height:1;white-space:nowrap;text-decoration:none}
header.top nav a.support:hover,header.top nav a.support:focus-visible{background:var(--field-hi);color:var(--on-field);text-decoration:none}
header.top nav a.support:visited{color:var(--on-field)}
header.top nav a.support:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
header.top nav a.support[aria-current="page"]{box-shadow:none;border-radius:999px;color:var(--on-field)}
header.top nav a.support .support-l{display:inline}
header.top nav a.support .support-s{display:none}
/* 761 to 1099: one row is full once the control is added. The visible word is
   Support. The accessible name stays "Support this website". From 761 to 879 the
   Watch live words step aside (the icon stays) so Sign in remains on screen. */
@media(min-width:761px) and (max-width:1099px){
  header.top nav a.support{padding:0 10px;margin-inline:0 2px}
  header.top nav a.support .support-l{display:none}
  header.top nav a.support .support-s{display:inline}
}
@media(min-width:761px) and (max-width:879px){
  header.top nav a.yt span{display:none}
  header.top .navgroup-btn{padding-inline:6px}
  header.top .sitenav>a.navgo{padding-inline:8px}
}
/* Under 760px the closed bar stays one row: the mark, Join the panel, and Menu.
   Watch live is the dot on the mark. The full phrase is its own row under them. */
@media(max-width:760px){
  header.top{height:auto;max-height:none}
  header.top .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"mark join menu" "support support support";align-items:center;column-gap:8px;row-gap:2px;height:auto;padding-top:8px;padding-bottom:8px}
  header.top .mark{grid-area:mark;min-width:0}
  header.top .sitenav>a.navgo{grid-area:join;margin-left:0}
  header.top .nav-burger{grid-area:menu;margin-left:0}
  header.top nav a.support{grid-area:support;justify-self:end;min-height:40px;margin:0}
  header.top nav a.support .support-l{display:inline}
  header.top nav a.support .support-s{display:none}
  .modes{top:98px}
  html{scroll-padding-top:106px}
  html.nav-open header.top{height:56px;max-height:56px}
  html.nav-open header.top .wrap{display:flex;height:100%;flex-wrap:nowrap;padding-top:0;padding-bottom:0;column-gap:8px}
  html.nav-open header.top .sitenav>a.navgo{margin-left:0}
  html.nav-open header.top .nav-burger{margin-left:auto}
  html.nav-open header.top nav a.support{order:-1;justify-self:stretch;align-self:stretch;justify-content:center;margin:0 0 8px}
}
.support-page h1{font-size:clamp(2.4rem,9vw,4.2rem);font-weight:900}
.support-page .lede{margin-top:14px;max-width:40rem}
.support-choices{display:grid;gap:22px;margin-top:28px;max-width:28rem}
.support-choice{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.support-choice .btn{width:100%}
.support-choice p{margin:0;color:var(--dim);font-size:1rem;line-height:1.45}
.support-mem{margin-top:22px;max-width:36rem}
.support-mem a{color:var(--field);font-weight:700;font-size:1rem;min-height:44px;display:inline-flex;align-items:center}
.support-mem a:hover{color:var(--field-hi)}
.support-sheet .support-acts{display:grid;gap:16px}
.support-sheet .support-choice .btn{width:100%}
.support-sheet .support-mem{margin:4px 0 0}
.support-sheet .sheet-lead{font-weight:500}