/* ========================================================================== mobile.css — phone layout for every v2 page. Loaded LAST on every page so its overrides beat site.css (frozen design system), composite-patch.css and billpage-patch.css without any of them being edited. Why this file exists: distribution is a Signal group opened on phones, and below ~900px the desktop split view (3fr/2fr) rendered as two unusable slivers. Jay's ruling, 2026-08-01. Contract, in one line each: - one column below 900px: .mast, .board, .split and .sec all stack; - the source panel (.right) stops being a column and becomes a bottom sheet over the lower 55vh, hidden until a row is opened; - the sheet carries a visible close affordance (.sheet-close) that returns the reader to the text spine; - at >=900px NOTHING here applies: the approved desktop layout is untouched, which is why every rule below sits inside the media query except the two that hide the close affordance on desktop. The two mechanisms differ because the pages differ. The composite runs a small inline script already (open(n)); it toggles body.panel-open and the close button clears it. The bill pages are deliberately JavaScript-free, so the sheet opens on :has(.sec:target) — the same selector billpage-patch.css already uses to reveal a panel — and the close affordance is an that retargets the URL at the inert #closed anchor in templates/billpage.html. ========================================================================== */ /* Desktop: the sheet affordance does not exist. Outside the media query so it is hidden even on the pages that never open a sheet. */ .sheet-close{display:none;} @media (max-width: 899px){ /* ---------- page frame ---------- 56px of side padding is a third of a 390px screen. 18px throughout. */ body{max-width:none;} /* ---------- chrome / nav ---------- The wordmark is a sentence, not a logotype, so it takes its own line and wraps; the three nav items (ruling 19) stay on one line at a smaller size, which is the whole reason the chrome stacks rather than wrapping as a row. */ .chrome{flex-direction:column;align-items:flex-start;gap:6px; height:auto;padding:12px 18px 0;} .wordmark{font-size:11.5px;line-height:1.4;letter-spacing:.045em;} nav{gap:20px;flex-wrap:nowrap;white-space:nowrap;align-self:stretch;} nav a{font-size:11.5px;padding:8px 0 7px;} /* ---------- masthead + map board: the 1fr/300px grids stack ---------- The meta rail's left rule becomes a top rule; it is a separator either way. */ .mast,.mast.tight{grid-template-columns:1fr;gap:22px;padding:24px 18px 22px;} .board{grid-template-columns:1fr;gap:26px;padding:22px 18px 40px;} .meta,.legend{border-left:none;border-top:1px solid var(--rule); padding-left:0;padding-top:16px;margin-top:0;} h1{font-size:27px;} h1.bill{font-size:25px;} .dek,.subdek,.entries,.strip-note{max-width:none;} .entries{margin-top:16px;} .sec-label,.sum-head{flex-wrap:wrap;gap:3px 12px;} /* ---------- summary rows: chip / text / link stack ---------- billpage-patch.css compresses these rows to one desktop scan line with `.summary .sum-row` selectors; the overrides below carry at least the same specificity, or the three-column grid would survive past the breakpoint. */ .summary{padding:22px 18px 24px;} .sum-head,.sum-lede,.sum-row,.strip .sec-label{max-width:none;} .sum-lede{font-size:17px;margin:11px 0 16px;} .summary .sum-row{grid-template-columns:1fr;gap:5px;padding:10px 0 9px;} .summary .sum-row.hi{margin:0 -18px;padding:11px 18px;max-width:none;} .sum-x>summary.sum-line{flex-direction:column;align-items:flex-start;gap:5px;} .sum-x>summary.sum-line>div:first-child{flex:none;} .summary .sum-t,.summary .sum-row.hi .sum-t{font-size:15px;} .sum-l{text-align:left;white-space:normal;} .sum-drop{margin-left:0;max-width:none;} .sum-list{grid-template-columns:1fr;} /* ---------- the split becomes one column ---------- */ .split{grid-template-columns:1fr;} .left{padding:24px 18px 40px;} .bill-head{padding:0 0 18px;text-align:left;} .assembled{margin-left:0;max-width:none;} .strip{padding:22px 18px 32px;} .page{padding:24px 18px 40px;} .prose{max-width:none;} /* ---------- statute rows: rail on top, text below ---------- site.css hangs .sec 20px into the left gutter so the selection bar sits outside the text column. At 390px that gutter is off-screen, so the row un-hangs and the bar moves to x=0 — otherwise the page scrolls sideways. */ .sec,.contd,details.sec>summary.sec-row{grid-template-columns:1fr; gap:9px;} .sec{margin:0 0 6px;padding:14px 0 15px 12px;} .split.bill .sec{padding:15px 0 16px 12px;margin-bottom:4px;} .sec.newhi{padding-top:16px;padding-bottom:18px;margin-bottom:18px;} .sec.newhi::before,.sec.sel::before,.split.bill .sec:target::before{left:0;} .rail{flex-direction:row;flex-wrap:wrap;align-items:center; justify-content:flex-start;text-align:left;gap:7px;padding-top:0;} .rail>*{margin-top:0 !important;} .rail .secno,.contd .secno{text-align:left;} .chip.vs,.chip.same,.chip.new,.chip.newf,.chip.scope, .chip.tag-tightens,.chip.tag-matches,.chip.tag-new{max-width:none;} .leg,.split.bill .leg,.meaning,.contd p{max-width:none;} .meaning{grid-column:1;margin-top:13px;} .drop{grid-column:1;margin-left:0;padding-left:0;max-width:none;} .contd{margin-top:22px;} /* ---------- the source panel becomes a bottom sheet ---------- Fixed to the lower 55vh, slid out of view until a row is opened. It is `position:fixed`, so it takes no space in the stacked column and the spine keeps its own scroll. */ .right{ position:fixed;left:0;right:0;bottom:0;top:auto; height:55vh;max-height:55vh;width:auto;align-self:auto; padding:14px 18px 26px; background:var(--panel); border-left:none;border-top:1px solid var(--rule); box-shadow:0 -8px 26px rgba(55,50,40,.20); overflow-y:auto;overscroll-behavior:contain; z-index:60; transform:translateY(100%);visibility:hidden; transition:transform .22s ease-out, visibility .22s; } /* Composite: the inline script sets body.panel-open on open(n). */ body.panel-open .right, /* Bill pages: JS-free — the same :has(.sec:target) billpage-patch.css uses. */ .split.bill:has(.sec:target) .right{transform:translateY(0);visibility:visible;} /* Neither panel stack sticks inside the sheet — the sheet is the viewport. */ .panelwrap,.right>.panel{position:static;top:auto;} .right .src,.right .note p,.right .p-cite{max-width:none;} .facts{grid-template-columns:96px 1fr;column-gap:12px;} /* ---------- compact card typography in the sheet ---------- The desktop card steps its type down inside a min-width query, so below 900px the sheet was still inheriting site.css's full-size SPINE metrics (14.5px statute, 20px title) — the widest column on the site rendered at the narrowest width. Same numbers as the desktop card: 55vh of phone is less room than the card has, not more. */ .right .p-eyebrow{font-size:8.5px;letter-spacing:.14em;} .right .p-head{margin-bottom:10px;} .right .p-title{font-size:16px;margin-bottom:5px;} .right .p-cite{font-size:10.5px;} .right .p-rule{margin:13px 0;} .right .src{font-size:12px;line-height:1.7;} .right .p-more{font-size:10.5px;margin-top:12px;padding-top:10px;} .right .note{margin-top:15px;padding-top:12px;} .right .note h3{font-size:8.5px;letter-spacing:.13em;margin-bottom:5px;} .right .note p{font-size:11px;line-height:1.56;} /* Room to keep reading the spine underneath an open sheet. */ body.panel-open .left, .split.bill:has(.sec:target) .left{padding-bottom:58vh;} /* ---------- close affordance ---------- A