/* ==========================================================================
   Practice guide (the Heggstad petition guide). Loaded only on pages that use
   templates/guide.html. Builds on site.css tokens; the motif is California
   pleading paper: numbered lines, the double rule, exhibit tabs, the caption box.
     1. Frame and tokens      6. Notes and sidenotes     11. Video cards
     2. Hero                  7. Tables                  12. Library and gate
     3. Rail                  8. Lists, steps, timeline  13. FAQ and authorities
     4. Chapters              9. Copy blocks             14. About this guide
     5. Type in chapters     10. Tools                   15. Small screens, print
   ========================================================================== */

/* 1. Frame and tokens ------------------------------------------------------ */
.guide {
  --g-rail: 220px;
  --g-gap: clamp(36px, 4vw, 60px);
  --g-side: 268px;
  --g-sidegap: 44px;
  --g-pull: calc(-1 * (var(--g-side) + var(--g-sidegap)));
  --oxblood: #983a2c;
  --slate: #3d6670;
  --paper: #fdfcf8;
  --field: #b6c1cc;
  color: var(--text);
}
html:has(.tpl-guide) { scroll-padding-top: calc(var(--head-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html:has(.tpl-guide) { scroll-behavior: smooth; } }

/* 2. Hero ------------------------------------------------------------------ */
.g-hero {
  position: relative; isolation: isolate; overflow: hidden; color: rgba(255,255,255,.86);
  background:
    radial-gradient(900px 520px at 78% 38%, rgba(54,82,112,.55), transparent 70%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
}
/* the pleading-paper margin: line numbers 1 to 28 and the double rule */
.g-hero-lines {
  position: absolute; z-index: -1; top: 0; bottom: 0; left: max(10px, calc(50% - 700px));
  width: 30px; padding: 34px 0 30px; display: flex; flex-direction: column; justify-content: space-between;
  font: 500 10.5px/1 var(--sans); color: rgba(217,194,154,.34); text-align: right; font-variant-numeric: tabular-nums;
}
.g-hero-lines::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -12px; width: 3px;
  border-left: 1px solid rgba(217,194,154,.26); border-right: 1px solid rgba(217,194,154,.26);
}
.g-hero::after { /* the single rule on the right edge of a pleading page */
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: max(10px, calc(50% - 700px));
  border-right: 1px solid rgba(217,194,154,.16);
}
.g-hero-wrap {
  max-width: calc(1280px + 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(46px, 6.5vw, 92px) var(--gutter) clamp(40px, 5vw, 70px) calc(var(--gutter) + 28px);
  display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(280px, .78fr); gap: clamp(40px, 6vw, 100px); align-items: center;
}
.g-crumbs { font-size: 13.5px; letter-spacing: .03em; margin: 0 0 26px; color: rgba(255,255,255,.62); }
.g-crumbs a { color: rgba(255,255,255,.8); text-decoration: none; }
.g-crumbs a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--brass-light); }
.g-crumbs span[aria-hidden] { color: var(--brass); padding: 0 .55em; }
.g-eyebrow { font: 600 12.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-light); margin: 0 0 18px; }
.g-hero h1 { color: #fff; font-weight: 600; font-size: clamp(44px, 28px + 3.3vw, 78px); line-height: 1.02; letter-spacing: -.012em; }
.g-h1-b { display: block; margin-top: .22em; font-size: .56em; font-style: italic; font-weight: 500; line-height: 1.12; color: var(--brass-light); letter-spacing: 0; }
.g-hero-dek { font-size: var(--fs-lead); line-height: 1.6; color: rgba(255,255,255,.84); margin: 26px 0 0; max-width: 38em; }
.g-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.g-btn-brass { background: var(--brass); border-color: var(--brass); color: var(--navy-deep); font-weight: 600; }
.g-btn-brass:hover { background: var(--brass-light); border-color: var(--brass-light); color: var(--navy-deep); }
.g-byline { margin: 30px 0 0; font-size: 14px; color: rgba(255,255,255,.66); }
.g-byline a { color: #fff; text-decoration-color: rgba(217,194,154,.6); }

/* the sheet of pleading paper, the sheet under it, and the seal */
.g-hero-art { position: relative; width: min(100%, 410px); justify-self: center; margin: 10px 26px 34px 0; }
.g-hero-art::before {
  content: ""; position: absolute; inset: 0; background: #e9e5da;
  transform: rotate(4.5deg) translate(16px, 8px); box-shadow: 0 30px 60px -24px rgba(0,0,0,.6);
}
.g-paper {
  position: relative; aspect-ratio: 8.5 / 11; background: var(--paper); color: #1d1f22;
  display: grid; grid-template-columns: 11% 1fr; transform: rotate(-2deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 34px 70px -26px rgba(0,0,0,.7);
  font-family: "Times New Roman", Times, Georgia, serif;
}
.g-paper::after { /* single rule at the right margin */
  content: ""; position: absolute; top: 0; bottom: 0; right: 7%; border-right: 1px solid #ddd6c8;
}
.g-paper-rail {
  display: flex; flex-direction: column; justify-content: space-around; padding: 9% 6px 9% 0;
  border-right: 3px double #c6bca9; font: 500 clamp(6.5px, .55vw, 8.5px)/1 var(--sans); color: #a49a87; text-align: right;
}
.g-paper-body { padding: 15% 13% 8% 7%; font-size: clamp(7.5px, .7vw, 10px); line-height: 1.45; }
.g-paper-court { text-align: center; font-weight: 700; letter-spacing: .04em; margin: 0 0 9%; font-size: 1.05em; line-height: 1.5; }
.g-paper-caption { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #1d1f22; border-bottom: 1px solid #1d1f22; }
.g-paper-left { border-right: 1px solid #1d1f22; padding: 8% 7%; display: flex; flex-direction: column; gap: .5em; }
.g-paper-right { padding: 8% 0 8% 8%; display: flex; flex-direction: column; gap: .45em; }
.g-paper-right strong { font-weight: 700; letter-spacing: .01em; line-height: 1.3; }
.g-paper-meta { color: #4a4d52; line-height: 1.7; margin-top: .3em; }
.g-blank { display: inline-block; width: 5.5em; height: .95em; vertical-align: baseline; border-bottom: 1px solid #1d1f22; }
.g-blank--short { width: 3.4em; }
.g-paper-line { height: 1px; background: #e2dccf; margin: 11% 0 0; }
.g-paper-line + .g-paper-line { margin-top: 7%; }
.g-paper-line--short { width: 58%; }
.g-seal {
  position: absolute; z-index: 2; width: 42%; height: auto; right: -12%; bottom: -10%;
  transform: rotate(-9deg); filter: drop-shadow(0 10px 16px rgba(0,0,0,.4));
}
.g-seal-ring { transform-origin: 100px 100px; }
@media (prefers-reduced-motion: no-preference) { .g-seal-ring { animation: g-turn 90s linear infinite; } }
@keyframes g-turn { to { transform: rotate(360deg); } }

/* 3. Rail ------------------------------------------------------------------ */
.g-layout {
  max-width: calc(1280px + 2 * var(--gutter)); margin: 0 auto; padding: clamp(46px, 6vw, 84px) var(--gutter) 0;
  display: grid; grid-template-columns: var(--g-rail) minmax(0, 1fr); gap: var(--g-gap); align-items: start;
}
.g-main { min-width: 0; position: relative; }
.g-rail {
  position: sticky; top: calc(var(--head-h) + 30px); max-height: calc(100vh - var(--head-h) - 60px); overflow-y: auto;
  scrollbar-width: thin; padding-bottom: 12px;
}
.g-rail-k { font: 600 11.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 2px 0 14px; }
.g-rail ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.g-rail a {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px; align-items: baseline;
  padding: 6px 6px 6px 14px; margin-left: -1px; border-left: 2px solid transparent;
  font-size: 14.5px; line-height: 1.35; color: var(--muted); text-decoration: none; transition: color .15s, border-color .15s;
}
.g-rail a:hover { color: var(--ink); }
.g-rail a[aria-current="true"] { color: var(--ink); font-weight: 500; border-left-color: var(--brass); }
.g-rail-n { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--brass); font-variant-numeric: tabular-nums; }
.g-rail-progress { height: 3px; background: var(--mist-2); margin: 18px 0 0; }
.g-rail-progress span { display: block; height: 100%; width: 0; background: var(--brass); transition: width .2s linear; }

/* 4. Chapters -------------------------------------------------------------- */
.g-ch { display: flow-root; scroll-margin-top: calc(var(--head-h) + 26px); }
.g-ch + .g-ch { margin-top: clamp(76px, 9vw, 128px); }
.g-ch-head { position: relative; border-top: 2px solid var(--navy); padding-top: 30px; margin: 34px 0 34px; }
.g-tab { /* a file-folder tab sitting on the chapter rule */
  position: absolute; left: 0; top: -2px; transform: translateY(-100%);
  background: var(--navy); color: var(--brass-light); font: 600 12.5px/1 var(--sans); letter-spacing: .14em;
  padding: 10px 16px 8px; clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 100%, 0 100%);
  font-variant-numeric: tabular-nums;
}
.g-kicker { font: 500 14.5px/1.4 var(--sans); letter-spacing: .01em; color: #7d6440; margin: 0 0 12px; } /* the chapter's main authority, as a citation */
.g-ch-head h2 { font-size: clamp(34px, 24px + 2vw, 54px); line-height: 1.06; max-width: 22ch; }
.g-dek { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); margin: 16px 0 0; max-width: 40em; }

/* 5. Type in chapters ------------------------------------------------------ */
.g-ch p { margin: 0 0 1.1em; }
.g-ch h3 { font-size: clamp(25px, 20px + .9vw, 31px); margin: 52px 0 14px; }
.g-ch-head + h3 { margin-top: 0; }
.g-ch a { text-decoration-color: rgba(168,137,90,.7); }
.g-ch a:hover { text-decoration-color: var(--navy); }
/* citations linked to their source: quiet, so a paragraph full of cites still reads as text */
.g-ch a.g-law { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: rgba(168,137,90,.55); }
.g-ch a.g-law:hover { color: var(--navy); text-decoration-color: var(--navy); }
.g-ch strong { font-weight: 600; color: var(--ink); }
.g-lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--ink); }
.g-sref {
  display: inline-block; font-size: .82em; font-weight: 600; line-height: 1.4; letter-spacing: .01em; white-space: nowrap;
  padding: 0 .6em .05em; border: 1px solid rgba(168,137,90,.75); border-radius: 999px; color: var(--navy); text-decoration: none !important;
  background: #fbf8f2; vertical-align: .06em;
}
.g-sref::before { content: ""; display: inline-block; width: .62em; height: .78em; margin-right: .4em; border: 1.2px solid currentColor; border-radius: 1px; vertical-align: -.06em; box-shadow: 2px -2px 0 -1px #fbf8f2, 2px -2px 0 0 currentColor; }
.g-sref:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.g-sref:hover::before { box-shadow: 2px -2px 0 -1px var(--navy), 2px -2px 0 0 currentColor; }
.g-ch em { font-style: italic; }
.fine a { color: inherit; }

/* the six things that decide a Heggstad, as a ledger */
.g-minute {
  list-style: none; margin: 38px 0 6px; padding: 0; counter-reset: m;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.g-minute li { counter-increment: m; padding: 22px 22px 22px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: background-color .2s; }
.g-minute li:hover { background: #f7f9fb; }
.g-minute li::before { content: counter(m, decimal-leading-zero); font: 600 11.5px/1 var(--sans); letter-spacing: .14em; color: var(--brass); }
.g-minute-k { display: block; font-family: var(--serif); font-size: 31px; font-weight: 600; color: var(--ink); line-height: 1; margin: 10px 0 10px; }
.g-minute p { font-size: 15px; line-height: 1.6; margin: 0; }

/* anatomy of a filing: a contact sheet of Sample 1 */
.g-anatomy { margin: 54px 0 0; padding: clamp(22px, 3vw, 34px); background: var(--mist); }
.g-anatomy-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px 36px; align-items: end; }
.g-anatomy-head h3 { margin: 0; }
.g-anatomy-head p { margin: 0; font-size: 15px; color: var(--muted); }
.g-strip { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: a; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 22px 12px; }
@media (max-width: 1279px) { .g-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 16px; } }
.g-strip li { counter-increment: a; }
.g-strip img {
  width: 100%; aspect-ratio: 360 / 466; object-fit: cover; object-position: top; background: #fff;
  box-shadow: 0 1px 2px rgba(16,27,39,.14), 0 10px 22px -8px rgba(16,27,39,.28); transition: transform .25s;
}
.g-strip li:hover img { transform: translateY(-4px) rotate(-1.2deg); }
.g-strip span { display: block; font-size: 12.5px; line-height: 1.3; margin-top: 10px; color: var(--ink); }
.g-strip span::before { content: counter(a, decimal-leading-zero) "  "; white-space: pre; font-weight: 600; color: var(--brass); letter-spacing: .04em; }

/* 6. Notes and sidenotes ---------------------------------------------------- */
.g-note {
  --accent: var(--navy);
  margin: 26px 0 30px; padding: 18px 22px 16px; background: var(--mist); border-left: 3px solid var(--accent);
  font-size: 15.5px; line-height: 1.6;
}
.g-note[data-kind="practice"] { --accent: var(--brass); }
.g-note[data-kind="watch"] { --accent: var(--oxblood); }
.g-note[data-kind="county"] { --accent: var(--slate); }
.g-note-k { display: flex; align-items: center; gap: 9px; font: 600 11.5px/1.3 var(--sans) !important; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px !important; }
.g-note-k::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--accent); }
.g-note[data-kind="rule"] .g-note-k::before { content: "\00A7"; width: auto; height: auto; background: none; font: 600 15px/1 var(--serif); letter-spacing: 0; }
.g-note[data-kind="practice"] .g-note-k::before { border-radius: 50%; }
.g-note[data-kind="watch"] .g-note-k::before { width: 10px; height: 9px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.g-note[data-kind="county"] .g-note-k::before { transform: rotate(45deg); width: 7px; height: 7px; }
.g-note p:last-child { margin-bottom: 0; }
.g-note ul { margin: 0; padding-left: 1.1em; }
.g-note li { margin: .45em 0; }
.g-note li::marker { color: var(--accent); }

/* 7. Tables ---------------------------------------------------------------- */
.g-tablewrap { margin: 26px 0 30px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.g-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.g-table caption { caption-side: top; text-align: left; font: 600 11.5px/1.3 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--brass); padding: 0 0 12px; }
.g-table th, .g-table td { text-align: left; vertical-align: top; padding: 13px 18px 13px 0; border-bottom: 1px solid var(--rule); }
.g-table th:last-child, .g-table td:last-child { padding-right: 0; }
.g-table thead th { font: 600 11px/1.3 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); padding-bottom: 11px; border-bottom: 1.5px solid var(--ink); }
.g-table tbody th, .g-table tbody td:first-child { font-weight: 500; color: var(--ink); }
.g-table tbody th, .g-table--tight tbody td:first-child { font-weight: 600; }
.g-table tbody tr:hover > * { background: linear-gradient(var(--mist), var(--mist)) no-repeat; }
.g-table--tight tbody td:first-child { white-space: nowrap; width: 1%; padding-right: 28px; }
.g-cite { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--muted); }

/* 8. Lists, steps, timeline ------------------------------------------------- */
.g-list { list-style: none; margin: 18px 0 26px; padding: 0; }
.g-list > li { position: relative; padding-left: 26px; margin: 0 0 14px; }
.g-list > li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; background: var(--brass); transform: rotate(45deg); }

.g-steps { list-style: none; counter-reset: s; margin: 26px 0 30px; padding: 0; }
.g-steps > li { counter-increment: s; position: relative; padding: 0 0 24px 66px; }
.g-steps > li::before {
  content: counter(s); position: absolute; left: 0; top: -2px; width: 42px; text-align: center;
  font: 600 40px/1 var(--serif); color: var(--brass); font-variant-numeric: lining-nums;
}
.g-steps > li::after { content: ""; position: absolute; left: 20px; top: 46px; bottom: 8px; width: 1px; background: var(--rule); }
.g-steps > li:last-child::after { display: none; }
.g-steps h4 { font-size: clamp(21px, 18px + .5vw, 24px); margin: 0 0 8px; }
.g-steps p { margin: 0; }
.g-steps--plain > li::before { font-size: 30px; top: 0; }
.g-steps--plain > li::after { top: 40px; }

.g-timeline { list-style: none; position: relative; margin: 30px 0 34px; padding: 0; }
.g-timeline::before { content: ""; position: absolute; left: 152px; top: 10px; bottom: 14px; width: 1px; background: linear-gradient(var(--brass), var(--rule)); }
.g-timeline li { position: relative; display: grid; grid-template-columns: 152px minmax(0, 1fr); column-gap: 34px; padding: 0 0 22px; }
.g-timeline li::after { content: ""; position: absolute; left: 147px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--brass); }
.g-tl-day { font: 600 12.5px/1.35 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--brass); text-align: right; padding-top: 4px; }
.g-timeline p { margin: 0; }

