/* Build a Longer Fuse -- one stylesheet. No web fonts, no framework, no build
   step, no dependency of any kind.

   THE BRIEF, WRITTEN DOWN SO IT DOES NOT DRIFT

   The reader is a parent looking something up after a bad hour: a hole in the
   wall, a suspension letter, a shove in the kitchen. Every commercial site in
   this niche is a treatment centre or a law firm, and both of those designs
   work by raising the reader's pulse. This one does the opposite. It is meant
   to read as a reference document that is plainly not selling anything:

     * deep navy ink on a cool blue-grey ground, never white, never warm
     * one accent, used on links, rules and the current-section marker, and
       nowhere else. Nothing on this site is red, nothing pulses, nothing
       shouts
     * square corners everywhere. border-radius is 0 site-wide and that is
       deliberate, not an oversight
     * hairline rules instead of boxes, tints and shadows. A rule costs one
       pixel and says "this is a new field of the record"
     * one palette for the whole site. There is no per-section colour scheme
       and there will not be one: a colour-coded site reads as a magazine

   TYPE
   A neutral system sans, body and headings alike. The difference between a
   heading and a sentence is made with weight, size, tracking and case, which
   is free, rather than with a second family, which is not. Small headings are
   set in letterspaced capitals with a hairline running out to the right of
   them, the way a field label is set in a printed form.

   FILE ORDER
     1  tokens
     2  base and reset
     3  furniture      plate (header), locator (breadcrumb), plinth (footer)
     4  page shells    entry, register (hub), contents (home)
     5  prose          typography, quotes, tables, writer-facing blocks
     6  recourse       the crisis resource block
     7  narrow screens
     8  print

   NAMING
   The site is a reference document, so the parts are named after the parts of
   one: a frame holds a measure of text, a plate carries the index, an entry
   has a precis and a provenance, statements are cited and the whole thing
   stands on a plinth.                                                       */


/* ============================== 1. TOKENS ============================== */

:root{
  /* ink */
  --ink:#121a26;          /* headings, body text, the header ground        */
  --ink-2:#33435a;        /* secondary prose, answers, table body          */
  --ink-3:#4f5f75;        /* labels, captions, muted metadata              */

  /* ground: a cool blue-grey paper. Never #fff for the page itself.       */
  --ground:#f2f5f9;
  --ground-2:#e7ecf3;     /* recessed strips: table heads, footer          */
  --card:#ffffff;         /* raised inserts: the recourse block            */

  /* rules */
  --rule:#c3cdda;         /* structural: section edges, table heads        */
  --rule-2:#d9e0ea;       /* hairline: rows within a list                  */

  /* the single accent */
  --accent:#155e75;
  --accent-deep:#124f63;  /* hover, and text on the --card ground          */
  --accent-pale:#2f8fa8;  /* only ever used ON the ink ground              */

  /* reversed text, for the header and the skip link */
  --on-ink:#eef2f7;
  --on-ink-2:#b3c0d0;

  --frame:1160px;         /* full-width span   */
  --measure:690px;        /* the reading line  */
  --gap:22px;

  --sans:system-ui,"Segoe UI Variable Text","Segoe UI","Helvetica Neue",
         Helvetica,Arial,"Liberation Sans",sans-serif;
}


/* ============================ 2. BASE / RESET ========================== */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 17px/1.62 var(--sans);
  font-feature-settings:"kern" 1;
  font-variant-numeric:tabular-nums;
  text-rendering:optimizeLegibility;
}

/* square corners, site-wide, on purpose */
*{border-radius:0}

.frame{max-width:var(--frame);margin:0 auto;padding:0 var(--gap)}
.measure{max-width:calc(var(--measure) + var(--gap) * 2)}
.canvas{display:block;padding-bottom:10px}

a{color:var(--accent);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--accent-deep)}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The skip link is the first thing in the tab order and the only element on
   the site that moves. */
.bypass{
  position:absolute;left:var(--gap);top:-60px;z-index:60;
  background:var(--ink);color:var(--on-ink);text-decoration:none;
  padding:10px 18px;font-size:15px;font-weight:600;letter-spacing:.01em;
  transition:top .12s ease;
}
.bypass:focus{top:0;color:var(--on-ink)}

