/* ==========================================================================
   calcivilguide.com  ·  stylesheet v7
   Target: static build in /dist, generated by /site/build.pl.

   VERSION HISTORY, kept so rejected directions do not come back.

   v1  Rejected. Six bordered cards, a 4px accent rail on each, an uppercase
       label on every block, coloured chips breaking the reading line.
       Decoration standing in for hierarchy.

   v2  Rejected. Built to be READ. Serif body over 2,500 words is an essay and
       an attorney at 9pm is not reading an essay.

   v3  Rejected on layout. Content model was right (answer, glance panel,
       detail behind a toggle) but the page was still one long centred column.
       No persistent navigation, so every page was a dead end and the whole
       horizontal half of a laptop screen sat empty.

   v4  Rejected. A documentation sidebar built for a site that has six pages.
       Three concrete defects, all reported from the live site:
         - the sidebar carried its own scrollbar, so the page had two
         - 20 of its 26 links were dead "soon" items
         - below 1040px the grid collapsed and the entire nav stacked ABOVE
           the content, so you scrolled past 26 links to reach a sentence
       The lesson: navigation furniture has to be sized to the site that
       exists, not the site that is planned.

   v5  Rejected on three defects reported from the live site.
         - LEFT-HUGGING. --shell was 96rem against a 64ch measure. At 1280px
           the content track computed to 973px holding 541px of text, so a
           432px void opened between the prose and the rail and the page read
           as dumped in the left corner. A grid track of 1fr next to a capped
           measure is the bug. Size the track to the measure instead.
         - GLARE. --paper was #fffdf9, effectively full-luminance white, on a
           site people read at 9pm. Dark tokens existed but no control ever
           shipped, so a light-mode reader had no way out.
         - THE RAIL WAS NEVER BUILT. The v5 note above claimed a sticky
           contents rail. No `.rail` rule was ever written. The only match in
           the file was `.tree .rail`, a different nested element. The TOC
           rendered as unstyled 17px text and scrolled away.

   v6  Superseded by v7, but every fix in it stands. Layout, rail, theme
       control, print rules and accessibility all came from v6 and none of it
       was reverted; v7 only repaints.

       Same content model and the same restraint as v5, corrected.
       Content track sized to the measure and the content+rail pair centred,
       so the column sits under the wordmark instead of in the corner. Paper
       ramp pulled down off white. Theme control in the masthead, three-state,
       no flash on load. The rail exists now: sticky, tracks the section you
       are in. Print stylesheet, because this reader prints things and takes
       them to a hearing.
       Unchanged on purpose: sans body, serif display, one accent, cases
       italic and statutes roman, no decoration standing in for hierarchy.

   v7  Current. Repaint only, no structural change.
       Ground moved from warm cream to cool blue grey at the SAME luminance
       (#f5f2e9 0.888 -> #eef2f7 0.884), because cream reads as printed paper
       and the complaint was that the site did not look digital. Accent moved
       off the near-black navy #1b3a5c, which did not read as a colour at body
       size, to #1a4f8a. Blue was then distributed onto vocabulary that was
       ALREADY there and already grey: kickers, glance labels, panel headings,
       table headers, statute numbers, the section rule, the wordmark.
       Also: one soft shadow on panels, eased hover states, 6px radius.
       The v1 rejection still binds. No chips, no badges, no accent rail on
       every block. If a future version needs to undo this, the whole layer is
       one commented block at the foot of this file.
   ========================================================================== */

@font-face{
  font-family:"Source Serif VF";
  src:url(/assets/serif.e9192c2fe0.woff2) format("woff2");
  font-weight:200 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Sans VF";
  src:url(/assets/sans.30164609c1.woff2) format("woff2");
  font-weight:200 900; font-style:normal; font-display:swap;
}

:root{
  --serif:"Source Serif VF",Charter,Cambria,Georgia,serif;
  --sans:"Source Sans VF","Segoe UI",-apple-system,Helvetica,Arial,sans-serif;

  /* Paper ramp, v7. Cool, not cream.
     v6 pulled the ground off white to kill glare and that part stands, so the
     luminance here is deliberately unchanged: #eef2f7 measures 0.884 against
     v6's #f5f2e9 at 0.888. What changed is the hue. A warm cream ground reads
     as printed paper, which is what the site looked like and not what it is.
     Same brightness, blue cast, and the whole thing reads as a screen. */
  --paper:#eef2f7; --paper-2:#e2e9f1; --paper-3:#d5dfea;
  --ink:#121822; --ink-2:#38424f; --ink-3:#556170;
  --rule:#d3dce6; --rule-2:#aabbcd;
  /* Accent moved off the near-black navy #1b3a5c, which barely read as a
     colour at body size, onto a blue that is actually blue. */
  --accent:#1a4f8a; --accent-2:#2a68ab;
  --alert:#a3291f; --caution:#75530f; --ok:#1d6349;
  --ok-wash:#e0efe8; --ok-edge:#aed0c0; --warn-wash:#f6edda; --warn-edge:#dfcaa2;
  --shadow:0 1px 2px rgba(18,24,34,.06), 0 1px 1px rgba(18,24,34,.04);
  --shadow-2:0 2px 4px rgba(18,24,34,.07), 0 4px 12px rgba(18,24,34,.05);
  --radius:6px;
  --tap:.16s cubic-bezier(.2,0,.2,1);

  /* Layout, v6. --measure is the spine: prose, panels and tables share one
     left and one right edge. The content grid track is sized TO the measure,
     never 1fr, which is what opened the void in v5. */
  --measure:66ch;
  --rail:13.5rem;
  /* --mast is the sticky masthead height, and it offsets both the rail and
     every anchor target. Defined with the masthead rules, not here, because
     it is 0 below the width at which the bar stops being sticky. */
  --gap:3rem;
  --shell:78rem;

  --fs:1.0625rem; --lh:1.6;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4.5rem;
}

