/* GRANITE_VERSION: 2026-09-07.6 */
:root{--paper:#F6F6F4;--surface:#fff;--ink:#191C1D;--ink-2:#5C6467;--ink-3:#6C7274;
--rule:#E2E3E0;--rule-2:#CFD1CD;--edge:#8A8C88;--pine:#1F4B47;--pine-soft:#E7EFED;--wash:#EFEFEC;
/* Status colours, by what happened to the bill. Yellow while it is moving,
   green if it became law, red if it was voted down, orange for interim study
   -- which is parked rather than dead. A veto keeps its own deeper red: the
   legislature did not kill it, and the two are worth telling apart.
   Every pair holds at least 5.4:1 against its own chip. */
--st-active:#7A5A00;--st-active-bg:#FBF2D9;
--st-law:#1E5B3C;--st-law-bg:#E3EFE7;
--st-done:#9E2B25;--st-done-bg:#FAE7E5;
--st-study:#94500E;--st-study-bg:#FCEEDF;
--st-veto:#7C2D3A;--st-veto-bg:#F7E4E7;
--rep:#B03A32;--dem:#2E5FA3;--ind:#6B5B95;
/* Yes and no, after the green and red buttons on a member's desk. Set at
   clearly different lightness as well as different hue, so the ring still
   reads for readers who cannot separate the two by hue alone. */
--yes:#215C43;--no:#CE6A62;
--sans:"Public Sans",system-ui,-apple-system,sans-serif;--serif:"Newsreader",Georgia,serif}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:15px;
line-height:1.55;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
a{color:var(--pine)}button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
nav.top{background:var(--surface);border-bottom:1px solid var(--rule)}
nav.top .in{max-width:1180px;margin:0 auto;padding:13px 24px;display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
nav.top .brand{font-size:16px;font-weight:600}
nav.top a{font-size:13.5px;text-decoration:none;color:var(--ink-2)}
nav.top a[aria-current]{color:var(--ink);font-weight:500;box-shadow:0 2px 0 var(--pine)}
.searchrow{background:var(--surface);border-bottom:1px solid var(--rule)}
.searchrow .in{max-width:1180px;margin:0 auto;padding:14px 24px}
/* Capped. At 1440 the field was 962px of empty box; the placeholder ends
   long before that and the eye has nothing to land on. The hint line
   under it is capped to match so the two read as one control. */
.qline{display:flex;gap:10px;max-width:840px}
#sort{height:26px;padding:0 4px;font:inherit;font-size:12.5px;border:1px solid var(--edge);
border-radius:5px;background:var(--surface);color:var(--ink-2);cursor:pointer}
#year{height:42px;padding:0 10px;font:inherit;font-size:14px;border:1px solid var(--edge);
border-radius:7px;background:var(--surface);cursor:pointer}
#q{flex:1;height:42px;padding:0 14px;font:inherit;font-size:15px;border:1px solid var(--edge);
border-radius:7px;background:var(--paper)}
#q:focus{outline:none;border-color:var(--pine);box-shadow:0 0 0 3px var(--pine-soft);background:var(--surface)}
/* The search list narrows as you type and needs no button. On one bill's own
   view it must not: re-running the search there takes the bill off the screen
   the reader is reading. So the query is held until they say so, and this and
   the Return key are how they say it. */
/* Inside the box, on the right, drawn as the key that does the same thing.
   A magnifying glass says "search"; the reader is already in a search box and
   what they need to know is that Return will run it. */