/* 9. Copy blocks ------------------------------------------------------------ */
.g-copy { margin: 30px 0 34px; border: 1px solid var(--rule); background: var(--paper); }
.g-copy-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px 9px 18px;
  border-bottom: 1px solid var(--rule); background: #fff;
  font: 600 11.5px/1.3 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
}
.g-copy-btn, .g-btn-small {
  font: 500 13.5px/1 var(--sans); letter-spacing: .01em; text-transform: none; padding: 9px 14px; cursor: pointer;
  border: 1px solid var(--navy); background: #fff; color: var(--navy); transition: background-color .15s, color .15s;
}
.g-copy-btn:hover, .g-btn-small:hover { background: var(--mist); }
.g-copy-btn.is-done, .g-btn-small.is-done { background: var(--navy); color: #fff; }
.g-pre {
  position: relative; margin: 0; padding: 14px 18px 16px 70px; overflow-x: auto;
  font: 13.5px/24px ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; color: var(--ink);
  white-space: pre-wrap; counter-reset: ln; tab-size: 2;
  background: linear-gradient(90deg, transparent 54px, #d9cfbd 54px, #d9cfbd 55px, transparent 55px, transparent 57px, #d9cfbd 57px, #d9cfbd 58px, transparent 58px);
}
.g-pre .ln { display: block; position: relative; min-height: 24px; }
.g-pre .ln::before { counter-increment: ln; content: counter(ln); position: absolute; left: -66px; width: 40px; text-align: right; font: 500 11px/24px var(--sans); color: #ab9f88; }

/* 10. Tools ------------------------------------------------------------------ */
.g-tool {
  position: relative; margin: 42px 0 46px; background: #fff; border: 1px solid var(--rule);
  box-shadow: 0 30px 60px -44px rgba(16,27,39,.55);
}
.g-tool::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; background: linear-gradient(90deg, var(--navy) 0 76%, var(--brass) 76% 100%); }
.g-tool-head { padding: 26px 28px 20px; border-bottom: 1px solid var(--rule); }
.g-tool-k { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1.3 var(--sans) !important; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin: 0 0 6px !important; }
.g-tool-k::before { content: ""; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 2.5px #fff, inset 0 0 0 10px currentColor; }
.g-tool--check .g-tool-k::before { border-radius: 2px; box-shadow: none; background: linear-gradient(currentColor, currentColor) 50% 50% / 6px 1.5px no-repeat; }
.g-tool-head h3 { margin: 0 0 8px !important; font-size: clamp(25px, 21px + .7vw, 30px); }
.g-tool-head p { margin: 0; color: var(--muted); font-size: 15px; max-width: 62ch; }
.g-tool-body { padding: 24px 28px 28px; }
.g-tool-body noscript p { margin: 0; font-size: 15px; }

/* form controls shared by the tools and the gate */
.g-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; align-items: end; }
.g-form-grid .g-span { grid-column: 1 / -1; }
.g-field { margin: 0 0 16px; min-width: 0; }
.g-field > label, .g-legend, .g-q-label { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; margin: 0 0 7px; padding: 0; }
.g-hint { display: block; font-weight: 400; color: var(--muted); font-size: 13px; margin-top: 2px; }
.g-input, .g-select, .g-textarea, .g-gate-form input[type="text"], .g-gate-form input[type="email"] {
  width: 100%; font: inherit; font-size: 16px; line-height: 1.35; padding: 11px 13px; color: var(--ink);
  background: #fff; border: 1px solid var(--field); border-radius: 0; transition: border-color .15s;
}
.g-textarea { min-height: 120px; resize: vertical; font-size: 15px; }
.g-select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23172636' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.g-input:focus, .g-select:focus, .g-textarea:focus, .g-gate-form input:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--navy); }
[aria-invalid="true"] { border-color: #b00020 !important; }
.g-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.g-chip { position: relative; display: inline-flex; }
.g-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.g-chip span {
  display: inline-block; padding: 9px 14px 9px; font-size: 14.5px; line-height: 1.3; color: var(--ink); background: #fff;
  border: 1px solid var(--field); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.g-chip:hover span { border-color: var(--navy); }
.g-chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.g-chip input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.g-seg { display: inline-flex; border: 1px solid var(--navy); }
.g-seg button { font: 500 14px/1 var(--sans); padding: 10px 16px; background: #fff; color: var(--navy); border: 0; cursor: pointer; }
.g-seg button + button { border-left: 1px solid var(--navy); }
.g-seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* pathway planner */
.g-q { padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px dashed var(--rule); animation: g-in .25s ease-out; }
.g-q:last-of-type { border-bottom: 0; }
.g-q-n { display: inline-block; min-width: 1.6em; color: var(--brass); font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes g-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .g-q, .g-result { animation: none; } }
.g-result { margin: 6px 0 0; padding: 24px 26px 22px; background: var(--mist); border-top: 3px solid var(--brass); animation: g-in .3s ease-out; }
.g-result-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin: 0 0 6px; }
.g-result-k { font: 600 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0; }
.g-result h4 { font-size: clamp(24px, 20px + .7vw, 30px); margin: 0 0 10px; }
.g-result p { font-size: 15.5px; }
.g-result ul { margin: 0 0 14px; padding-left: 1.1em; font-size: 15.5px; }
.g-result li { margin: .35em 0; }
.g-result li::marker { color: var(--brass); }
.g-result-links { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 14px 0 0; font-size: 14.5px; }
.g-result-links a { font-weight: 600; }
.g-meter { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.g-meter i { display: inline-flex; gap: 3px; }
.g-meter i b { width: 20px; height: 6px; background: #cdd6df; }
.g-meter[data-level="3"] i b, .g-meter[data-level="2"] i b:nth-child(-n+2), .g-meter[data-level="1"] i b:first-child { background: var(--brass); }
.g-meter[data-level="0"] i b { background: #cdd6df; }
.g-restart { margin-top: 16px; }
.g-alts { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 6px 0 12px; background: #fff; }
.g-alts th, .g-alts td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.g-alts th { font-weight: 600; color: var(--ink); width: 38%; }

/* venue finder and other answers */
.g-answer { margin-top: 8px; border-top: 3px solid var(--navy); background: var(--mist); padding: 22px 24px; animation: g-in .3s ease-out; }
.g-answer-county { font-family: var(--serif); font-size: clamp(30px, 24px + 1.2vw, 40px); font-weight: 600; color: var(--ink); line-height: 1.05; margin: 2px 0 12px; }
.g-chain { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 14px; padding: 0; font-size: 13.5px; }
.g-chain li { display: inline-flex; align-items: center; padding: 5px 10px; background: #fff; border: 1px solid var(--rule); color: var(--ink); }
.g-chain li + li { margin-left: 22px; position: relative; }
.g-chain li + li::before { content: ""; position: absolute; left: -16px; top: 50%; width: 10px; height: 1px; background: var(--brass); }
.g-chain li + li::after { content: ""; position: absolute; left: -10px; top: calc(50% - 3px); width: 5px; height: 5px; border-top: 1px solid var(--brass); border-right: 1px solid var(--brass); transform: rotate(45deg); }
.g-plead { position: relative; margin: 12px 0 0; background: var(--paper); border: 1px solid var(--rule); padding: 16px 18px 16px 18px; font: 15.5px/1.7 "Times New Roman", Times, Georgia, serif; color: var(--ink); }
.g-plead-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.g-small { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; }
.g-plead-actions + .g-small { margin-top: 16px; }

/* notice clock */
.g-clock-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; align-items: end; }
.g-track { position: relative; height: 92px; margin: 8px 6px 4px; }
.g-track::before { content: ""; position: absolute; left: 0; right: 0; top: 44px; height: 2px; background: var(--rule); }
.g-tick { position: absolute; top: 34px; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--navy); }
.g-tick--hearing { background: var(--navy); border-color: var(--navy); box-shadow: 0 0 0 4px rgba(23,38,54,.12); }
.g-tick--local { border-color: var(--slate); width: 14px; height: 14px; top: 38px; }
.g-tick-l { position: absolute; transform: translateX(-50%); white-space: nowrap; font-size: 12px; line-height: 1.25; color: var(--muted); text-align: center; }
.g-tick-l.up { top: 0; } .g-tick-l.down { top: 64px; }
.g-tick-l b { display: block; color: var(--ink); font-weight: 600; }
.g-deadlines { width: 100%; border-collapse: collapse; margin: 12px 0 0; font-size: 15px; }
.g-deadlines th, .g-deadlines td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); }
.g-deadlines thead th { font: 600 11px/1.3 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); border-bottom: 1.5px solid var(--ink); }
.g-deadlines td:first-child { white-space: nowrap; font-weight: 600; color: var(--ink); width: 1%; padding-right: 22px; }
.g-dshort { display: none; }
.g-deadlines .g-dow { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.g-deadlines .g-moved { display: block; font-size: 12.5px; color: var(--oxblood); margin-top: 3px; }
.g-deadlines tr.is-local td:first-child { color: var(--slate); }
.g-deadlines .g-cite { display: inline; margin: 0; }
.g-warn { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--oxblood); background: #fbf3f1; font-size: 14.5px; }

/* order builder */
.g-builder { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 28px; align-items: start; }
.g-builder fieldset { border: 0; margin: 0 0 6px; padding: 0; min-width: 0; }
.g-builder legend { font: 600 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin: 0 0 12px; padding: 0; }
.g-sheet { position: sticky; top: calc(var(--head-h) + 20px); }
.g-sheet-paper {
  position: relative; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 24px 50px -36px rgba(16,27,39,.6);
  padding: 22px 22px 26px 64px; min-height: 420px; max-height: 70vh; overflow-y: auto;
  font: 14.5px/24px "Times New Roman", Times, Georgia, serif; color: #1d1f22;
  background-image: linear-gradient(90deg, transparent 46px, #d9cfbd 46px, #d9cfbd 47px, transparent 47px, transparent 49px, #d9cfbd 49px, #d9cfbd 50px, transparent 50px);
}
.g-sheet-paper p { margin: 0 0 24px; text-indent: 3em; }
.g-sheet-paper p.g-noind { text-indent: 0; }
.g-sheet-paper .g-legal { text-indent: 0; margin-left: 3em; white-space: pre-wrap; }
.g-sheet-paper .g-sig { text-indent: 0; margin-left: 50%; }
.g-ph { background: #fff2bf; color: #6b4d00; padding: 0 2px; border-radius: 1px; }
.g-sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }

/* county desk */
.g-desk-bar { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: end; margin: 0 0 20px; }
.g-desk-bar .g-field { margin: 0; flex: 1 1 220px; }
.g-desk-bar .g-field--search { flex: 1 1 260px; }
.g-desk-meta { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }
.g-desk-group { border-top: 1.5px solid var(--ink); margin: 0 0 24px; }
.g-desk-group > h4 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 12px 0 8px;
  font: 600 12px/1.3 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--ink);
}
.g-desk-group > h4 span { color: var(--muted); font-weight: 500; letter-spacing: .06em; }
.g-desk-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 18px; padding: 12px 0; border-top: 1px solid var(--mist-2); }
.g-desk-rule { font-size: 13px; font-weight: 600; color: var(--slate); padding-top: 2px; font-variant-numeric: tabular-nums; }
.g-desk-item p { margin: 0; font-size: 15px; }
.g-desk-item details { grid-column: 2; margin-top: 4px; }
.g-desk-item summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; font-size: 13.5px; color: var(--navy); font-weight: 500; }
.g-desk-item summary::-webkit-details-marker { display: none; }
.g-desk-item summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); transform: rotate(-45deg); transition: transform .2s; }
.g-desk-item details[open] summary::before { transform: rotate(45deg) translate(-2px, -1px); }
.g-desk-item blockquote { margin: 8px 0 2px; padding: 4px 0 4px 16px; border-left: 2px solid var(--brass); font: italic 500 16.5px/1.55 var(--serif); color: var(--text); }
.g-desk-item mark, .g-desk mark { background: #fff0b3; color: inherit; padding: 0 1px; }
.g-desk-empty { padding: 18px 20px; background: var(--mist); font-size: 15px; }
.g-desk-more { margin-top: 6px; }

/* checklists */
.g-check { list-style: none; margin: 0; padding: 6px 28px 2px; }
.g-check li { border-bottom: 1px solid var(--mist-2); }
.g-check li:last-child { border-bottom: 0; }
.g-check label { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; cursor: pointer; font-size: 15.5px; line-height: 1.5; }
.g-check input {
  appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; cursor: pointer;
  border: 1.5px solid #8f9ba7; background: #fff; display: grid; place-content: center; transition: background-color .15s, border-color .15s;
}
.g-check input::after { content: ""; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.g-check input:checked { background: var(--navy); border-color: var(--navy); }
.g-check input:checked::after { opacity: 1; }
.g-check input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.g-check input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(85,96,107,.45); }
.g-check-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 !important; padding: 12px 28px 20px; border-top: 1px solid var(--rule); }
.g-check-count { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-check-bar { height: 3px; background: var(--mist-2); margin: 16px 0 0; max-width: 260px; }
.g-check-bar span { display: block; height: 100%; width: 0; background: var(--brass); transition: width .2s; }
.g-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--navy); text-decoration: underline; text-decoration-color: rgba(168,137,90,.7); text-underline-offset: .18em; cursor: pointer; }

