, one depth per U.S. Code nesting level: (a) -> (1) -> (A) -> (i) -> (I). Each depth level adds one more --stx-indent of hanging indent so multi-line clauses wrap back to the marker's column, not the page margin. Purely additive: does not modify .woven-text / .usc-text / any pre-existing rule, so those stay in force for the surrounding container (font, size, pre-wrap, etc.) exactly as before — these rules only govern the new per-line wrapper divs. */ :root { --stx-indent: 1.4em; } .stx-block { display: block; } .stx-line { display: block; /* Hanging indent: the block itself sits one level deeper than the marker (depth + 1), and text-indent pulls just the FIRST line (where the marker lives) back by one indent step, so wrapped continuation lines land flush under the marker's text, not under the marker itself. */ padding-left: calc(var(--stx-indent) * (var(--stx-depth, 0) + 1)); text-indent: calc(var(--stx-indent) * -1); } .stx-d0 { --stx-depth: 0; } .stx-d1 { --stx-depth: 1; } .stx-d2 { --stx-depth: 2; } .stx-d3 { --stx-depth: 3; } .stx-d4 { --stx-depth: 4; } .stx-d5 { --stx-depth: 5; } /* ===================================================================== ndaa-redline-yoh.6 — Tablet / phone responsiveness. Primary use case: Hill staffer reading redlines on a tablet on a train. 768-1024px (both orientations) is the polished target; phone (down to ~390px) just needs to be usable. Purely additive — no existing rule above this block is modified. Three breakpoints, mobile-first cascade (each narrower query layers on top of the wider ones before it). ===================================================================== */ /* Horizontal-scroll escape hatch for wide admin tables on narrow viewports. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Hamburger button — only relevant at <=900px where the sidebar becomes an off-canvas drawer; hidden above that so desktop/large-tablet-landscape layouts are untouched. */ .drawer-toggle { display: none; background: transparent; border: 1px solid rgba(252, 250, 243, 0.4); color: var(--surface); border-radius: 6px; padding: 0.35rem 0.6rem; font-size: 1.1rem; cursor: pointer; line-height: 1; } .drawer-toggle:hover { border-color: var(--copper-light); color: var(--copper-light); } /* Backdrop behind the off-canvas drawer. Only ever shown (opacity/visibility toggled via .drawer-backdrop--visible) at <=900px; JS adds/removes the modifier class, this block just defines its resting (hidden) state so it never paints or intercepts clicks above the drawer breakpoint or before JS toggles it. */ .drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 40; } /* ndaa-redline-yoh.9 (P5c) — finalized compare-view CSS. Replaces P5b's minimal verification scaffolding (grid + sticky heading proved correct, kept as-is) with the column divider and z-index polish it was intentionally left without. Two-column grid on desktop/tablet-landscape; the pre-existing Tier 2 (<=900px) !important override below still forces a single-column stack and is untouched by this phase. */ .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } /* Vertical divider between the House and Senate columns — a grid gap alone reads as ambiguous whitespace at this width; a hairline rule makes the two-column comparison intentional rather than looking like an accidental layout wrap. Only the second (Senate) column gets the border so a single divider sits in the gap, not two redundant lines. */ .compare-column:nth-child(2) { border-left: 1px solid var(--muted); padding-left: 1.5rem; } .compare-column-heading { position: sticky; top: 0; background: var(--cream); font-family: var(--font-mono); font-size: 0.95rem; color: var(--forest); padding: 0.4rem 0; margin: 0 0 0.5rem; border-bottom: 2px solid var(--copper-light); /* Below the off-canvas drawer (z-index 50) and its backdrop (z-index 40) so the sticky column heading can never paint over the drawer when it's open on a narrower viewport that hasn't yet hit the Tier 2 stack breakpoint's own layout changes; still above ordinary in-flow content (default stacking context) so it reliably occludes scrolled-past panel content beneath it. */ z-index: 5; } /* --------------------------------------------------------------------- Tier 1 — <=1024px: tighten paddings, shrink sidebar + search input. Tablet landscape (1024x768) lands right at this boundary and should still show sidebar + content side by side, just snugger. --------------------------------------------------------------------- */ @media (max-width: 1024px) { header { padding: 0.6rem 1rem; } .content { padding: 1.25rem 1.5rem; } .sidebar { width: 220px; min-width: 200px; } .header-search input[type="search"] { width: 160px; } .stat-grid { gap: 0.75rem; } } /* --------------------------------------------------------------------- Tier 2 — <=900px: tablet portrait, the important breakpoint. Sidebar becomes an off-canvas drawer (fixed, translated off-screen until opened); header wraps to two rows so the FY selector / search / auth nav don't get crushed into one unreadable line. --------------------------------------------------------------------- */ @media (max-width: 900px) { header { flex-wrap: wrap; row-gap: 0.5rem; } .header-center { order: 3; width: 100%; } .drawer-toggle { display: inline-block; order: 0; } .layout { position: relative; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; max-width: 82vw; z-index: 50; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3); } .sidebar--open { transform: translateX(0); } .drawer-backdrop { display: block; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; } .drawer-backdrop--visible { opacity: 1; visibility: visible; } .content { padding: 1rem; } /* Pre-added for P5 (gated, unbuilt): stack the compare view to a single column at tablet-portrait width and below. No .compare-grid element exists yet, so this is a harmless no-op today — it lets P5 ship without needing to touch this breakpoint again. */ .compare-grid { grid-template-columns: 1fr !important; } } /* --------------------------------------------------------------------- Tier 3 — <=600px: phone-usable (not polished). Full single-column stack, smaller monospace text so statute lines wrap reasonably, and a tighter --stx-indent so hanging indents (P3b) don't eat the whole screen width on deeply nested clauses. --------------------------------------------------------------------- */ @media (max-width: 600px) { :root { --stx-indent: 1em; } .content { padding: 0.75rem; } .header-search input[type="search"] { width: 110px; } .fy-label { display: none; } .stat-grid { grid-template-columns: 1fr; } .markup-card { width: 100%; } .usc-text, .woven-text, .redline-para, .full-rewrite-text { font-size: 0.85rem; } }