/* the shared small-label idiom: capitals, tracked, with a rule running out to
   the right of the words */
.rubric,.precis-label,.strand,.citations-h,.queries-h,.adjacent-h,.volume-tag{
  font-size:11.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.rubric,.citations-h,.queries-h,.adjacent-h{
  display:flex;align-items:center;gap:12px;margin:0 0 14px;
}
.rubric::after,.citations-h::after,.queries-h::after,.adjacent-h::after{
  content:"";flex:1 1 auto;height:1px;background:var(--rule);
}


/* ============================= 3. FURNITURE ============================ */

/* ---- plate: the header ------------------------------------------------
   A two-column grid, not a bar. The wordmark occupies a fixed left column
   and the section index occupies the right one as a row of ruled cells, so
   the header reads as the head of a document rather than as an app chrome
   bar. Nothing here is sticky, nothing is hidden behind a button and there
   is no script: every section is a plain anchor that is visible at every
   width. Below 820px the two columns stack and the index cells wrap.      */

.plate{background:var(--ink);color:var(--on-ink)}
.plate-grid{
  display:grid;
  grid-template-columns:minmax(210px,24%) 1fr;
  align-items:stretch;
  gap:0 24px;
}
.stamp{
  display:block;text-decoration:none;color:var(--on-ink);
  padding:20px 0 18px;align-self:center;
}
.stamp-name{
  display:block;font-size:20px;font-weight:650;letter-spacing:-.008em;
  line-height:1.2;
}
.stamp-line{
  display:block;margin-top:5px;font-size:12.5px;line-height:1.45;
  color:var(--on-ink-2);letter-spacing:.01em;max-width:30ch;
}
.stamp:hover .stamp-name{color:#fff}

.index{display:block}
.index-list{
  list-style:none;margin:0;padding:0;height:100%;
  display:flex;flex-wrap:wrap;align-items:stretch;
  border-left:1px solid #2b3a4e;
}
.index-cell{display:flex}
.index-link{
  display:flex;align-items:center;
  padding:9px 13px;min-height:100%;
  border-right:1px solid #2b3a4e;
  color:var(--on-ink-2);text-decoration:none;
  font-size:12.5px;font-weight:550;line-height:1.35;letter-spacing:.02em;
}
.index-link:hover{color:var(--on-ink);background:#1b2532}
.index-link[aria-current]{
  color:#fff;background:#1b2532;
  box-shadow:inset 0 -3px 0 var(--accent-pale);
}
.index-link:focus-visible{outline-color:var(--accent-pale);outline-offset:-3px}

/* ---- locator: the breadcrumb ------------------------------------------
   It sits under the h1, inside the head of the piece, and it stops at the
   parent section. The last crumb on the sister sites is the page you are
   already looking at, whose name is in 40px type directly above it. This
   one answers the only question the reader has left: where does this live. */

.locator{margin:12px 0 0}
.locator ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;
  font-size:12.5px;letter-spacing:.02em;color:var(--ink-3);
}
.locator li+li::before{content:"/";margin-right:8px;color:var(--rule)}
.locator a{color:var(--ink-3);text-decoration:none}
.locator a:hover{color:var(--accent);text-decoration:underline}

/* ---- plinth: the footer -----------------------------------------------
   Light, recessed, ruled off at the top. The disclaimer on this site is
   load-bearing, so it is set at reading size and is not greyed into
   invisibility.                                                           */

.plinth{
  margin-top:76px;background:var(--ground-2);
  border-top:2px solid var(--ink);
  padding:30px 0 44px;
}
.plinth-grid{
  display:grid;grid-template-columns:minmax(180px,22%) 1fr;gap:26px 40px;
}
.plinth-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:9px;
}
.plinth-list a{
  color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:550;
}
.plinth-list a:hover{color:var(--accent);text-decoration:underline}
.statement{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.limits{
  margin:0;padding-top:14px;border-top:1px solid var(--rule);
  font-size:14.5px;line-height:1.62;color:var(--ink-2);
}
.imprint{
  margin:26px 0 0;font-size:12.5px;letter-spacing:.02em;color:var(--ink-3);
  grid-column:1 / -1;padding-top:16px;border-top:1px solid var(--rule);
}


/* ============================ 4. PAGE SHELLS =========================== */

/* ---- the head of a piece ---------------------------------------------- */

.entry-head{margin:38px 0 30px}
.entry-head .lede{margin-top:20px}
.strand{margin:0 0 10px;display:block}
.entry-head h1{margin:0}

/* provenance: who checked this, and when. A row of label/value pairs
   directly under the title, the way a record carries its own metadata. The
   date is a fact about the page, so it is stated where the page introduces
   itself rather than buried above the first sentence or left to the foot. */

.provenance{
  margin:18px 0 0;padding:12px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:6px 40px;
  font-size:13px;line-height:1.5;
}
.provenance div{display:flex;align-items:baseline;gap:9px;min-width:0}
.provenance dt{
  flex:0 0 auto;font-size:11px;font-weight:650;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.provenance dd{margin:0;color:var(--ink-2);font-weight:550}
.provenance a{color:var(--ink-2);text-decoration:none}
.provenance a:hover{color:var(--accent);text-decoration:underline}

/* precis: the short answer, set as a two-column record entry rather than a
   tinted box or a bordered lead. The label sits in its own column at wide
   widths so the answer starts on the same line it is labelled on, and the
   whole thing is closed off with a rule below.                            */

.precis{
  margin:26px 0 0;padding:0 0 22px;border-bottom:2px solid var(--ink);
  display:grid;grid-template-columns:7.5rem 1fr;gap:0 26px;align-items:baseline;
}
.precis-label{margin:0;padding-top:5px}
.precis-body{
  margin:0;font-size:19.5px;line-height:1.52;color:var(--ink);font-weight:450;
}
.precis-body p{margin:0 0 .7em}
.precis-body p:last-child{margin-bottom:0}

/* ---- register: a hub ---------------------------------------------------
   A hub is an index of the pages filed under it, so it is set as one: a
   two-column term-and-note table with hairline rows. Not tiles, not a
   numbered running order. Nothing here implies a reading sequence, because
   a parent arrives needing one specific page and not a course.            */

.register{margin:6px 0 0;padding:0;border-top:1px solid var(--rule)}
.register-row{
  display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);
  gap:4px 28px;padding:16px 2px;border-bottom:1px solid var(--rule-2);
}
.register-row:last-child{border-bottom:1px solid var(--rule)}
.register-term{margin:0;font-size:17.5px;font-weight:600;line-height:1.35;letter-spacing:-.008em}
.register-term a{color:var(--ink);text-decoration:none}
.register-term a:hover{color:var(--accent);text-decoration:underline}
.register-note{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}

/* ---- contents: the home page ------------------------------------------
   The whole site on one screen. Each section names itself, says what it
   covers and then lists the pages inside it, so a reader can go straight to
   the page they came for without opening a section first. It is a table of
   contents, which is the honest shape for a reference site.               */

.preface{padding:40px 0 26px;border-bottom:2px solid var(--ink)}
.preface h1{margin:0;max-width:20ch}
.preface-lead{margin:20px 0 0;font-size:19px;line-height:1.58;color:var(--ink-2);max-width:62ch}
.preface-lead p:last-child{margin-bottom:0}

.contents{margin:0;padding:0;border-top:1px solid var(--rule)}
.contents-row{
  display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);
  gap:8px 30px;padding:20px 2px;border-bottom:1px solid var(--rule-2);
}
.contents-row:last-child{border-bottom:1px solid var(--rule)}
.contents-term{margin:0;font-size:18px;font-weight:600;line-height:1.32;letter-spacing:-.01em}
.contents-term a{color:var(--ink);text-decoration:none}
.contents-term a:hover{color:var(--accent);text-decoration:underline}
.contents-note{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.contents-pages{
  margin:10px 0 0;grid-column:2;
  display:flex;flex-wrap:wrap;gap:5px 0;
  font-size:14px;line-height:1.45;
}
.contents-pages a{
  color:var(--ink-2);text-decoration:none;
  padding-right:12px;margin-right:12px;border-right:1px solid var(--rule);
}
.contents-pages a:last-child{border-right:0;margin-right:0;padding-right:0}
.contents-pages a:hover{color:var(--accent);text-decoration:underline}

.marked{margin-top:40px}
.marked-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.marked-list li{border-bottom:1px solid var(--rule-2)}
.marked-list a{
  display:block;padding:13px 2px;text-decoration:none;
  color:var(--ink);font-size:16.5px;font-weight:550;
}
.marked-list a:hover{color:var(--accent)}

/* Entry titles in an index are set in ink, not in the link colour, so a list
   of forty of them does not turn into forty blue lines. The affordance is a
   rule under the words in the same grey as the row rules, which is what an
   entry in a printed index looks like anyway. */
.contents-term a,.register-term a,.marked-list a,.adjacent-list a{
  text-decoration:underline;text-decoration-color:var(--rule);
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.contents-term a:hover,.register-term a:hover,
.marked-list a:hover,.adjacent-list a:hover{text-decoration-color:currentColor}


/* =============================== 5. PROSE ============================== */

h1{
  font-size:clamp(30px,4.1vw,42px);line-height:1.14;letter-spacing:-.022em;
  font-weight:650;
}
h2{font-size:22px;line-height:1.3;letter-spacing:-.012em;font-weight:650;margin:2.1em 0 .5em}
h3{font-size:17.5px;line-height:1.4;letter-spacing:.002em;font-weight:650;margin:1.9em 0 .35em}
h4{font-size:15px;line-height:1.45;letter-spacing:.05em;text-transform:uppercase;
   font-weight:650;color:var(--ink-2);margin:1.7em 0 .35em}
p{margin:0 0 1.1em}

/* a heading in running copy is announced by a short accent tick above it,
   not by a full-width rule and not by a tab beside the words */
.prose h2{position:relative;padding-top:.85em;margin-top:2.4em}
.prose h2::before{
  content:"";position:absolute;top:0;left:0;width:34px;height:3px;
  background:var(--accent);
}
.prose h2:first-child{margin-top:1.1em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--ink-3)}
.prose>:last-child{margin-bottom:0}
strong{font-weight:650}

.lede{font-size:18px;color:var(--ink-2);max-width:64ch}

blockquote{
  margin:1.6em 0;padding:0 0 0 24px;border-left:2px solid var(--rule);
  color:var(--ink-2);
}
blockquote p:last-child{margin-bottom:0}

hr{border:0;border-top:1px solid var(--rule);margin:2.2em 0}

/* ---- writer-facing blocks --------------------------------------------
   Content authors reach for these class names directly in the markdown,
   through attr_list. There is no alias table: the name a writer types is
   the name that ships.                                                     */

.marginal{
  margin:1.6em 0;padding:14px 18px;
  background:var(--ground-2);border-left:3px solid var(--rule);
  font-size:15.5px;line-height:1.58;color:var(--ink-2);
}
.caveat{
  margin:1.6em 0;padding:14px 18px;
  background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--ink);
  font-size:15.5px;line-height:1.58;
}
.wording{
  margin:1.6em 0;padding:14px 18px;background:var(--card);
  border:1px dashed var(--rule);font-size:16px;line-height:1.6;
}
.wording p:last-child,.marginal p:last-child,.caveat p:last-child{margin-bottom:0}
/* python-markdown's attr_list cannot put a class on a <ul>: a `{: .tally}`
   written under a list lands on the last <li> instead. Rather than teaching
   every writer a workaround, the selector reaches back up to the list, so the
   shorthand a writer will naturally type is the one that works. */
.tally,ul:has(> li.tally){list-style:none;padding-left:0}
.tally>li,ul:has(> li.tally)>li{position:relative;padding-left:26px;margin-bottom:.5em}
.tally>li::before,ul:has(> li.tally)>li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:12px;height:12px;border:2px solid var(--ink-3);
}

