/* ==========================================================================
   LAWMAP v2 — bill-page patch. Scoped to site/states/*.html; loaded AFTER
   site.css, which stays the frozen design system and is not edited here.

   Everything below exists because the frozen system describes a static mockup
   (mock3e_textspine.html) and the built page has two behaviours the mockup only
   depicted: every provision row is a dropdown (ruling 2) and the tag chip opens
   the source panel on the right (rulings 2, 4). Both are done with native HTML
   and CSS — <details>/<summary> and :target/:has() — so the pages carry no
   JavaScript. Visual metrics are inherited, not restated.
   ========================================================================== */

/* ---------- rows as dropdowns ----------
   .sec is a grid in site.css; on a <details> that grid has to move onto the
   <summary>, which is the part that stays visible when the row is closed. */
details.sec{display:block;}
details.sec>summary.sec-row{display:grid;grid-template-columns:var(--railw) 1fr;
  gap:var(--railgap);cursor:pointer;list-style:none;}
details.sec>summary.sec-row::-webkit-details-marker{display:none;}
details.sec[open]>summary.sec-row .openat{color:var(--ink-3);}

/* the provision heading is OURS, not the statute's: Söhne, quiet, above the text
   (BRAND.md — Tiempos is statute and display only, Söhne is everything editorial) */
.leg .ourhead{font-family:'Sohne',-apple-system,sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;}

/* dropdown body: the per-provision facts the summary layer compresses away */
.drop{grid-column:2;max-width:620px;margin:14px 0 2px var(--railw);
  padding:14px 0 2px calc(var(--railgap));border-top:1px solid var(--rule-2);}
.drop .facts{margin-top:0;padding-top:0;border-top:none;}
.drop .dlink{margin-top:14px;font-size:11.5px;letter-spacing:.02em;}
.drop .dlink a,.drop .facts a{color:var(--blue-ink);text-decoration:none;
  border-bottom:1px solid rgba(30,127,169,.35);padding-bottom:1px;}

/* ---------- tag chip as the panel control ---------- */
a.chip{text-decoration:none;cursor:pointer;}
a.chip:hover{border-color:var(--blue-d);}

/* ---------- the split, and which panel is open ----------
   One panel is visible on load (.panel.default, mock3e's compared row). As soon
   as any row is targeted the generated pairing rules in the page's <style>
   reveal that row's panel, and the default steps aside. */
.panelwrap{position:sticky;top:24px;}
.panel{display:none;}
.panel.default{display:block;}
.split.bill:has(.sec:target) .panel.default{display:none;}

/* selection state (register B, blue): the targeted row, styled like .sec.sel */
.split.bill .sec:target{background:rgba(65,196,252,.085);}
.split.bill .sec:target::before{content:"";position:absolute;left:-20px;top:0;bottom:0;
  width:2px;background:var(--blue-d);}