/* Three-state theme. The media query is the "auto" case. Both explicit
   selectors outrank it on specificity, so a reader's choice wins over the OS
   in either direction. Keep the two dark blocks byte-identical. */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#10151d; --paper-2:#182029; --paper-3:#202a36;
    --ink:#e4eaf1; --ink-2:#b6c2d0; --ink-3:#8b98a8;
    --rule:#26303c; --rule-2:#3d4b5c;
    --accent:#7fb2ee; --accent-2:#a9cdf8;
    --alert:#ef968b; --caution:#dcb266; --ok:#78c5a6;
    --ok-wash:#122520; --ok-edge:#2b5445; --warn-wash:#241f11; --warn-edge:#4f4423;
    --shadow:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 4px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:#10151d; --paper-2:#182029; --paper-3:#202a36;
  --ink:#e4eaf1; --ink-2:#b6c2d0; --ink-3:#8b98a8;
  --rule:#26303c; --rule-2:#3d4b5c;
  --accent:#7fb2ee; --accent-2:#a9cdf8;
  --alert:#ef968b; --caution:#dcb266; --ok:#78c5a6;
  --ok-wash:#122520; --ok-edge:#2b5445; --warn-wash:#241f11; --warn-edge:#4f4423;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 4px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --paper:#eef2f7; --paper-2:#e2e9f1; --paper-3:#d5dfea;
  --ink:#121822; --ink-2:#38424f; --ink-3:#556170;
  --rule:#d3dce6; --rule-2:#aabbcd;
  --accent:#1a4f8a; --accent-2:#2a68ab;
  --alert:#a3291f; --caution:#75530f; --ok:#1d6349;
  --ok-wash:#e0efe8; --ok-edge:#aed0c0; --warn-wash:#f6edda; --warn-edge:#dfcaa2;
  --shadow:0 1px 2px rgba(18,24,34,.06), 0 1px 1px rgba(18,24,34,.04);
  --shadow-2:0 2px 4px rgba(18,24,34,.07), 0 4px 12px rgba(18,24,34,.05);
}
html{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs); line-height:var(--lh);
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased}

/* ------------------------------------------------- network bar, 3 sites */
.net{background:var(--paper-3); border-bottom:1px solid var(--rule-2);
  font-size:.8125rem}
.net-in{max-width:var(--shell); margin-inline:auto; padding:.4rem var(--s5);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s5)}
.net-label{color:var(--ink-3); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; font-size:.6875rem}
.net a{color:var(--ink-2); text-decoration:none; padding-bottom:1px;
  border-bottom:1px solid transparent}
.net a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.net a[aria-current]{color:var(--ink); font-weight:600;
  border-bottom-color:var(--accent)}
.net .sep{color:var(--rule-2)}

/* ------------------------------------------------------------- masthead
   Sticky. v3 was rejected in part because "every page was a dead end" with no
   persistent navigation; the nav moved into the masthead in v5 but the
   masthead still scrolled away, so on a 3,000 word guide the effect was the
   same. The network bar above it is not sticky, it scrolls off once. */
.masthead{border-bottom:1px solid var(--rule-2); background:var(--paper)}
.masthead::after{content:""; position:absolute; left:0; right:0; top:100%;
  height:1px; box-shadow:var(--shadow); opacity:0; transition:opacity .18s}
body.is-scrolled .masthead::after{opacity:1}

/* Sticky only while the masthead is one line. Below about 820px the nav wraps
   under the wordmark and the bar grows to roughly 158px, which on a 812px
   phone is a fifth of the screen held permanently, and every anchor jump then
   lands its heading behind the bar. So it scrolls away on small screens and
   --mast drops to 0 to keep scroll-margin honest. */
:root{--mast:0rem}
@media (min-width:820px){
  :root{--mast:4.5rem}
  .masthead{position:sticky; top:0; z-index:20}
}
.masthead-in{max-width:var(--shell); margin-inline:auto;
  padding:var(--s4) var(--s5); display:flex; flex-wrap:wrap;
  align-items:baseline; justify-content:space-between; gap:var(--s3) var(--s5)}
.wordmark{font-family:var(--serif); font-size:1.375rem; font-weight:600;
  letter-spacing:-.022em; color:var(--ink); text-decoration:none}
.wordmark em{font-style:normal; color:var(--ink-3); font-weight:400}
.tagline{font-size:.8125rem; color:var(--ink-3)}

/* ---------------------------------------------------------- layout v6
   Six pages do not need a documentation sidebar, and v4 proved it. That part
   of v5 was right and stands.
   What v5 got wrong was the track sizing. `minmax(0,1fr)` next to a measure
   the prose can never fill means the leftover width becomes a void on the
   right, and the reader reads that as text shoved into the corner. So the
   content track is sized to the measure, the pair is centred with
   justify-content, and the column lands under the wordmark. */
.shell{max-width:var(--shell); margin-inline:auto; padding:0 var(--s5);
  display:grid; gap:0 var(--gap); align-items:start;
  justify-content:center;
  grid-template-columns:minmax(0,var(--measure))}
@media (min-width:1180px){
  .shell.has-rail{grid-template-columns:minmax(0,var(--measure)) var(--rail)}
}
.sidebar,.sb-toggle{display:none !important}