/* ---- tables ---- */
.wideset{overflow-x:auto;margin:1.7em 0;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:15px}
th,td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--rule-2);vertical-align:top}
th{
  font-size:11.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);background:var(--ground-2);border-bottom:1px solid var(--rule);
}
td{color:var(--ink-2)}

/* ---- follow-up questions: a definition list, never a disclosure widget
   FAQPage rich results were retired on 7 May 2026, so a collapsed answer is
   now just text nobody can find with ctrl-F. Every question is visible and
   every answer is in the page outline.                                     */

.queries{margin-top:3.2em}
.query{
  display:grid;grid-template-columns:1fr;gap:6px;
  padding:17px 2px;border-bottom:1px solid var(--rule-2);
}
.queries .query:first-of-type{border-top:1px solid var(--rule)}
.query-q{margin:0;font-size:16.5px;font-weight:650;line-height:1.42;color:var(--ink)}
.query-a{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.query-a p:last-child{margin-bottom:0}

/* ---- citations --------------------------------------------------------
   Each entry gives the name of the thing and, under it, the host it lives
   on, so a reader can see who is behind a claim without following the link. */

.citations{margin-top:3.2em}
.citation-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.citation{padding:11px 2px;border-bottom:1px solid var(--rule-2);font-size:15px;line-height:1.5}
.citation a{font-weight:550}
.citation-host{
  display:block;margin-top:2px;font-size:12.5px;letter-spacing:.03em;color:var(--ink-3);
}

/* ---- the book --------------------------------------------------------
   Plain, below the sources, no cover, no stars, no button. It states the
   ownership connection in the same breath as the link because the FTC
   requires a material connection to be disclosed wherever it is not
   self-evident, and a reference site pointing at its own author's book is
   exactly that case.                                                       */

.volume{
  margin-top:3em;padding:20px 0 0;border-top:2px solid var(--ink);
}
.volume-tag{display:block;margin:0 0 8px}
.volume-name{margin:0 0 8px;font-size:18px;font-weight:650;line-height:1.32;letter-spacing:-.01em}
.volume-line{margin:0 0 10px;font-size:15.5px;line-height:1.58;color:var(--ink-2)}
.volume-note{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--ink-3)}
.volume-link{font-size:15px;font-weight:600}
.volume-assoc{margin:10px 0 0;font-size:13px;color:var(--ink-3)}

