/* Build Reference — stylesheet.

   One type scale, one radius, one spacing rhythm. Before this pass there were
   23 distinct font sizes across the file; everything below sits on six steps so
   headings, metadata and clause text stay in proportion at any zoom level. */

:root{
  --ink:#16191d; --ink-2:#4a5058; --ink-3:#767d87;
  --line:#e3e6ea; --line-2:#f0f2f5;
  --bg:#ffffff; --bg-2:#f7f8fa;
  --accent:#1a4d8f; --accent-soft:#eaf1fa; --accent-line:#c3d3e6;
  --warn:#8a5300; --warn-soft:#fdf4e3; --warn-line:#eedcb6;
  --ok:#1e6b45;

  /* type scale */
  --fs-2xs:.7rem;      /* eyebrow tags, badges */
  --fs-xs:.78rem;      /* metadata, breadcrumbs, captions, buttons */
  --fs-sm:.875rem;     /* snippets, tables, secondary body */
  --fs-md:.95rem;      /* clause text, default body */
  --fs-lg:1.0625rem;   /* result titles */
  --fs-xl:1.1875rem;   /* answer card title, brand */
  --fs-2xl:1.75rem;    /* brand, home state */

  --lh-tight:1.3;
  --lh-base:1.55;

  --r:4px;             /* controls: chips, buttons, the search field */
  --r-lg:8px;          /* cards */

  /* The Code's own text: the site's family and scale, set as a document.
     One quiet device -- a faint panel from the accent family -- marks
     "this is the NCC", so the typeface never has to change. */
  --clause-bg:#f6f8fb; --clause-line:#e3e9f1; --clause-head:#edf1f7;
  --lh-clause:1.62;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);color:var(--ink);background:var(--bg);
  font-size:16px;line-height:var(--lh-base);-webkit-font-smoothing:antialiased;
}
#app{min-height:100vh;display:flex;flex-direction:column}

/* ---------- boot ---------- */
/* [hidden] must win: .boot sets display:flex, which silently beat the UA rule
   and left the boot panel holding space, pushing the search bar down the page. */
.boot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:70vh;color:var(--ink-3);font-size:var(--fs-sm);gap:10px;
  text-align:center;padding:20px;
}
.boot[hidden]{display:none}
.boot code{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-2)}
.boot input[type=file]{font:inherit;font-size:var(--fs-sm)}

/* ---------- masthead ---------- */
#masthead{
  display:flex;flex-direction:column;align-items:center;
  padding:16px 20px 14px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--bg);z-index:20;
}
.home #masthead{border-bottom:none;justify-content:center;padding-top:min(20vh,168px)}

#brand{
  text-decoration:none;color:var(--ink);letter-spacing:-.015em;
  display:flex;align-items:baseline;gap:.34rem;margin-bottom:10px;
  font-size:var(--fs-xl);line-height:var(--lh-tight);
}
.home #brand{font-size:var(--fs-2xl);margin-bottom:16px}
.brand-mark{font-weight:660}
.brand-year{color:var(--ink-3);font-weight:400}

#searchform{width:100%;max-width:680px;position:relative}
.field{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:var(--r);
  padding:12px 16px;background:var(--bg);
  transition:box-shadow .15s,border-color .15s;
}
.field:focus-within{border-color:var(--accent-line);box-shadow:0 2px 12px rgba(20,30,50,.09)}
.mag{width:18px;height:18px;flex:none;stroke:var(--ink-3);stroke-width:2;fill:none;stroke-linecap:round}
#q{
  flex:1;border:none;outline:none;font:inherit;font-size:var(--fs-md);
  color:var(--ink);background:transparent;min-width:0;
}
#q::-webkit-search-cancel-button{display:none}
#clear{
  border:none;background:none;font-size:1.25rem;line-height:1;color:var(--ink-3);
  cursor:pointer;padding:0 2px;
}

#suggest{
  list-style:none;margin:-1px 0 0;padding:0;position:absolute;left:0;right:0;
  background:var(--bg);border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);
  box-shadow:0 6px 18px rgba(20,30,50,.10);z-index:30;max-height:340px;overflow:auto;
}
#suggest li{
  padding:9px 14px;cursor:pointer;display:flex;gap:10px;align-items:baseline;
  font-size:var(--fs-sm);border-bottom:1px solid var(--line-2);
}
#suggest li:last-child{border-bottom:none}
#suggest li[aria-selected="true"],#suggest li:hover{background:var(--accent-soft)}
#suggest .cit{font-family:var(--mono);font-size:var(--fs-xs);color:var(--accent);flex:none}
#suggest .ttl{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* State and building type: standing choices, so they sit with the search box */
#ctxbar{width:100%;max-width:680px;margin-top:9px;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px 11px;font-size:var(--fs-xs);color:var(--ink-2)}
.home #ctxbar{justify-content:center}
.ctx-state,.ctx-ed{display:inline-flex;align-items:center;gap:7px}
.ctx-ed[hidden]{display:none}
#state,#edition{font:inherit;font-size:var(--fs-xs);color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);padding:4px 6px;max-width:15em}
#state:focus-visible,#edition:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* narrow enough that Domestic / All / Commercial and the Plumbing Code switch share its line */
#state{max-width:11em}
/* one edition loaded: the select only says which */
.ctx-ed.one #edition{appearance:none;-webkit-appearance:none;border-color:transparent;background:none;
  padding-left:0;padding-right:0;opacity:1;color:var(--ink);font-weight:600}