/* horizontal nav in the masthead, replaces the sidebar */
.mast-nav{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5);
  font-size:.9375rem; font-weight:500}
.mast-nav a{color:var(--ink-2); text-decoration:none; padding-bottom:2px;
  border-bottom:1px solid transparent; white-space:nowrap}
.mast-nav a:hover{color:var(--ink); border-bottom-color:var(--ink-3)}
.mast-nav a[aria-current]{color:var(--ink); font-weight:600;
  border-bottom-color:var(--accent)}

/* main */
.main{padding:var(--s6) 0 var(--s8); min-width:0}
.col{max-width:100%}

/* ------------------------------------------------------- contents rail
   v5 claimed this existed. It did not: the only `.rail` in the file was
   `.tree .rail`, so the aside rendered as unstyled 17px text and scrolled
   off. Sticky, quiet, and it marks the section you are actually in, which is
   the whole reason a rail beats a table of contents at the top.
   position:sticky on a grid item needs align-self:start, which .shell sets
   through align-items:start. No nested scrollbar: max-height plus overflow
   only engages on a TOC longer than the viewport. */
aside.rail{position:sticky; top:calc(var(--mast) + var(--s5)); align-self:start;
  max-height:calc(100vh - var(--mast) - var(--s6)); overflow-y:auto;
  padding:var(--s6) 0 var(--s6); font-size:.8125rem; line-height:1.45;
  border-left:1px solid var(--rule); padding-left:var(--s4);
  scrollbar-width:thin}
aside.rail h3{font-family:var(--sans); font-size:.6875rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 var(--s3)}
aside.rail ol{list-style:none; margin:0; padding:0; counter-reset:rail}
aside.rail li{margin:0; counter-increment:rail}
aside.rail a{display:block; padding:.3rem 0 .3rem var(--s4); position:relative;
  color:var(--ink-3); text-decoration:none; margin-left:calc(var(--s4) * -1 - 1px);
  border-left:2px solid transparent}
aside.rail a::before{content:counter(rail) "."; position:absolute; left:var(--s3);
  color:var(--rule-2); font-variant-numeric:tabular-nums; font-size:.6875rem}
aside.rail a{padding-left:calc(var(--s4) + 1.1rem)}
aside.rail a:hover{color:var(--ink); border-left-color:var(--rule-2)}
aside.rail a[aria-current="true"]{color:var(--ink); font-weight:600;
  border-left-color:var(--accent)}
aside.rail a[aria-current="true"]::before{color:var(--accent)}
@media (max-width:1179px){ aside.rail{display:none} }

/* Inline contents, the narrow-screen half of the pair. Open by default: a
   reader on a phone is orienting, and a shut box tells them nothing. Uses the
   same summary treatment as details.more so the page has one disclosure
   idiom, not two. */
.toc{display:none; border:1px solid var(--rule-2); border-radius:var(--radius);
  background:var(--paper-2); margin:0 0 var(--s6); padding:0 var(--s5)}
@media (max-width:1179px){ .toc{display:block} }
.toc > summary{list-style:none; cursor:pointer; padding:var(--s3) 0;
  font-size:.6875rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:var(--s3)}
.toc > summary::-webkit-details-marker{display:none}
.toc > summary::before{content:"+"; font-size:.9375rem; line-height:1;
  width:1.05rem; height:1.05rem; border:1px solid var(--rule-2);
  border-radius:4px; display:inline-flex; align-items:center;
  justify-content:center; flex:none}
.toc[open] > summary::before{content:"\2212"}
.toc > summary:hover{color:var(--ink)}
.toc nav{padding:0 0 var(--s3)}
.toc ol{margin:0; padding:0 0 0 1.5em; max-width:100%}
.toc li{margin-bottom:var(--s2); font-size:.9375rem}
.toc li::marker{color:var(--ink-3); font-variant-numeric:tabular-nums}
.toc a{color:var(--ink-2); text-decoration-color:var(--rule-2)}
.toc a:hover{color:var(--accent)}

/* ------------------------------------------------------- theme control
   The dark tokens shipped in v5 with nothing to trigger them. Three states,
   because a reader who has set their OS to dark and wants this one page light
   is a real case. The button label is written by the script. */
.theme{display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--sans); font-size:.75rem; font-weight:600;
  letter-spacing:.04em; color:var(--ink-3); background:transparent;
  border:1px solid var(--rule-2); border-radius:var(--radius);
  padding:.28rem .55rem; cursor:pointer; line-height:1.3}
.theme:hover{color:var(--ink); border-color:var(--ink-3)}
.theme:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.theme svg{width:.85rem; height:.85rem; flex:none; fill:none;
  stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
  stroke-linejoin:round}
.theme .t-ico{display:none}
:root[data-theme="light"] .theme .t-ico-light{display:block}
:root[data-theme="dark"]  .theme .t-ico-dark {display:block}
.theme .t-ico-auto{display:block}
:root[data-theme] .theme .t-ico-auto{display:none}
.mast-right{display:flex; align-items:center; gap:var(--s5); flex-wrap:wrap}

/* ----------------------------------------------------------- typography */
h1,h2{font-family:var(--serif); font-weight:600; color:var(--ink);
  text-wrap:balance; letter-spacing:-.018em}
h1{font-size:clamp(1.75rem,1.4rem + 1.7vw,2.35rem); line-height:1.14;
  margin:0 0 var(--s4)}
/* v5 ran h2 at 21px against 17px body. Four pixels is not a hierarchy, and on
   a page this dense the reader loses the section boundary while skimming. */
h2{font-size:1.5rem; line-height:1.25; margin:var(--s7) 0 var(--s3)}
/* The hairline is only for top-level article sections. Card, panel and
   footer h2s carry their own frame and would double up. */