/* ---- adjacent pages, outside the piece ---- */
.adjacent{margin-top:3.2em}
.adjacent-list{
  list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
}
.adjacent-list li{border-bottom:1px solid var(--rule-2)}
.adjacent-list li:nth-child(odd){border-right:1px solid var(--rule-2)}
.adjacent-list a{
  display:block;padding:13px 18px 13px 0;text-decoration:none;
  color:var(--ink);font-size:15.5px;font-weight:550;line-height:1.42;
}
.adjacent-list li:nth-child(even) a{padding-left:18px}
.adjacent-list a:hover{color:var(--accent)}


/* ============================= 6. RECOURSE =============================
   The crisis resource block. It appears on any page whose frontmatter sets
   crisis: true, and it is placed by the generator, never by hand.

   Rules this block is built to satisfy:
     * it cannot be dismissed. There is no close control, no cookie, no
       script. It is markup on the page and it stays there
     * it must not read as an advertisement or a promotional callout. So:
       no accent fill, no coloured border, no icon, no button, no rounded
       corners, no shadow, no urgency. It is a white insert with a heavy
       ink rule above it, the way a printed reference sets an inserted
       table apart from the running text
     * it must not raise the reader's pulse. Nothing in it is red
     * every number and every quoted phrase in the markup comes from
       research/FACTS.md section 0 exactly as written there                */