.qbox{position:relative;flex:1;display:flex}
.qbox #q{flex:1;padding-right:46px}
#qgo{position:absolute;right:4px;top:4px;width:34px;height:34px;font-size:16px;
line-height:1;border:1px solid transparent;border-radius:6px;background:none;
color:var(--ink-3);cursor:pointer}
#qgo:hover{border-color:var(--edge);background:var(--wash);color:var(--pine)}
#qgo:disabled{opacity:.35;cursor:default}
.qhint{font-size:12.5px;color:var(--ink-3);margin:7px 2px 0;display:flex;gap:16px;flex-wrap:wrap;max-width:840px}
.link{color:var(--pine);font-size:12.5px}
.shell{max-width:1180px;margin:0 auto;padding:20px 24px 80px;display:grid;
grid-template-columns:250px 1fr;gap:30px;align-items:start}
.facets{position:sticky;top:16px;max-height:calc(100vh - 40px);
overflow-y:auto;overflow-x:hidden}
.fgroup{border-bottom:1px solid var(--rule)}
.fhead{width:100%;display:flex;align-items:center;gap:8px;padding:11px 2px;font-size:13px;font-weight:600}
.fhead .chev{margin-left:auto;color:var(--ink-3);font-size:11px}
.fgroup.open .chev{transform:rotate(90deg)}
.fhead .badge{background:var(--pine);color:#fff;font-size:10.5px;padding:1px 6px;border-radius:9px;font-weight:500}
.fbody{padding:0 2px 12px;max-height:340px;overflow-y:auto;overflow-x:hidden}.fbody[hidden]{display:none}
.fopt{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13.5px;cursor:pointer}
.fopt input{accent-color:var(--pine);margin:0;flex:0 0 auto}
.fopt .c{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
/* De-emphasised by colour rather than by opacity. At .38 these came out
   at 2.3:1 while still being clickable; opacity also multiplies through
   to the count beside them, which was already the lightest text here. */
.fopt.off{color:var(--ink-3)}.fopt.off .c{color:var(--ink-3)}
.sbox{width:100%;height:32px;padding:0 9px;font:inherit;font-size:13px;
border:1px solid var(--edge);border-radius:5px;margin-bottom:7px}
.chosen{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
.pill{font-size:12px;background:var(--pine-soft);color:var(--pine);border-radius:12px;padding:2px 8px}
.pill button{margin-left:4px;color:var(--pine)}
.count{font-size:13px;color:var(--ink-3);margin:0 0 12px}
/* A bill has to read as an object, not as a band of the page. The card was
   white on #F6F6F4 behind a #E2E3E0 rule -- about three percent of lightness
   between the two -- so a screen of them ran together into one column of
   text. A firmer rule, a shadow soft enough not to be seen as a shadow, and
   a little more air between them. */
.card{position:relative;background:var(--surface);border:1px solid var(--rule-2);
border-radius:10px;margin-bottom:14px;overflow:hidden;
box-shadow:0 1px 2px rgba(25,28,29,.05)}
.card.open{box-shadow:0 3px 10px rgba(25,28,29,.08)}
.chead{width:100%;text-align:left;padding:15px 46px 15px 18px;display:block;cursor:pointer}
/* The link to a bill's own page used to sit INSIDE the .chead button.
   Nesting a link in a button is invalid and browsers disagree about
   whether the link can be reached or clicked at all, which is why it
   needed an onclick that stopped propagation. It is a sibling now, put
   in the corner with CSS, and sized as a real tap target. */
.detail{position:absolute;top:9px;right:10px;z-index:2;display:flex;
align-items:center;justify-content:center;min-width:36px;min-height:36px;
text-decoration:none;font-size:15px;color:var(--ink-3);border-radius:6px}
.detail:hover{color:var(--pine);background:var(--wash)}
/* On the focused view the reader is already looking at a detail page, and a
   bare arrow in the corner reads as a link to the one they are on. It leads
   somewhere else -- the standalone page, which needs no JavaScript and has
   its own address -- so there it says so. */
/* No corner link on the focused view. It pointed at the standalone page for
   the same bill, which from a reader's seat is the page they are already on. */
.chead:hover{background:var(--paper)}
.crow{display:flex;gap:9px;align-items:center}
/* The thing the reader is looking for. It was a point smaller than the
   title beside it, which is the wrong way round on a page of bills. */
.cnum{font-size:15.5px;font-weight:600;color:var(--pine);letter-spacing:.01em}
.cyear{font-size:12.5px;color:var(--ink-3)}
.cstat{margin-left:auto;font-size:11.5px;font-weight:500;padding:3px 10px;border-radius:20px;white-space:nowrap}
/* The status on a card head: bigger and heavier than the chips used inside a
   tab, because it is the one thing every reader looks for first. */
.crow .cstat{font-size:13.5px;font-weight:600;padding:4px 13px;
letter-spacing:.01em}
.s-active{background:var(--st-active-bg);color:var(--st-active)}
.s-law{background:var(--st-law-bg);color:var(--st-law)}
.s-done{background:var(--st-done-bg);color:var(--st-done)}
.s-veto{background:var(--st-veto-bg);color:var(--st-veto)}
.s-study{background:var(--st-study-bg);color:var(--st-study)}
/* An adopted resolution succeeded, so it reads like a bill that became
   law -- but it did not become law, and saying so would be false. Same
   colour, different word. */
.s-adopted{background:var(--st-law-bg);color:var(--st-law)}
.ctitle{font-size:15px;margin:6px 0 0;line-height:1.45}
.cmeta{font-size:12.5px;color:var(--ink-3);margin-top:6px}
.cbody{border-top:1px solid var(--rule);padding:0 18px 20px}
.cbody[hidden]{display:none}
.tabs{display:flex;gap:20px;border-bottom:1px solid var(--rule);margin:0 0 18px;flex-wrap:wrap}
.tab{padding:12px 0 10px;font-size:13.5px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--pine);font-weight:500}
.pane[hidden]{display:none}
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:14px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:14px;align-items:baseline}
.tl .d{flex:0 0 104px;font-size:12.5px;color:var(--ink-3)}
/* Same reason: the date in a routine row is --ink-3 already, and .62 on
   top of that put it at 1.9:1. These are real docket lines. */
.tl li.routine{color:var(--ink-2)}
.story{margin:16px 0 20px}
.stg{margin:0 0 14px;padding-left:13px;border-left:2px solid var(--rule-2)}
.stg:last-child{margin-bottom:0}

.stg p{margin:0;font-family:var(--serif);font-size:16px;line-height:1.6}
.sgn{display:inline-block;margin:3px 6px 0 0;padding:1px 7px;border-radius:9px;
font-size:11.5px;font-weight:600;background:var(--paper);border:1px solid var(--rule-2)}
.sgn.for{color:var(--pine);border-color:color-mix(in srgb,var(--pine) 35%,var(--rule-2))}
.sgn.against{color:var(--brick);border-color:color-mix(in srgb,var(--brick) 35%,var(--rule-2))}
.testimony{margin:8px 0 2px;padding:9px 12px;background:var(--paper);
border-left:3px solid var(--rule-2);border-radius:0 5px 5px 0;font-size:13px;
line-height:1.55}
.testimony a{font-size:12.5px}
.tnote{display:block;font-size:12px;color:var(--ink-3);margin-top:4px}
.cite{font-size:12px;color:var(--ink-3);white-space:nowrap}
a.cite{color:var(--pine)}
.status{margin-top:16px;padding:13px 15px;border-radius:7px;background:var(--st-active-bg);border-left:3px solid var(--st-active)}
.status .lab{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--st-active)}
.status .val{font-size:16px;margin-top:2px}
.status.s-law{background:var(--st-law-bg);border-left-color:var(--st-law)}.status.s-law .lab{color:var(--st-law)}
.status.s-done{background:var(--st-done-bg);border-left-color:var(--st-done)}.status.s-done .lab{color:var(--st-done)}
.status.s-veto{background:var(--st-veto-bg);border-left-color:var(--st-veto)}.status.s-veto .lab{color:var(--st-veto)}
.rc{border:1px solid var(--rule);border-radius:8px;padding:15px 17px;margin-bottom:14px}
.rchead{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.rcq{font-size:15px;font-weight:500}.rcd{font-size:12.5px;color:var(--ink-3)}
.rcres{margin-left:auto;font-size:11.5px;font-weight:500;padding:2px 9px;border-radius:20px}
.pass{background:var(--st-law-bg);color:var(--st-law)}.fail{background:var(--st-done-bg);color:var(--st-done)}
.votewrap{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;margin-top:10px}
.donut circle{cursor:pointer}.donut circle:hover{opacity:.8}
.legend{flex:1;min-width:215px}
.lrow{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px;cursor:pointer;width:100%;
text-align:left;border-bottom:1px solid var(--rule)}
.lrow:hover{background:var(--paper)}.lrow.sel{background:var(--pine-soft)}
.sw{width:11px;height:11px;border-radius:2px;flex:0 0 auto}
.sw-o{background:transparent;border:1.5px solid var(--rule-2)}
.lrow .c{margin-left:auto;color:var(--ink-2)}
.othergrp{margin-top:10px;padding-top:9px;border-top:1px dashed var(--rule-2)}
.otherhd{display:flex;font-size:12px;font-weight:600;color:var(--ink-3);padding:0 0 5px}
.otherhd .c{margin-left:auto;font-weight:400;font-style:italic}
.mlist{margin-top:12px;border-top:1px solid var(--rule);padding-top:11px}
.mlist h3{margin-top:14px}
/* 250px, not 228: names now carry an honorific and a party letter. */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px 18px}
.m{font-size:13px;padding:2px 0}.m .p{color:var(--ink-3)}
.discl{width:100%;text-align:left;font-size:13px;color:var(--pine);padding:9px 0 0;
border-top:1px solid var(--rule);margin-top:11px}
.full{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.full h3{font-size:12.5px;margin:0 0 8px;font-weight:600}
.note{font-size:12.5px;color:var(--ink-2);background:var(--paper);border-left:3px solid var(--rule-2);
padding:9px 13px;margin:0 0 12px;line-height:1.55}
.stn{position:relative;padding:0 0 18px 26px}
.stn:before{content:"";position:absolute;left:4px;top:6px;bottom:-4px;width:1px;background:var(--rule-2)}
.stn:last-child:before{display:none}
.stn:after{content:"";position:absolute;left:0;top:5px;width:9px;height:9px;border-radius:50%;
border:1.5px solid var(--pine);background:var(--surface)}
.stn.done:after{background:var(--pine)}.stn.pend:after{border-color:var(--rule-2)}
.stn .w{font-size:12px;color:var(--ink-3)}.stn .t{font-size:14px;font-weight:500}
.vbox{margin-top:9px;border:1px dashed var(--rule-2);border-radius:6px;padding:11px 13px;background:var(--paper)}
.vbox p{margin:0;font-size:12.5px;color:var(--ink-2)}
.player{margin-top:10px;border:1px solid var(--rule);border-radius:7px;overflow:hidden;background:#000}
.player iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.pstub{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
cursor:pointer;background:#14181A;color:#C8CFD1;font-size:13.5px;gap:9px;text-align:center;padding:16px}
.pstub:hover{background:#1D2225}
.pbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:9px 12px;
background:var(--surface);border-top:1px solid var(--rule);font-size:12.5px}
.jump{border:1px solid var(--edge);border-radius:5px;padding:3px 9px;font-size:12.5px;
font-variant-numeric:tabular-nums;color:var(--pine);background:var(--paper)}
.jump:hover{border-color:var(--pine);background:var(--pine-soft)}
.tolnote{color:var(--ink-3);margin-left:auto}
.won{margin-left:6px;color:var(--yes);font-weight:700}
.donut circle{transition:opacity .12s}
.rsa{white-space:nowrap}
/* Stage headings. A bill's history is a sequence of places it has been, and
   the heading is the only thing saying which of them a paragraph is about. At
   the old size they read as labels within one block of prose; each one opens a
   section, and the rule under it is what says where the last one ended. */
/* One section heading, everywhere. A tab is a set of sections and they should
   not each have their own idea of what a heading looks like: the reader learns
   the shape once. Capitals and letter-spacing at a small size read as a label
   rather than as a sentence, which is what these are. */
.stg h3,.btan h3,.bttext h3,.spgrp,.mlist h3,.amdsec{
font-size:13.5px;font-weight:600;color:var(--ink-2);letter-spacing:.05em;
text-transform:uppercase;margin:0 0 7px;padding-bottom:6px;
border-bottom:1px solid var(--rule)}
.spgrp span,.mlist h3 span{font-weight:400;letter-spacing:0;text-transform:none;
font-size:12.5px;color:var(--ink-3)}
.story .stg{margin-top:22px}
.story .stg:first-child{margin-top:2px}
.btver{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:12px}
.btv{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
background:var(--pine-soft);color:var(--pine);border-radius:5px;padding:3px 9px}
.btamd{font-size:12.5px;color:var(--ink-3)}
.btan{background:var(--wash);border-radius:8px;padding:13px 15px;margin-bottom:16px}

.btan p{font-family:var(--serif);font-size:15.5px;line-height:1.6;margin:0}
/* As close to the printed bill as text allows: a numbered section opens a
   block and what belongs to it hangs under the number instead of running back
   to the margin. */
.billbody{font-family:var(--serif);font-size:15.5px;line-height:1.65;margin:9px 0 0}
.billbody p{margin:0}
.billbody .sec{margin-top:15px;padding-left:2.4em;text-indent:-2.4em}
.billbody .sec b{font-weight:600}
.billbody .ln{margin-top:3px;padding-left:2.4em}
.billbody .sub{margin-top:7px;padding-left:4.4em;text-indent:-2em}
.billbody .rsahead{margin-top:11px;padding-left:2.4em;font-weight:600}
.billbody .enact{font-style:italic;color:var(--ink-2);margin-bottom:6px}
/* Below the tabs rather than inside them, and only in the expanded view. It
   sits still while the tabs above it change, so the text can be read against
   the votes or the hearings without either one moving. On a card in a list of
   two thousand it would be several thousand words nobody asked for. */
/* Set apart from the tabbed area rather than continuing it. The tabs are one
   object -- views of the record -- and the bill itself is another, sitting
   below them. A single rule read as one more section inside a tab. */
.btsec{margin:40px 2px 8px;padding:20px 20px 10px;background:var(--paper);
border:1px solid var(--rule-2);border-radius:9px}
.btsec > .amdsec{font-size:16px;letter-spacing:.06em;color:var(--ink);
border-bottom:0;margin:0 0 2px}
/* A line under the heading saying what this is. The tabs above are views OF
   the record; this is the document itself, and bleeding it to the card's edge
   under a small heading made it read as one more tab that had run on. */
.btwhat{font-size:12.5px;color:var(--ink-3);margin:0 0 16px}
/* The same heading shape for a report side and for a recording. Each was set
   by hand and each looked slightly different from the others and from the tab
   it sits in. */
.secsub{font-size:13.5px;font-weight:600;color:var(--ink-2);letter-spacing:.05em;
text-transform:uppercase}
.amdsteps{margin-top:24px}
.amd{padding:13px 0;border-bottom:1px solid var(--rule)}
.amdt{font-size:12.5px;color:var(--ink-2);margin:6px 0 0}
.tgt{display:inline-block;background:var(--wash);border-radius:5px;
padding:1px 7px;margin-right:4px;font-size:12px}
.amdsup{font-size:12.5px;color:var(--ink-2);margin:5px 0 0;
border-left:2px solid var(--rule-2);padding-left:9px}
.cut{text-decoration:line-through;text-decoration-thickness:1px;color:var(--ink-3)}
.amdhead{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.amdn{font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.amdk{font-size:12.5px;color:var(--ink-2)}
.amdd{font-size:12.5px;color:var(--ink-3);margin-left:auto}
.amdby{font-size:13px;color:var(--ink-2);margin:5px 0 0}
.amdtext{margin-top:8px}
.amdtext summary{font-size:13px;color:var(--pine);cursor:pointer;min-height:32px;
display:flex;align-items:center}
.amdtext p{font-family:var(--serif);font-size:15px;line-height:1.6;margin:9px 0 0}
.plink{background:var(--wash);color:var(--pine);text-decoration:none}
.plink:hover{background:var(--pine-soft);text-decoration:underline}
.spcount{font-size:13px;color:var(--ink-2);margin:0 0 12px;
font-variant-numeric:tabular-nums}
.spgrp{display:flex;align-items:baseline;gap:7px;margin-top:16px}
.loaderr{background:var(--st-done-bg);color:var(--st-done);border-radius:7px;
padding:11px 14px;margin:0 0 14px;font-size:13.5px}
.loaderr span{display:block;margin-top:5px;font-family:ui-monospace,monospace;
font-size:12px;white-space:pre-wrap;word-break:break-all}
.docket{margin-top:14px}
.docket summary{font-size:13.5px;color:var(--pine);cursor:pointer;
min-height:34px;display:flex;align-items:center;gap:7px;list-style:none}
.docket summary::-webkit-details-marker{display:none}
/* A triangle that turns, so it reads as something that opens rather than as a
   link to somewhere else. */
.caret{width:0;height:0;border-left:6px solid currentColor;
border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;
transition:transform .12s;flex:none}
.docket[open] .caret{transform:rotate(90deg)}
.docket .tl{margin-top:10px}
.docket .cite{color:var(--ink-3);font-size:12.5px}
.docs{list-style:none;margin:0;padding:0}
.doc{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:8px 0;
border-bottom:1px solid var(--rule);font-size:14px}
.doc span{font-size:12.5px;color:var(--ink-3)}
.ramd{font-weight:400;font-size:13px;color:var(--ink-2);background:var(--wash);
border-radius:5px;padding:1px 7px;font-variant-numeric:tabular-nums}
.cvote{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
color:var(--ink-2);background:var(--wash);border-radius:5px;padding:1px 7px}
/* One bill, filling the space the list was using. The facet rail goes with
   the list: nothing in it applies to a single bill. */
.shell.focused{grid-template-columns:1fr}
.shell.focused .facets{display:none}
.card.focus{border-color:var(--rule-2);box-shadow:0 1px 3px rgba(0,0,0,.05)}
.card.focus .chead{cursor:default}
/* The corner link is absolutely positioned, and .chead's 46px of right
   padding was cut to fit a 36px arrow. Named, it is four times that wide and
   sat straight over the status chip -- "Referred for i..." with the rest
   behind the button. Reserving a row above the header instead of a column
   beside it holds however wide the label gets. */
.backto{display:inline-flex;align-items:center;min-height:36px;margin:0 0 12px;
font-size:13.5px;color:var(--pine)}
.backto:hover{text-decoration:underline}
.grp{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink-2);margin:20px 0 8px;display:flex;align-items:baseline;gap:8px}
.grp:first-child{margin-top:2px}
.grp span{font-weight:400;font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.empty{background:var(--surface);border:1px dashed var(--rule-2);border-radius:9px;padding:34px;
text-align:center;color:var(--ink-3);font-size:14px}
.spin{padding:20px 2px;color:var(--ink-3);font-size:13px}
@media(max-width:860px){.shell{grid-template-columns:1fr}.facets{position:static;max-height:none}
.full{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- narrow screens ---------------------------------------------------
   Most people arrive from a search result on a phone. Three things break at
   380px, and each is fixed by reflowing rather than by horizontal scrolling,
   which on a civic site reads as "not meant for you".
     1. The facet sidebar sits beside the results; it has to stack.
     2. Timeline rows use a fixed date column that leaves no room for text.
     3. Vote tables and member lists are wider than the screen.
   Nothing is hidden at any width.                                        */
@media (max-width: 720px){
  .wrap,.in{padding-left:14px;padding-right:14px}
  h1{font-size:24px;line-height:1.2}
  h2{font-size:18px}
  .shell{display:block}
  .facets{position:static;max-height:none;width:auto;margin:0 0 20px;
          border-right:none;border-bottom:1px solid var(--rule);padding-bottom:14px}
  .fbody{max-height:210px}
  .tl li{flex-direction:column;gap:2px;padding:10px 0}
  .tl .d{flex:none;font-weight:600}
  .cite{white-space:normal}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .votes th,.votes td{padding:6px 8px;font-size:13px}
  .roll,.chosen{columns:1}
  .grid{grid-template-columns:1fr}
  /* Six labels on a 289px card wrapped onto four rows -- 138px of tab strip
     above a bill someone had already chosen. Tighter, and the longest label
     shortened, rather than a sideways scroll: this file's rule is that
     nothing reflows into horizontal scrolling, which reads as "not meant for
     you" on a civic site. */
  .tabs{flex-wrap:wrap;gap:2px 12px;margin-bottom:14px}
  .tabs button{font-size:12.5px;padding:7px 0}
  .searchrow{flex-direction:column;align-items:stretch;gap:8px}
  .searchbig{flex-direction:column}
  .searchbig button{padding:11px 20px}
  /* The term selector and the search box share a flex row, and at 375px the
     selector was squeezed to 68px -- "2025-2026 term" showing as "2025".
     Wrapping gives each a full row, which there is now room for since the
     filters below them collapse on a phone. */
  .qline{flex-wrap:wrap}
  #year{width:100%}
  /* The last filter group's rule and the block's own rule sat together. */
  .facets .fgroup:last-child{border-bottom:0}
  .qhint{flex-wrap:wrap;gap:8px}
  .crow{flex-wrap:wrap;gap:4px}
  .cnum{font-size:15px}
  .pbar{flex-wrap:wrap;gap:6px}
  .pbar .jump{font-size:12px}
  .twoup{grid-template-columns:1fr}
  .entry{grid-template-columns:1fr}
  .statgrid{grid-template-columns:1fr 1fr}
  nav.top .in{flex-wrap:wrap;gap:10px 14px;padding-top:10px;padding-bottom:10px}
  nav.top a{font-size:13.5px}
  /* The supporting text carries the site's hedging -- "estimated within
     +/- 5 min", the date of a proceeding, a sign-in count's caveat -- and
     at 12px on a phone it was the least readable part of the page. */
  .cmeta,.note,.qhint,.cite,.tolnote,.vbox p,.stn .w,.tnote,.corrections{font-size:13px}
  .m{font-size:14px}
  .fopt{padding:6px 0}
  button,.hit,summary,nav.top a,.detail{min-height:44px}
  .jump{min-height:36px;padding:6px 10px}
}
@media (max-width: 420px){
  .statgrid{grid-template-columns:1fr}
  .plegend{gap:8px;font-size:12px}
}

/* Focus must be visible. Keyboard users navigate by it, and the default
   outline is removed by most resets without anything put back. */
:focus-visible{outline:2px solid var(--pine);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--pine);color:#fff;
padding:10px 16px;z-index:99;border-radius:0 0 6px 0}
.skip:focus{left:0}
/* Reduced motion: honour the system preference rather than overriding it. */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.corrections{font-size:12.5px;color:var(--ink-3);margin-top:10px}
.corrections a{color:var(--pine)}

/* The "On the record" table: the General Court's own status fields, quoted.
   Ported verbatim from build_bill_pages.py, which rendered these bills a
   second time in Python until 7 September. */
.facts{margin:14px 0 4px}
.facts h3{font-size:13px;font-weight:600;color:var(--ink-2);letter-spacing:.04em;
text-transform:uppercase;margin:0 0 4px}
.facttab{width:auto;border-collapse:collapse;font-size:14px;margin:8px 0}
.facttab th,.facttab td{padding:6px 16px 6px 0;border-bottom:1px solid var(--rule);
text-align:left;vertical-align:top}
.facttab th{color:var(--ink-3);font-weight:500;white-space:nowrap}
@media(max-width:620px){.facttab th,.facttab td{padding:6px 10px 6px 0}}

/* ==================================== a legislator's page and a committee's ==
   Both are this app with one record open, the way a bill's page is, so they
   borrow the tabs, the panes and the timeline that view already has. What is
   here is the header each needs and the card a bill is listed as. */
.phead{max-width:1180px;margin:0 auto;padding:22px 24px 4px}
.phead h1{font-size:25px;margin:0 0 4px;letter-spacing:-.01em}
.pmeta{color:var(--ink-2);font-size:14px;margin:2px 0}
.ptowns,.pcmte{font-size:14px;color:var(--ink);margin:8px 0 0;line-height:1.6}
.ptowns b,.pcmte b{font-size:12px;letter-spacing:.05em;text-transform:uppercase;
color:var(--ink-3);font-weight:600;margin-right:6px}
.ptowns.note{color:var(--ink-3)}
.plead{margin:12px 0 4px}
.mchip{display:inline-block;margin:0 6px 6px 0;padding:3px 9px;border-radius:11px;
font-size:12.5px;background:var(--surface);border:1px solid var(--rule-2)}
.mchip i{font-style:normal;color:var(--ink-3);font-size:11.5px}
.mchip.p-R{box-shadow:inset 3px 0 0 var(--rep)}
.mchip.p-D{box-shadow:inset 3px 0 0 var(--dem)}
.mroster{margin:6px 0 0}
.mroster summary{font-size:13px;color:var(--pine);cursor:pointer}
.mlist{margin:8px 0 0}

/* The filter strip above a list of bills, and above a committee's sittings. */
.bfilt{display:flex;gap:18px;flex-wrap:wrap;align-items:end;margin:2px 0 14px}
.bfilt label{font-size:12px;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink-3);font-weight:600;display:flex;flex-direction:column;gap:4px}
.bfilt select{font:inherit;font-size:13.5px;text-transform:none;letter-spacing:0;
color:var(--ink);padding:5px 8px;border:1px solid var(--rule-2);border-radius:5px;
background:var(--paper)}

/* A bill, small enough to list a hundred of. */
.bcards{display:grid;gap:7px}
a.bcard{display:grid;grid-template-columns:88px 1fr auto;gap:12px;align-items:baseline;
padding:9px 12px;border:1px solid var(--rule);border-radius:7px;
background:var(--paper);text-decoration:none;color:inherit}
a.bcard:hover{border-color:var(--rule-2);background:var(--surface)}
.bc-n{font-weight:600;font-size:13.5px;white-space:nowrap}
.bc-t{font-size:13.5px;color:var(--ink-2);line-height:1.45}
.bc-s{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
a.bcard.s-done{box-shadow:inset 3px 0 0 var(--rule-2)}

/* One sitting day of a committee. */
.cday{margin:0 0 22px;padding:0 0 16px;border-bottom:1px solid var(--rule)}
.cday h3{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
color:var(--ink-2);margin:0 0 6px}
.cnarr{font-size:15px;line-height:1.65;margin:0 0 10px;max-width:72ch}
.ctitle{display:block;color:var(--ink-3);font-size:12.5px;line-height:1.45;
margin-top:2px}

@media(max-width:620px){
  .phead{padding:18px 20px 4px}
  .phead h1{font-size:21px}
  a.bcard{grid-template-columns:1fr;gap:3px}
  .bc-s{justify-self:start}
}

/* A member's or a committee's page: the facet panel is not drawn, so the
   column it left behind should not be either. */
.shell.nofacets{grid-template-columns:1fr}
.shell.nofacets .facets{display:none}

/* The committees index: a way into the 56 pages that nothing linked to. */
.clist{max-width:900px;margin:0 auto;padding:20px 24px 60px}
.clist h1{font-size:26px;margin:0 0 4px}
.clist h2{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:var(--ink-3);margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.ccards{display:grid;gap:7px}
a.ccard{display:block;padding:10px 13px;border:1px solid var(--rule);border-radius:7px;
background:var(--paper);text-decoration:none;color:inherit}
a.ccard:hover{border-color:var(--rule-2);background:var(--surface)}
.cc-n{display:block;font-weight:600;font-size:14.5px}
.cc-m{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* On a committee day, a start that was inferred rather than quoted. Same word
   the bill page uses, for the same reason. */
.cday .approx{display:block;font-style:normal;font-size:11px;color:var(--ink-3)}