/* 11. Video cards ------------------------------------------------------------ */
.g-video {
  margin: 46px 0 40px; padding-top: 24px; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 6px 26px; align-items: start;
}
.g-video-stage {
  grid-row: 1 / span 2; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-deep);
  background-image:
    repeating-linear-gradient(180deg, transparent 0 13px, rgba(217,194,154,.07) 13px 14px),
    radial-gradient(120% 90% at 70% 30%, #2a4361 0%, var(--navy-deep) 70%);
  background-size: cover;
}
.g-video-stage::before { /* double margin rule, the pleading-paper echo */
  content: ""; position: absolute; top: 0; bottom: 0; left: 26px; width: 3px; border-left: 1px solid rgba(217,194,154,.3); border-right: 1px solid rgba(217,194,154,.3);
}
.g-video-play {
  position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: none; border: 0; padding: 12px 12px 10px 40px; color: #fff; cursor: pointer;
  font: 600 10.5px/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-align: center;
}
.g-video-icon { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--brass-light); transition: transform .2s, background-color .2s; }
.g-video-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 16px; transform: translate(-36%, -50%); background: var(--brass-light); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.g-video-play:not([disabled]):hover .g-video-icon { transform: scale(1.06); background: rgba(217,194,154,.14); }
.g-video-play[disabled] { cursor: default; color: rgba(255,255,255,.72); }
.g-video-play[disabled] .g-video-icon { opacity: .5; border-style: dashed; }
.g-video figcaption { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.g-video-title { font-family: var(--serif); font-size: clamp(22px, 19px + .5vw, 26px); font-weight: 600; line-height: 1.15; color: var(--ink); }
.g-video-len { font-size: 13.5px; color: var(--muted); }
.g-video-len::before { content: "Video  \00B7  "; white-space: pre; color: var(--brass); font-weight: 600; letter-spacing: .04em; }
.g-script { align-self: start; }
.g-script summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; margin-top: 8px;
  font-size: 14.5px; font-weight: 500; color: var(--navy);
}
.g-script summary::-webkit-details-marker { display: none; }
.g-script summary::before { content: ""; width: 9px; height: 9px; border-right: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); transform: rotate(-45deg); transition: transform .2s; margin-right: 2px; }
.g-script[open] summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.g-script-body { margin-top: 12px; padding: 16px 20px 4px; background: var(--mist); border-left: 2px solid var(--brass); font-size: 15.5px; }
.g-script-body p { margin: 0 0 .9em; }
.g-video.is-playing { grid-template-columns: minmax(0, 1fr); }
.g-video.is-playing .g-video-stage { grid-row: auto; }
.g-video-stage iframe, .g-video-stage video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