.col > h2:first-child{margin-top:var(--s8); padding-top:var(--s4);
  border-top:1px solid var(--rule)}
.main > .col:first-of-type > h2:first-child{margin-top:var(--s7)}
h3{font-family:var(--sans); font-size:1.0625rem; font-weight:700;
  margin:var(--s6) 0 var(--s2); color:var(--ink); letter-spacing:-.005em}
/* The rail jumps to these. Without it the heading lands flush against the
   top edge of the window and reads as though the page mis-scrolled. */
:target,[id]{scroll-margin-top:calc(var(--mast) + var(--s4))}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
p{margin:0 0 var(--s4); text-wrap:pretty; max-width:100%}
.lede{font-family:var(--serif); font-size:1.1875rem; line-height:1.5;
  color:var(--ink-2); max-width:56ch}
a{color:var(--accent); text-decoration-line:underline;
  text-decoration-thickness:1px; text-underline-offset:.16em;
  text-decoration-color:var(--rule-2)}
a:hover{color:var(--accent-2); text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
ul,ol{margin:0 0 var(--s4); padding-left:1.3em; max-width:100%}
li{margin-bottom:var(--s2)}
li::marker{color:var(--ink-3)}
strong{font-weight:600}
.case{font-style:italic}
.stat{font-variant-numeric:lining-nums tabular-nums; white-space:nowrap;
  color:var(--ink-2)}
.kicker{font-size:.6875rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s3)}
.breadcrumb{font-size:.8125rem; color:var(--ink-3); margin:0 0 var(--s3)}
.breadcrumb a{color:var(--ink-3)}

/* ------------------------------------------------------ article content */
.answer{font-family:var(--serif); font-size:1.375rem; line-height:1.4;
  font-weight:500; max-width:54ch; margin:0 0 var(--s5)}
.answer .q{display:block; font-family:var(--sans); font-size:1rem;
  font-weight:400; line-height:1.55; color:var(--ink-2); margin-top:var(--s3)}

.glance{border:1px solid var(--rule-2); background:var(--paper-2);
  border-radius:var(--radius); padding:var(--s2) var(--s5); margin:0 0 var(--s6);
  max-width:100%}
.glance dl{margin:0; display:grid; grid-template-columns:1fr}
@media (min-width:600px){ .glance dl{grid-template-columns:11rem 1fr} }
.glance dt{font-size:.6875rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
  padding:var(--s3) 0 0; border-top:1px solid var(--rule)}
.glance dd{margin:0; padding:var(--s3) 0; border-top:1px solid var(--rule);
  font-size:.9375rem; color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums}
@media (max-width:599px){
  .glance dt{padding-bottom:var(--s1)}
  .glance dd{border-top:0; padding-top:0}
}
.glance dl > dt:first-of-type,
.glance dl > dt:first-of-type + dd{border-top:0}
.glance .flag{color:var(--alert); font-weight:600}
.glance .fine{font-size:.8125rem; color:var(--ink-3); display:block;
  margin-top:.1rem}

.banner{display:flex; gap:var(--s3); align-items:baseline; flex-wrap:wrap;
  border-top:2px solid var(--alert); padding:var(--s3) 0 0;
  margin:0 0 var(--s6); max-width:100%}
.banner .label{font-size:.6875rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--alert); white-space:nowrap}
/* The label was written as a chip and nowrap suited that. Several of these are
   now full sentences, and a nowrap sentence sets the flex row's minimum width,
   which pushed /guides/motion-to-compel-further-responses/ to 491px on a 375px
   phone and scrolled the whole page sideways. Below the breakpoint the banner
   stacks and the label is allowed to break. */
@media (max-width:640px){
  .banner{display:block}
  .banner .label{white-space:normal; display:block; margin-bottom:var(--s2)}
}
.banner p{margin:0; font-size:.9375rem}
.banner.is-caution{border-top-color:var(--caution)}
.banner.is-caution .label{color:var(--caution)}

.point{font-size:1.0625rem; font-weight:600; margin-bottom:var(--s3);
  max-width:100%; line-height:1.45}

details.more{border-top:1px solid var(--rule); margin:var(--s4) 0 var(--s5);
  max-width:100%}
details.more > summary{list-style:none; cursor:pointer; padding:var(--s3) 0;
  font-size:.75rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:var(--s3)}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::before{content:"+"; font-size:.9375rem; line-height:1;
  width:1.05rem; height:1.05rem; border:1px solid var(--rule-2);
  border-radius:4px; display:inline-flex; align-items:center;
  justify-content:center; color:var(--ink-3); flex:none}
details.more[open] > summary::before{content:"\2212"}
details.more > summary:hover{color:var(--ink)}
details.more .inner{padding:0 0 var(--s5) calc(1.05rem + var(--s3));
  font-size:.9375rem; color:var(--ink-2); line-height:1.6}
details.more .inner p{max-width:56ch}
details.more .inner p:last-child{margin-bottom:0}
details.more .inner strong{color:var(--ink)}

.breaks{margin:var(--s7) 0 var(--s6); border-top:2px solid var(--ink);
  padding-top:var(--s4)}
.breaks h2{margin:0 0 var(--s2); font-size:1.3125rem}
.breaks .sub{font-size:.875rem; color:var(--ink-3); margin-bottom:var(--s4)}
.bk{border-bottom:1px solid var(--rule); padding:var(--s4) 0;
  display:grid; gap:var(--s2) var(--s5); max-width:100%}