.split.bill .sec:target .chip.vs,.split.bill .sec:target .chip.tag-tightens{
  color:#fff;background:var(--ca);border-color:var(--ca);}
.split.bill .sec:target .secno{color:var(--ink-2);}
.split.bill .sec:target .openat{color:var(--blue-ink);}
/* a targeted NEW row keeps its editorial band (register A stays purple) and
   takes the selection bar only — the two registers never merge into one look */
.split.bill .sec.newhi:target{background:rgba(138,86,181,.075);}
/* once the reader picks a row, the load-time selection lets go */
.split.bill:has(.sec:target) .sec.sel:not(:target){background:none;}
.split.bill:has(.sec:target) .sec.sel:not(:target)::before{content:none;}
.split.bill:has(.sec:target) .sec.sel:not(:target) .chip.vs{
  color:var(--ca);background:none;border-color:rgba(38,88,185,.42);}

/* ---------- long bill titles ----------
   mock3e sets no display on its bill h1 — the title is ordinary inline flow
   ("Public Act 104-0538 <span class=thin>· AI Safety Measures Act</span>").
   site.css added `display:flex;flex-wrap:wrap`, which makes the thin span one
   atomic flex item: the real MA and CA titles ("· Transparency in Frontier
   Artificial Intelligence Act") cannot fit beside the bill number, so the whole
   span dropped to line 2 with the middot orphaned at its head. Restoring the
   mock's inline flow lets the title wrap word by word as it does in the PNG. */
h1.bill{display:block;}

/* ---------- long citations ----------
   mock3e's rail was sized for "Sec. 10(d)". Real cites run to
   "G.L. c. 93M s. 1 (proposed), definition of 'Catastrophic risk'", and the
   frozen `white-space:nowrap` pushed those off both edges of the page. Cites
   wrap here rather than being shortened: a trimmed citation is a wrong one. */
.split.bill .secno,.split.bill .contd .secno{white-space:normal;overflow-wrap:break-word;}
/* .rail is a column flexbox: its children size to content and would otherwise
   spill out of the 132px rail and off the left edge of the page. */
.split.bill .rail>*{max-width:100%;}
.summary .sum-l,.strip .sum-l{white-space:normal;overflow-wrap:break-word;}

/* ---------- the promoted NEW band ----------
   site.css drops the rule between banded rows so one promoted row reads as a
   single band; where a state has several NEW rows they still need separating. */
.summary .sum-row.hi + .sum-row.hi{border-top:1px solid rgba(138,86,181,.22);}

/* the "compared →" affordance is quiet until the row is the one being shown */
.split.bill .openat{color:var(--ink-3);}
.split.bill .sec.sel .openat{color:var(--blue-ink);}

/* ==========================================================================
   THE SOURCE CARD (desktop only) — Jay, 2026-08-01:
   "a static thing that does not scroll ... less than half of the page in width
   ... clearly like a box that fills up with leg text as needed ... font size
   smaller too. remove the delta section."

   The right side stops being a full-height scrolling column. site.css line
   119-120 (`.right{height:100vh;overflow-y:auto}`) is FROZEN and is overridden
   here, never edited: the column becomes plain page ground and the open panel
   becomes a bounded box — panel fill, hairline rule, the 2px radius the chips
   already use — that ends where its text ends. .panelwrap keeps the sticky, so
   the card rides along while the reader scrolls the spine.

   Inside the min-width query, so mobile.css keeps the <900px bottom sheet
   exactly as approved. The sheet KEEPS its internal scroll: 55vh is not enough
   room to sit still, which is why the desktop card can drop the scrollbar and
   the sheet cannot.
   ========================================================================== */
@media (min-width: 900px){
  /* ~64/36 — the card is comfortably under half the page. */
  .split.bill{grid-template-columns:9fr 5fr;}
  .split.bill .right{position:static;height:auto;align-self:stretch;overflow:visible;
    background:none;border-left:none;padding:34px 44px 60px 30px;}
  .split.bill .panelwrap{top:26px;}
  .split.bill .panel{background:var(--panel);border:1px solid var(--rule);
    border-radius:2px;padding:22px 24px 24px;}

  /* Two steps smaller inside the card (statute 14.5px -> 12px, metadata to
     match). Same metrics as the composite card: one card, two pages. */
  .split.bill .p-eyebrow{font-size:8.5px;letter-spacing:.14em;}
  .split.bill .p-head{margin-bottom:10px;}
  .split.bill .p-title{font-size:16px;margin-bottom:5px;}
  .split.bill .p-cite{font-size:10.5px;}
  .split.bill .p-rule{margin:13px 0;}
  .split.bill .src{font-size:12px;line-height:1.7;max-width:none;}
  .split.bill .p-more{font-size:10.5px;margin-top:12px;padding-top:10px;}
}

/* The continuation affordance under a trimmed excerpt: where the card stops,
   the official text carries on. Styled at every width — the bottom sheet needs
   it as much as the card does. */
.p-more{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);
  font-size:11.5px;letter-spacing:.02em;}
.p-more a{color:var(--blue-ink);text-decoration:none;
  border-bottom:1px solid rgba(30,127,169,.35);padding-bottom:1px;}

/* ---------- "also on the books" strip ---------- */
.strip .sec-label{max-width:1160px;margin-bottom:2px;}
.strip .sum-row:first-of-type{border-top:none;}

/* ==========================================================================
   READING UX (Jay, 2026-08-01): "the ui is clunky on the bills page. the high
   level summaries take up so much space and then when i click on where they
   came from they shoot me down to the bottom of the page to the bill text."

   Two fixes, both CSS only — these pages carry no JavaScript (test_mobile M6).
   ========================================================================== */

/* ---------- 1. summary density ----------
   The frozen metrics gave each bullet ~62px (16.5px Tiempos, 13/12 padding, a
   two-line chip and, on the promoted row, a second prose line), so an 18-row
   act pushed the statute a viewport and a half down. A closed row is now one
   scan line at ~31px; everything longer moved INTO the dropdown, nothing was
   deleted. Rulings 15 and 16 are untouched: delta sentence first, NEW ->
   TIGHTENS -> MATCHES, chips inline in the scan column, one editorial band. */
