/**
 * DWF GTG + Agency Component Library -- the real missing stylesheet.
 *
 * ROOT CAUSE, confirmed by direct inspection of the live theme's actual
 * base.css (1,470 real lines): it contains ZERO of the canonical Style
 * Guide's own component classes (.link-rows, .powers-grid, .page-head,
 * .stepper-connected, etc.). The Style Guide DOCUMENT defines these
 * components with real, complete CSS -- but that CSS was apparently
 * never actually copied into the live theme. Confirmed on a second,
 * unrelated GTG page (Budget Process) showing the exact same
 * completely-unstyled symptom as Agency pages, using a genuinely
 * different subset of the vocabulary (.stepper-connected, .num-circle,
 * .page-head) -- proving this is a sitewide gap, not agency-specific.
 *
 * THIS FILE = the Style Guide's own real CSS (extracted directly from
 * Content_and_Style_Guide_DWF.html's <style> block, 553KB source doc)
 * PLUS the agency-specific additions from Agency-Level1-Directory-
 * Mockup.html that the Style Guide doesn't cover on its own.
 *
 * SUPERSEDES the earlier agency-family.css delivered previously --
 * that file was correctly-built but too narrowly scoped (only the
 * agency-specific vocabulary, only enqueued on dwf_agency). This file
 * is the complete, sitewide-correct replacement.
 *
 * Excluded from the agency-specific additions: .link-card-grid (dead
 * code -- already eliminated from all real content by the earlier
 * link-fix rewrite pass, which converted every instance to .link-rows;
 * shipping CSS for a class nothing uses would just be noise), and two
 * regex-extraction artifacts (.wp-title-bar, a stray decimal fragment)
 * that aren't real selectors.
 */

/* ============ CANONICAL STYLE GUIDE BASE ============ */

:root{
  --ink:#171717; --muted:#55514d; --rule:#ddd7cf; --soft:#f4f1ec; --paper:#fff;
  --font:Arial,Helvetica,sans-serif; --serif:Georgia,'Times New Roman',serif;

  --president:#1F3F6B;
  --house:#9C2140;
  --senate:#541D34;
  --judicial:#246042;
  --agencies:#3E6BA3;

  --flag-bg:#fff4f4; --flag-red:#B3261E;
}
*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55}
h1,h2,h3,h4,p,dl,dt,dd,figure,ul,ol,blockquote,cite{margin:0}
/* 2026-08-09: blockquote and cite added -- real bug found from a rendered
   screenshot: the Quotes component's "fill the full container width"
   behavior wasn't visible because a browser's default blockquote margin
   (roughly 1em 40px) was pushing the element inward on every side,
   creating a visible gap that looked like an intentional beige border
   even though the CSS said width:100%. width:100% is correct relative to
   the containing block; the leftover default margin was the actual bug. */
img{display:block;max-width:100%}
a{color:var(--ink)}
.shell{max-width:1180px;margin:0 auto;padding:0 32px 96px}