@media (min-width:600px){ .bk{grid-template-columns:9rem 1fr} }
.bk:first-of-type{border-top:1px solid var(--rule)}
.verdict{font-size:.6875rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; line-height:1.6}
.verdict.fatal{color:var(--alert)}
.verdict.curable{color:var(--caution)}
.verdict.soft{color:var(--ok)}
.bk .what{font-weight:600; margin:0 0 var(--s2)}
.bk .why{margin:0; font-size:.9375rem; color:var(--ink-2)}

table.rules{width:100%; border-collapse:collapse; font-size:.9375rem;
  margin:var(--s4) 0 var(--s5); max-width:100%}
table.rules th{text-align:left; font-size:.6875rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  padding:0 var(--s4) var(--s2) 0; border-bottom:1px solid var(--rule-2)}
table.rules td{padding:var(--s3) var(--s4) var(--s3) 0;
  border-bottom:1px solid var(--rule); vertical-align:baseline;
  color:var(--ink-2)}
table.rules td:first-child{color:var(--ink); font-weight:600}
.table-wrap{overflow-x:auto; max-width:100%}

.meta{font-size:.8125rem; color:var(--ink-3); display:flex; flex-wrap:wrap;
  gap:var(--s2) var(--s5); padding:var(--s3) 0;
  border-block:1px solid var(--rule); margin:var(--s6) 0 0;
  max-width:100%}
.meta .when{font-variant-numeric:lining-nums tabular-nums}

/* ---------------------------------------------------- verification stamp
   The same facts the .meta block used to carry at the foot of the page,
   moved under the answer. This is the page saying when it was last checked
   and who to tell when it is wrong, and it is the entire trust argument for
   a site published without a byline, so it is not going at the bottom.
   Quiet on purpose. A dated line in small type reads as a colophon, which is
   credible. The same information in a coloured badge reads as a trust seal,
   which is not. */
.stamp{display:flex; flex-wrap:wrap; align-items:baseline;
  gap:var(--s2) var(--s5); margin:0 0 var(--s6); padding:var(--s3) 0;
  border-block:1px solid var(--rule);
  font-size:.8125rem; line-height:1.5; color:var(--ink-3); max-width:100%}
.stamp .when{color:var(--ink-2); font-weight:600;
  font-variant-numeric:lining-nums tabular-nums}
.stamp > span{display:inline-flex; align-items:baseline; gap:.3rem}
/* Separators are drawn, not typed, so the flex gap stays the only spacing
   rule and a wrapped row never leaves a dangling divider. */
.stamp > span + span::before{content:""; align-self:center;
  width:1px; height:.85em; margin-right:.55rem; background:var(--rule-2)}
.stamp a{color:var(--ink-3); text-decoration-color:var(--rule-2)}
.stamp a:hover{color:var(--accent)}
@media (max-width:520px){
  .stamp{gap:var(--s1) var(--s4); font-size:.78125rem}
  .stamp > span + span::before{display:none}
}

/* --------------------------------------------------------------- skip link
   Off screen until focused. First tab stop on every page. */
.skip{position:absolute; left:-9999px; top:0; z-index:60;
  background:var(--paper); color:var(--ink); font-size:.875rem;
  font-weight:600; padding:var(--s3) var(--s4);
  border:1px solid var(--accent); border-radius:0 0 3px 0;
  text-decoration:none}
.skip:focus{left:0}
.main:focus{outline:none}

.handoff{margin:var(--s6) 0; padding-top:var(--s4);
  border-top:1px solid var(--rule-2); max-width:100%;
  font-size:.9375rem; color:var(--ink-2)}
.handoff b{display:block; font-family:var(--serif); font-size:1.0625rem;
  font-weight:600; color:var(--ink); margin-bottom:var(--s2)}

/* ----------------------------------------------------------------- home */
.hero{padding:0 0 var(--s5); border-bottom:1px solid var(--rule);
  margin-bottom:var(--s6)}
.hero h1{max-width:26ch}
.cards{display:grid; gap:var(--s5); margin-bottom:var(--s7)}
@media (min-width:760px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
.card{border:1px solid var(--rule); border-radius:var(--radius); padding:var(--s4) var(--s5)}
.card h2{font-size:1.0625rem; font-family:var(--sans); font-weight:700;
  margin:0 0 var(--s2); letter-spacing:0}
.card p{font-size:.9375rem; color:var(--ink-3); margin:0 0 var(--s3);
  max-width:none}
.card a.go{font-size:.9375rem; font-weight:600}

.reviewed{width:100%; border-collapse:collapse; font-size:.9375rem}
.reviewed th{font-size:.6875rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); text-align:left;
  padding:0 var(--s5) var(--s2) 0; border-bottom:1px solid var(--rule-2)}
.reviewed td{padding:var(--s3) var(--s5) var(--s3) 0;
  border-bottom:1px solid var(--rule); vertical-align:baseline;
  color:var(--ink-2)}
.reviewed td:first-child{color:var(--ink)}
.reviewed .when{font-variant-numeric:lining-nums tabular-nums;
  color:var(--ink-3); white-space:nowrap}

.why{border-top:2px solid var(--ink); padding-top:var(--s5);
  margin-top:var(--s7); display:grid; gap:var(--s5) var(--gap)}
@media (min-width:820px){ .why{grid-template-columns:1fr 1fr} }
.why h2{margin:0 0 var(--s3); font-size:1.3125rem}
.why p{font-size:.9375rem; color:var(--ink-2); max-width:48ch}
.why strong{color:var(--ink)}

.band{background:var(--paper-2); border:1px solid var(--rule-2);
  border-radius:var(--radius); padding:var(--s5); margin-top:var(--s7)}