.recourse{
  margin:30px 0 34px;padding:22px 24px 24px;
  background:var(--card);
  border:1px solid var(--rule);border-top:3px solid var(--ink);
}
.recourse-h{margin:0 0 8px;font-size:19px;font-weight:650;letter-spacing:-.008em;line-height:1.3}
.recourse-lede{margin:0 0 16px;font-size:15.5px;line-height:1.58;color:var(--ink-2);max-width:64ch}
.recourse-list{margin:0;padding:0;border-top:1px solid var(--rule)}
.recourse-row{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:4px 26px;padding:13px 0;border-bottom:1px solid var(--rule-2);
}
.recourse-row:last-child{border-bottom:0}
.recourse-name{margin:0;font-size:14.5px;font-weight:650;line-height:1.42;color:var(--ink)}
.recourse-note{
  display:block;margin-top:3px;font-size:12px;font-weight:400;letter-spacing:.02em;
  color:var(--ink-3);
}
.recourse-how{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.recourse-how a{font-weight:600;white-space:nowrap}
.recourse-ask{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--rule);
  font-size:14.5px;line-height:1.62;color:var(--ink);max-width:70ch;
}
.recourse-tail{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:70ch}


/* ============================== 6b. DOCKET =============================
   The checklist pages. A docket is a list of things still to be asked, so
   it is set as one: hairline rows, real checkboxes, no card, no tint.

   Rules this block is built to satisfy:
     * the markup works with JavaScript switched off. The boxes are real
       inputs and the labels are real labels. The script adds a summary
       underneath and reveals two buttons; it never builds the list
     * the two buttons stay hidden until the script reveals them, so a
       reader without JavaScript is not shown controls that do nothing
     * nothing here scores, rates or congratulates. The summary counts
       what has not been asked yet, which is the only thing a list of
       questions can honestly report
     * it prints. A parent should be able to carry it into a meeting and
       fill it in with a pen, so the print rules in section 8 keep the
       boxes and drop the summary                                         */