.g-related { margin: 42px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 24px; }
.g-related-k { font: 600 11px/1.5 var(--sans) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 3px 0 0 !important; }
.g-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.g-related a { font-weight: 500; color: var(--navy); text-decoration: none; font-size: 15.5px; }
.g-related a::after { content: "\2192"; display: inline-block; margin-left: .45em; color: var(--brass); transition: transform .15s; }
.g-related a:hover { text-decoration: underline; }
.g-related a:hover::after { transform: translateX(3px); }

/* 12. Library and gate ------------------------------------------------------- */
.g-disclose {
  position: relative; margin: 0 0 36px; padding: 20px 24px 20px 132px; border: 1px solid #d8c6a3; background: #fbf8f1; font-size: 14.5px; line-height: 1.6;
}
.g-disclose::before {
  content: "SAMPLE"; position: absolute; left: 24px; top: 50%; transform: translateY(-50%) rotate(-11deg);
  font: 700 15px/1 var(--sans); letter-spacing: .2em; padding: 8px 6px 7px 9px; color: var(--oxblood);
  border: 2px solid var(--oxblood); box-shadow: inset 0 0 0 2px #fbf8f1, inset 0 0 0 3px var(--oxblood); opacity: .88;
}
.g-disclose p { margin: 0; }

.g-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin: 0 0 54px; }
.g-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; scroll-margin-top: calc(var(--head-h) + 30px); }
.g-card:hover, .g-card:focus-within { transform: translateY(-3px); box-shadow: 0 34px 60px -40px rgba(16,27,39,.55); }
.g-card:target { box-shadow: 0 0 0 2px var(--brass), 0 34px 60px -40px rgba(16,27,39,.55); }
.g-fan { position: relative; height: 236px; overflow: hidden; border-bottom: 1px solid var(--rule); background: linear-gradient(180deg, #f3f6f9 0%, #e3e9ef 100%); }
.g-fan::before { /* the double rule on the fan's backdrop */
  content: ""; position: absolute; top: 0; bottom: 0; left: 22px; width: 3px; border-left: 1px solid rgba(168,137,90,.35); border-right: 1px solid rgba(168,137,90,.35);
}
.g-fan img {
  position: absolute; left: 50%; bottom: -18%; width: 44%; background: #fff; transform-origin: 50% 100%;
  box-shadow: 0 1px 2px rgba(16,27,39,.16), 0 14px 28px -10px rgba(16,27,39,.4);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.g-fan img:nth-child(1) { transform: translateX(-50%) translateX(-30%) rotate(-9deg); }
.g-fan img:nth-child(2) { transform: translateX(-50%) translateX(30%) rotate(8deg); }
.g-fan img:nth-child(3) { width: 50%; bottom: -26%; transform: translateX(-50%); }
.g-card:hover .g-fan img:nth-child(1), .g-card:focus-within .g-fan img:nth-child(1) { transform: translateX(-50%) translateX(-46%) rotate(-14deg); }
.g-card:hover .g-fan img:nth-child(2), .g-card:focus-within .g-fan img:nth-child(2) { transform: translateX(-50%) translateX(46%) rotate(13deg); }
.g-card:hover .g-fan img:nth-child(3), .g-card:focus-within .g-fan img:nth-child(3) { transform: translateX(-50%) translateY(-7%); }
.g-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 18px; }
.g-card-no { font: 600 11.5px/1.3 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--brass); margin: 0 0 6px; }
.g-card-no span { color: var(--muted); font-weight: 500; letter-spacing: .1em; margin-left: .5em; }
.g-card h3 { font-size: clamp(27px, 22px + .8vw, 32px); margin: 0 0 8px; }
.g-card-sum { font-size: 15px; line-height: 1.55; margin: 0 0 14px; color: var(--text); }
.g-card-shows { list-style: none; margin: 0 0 14px; padding: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.g-card-shows li { position: relative; padding: 7px 0 7px 22px; border-top: 1px solid var(--mist-2); }
.g-card-shows li::before { content: ""; position: absolute; left: 3px; top: 12px; width: 9px; height: 5px; border-left: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); transform: rotate(-45deg); }
.g-card-meta { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--muted); }
.g-card-meta a { font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; }
.g-card-meta a:hover { text-decoration: underline; }
.g-card--every { background: var(--navy); border-color: var(--navy); color: rgba(255,255,255,.84); padding: 26px 24px 24px; }
.g-card--every:hover { transform: none; box-shadow: none; }
.g-card--every .g-card-no { color: var(--brass-light); }
.g-card--every h3 { color: #fff; margin-bottom: 14px; }
.g-every { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: e; font-size: 14.5px; line-height: 1.45; }
.g-every li { counter-increment: e; display: grid; grid-template-columns: 30px 1fr; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.14); }
.g-every li::before { content: counter(e, decimal-leading-zero); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--brass-light); padding-top: 2px; }
.g-card--every .btn { margin-top: auto; }