.band h2{margin:0 0 var(--s2); font-size:1.1875rem}
.band > p{font-size:.9375rem; color:var(--ink-2); max-width:52ch}
.band .cards{margin:var(--s5) 0 0}
.band .card{background:var(--paper); border-color:var(--rule)}

/* --------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--rule-2); background:var(--paper-2)}
.foot-in{max-width:var(--shell); margin-inline:auto;
  padding:var(--s6) var(--s5) var(--s7); font-size:.875rem;
  color:var(--ink-3); line-height:1.6}
.foot-cols{display:grid; gap:var(--s5); margin-bottom:var(--s5)}
@media (min-width:720px){ .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))} }
.foot h4{font-size:.6875rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 var(--s3)}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:var(--s2)}
.foot a{color:var(--ink-2)}
.foot .fine{max-width:74ch; padding-top:var(--s4);
  border-top:1px solid var(--rule)}

@media (max-width:640px){
  .shell,.masthead-in,.foot-in,.net-in{padding-left:var(--s4);
    padding-right:var(--s4)}
  .answer{font-size:1.1875rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ---------------------------------------------------------- guides index */
.cat{margin:0 0 var(--s7)}
.cat > h2{font-size:1.3125rem; margin:0 0 var(--s2);
  padding-bottom:var(--s2); border-bottom:1px solid var(--rule-2)}
.cat-blurb{font-size:.9375rem; color:var(--ink-3); margin:0 0 var(--s3);
  max-width:60ch}

/* ------------------------------------------------- decision tree + tools
   Carried over from Jacob's standalone article and retoned to the site
   palette: semantic colour as a tinted ground only inside a decision branch,
   where green/amber IS the information, never elsewhere. */
.tree{background:var(--paper-2); border:1px solid var(--rule-2); border-radius:var(--radius);
  padding:var(--s5) var(--s5) var(--s3); margin:var(--s6) 0; max-width:100%}
.tree-h{font-size:.6875rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s4)}
.tree .q{background:var(--paper); border:1px solid var(--rule);
  border-left:3px solid var(--accent); border-radius:var(--radius);
  padding:var(--s3) var(--s4); margin:0 0 var(--s1); font-weight:600;
  font-size:.9375rem; line-height:1.45}
.tree .cite-mini{display:block; font-weight:400; font-size:.8125rem;
  color:var(--ink-3); margin-top:.2rem}
.branches{display:flex; flex-wrap:wrap; gap:var(--s2);
  margin:0 0 var(--s4); padding-left:var(--s4)}
.b{flex:1 1 15rem; border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--s3) var(--s4); font-size:.875rem; line-height:1.5}
.b .lab{display:block; font-weight:700; font-size:.6875rem; letter-spacing:.07em;
  text-transform:uppercase; margin-bottom:.15rem}
.b-go{background:var(--ok-wash); border-color:var(--ok-edge)}
.b-go .lab{color:var(--ok)}
.b-stop{background:var(--warn-wash); border-color:var(--warn-edge)}
.b-stop .lab{color:var(--caution)}
.b-next{background:var(--paper)}
.b-next .lab{color:var(--ink-3)}
.tree .rail{position:static; display:block; padding:0 0 0 var(--s4);
  color:var(--ink-3); font-size:.8125rem; margin:0 0 var(--s3)}

.checklist{background:var(--paper-2); border:1px solid var(--rule-2);
  border-radius:var(--radius); padding:var(--s5) var(--s5) var(--s3);
  margin:var(--s6) 0; max-width:100%}
.checklist ol{margin:0; padding-left:1.4em}
.checklist li{margin-bottom:var(--s3); font-size:.9375rem}

.local{border:1px solid var(--rule-2); border-radius:var(--radius); padding:var(--s5);
  margin:var(--s5) 0; background:var(--paper-2); max-width:100%}
.local label{display:block; font-size:.6875rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:var(--s2)}
.local select{width:100%; font-family:var(--sans); font-size:1rem;
  padding:var(--s3) var(--s3); border:1px solid var(--rule-2); border-radius:var(--radius);
  background:var(--paper); color:var(--ink)}
#out{margin-top:var(--s4); background:var(--paper); border:1px solid var(--rule);
  border-radius:var(--radius); padding:var(--s4); font-size:.9375rem; line-height:1.6}
#out h4{margin:0 0 var(--s2); font-size:1rem; font-family:var(--sans)}
#out p{margin:0 0 var(--s3); max-width:none}
#out p:last-child{margin-bottom:0}
#out .rule{font-weight:600; color:var(--ink)}
#out .badge{display:inline-block; font-size:.625rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:.3em .5em;
  border-radius:4px; margin-bottom:var(--s3)}
.v-yes{background:var(--ok-wash); color:var(--ok); border:1px solid var(--ok-edge)}
.v-no{background:var(--warn-wash); color:var(--caution); border:1px solid var(--warn-edge)}

/* --------------------------------------------------------- walkthrough tool
   One question at a time, answers recorded underneath. Semantic colour is
   load-bearing here (green = file it, amber = you need a signature), which is
   the only place on the site a tinted ground is allowed. */
.tool{border:1px solid var(--rule-2); border-radius:var(--radius); background:var(--paper-2);
  padding:var(--s5); margin:var(--s6) 0; max-width:100%}
.tool-h{font-size:.6875rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 var(--s4)}
.tw-step{background:var(--paper); border:1px solid var(--rule);
  border-left:3px solid var(--accent); border-radius:var(--radius);
  padding:var(--s4) var(--s5)}