.ctx-status{color:var(--ink-3)}
.ctx-status:empty{display:none}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--bg-2)}
.seg label{position:relative;cursor:pointer;user-select:none}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:block;padding:3px 11px;border-radius:999px;color:var(--ink-2);transition:background .15s,color .15s}
.seg label:hover span{color:var(--accent)}
.seg input:checked + span{background:var(--accent);color:#fff}
.seg input:focus-visible + span{outline:2px solid var(--accent);outline-offset:1px}
.seg label.off{cursor:not-allowed}
.seg label.off span{color:var(--ink-3);opacity:.55}
@media (prefers-reduced-motion:reduce){ .seg span{transition:none} }
/* the Plumbing Code switch (.switch): drawn as the AI assist's, greyed where there's no Volume Three */
.ctx-plumb.off{cursor:not-allowed;color:var(--ink-3)}
.ctx-plumb.off .ai-track{opacity:.55}

/* ---------- results ---------- */
#main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:0 20px 60px}
.home #main{display:none}

#meta{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  color:var(--ink-3);font-size:var(--fs-xs);padding:16px 2px 4px;
}
#meta .chip{
  border:1px solid var(--line);border-radius:var(--r);padding:4px 11px;
  color:var(--ink-2);cursor:pointer;background:var(--bg);
}
#meta .chip:hover{background:var(--bg-2);border-color:var(--accent-line)}
#meta .corr{color:var(--warn)}
#meta .corr b{font-weight:600}