.summary{padding:22px 56px 24px;}
.sum-head{margin-bottom:3px;}
.sum-lede{font-size:18.5px;line-height:1.4;margin:11px 0 15px;}
.summary .sum-row{grid-template-columns:168px 1fr 152px;padding:6px 0 5px;}
.summary .sum-t{font-size:14.5px;line-height:1.38;}
.summary .sum-l{font-size:11px;}
/* the chip is the scan column: one line, left-aligned, so rows keep a common
   baseline instead of being set by a two-line chip */
.summary .chip{max-width:none;white-space:nowrap;text-align:left;
  font-size:9px;letter-spacing:.085em;padding:2px 6px 1.5px;line-height:1.35;}
/* the promoted band keeps its register, at the new rhythm */
.summary .sum-row.hi{padding:8px 18px 7px;}
.summary .sum-row.hi .sum-t{font-size:15.5px;}

/* ---------- rows that expand ----------
   The <details> spans the chip and heading columns of the row grid; the cite
   link is its sibling in column 3, never its child (a closed <details> hides
   everything but its <summary>). The summary line is a flex whose first box is
   the width of the chip column, so expandable and plain rows stay aligned. */
.sum-x{grid-column:1/3;}
.sum-x>summary.sum-line{display:flex;gap:0 20px;align-items:baseline;
  cursor:pointer;list-style:none;}
.sum-x>summary.sum-line::-webkit-details-marker{display:none;}
.sum-x>summary.sum-line>div:first-child{flex:0 0 168px;}
/* the only affordance saying there is more under the line */
.sum-x>summary.sum-line .sum-t::after{content:" ▸";font-family:'Sohne',sans-serif;
  font-size:8.5px;color:var(--ink-3);vertical-align:1px;}
.sum-x[open]>summary.sum-line .sum-t::after{content:" ▾";color:var(--blue-ink);}
.sum-drop{margin:7px 0 3px 188px;padding-top:8px;
  border-top:1px solid var(--rule-2);max-width:900px;
  font-size:12px;line-height:1.6;color:var(--ink-3);}
.sum-why{margin-bottom:8px;}
.sum-facts{display:grid;grid-template-columns:104px 1fr;column-gap:14px;row-gap:3px;}
.sum-facts dt{font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);padding-top:2px;}
.sum-facts dd{color:var(--ink-2);}
.sum-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:3px 24px;}
.sum-list a{color:var(--ink-2);text-decoration:none;}
.sum-list a:hover{color:var(--blue-ink);}
.sum-list .c{color:var(--blue-ink);border-bottom:1px solid rgba(30,127,169,.35);
  margin-left:7px;font-size:11px;letter-spacing:.02em;white-space:nowrap;}

/* ---------- 2. arrival ----------
   A cite link used to teleport: the row appeared hard against the top edge with
   no sign of what had just happened. Now the page glides, the row lands with
   room above it, and it flashes once so the eye finds it. */
html{scroll-behavior:smooth;}
#summary{scroll-margin-top:16px;}
.split.bill .sec{scroll-margin-top:96px;scroll-margin-bottom:32px;}

@keyframes sec-landed{
  0%,20%{background:rgba(65,196,252,.34);}
  100%{background:rgba(65,196,252,.085);}
}
@keyframes sec-landed-new{
  0%,20%{background:rgba(138,86,181,.30);}
  100%{background:rgba(138,86,181,.075);}
}
.split.bill .sec:target{animation:sec-landed 1.5s ease-out 1;}
.split.bill .sec.newhi:target{animation:sec-landed-new 1.5s ease-out 1;}

/* ---------- the way back ----------
   Appears only once a spine row is targeted — i.e. only after a jump. Clicking
   it retargets the URL at #summary, which scrolls back AND drops :target off
   the row, so the source panel (and, on a phone, the bottom sheet) closes. */
.split.bill>.tosum{display:none;position:fixed;left:20px;bottom:20px;z-index:70;
  font-family:'Sohne',-apple-system,sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;
  background:var(--off);border:1px solid var(--rule);border-radius:2px;
  padding:8px 12px 7px;box-shadow:0 2px 10px rgba(55,50,40,.16);}
.split.bill>.tosum:hover{color:var(--ink);border-color:var(--blue-d);}
.split.bill>.tosum:focus-visible{outline:2px solid var(--blue-d);outline-offset:2px;}
.split.bill:has(.sec:target)>.tosum{display:inline-block;}

/* Motion is an affordance, not a requirement. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .split.bill .sec:target,.split.bill .sec.newhi:target{animation:none;}
}