:root {
  --paper: #fdfdfb;
  --ink: #1d1d1b;
  --ink-2: #4f4e4a;
  --ink-3: #8b8984;
  --rule: #e3e1da;
  --rule-2: #cfccc3;
  --code-bg: #f6f6f3;
  --code-ink: #26282b;
  --target: #fbe9a6;
  --ok: #2e5a3c;
  --ok-bg: #e5efe7;
  --phrase-line: #9ab8a2;
  --cite-line: #9fb0c8;
  --phrase-hover: #edf3ee;
  --bad: #9a2a22;
  --kw: #27457a;
  --ty: #2c5f5c;
  --com: #8b8984;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Source Sans 3", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, monospace;
  --head-h: 56px;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--head-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
}
code, pre { font-family: var(--mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
a { color: inherit; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  max-width: 1480px; margin: 0 auto; padding: 0 32px;
  height: var(--head-h);
  display: flex; align-items: center;
}
.crumbs { display: grid; font-family: var(--sans); line-height: 1.25; min-width: 0; }
.crumb-top { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.crumb-sec { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- layout */

.layout {
  max-width: 1480px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 40px;
}
.statute { padding: 20px 0 160px; min-width: 0; max-width: 760px; }
.panel-col { border-left: 1px solid var(--rule); min-width: 0; }
.panel-col .panel {
  position: sticky; top: var(--head-h);
  max-height: calc(100vh - var(--head-h));
  overflow-y: auto;
  padding: 20px 0 80px 28px;
}
.panel-head { font-family: var(--sans); font-size: 15px; font-weight: 600; margin: 8px 0 12px; }
.panel-empty { font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin: 8px 0; }

.sec-index { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--sans); font-size: 13px; margin: 8px 0 18px; }
.sec-index a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.sec-index a:hover { color: var(--ink); border-bottom-color: var(--ink-2); }

/* ---------------------------------------------------------------- statute */

.sec { margin-bottom: 36px; }
.sec-head {
  font-size: 19px; font-weight: 600; line-height: 1.35;
  margin: 28px 0 14px; padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.sec-num { font-family: var(--sans); font-weight: 600; }
.group-head {
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin: 56px 0 0;
}
.sec-referenced .sec-head { font-size: 17px; }

.clause { margin: 0 0 10px; }
.clause.lvl-1 { margin-left: 28px; }
.clause:not(.formal) .ctext { color: var(--ink-3); }
.clause.formal .ctext { border-left: 2px solid var(--ok); padding-left: 12px; margin-left: -14px; border-radius: 0 3px 3px 0; }
.clause.whole .ctext { cursor: pointer; }
.clause.whole .ctext:hover { background: var(--ok-bg); }
.clause.selected .ctext { background: var(--ok-bg); }
.phrase {
  cursor: pointer;
  border-radius: 2px;
  text-decoration: underline dotted var(--phrase-line);
  text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.clause:hover .phrase { text-decoration-color: var(--ink-3); }
.phrase.hover { background: var(--phrase-hover); }
.phrase.selected { background: var(--target); }
.panel-note { font-family: var(--sans); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin: -4px 0 14px; white-space: pre-line; }
.panel-note code { font-size: 13px; }
.panel-phrase { font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--ink-2); margin: -4px 0 14px; }
.note-edit { margin: -4px 0 14px; }
.note-edit .panel-note { margin: 0 0 6px; }
.note-btn, .note-bar button {
  font-family: var(--sans); font-size: 13px; color: var(--ink-2); background: none;
  border: 1px solid var(--rule-2); border-radius: 4px; padding: 2px 10px; cursor: pointer;
}
.note-btn:hover, .note-bar button:hover { color: var(--ink); border-color: var(--ink-3); }
.note-input {
  display: block; width: 100%; font-family: var(--sans); font-size: 14.5px; line-height: 1.5;
  color: var(--ink); background: var(--paper); border: 1px solid var(--rule-2); border-radius: 4px; padding: 6px 8px;
}
.note-bar { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.note-msg { font-family: var(--sans); font-size: 13px; color: var(--ink-2); }
.model-clause .ctext { font-family: var(--sans); }
.ctext { margin: 0; }
.cite { font-family: var(--sans); font-weight: 600; color: var(--ink-2); margin-right: 2px; }
.clause:not(.formal) .cite { color: var(--ink-3); }
.xref { text-decoration: underline solid var(--cite-line); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.xref.term { text-decoration-color: var(--ink-3); }
.xref:hover { text-decoration-color: var(--ink); }
.bad-link { color: var(--bad); border-bottom: 1px dashed var(--bad); }

.sec:target > .sec-head { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: var(--target); } to { background: transparent; } }

/* ---------------------------------------------------------------- Lean */

.decl { margin: 0 0 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--code-bg); }
.decl.flash { animation: flash-decl 1.6s ease-out; }
@keyframes flash-decl { from { box-shadow: 0 0 0 3px var(--target); } to { box-shadow: 0 0 0 3px transparent; } }
.decl-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 6px 12px; border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: 12.5px; color: var(--ink-3);
}
.decl-kind { font-weight: 600; color: var(--ink-2); }
.decl-name { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.status { font-weight: 600; }
.status-ok { color: var(--ok); }
.status-sorry { color: var(--bad); }
.decl-src { margin-left: auto; font-family: var(--mono); font-size: 11.5px; }
.decl-missing { padding: 8px 12px; color: var(--bad); font-family: var(--sans); font-size: 13px; }

pre.lean {
  margin: 0; padding: 10px 12px;
  overflow-x: auto;
  font-size: 13px; line-height: 1.55; color: var(--code-ink);
}
.tk-kw { color: var(--kw); font-weight: 600; }
.tk-ty, .tk-const { color: var(--ty); }
.tk-doc, .tk-com { color: var(--com); font-style: italic; }
.tk-doc { white-space: pre-wrap; }
.doc-li { display: block; padding-left: 1.2em; text-indent: -1.2em; }
.tk-str, .tk-num { color: #7a4f1d; }
.tk-op { color: var(--kw); }
mark.focus { background: var(--target); color: inherit; border-radius: 2px; box-shadow: 0 0 0 2px var(--target); }
.tk-ref { text-decoration: none; box-shadow: inset 0 -1px 0 var(--rule-2); }
.tk-ref:hover { box-shadow: inset 0 -1px 0 var(--ink-2); }

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 900px) {
  .masthead-inner, .layout { padding: 0 16px; }
  .layout { display: block; }
  .panel-col { display: none; }
  .clause + .panel { margin: 10px 0 20px; }
  .clause.lvl-1 { margin-left: 16px; }
  .clause.formal .ctext { margin-left: -10px; padding-left: 8px; }
}