.tw-q{margin:0; font-size:1.0625rem; font-weight:600; line-height:1.45;
  max-width:none}
.tw-cite{margin:var(--s2) 0 0; font-size:.8125rem; color:var(--ink-3);
  max-width:none; font-variant-numeric:lining-nums tabular-nums}
.tw-actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s4) 0 0}
.tw-btn{font-family:var(--sans); font-size:.9375rem; font-weight:500;
  color:var(--ink); background:var(--paper); border:1px solid var(--rule-2);
  border-radius:var(--radius); padding:var(--s3) var(--s4); cursor:pointer;
  text-align:left; flex:1 1 12rem; line-height:1.4}
.tw-btn:hover{border-color:var(--accent); color:var(--accent)}
.tw-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tw-restart{flex:0 0 auto; color:var(--ink-3)}

.tw-result{border-left-width:3px}
.tw-result.tw-go{background:var(--ok-wash); border-color:var(--ok-edge);
  border-left-color:var(--ok)}
.tw-result.tw-stop{background:var(--warn-wash); border-color:var(--warn-edge);
  border-left-color:var(--caution)}
.tw-verdict{margin:0 0 var(--s2); font-size:.6875rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; max-width:none}
.tw-go .tw-verdict{color:var(--ok)}
.tw-stop .tw-verdict{color:var(--caution)}
.tw-h{margin:0 0 var(--s3); font-family:var(--serif); font-size:1.1875rem;
  font-weight:600; line-height:1.35; max-width:none}
.tw-p{margin:0; font-size:.9375rem; color:var(--ink-2); max-width:none}

.tw-trail{list-style:none; margin:var(--s4) 0 0; padding:0; max-width:none}
.tw-trail li{display:grid; grid-template-columns:1fr auto; gap:var(--s4);
  padding:var(--s2) 0; border-top:1px solid var(--rule);
  font-size:.8125rem; color:var(--ink-3); margin:0; align-items:baseline}
.tw-qa{line-height:1.4}
.tw-ans{font-weight:600; color:var(--ink-2); white-space:nowrap}
.tw-noscript{font-size:.875rem; color:var(--ink-3); margin:var(--s3) 0 0}
@media (max-width:520px){
  .tw-btn{flex:1 1 100%}
  .tw-trail li{grid-template-columns:1fr}
  .tw-ans{white-space:normal}
}

/* ============================================================ print
   This reader prints. A guide goes in the folder that goes to the hearing,
   and v5 had no print rules at all, so it printed the network bar, the nav,
   the theme control and a collapsed set of <details> that took the statutory
   text with them.

   Rules that matter here:
   - Every <details> is forced open. A printed page that hides the authority
     is worse than useless.
   - Link targets are expanded after the text, so a citation stays checkable
     on paper. Skipped for same-page anchors and mailto, which print as noise.
   - Nothing breaks across a heading or inside a .bk row.
   ========================================================================== */
