/* THE LOOK IS THE NEWS SITE'S (owner, 2026-09-17; D5). The front page's own
   sheet, at the domain root, comes first; everything below is only what a
   legislation page needs beyond it. */
@import url("/style.css");

/* ---- legislation pages: what the old builders carried inline ------- */
.k-yea{background:var(--bar)}
.k-nay{background:var(--signal)}
.k-other{background:var(--faint)}
.hub-sec{margin-top:44px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;border-top:1px solid var(--rule);padding-top:14px;margin:0 0 18px}
.sec-head h2{margin:0;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sec-all{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap}
.pagenav{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;
  margin:40px 0 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.09em;text-transform:uppercase}
.pagenav .off{color:var(--faint)}
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:10px;margin-top:34px}
.picker .st{border:1px solid var(--rule);border-radius:3px;
  padding:12px 14px;font-size:14px}
.picker .st small{display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  margin-top:4px}
.picker span.st{color:var(--faint)}
.picker a.st{text-decoration:none}
.warn{margin:22px 0 0;padding:12px 14px;border:1px solid var(--warn);
  border-radius:3px;font-size:14px;color:var(--warn)}
.warn code{font-family:var(--mono);font-size:12px}
/* the inline SVG card, shared by the grids and the bill page */
.shot svg{width:100%;height:100%;display:block}
.sc-bg{fill:#F2F5F9}
.sc-label{font-family:var(--display);font-size:52px;font-weight:600;
  fill:var(--text);letter-spacing:-.01em}
.sc-rule{fill:var(--signal)}
.sc-meta{font-family:var(--mono);font-size:21px;letter-spacing:.06em;
  fill:var(--dim)}
.sc-cap{font-family:var(--mono);font-size:18px;letter-spacing:.06em;
  fill:var(--dim)}
.sc-init{font-family:var(--display);font-size:44px;fill:var(--faint)}
.sc-noface{fill:#E6EBF2;stroke:var(--rule)}
.sc-badge-box{fill:none;stroke:var(--rule)}
.sc-badge{font-family:var(--mono);font-size:16px;letter-spacing:.08em;
  fill:var(--dim)}
.sm-yea{fill:var(--bar)}
.sm-nay{fill:var(--signal)}
.sm-other{fill:var(--faint)}
.vbar-yea{background:var(--bar)}
.vbar-nay{background:var(--signal)}
.vbar-other{background:var(--faint)}
.vseg-yea{background:var(--bar)}
.vseg-nay{background:var(--signal)}
.vseg-other{background:var(--faint)}
/* the bill page */
.bill-page{max-width:1120px}
.overview{margin:26px 0 0;border:1px solid var(--rule);border-radius:3px;
  border-collapse:collapse;width:100%;font-size:14px}
.overview th{text-align:left;padding:10px 14px;width:160px;vertical-align:top;background:var(--bar);
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:#FFFFFF;border-top:1px solid var(--rule)}
.overview td{padding:10px 14px;border-top:1px solid var(--rule);color:#1B2A41}
.overview tr:first-child th,.overview tr:first-child td{border-top:0}
.tracker{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0 0}
.tstep{padding:5px 11px;border:1px solid var(--rule);border-radius:3px;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint)}
.tstep.done{border-color:var(--dim);background:var(--raised);color:var(--text)}
.bsec{padding:30px 0 0}
.bsec h2{margin:0 0 14px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.bsec ul{margin:0;padding-left:20px;color:#1B2A41;font-size:14px;line-height:1.8}
.bsec p{color:#1B2A41;font-size:14px;line-height:1.7}
.btable{border-collapse:collapse;width:100%;font-size:13.5px}
.btable th{text-align:left;font-family:var(--mono);font-size:11px;background:var(--bar);
  letter-spacing:.09em;text-transform:uppercase;color:#FFFFFF;
  padding:7px 10px}
.btable td{padding:8px 10px;border-top:1px solid var(--rule);
  color:#1B2A41;vertical-align:top}
.none{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--faint)}
details summary{cursor:pointer;font-size:14px;color:var(--dim);margin:8px 0}
.bsec h3{font-size:16px;margin:18px 0 2px}
.bsec h3:first-child{margin-top:0}
.stext p{color:#1B2A41;font-size:14px;line-height:1.7}
.gov{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase}
.meta-line{margin:10px 0 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
nav.sections.bill-nav{margin-top:26px;border-top:1px solid var(--rule);padding-top:14px}
/* --- what it does: the verdict, the digest, the folded facts (2026-09-03) --- */
.facts .verdict{margin:0 0 18px;padding:16px 18px 12px;border:1px solid var(--rule);border-left:3px solid var(--signal);border-radius:3px;background:var(--ground)}
.facts .verdict .vline{margin:0;font-size:15px;line-height:1.6;color:var(--text)}
.facts .verdict .vline b{font-family:var(--display);font-size:20px;display:block;margin-bottom:4px;color:var(--text)}
.facts .verdict .verse{margin:12px 0 0;padding:0 0 0 14px;border-left:2px solid var(--rule);font-family:var(--display);font-size:15px;line-height:1.65;color:#1B2A41}
.facts .verdict .verse+.vline{margin-top:14px}
.facts .verdict .verse cite{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-style:normal}
.facts .verdict details{margin:12px 0 0}
.facts .verdict details summary{cursor:pointer;list-style:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0;padding:6px 0}
.facts .verdict details summary::-webkit-details-marker{display:none}
.facts .verdict details summary::before{content:"+ "}
.facts .verdict details[open] summary::before{content:"\2013 "}
.facts .verdict td.lean{width:12%;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding-right:12px}
.facts .verdict td.lean.c{color:var(--signal)}
.facts .verdict td.q{width:38%}
.facts .verdict .method{margin:12px 0 4px;font-size:12.5px;line-height:1.6;color:var(--dim)}
.facts .unstable{margin:0 0 18px;padding:12px 16px;border:1px dashed var(--signal);border-radius:3px;font-size:14px;color:var(--dim)}
.facts .inshort{margin:14px 0 6px;padding:14px 16px;background:var(--raised);border-left:3px solid var(--bar);font-size:15px;line-height:1.6}
.facts .inshort b:first-child{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-right:8px}
.facts .inshort .more{color:var(--dim);font-style:italic}
.facts .fcat{margin:22px 0 0}
.facts .fcat summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-size:17px;padding:6px 0;border-bottom:1px solid var(--rule);margin:0}
.facts .fcat summary::-webkit-details-marker{display:none}
.facts .fcat summary .n{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim)}
.facts .fcat summary::after{content:"+";margin-left:auto;color:var(--dim);font-family:var(--mono)}
.facts .fcat[open] summary::after{content:"\2013"}
.facts table{border-collapse:collapse;width:100%;font-size:13.5px}
.facts td{padding:9px 10px 9px 0;vertical-align:top;border-bottom:1px solid var(--rule);background:transparent}
.facts td.q{width:34%;font-weight:600;padding-right:18px}
.facts td.b{color:var(--dim)}
.facts p.none{margin-top:14px}
.card .facttags{margin:8px 0 0}
.card .facttags .tag{font-size:11px;letter-spacing:.06em}
.card .facttags .tag.verdict{color:var(--signal);border-color:var(--signal)}

/* --- "How this was worked out": the whole chain behind the verdict.
   Deliberately plainer than the page above it -- this is evidence, read by
   someone who wants to check a step, not a display surface. */
.brief{font-size:15px;line-height:1.65}
.brief .bpart{margin:0 0 22px}
.brief .bpart:last-of-type{margin-bottom:14px}
.brief .bpart h4{margin:0 0 6px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.brief .bpart p{margin:0 0 8px}
.brief .bpart ul{margin:0;padding-left:20px}
.brief .bpart li{margin:0 0 5px}
.working{font-size:14px;line-height:1.6}
.working h3{margin:26px 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--rule);padding-bottom:6px}
.working h3:first-child{margin-top:0}
.working table{width:100%;border-collapse:collapse;margin:0}
.wkv td{padding:6px 10px 6px 0;vertical-align:top;border-bottom:1px solid var(--rule)}
.wkv td:first-child{width:210px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.wrows th{padding:16px 0 6px;text-align:left;font-family:var(--mono);font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--signal);border-bottom:1px solid var(--signal)}
.wrows td{padding:10px 10px 10px 0;vertical-align:top;border-bottom:1px solid var(--rule)}
.wrows .wn{width:44px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.wrows .wv{width:92px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);text-align:right;white-space:nowrap}
.wrows .wdep .wv{color:var(--signal)}
.wq b{display:block;font-weight:600;color:var(--text)}
.wcat{display:block;margin-top:2px;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim)}
ul.wplaces{margin:6px 0 0;padding:0;list-style:none}
ul.wplaces li{margin:0 0 3px;padding:0 0 0 12px;border-left:2px solid var(--rule);color:var(--dim)}
.wverse{margin:8px 0 0;padding:8px 0 0 12px;border-left:2px solid var(--signal);
  font-family:var(--display);font-size:14px;line-height:1.6;color:var(--text)}
.wverse cite{display:block;margin-top:3px;font-family:var(--mono);font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim);font-style:normal}
.wnote{margin:0;color:var(--dim);font-size:13px;line-height:1.65}

/* Tokens the rules below name; on the news sheet's navy. */
:root{--blue-deep:#061E3F;--blue-bright:#0A3161;--muted:#5A6B82}

.back:hover,.top .method:hover{color:#F2F5F9}

/* the "go to bill" box, at the right of the band */
.top .goto{display:flex;align-items:center;gap:8px;margin-left:auto}
.top .goto label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF}
.top .goto input{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 8px;border:1px solid rgba(255,255,255,.55);border-radius:3px;background:rgba(255,255,255,.12);
  color:#FFFFFF;width:7.5em}
.top .goto input::placeholder{color:rgba(255,255,255,.55);text-transform:none}
.top .goto input:focus{outline:2px solid #FFFFFF;outline-offset:1px;background:#FFFFFF;color:var(--text)}

/* the count line and the pill nav */
.count{color:var(--dim)}
.count a,.sections a{color:var(--bar);border-color:var(--rule);background:#FFFFFF}
.sections a.here span{color:#FFFFFF}
.card .shot{border-color:var(--rule)}
.sc-noface-r{fill:var(--signal)}
.sc-noface-w{fill:#FFFFFF}
.card .facttags .tag.verdict,.tag.verdict{color:#FFFFFF;background:var(--signal);border-color:var(--signal)}

/* hot links (owner, 2026-09-04): a name that is a link looks like one --
   the theme's blue AND the underline, in the sections, the overview, the
   card footer and the tracker. The base sheet's a{color:inherit} left a
   body link told apart by the browser's default underline alone. */
.bsec a,.overview a,.card-foot a,.tracker a{color:var(--bar);text-decoration:underline;text-underline-offset:2px}
.bsec a:hover,.overview a:hover,.card-foot a:hover,.tracker a:hover{color:var(--signal)}
/* the card footer is 10px type: its link is not inline in a sentence, so it
   gets a 24px line to meet the minimum target (WCAG 2.2 SC 2.5.8) */
.card-foot .count a{line-height:24px}
/* the picture link draws no outline of its own; the picture is the target */
a.portrait{display:block;text-decoration:none}

/* person page: the portrait whole (owner, 2026-09-04: "the portrait is too
   big and it cuts off the top of their head"). It sat in the bill page's
   21:9 box, where cover-fit cropped a 2:3 photo to its middle. Fixed pixel
   size, the photo's own 2:3 shape, anchored to the top, centred in a flat
   band -- no aspect-ratio or :has(), so every browser draws it the same. */
/* THE PORTRAIT BOX, wherever a portrait is drawn (roster cards, the person
   page): 2:3 by the padding trick -- a percentage padding is of the WIDTH
   (CSS 2.1 s8.4), so height:0 + padding-top:150% is a fixed-shape box in
   every browser, no aspect-ratio property -- with the photo filling it and
   the crop, if any, taken from the bottom (object-position: top), never
   the head. The landscape card box (16:9, centre crop) cut heads off on
   every roster card (owner, 2026-09-04). */
.shot.portrait{aspect-ratio:auto;height:0;padding-top:150%;position:relative;overflow:hidden;
  border:1px solid var(--rule);border-radius:4px;background:#FFFFFF}
.shot.portrait img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.shot.portrait img.wide{object-fit:contain;object-position:center;background:var(--raised)}
/* (3) a member with no portrait: the same field, the rule along the foot
   as a pseudo-element so the box's rounded corners and overflow clip it. */
.shot.portrait.empty{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 6l2.6 8h8.4l-6.8 4.9 2.6 8L28 22l-6.8 4.9 2.6-8L17 14h8.4z' fill='%23FFFFFF' fill-opacity='.22'/%3E%3C/svg%3E"),linear-gradient(180deg,var(--blue-deep),#071C4A)}
.shot.portrait.empty::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(180deg,#B31942 0 2px,#FFFFFF 2px 3px,#B31942 3px 5px)}
.shot.portrait.empty>*{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
/* the person page: the same box, fixed at 200x300, centred in a flat band */
.shot.portrait-box{aspect-ratio:auto;height:auto;padding:18px 0;border:0;border-radius:0;margin:22px 0 0;
  background:var(--raised);display:flex;justify-content:center}
.shot.portrait-box .shot.portrait{width:200px;height:300px;padding-top:0;margin:0}

/* prev / next bill in the masthead, the top-25 tag under the title, the
   sites line under the foot (the navigation review, 2026-09-04) */
.top .nb{color:#FFFFFF;text-decoration:none;border:1px solid rgba(255,255,255,.45);border-radius:3px;padding:2px 7px}
.top .nb:hover{background:#FFFFFF;color:var(--text)}
.listed{margin:10px 0 0}
.listed a{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#FFFFFF;background:var(--signal);padding:3px 9px;border-radius:2px;text-decoration:none}
.listed a:hover{background:var(--bar)}
/* the sites line: the band's type exactly (owner, 2026-09-06: "the same
   font as header and footer"), .14em like `.top` and `.foot`, not .09em */
.sites{margin:0;padding:12px 20px;background:var(--blue-deep);font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF;text-align:center;line-height:1.9}
.sites a{color:#FFFFFF;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}
.sites a:hover{border-bottom-color:#FFFFFF}

.story-head h1 .ext{font-size:.55em;vertical-align:middle;color:var(--dim)}

/* ---- what the UI audit of the live site found (2026-09-04) ---- */

/* WIDE CONTENT SCROLLS IN ITS OWN BOX, never the page. The actions and votes
   tables carry whole sentences and nothing stopped a narrow phone being
   pushed sideways; `.tw` is the wrapper sections._table now writes. A long
   unbroken token (a URL in an action) breaks instead of widening its column. */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tw table{min-width:0}
.bsec td,.bsec p,.bsec li,.overview td,.card h2{overflow-wrap:break-word}

/* PRINT: a bill page is what a reader prints. The bands, the go-to box, the
   pager and the nav rows are screen furniture and cost ink; the content,
   the verdict and the tables print black on white, and every collapsible
   section is opened so nothing is missing from the paper. */
@media print{
  .top,.sites,.goto,.pagenav,nav.sections,.sec-all,.meter,.split{display:none!important}
  body{border-top:0}
  .wrap{max-width:100%;padding:0}
  .hero{border:0;padding:0 0 12px}
  .card,.overview,.facts .verdict,.facts .inshort{box-shadow:none;border-color:#999}
  .facts details,.facts .fcat{display:block}
  .facts details>summary{display:none}
  .facts details>*:not(summary){display:block!important}
  a{text-decoration:none;color:#000}
  .foot{background:none;color:#000;border:0;padding:8px 0}
  .foot::after{content:""}
  .shot,.shot.portrait{break-inside:avoid;page-break-inside:avoid}
  .bsec{break-inside:avoid-page}
}
.facts .verdict .vphrase{margin:0 0 6px}
.pagenav a{color:var(--bar)}
.tracker .tstep.done{background:var(--bar);color:#FFFFFF;border-color:var(--bar)}

/* the question box (bills/web/urls.py, 2026-09-06): the one live page, in
   the site's own clothes. A conversation is a column of turns: the question
   in the display face, the answer in body text, on a raised card with the
   red top rule the bill cards carry; the box below is the masthead's input
   at reading size, on the white ground. */
.ask{max-width:760px}
.ask .turn{margin:22px 0 0;padding:18px 20px 16px;background:var(--raised);border:1px solid var(--rule);
  border-top:3px solid var(--signal);border-radius:3px}
.ask .turn .q{margin:0;font-family:var(--display);font-size:19px;line-height:1.35;color:var(--text)}
.ask .turn .a{margin:12px 0 0;white-space:pre-wrap;word-wrap:break-word;font-size:15px;line-height:1.65;color:var(--text)}
.ask .turn .a:empty{display:none}
.ask form{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0}
.ask form input{flex:1 1 20rem;font-family:var(--body);font-size:16px;padding:10px 12px;
  border:1px solid var(--bar);border-radius:3px;background:#FFFFFF;color:var(--text)}
.ask form input::placeholder{color:var(--faint)}
.ask form input:focus{outline:2px solid var(--signal);outline-offset:1px}
.ask form button{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 18px;border:0;border-radius:3px;background:var(--signal);color:#FFFFFF;cursor:pointer}
.ask form button:hover{background:var(--bar)}
.ask .error{margin:14px 0 0;color:var(--signal);font-size:14px}
.ask .error a{color:var(--signal)}
.ask .note{margin:14px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim)}
.ask .note a{color:var(--dim)}