.g-gate { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); background: var(--navy); color: rgba(255,255,255,.84); overflow: hidden; isolation: isolate; scroll-margin-top: calc(var(--head-h) + 20px); }
.g-gate::before { /* faint line numbers down the left edge */
  content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22";
  white-space: pre; position: absolute; z-index: -1; left: 10px; top: 26px; width: 22px; text-align: right;
  font: 500 10px/26px var(--sans); color: rgba(217,194,154,.28);
}
.g-gate::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 40px; width: 3px; border-left: 1px solid rgba(217,194,154,.22); border-right: 1px solid rgba(217,194,154,.22); }
.g-gate-intro { padding: clamp(30px, 4vw, 46px) clamp(24px, 3vw, 40px) clamp(30px, 4vw, 46px) clamp(62px, 6vw, 80px); }
.g-gate-intro h3 { color: #fff; font-size: clamp(30px, 24px + 1.2vw, 40px); margin: 0 0 14px; }
.g-gate-intro p { font-size: 15.5px; }
.g-gate-intro .fine { color: rgba(255,255,255,.6); font-size: 13px; }
.g-gate-intro a { color: #fff; }
.g-gate-list { list-style: none; margin: 18px 0 22px; padding: 0; font-size: 14.5px; }
.g-gate-list li { padding: 6px 0 6px 24px; position: relative; }
.g-gate-list li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 9px; height: 5px; border-left: 1.5px solid var(--brass-light); border-bottom: 1.5px solid var(--brass-light); transform: rotate(-45deg); }
.g-gate-form, .g-gate-done { position: relative; margin: 18px; padding: clamp(24px, 3vw, 34px); background: #fff; color: var(--text); border-top: 3px solid var(--brass); }
.g-gate-form .g-field > label { font-size: 14.5px; }
.g-roles { border: 0; margin: 4px 0 12px; padding: 0; min-width: 0; }
.g-roles legend { font-size: 14.5px; font-weight: 600; color: var(--ink); padding: 0; margin: 0 0 8px; }
.g-radio { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; margin: 0 0 8px; border: 1px solid #c8d0d8; cursor: pointer; font-size: 15px; line-height: 1.4; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.g-radio:hover { border-color: var(--navy); }
.g-radio:has(input:checked) { border-color: var(--navy); background: #f6f8fa; box-shadow: inset 3px 0 0 var(--brass); }
.g-radio input, .g-check-line input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--navy); }
.g-ack { margin: 0 0 12px; padding: 12px 14px; background: #fbf8f1; border: 1px solid #e2d4b8; animation: g-in .25s ease-out; }
.g-check-line { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; cursor: pointer; }
.g-optin { margin: 4px 0 18px; color: var(--muted); font-size: 14px; }
.g-gate-form .btn { width: 100%; font-size: 16.5px; padding: 16px 24px; }
.g-gate-form .btn[disabled] { opacity: .7; cursor: progress; }
.g-gate-done h3 { font-size: clamp(26px, 21px + .8vw, 32px); margin: 0 0 6px; }
.g-gate-done:focus { outline: none; }
.g-files { list-style: none; margin: 16px 0 16px; padding: 0; }
.g-files li + li { border-top: 1px solid var(--mist-2); }
.g-files a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 11px 4px; text-decoration: none; color: var(--ink); }
.g-files a:hover { background: var(--mist); }
.g-file-ic { width: 34px; height: 42px; position: relative; display: grid; place-items: end center; padding-bottom: 6px; background: #fff; border: 1.5px solid var(--navy); font: 700 9px/1 var(--sans); letter-spacing: .08em; color: var(--navy); clip-path: polygon(0 0, 70% 0, 100% 22%, 100% 100%, 0 100%); }
.g-file-ic::after { content: ""; position: absolute; right: -1.5px; top: -1.5px; width: 11px; height: 11px; border-left: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); background: var(--mist-2); }
.g-file-ic.is-zip { background: var(--navy); color: var(--brass-light); }
.g-file-t { font-weight: 600; font-size: 15px; line-height: 1.3; }
.g-file-m { grid-column: 2; font-size: 13px; color: var(--muted); }
.g-file-dl { grid-column: 3; grid-row: 1 / span 2; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.g-file-dl::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-right: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); transform: translateY(-3px) rotate(45deg); }
.g-gate-again { margin: 4px 0 0; font-size: 13.5px; }

/* 13. FAQ and authorities ----------------------------------------------------- */
.g-faq { border-top: 1.5px solid var(--ink); }
.g-faq-item { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 10px 46px; padding: 24px 0 22px; border-bottom: 1px solid var(--rule); }
.g-faq-item h3 { margin: 0 !important; font-size: clamp(21px, 18px + .5vw, 24px); line-height: 1.25; }
.g-faq-item p { margin: 0; font-size: 16px; }
.g-auth { columns: 2 330px; column-gap: 54px; }
.g-auth-group { break-inside: avoid; margin: 0 0 30px; }
.g-auth-group h3 { margin: 0 0 6px !important; padding: 0 0 8px; border-bottom: 1.5px solid var(--ink); font: 600 11.5px/1.3 var(--sans) !important; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); }
.g-auth ul { list-style: none; margin: 0; padding: 0; }
.g-auth li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 15px; line-height: 1.4; }
.g-auth li > a:first-child, .g-auth li > span:first-child { flex: 0 1 auto; }
.g-auth-dots { flex: 1 1 18px; min-width: 18px; border-bottom: 1.5px dotted #a9b4bf; transform: translateY(-4px); }
.g-auth-where { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-auth-where a { color: var(--navy); text-decoration: none; font-weight: 600; padding: 0 1px; }
.g-auth-where a:hover { text-decoration: underline; }
.g-checked { margin-top: 10px; }
.g-auth-key { font-size: 13.5px; color: var(--muted); margin: -10px 0 24px; }

/* 14. About this guide ------------------------------------------------------------ */
.g-about { margin: clamp(70px, 8vw, 110px) 0 clamp(70px, 8vw, 110px); padding: 26px 0 0; border-top: 2px solid var(--navy); max-width: 46em; }
.g-about h2 { font-size: clamp(26px, 21px + .8vw, 32px); margin: 0 0 12px; }
.g-about p { margin: 0 0 12px; }
.g-about-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 500; }
.g-about-links a { color: var(--navy); }
.g-about .fine { color: var(--muted); margin-top: 16px; }

/* 15a. Wide screens: notes move into the margin; wide blocks span it ---------- */
@media (min-width: 1360px) {
  .g-ch { padding-right: calc(var(--g-side) + var(--g-sidegap)); }
  .g-ch--library, .g-ch--wide { padding-right: 0; }
  .g-note {
    float: right; clear: right; width: var(--g-side); margin: 4px var(--g-pull) 26px 0; padding: 12px 0 0;
    background: none; border-left: 0; border-top: 2px solid var(--accent); font-size: 14.5px; line-height: 1.58;
  }
  .g-note-k { font-size: 11px !important; }
  .g-ch:not(.g-ch--wide):not(.g-ch--library) > :is(.g-ch-head, .g-minute, .g-anatomy, .g-tool, .g-copy:has(> .g-pre)) { clear: right; margin-right: var(--g-pull); }
  .g-ch-head .g-dek { max-width: 40em; }
}

/* 15b. Medium screens ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .g-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-builder { grid-template-columns: minmax(0, 1fr); }
  .g-sheet { position: static; }
  .g-gate { grid-template-columns: minmax(0, 1fr); }
  .g-gate-form, .g-gate-done { margin: 0 18px 18px clamp(48px, 6vw, 70px); }
}
@media (max-width: 1080px) {
  .g-hero-wrap { grid-template-columns: minmax(0, 1fr); }
  .g-hero-art { width: min(78%, 380px); margin: 0 auto 30px; }
  .g-minute { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 15c. Small screens: the rail becomes a chip bar under the site header ------ */
@media (max-width: 1023px) {
  html:has(.tpl-guide) { scroll-padding-top: calc(var(--head-h) + 70px); }
  .g-ch, .g-card, .g-gate { scroll-margin-top: calc(var(--head-h) + 70px); }
  .g-layout { display: block; padding-top: 0; }
  .g-rail {
    position: sticky; top: var(--head-h); z-index: 40; max-height: none; overflow: visible; padding: 0;
    margin: 0 calc(-1 * var(--gutter)) clamp(36px, 6vw, 56px); background: rgba(255,255,255,.97); border-bottom: 1px solid var(--rule);
    backdrop-filter: saturate(1.2) blur(6px);
  }
  .g-rail-k { display: none; }
  .g-rail ol { display: flex; gap: 8px; overflow-x: auto; border: 0; padding: 10px var(--gutter); scrollbar-width: none; scroll-behavior: smooth; }
  .g-rail ol::-webkit-scrollbar { display: none; }
  .g-rail li { flex: none; }
  .g-rail a { display: inline-flex; gap: 7px; padding: 7px 13px 7px 11px; margin: 0; border: 1px solid var(--rule); border-radius: 999px; white-space: nowrap; font-size: 14px; }
  .g-rail a[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
  .g-rail a[aria-current="true"] .g-rail-n { color: var(--brass-light); }
  .g-rail-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; margin: 0; background: transparent; }
}
@media (max-width: 860px) {
  .g-anatomy-head { grid-template-columns: minmax(0, 1fr); }
  .g-video { grid-template-columns: minmax(0, 1fr); }
  .g-video-stage { grid-row: auto; margin-bottom: 8px; }
  .g-faq-item { grid-template-columns: minmax(0, 1fr); }
  .g-clock-controls, .g-form-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .g-hero-lines { display: none; }
  .g-hero-wrap { padding-left: var(--gutter); }
  .g-hero-art { width: min(72%, 300px); margin-bottom: 18px; }
  .g-strip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; margin: 20px -4px 0; scrollbar-width: thin; }
  .g-strip li { flex: 0 0 40%; scroll-snap-align: start; }
  .g-anatomy-head p::after { content: " Swipe through the pages."; }
  .g-answer, .g-result { padding: 18px 16px; }
  .g-plead { padding: 12px 14px; font-size: 15px; }
  .g-dlong { display: none; }
  .g-dshort { display: inline !important; }
  .g-shelf { grid-template-columns: minmax(0, 1fr); }
  .g-minute { grid-template-columns: minmax(0, 1fr); }
  .g-tool-head, .g-tool-body { padding-left: 20px; padding-right: 20px; }
  .g-check { padding: 4px 20px 0; }
  .g-check-actions { padding: 12px 20px 18px; }
  .g-desk-item { grid-template-columns: minmax(0, 1fr); }
  .g-desk-item details { grid-column: 1; }
  .g-timeline::before { left: 5px; }
  .g-timeline li { grid-template-columns: minmax(0, 1fr); padding-left: 30px; }
  .g-timeline li::after { left: 0; }
  .g-tl-day { text-align: left; padding: 0 0 4px; }
  .g-related { grid-template-columns: minmax(0, 1fr); }
  .g-disclose { padding: 64px 18px 18px; }
  .g-disclose::before { left: 18px; top: 18px; transform: rotate(-6deg); }
  .g-gate::before, .g-gate::after { display: none; }
  .g-gate-intro { padding: 30px 20px 6px; }
  .g-gate-form, .g-gate-done { margin: 16px 12px 12px; padding: 22px 18px; }
  .g-track { display: none; }
  .g-sheet-paper { padding-left: 54px; background-image: linear-gradient(90deg, transparent 38px, #d9cfbd 38px, #d9cfbd 39px, transparent 39px, transparent 41px, #d9cfbd 41px, #d9cfbd 42px, transparent 42px); }
}
/* tables stack into labeled rows on phones (labels come from the header, set by guide.js) */
@media (max-width: 640px) {
  .g-table.is-stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .g-table.is-stacked, .g-table.is-stacked tbody, .g-table.is-stacked tr, .g-table.is-stacked th, .g-table.is-stacked td { display: block; width: auto; }
  .g-table.is-stacked tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .g-table.is-stacked tbody tr:first-child { border-top: 1.5px solid var(--ink); }
  .g-table.is-stacked th, .g-table.is-stacked td { border: 0; padding: 3px 0; white-space: normal !important; width: auto !important; }
  .g-table.is-stacked td[data-label]::before { content: attr(data-label); display: block; font: 600 10.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
  .g-table.is-stacked td:first-child[data-label]::before { display: none; }
  .g-table.is-stacked tbody tr:hover > * { background: none; }
  .g-pre { padding-left: 52px; font-size: 12.5px; background-image: linear-gradient(90deg, transparent 38px, #d9cfbd 38px, #d9cfbd 39px, transparent 39px, transparent 41px, #d9cfbd 41px, #d9cfbd 42px, transparent 42px); }
  .g-pre .ln::before { left: -50px; width: 30px; }
  .g-deadlines td:first-child { white-space: normal; }
}
@media (max-width: 480px) {
  .g-hero-actions .btn { flex: 1 1 100%; }
  .g-card-meta { flex-direction: column; gap: 4px; }
}

/* print: the reading text only */
@media print {
  .g-rail, .g-video, .g-tool, .g-gate, .g-hero-art, .g-hero-actions, .g-related, .preview-bar { display: none !important; }
  .g-hero { background: none; color: #000; }
  .g-hero h1, .g-h1-b, .g-hero-dek, .g-byline, .g-eyebrow, .g-crumbs { color: #000 !important; }
  .g-hero-lines { display: none; }
  .g-layout { display: block; }
  .g-ch { padding-right: 0 !important; break-before: auto; }
  .g-note { float: none !important; width: auto !important; margin: 12px 0 !important; }
}

/* late additions */
.guide [hidden] { display: none !important; }
fieldset.g-q { border: 0; margin: 0 0 18px; padding: 0 0 18px; min-width: 0; border-bottom: 1px dashed var(--rule); }
fieldset.g-q legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; }
fieldset.g-q legend + * { clear: both; }
.g-form-grid--3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr); }
@media (max-width: 860px) { .g-form-grid--3 { grid-template-columns: minmax(0, 1fr); } }
/* a copyable passage of argument, set like pleading text */
.g-copy .g-plead--block { margin: 0; border: 0; padding: 20px 24px 6px; background: var(--paper); font-size: 16px; line-height: 1.75; }
.g-plead--block p { margin: 0 0 1em; text-indent: 2.5em; }
@media (min-width: 1360px) { .g-ch:not(.g-ch--wide):not(.g-ch--library) > .g-copy { clear: right; } }