@media print{
  :root{
    --paper:#fff; --paper-2:#fff; --paper-3:#fff;
    --ink:#000; --ink-2:#1a1a1a; --ink-3:#444;
    --rule:#bbb; --rule-2:#888;
    --accent:#000; --accent-2:#000;
    --alert:#000; --caution:#000; --ok:#000;
    --ok-wash:#fff; --ok-edge:#999; --warn-wash:#fff; --warn-edge:#999;
    --shadow:none;
    --measure:100%;
  }
  @page{ margin:18mm 16mm; }

  html{scroll-behavior:auto}
  body{background:#fff; color:#000; font-size:10.5pt; line-height:1.42;
    -webkit-print-color-adjust:exact; print-color-adjust:exact}

  /* .toc goes too: its anchors are links, and on paper a list of links with
     no page numbers behind them is just a wasted half page. */
  .skip,  .net,.masthead,aside.rail,.toc,.theme,.foot-cols,.handoff,.tw-actions,
  .tw-restart,.tw-noscript{display:none !important}

  .shell{display:block; max-width:none; padding:0}
  .main{padding:0}
  .col{max-width:none}

  /* The site identifies itself once, at the top of the first sheet. A printout
     with no provenance is the thing that gets handed round and mis-attributed. */
  .main::before{content:"CalCivilGuide.com";
    display:block; font-family:var(--serif); font-size:9pt; font-weight:600;
    letter-spacing:.02em; color:#000; border-bottom:.5pt solid #888;
    padding-bottom:3pt; margin-bottom:14pt}

  h1{font-size:19pt; line-height:1.15; margin:0 0 8pt}
  h2{font-size:13pt; margin:16pt 0 5pt; padding-top:0; border-top:0}
  .col > h2:first-child{margin-top:16pt; padding-top:0; border-top:0}
  h3{font-size:11pt; margin:11pt 0 3pt}
  h1,h2,h3{break-after:avoid; page-break-after:avoid}
  p,li{orphans:3; widows:3}

  .answer{font-size:12.5pt; line-height:1.35; margin:0 0 10pt}
  .lede{font-size:11pt}
  .glance,.tree,.checklist,.local,.tool,.band{border:.5pt solid #888;
    background:#fff; break-inside:avoid; page-break-inside:avoid}
  .banner{border-top:1.5pt solid #000; break-inside:avoid}
  .bk,.tw-step,.card{break-inside:avoid; page-break-inside:avoid}
  table.rules{break-inside:auto}
  table.rules tr{break-inside:avoid; page-break-inside:avoid}
  .table-wrap{overflow:visible}

  /* Authority must not print collapsed. */
  details.more{border-top:.5pt solid #bbb}
  details.more > summary{display:none}
  details.more .inner{padding-left:0; display:block !important}
  details:not([open]) > *{display:revert}

  a{color:#000; text-decoration:underline; text-decoration-color:#000}
  a[href^="http"]::after{content:" <" attr(href) ">";
    font-size:8.5pt; color:#444; word-break:break-all}
  a[href^="#"]::after,a[href^="mailto"]::after{content:""}

  /* The stamp prints. A printout that has been sitting in a file for six
     months should still say when the page behind it was last checked, and
     who to tell if it is wrong. That is the whole point of it. */
  .stamp{border-block:.5pt solid #888; font-size:8.5pt; color:#333;
    margin:0 0 14pt; padding:5pt 0; gap:4pt 14pt; break-inside:avoid}
  .stamp .when{color:#000}
  .stamp > span + span::before{background:#888}
  .meta{border-block:.5pt solid #888; font-size:9pt; margin-top:14pt}
  .foot{border-top:.5pt solid #888; background:#fff}
  .foot-in{padding:8pt 0 0; max-width:none}
  .foot .fine{font-size:8.5pt; color:#000; max-width:none; border-top:0;
    padding-top:0}
}

/* ==========================================================================
   v7 · colour and screen feel
   Kept in one block on purpose. Everything above is structure; this is the
   layer that makes it read as a product rather than a printout, and it is the
   layer most likely to be argued with. Delete this block and the site returns
   to v6 exactly.

   The v1 rejection still governs. Blue is going on things that ALREADY carry
   hierarchy, the labels and rules that were grey, not onto new chips, badges
   or rails invented to hold colour. Nothing here adds an element.
   ========================================================================== */

/* Labels were uniformly --ink-3 grey. They are the site's structural
   vocabulary, they appear on every panel, and colouring them is the cheapest
   way to get blue distributed across a page without inventing anything. */
.kicker,
.glance dt,
.tree-h,
.tool-h,
aside.rail h3,
.local label,
.foot h4{color:var(--accent)}

/* Wordmark carries the accent. It is the one place a masthead can hold colour
   without the nav competing with it. */
.wordmark{color:var(--accent)}
.wordmark em{color:var(--accent-2)}

/* Section rule gets a blue leading segment rather than a flat grey hairline.
   This is the h2 border-top from v6, not a new element. */
.col > h2:first-child{position:relative}
.col > h2:first-child::before{content:""; position:absolute; top:-1px; left:0;
  width:2.75rem; height:2px; background:var(--accent); border-radius:2px}

/* The answer is the single most important block on the page and was set in
   serif with nothing else marking it. A rule, not a panel: a tinted box here
   would be the v1 mistake. */
.answer{border-left:3px solid var(--accent); padding-left:var(--s5);
  margin-left:calc(var(--s1) * -1)}
@media (max-width:640px){ .answer{padding-left:var(--s4)} }

/* Depth. Panels sat flat on the ground and read as printed blocks. One soft
   shadow, and a lift on the two things that are actually clickable. */
.glance,.tree,.checklist,.local,.tool,.card,.toc{box-shadow:var(--shadow)}
.card{background:var(--paper); transition:box-shadow var(--tap),
  border-color var(--tap), transform var(--tap)}
.card:hover{box-shadow:var(--shadow-2); border-color:var(--rule-2);
  transform:translateY(-1px)}
.tw-btn{transition:border-color var(--tap), color var(--tap),
  box-shadow var(--tap), background var(--tap)}
.tw-btn:hover{box-shadow:var(--shadow); background:var(--paper)}

/* Interactive states, eased. v6 changed colour instantly on hover, which is
   the single clearest tell of a static document. */
a,.net a,.mast-nav a,aside.rail a,.theme,.toc a,details.more > summary{
  transition:color var(--tap), border-color var(--tap),
    background var(--tap), text-decoration-color var(--tap)}
.mast-nav a:hover{border-bottom-color:var(--accent)}

/* Statute and rule numbers. .stat already existed and only set tabular
   figures. Tinting it makes a citation legible as a citation while skimming,
   which on this site is most of what the reader is doing. */
.stat{color:var(--accent)}

/* Table headers pick up the accent with the rest of the label vocabulary. */
table.rules th,.reviewed th{color:var(--accent)}

/* The glance panel is the page's data block. A blue ground separates it from
   prose better than the neutral did, and it is the one panel that earns a
   tint because everything in it is a field and a value. */
.glance{background:color-mix(in srgb, var(--accent) 5%, var(--paper-2));
  border-color:color-mix(in srgb, var(--accent) 18%, var(--rule-2))}
@supports not (color: color-mix(in srgb, red, blue)){
  .glance{background:var(--paper-2); border-color:var(--rule-2)}
}

/* Masthead reads as chrome, not paper. */
.masthead{background:color-mix(in srgb, var(--accent) 3%, var(--paper))}
@supports not (color: color-mix(in srgb, red, blue)){
  .masthead{background:var(--paper)}
}
body.is-scrolled .masthead{box-shadow:var(--shadow)}

/* Focus ring, tightened. A 2px accent outline on a blue-grey ground needs the
   offset to stay legible. */
:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px;
  border-radius:2px}

@media print{
  /* None of the above survives paper. Tints cost toner and say nothing. */
  .answer{border-left:0; padding-left:0; margin-left:0}
  .col > h2:first-child::before{display:none}
  .glance,.tree,.checklist,.local,.tool,.card,.toc,.masthead{box-shadow:none;
    background:#fff}
  .kicker,.glance dt,.tree-h,.tool-h,.local label,.foot h4,.wordmark,
  table.rules th,.reviewed th,.stat{color:#000}
}