.card,.hit{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.card{padding:22px 24px;margin:14px 0}
.card.answer{border-color:var(--accent-line);border-left-width:3px;box-shadow:0 1px 4px rgba(20,30,50,.06)}
.hit{padding:16px 18px;margin:10px 0;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.hit:hover{border-color:#c9d3df;box-shadow:0 1px 4px rgba(20,30,50,.07)}
.hit:hover .ttl-s{text-decoration:underline}

.crumb{font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:8px;line-height:var(--lh-tight)}
.crumb span{white-space:nowrap}
.head{display:flex;gap:11px;align-items:baseline;flex-wrap:wrap;margin-bottom:4px}
.cit{font-family:var(--mono);font-size:var(--fs-sm);font-weight:600;color:var(--accent);text-decoration:none}
.cit:hover{text-decoration:underline}
h2.ttl{font-size:var(--fs-xl);font-weight:620;margin:0;letter-spacing:-.008em;line-height:var(--lh-tight)}
.ttl-s{font-size:var(--fs-lg);font-weight:600;color:var(--ink);line-height:var(--lh-tight)}
.badge{
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.06em;
  border-radius:var(--r);padding:2px 7px;border:1px solid var(--line);color:var(--ink-3);
}
.badge.juris{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.badge.pr{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.badge.vol{background:#eef1f5;border-color:#dde3ea;color:var(--ink-2)}
.badge.vol.diff{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn);cursor:help}
.why{font-size:var(--fs-xs);color:var(--ink-3);margin:8px 0 0}
.why b{font-weight:600;color:var(--ink-2)}
.snip{color:var(--ink-2);font-size:var(--fs-sm);margin:5px 0 0}

/* ---------- NCC content ---------- */
.ncc{
  margin-top:14px;font-family:var(--sans);font-size:var(--fs-md);
  line-height:var(--lh-clause);color:var(--ink);
}
/* the panel, wherever clause text is the thing being read */
.card > .ncc,.hit .expand > .ncc,.toc-body > .ncc{
  background:var(--clause-bg);border:1px solid var(--clause-line);
  border-radius:var(--r);padding:14px 18px;
}

.ncc p{margin:.6em 0}
.ncc .ncc-sub{display:flex;gap:12px;margin:.85em 0}
/* panel padding is the only space at the edges; these outrank .ncc-sub's margin */
.ncc > :first-child,.ncc > .ncc-sub:first-child{margin-top:0}
.ncc > :last-child,.ncc > .ncc-sub:last-child{margin-bottom:0}
.ncc > :first-child > p:first-child{margin-top:0}
.ncc > :last-child > p:last-child{margin-bottom:0}
.ncc .ncc-num{color:var(--ink-3);flex:none;min-width:2.1em;font-variant-numeric:tabular-nums}
.ncc .ncc-subbody{flex:1;min-width:0}
.ncc ol.list-alpha{list-style:lower-alpha}
.ncc ol.list-roman{list-style:lower-roman}
/* SHIM: the master marks every list list-alpha (2,303 of 2,303), so the Code's
   (a) > (i) > (A) nesting showed as a > a > a and "(1)(c)(iii)" could not be
   found on screen. Number by depth until the enricher emits the right class;
   an explicit list-roman still wins. */
.ncc ol ol.list-alpha{list-style:lower-roman}
.ncc ol ol ol.list-alpha{list-style:upper-alpha}
.ncc ol,.ncc ul{margin:.5em 0;padding-left:1.5em}
.ncc li{margin:.28em 0}
.ncc h3.ncc-h{font-size:var(--fs-md);font-weight:620;margin:1.1em 0 .35em}
.ncc .ncc-term{border-bottom:1px dotted #b6c2d1;cursor:help}
.ncc a.ncc-ref{color:var(--accent);text-decoration:none;border-bottom:1px solid #d3e0ef}
.ncc a.ncc-ref:hover{border-bottom-color:var(--accent)}
.ncc .ncc-callout{
  background:var(--bg);border:1px solid var(--clause-line);border-left:3px solid var(--line);
  padding:10px 14px;margin:1em 0;border-radius:0 var(--r) var(--r) 0;font-size:var(--fs-sm);
}
.ncc .ncc-callout-type{
  display:block;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);margin-bottom:4px;
}
.ncc .ncc-table-wrap{margin:1.1em 0;overflow-x:auto}
.ncc .ncc-tabcap{caption-side:top;text-align:left;font-size:var(--fs-xs);color:var(--ink-2);padding-bottom:6px}
.ncc .ncc-tabnum{font-family:var(--mono);color:var(--accent)}
.ncc table.ncc-table{border-collapse:collapse;width:100%;font-size:var(--fs-sm);line-height:var(--lh-base)}
.ncc table.ncc-table td{border:1px solid var(--line);padding:6px 9px;vertical-align:top;background:var(--bg)}
.ncc table.ncc-table thead td{background:var(--clause-head);font-weight:600}
/* NCC 2025 v1.2 on (contents.xml): header cells are th, and a table that is a node of its
   own scrolls in its own wrapper */
.ncc table.ncc-table th{border:1px solid var(--line);padding:6px 9px;vertical-align:top;text-align:left;
  background:var(--clause-head);font-weight:600}
.ncc .ncc-table-scroll{overflow-x:auto;margin:.8em 0}
.ncc figure .ncc-table-scroll{margin:0}
.ncc figure.ncc-figure{margin:1.1em 0;text-align:center}
.ncc img.ncc-img{max-width:100%;height:auto}
.ncc figure:empty,.ncc p:empty{display:none}
.ncc figcaption{font-size:var(--fs-xs);color:var(--ink-2);margin-top:6px}
.ncc .ncc-fignum{font-family:var(--mono);color:var(--accent)}
.ncc .ncc-eq{font-family:var(--mono);font-size:.95em}
.ncc .ncc-glossdef{margin:.4em 0}
.ncc .ncc-acronym{font-size:var(--fs-sm);color:var(--ink-2)}
.ncc ol.list-arabic{list-style:decimal}
.ncc .ncc-callout-title{margin:.1em 0 .45em}
.ncc .ncc-note{font-size:var(--fs-sm);color:var(--ink-2);margin:.5em 0}
.ncc .ncc-notice{font-style:italic;color:var(--ink-2)}
/* a sign's wording ("FIRE CONTROL ROOM"), set apart as the Code prints it */
.ncc .ncc-sign{display:table;font-weight:600;letter-spacing:.03em;border:1px solid var(--line);
  border-radius:var(--r);padding:4px 10px;margin:.45em 0}
.ncc math{font-size:1.05em}
/* v1.2 writes some formulas against their words ("index<math>β</math>is"): space them on screen only */
.ncc span.ncc-eq{margin:0 .15em}

/* ---------- related / next best ---------- */
.rel{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);font-size:var(--fs-xs)}
.rel .grp{margin:6px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.rel .lab{color:var(--ink-3);flex:none;min-width:120px}
.rel a{color:var(--accent);text-decoration:none;font-family:var(--mono)}
.rel a:hover{text-decoration:underline}

h3.sec{
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-3);margin:28px 0 6px;font-weight:600;
}
.hit .crumb{margin-bottom:4px}
.hit .expand{margin-top:10px}

#empty{padding:40px 0;color:var(--ink-2);font-size:var(--fs-md)}
#empty code{font-family:var(--mono);font-size:var(--fs-sm)}

/* ---------- footer ---------- */
#foot{
  border-top:1px solid var(--line);padding:22px 20px 34px;
  max-width:760px;margin:0 auto;width:100%;color:var(--ink-3);
  font-size:var(--fs-xs);text-align:center;
}
#foot p{margin:5px auto}
#foot .disclaimer{color:#9aa2ad;max-width:66ch;text-wrap:balance}
#foot .build{font-family:var(--mono);font-size:var(--fs-2xs);color:#b2b9c3;margin-top:10px}

/* ---------- defined-term tooltip ---------- */
.tip{
  position:absolute;z-index:50;max-width:330px;background:var(--ink);color:#fff;
  padding:10px 13px;border-radius:var(--r);font-size:var(--fs-xs);line-height:1.5;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.tip b{display:block;margin-bottom:3px;font-weight:600;font-size:var(--fs-sm)}
.tip p{margin:.35em 0}

/* ---------- graduated keyword highlight ---------- */
/* Intensity tracks how much the word narrows the corpus: a rare term
   ("garbage") shouts, a ubiquitous one ("FRL") whispers. The underline weight
   carries the same signal for anyone who cannot separate the tints. */
mark.hl{background:none;color:inherit;padding:0 1px;border-radius:var(--r)}
mark.hl1{background:#fdf6d8;box-shadow:inset 0 -1px 0 #ecdfa4}
mark.hl2{background:#fdeeb4;box-shadow:inset 0 -2px 0 #e2c964}
mark.hl3{background:#ffd97a;box-shadow:inset 0 -3px 0 #c99a1f;font-weight:600}
@media (prefers-contrast:more){
  mark.hl1{background:#fff1a8}
  mark.hl2{background:#ffe066}
  mark.hl3{background:#ffc82e}
}

/* ---------- verify at source ---------- */
.verifybar{margin-top:16px;padding-top:13px;border-top:1px solid var(--line-2)}
.verifybar:empty{display:none}
a.verify{
  display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-xs);
  color:var(--accent);text-decoration:none;border:1px solid var(--line);
  border-radius:var(--r);padding:7px 13px;background:var(--bg);
}
a.verify:hover{border-color:var(--accent);background:var(--accent-soft)}
a.verify svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- in-context expansion ---------- */
.card .head,.hit .head{position:relative;padding-right:128px}
button.ctx-toggle{
  position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:var(--fs-xs);color:var(--ink-2);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);padding:5px 10px;
  cursor:pointer;line-height:var(--lh-tight);
}
button.ctx-toggle:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
button.ctx-toggle[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
button.ctx-toggle svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.ctx-panel{margin:18px 0 4px;border-top:1px solid var(--line-2);padding-top:6px}
.ctx-item{
  border-left:3px solid var(--line);border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:10px 0 10px 14px;margin:10px 0;color:var(--ink-2);cursor:pointer;
}
.ctx-item:hover{border-left-color:var(--accent);background:var(--bg-2)}
.ctx-item .ncc{margin-top:6px}
.ctx-item .ttl-s{font-size:var(--fs-md)}
.ctx-tag,.ctx-here{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.09em}
.ctx-tag{color:var(--ink-3);margin-bottom:3px}
.ctx-here{
  color:var(--accent);border-left:3px solid var(--accent);
  padding:8px 0 8px 14px;margin:10px 0;font-weight:600;
}
.ctx-none{font-size:var(--fs-sm);color:var(--ink-3);padding:8px 0}
button.ctx-more{
  font:inherit;font-size:var(--fs-xs);color:var(--accent);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);padding:6px 12px;
  cursor:pointer;margin-top:8px;
}
button.ctx-more:hover{border-color:var(--accent);background:var(--accent-soft)}

/* ---------- narrow ---------- */
@media (max-width:640px){
  .home #masthead{padding-top:12vh}
  .card{padding:16px 15px}
  .hit{padding:14px 14px}
  .rel .lab{min-width:0;width:100%}
  .card .head,.hit .head{padding-right:0}
  button.ctx-toggle{position:static;margin-top:8px}
  /* phones: the Code gets the width -- the panel runs to the card's edges */
  .card > .ncc{margin-left:-15px;margin-right:-15px;border-radius:0;border-width:1px 0;padding:12px 15px}
  .hit .expand > .ncc{margin-left:-14px;margin-right:-14px;border-radius:0;border-width:1px 0;padding:12px 14px}
  .toc-body > .ncc{padding:10px 10px}
  .ncc .ncc-sub{gap:8px}
  .ncc .ncc-num{min-width:1.7em}
  .ncc ol,.ncc ul{padding-left:1.25em}
  /* a Specification crumb ("Specification 17 Fire sprinkler systems") is
     wider than a phone; unbroken segments pushed the page sideways */
  .crumb span{white-space:normal}
}

/* ---------- browse tags (home screen) ---------- */
#browse{width:100%;max-width:680px;margin:20px auto 0}
#app:not(.home) #browse{display:none}
.browse-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  justify-content:center;margin:8px 0}
button.browse-tag{
  font:inherit;font-size:var(--fs-xs);color:var(--ink-2);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);padding:6px 12px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;line-height:var(--lh-tight);
}
button.browse-tag:hover{border-color:var(--accent-line);background:var(--bg-2)}
button.browse-tag.on{background:var(--accent);border-color:var(--accent);color:#fff}
button.browse-tag .n{font-size:var(--fs-2xs);color:var(--ink-3);font-family:var(--mono)}
button.browse-tag.on .n{color:#cfe0f5}

/* ---------- active filters ---------- */
#filterbar{
  display:flex;gap:7px;flex-wrap:wrap;align-items:center;
  padding:14px 2px 0;font-size:var(--fs-xs);
}
.fb-lab{
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);
}
button.fb-tag{
  font:inherit;font-size:var(--fs-xs);display:inline-flex;align-items:center;gap:7px;
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r);
  color:var(--accent);padding:4px 9px;cursor:pointer;line-height:var(--lh-tight);
}
button.fb-tag:hover{background:#dbe8f7}
.fb-kind{
  font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.07em;opacity:.7;
}
.fb-x{font-size:var(--fs-sm);line-height:1}
button.fb-clear{
  font:inherit;font-size:var(--fs-xs);background:none;border:none;color:var(--ink-3);
  cursor:pointer;text-decoration:underline;padding:4px 2px;
}
button.fb-clear:hover{color:var(--accent)}

/* the result chips are filters too, not query text */
#meta button.chip{font:inherit;line-height:var(--lh-tight)}

/* ---------- contents of a Specification / Part / Section ---------- */
/* A Specification is a heading over its clauses, so its card is a contents
   list: clause number, title, and the verbatim text opening in place. */
/* no "In context" button on these cards, so no room reserved for it */
.card.noctx .head{padding-right:0}
.toc{margin-top:14px}
.toc-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:8px;border-bottom:1px solid var(--line);
}
.toc-count{font-size:var(--fs-xs);color:var(--ink-3)}
button.toc-all{
  font:inherit;font-size:var(--fs-xs);color:var(--ink-2);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);padding:5px 10px;
  cursor:pointer;line-height:var(--lh-tight);
}
button.toc-all:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
button.toc-all[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
ol.toc-list{list-style:none;margin:0;padding:0}
.toc-item{border-bottom:1px solid var(--line-2)}
.toc-item:last-child{border-bottom:none}
.toc-row{display:flex;align-items:baseline;gap:14px;padding:9px 0}
.toc-row .cit{flex:none;min-width:10ch}
button.toc-toggle,a.toc-open{
  flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;text-align:left;
  font:inherit;font-size:var(--fs-md);color:var(--ink);background:none;border:none;
  padding:0;cursor:pointer;text-decoration:none;line-height:var(--lh-tight);
}
button.toc-toggle:hover .toc-ttl,a.toc-open:hover{text-decoration:underline}
button.toc-toggle:focus-visible,button.toc-all:focus-visible,a.toc-open:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.toc-ttl{flex:1;min-width:0}
.toc-row .badge{flex:none}
.chev{
  width:14px;height:14px;flex:none;align-self:center;fill:none;stroke:var(--ink-3);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s;
}
button.toc-toggle[aria-expanded="true"] .chev{transform:rotate(90deg);stroke:var(--accent)}
.toc-body{margin:2px 0 14px}
.toc-body .ncc{margin-top:0}
.toc-body .ncc-tabcap{font-size:var(--fs-xs);color:var(--ink-2);padding-bottom:6px}
@media (max-width:640px){
  .toc-row{gap:10px}
  .toc-row .cit{min-width:0}
}
@media (prefers-reduced-motion:reduce){ .chev{transition:none} }

/* ---------- state variations ---------- */
/* Same warm palette as the jurisdiction badge: this is the thing a
   Victorian reader must not miss before reading the national text. */
.vnote{
  margin:12px 0 4px;padding:10px 14px;font-size:var(--fs-sm);color:var(--ink);
  background:var(--warn-soft);border:1px solid var(--warn-line);border-left:3px solid var(--warn);
  border-radius:0 var(--r) var(--r) 0;
}
.vnote p{margin:.25em 0}
.vnote .vnote-lab{font-size:var(--fs-xs);font-weight:600;color:var(--warn);margin:0 0 4px}
ul.vnote-list{list-style:none;margin:0;padding:0}
ul.vnote-list li{display:flex;gap:12px;align-items:baseline;padding:3px 0}
.vnote .cit{flex:none;min-width:10ch}
.vnote-miss{color:var(--warn)}
@media (max-width:640px){
  ul.vnote-list li{flex-direction:column;gap:0;padding:5px 0}
  .vnote .cit{min-width:0}
}

/* ---------- Victorian legislation ---------- */
/* Labels are the authorised text's own ("(da)" included), so levels indent
   rather than renumber; the number column keeps them aligned. */
.ncc .ncc-sub.lg-l1{margin-left:0}
.ncc .ncc-sub.lg-l2{margin-left:2.1em}
.ncc .ncc-sub.lg-l3{margin-left:4.2em}
.ncc .ncc-sub.lg-l4{margin-left:6.3em}
.ncc p.lg-body.lg-l2{margin-left:2.1em}
.ncc p.lg-body.lg-l3{margin-left:4.2em}
.ncc .lg-def{margin:.5em 0}
.ncc .lg-penalty{margin:.45em 0 .9em 2.1em;font-size:var(--fs-sm);color:var(--ink-2)}
.ncc .lg-stars{text-align:center;letter-spacing:.3em;color:var(--ink-3)}
details.lg-hist{margin-top:12px;font-size:var(--fs-xs);color:var(--ink-3)}
details.lg-hist summary{cursor:pointer;color:var(--ink-2)}
details.lg-hist ul{margin:6px 0 0;padding-left:1.2em}
details.lg-hist li{margin:2px 0}
@media (max-width:640px){
  .ncc .ncc-sub.lg-l2,.ncc p.lg-body.lg-l2{margin-left:1em}
  .ncc .ncc-sub.lg-l3,.ncc p.lg-body.lg-l3{margin-left:2em}
  .ncc .ncc-sub.lg-l4{margin-left:3em}
}

/* ---------- NCC 2019 number beside the current one ---------- */
.cit-old{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap;cursor:help}

/* ---------- pivot: the right clause in one click ---------- */
#pivot:empty{display:none}
.pivot{margin:12px 0 2px;border:1px solid var(--line);border-radius:var(--r-lg);padding:9px 14px;background:var(--bg-2)}
.pv-row{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:3px 0}
.pv-lab{font-size:var(--fs-xs);color:var(--ink-3);flex:none;min-width:10.5em}
ul.pv-heads{list-style:none;margin:0;padding:0;flex:1;min-width:0}
ul.pv-heads li{display:flex;gap:9px;align-items:baseline;padding:1px 0;min-width:0;font-size:var(--fs-sm)}
ul.pv-heads .cit{flex:none;font-size:var(--fs-xs)}
a.pv-t{color:var(--ink);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.pv-t:hover{text-decoration:underline}
button.pv-chip{font:inherit;font-size:var(--fs-xs);color:var(--ink-2);background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:3px 11px;cursor:pointer;line-height:var(--lh-tight)}
button.pv-chip:hover{border-color:var(--accent);color:var(--accent)}
button.pv-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
nav.nbrs{display:flex;justify-content:space-between;gap:14px;margin:8px 0 0;font-size:var(--fs-xs)}
a.nbr{color:var(--ink-2);text-decoration:none;min-width:0;max-width:49%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.nbr .cit{font-size:var(--fs-xs)}
a.nbr:hover{color:var(--accent)}
a.nbr-next{margin-left:auto;text-align:right}
.pinbar{margin-top:12px}
button.pin-btn{font:inherit;font-size:var(--fs-xs);color:var(--ink-2);background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r);padding:5px 11px;cursor:pointer;line-height:var(--lh-tight)}
button.pin-btn:hover{border-color:var(--ok);color:var(--ok)}
button.pin-btn.on{background:var(--ok);border-color:var(--ok);color:#fff}
#foot .pins{font-size:var(--fs-xs);color:var(--ink-3)}
#foot .pins:empty{display:none}
#foot .pins button{font:inherit;background:none;border:none;padding:0;color:var(--accent);cursor:pointer;text-decoration:underline}
@media (max-width:640px){
  .pv-lab{min-width:0;width:100%}
  nav.nbrs{flex-direction:column;gap:4px}
  a.nbr{max-width:100%}
  a.nbr-next{margin-left:0;text-align:left}
}

/* ---------- refine rows: Corpus · Section · Headings that match · Concept ---------- */
.pivot .pv-row + .pv-row{border-top:1px dashed var(--line);padding-top:4px;margin-top:4px}
.pv-opts{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.pv-lab{font-weight:600;letter-spacing:.01em}
button.rf-chip{font:inherit;font-size:var(--fs-xs);color:var(--ink-2);background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:3px 11px;cursor:pointer;line-height:var(--lh-tight);white-space:nowrap}
button.rf-chip:hover{border-color:var(--accent);color:var(--accent)}
button.rf-chip .n{margin-left:6px;color:var(--ink-3);font-variant-numeric:tabular-nums}
button.rf-chip .x{margin-left:6px}
button.rf-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
button.rf-chip.on .n{color:#fff;opacity:.8}
/* the corpus row is a fixed selector: square-ish, one always lit */
.rf-corpus button.rf-chip{border-radius:var(--r)}
.pivot .pv-lab{min-width:0;width:7.6em;white-space:normal;line-height:var(--lh-tight)}
.pivot ul.pv-heads li{padding:0}
@media (max-width:640px){ .pivot .pv-lab{width:100%} }

/* ---------- AI assist ---------- */
/* A switch under the search box, and an answer card above the usual results.
   The card is the site's answer card in a quieter panel, so Claude's wording
   never passes for the Code's own: the Code keeps the clause panel. */
#aibar{width:100%;max-width:680px;margin-top:9px;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px 12px;font-size:var(--fs-xs);color:var(--ink-2)}
.home #aibar{justify-content:center}
/* [hidden] must win here too: the AI switch shows only for a signed-in account */
#aibar[hidden]{display:none}
.ai-switch,.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;position:relative;user-select:none}
.ai-switch input,.switch input{position:absolute;opacity:0;width:1px;height:1px}
.ai-track{width:30px;height:17px;border-radius:999px;background:#cfd5dc;position:relative;
  transition:background .15s;flex:none}
.ai-track::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(20,30,50,.25);transition:transform .15s}
.ai-switch input:checked + .ai-track,.switch input:checked + .ai-track{background:var(--accent)}
.ai-switch input:checked + .ai-track::after,.switch input:checked + .ai-track::after{transform:translateX(13px)}
.ai-switch input:focus-visible + .ai-track,.switch input:focus-visible + .ai-track{outline:2px solid var(--accent);outline-offset:2px}
#ai-settings{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px;flex:0 1 auto}
#ai-settings[hidden]{display:none}
#ai-key{font:inherit;font-size:var(--fs-xs);color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);padding:5px 8px}
#ai-key{width:190px;min-width:0;font-family:var(--mono)}
#ai-key:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 2px var(--accent-soft)}
.ai-remember{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.ai-ctx{font-size:var(--fs-2xs);color:var(--accent);border:1px solid var(--accent-line);border-radius:var(--r);padding:1px 6px}
#ai-forget,button.ai-cancel,button.ai-again{font:inherit;font-size:var(--fs-xs);color:var(--accent);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);padding:5px 10px;cursor:pointer}
#ai-forget:hover,button.ai-cancel:hover,button.ai-again:hover{border-color:var(--accent);background:var(--accent-soft)}

.card.ai-card{background:var(--bg-2);border-color:var(--accent-line);border-left:3px solid var(--accent)}
.ai-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-right:22px;position:relative}
.ai-tag{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r);padding:1px 7px}
.ai-q{font-weight:600;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ai-meta{font-size:var(--fs-xs);color:var(--ink-3)}
button.ai-x{position:absolute;top:-4px;right:-6px;border:none;background:none;font-size:1.2rem;
  line-height:1;color:var(--ink-3);cursor:pointer;padding:2px 4px}
button.ai-x:hover{color:var(--ink)}
.ai-card.busy .ai-tag{animation:ai-pulse 1.4s ease-in-out infinite}
@keyframes ai-pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){ .ai-card.busy .ai-tag{animation:none} .ai-track,.ai-track::after{transition:none} }
.ai-steps{font-size:var(--fs-xs);color:var(--ink-2);margin:10px 0 8px;padding-left:1.3em}
.ai-steps li{margin:3px 0}
.ai-steps i{color:var(--ink-3)}
.ai-turn,.ai-usage{color:var(--ink-3);font-variant-numeric:tabular-nums}
.ai-usage{font-size:var(--fs-xs);margin:0 0 8px}
.ai-note p{margin:10px 0}

.ai-body{margin-top:12px;font-size:var(--fs-md)}
.ai-live:empty{display:none}
.ai-live{color:var(--ink)}
.ai-kept{font-size:var(--fs-xs);color:var(--ink-3);margin:8px 0 0}
.ai-kept .ai-again{margin-left:6px}
.ai-body p{margin:0 0 .75em}
.ai-body ul,.ai-body ol{margin:0 0 .75em;padding-left:1.35em}
.ai-body li{margin:.25em 0}
.ai-body h4{font-size:var(--fs-md);font-weight:600;margin:1em 0 .3em}
a.ai-cite{display:inline-block;font-family:var(--mono);font-size:var(--fs-2xs);font-weight:600;line-height:1.5;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r);
  padding:0 5px;margin-left:4px;text-decoration:none;white-space:nowrap;vertical-align:1px}
a.ai-cite:hover{border-color:var(--accent);background:var(--bg)}
.ai-uncited{text-decoration:underline dotted var(--warn);text-decoration-thickness:1.5px;text-underline-offset:3px}
.ai-notes{font-size:var(--fs-xs);color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn-line);
  border-radius:var(--r);padding:7px 10px;margin:4px 0 0}

.ai-sources{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.ai-sources h4,.ai-trace summary{font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);margin:0 0 6px}
.ai-sources ol{margin:0;padding-left:1.35em}
.ai-sources li{margin:10px 0}
.ai-src-t{color:var(--ink-2);font-size:var(--fs-sm);margin-left:6px}
.ai-sources blockquote{margin:6px 0;padding:7px 11px;background:var(--clause-bg);border:1px solid var(--clause-line);
  border-left-width:3px;border-radius:var(--r);font-size:var(--fs-sm);line-height:var(--lh-clause)}
.ai-verify{margin-top:6px}
.ai-trace{margin-top:12px}
.ai-trace summary{cursor:pointer;font-weight:500;color:var(--ink-3)}
.ai-foot{font-size:var(--fs-2xs);color:var(--ink-3);margin:12px 0 0}
@media (max-width:640px){
  #ai-settings{flex-basis:100%}
  #ai-key{flex:1 1 140px;width:auto}
  .ai-sources ol{padding-left:1.1em}
}

/* ---------- the legislation, as a note ---------- */
/* The Victorian Act and Regulations aren't searchable on the public site (the
   owner's decision, 3 October 2026): a query that cites them gets this, with
   links to their authorised versions. Calmer than a state variation note. */
.legnote{margin:10px 0 4px;padding:9px 14px;font-size:var(--fs-sm);color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--accent-line);
  border-radius:0 var(--r) var(--r) 0}
.legnote p{margin:0}
.legnote a{color:var(--accent)}

/* ---------- accounts ---------- */
/* The footer's account line, and the sign-in page: two accounts, for the AI assist only. */
#foot .acct{font-size:var(--fs-xs);color:var(--ink-3)}
#foot .acct:empty{display:none}
#foot .acct a,#foot .acct button{font:inherit;background:none;border:none;padding:0;color:var(--accent);cursor:pointer;text-decoration:underline}
#foot .links{font-size:var(--fs-xs)}
#foot .links a{color:var(--ink-3)}
.signin{max-width:360px;margin:0 auto;padding:min(14vh,120px) 20px 60px}
.signin-brand{display:inline-flex;align-items:baseline;gap:.34rem;letter-spacing:-.015em;font-size:var(--fs-xl);color:var(--ink);text-decoration:none;margin-bottom:22px}
.signin h1{font-size:var(--fs-xl);font-weight:600;margin:0 0 6px}
.signin-note{font-size:var(--fs-sm);color:var(--ink-2);margin:0 0 20px}
.signin form{display:flex;flex-direction:column;gap:6px}
.signin label{font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);margin-top:8px}
.signin input{font:inherit;font-size:var(--fs-md);color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.signin input:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 2px var(--accent-soft)}
.signin button{font:inherit;font-size:var(--fs-sm);font-weight:600;color:#fff;background:var(--accent);
  border:1px solid var(--accent);border-radius:var(--r);padding:9px 14px;margin-top:16px;cursor:pointer}
.signin button:disabled{opacity:.6;cursor:default}
.signin-msg{font-size:var(--fs-sm);color:var(--warn);min-height:1.4em;margin:8px 0 0}
.signin-back{font-size:var(--fs-sm);margin-top:24px}
.signin-back a{color:var(--accent)}
/* a citation of the Act or Regulations: a link to the authorised version, no quote */
a.ai-cite.leg{background:var(--bg);border-style:dashed}
.ai-legnote{font-size:var(--fs-xs);color:var(--ink-2);margin:10px 0 0}
.ai-legnote a{color:var(--accent)}
.ai-budget{font-size:var(--fs-2xs);color:var(--ink-3)}

/* ---------- terms, privacy ---------- */
.doc{max-width:680px;margin:0 auto;padding:min(10vh,80px) 20px 60px;font-size:var(--fs-md);line-height:var(--lh-base)}
.doc h1{font-size:var(--fs-xl);font-weight:600;margin:0 0 4px}
.doc h2{font-size:var(--fs-md);font-weight:600;margin:1.6em 0 .4em}
.doc p{margin:0 0 .8em;color:var(--ink)}
.doc a{color:var(--accent)}
.doc-date{font-size:var(--fs-xs);color:var(--ink-3)}