/* Page header + TOC */
.page-head{padding:56px 0 32px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.page-head h1{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(32px,4.2vw,50px);letter-spacing:-.02em;margin-bottom:16px}
.page-head p{max-width:760px;color:var(--muted);font-size:17px;line-height:1.6}

/* 2026-08-30: real feature build, per direct request -- the single
   shared page-title component every custom template (President, Agency,
   State, Congress Member, Senate/House/Congress, blog posts) renders
   through, via dwf_render_page_title() in functions.php. Replaces
   Avada's native title bar entirely for these content types (suppressed
   via body_class -- see dwf_uses_custom_title_block() in functions.php)
   rather than fighting Avada's per-page Page Options, which is where
   Chapter/TOC's maroon title color turned out to be coming from --
   confirmed by direct search: nothing in this stylesheet or any other
   theme file set that color, meaning it was an untracked, non-version-
   controlled per-post setting. This class is the fix: one real,
   version-controlled rule instead of relying on Avada meta boxes.
   Deliberately NOT reusing .page-head above -- that's a real, separately
   -used in-content component (has its own bottom rule + intro paragraph
   pattern), not the page's own top-level title. Deliberately NOT
   italic -- italic is Chapter Hub's own exclusive signature
   (.dwf-hub-wrap .hero h1, chapter-hub.css), explicitly excluded from
   this unification per direct instruction. */
.dwf-page-title{font-family:var(--serif);font-style:normal;font-weight:400;font-size:clamp(36px,4.6vw,56px);line-height:1.05;letter-spacing:-.02em;color:var(--house);margin:0 0 8px}
.dwf-page-title-wrap{padding:56px 0 0}
@media (max-width:782px){.dwf-page-title-wrap{padding:32px 0 0}}
.toc{background:var(--soft);border-radius:10px;padding:24px 28px;margin:32px 0 56px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px 24px}
.toc p{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.toc a{font-size:14.5px;text-decoration:none;color:var(--ink);padding:3px 0;display:block}
.toc a:hover{text-decoration:underline}

/* Part dividers */
.part-head{padding:40px 0 8px;margin-top:24px}
.part-num{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.part-title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(28px,3.6vw,42px);letter-spacing:-.02em;margin-top:6px}
.part-intro{max-width:760px;color:var(--muted);margin-top:12px;font-size:16px;line-height:1.6}

section.topic{margin-bottom:56px;padding-top:8px}
.section-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.section-title{font-size:23px;font-weight:700;letter-spacing:-.01em;margin-bottom:12px}
.section-intro{max-width:760px;color:var(--muted);margin-bottom:24px}

/* Input needed flag */
.input-needed{color:var(--flag-red);font-family:var(--font);font-weight:900;font-size:15px;letter-spacing:.02em;background:var(--flag-bg);border:1px solid var(--flag-red);border-radius:6px;padding:10px 16px;display:inline-block;margin-bottom:14px}
.flag-box{border:1px solid var(--flag-red);background:var(--flag-bg);border-radius:8px;padding:18px 22px;margin-bottom:28px}
.flag-box p{color:var(--ink);font-size:14.5px;line-height:1.55}
.flag-box p+p{margin-top:10px}

/* Rule list (definition-style) */
.rule-list{border-top:1px solid var(--rule)}
.rule-list article{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--rule)}
.rule-list h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.rule-list p{color:var(--muted);font-size:14.5px;line-height:1.55}
.rule-list ul{color:var(--muted);font-size:14.5px;line-height:1.6;padding-left:18px}

/* Palette swatches */
.palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.swatch{border-radius:10px;overflow:hidden;border:1px solid var(--rule)}
.swatch-color{height:88px}
.swatch-info{padding:14px 16px;background:var(--paper)}
.swatch-info .role{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.swatch-info .hex{font-family:'Courier New',monospace;font-size:13.5px;font-weight:700}
.swatch-info .rel{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}

/* Boxes */
.box{border-radius:12px;color:#fff;padding:26px}
.box img.icon{width:58px;height:58px;object-fit:contain;flex-shrink:0}
.box .box-head{display:flex;gap:16px;align-items:flex-start}
.box .eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.78;margin-bottom:8px}
.box h3{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;line-height:1.1;margin-bottom:12px}
.box p.desc{font-size:14px;line-height:1.55;opacity:.95}
.box .stats{display:grid;gap:9px;margin-top:16px}
.box .stats > div,.box .stats > a{background:rgba(255,255,255,.12);border-radius:8px;padding:9px 11px;color:#fff;text-decoration:none;display:block}
.box .stats a{transition:background .15s}
.box .stats a:hover{background:rgba(255,255,255,.22)}
.box .stats span{display:block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;opacity:.72;margin-bottom:2px}
.box .stats strong{display:block;font-family:var(--font);font-style:normal;font-size:17px;line-height:1.05}
/* 2026-08-09: corrected from 27px/bold to 17px/regular weight -- the
   earlier 27px treatment (see the two dated notes below) is superseded by
   this instruction, not merged with it. Kept the prior notes for the
   record rather than deleting them, since they explain a real design
   back-and-forth, but this is the current standard. */
/* 2026-07-22: italic removed -- confirmed as its own specific rule,
   separate from (and not contradicting) the earlier confirmation that
   this size was correct: smaller boxes nested within a larger color box
   (like these stat cells) don't use the italic serif treatment that's
   reserved for a box's own headline. */
/* 2026-07-22: updated from an earlier 14px/non-italic spec after live
   implementation and review -- large, italic-serif numbers read as more
   prominent and confident inside the chamber boxes than the original
   compact treatment did. Confirmed as the standard going forward. */
.box a.link{display:inline-block;margin-top:16px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-decoration:none}
.box a.link:hover{opacity:.85}

.box-hero{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;padding:32px 36px}
.box-hero img.icon{width:58px;height:58px}
.box-hero .stats{grid-template-columns:repeat(2,1fr);margin-top:0;min-width:250px}

.box-standard{max-width:400px}
.box-standard .stats{grid-template-columns:1fr 1fr}

.box-tall{max-width:210px;display:flex;flex-direction:column;text-align:center;align-items:center}
.box-tall img.icon{margin:0 auto 14px}
.box-tall .box-head{flex-direction:column;align-items:center}
.box-tall .stats{grid-template-columns:1fr;width:100%}

.box-simple{max-width:400px}

.box-examples{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;align-items:start}
.box-examples .box-tall{grid-row:span 2}
.box-caption{margin-top:9px;font-size:12px;color:var(--muted)}

/* Quote -- one component, any width. Quotation marks flank the text (open
   left, close right), a red rule spans 33% of the width, centered, above
   the whole block. Marks are aligned to the top of the text so their extra
   height overflows below the text, not above it. Citation right-aligns to
   the text column's own width, not the full element width (the marks sit
   outside that column). White background always, regardless of size or
   where it sits on a page.
   2026-08-09: corrected from two fixed max-widths (680px / 300px) to a
   fluid component that fills whatever width its container provides, and
   centers itself both horizontally and vertically within that space --
   the container sets the size, not the component itself. The "wide" and
   "narrow" demos below are now just two different container widths, not
   two different component variants. */
.quote{background:#fff;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.quote .rule{display:none}
.quote-body{display:flex;gap:16px;align-items:center}
.quote--narrow .quote-body{gap:10px}
.quote-mark{font-family:var(--serif);font-size:112px;line-height:.7;color:#a39784;flex-shrink:0}
.quote--narrow .quote-mark{font-size:76px}
.quote-text{flex:1;min-width:0}
.quote-text p{font-family:var(--serif);font-style:normal;font-size:22px;line-height:1.4;color:var(--ink)}
.quote--narrow .quote-text p{font-size:16px}
.quote-text cite{display:block;text-align:right;margin-top:12px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Beige box -- the one deliberate exception to "always white text."
   Reuses the family's existing neutral light background rather than a new color. */
.box-beige{background:var(--soft);color:var(--ink);border:1px solid var(--rule)}
.box-beige .eyebrow{color:var(--muted);opacity:1}
.box-beige h3{color:var(--ink)}
.box-beige p.desc{color:var(--muted);opacity:1}
.box-beige .stats > div,.box-beige .stats > a{background:#fff;border:1px solid var(--rule)}
.box-beige .stats span{color:var(--muted);opacity:1}
.box-beige .stats strong{color:var(--ink)}
.box-beige a.link{color:var(--ink)}
.box-beige img.icon{filter:invert(1) grayscale(1) opacity(.6)}

/* Table */
table.compare{width:100%;table-layout:fixed;border-collapse:collapse;font-size:14px;margin-bottom:14px}
table.compare th,table.compare td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--rule)}
table.compare thead th{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--soft)}
table.compare thead th.house-col{color:#fff;background:var(--house)}
table.compare thead th.senate-col{color:#fff;background:var(--senate)}
table.compare thead th.president-col{color:#fff;background:var(--president)}
table.compare thead th.judicial-col{color:#fff;background:var(--judicial)}
table.compare thead th.agencies-col{color:#fff;background:var(--agencies)}
table.compare tbody td.house-col{background:rgba(156,33,64,.08);color:var(--house);font-weight:700}
table.compare tbody td.senate-col{background:rgba(84,29,52,.08);color:var(--senate);font-weight:700}
table.compare tbody td.president-col{background:rgba(31,63,107,.08);color:var(--president);font-weight:700}
table.compare tbody td.judicial-col{background:rgba(36,96,66,.08);color:var(--judicial);font-weight:700}
table.compare tbody td.agencies-col{background:rgba(62,107,163,.08);color:var(--agencies);font-weight:700}
table.compare tbody td:first-child{font-weight:700;text-transform:uppercase;font-size:11.5px;letter-spacing:.03em}
.table-narrow{max-width:320px}
.table-narrow table.compare{font-size:13px}
.table-narrow th,.table-narrow td{padding:8px 10px}
.two-up{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:start}

.tabset{border:1px solid var(--rule);border-radius:10px;overflow:hidden;max-width:640px}
.tabset input{position:absolute;opacity:0;pointer-events:none}
.tabset-nav{display:flex;border-bottom:1px solid var(--rule)}
/* 2026-08-09: background removed -- inactive tabs should show no fill at
   all, not a beige wash across the whole bar. Only the active tab (white
   background + black bottom line, rule below) should read as visually
   distinct. */
.tabset-nav label{flex:1;text-align:center;padding:12px 10px 9px;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--muted);cursor:pointer;border-right:1px solid var(--rule);border-bottom:4px solid transparent}
.tabset-nav label:last-child{border-right:0}
#tab-a:checked ~ .tabset-nav label[for="tab-a"],
#tab-b:checked ~ .tabset-nav label[for="tab-b"],
#tab-c:checked ~ .tabset-nav label[for="tab-c"]{color:var(--ink);font-weight:900;background:#fff;border-bottom-color:var(--tab-accent, var(--ink))}
/* 2026-08-09: real bug found and fixed -- the previous selector was
   ".tabset input:checked + label", which requires label to be the
   input's immediate next sibling. It never was: the labels sit inside
   .tabset-nav, a sibling of the inputs, not the labels themselves. That
   selector has never matched anything since this component was written --
   every visual fix applied to it in earlier rounds was correct in value
   but invisible in practice. Corrected to the same ID-scoped general-
   sibling pattern already working correctly for .tabset-panels below. */
.tabset-panels{position:relative;padding:20px 22px}
.tabset-panel{display:none;font-size:14.5px;color:var(--muted);line-height:1.6}
#tab-a:checked ~ .tabset-panels .panel-a,
#tab-b:checked ~ .tabset-panels .panel-b,
#tab-c:checked ~ .tabset-panels .panel-c{display:block}

/* Process-flow arrow chain -- boxes connected across a real sequence,
   each box in its own correct color per the process-flow exception */
.flow-chain{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.flow-chain .flow-box{flex:1;min-width:160px;border-radius:10px;color:#fff;padding:16px 18px}
.flow-chain .flow-box span{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:4px}
.flow-chain .flow-box strong{display:block;font-size:14.5px;line-height:1.3}
.flow-arrow{display:flex;align-items:center;justify-content:center;width:44px;font-size:20px;color:var(--muted);flex-shrink:0}
@media (max-width:700px){.flow-chain{flex-direction:column}.flow-arrow{width:100%;height:28px;transform:rotate(90deg)}}

/* Leadership list -- two columns, one per chamber, each header colored to its chamber */
.leadership-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.leadership-col{border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.leadership-col h4{margin:0;padding:12px 18px;color:#fff;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.leadership-col ol{list-style:none;counter-reset:lead;margin:0;padding:6px 18px 14px}
.leadership-col li{counter-increment:lead;position:relative;padding:12px 0 12px 26px;border-top:1px solid var(--rule)}
.leadership-col li:first-child{border-top:0}
.leadership-col li::before{content:counter(lead);position:absolute;left:0;top:12px;font-family:var(--serif);font-style:italic;font-weight:700;color:var(--muted)}
.leadership-col strong{display:block;margin-bottom:3px;font-size:14px}
.leadership-col span{display:block;color:var(--muted);font-size:13px;line-height:1.45}
@media (max-width:700px){.leadership-grid{grid-template-columns:1fr}}

/* Powers grid -- icon + text, 3 columns */
.powers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 26px}
.powers-grid > div{display:flex;gap:12px;align-items:flex-start}
.powers-grid img{width:30px;height:30px;flex-shrink:0;object-fit:contain}
.powers-grid h4{font-size:14px;font-weight:700;margin-bottom:4px}
.powers-grid p{font-size:12.5px;color:var(--muted);line-height:1.45}
@media (max-width:800px){.powers-grid{grid-template-columns:1fr 1fr}}
@media (max-width:500px){.powers-grid{grid-template-columns:1fr}}

/* Committee cards */
.committee-list{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.committee-list article{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:14px 18px;border-top:1px solid var(--rule)}
.committee-list article:first-child{border-top:0}
.committee-list h4{font-size:14.5px;font-weight:700;margin-bottom:3px}
.committee-list p{font-size:13px;color:var(--muted);line-height:1.4}
.committee-list .chamber-tag{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;color:#fff;white-space:nowrap}

/* Lookup form */
.lookup-form{border:1px solid var(--rule);border-radius:10px;padding:24px 26px;max-width:480px;background:var(--soft)}
.lookup-form--plain{background:#fff}
.lookup-form h4{font-size:16px;margin-bottom:6px}
.lookup-form p{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.lookup-form .row{display:flex;gap:10px}
.lookup-form input[type=text]{flex:1;padding:11px 14px;border:1px solid var(--rule);border-radius:6px;font-size:14px;font-family:var(--font)}
.lookup-form button{padding:11px 20px;border:0;border-radius:6px;background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;cursor:pointer}
.lookup-form button:hover{opacity:.85}
.lookup-form .form-actions{display:flex;justify-content:flex-end;margin-top:14px}
.lookup-form .field-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}
.lookup-form .field-grid .row-3{display:grid;grid-template-columns:1fr 90px 110px;gap:10px}
.lookup-form label{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.lookup-form input[type=text]{width:100%;padding:11px 14px;border:1px solid var(--rule);border-radius:6px;font-size:14px;font-family:var(--font)}

/* Info table -- definition-style rows for reference pages. Lines removed
   2026-08-09; spacing alone separates rows now. */
.info-table{width:100%;border-collapse:collapse}
.info-table th,.info-table td{text-align:left;vertical-align:top;padding:11px 16px 11px 0}
.info-table th{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);width:30%}

/* Snapshot strip -- 4-across facts, for agency/case profile pages. Lines
   removed 2026-08-09 (top/bottom rules and the rules between items) --
   gap alone separates the cells now. */
.snapshot-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.snapshot-strip div{padding:0}
.snapshot-strip span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.snapshot-strip strong{display:block;font-size:16px}
@media (max-width:700px){.snapshot-strip{grid-template-columns:1fr 1fr}}

/* Callout block -- a highlighted aside within an article, distinct from the branded boxes in Part 4.
   Icon is optional; when present it's black (not white), since this sits on a light background,
   using the same left-of-content alignment as the boxes above. */
.callout-block{background:var(--soft);border-radius:8px;padding:22px 26px}
.callout-block .box-head{display:flex;gap:16px;align-items:flex-start}
.callout-block img.icon{width:58px;height:58px;object-fit:contain;flex-shrink:0;filter:invert(1) grayscale(1)}
.callout-block .eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.callout-block h4{font-size:19px;margin-bottom:8px}
.callout-block p{font-size:14px;color:var(--muted);line-height:1.55}

/* Side-tab switcher -- vertical nav on the left, content on the right */
.side-tabset{display:grid;grid-template-columns:200px 1fr;gap:36px}
.side-tabset input{position:absolute;opacity:0;pointer-events:none}
.side-nav{display:flex;flex-direction:column}
.side-nav label{padding:13px 14px 13px 16px;border-bottom:1px solid var(--rule);border-left:3px solid transparent;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer}
#side-a:checked ~ .side-nav label[for="side-a"],
#side-b:checked ~ .side-nav label[for="side-b"],
#side-c:checked ~ .side-nav label[for="side-c"]{color:var(--ink);border-left-color:var(--ink);background:var(--soft)}
/* 2026-08-09: same real bug as the tab switcher above -- ".side-tabset
   input:checked + label" never matched, since the labels live inside
   .side-nav, not directly adjacent to the inputs. This means the
   "already correct" claim made about this component in an earlier round
   was wrong -- it was never actually verified against the real DOM
   structure, only against the CSS property values in isolation. Corrected
   to the same ID-scoped pattern as the panels below, which does work. */
/* 2026-07-22: this used --house as a stand-in color for this generic demo,
   which caused a real bug when implemented literally -- shared/neutral
   pages (a Congress overview page, or any page not owned by one specific
   chamber) showed one chamber's color regardless of context, and worse,
   a page for the OTHER chamber sometimes inherited the wrong one. Default
   is neutral ink now. The one legitimate exception: a page that generally
   IS one specific chamber's own content (an individual Representative's
   or Senator's own profile page, for instance) may use that chamber's own
   color here, since at that point the color is correctly describing whose
   content it is, not bleeding across contexts it doesn't belong to. When
   in doubt, default to neutral. */
.side-panels{position:relative}
.side-panel{display:none}
#side-a:checked ~ .side-panels .side-panel-a,
#side-b:checked ~ .side-panels .side-panel-b,
#side-c:checked ~ .side-panels .side-panel-c{display:block}
.side-panel a{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--rule);color:var(--house);font-weight:700;font-size:14px;text-decoration:none}
@media (max-width:700px){.side-tabset{grid-template-columns:1fr}}

/* Nested content tab -- a small horizontal tab set living inside one content
   pane, affecting only that pane, never the side-nav around it */
.nested-tabs{border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.nested-tabs input{position:absolute;opacity:0;pointer-events:none}
.nested-tabs-nav{display:flex}
/* 2026-08-09: background removed, same reason as the tab switcher above --
   inactive tabs show no fill, only the active tab's bottom line stands out. */
.nested-tabs-nav label{padding:8px 16px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent}
#nt-a:checked ~ .nested-tabs-nav label[for="nt-a"],
#nt-b:checked ~ .nested-tabs-nav label[for="nt-b"]{color:var(--ink);border-bottom-color:var(--ink)}
/* 2026-08-09: same real bug as the tab switcher and side-tab switcher
   above -- the labels live inside .nested-tabs-nav, not directly adjacent
   to the inputs, so "input:checked + label" never matched here either.
   Corrected to the same ID-scoped pattern. */
/* 2026-08-09 (earlier same day): separately, this was also hardcoded to
   --house as a demo stand-in color at one point, the same bug already
   caught for the side-tab switcher -- corrected to neutral ink by
   default, a chamber color only when the page genuinely is that
   chamber's own content. Both notes kept since they're two different
   real bugs, not one. */
.nested-tabs-panels{padding:16px 18px;font-size:13.5px;color:var(--muted);line-height:1.55}
.nested-panel{display:none}
#nt-a:checked ~ .nested-tabs-panels .nt-panel-a,
#nt-b:checked ~ .nested-tabs-panels .nt-panel-b{display:block}

/* Step-by-step link navigation -- one visible control at a time (a "next"
   link with an arrow), not a persistent tab bar, for content meant to be
   read in a fixed order rather than jumped around in */
.step-nav{border:1px solid var(--rule);border-radius:8px;padding:18px 20px}
.step-nav input{position:absolute;opacity:0;pointer-events:none}
.step-nav .step-count{display:none;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.step-nav .step-body{display:none;font-size:14px;color:var(--ink);line-height:1.55;margin-bottom:14px}
.step-nav .step-next{color:var(--house);font-weight:700;font-size:13.5px;text-decoration:none;cursor:pointer}
#sn-1:checked ~ .step-1-count, #sn-1:checked ~ .step-1-body, #sn-1:checked ~ .step-1-next,
#sn-2:checked ~ .step-2-count, #sn-2:checked ~ .step-2-body, #sn-2:checked ~ .step-2-next,
#sn-3:checked ~ .step-3-count, #sn-3:checked ~ .step-3-body{display:block}
.step-nav label{display:none}
#sn-1:checked ~ label.step-1-next, #sn-2:checked ~ label.step-2-next{display:inline-block}

/* Tabbed process paths -- wide descriptive tab buttons that switch a stepper below */
.path-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.path-tabs input{position:absolute;opacity:0;pointer-events:none}
.path-tabs label{flex:1;min-width:150px;border:1px solid var(--rule);border-radius:8px;padding:12px 14px;cursor:pointer}
.path-tabs label strong{display:block;font-size:13.5px;margin-bottom:3px}
.path-tabs label span{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.path-tabs input:checked + label{border:2px solid var(--ink);background:var(--soft)}
.path-tabs input:checked + label strong::before{content:'\25B8 \0020'}
.path-panel{display:none}
#path-a:checked ~ .path-panels .path-panel-a,
#path-b:checked ~ .path-panels .path-panel-b{display:block}

/* Process / stepper -- compact version. Numbered italic text, no circles,
   no connecting line. Used where space is tight, e.g. inside Tabbed
   process paths below -- not the primary/default look for this
   component family, which is the connected-circle version underneath it. */
.stepper{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.step{padding-top:0}
.step .num{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--muted);display:block;margin-bottom:4px}
.step h4{font-size:14px;font-weight:700;margin-bottom:4px}
.step p{font-size:12.5px;color:var(--muted);line-height:1.45}

/* Process steps -- connected-circle version, the primary look for a real
   sequential process. Numbered circles joined by a single horizontal line
   running behind them; each step's label and description sit below its
   own circle. Added 2026-08-09 -- the compact stepper above existed, but
   this is the actual documented Process steps component from the
   reference material and was missing entirely. */
.stepper-connected{display:flex;position:relative}
.stepper-connected .step-c{flex:1;text-align:center;position:relative;padding:0 6px}
.stepper-connected .step-c:not(:last-child)::after{content:'';position:absolute;top:24px;left:50%;width:100%;height:1px;background:var(--rule);z-index:0}
.stepper-connected .num-circle{width:48px;height:48px;border-radius:50%;border:1px solid var(--rule);background:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--house);margin:0 auto 12px;position:relative;z-index:1}
.stepper-connected .step-c h4{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;color:var(--ink)}
.stepper-connected .step-c p{font-size:13px;color:var(--muted);line-height:1.5;max-width:190px;margin:0 auto}

/* Process steps -- beige-wrapped variant. Same connected-circle stepper,
   inside a beige box with a title, lede, and an optional "full guide"
   link -- the box-beige treatment applied as a section wrapper rather
   than a card. */
.process-wrap{background:var(--soft);border-radius:12px;padding:32px 36px}
.process-wrap .process-wrap-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.process-wrap h4{font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;margin-bottom:6px}
.process-wrap .process-wrap-head p{font-size:14px;color:var(--muted);line-height:1.5;max-width:520px}
.process-wrap .process-wrap-link{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--house);text-decoration:none;white-space:nowrap}
.process-wrap .process-wrap-link:hover{text-decoration:underline}

/* Process card grid -- a different shape from the stepper: full cards
   connected by arrows rather than circles on a line, each card carrying a
   roman numeral, a title, a description, and its own short link list
   (reusing Link row's list arrangement inside the card) for what to read
   next about that step. Genuinely different component, not a stepper
   variant -- use when each step deserves its own supporting links, not
   just a label and a sentence. */
.process-card-chain{display:flex;align-items:stretch;gap:0}
.process-card{flex:1;background:var(--soft);border-radius:10px;padding:22px 24px}
.process-card .numeral{display:block;font-family:var(--serif);font-style:italic;font-size:34px;color:var(--house);margin-bottom:10px}
.process-card h4{font-size:15px;font-weight:700;margin-bottom:6px}
.process-card p{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:14px}
.process-card .link-rows--list{border-top:1px solid var(--rule);padding-top:4px}
.process-card .link-rows--list .link-row{padding:8px 0}
.process-card .link-rows--list .link-row h4{font-size:12.5px;font-weight:700;margin:0}
.process-card-arrow{display:flex;align-items:center;justify-content:center;width:36px;font-size:16px;color:var(--muted);flex-shrink:0}
@media (max-width:900px){.process-card-chain{flex-direction:column;gap:16px}.process-card-arrow{display:none}}

/* Content creation / auditing */
.dos-donts{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.dos-donts .col h4{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.dos-donts .col.do h4{color:var(--judicial)}
.dos-donts .col.dont h4{color:var(--house)}
.dos-donts ul{padding-left:18px;color:var(--muted);font-size:14px;line-height:1.6}
.dos-donts li{margin-bottom:6px}

.phase-list{counter-reset:phase}
.phase{border-top:1px solid var(--rule);padding:18px 0;display:grid;grid-template-columns:56px 1fr;gap:18px}
.phase .n{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--muted)}
.phase h4{font-size:14.5px;font-weight:700;margin-bottom:6px}
.phase p{font-size:14px;color:var(--muted);line-height:1.55}
.phase ul{color:var(--muted);font-size:13.5px;line-height:1.6;padding-left:18px;margin-top:6px}

.verdict-row{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.verdict{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:7px 14px;border-radius:999px;border:1px solid var(--rule)}
.verdict.approve{background:rgba(36,96,66,.1);color:var(--judicial);border-color:var(--judicial)}
.verdict.light{background:rgba(46,78,122,.1);color:var(--president);border-color:var(--president)}
.verdict.revise{background:rgba(160,120,20,.1);color:#8a6a12;border-color:#c9a227}
.verdict.rebuild{background:rgba(156,33,64,.1);color:var(--house);border-color:var(--house)}

.check-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:8px}
.check-grid div{border-top:2px solid var(--rule);padding-top:10px}
.check-grid h5{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.check-grid p{font-size:12.5px;color:var(--muted);line-height:1.5}

footer.page-foot{border-top:1px solid var(--rule);margin-top:64px;padding-top:24px;color:var(--muted);font-size:12.5px}

/* Pill list -- meta-only tags (topics, categories). Always the neutral
   beige treatment from the box-beige exception, never a branch/chamber
   color -- a pill is not a chamber tag. See Committee list above for the
   component that actually carries chamber color (name + jurisdiction +
   colored tag); pills and chamber tags look similar but are not
   interchangeable, and this distinction was corrected here after an
   earlier draft conflated them. */
.pill-list{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-block;background:var(--soft);color:var(--muted);border:1px solid var(--rule);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;letter-spacing:.02em;text-decoration:none}
a.pill:hover{color:var(--ink);border-color:var(--ink)}

/* Filter bar + filter grid -- 2026-08-10, a genuinely new component, not
   a rename of something that already existed. Fills a real gap: every
   other interactive component in this guide (.tabset, .path-tabs,
   .nested-tabs, .side-tabset) is a pure-CSS radio-input switch between
   mutually exclusive panels -- exactly one panel visible at a time,
   driven entirely by :checked ~ sibling selectors, no JS required. A
   filter is a different interaction, not just a differently-shaped
   version of the same one: an item can belong to more than one category
   at once (a bureau can be both "Public" and "Regional" simultaneously),
   and clicking "All" has to reset to showing everything rather than
   switching to one more exclusive panel among several. Neither of those
   is expressible with the sibling-selector trick, which can only ever
   show one fixed, predetermined panel per input -- it has no way to ask
   "does this specific item's category list include the one just
   clicked." That requires actually reading each item's data at click
   time, which means this is the first genuinely JS-dependent interactive
   component in the system, and deliberately so, not a stylistic
   shortcut: a real functional requirement the existing CSS-only pattern
   cannot meet, confirmed by trying to force-fit .tabset and .path-tabs
   onto this need first and finding neither actually works for it.

   Built for exactly the case that motivated it: an agency or bureau
   directory long enough that showing every item at once becomes a wall
   of text (15 Cabinet departments, 30-40 bureaus under one department),
   where the visitor's real job is "find the one I need," not "read
   everything." Reuses .pill's exact visual language for the buttons
   (same radius, padding, border, type treatment) rather than inventing a
   new button style, and reuses the same bordered-card-grid look already
   established for directory listings elsewhere in this Part.

   Markup contract: a .filter-bar immediately followed by its .filter-grid
   (the JS below assumes that adjacency -- nextElementSibling -- rather
   than requiring hand-matched IDs per instance, so this same script
   works for every filter-bar/filter-grid pair on a page without
   per-instance wiring). The first button is always data-filter="all" and
   always resets to showing everything. Every filterable card carries
   data-filter as a space-separated list of every category it belongs to
   -- "public regional", not just its single primary category -- since
   an item genuinely can match more than one active filter. */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filter-bar button{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 14px;border:1px solid var(--rule);border-radius:999px;background:#fff;color:var(--muted);cursor:pointer}
.filter-bar button:hover{border-color:var(--ink);color:var(--ink)}
.filter-bar button.active{background:var(--ink);border-color:var(--ink);color:#fff}
.filter-grid{display:grid;gap:0;border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.filter-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.filter-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.filter-grid .card{padding:16px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:#fff}
.filter-grid.cols-2 .card:nth-child(2n){border-right:0}
.filter-grid.cols-3 .card:nth-child(3n){border-right:0}
.filter-grid .card.filter-hide{display:none}
.filter-grid .card h4{font-size:13.5px;font-weight:700;line-height:1.3;margin-bottom:5px}
.filter-grid .card p{font-size:12.5px;color:var(--muted);line-height:1.4;margin-bottom:8px}
.filter-grid .card .foot{display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding-top:8px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.filter-grid .card .foot .est{color:var(--muted)}
.filter-grid .card .foot a{color:var(--house)}
@media(max-width:700px){.filter-grid.cols-2,.filter-grid.cols-3{grid-template-columns:1fr}.filter-grid .card{border-right:0}}

/* Date tile -- month/day block for a specific date (an election, a
   deadline, a hearing). Two-tone: a colored header strip for the month, a
   white body for the day number, bordered. Corrected 2026-08-09 -- an
   earlier round invented a solid dark tile with white text throughout,
   which wasn't actually what the reference material documented; this is
   the real two-tone version. Header strip color is flexible with one
   hard rule: never one of the five official branch/chamber colors from
   Part 2, since that would misread as branded content when a date tile
   isn't about a branch at all. */
.date-tile{display:inline-grid;grid-template-rows:auto 1fr;width:64px;background:#fff;border:1px solid var(--rule);border-radius:6px;overflow:hidden;text-align:center;flex-shrink:0}
.date-tile .month{display:block;background:#1e5c38;color:#fff;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:4px 0}
.date-tile .day{font-family:var(--serif);font-weight:700;font-size:28px;line-height:1.1;color:var(--ink);padding:6px 0 8px}

/* Accent card -- a single bordered card, or several side by side, for
   content that deserves a bit more visual weight than plain body text but
   isn't branch/chamber-specific and doesn't need the full colored-box
   treatment from earlier in this Part. White background, no color rule
   across the top -- an earlier draft used one and it read as an unlabeled
   sixth "official color," which this component is specifically not. */
/* Accent card -- corrected 2026-08-09: this is the beige box treatment
   from the box library above (soft background, dark text, the one
   deliberate exception to always-white-text), simplified down to a
   smaller card -- not a separate white-bordered card as documented
   before. Icon is optional, same ink-colored-icon convention used
   wherever an icon sits on a light rather than colored background. */
.accent-card{background:var(--soft);border-radius:10px;padding:20px 22px}
.accent-card .box-head{display:flex;gap:14px;align-items:flex-start}
.accent-card img.icon{width:28px;height:28px;flex-shrink:0;object-fit:contain}
.accent-card h4{font-size:15px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.accent-card p{font-size:13.5px;color:var(--muted);line-height:1.55}
.accent-card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* Link row family -- one underlying unit (title, optional description,
   optional left icon, right-aligned arrow) arranged three ways: a plain
   stacked list, a card grid (multi-column + padding, no chrome), or an
   icon-bearing "highlighter" grid. Same building block every time. No
   arrangement uses a border or background -- corrected 2026-08-09; the
   card version went through two corrections, first losing its border,
   then its background too, until it was distinguished purely by layout.
   Column count is flexible in all three (1 col stacked, 2-up, 3-up, 4-up,
   or any other combination a page needs), set with a cols-N modifier on
   the container. Replaces an earlier draft that documented "Official
   links" as its own separate card-grid component -- checked against real
   production markup and confirmed it's the same row unit as Link list and
   Content Highlighter, just a different arrangement, not a fourth
   component. */
.link-rows{display:grid;gap:14px}
.link-rows.cols-1{grid-template-columns:1fr}
.link-rows.cols-2{grid-template-columns:1fr 1fr}
.link-rows.cols-3{grid-template-columns:repeat(3,1fr)}
.link-rows.cols-4{grid-template-columns:repeat(4,1fr)}
.link-row{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.link-row img.icon{width:34px;height:34px;flex-shrink:0;object-fit:contain}
.link-row .link-row-text{flex:1;min-width:0}
.link-row h4{font-size:14px;font-weight:700;margin-bottom:3px}
.link-row p{font-size:12.5px;color:var(--muted);line-height:1.4}
.link-row .arrow{flex-shrink:0;font-size:16px;color:var(--muted)}
.link-row:hover .arrow{color:var(--ink)}

/* List arrangement -- stacked, no border, no icon, no divider rule between
   rows. Corrected 2026-08-09: a border-bottom had crept in here, which
   directly contradicted this arrangement's own original spec ("no bullets,
   no horizontal rules") -- removed rather than kept as an undocumented
   variant. */
.link-rows--list .link-row{padding:10px 0}

/* Card arrangement -- soft background per row, no icon, no border. Corrected
   2026-08-09: was bordered; removed per the same faint-lines correction
   applied to the list arrangement earlier. Background tint (not a border)
   is what now distinguishes this from the plain list arrangement above. */
/* Card arrangement -- corrected again 2026-08-09: no background, no
   border. What distinguishes this from the list arrangement is padding
   and grid placement (typically multi-column), not any container chrome.
   Hover state uses text/arrow color only, no fill. */
.link-rows--cards .link-row{padding:16px 18px}
.link-rows--cards .link-row:hover h4{color:var(--ink);text-decoration:underline}

/* Highlighter arrangement -- icon present, no border, no divider lines,
   items align to the top since descriptions may run to different heights */
.link-rows--highlight .link-row{align-items:flex-start}

/* Optional plain-text header above a single instance of this component --
   no icon, so it never competes visually with the icons in a highlighter
   arrangement underneath it. Placing several headed instances side by
   side (each its own column, each its own row count) is ordinary layout
   using this component more than once, not a separate grouped variant. */
.link-row-group h4.group-head{font-family:var(--font);font-size:23px;font-weight:700;letter-spacing:-.01em;margin-bottom:14px;color:var(--ink)}
/* 2026-08-09: sized to match this doc's own h3.section-title exactly
   (23px/700/-.01em) -- was 13px uppercase, which read as a small label
   rather than a real section header. */
@media (max-width:900px){.link-rows.cols-4{grid-template-columns:1fr 1fr}}

/* Highlighter, micro-label variant -- 2026-08-09: added, confirmed missing
   until now. A real gap found in the original "New Component Guides" draft
   files, which included a "6-piece section overview" pattern (icon + title
   + body + a small uppercase tag line underneath, e.g. "Article II duty",
   "Shared powers") explicitly noted there as being for "Presidential
   powers / section overview designs." This never made it through the
   original Assembly-to-Guide consolidation pass -- the base Highlighter
   arrangement was correctly consolidated, this one extra variant of it was
   not. Same .link-rows--highlight wrapper; each row's text block gets one
   additional <span class="micro"> after the description. Color choice
   (--muted, not a colored accent) matches this guide's own existing
   pattern for small supporting labels (.section-eyebrow uses the same
   treatment) -- the original draft used its own one-off accent color that
   doesn't map to this guide's five official branch colors, so muted gray
   was chosen as the safe, consistent default rather than guessing at an
   accent; revisit if a specific rendered reference ever shows otherwise. */
.link-row .micro{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* Quick Links directory -- one column treatment, two arrangements. The
   only difference between them is whether a leading intro column (title +
   one-line description) is present -- corrected 2026-08-09 from two
   separate systems (plain version used bullets, "Quick Link Guide" used a
   rule-per-item) down to one shared per-item-rule treatment, so the two
   arrangements really are just "with or without the intro column" and
   nothing else. Site-wide utility component, not tied to any one
   branch/chamber, so no color beyond ordinary theme link color. */
.quick-link-cols{display:grid;gap:32px;padding:28px 0}
/* 2026-08-09: top/bottom framing border removed -- this was the line
   visible in the faint-lines screenshot. Per-item lines inside each
   column (below) are left as-is since those came directly from your own
   reference screenshot of the live page; flagging in case you want those
   gone too rather than assuming. */
.quick-link-guide-intro h4{font-size:19px;font-weight:800;margin-bottom:8px}
.quick-link-guide-intro p{font-size:13.5px;color:var(--muted);line-height:1.5}
.quick-link-guide-col h4{font-size:14px;font-weight:700;margin-bottom:6px}
.quick-link-guide-col a{display:block;padding:9px 0;border-bottom:1px solid var(--rule);font-size:13.5px;color:var(--ink);text-decoration:none}
.quick-link-guide-col a:last-child{border-bottom:0}
.quick-link-guide-col a:hover{text-decoration:underline}

@media (max-width:900px){
  .toc{grid-template-columns:1fr 1fr}
  .palette-grid{grid-template-columns:repeat(2,1fr)}
  .box-examples{grid-template-columns:1fr}
  .box-examples .box-tall{grid-row:auto;max-width:400px;align-items:flex-start;text-align:left}
  .box-tall img.icon{margin-left:0}
  .box-hero{grid-template-columns:1fr;text-align:left}
  .box-hero .stats{grid-template-columns:1fr 1fr}
  .rule-list article{grid-template-columns:1fr;gap:6px}
  .two-up{grid-template-columns:1fr}
  .dos-donts{grid-template-columns:1fr}
  .stepper{grid-template-columns:1fr 1fr}
  .check-grid{grid-template-columns:1fr 1fr}
  .phase{grid-template-columns:1fr}
  .lookup-form-demo{grid-template-columns:1fr !important}
  .accent-card-row{grid-template-columns:1fr}
  .link-rows.cols-2,.link-rows.cols-3,.link-rows.cols-4{grid-template-columns:1fr}
  .quick-link-cols{grid-template-columns:1fr 1fr}
  .quick-link-cols.with-intro{grid-template-columns:1fr 1fr}
}


/* ============ AGENCY-SPECIFIC ADDITIONS (not in the Style Guide itself) ============ */
.page-cap{max-width:1320px;margin:0 auto;padding:0 3rem 72px}
.filter-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.duty-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:10px 0 22px}
.program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0 22px}
.info-card{border:1px solid var(--rule);border-radius:10px;padding:18px 16px;background:#fff;display:flex;flex-direction:column}
.side-stack{display:grid;gap:14px}
.facts-box{background:var(--paper);border-radius:10px;overflow:hidden}
.facts-box-header{background:var(--agencies);color:#fff;padding:12px 16px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.fact{margin:0 16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.fact-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--agencies);margin-bottom:3px}
.fact-value{font-size:14.5px;font-weight:700;line-height:1.3}
.side-card{background:var(--paper);border-radius:10px;padding:18px 16px}
.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.body-wrap{display:grid;grid-template-columns:1fr 280px;gap:48px;margin:28px 0 40px;align-items:start}
.article h2{font-size:20px;font-weight:700;margin:32px 0 10px}
.agency-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.hero-pair{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:center;padding:28px 0;border-bottom:1px solid var(--rule)}
.parent-band{margin-top:28px;padding:16px 18px;border:1px solid var(--rule);border-radius:10px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.callout{background:var(--paper);border-radius:10px;padding:18px 20px;margin:16px 0}
.level-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--soft);color:var(--muted);padding:4px 10px;border-radius:999px;margin:12px 0 0}
.dir-intro{max-width:680px;padding:32px 0 8px}
.sec{margin-top:40px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.dept-row{display:grid;grid-template-columns:40px 1fr 120px;gap:0;border-top:1px solid var(--rule);padding:12px 0}
.dept-num{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--rule)}
.dept-name{font-size:14px;font-weight:800;display:block;margin-bottom:2px}
.dept-desc{font-size:12.5px;color:var(--muted);line-height:1.4}
.dept-year{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--agencies)}
/* ============ dwf-family-hero (real content wrapper, missing before) ============ */
/* 8/23/26: the top-of-page hero (dek/lede text + the quote block) was
   rendering as plain stacked text, not the intended side-by-side
   layout -- confirmed the real content wrapper is .dwf-family-hero,
   not .hero-pair (which only existed in the mockup's own demo markup
   with different content). Modeled on .hero-pair's real 2-column
   intent above, adapted to this class's actual real children (a plain
   div containing .dek/.lede, and a sibling .quote blockquote). */
.dwf-family-hero{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:center;padding:28px 0;border-bottom:1px solid var(--rule);margin-bottom:28px}
.dwf-family-hero .dek{font-size:18px;font-weight:700;line-height:1.35;margin-bottom:8px}
.dwf-family-hero .lede{font-size:15px;line-height:1.6;color:var(--ink)}
@media(max-width:900px){.dwf-family-hero{grid-template-columns:1fr}}

/* ============ Native Avada title bar suppression (reliable CSS approach) ============ */
/* 8/23/26: confirmed via real screenshot that the fusion_get_page_option_override
   filter attempt did not actually suppress Avada's native title bar
   (Budget Process still showed a visibly duplicate title). This is the
   guaranteed-to-work fallback -- straightforward CSS hide, scoped to
   the dwf-hide-native-title-bar body class added by functions.php. */
/* 2026-08-30: real bug fix, found via a live view-source export of a
   blog post -- the duplicate title on posts was never a content-level
   duplicate at all. Avada has TWO separate, independent title
   mechanisms: the classic per-post title bar (.avada-page-titlebar-
   wrapper, suppressed below) and a newer Theme Builder "Page Title Bar"
   layout (.fusion-tb-page-title-bar) assigned sitewide via Theme
   Builder conditions -- confirmed via the page's own admin bar, which
   links to "Edit Layout: Single Post" for this exact section. Congress/
   Senate/House get this same Theme Builder title deliberately (that's
   the nicer, hardcoded-black-text title those pages already show
   correctly) -- but blog posts ALSO get it automatically, sitewide,
   completely independent of anything in this theme's PHP templates,
   and the suppression rule below never accounted for it. Scoped
   identically to the existing rule (both require
   body.dwf-hide-native-title-bar), so this can never affect Congress/
   Senate/House -- that body class is never added there in the first
   place, since dwf-family-page-template.php is deliberately excluded
   from dwf_uses_custom_title_block(). Only pages that already opted
   into the shared .dwf-page-title system (post, Agency, President,
   State, Congress Member) get this second title hidden too. */
body.dwf-hide-native-title-bar .avada-page-titlebar-wrapper,
body.dwf-hide-native-title-bar .fusion-tb-page-title-bar{display:none}