.docket{margin:1.9em 0 2.2em}
.docket-lede{
  margin:0 0 20px;padding:13px 16px;
  background:var(--ground-2);border-left:3px solid var(--rule);
  font-size:15px;line-height:1.58;color:var(--ink-2);
}
.docket-band{
  margin:26px 0 0;padding-bottom:6px;
  font-size:11.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--rule);
}
.docket-list{list-style:none;margin:0;padding:0}
.docket-line{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 12px;align-items:start;
  padding:11px 2px;border-bottom:1px solid var(--rule-2);
}
.docket-line input[type="checkbox"]{
  width:16px;height:16px;margin:3px 0 0;accent-color:var(--ink);flex:none;
}
.docket-line label{font-size:15.5px;line-height:1.55;color:var(--ink);cursor:pointer}
.docket-open{margin-top:28px}
.docket-open:empty{margin-top:0}
.docket-open-h{margin:0 0 8px;font-size:17px;font-weight:650;letter-spacing:-.006em}
.docket-tally{margin:0 0 10px;font-size:19px;line-height:1.35;font-weight:600;color:var(--ink)}
.docket-note{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--ink-3);max-width:70ch}
.docket-open-list{margin:0 0 16px;padding-left:20px;font-size:15px;line-height:1.6}
.docket-open-list li{margin-bottom:.4em;color:var(--ink-2)}
.docket-acts{margin:20px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.docket-acts button{
  font:inherit;font-size:14px;font-weight:600;
  padding:9px 15px;cursor:pointer;color:var(--ink);
  background:var(--card);border:1px solid var(--rule);
}
.docket-acts button:hover{border-color:var(--ink-3)}


/* =========================== 7. NARROW SCREENS ========================= */

@media (max-width:900px){
  .register-row,.contents-row{grid-template-columns:1fr;gap:5px}
  .contents-pages{grid-column:1;margin-top:8px}
  .adjacent-list{grid-template-columns:1fr}
  .adjacent-list li:nth-child(odd){border-right:0}
  .adjacent-list li:nth-child(even) a{padding-left:0}
}

@media (max-width:820px){
  .plate-grid{grid-template-columns:1fr;gap:0}
  .stamp{padding:16px 0 14px}
  .index-list{
    border-left:0;border-top:1px solid #2b3a4e;
    margin:0 calc(var(--gap) * -1);padding:0;
  }
  .index-link{
    padding:9px 14px;font-size:12.5px;
    border-right:1px solid #2b3a4e;border-bottom:1px solid #2b3a4e;
  }
  .plinth-grid{grid-template-columns:1fr;gap:22px}
}

@media (max-width:640px){
  :root{--gap:18px}
  body{font-size:16.5px}
  .precis{grid-template-columns:1fr;gap:8px 0}
  .precis-label{padding-top:0}
  .precis-body{font-size:18px}
  .provenance{gap:6px 26px;padding:11px 0}
  .entry-head{margin:26px 0 24px}
  .preface{padding:28px 0 22px}
  .recourse{padding:18px 18px 20px;margin-left:0;margin-right:0}
  .recourse-row{grid-template-columns:1fr;gap:3px;padding:12px 0}
  .plinth{margin-top:54px}
}


/* ============================== 8. PRINT =============================== */

@media print{
  .plate,.plinth,.adjacent,.volume,.bypass{display:none}
  /* the docket prints as a blank list to fill in with a pen, so the
     script's summary and its two buttons come off the page */
  .docket-open,.docket-acts{display:none}
  .docket-line{break-inside:avoid;border-bottom:1px solid #999}
  .docket-band{border-bottom:1px solid #000}
  body{background:#fff;color:#000;font-size:11.5pt}
  .frame,.measure{max-width:none;padding:0}
  .prose h2::before{background:#000}
  /* the crisis block prints. That is the point of it. */
  .recourse{border:1px solid #000;border-top:3px solid #000}
  a{color:#000}
  .citation a::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
}


/* ============================== 9. LEDGER ==============================
   The repayment planner on /consequences/repayment-planner/.

   A calculator on a site whose whole position is "we are not selling you
   anything" has one obvious way to go wrong, which is to look like a
   quote form. So this is set as a worksheet rather than as a product:
   labelled rows, real number inputs, no card, no tint on the fields, no
   accent colour on the button, and nothing that resembles a call to
   action.

   Rules this block is built to satisfy:
     * every field ships empty, so nothing here styles a placeholder value
       as though it were a suggestion. There is no national figure for
       what a teenager can pay and inventing one would be the failure the
       site exists to avoid
     * the fields are ordinary inputs with real labels, so the page is
       usable by keyboard and by a screen reader, and the hints are tied
       to their field with aria-describedby rather than left floating
     * the working is shown as a list above the schedule, because a
       parent who can see the arithmetic can argue with it
     * it prints. The schedule is the thing worth carrying to the kitchen
       cupboard, so the print rules keep the table and the working and
       drop the two buttons                                              */

.ledger{margin:1.9em 0 2.2em}
.ledger-row{
  display:grid;grid-template-columns:minmax(0,1fr) 150px;
  gap:4px 18px;align-items:baseline;
  padding:13px 2px;border-bottom:1px solid var(--rule-2);
}
.ledger-label{font-size:15.5px;line-height:1.5;color:var(--ink);font-weight:600}
.ledger-hint{
  grid-column:1;margin:0;
  font-size:13.5px;line-height:1.55;color:var(--ink-3);max-width:56ch;
}
.ledger-field{
  grid-column:2;grid-row:1 / span 2;justify-self:stretch;
  font:inherit;font-size:16px;
  padding:8px 10px;color:var(--ink);
  background:var(--card);border:1px solid var(--rule);border-radius:0;
}
.ledger-field:focus{outline:2px solid var(--accent);outline-offset:1px}
.ledger-out{margin-top:28px}
.ledger-out:empty{margin-top:0}
.ledger-sum{
  margin:0 0 12px;font-size:20px;line-height:1.3;font-weight:650;
  letter-spacing:-.008em;color:var(--ink);
}
.ledger-work{margin:0 0 20px;padding-left:20px;font-size:15px;line-height:1.65}
.ledger-work li{margin-bottom:.45em;color:var(--ink-2)}
.ledger-table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:15px}
.ledger-table caption{
  text-align:left;padding-bottom:6px;
  font-size:11.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}
.ledger-table th{
  text-align:left;padding:8px 10px 8px 0;
  font-size:12.5px;font-weight:650;letter-spacing:.04em;color:var(--ink-3);
  background:var(--ground-2);border-bottom:1px solid var(--rule);
}
.ledger-table th:first-child,.ledger-table td:first-child{padding-left:10px}
.ledger-table td{
  padding:8px 10px 8px 0;color:var(--ink-2);
  border-bottom:1px solid var(--rule-2);font-variant-numeric:tabular-nums;
}

@media (max-width:640px){
  .ledger-row{grid-template-columns:1fr;gap:4px 0}
  .ledger-field{grid-column:1;grid-row:auto;justify-self:start;width:100%;max-width:220px;margin-top:6px}
  .ledger-table{font-size:14px}
}

@media print{
  .ledger-field{border:1px solid #000}
  .ledger-table th{background:transparent;border-bottom:1px solid #000}
  .ledger-table tr{break-inside:avoid}
}