/* ============================================================
   Lanka Records — stylesheet
   Stylesheet
   ============================================================ */

:root {
  --bg:            #f4f7fc;
  --bg-raised:     #ffffff;
  --bg-sunk:       #eaf0f8;
  --text:          #0c1a2e;
  --text-soft:     #48596f;
  --text-faint:    #5f6b80;
  --line:          #e0e7f1;
  --line-strong:   #cbd6e6;

  --accent:        #1550b5;
  --on-accent:     #ffffff;
  --accent-soft:   #e9f0fd;
  --gold:          #9c7420;
  --gold-soft:     #f7efdc;
  --green:         #2f6b4f;
  --green-soft:    #e8f1ec;
  --ink:           var(--navy);   /* one navy: the amendment badge ink */
  --ink-soft:      #e7edf4;

  /* amendment categories — validated palette, use exactly (colour-blind + contrast checked) */
  --cat-1:         #1550b5;   /* Presidency   */
  --cat-2:         #c2570a;   /* Independence */
  --cat-3:         #00856b;   /* Elections    */
  --cat-4:         #8a3ea8;   /* Other        */

  /* the dark end: navy chrome bands (site header, page headers) */
  --navy:          #0a2f72;
  --navy-deep:     #06214f;
  --navy-line:     #1d4a91;
  --on-navy:       #ffffff;
  --on-navy-soft:  #b6cdf0;
  --on-navy-faint: #8fb0dd;

  /* ordered data (eras, periods): a sequential single-hue ramp, darkest = earliest */
  --era-1:         #0a2f72;
  --era-2:         #1550b5;
  --era-3:         #4b85d9;
  --era-4:         #9cc0ef;

  /* the Constitution reader (browse.html split view) */
  --accent-deep:   var(--navy);   /* navy used as text; its own value in dark mode */
  --read-bg:       #f4f7fc;
  --row-hover:     #f8fbff;

  --radius:        6px;
  --radius-lg:     8px;
  --shadow:        0 1px 2px rgba(12,26,46,.05), 0 4px 16px rgba(12,26,46,.05);
  --shadow-lift:   0 2px 6px rgba(12,26,46,.07), 0 12px 32px rgba(12,26,46,.08);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap:   1320px;
  --scheme: light;   /* native form controls follow the site theme */
  --gutter: 20px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #11151c;
    --bg-raised:   #181d26;
    --bg-sunk:     #0c1016;
    --text:        #e8edf5;
    --text-soft:   #aab4c3;
    --text-faint:  #7f8a9c;
    --line:        #263040;
    --line-strong: #364256;

    --accent:      #8fb0ec;
    --on-accent:   #0c1a2e;
    --accent-soft: #1a2438;
    --gold:        #dbb45f;
    --gold-soft:   #2c2415;
    --green:       #7fc4a0;
    --green-soft:  #16261e;
    --ink:         #8fb4d8;
    --ink-soft:    #17222e;
    --cat-1:       #5a8fdb;
    --cat-2:       #cc7a35;
    --cat-3:       #22a181;
    --cat-4:       #ab6fcc;
    --navy:        #1a2d52;
    --navy-deep:   #142340;
    --navy-line:   #34507f;
    --on-navy:     #f0f4fb;
    --on-navy-soft: #b6cdf0;
    --on-navy-faint: #9db6de;
    --era-1:       #274f93;
    --era-2:       #3a6fc4;
    --era-3:       #6b98dd;
    --era-4:       #a8c6f0;
    --accent-deep: #c9dafa;
    --scheme:      dark;
    --read-bg:     #131620;
    --row-hover:   #1b1f29;

    --shadow:      0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --bg:          #11151c;
  --bg-raised:   #181d26;
  --bg-sunk:     #0c1016;
  --text:        #e8edf5;
  --text-soft:   #aab4c3;
  --text-faint:  #7f8a9c;
  --line:        #263040;
  --line-strong: #364256;
  --accent:      #8fb0ec;
  --on-accent:   #0c1a2e;
  --accent-soft: #1a2438;
  --gold:        #dbb45f;
  --gold-soft:   #2c2415;
  --green:       #7fc4a0;
  --green-soft:  #16261e;
  --ink:         #8fb4d8;
  --ink-soft:    #17222e;
  --cat-1:       #5a8fdb;
  --cat-2:       #cc7a35;
  --cat-3:       #22a181;
  --cat-4:       #ab6fcc;
  --navy:        #1a2d52;
  --navy-deep:   #142340;
  --navy-line:   #34507f;
  --on-navy:     #f0f4fb;
  --on-navy-soft: #b6cdf0;
  --on-navy-faint: #9db6de;
  --era-1:       #274f93;
  --era-2:       #3a6fc4;
  --era-3:       #6b98dd;
  --era-4:       #a8c6f0;
  --accent-deep: #c9dafa;
  --scheme:      dark;
  --read-bg:     #131620;
  --row-hover:   #1b1f29;
  --shadow:      0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.3);
}

/* ---------- reset ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.18; margin: 0; letter-spacing: -.02em; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 700px) { .wrap { padding: 0 var(--gutter); } }
/* continuous prose keeps a readable measure; lists, cards and tables use the full width */
.prose { max-width: 70ch; }
/* file paths and identifiers have no spaces — let them break rather than push the page wide */
code { overflow-wrap: anywhere; word-break: break-word; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* ---------- header ----------
   A plain white bar: wordmark, the two-section nav, and on the reader the article count.
------------------------------------------------------------ */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line-strong);
}
.head-in {
  margin: 0 auto; padding: 0 24px; min-height: 52px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; text-decoration: none; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-name { font-family: var(--display); font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.brand-name em { font-style: normal; color: var(--accent); }

.nav { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; margin-right: auto; }
.nav a {
  color: var(--text-soft); font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 6px 12px; border-radius: 5px; white-space: nowrap;
}
.nav a:hover { background: var(--bg-sunk); color: var(--text); text-decoration: none; }
.nav a[aria-current="page"],
.nav a[aria-current="page"]:hover { background: var(--accent); color: var(--on-accent); }
/* the nav: a labelled group for Know Your Constitution */
.nav-group {
  display: flex; align-items: center; gap: 2px; flex: 0 0 auto;
  padding: 3px 3px 3px 10px; border: 1px solid var(--line); border-radius: 6px;
}
.nav-label {
  font-size: 10px; font-weight: 700; line-height: 1.15; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); margin-right: 4px; white-space: nowrap;
}
.nav a.nav-section { color: var(--text); }

.head-stat {
  font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
}
.head-stat:empty { display: none; }

.theme-btn {
  background: none; border: 1px solid var(--line-strong); color: var(--text-soft);
  width: 32px; height: 32px; border-radius: 5px; cursor: pointer;
  display: grid; place-items: center; font-size: 15px; padding: 0;
}
.theme-btn:hover { background: var(--bg-sunk); color: var(--text); }

/* below desktop width (design-reference/mock-4b-nav-pinned-about.html): the brand row holds the
   brand, the About pill and the theme button; the Know Your Constitution group takes the next
   row and wraps its links. Nothing scrolls sideways and every link stays on screen.
   One About link serves both layouts: .nav becomes display: contents here, so its children
   (Home, the group, About) join the header row and can be ordered beside the brand, while the
   markup, and the About link's place inside the Main navigation landmark, stay as they are. */
@media (max-width: 1060px) {
  .head-in { gap: 8px 12px; padding: 12px var(--gutter) 8px; min-height: 0; }
  .brand { order: 0; margin-right: auto; }
  .head-stat { display: none; }
  .nav { display: contents; }
  .nav-about { order: 1; padding: 7px 11px; border: 1px solid var(--line-strong); }
  .theme-btn { order: 2; }
  /* the brand links home, so the Home link goes here (as in the mockup); the group then always
     takes the whole second row instead of sharing the first with the theme button */
  .nav > a[href="index.html"] { display: none; }
  .nav-group { order: 3; flex: 1 1 100%; min-width: 0; flex-wrap: wrap; row-gap: 4px; padding-left: 8px; }
  .nav a { padding: 6px 10px; }
}
/* phones: the group's border shows the grouping, so hide its label visually (screen readers
   still get it); links grow to ~35px tap targets and the group's padding tightens */
@media (max-width: 620px) {
  .nav-group { padding: 2px; gap: 2px; }
  .nav-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .nav a { padding: 11px 9px; font-size: 13px; }
  .nav a.nav-about { padding: 11px 11px; }
}

/* ---------- hero ---------- */

.hero { padding: 64px 0 52px; border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.hero h1 { font-size: clamp(2rem, 5.5vw, 3.15rem); font-weight: 800; letter-spacing: -.028em; line-height: 1.08; max-width: 22ch; margin-bottom: 18px; }
.hero .lede { font-size: 17px; color: var(--text-soft); max-width: 58ch; margin-bottom: 28px; }
.eyebrow {
  display: inline-block; font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
  padding: 6px 9px; border-radius: 3px; margin-bottom: 18px;
}

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 17px; border-radius: 6px; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; font-family: var(--sans);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, #000); text-decoration: none; }
.btn-ghost { background: var(--bg-raised); border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: var(--bg-sunk); text-decoration: none; }

/* ---------- search ---------- */

.searchbox { position: relative; margin: 0 0 8px; }
.searchbox input {
  width: 100%; font-family: var(--sans); font-size: 15.5px;
  padding: 13px 16px 13px 44px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--bg-raised); color: var(--text);
}
.searchbox input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.searchbox svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }
.search-note { font-size: 13.5px; color: var(--text-faint); margin: 0 0 24px; }
.search-note.table-note { margin: 8px 0 0; }   /* a note directly under a table */

/* ---------- sections ---------- */

.section { padding: 22px 0; }
.section-head { margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.section-head h2 { font-size: 19px; margin: 0; }
.section-head p { color: var(--text-soft); font-size: 14px; max-width: 80ch; margin: 0; }

/* ---------- cards ---------- */

.grid { display: grid; gap: 10px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.card {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
a.card { color: inherit; display: block; transition: border-color .15s ease, background .15s ease; }
a.card:hover { text-decoration: none; border-color: var(--accent); background: var(--row-hover); }
.card h3 { font-size: 16px; margin-bottom: 4px; }
.card p { font-size: 14px; color: var(--text-soft); margin: 0; }

.ch-num {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 5px; display: block;
}
.ch-meta { font-size: 13px; color: var(--text-faint); margin-top: 6px; }

/* collection cards */
.coll-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .coll-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .coll-grid { grid-template-columns: 1fr; } }
.coll { position: relative; }
.coll-state {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 3px; margin-bottom: 8px;
}
.coll.live .coll-state    { background: var(--green-soft); color: var(--green); }
.coll.planned .coll-state { background: var(--bg-sunk); color: var(--text-faint); }
.coll.planned { border-style: dashed; }
.coll.planned h3 { color: var(--text-soft); }

/* quick links */
.qlinks { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.qlink {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); font-size: 14px;
}
.qlink:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-soft); }
.qlink .art-tag {
  flex: 0 0 auto; font-family: var(--display); font-weight: 800; font-size: 12.5px; letter-spacing: -.02em;
  color: var(--accent); background: var(--accent-soft); border-radius: 3px; padding: 3px 7px;
}
.qlink:hover .art-tag { background: var(--bg-raised); }

/* ---------- Constitution reader: split view (browse.html) ----------
   A list of articles on the left, one article at a time on the right. Each pane
   scrolls on its own, so the reader never loses their place in 266 articles.
   --head-h and --search-h are measured by render/constitution.js.
--------------------------------------------------------------------- */

[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.split {
  display: grid; grid-template-columns: 392px minmax(0, 1fr);
  height: calc(100vh - var(--head-h, 57px));
  height: calc(100dvh - var(--head-h, 57px));
  border-bottom: 1px solid var(--line);
}

/* list pane */
.list-pane {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--bg-raised); border-right: 1px solid var(--line-strong);
}
.list-search { padding: 11px 14px 8px; border-bottom: 1px solid var(--line); background: var(--bg-raised); }
.list-search .searchbox { margin: 0; }
.list-search .searchbox input {
  padding: 9px 12px 9px 36px; font-size: 14px; border-radius: 7px;
  background: var(--read-bg); border-color: var(--line-strong);
}
.list-search .searchbox input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.list-search .searchbox svg { left: 12px; }
.list-search .count { margin: 7px 2px 0; font-size: 12.5px; min-height: 1.2em; }
.list-search .count:empty { display: none; }
.list-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.list-scroll .empty { padding: 40px 20px; }

.group-head {
  position: sticky; top: 0; z-index: 2;
  font-family: var(--sans); font-size: 10px; font-weight: 700; line-height: 1.35;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text-faint);
  padding: 14px 16px 7px; margin: 0;
  background: var(--bg-raised); border-bottom: 1px solid var(--line);
}
.row {
  display: flex; gap: 11px; padding: 10px 16px;
  border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none;
  scroll-margin-top: 36px;
}
.row:hover { background: var(--row-hover); text-decoration: none; }
.row:focus-visible { outline-offset: -2px; border-radius: 0; }
.row-n {
  flex: 0 0 38px; font-family: var(--display); font-size: 14px; font-weight: 800;
  line-height: 1.3; letter-spacing: -.02em; color: var(--accent);
}
.row-body { min-width: 0; }
.row-t { display: block; font-size: 13.6px; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; margin-bottom: 2px; }
.row-s {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 12.6px; line-height: 1.4; color: var(--text-faint);
}
.row.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.row.on .row-t { color: var(--accent-deep); }
.row.repealed .row-t, .row.repealed .row-n { color: var(--text-faint); }

/* reading pane */
.read-pane {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--read-bg); padding: 34px 46px 48px;
}
.read-pane:focus { outline: none; }
.read-in { max-width: 1100px; }
.back-btn { display: none; }
.read-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 9px; margin-bottom: 13px; }
.read-ch {
  font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); padding: 5px 9px; border-radius: 3px;
}
.read-kick .badge { margin: 0; }
.read-n {
  font-family: var(--display); font-size: 46px; font-weight: 800; line-height: 1;
  letter-spacing: -.045em; color: var(--accent); margin: 0 0 4px;
}
.read-title {
  font-family: var(--display); font-size: 27px; font-weight: 700; line-height: 1.18;
  letter-spacing: -.025em; margin: 0 0 20px; overflow-wrap: break-word;
}
.read-lbl {
  font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 7px;
}
.read-plain { font-size: 16.5px; line-height: 1.6; color: var(--text); margin: 0 0 24px; }
.read-text {
  font-size: 15.5px; line-height: 1.72; color: var(--text-soft); background: var(--bg-raised);
  border-left: 3px solid var(--accent); padding: 16px 20px; border-radius: 0 6px 6px 0; margin: 0 0 24px;
}
.read-rel { border-top: 1px solid var(--line-strong); padding-top: 16px; }
.read-rel-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 9px; }
.rel-link {
  font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--text-soft);
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: 5px; padding: 8px 11px;
}
.rel-link:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.rel-link b { color: var(--accent); font-weight: 800; margin-right: 5px; }

/* narrow screens: one pane at a time — the list, or the article with a way back */
@media (max-width: 860px) {
  .split { display: block; height: auto; border-bottom: 0; }
  .list-pane { border-right: 0; }
  .list-search { position: sticky; top: var(--head-h, 99px); z-index: 3; }
  .list-scroll { overflow: visible; }
  .group-head { top: calc(var(--head-h, 99px) + var(--search-h, 60px)); }
  .row { scroll-margin-top: calc(var(--head-h, 99px) + var(--search-h, 60px) + 36px); }
  .group { scroll-margin-top: calc(var(--head-h, 99px) + var(--search-h, 60px)); }
  .read-pane { display: none; padding: 18px var(--gutter) 40px; overflow: visible; }
  .split.reading .list-pane { display: none; }
  .split.reading .read-pane { display: block; }
  .back-btn {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 18px;
    font: 600 14px/1 var(--sans); color: var(--accent); background: var(--bg-raised);
    border: 1px solid var(--line-strong); border-radius: 7px; padding: 9px 13px; cursor: pointer;
  }
  .read-n { font-size: 40px; }
  .read-title { font-size: 23px; }
}

/* official text, also used by history entries */
.art-text {
  font-family: var(--sans); font-size: 15.5px; line-height: 1.7; color: var(--text-soft);
  background: var(--bg-sunk); border-left: 3px solid var(--line-strong);
  padding: 14px 16px; border-radius: 0 var(--radius) var(--radius) 0; margin: 0;
}

/* badges */
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.badge {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 3px; white-space: nowrap;
}
.b-amend { background: var(--ink-soft); color: var(--ink); }
.b-rights { background: var(--green-soft); color: var(--green); }
.rec-rights { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; font-size: 13.5px; color: var(--text-faint); margin: 10px 0 0; }
.b-entrench { background: var(--gold-soft); color: var(--gold); }
.b-repeal { background: var(--bg-sunk); color: var(--text-faint); }

/* ---------- timeline ---------- */

.timeline { position: relative; padding-left: 34px; margin: 0; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line); border-radius: 2px;
}
.tl-item { position: relative; padding-bottom: 26px; }
.tl-item::before {
  content: ""; position: absolute; left: -30px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-strong);
}
.tl-item.major::before { background: var(--accent); border-color: var(--accent); }
.tl-item.pending::before { background: var(--bg); border-color: var(--gold); border-style: dashed; }
.tl-num {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700; color: var(--accent);
  letter-spacing: .14em; text-transform: uppercase;
}
.tl-item h3 { font-size: 17px; letter-spacing: -.012em; margin: 3px 0 4px; }
.tl-date { font-size: 13.5px; color: var(--text-faint); margin-bottom: 8px; }
.tl-what { font-size: 15px; color: var(--text-soft); margin: 0; max-width: 68ch; }
.tl-tag {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  background: var(--green-soft); color: var(--green);
  padding: 3px 8px; border-radius: 3px; margin-top: 9px;
}
.tl-item.notenacted { opacity: .6; }

/* history timeline: eras, notes, cross-links, cited documents */
.era { margin-top: 40px; }
.era .timeline { list-style: none; }
.era-head { padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); margin-bottom: 22px; }
.era-head h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin: 4px 0 0; }
.tl-note { font-size: 13.5px; color: var(--text-faint); margin: 8px 0 0; max-width: 68ch; }
.tl-item .art-text { margin-top: 12px; }
.tl-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; margin: 12px 0 0; }
.tl-docs { margin-top: 12px; }
.tl-docs :is(h4, h5) {
  font-family: var(--sans); font-size: 10px; font-weight: 700; line-height: 1.6; letter-spacing: .15em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 4px;
}
.tl-docs ul { margin: 0; padding-left: 18px; font-size: 14px; }
.tl-docs a { overflow-wrap: anywhere; }

/* ---------- callout ---------- */

.callout {
  border-left: 3px solid var(--accent); background: var(--bg-raised);
  padding: 11px 14px; border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 10px;
}
.callout :is(h2, h3, h4) { font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: 0; margin-bottom: 5px; }
.callout p { font-size: 14px; color: var(--text-soft); margin: 0; }

/* ---------- table ---------- */

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--bg-raised); }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--bg-sunk); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
tr:last-child td { border-bottom: none; }

/* ---------- results / empty ---------- */

.count { font-size: 13.5px; color: var(--text-faint); margin: 0 0 18px; }
.empty { text-align: center; padding: 56px 20px; color: var(--text-faint); }
.empty h3, .empty .h3-size { font-size: 19px; color: var(--text); margin-bottom: 7px; }
mark { background: var(--gold-soft); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ---------- footer ---------- */

/* compact: each link group is one line (label, then its links side by side); the disclaimer keeps
   every word, with each lead-in running into its sentence */
.site-foot { border-top: 1px solid var(--line); background: var(--bg-raised); padding: 12px 0 14px; margin-top: 18px; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 4px 36px; margin-bottom: 10px; }
.foot-grid > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.site-foot :is(h2, h4) { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); margin: 0; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 14px; }
.site-foot li { margin: 0; font-size: 13.5px; line-height: 1.6; }
.site-foot .fine { font-size: 11.5px; color: var(--text-faint); border-top: 1px solid var(--line); padding-top: 10px; margin: 0; max-width: 110ch; }
.site-foot .foot-note { max-width: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; }
@media (max-width: 1080px) { .site-foot .foot-note { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phones: the links run as one wrapped list; the group labels stay for screen readers */
@media (max-width: 700px) {
  .site-foot .foot-note { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .site-foot .fine { font-size: 11px; }
  .foot-grid { gap: 0 14px; margin-bottom: 8px; }
  .foot-grid > div { display: contents; }
  .site-foot :is(h2, h4) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-foot li { font-size: 13px; line-height: 1.55; }
  .site-foot ul { display: contents; }
}
.foot-note p { margin: 0; line-height: 1.4; }
.foot-note strong { color: var(--text-soft); margin-right: 3px; }

@media print {
  .site-head, .list-pane, .back-btn, .site-foot, .searchbox, .btn-row, .theme-btn { display: none; }
  .split { display: block; height: auto; }
  .read-pane { overflow: visible; }
}


/* ============================================================
   Dense layout (design-reference/e-dense-reference.html)
   Full-width pages, compact page heads, multi-column lists.
   ============================================================ */

/* compact page head: title, one row of description, key counts */
.phead-band { background: var(--bg-raised); border-bottom: 1px solid var(--line-strong); }
.phead {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 28px;
  padding: 16px 24px 14px;
}
.phead .eyebrow { margin: 0 0 7px; }
.phead h1 { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; margin: 0; }
.phead-lede { flex: 1 1 380px; font-size: 14px; line-height: 1.5; color: var(--text-soft); margin: 0; max-width: 78ch; }
.phead-count {
  margin: 0 0 2px auto; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
}
.phead-count:empty { display: none; }
.phead .btn-row { margin-left: auto; }
.phead .btn { padding: 8px 14px; font-size: 13.5px; }
.home-search { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.home-search .searchbox { flex: 1 1 420px; max-width: 720px; margin: 0; }
.home-search .search-note { margin: 0; }

/* rows of side-by-side blocks */
.row-2, .row-3 { display: grid; gap: 12px; align-items: start; }
.row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row-main-side { display: grid; gap: 12px 18px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
@media (max-width: 1080px) { .row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .row-main-side { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .row-2, .row-3 { grid-template-columns: minmax(0, 1fr); } }
.row-2 .callout, .row-3 .callout { margin: 0; height: 100%; }
.row-main-side.spaced-above { margin-top: 14px; }
.row-2.spaced-below { margin-bottom: 16px; }

/* multi-column lists: 3 columns above 1080px, 2 above 700px, 1 below */
.cols { column-count: 3; column-gap: 12px; }
@media (max-width: 1080px) { .cols { column-count: 2; } }
@media (max-width: 700px) { .cols { column-count: 1; } }
.cols > * { break-inside: avoid; }

/* timelines laid out in columns: groups become headings, items become compact cards */
.cols .era, .cols .timeline { display: contents; }
.cols .timeline::before, .cols .tl-item::before { display: none; }
.cols .era-head {
  break-inside: avoid; break-after: avoid; padding: 2px 0 6px; margin: 4px 0 8px;
  border-bottom: 1px solid var(--line-strong);
}
.cols .era-head .ch-num { margin: 0; }
.cols .era-head h2 { font-size: 16px; margin: 2px 0 0; }
.cols .tl-item {
  break-inside: avoid; background: var(--bg-raised); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 7px; padding: 10px 13px; margin: 0 0 8px;
}
.cols .tl-item h3 { font-size: 15px; line-height: 1.25; margin: 2px 0 2px; }
.cols .tl-date { font-size: 12.5px; margin: 0 0 4px; }
.cols .tl-what { font-size: 14px; line-height: 1.45; }
.cols .tl-note { font-size: 12.5px; margin-top: 5px; }
.cols .tl-links { margin-top: 6px; gap: 4px 12px; font-size: 13px; }
.cols .tl-docs { margin-top: 6px; }
.cols .tl-docs ul { font-size: 13px; }
.cols .rec-rights { margin-top: 6px; font-size: 12.5px; }

/* amendments: dense cards, coloured by category */
.am {
  background: var(--bg-raised); border: 1px solid var(--line); border-left: 3px solid var(--cat-4);
  border-radius: 7px; padding: 8px 12px 9px; margin: 0 0 8px;
}
.am.cat-presidency { border-left-color: var(--cat-1); }
.am.cat-independence { border-left-color: var(--cat-2); }
.am.cat-elections { border-left-color: var(--cat-3); }
.am-h { display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px; }
.am-n { font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: -.03em; color: var(--accent); flex: none; }
.am-mark {
  flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--text-faint);
  align-self: center;
}
.am.major .am-mark { background: var(--text-soft); border-color: var(--text-soft); }
.am-t { font-size: 13.5px; font-weight: 700; letter-spacing: -.005em; }
.am-tag { font-size: 11px; font-weight: 600; color: var(--text-faint); }
.am-d { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--text-faint); white-space: nowrap; flex: none; }
.am-w { font-size: 14px; line-height: 1.42; color: var(--text-soft); margin: 0; }
.am-arts { font-size: 12.5px; line-height: 1.55; color: var(--text-faint); margin: 5px 0 0; padding-top: 5px; border-top: 1px solid var(--line); }
.am-arts-n { font-weight: 600; color: var(--text-soft); margin-right: 2px; }
.am-arts a { font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 3px; }
.am-arts-gap { font-style: italic; }
.am.notenacted, .am.pending { border-style: dashed; }
.am.notenacted { opacity: .62; }
.list-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 16px 0 10px; }
.list-head.flush-top { margin-top: 0; }
.list-head h2 { font-size: 17px; margin: 0; }
.list-head p { font-size: 13.5px; color: var(--text-faint); margin: 0; }

/* the amendments chart */
.chart {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 9px;
  padding: 12px 16px 6px; margin: 0;
}
.chart-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 2px; }
.chart-h h2 { font-size: 15px; letter-spacing: -.01em; margin: 0; }
.chart-h p { font-size: 12.5px; color: var(--text-faint); margin: 0; }
.legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 13px; }
.lg-i { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--text-soft); }
.sw { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sw.cat-presidency { background: var(--cat-1); } .sw.cat-independence { background: var(--cat-2); }
.sw.cat-elections { background: var(--cat-3); } .sw.cat-other { background: var(--cat-4); }
.sw.sw-dashed { background: none; border: 1.5px dashed var(--text-faint); }
.chart svg { display: block; width: 100%; overflow: visible; }
.ax-line { stroke: var(--line-strong); stroke-width: 2; }
.ax-text { fill: var(--text-faint); font-family: var(--sans); font-size: 12px; font-weight: 500; }
.stem { stroke: var(--line); stroke-width: 2; }
.dot circle { stroke: var(--bg-raised); stroke-width: 2; }
.dot.cat-presidency circle { fill: var(--cat-1); } .dot.cat-independence circle { fill: var(--cat-2); }
.dot.cat-elections circle { fill: var(--cat-3); } .dot.cat-other circle { fill: var(--cat-4); }
.dot text { fill: var(--bg-raised); font-family: var(--display); font-size: 9.5px; font-weight: 700; pointer-events: none; }
.dot.undated circle { fill: var(--bg-raised); stroke-dasharray: 2 2; }
.dot.undated.cat-other circle { stroke: var(--cat-4); }
.dot.undated.cat-other text { fill: var(--cat-4); }
.dot { cursor: pointer; }
.dot:focus { outline: none; }
.dot:focus circle, .dot:hover circle { stroke: var(--text); }
.dot-label { fill: var(--text-soft); font-family: var(--sans); font-size: 11px; font-weight: 600; }
.pend-sep { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 3; }
.tip {
  position: fixed; z-index: 60; pointer-events: none; max-width: 280px;
  background: var(--text); color: var(--bg-raised); font-size: 12.5px; line-height: 1.4;
  padding: 8px 10px; border-radius: 5px; opacity: 0; transition: opacity .1s;
}
.tip.on { opacity: 1; }
.tip b { display: block; font-weight: 700; margin-bottom: 2px; }
.tip .tip-d { opacity: .8; }

/* about: prose in two columns, each at a readable measure */
.about-cols { column-count: 2; column-gap: 40px; }
@media (max-width: 900px) { .about-cols { column-count: 1; } }
.about-sec { break-inside: avoid; max-width: 70ch; margin: 0 0 18px; }
.about-sec h2 { font-size: 18px; margin: 0 0 8px; }
.about-sec p { font-size: 14.5px; }
.about-wide { column-span: all; break-inside: avoid; margin: 4px 0 18px; }
.about-wide h2 { font-size: 18px; margin: 0 0 8px; }

/* dense tuning */
.am-h { flex-wrap: wrap; row-gap: 0; }
.am-w { line-height: 1.4; }
.am { padding: 7px 11px 8px; margin-bottom: 7px; }
.cols .tl-item { padding: 9px 12px; margin-bottom: 7px; }
.cols .tl-docs ul { padding-left: 16px; }
.cols .tl-what { line-height: 1.42; }
/* the current page stays white-on-blue, whatever kind of nav link it is */
.nav a.nav-section[aria-current="page"] { color: var(--on-accent); }
/* chart furniture never intercepts the pointer, so stacked dots stay hoverable */
.stem, .ax-line, .ax-text, .pend-sep, .dot-label { pointer-events: none; }

/* ---------- holders of office (history.html) ---------- */
.lane-label { fill: var(--text-soft); font-family: var(--sans); font-size: 12px; font-weight: 600; }
.lane-bg { fill: var(--bg-sunk); }
.term rect { stroke: var(--bg-raised); stroke-width: 1; }
.term.lane-1 rect, .lane-sw-1 { fill: var(--cat-1); background: var(--cat-1); }
.term.lane-2 rect, .lane-sw-2 { fill: var(--cat-2); background: var(--cat-2); }
.term.lane-3 rect, .lane-sw-3 { fill: var(--cat-3); background: var(--cat-3); }
.term.lane-4 rect, .lane-sw-4 { fill: var(--cat-4); background: var(--cat-4); }
.term.alt rect { fill-opacity: .72; }
.term text { fill: var(--bg-raised); font-family: var(--sans); font-size: 11px; font-weight: 600; pointer-events: none; }
.term { cursor: default; }
.term:focus { outline: none; }
.term:focus rect, .term:hover rect { stroke: var(--text); stroke-width: 2; }
.lane-label, .lane-bg { pointer-events: none; }
.office-note { font-size: 13px; color: var(--text-faint); margin: 8px 0 12px; }
.office-note p { margin: 0 0 4px; }
.office-cols { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1080px) { .office-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .office-cols { grid-template-columns: minmax(0, 1fr); } }
.office-list { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; }
.office-list h3 { display: flex; align-items: center; gap: 7px; font-size: 15px; margin: 0 0 6px; }
.office-list ol { list-style: none; margin: 0; padding: 0; }
.office-list li { padding: 5px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.35; }
.office-list li.current .ol-name::after { content: " \2022 in office"; color: var(--accent); font-size: 12px; font-weight: 600; }
.ol-name { font-weight: 600; }
.ol-role { font-size: 12px; color: var(--text-faint); }
.ol-dates { display: block; font-size: 12.5px; color: var(--text-soft); }
.ol-note { display: block; font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.ol-src { font-size: 12px; color: var(--text-faint); margin: 8px 0 0; }

/* ---------- reading pane: how an article has changed ---------- */
.read-hist { border-top: 1px solid var(--line-strong); padding-top: 14px; margin: 0 0 22px; }
.hist-steps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hist-steps li {
  display: flex; align-items: baseline; gap: 7px; font-size: 13px; font-weight: 600;
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: 5px; padding: 6px 10px;
}
.hist-steps .step-d { font-weight: 500; color: var(--text-faint); font-size: 12px; }
.ver { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 6px; margin: 0 0 8px; }
.ver > summary {
  cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 10px 14px; font-size: 14px;
}
.ver > summary::-webkit-details-marker { display: none; }
.ver > summary::before { content: "\25B8"; color: var(--accent); font-size: 12px; }
.ver[open] > summary::before { content: "\25BE"; }
.ver-l { font-weight: 700; }
.ver-s { color: var(--text-faint); font-size: 13px; }
.ver-text {
  margin: 0 14px 10px; padding: 12px 16px; font-size: 15px; line-height: 1.7; color: var(--text-soft);
  background: var(--bg-sunk); border-left: 3px dashed var(--line-strong); border-radius: 0 6px 6px 0;
}
.ver-note { margin: 0 14px 12px; font-size: 13px; color: var(--text-faint); }
.ver-none { font-size: 13.5px; color: var(--text-faint); margin: 0; }

/* ============================================================
   Know Your History: shared section head, section buttons,
   view toggle, and the visual timelines
   ============================================================ */

/* the section head freezes under the site header; the content below scrolls */
.phead-sticky { position: sticky; top: var(--head-h, 52px); z-index: 40; box-shadow: 0 1px 0 var(--line-strong); }
.phead-stack { align-items: flex-end; padding-bottom: 10px; }
.phead-main { flex: 1 1 520px; min-width: 0; }
.phead-main h1 { margin-bottom: 6px; }
.phead-main .phead-lede { max-width: 86ch; }
.sec-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; align-self: flex-end; }
.sec-tabs a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 6px;
  font-size: 13.5px; font-weight: 700; color: var(--text); background: var(--bg-raised);
  border: 1px solid var(--line-strong); white-space: nowrap;
}
.sec-tabs a:hover { border-color: var(--accent); text-decoration: none; background: var(--row-hover); }
.sec-tabs a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tab-n {
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px;
  background: var(--accent-soft); color: var(--accent);
}
.sec-tabs a[aria-current="page"] .tab-n { background: var(--bg-raised); color: var(--accent); }
.sec-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  padding: 7px 24px 8px; border-top: 1px solid var(--line);
}
.sec-bar .phead-count { margin: 0; }
.view-toggle {
  margin-left: auto; display: inline-flex; padding: 2px; gap: 2px;
  background: var(--bg-sunk); border: 1px solid var(--line-strong); border-radius: 7px;
}
.view-toggle button {
  font: 600 12.5px/1 var(--sans); color: var(--text-soft); background: none; border: 0;
  padding: 7px 12px; border-radius: 5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.view-toggle button[aria-pressed="true"] { background: var(--bg-raised); color: var(--accent); box-shadow: 0 1px 2px rgba(12,26,46,.12); }
.view-toggle svg { flex: none; }
@media (max-width: 700px) {
  /* on phones the frozen head keeps only the title, buttons and toggle, so it does not fill the screen */
  .phead-sticky .eyebrow, .phead-sticky .phead-lede { display: none; }
  .phead-sticky .phead-main h1 { font-size: 19px; margin: 0; }
  .phead-stack { padding: 10px var(--gutter) 8px; gap: 8px; }
  .sec-tabs { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sec-tabs a { padding: 7px 11px; font-size: 12.5px; }
  .sec-bar { padding: 6px var(--gutter); }
}

/* views: one container switches between timeline and expanded */
[data-view="timeline"] .view-expanded,
[data-view="expanded"] .view-timeline { display: none; }

/* ---------- constitutional timeline: a centre spine, entries either side ---------- */
.htl { position: relative; padding: 6px 0 10px; }
.htl::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px;
  background: linear-gradient(var(--accent-soft), var(--accent) 12%, var(--accent) 88%, var(--accent-soft));
  border-radius: 3px;
}
.htl-era { position: relative; display: flex; justify-content: center; margin: 18px 0 14px; }
.htl-era:first-child { margin-top: 4px; }
.htl-era span {
  position: relative; z-index: 1; background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; box-shadow: 0 0 0 5px var(--bg);
}
.htl-era b { font-weight: 800; letter-spacing: .04em; margin-right: 8px; opacity: .85; }
.htl-item { position: relative; width: 50%; padding: 0 34px 16px 0; }
.htl-item.right { margin-left: 50%; padding: 0 0 16px 34px; }
.htl-item::before {
  content: ""; position: absolute; top: 18px; right: -9px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg-raised); border: 4px solid var(--accent); box-shadow: 0 0 0 4px var(--bg); z-index: 1;
}
.htl-item.right::before { right: auto; left: -9px; }
.htl-card {
  display: block; position: relative; color: inherit; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 14px;
  box-shadow: 0 1px 2px rgba(12,26,46,.05), 0 6px 18px rgba(12,26,46,.06);
  transition: border-color .15s ease, transform .15s ease;
}
.htl-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.htl-card::after {
  content: ""; position: absolute; top: 22px; right: -8px; width: 14px; height: 14px; transform: rotate(45deg);
  background: var(--bg-raised); border-top: 1px solid var(--line); border-right: 1px solid var(--line);
}
.htl-item.right .htl-card::after { right: auto; left: -8px; border: 0; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.htl-year {
  font-family: var(--display); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.04em;
  color: var(--accent); margin: 0 0 4px;
}
.htl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; }
.htl-date { font-size: 13px; color: var(--text-faint); }
.htl-kind {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); padding: 3px 7px; border-radius: 3px;
}
.htl-card h3 { font-size: 17px; line-height: 1.25; margin: 0 0 6px; }
.htl-what {
  font-size: 14px; line-height: 1.5; color: var(--text-soft); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.htl-more { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
@media (max-width: 800px) {
  .htl::before { left: 12px; }
  .htl-era { justify-content: flex-start; }
  .htl-item, .htl-item.right { width: auto; margin-left: 0; padding: 0 0 14px 38px; }
  .htl-item::before, .htl-item.right::before { left: 4px; right: auto; }
  .htl-card::after, .htl-item.right .htl-card::after { display: none; }
}

/* ---------- office chart: era bands, gridlines, today marker ---------- */
/* period bands: the era ramp as a light tint */
.era-band { fill-opacity: .1; }
.era-label { fill: var(--text-faint); font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.grid-line { stroke: var(--line); stroke-width: 1; }
.today-line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.today-label { fill: var(--accent); font-family: var(--sans); font-size: 11px; font-weight: 700; }
.era-band, .era-label, .grid-line, .today-line, .today-label { pointer-events: none; }
.term.current rect { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 2; }
.office-chart { padding: 14px 16px 10px; }
.office-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; font-size: 12px; color: var(--text-soft); }
.office-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- pending page ---------- */
.pend-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .pend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .pend-grid { grid-template-columns: minmax(0, 1fr); } }
.pend { background: var(--bg-raised); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px; padding: 12px 14px; }
.pend.ready { border-left-color: var(--green); }
.pend :is(h2, h3) { font-size: 16px; margin: 4px 0 8px; }
.pend-state {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 3px; background: var(--gold-soft); color: var(--gold);
}
.pend.ready .pend-state { background: var(--green-soft); color: var(--green); }
.pend dl { margin: 0; }
.pend dt { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin: 8px 0 2px; }
.pend dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-soft); }
.pend-links { margin: 8px 0 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* phones: the frozen head keeps the title, the section buttons and an icon-only view toggle */
@media (max-width: 700px) {
  .phead-sticky .phead-count { display: none; }
  .phead-sticky .sec-bar { position: absolute; top: 8px; right: var(--gutter); padding: 0; border: 0; }
  .phead-sticky .phead-main h1 { padding-right: 84px; }
  .view-toggle button { padding: 6px 8px; }
  .vt-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* ============================================================
   History: filters, era tones, ribbon, impact timeline,
   office chart zoom + photos
   ============================================================ */

/* filter chips */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 14px; }
.fl-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fl-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin-right: 2px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--sans);
  color: var(--text-soft); background: var(--bg-raised); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 7px 12px; cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip[aria-pressed="false"] .sw { opacity: .45; }

/* era tones (the validated categorical palette) */
.tone-sw-1, .era-band.e1 { background: var(--era-1); fill: var(--era-1); } .tone-sw-2, .era-band.e2 { background: var(--era-2); fill: var(--era-2); }
.tone-sw-3, .era-band.e3 { background: var(--era-3); fill: var(--era-3); } .tone-sw-4, .era-band.e4 { background: var(--era-4); fill: var(--era-4); }
.tone-1 { --tone: var(--era-1); } .tone-2 { --tone: var(--era-2); }
.tone-3 { --tone: var(--era-3); } .tone-4 { --tone: var(--era-4); }
/* a swatch stays visible on a pressed (blue) chip */
.chip .sw { box-shadow: 0 0 0 1.5px var(--bg-raised); }

/* overview ribbon */
.rb-wrap { padding: 8px 12px 4px; margin: 0 0 18px; }
.ribbon { display: block; width: 100%; overflow: visible; }
.rb-band.tone-1 { fill: var(--era-1); } .rb-band.tone-2 { fill: var(--era-2); }
.rb-band.tone-3 { fill: var(--era-3); } .rb-band.tone-4 { fill: var(--era-4); }
.rb-dot { cursor: pointer; }
.rb-dot line { stroke: var(--text-faint); stroke-width: 1.2; }
.rb-dot circle { fill: var(--bg-raised); stroke: var(--text); stroke-width: 2.5; }
.rb-dot text { fill: var(--text); font: 800 12px var(--display); letter-spacing: -.02em; }
.rb-dot:hover circle, .rb-dot:focus circle { fill: var(--accent); stroke: var(--accent); }
.rb-dot:focus { outline: none; }
.rb-dot.off { opacity: .22; cursor: default; }
.rb-tick { fill: var(--text-faint); font: 500 11px var(--sans); }

/* impact timeline: era tone on the spine, nodes, card edges */
.htl::before { width: 4px; margin-left: -2px; background: linear-gradient(var(--era-1), var(--era-2) 38%, var(--era-3) 64%, var(--era-4)); }
.htl-era span { background: var(--bg-raised); color: var(--text); border: 1px solid var(--line-strong); border-left: 10px solid var(--tone, var(--accent)); font-size: 12px; padding: 8px 16px 8px 12px; box-shadow: 0 0 0 6px var(--bg), 0 6px 18px rgba(12,26,46,.12); }
.htl-era i { font-style: normal; font-weight: 600; letter-spacing: .04em; text-transform: none; margin-left: 10px; opacity: .85; }
.htl-item::before { border-color: var(--tone, var(--accent)); width: 20px; height: 20px; right: -10px; }
.htl-item.right::before { left: -10px; }
.htl-item.k-statute::before, .htl-item.k-amendment::before { border-color: var(--tone, var(--accent)); }
.htl-card { border-top: 4px solid var(--tone, var(--accent)); }
.htl-year { color: var(--accent); font-size: 40px; }
.htl-kind { color: var(--accent); background: var(--accent-soft); }
.htl-more { color: var(--accent); }
/* the year, set large in the empty half beside each card */
.htl-ghost {
  position: absolute; top: -6px; left: calc(100% + 40px); font-family: var(--display); font-weight: 800;
  font-size: clamp(56px, 7vw, 104px); line-height: 1; letter-spacing: -.05em; white-space: nowrap;
  color: var(--tone, var(--accent)); opacity: .12; pointer-events: none; user-select: none;
}
.htl-item.right .htl-ghost { left: auto; right: calc(100% + 40px); }
/* time elapsed between entries, on the spine */
.htl-gap { position: relative; display: flex; justify-content: center; margin: -4px 0 12px; }
.htl-gap span {
  position: relative; z-index: 1; font-size: 11.5px; font-weight: 700; color: var(--text-soft);
  background: var(--bg); border: 1px dashed var(--line-strong); border-radius: 999px; padding: 3px 10px;
}
/* scroll reveal */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.rv.in { opacity: 1; transform: none; }
@media (max-width: 800px) {
  .htl-ghost { display: none; }
  .htl-gap { justify-content: flex-start; padding-left: 26px; }
}
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }
/* on paper, entries below the fold never get .in: show every one, as reduced motion does */
@media print { .rv { opacity: 1; transform: none; transition: none; } }

/* office chart: fit / wide, fixed lane labels, sideways scroll */
.chart-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 8px; }
.chart-top .office-legend { margin: 0; flex: 1 1 320px; }
.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--bg-sunk); border: 1px solid var(--line-strong); border-radius: 7px; }
.seg button { font: 600 12.5px/1 var(--sans); color: var(--text-soft); background: none; border: 0; padding: 7px 12px; border-radius: 5px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--bg-raised); color: var(--accent); box-shadow: 0 1px 2px rgba(12,26,46,.12); }
.office-frame { display: grid; grid-template-columns: 124px minmax(0, 1fr); }
.office-lanes { position: relative; }
.lane-name {
  position: absolute; left: 0; right: 8px; display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--text-soft); line-height: 1.15;
}
.office-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.office-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* drawn at its own width: Fit matches the box, Wide is wider and scrolls */
.chart .office-scroll svg { display: block; overflow: visible; width: auto; max-width: none; }
@media (max-width: 560px) {
  .office-frame { grid-template-columns: 78px minmax(0, 1fr); }
  .lane-name { font-size: 11px; }
  .lane-name .sw { display: none; }
}

/* expanded view: photos */
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; }
.photo-note { font-size: 12.5px; color: var(--text-faint); }
.office-list li { display: flex; gap: 10px; align-items: flex-start; }
.ol-text { min-width: 0; }
.ol-photo {
  flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--bg-sunk); border: 2px solid var(--line); margin-top: 2px;
}
.ol-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.ol-initials { font: 800 15px var(--display); letter-spacing: -.02em; color: var(--text-faint); }
.no-photos .ol-photo { display: none; }
.ol-count { font-size: 11px; font-weight: 700; color: var(--text-faint); background: var(--bg-sunk); padding: 1px 6px; border-radius: 3px; }
.ol-none { color: var(--text-faint); font-size: 13px; }

/* Wide view: names that do not fit inside a bar sit beneath it on a leader line */
.term text.term-out { fill: var(--text); font-family: var(--sans); font-size: 11px; font-weight: 600; pointer-events: none; }
.term-lead { stroke: var(--text-faint); stroke-width: 1; pointer-events: none; }

/* office chart: terms cut by the chosen period, and the labelled ends of the axis */
.term-cut { fill: none; stroke: var(--bg-raised); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.term.cut-l rect, .term.cut-r rect { stroke-dasharray: none; }
.ax-edge { font-weight: 700; fill: var(--text-soft); }
.lane-empty { fill: var(--text-faint); font-family: var(--sans); font-size: 12px; font-style: italic; pointer-events: none; }


/* ============================================================
   Direction B: navy chrome and banded sections
   The site header and every page header sit on --navy; sections
   alternate between two surfaces so the page has a rhythm.
   ============================================================ */

/* site header */
.site-head { background: var(--navy); border-bottom: 1px solid var(--navy-deep); }
.brand, .brand:hover { color: var(--on-navy); }
.brand-name { color: var(--on-navy); }
.brand-name em { color: var(--on-navy-faint); }
.nav a { color: var(--on-navy-soft); }
.nav a:hover { background: color-mix(in srgb, var(--on-navy) 8%, transparent); color: var(--on-navy); }
.nav a.nav-section { color: var(--on-navy); }
.nav a[aria-current="page"],
.nav a[aria-current="page"]:hover,
.nav a.nav-section[aria-current="page"] { background: color-mix(in srgb, var(--on-navy) 14%, transparent); color: var(--on-navy); }
.nav-group { border-color: var(--navy-line); }
.nav-about { border-color: var(--navy-line); }
.nav-label { color: var(--on-navy-faint); }
.head-stat { color: var(--on-navy-faint); }
.theme-btn { border-color: var(--navy-line); color: var(--on-navy-soft); }
.theme-btn:hover { background: color-mix(in srgb, var(--on-navy) 8%, transparent); color: var(--on-navy); }
.site-head :focus-visible, .phead-band :focus-visible { outline-color: var(--on-navy); }

/* page headers: flat navy; the home hero (the one with buttons) a navy-to-deep gradient */
.phead-band { background: var(--navy); border-bottom: 1px solid var(--navy-deep); color: var(--on-navy); }
.phead-band:has(.btn-row) { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); }
.phead-band h1 { color: var(--on-navy); }
.phead-band .phead-lede { color: var(--on-navy-soft); }
.phead-band .eyebrow { background: color-mix(in srgb, var(--on-navy) 12%, transparent); color: var(--on-navy-soft); }
.phead-band .phead-count { color: var(--on-navy-faint); }
.phead-band .btn-primary { background: var(--on-navy); color: var(--navy); }
.phead-band .btn-primary:hover { background: var(--on-navy-soft); }
.phead-band .btn-ghost { background: transparent; color: var(--on-navy); border-color: color-mix(in srgb, var(--on-navy) 35%, transparent); }
.phead-band .btn-ghost:hover { background: color-mix(in srgb, var(--on-navy) 8%, transparent); }
/* the History section head: buttons, counts and view toggle on navy */
.phead-sticky { box-shadow: 0 1px 0 var(--navy-deep); }
.phead-band .sec-bar { border-top-color: var(--navy-line); }
.phead-band .sec-tabs a { background: color-mix(in srgb, var(--on-navy) 8%, transparent); border-color: var(--navy-line); color: var(--on-navy); }
.phead-band .sec-tabs a:hover { border-color: var(--on-navy-faint); background: color-mix(in srgb, var(--on-navy) 12%, transparent); }
.phead-band .sec-tabs a[aria-current="page"] { background: var(--on-navy); border-color: var(--on-navy); color: var(--navy); }
.phead-band .tab-n { background: color-mix(in srgb, var(--on-navy) 14%, transparent); color: var(--on-navy); }
.phead-band .sec-tabs a[aria-current="page"] .tab-n { background: var(--navy); color: var(--on-navy); }
.phead-band .view-toggle { background: var(--navy-deep); border-color: var(--navy-line); }
.phead-band .view-toggle button { color: var(--on-navy-soft); }
.phead-band .view-toggle button[aria-pressed="true"] { background: var(--on-navy); color: var(--navy); box-shadow: none; }

/* the rhythm: consecutive sections alternate between two surfaces */
.band-a { background: var(--bg-raised); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-b { background: var(--bg); }
/* raised cards sit on the page colour inside a raised band, so they still read as cards */
.band-a .card { background: var(--bg); }
.band-a .coll.planned { background: transparent; }

/* section heads: a navy rule and navy heading (navy as ink: its dark value stays readable) */
.section-head { padding-bottom: 9px; border-bottom: 2px solid var(--accent-deep); margin-bottom: 14px; }
.section-head h2 { color: var(--accent-deep); }

/* ============================================================
   The records page (not published; kept for its return): each decade is a full-width row; its entries sit
   in a grid beneath it (CSS multi-column scattered the headings)
   ============================================================ */
.rec-grid .era { margin: 0 0 18px; }
.rec-grid .era:last-child { margin-bottom: 0; }
.rec-grid .era-head { padding: 2px 0 6px; margin: 0 0 10px; border-bottom: 1px solid var(--line-strong); }
.rec-grid .era-head h2 { font-size: 16px; margin: 2px 0 0; }
.rec-grid .timeline {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
}
@media (max-width: 1080px) { .rec-grid .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .rec-grid .timeline { grid-template-columns: minmax(0, 1fr); } }
.rec-grid .timeline::before, .rec-grid .tl-item::before { display: none; }
.rec-grid .tl-item {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 7px; padding: 9px 12px; margin: 0;
}
.rec-grid .tl-item h3 { font-size: 15px; line-height: 1.25; margin: 2px 0 2px; }
.rec-grid .tl-date { font-size: 12.5px; margin: 0 0 4px; }
.rec-grid .tl-what { font-size: 14px; line-height: 1.42; }
.rec-grid .tl-note { font-size: 12.5px; margin-top: 5px; }
.rec-grid .tl-links { margin-top: 6px; gap: 4px 12px; font-size: 13px; }
.rec-grid .tl-docs { margin-top: 6px; }
.rec-grid .tl-docs ul { font-size: 13px; padding-left: 16px; }
.rec-grid .rec-rights { margin-top: 6px; font-size: 12.5px; }
/* era swatches name a period, they are not on/off switches: keep them at full strength */
.chip[aria-pressed="false"] .sw[class*="tone-sw"] { opacity: 1; }

/* Keep the History section head identical on all three pages:
   - reserve the scrollbar's width on every page, so a short page (no scrollbar) and a long
     one lay out at the same width and nothing shifts sideways between them;
   - reserve the view toggle's height, so the Pending page (which has no toggle) is not shorter. */
html { scrollbar-gutter: stable; }
@media (min-width: 701px) { .phead-sticky .sec-bar { min-height: 50px; } }

/* The button counts are filled in by script; reserve their width so the buttons do not grow after load */
.tab-n { display: inline-block; width: 2.4em; text-align: center; }

/* Until the two fonts are ready (a few ms), the header and page-header contents stay hidden
   while their navy bars show, so they appear once at their final size instead of redrawing.
   The class is set by a one-line script in each page's head; without JavaScript it is never set. */
.fonts-pending .head-in, .fonts-pending .phead-band .wrap { visibility: hidden; }

/* ---------- listen buttons (read aloud) ---------- */
.read-lbl-row { display: flex; align-items: center; gap: 10px; margin: 0 0 7px; }
.read-lbl-row .read-lbl { margin: 0; }
.listen {
  display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--sans);
  color: var(--accent); background: var(--bg-raised); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 4px 10px 4px 8px; cursor: pointer;
}
.listen:hover { border-color: var(--accent); background: var(--accent-soft); }
.listen.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.listen svg { flex: none; }
.ver-listen { margin: 0 14px 8px; }
.no-speech .listen { display: none; }
@media print { .listen { display: none; } }

/* ============================================================
   Home page (design-reference/home-b-index.html): the navy band
   carries the search and a fact strip; below it, the whole
   Constitution as an index, chapter by chapter.
   ============================================================ */

.home-mast {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 16px 48px; align-items: end;
  padding-top: 28px;
}
.home-mast .eyebrow { margin: 0 0 10px; }
.home-mast h1 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; margin: 0 0 12px; max-width: 22ch; }
.home-mast .phead-lede { font-size: 15px; max-width: 66ch; }
.home-mast-side .btn-row { gap: 9px; margin-bottom: 14px; }
.home-mast-side .btn { padding: 8px 14px; font-size: 13.5px; }
@media (max-width: 900px) { .home-mast { grid-template-columns: minmax(0, 1fr); } }

/* the search box on navy: a translucent surface, not white */
.phead-band .searchbox { margin: 0; }
.phead-band .searchbox input {
  background: color-mix(in srgb, var(--on-navy) 8%, transparent); border-color: var(--navy-line);
  color: var(--on-navy); font-size: 14px; padding: 11px 14px 11px 40px;
}
.phead-band .searchbox input::placeholder { color: var(--on-navy-faint); opacity: 1; }
.phead-band .searchbox input:focus { border-color: var(--on-navy-faint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--on-navy) 14%, transparent); }
.phead-band .searchbox svg { left: 13px; color: var(--on-navy-faint); }

/* fact strip along the foot of the band, figures split by 1px rules */
.home-facts { border-top: 1px solid var(--navy-line); margin-top: 26px; }
.home-facts-in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fact { padding: 15px 22px 17px; border-left: 1px solid var(--navy-line); }
.fact:first-child { padding-left: 0; border-left: 0; }
.fact b { display: block; font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--on-navy); margin-bottom: 6px; }
.fact span { display: block; font-size: 12.5px; line-height: 1.35; color: var(--on-navy-soft); }
@media (max-width: 900px) {
  .home-facts-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact, .fact:first-child { padding: 12px 14px 13px 0; border-left: 0; border-top: 1px solid var(--navy-line); }
  .fact:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--navy-line); }
  .fact:nth-child(-n+2) { border-top: 0; }
  .fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* the chapter index: every part a block that never splits across columns */
.chapter-index { column-count: 3; column-gap: 34px; }
@media (max-width: 1080px) { .chapter-index { column-count: 2; } }
@media (max-width: 700px) { .chapter-index { column-count: 1; } }
.part { break-inside: avoid; padding-bottom: 18px; }
.part-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; line-height: 1.3;
  color: var(--accent-deep); padding-bottom: 5px; margin: 0 0 4px; border-bottom: 2px solid var(--accent-deep);
}
.part-h em { font-style: normal; font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--text-faint); white-space: nowrap; }
.ch-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: baseline;
  padding: 6px 4px 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--text);
}
.ch-row:hover { text-decoration: none; background: var(--row-hover); }
.ch-row .rom { font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: -.01em; color: var(--accent); }
.ch-row .ttl { line-height: 1.3; }
.ch-row .rng { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-row.start, .ch-row.start:hover { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); padding-left: 9px; border-radius: 2px; }
.ch-row.start { grid-template-columns: 43px minmax(0, 1fr) auto; }
.ch-row.start .ttl { font-weight: 600; }
.ch-row.start .rom { color: var(--accent-deep); }
.start-key { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-soft); margin: 2px 0 0; }
.start-key i { display: block; width: 12px; height: 12px; border-radius: 2px; background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }

/* the Schedules, compact, closing the index */
.sched-tbl { background: none; font-size: 13px; }
.sched-tbl td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); }
.sched-tbl tr:last-child td { border-bottom: 1px solid var(--line); }
.sched-tbl td:first-child { white-space: nowrap; font-weight: 600; width: 1%; }
.sched-tbl td:last-child { color: var(--text-soft); }

/* the collections: a compact row list, not cards */
.coll-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
@media (max-width: 1080px) { .coll-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .coll-rows { grid-template-columns: minmax(0, 1fr); } }
.coll-row { display: block; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); color: var(--text); }
a.coll-row:hover { text-decoration: none; }
a.coll-row:hover h3 { color: var(--accent); }
.coll-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.coll-row h3 { font-size: 15px; margin: 0; }
.coll-row p { font-size: 13px; line-height: 1.45; color: var(--text-soft); margin: 3px 0 0; }
.coll-row .coll-state { flex: none; margin: 0; padding: 3px 7px; font-size: 10px; }
.coll-row.planned h3, .coll-row.planned p { color: var(--text-faint); }
.coll.next .coll-state { background: var(--accent-soft); color: var(--accent); }

/* questions, notes and sources: three columns of ruled rows */
.home-notes { gap: 12px 34px; }
.home-notes .callout { background: none; border-left-color: var(--accent-deep); border-radius: 0; padding: 2px 0 2px 13px; margin: 0 0 14px; }
.home-notes .callout :is(h3, h4) { font-size: 14px; margin-bottom: 4px; }
.home-notes .callout p { font-size: 13.5px; line-height: 1.5; }
.qlinks-list { display: block; }
.qlinks-list .qlink {
  justify-content: space-between; align-items: baseline; padding: 7px 0;
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 13.5px;
}
.qlinks-list .qlink:hover { background: none; color: var(--accent); }
.qlinks-list .qlink .art-tag, .qlinks-list .qlink:hover .art-tag { background: none; padding: 0; }

/* ============================================================
   Entrenchment map (entrenchment.html)
   Fill = amendments noted on the article in the Revised Edition 2023, four buckets on
   the navy map (none, 1, 2-3, 4-5), brighter for more. Outline = what it takes to
   amend: a gold ring where a referendum is also needed. Two encodings, two legends.
   ============================================================ */

/* the page head (design-reference/mock-3-entrenchment-mapfirst.html): the two levels on the left,
   the whole map on the right, both on the navy band; they stack at 900px and below */
.em-top { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 20px 40px; align-items: start; padding-top: 24px; }
@media (max-width: 900px) { .em-top { grid-template-columns: minmax(0, 1fr); padding-top: 18px; } }
.em-intro .eyebrow { margin: 0 0 10px; }
.em-intro h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; margin: 0 0 12px; }
.em-lead { font-size: 14.5px; line-height: 1.6; color: var(--on-navy-soft); margin: 0; }
.em-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 12px; }
.em-lvl { border: 1px solid var(--navy-line); border-radius: var(--radius); padding: 11px 13px; background: color-mix(in srgb, var(--on-navy) 5%, transparent); }
.em-lvl.gold { border-color: var(--gold); box-shadow: inset 3px 0 0 var(--gold); }
.em-lvl b { display: block; font-size: 13px; font-weight: 700; color: var(--on-navy); }
.em-lvl > span { display: block; font-size: 12px; line-height: 1.5; color: var(--on-navy-soft); margin-top: 3px; }
.em-lvl a { color: var(--on-navy); text-decoration: underline; text-decoration-color: var(--on-navy-faint); }
.em-intro .phead-count { margin: 0; }
.em-map { background: var(--navy-deep); border: 1px solid var(--navy-line); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 14px 16px 18px; min-width: 0; }

/* the key: the two encodings, stated separately */
.em-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--navy-line); }
@media (max-width: 700px) { .em-key { grid-template-columns: minmax(0, 1fr); } }
.em-lg-h { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-faint); margin: 0 0 6px; }
.em-key ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px 14px; }
.em-key li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--on-navy-soft); }
.em-key li b { font-weight: 600; color: var(--on-navy-faint); font-variant-numeric: tabular-nums; }
.em-lg-note { grid-column: 1 / -1; font-size: 12px; line-height: 1.5; color: var(--on-navy-faint); margin: 0; }
.em-lg-note em { color: var(--on-navy-soft); }
.em-lg-more { grid-column: 1 / -1; }
.em-key-pointer { display: none; }
.em-lg-more > summary { display: none; }
/* phones: the swatches on fewer rows, the explanation behind a disclosure (desktop is unchanged) */
@media (max-width: 620px) {
  .em-key { gap: 6px; margin-bottom: 10px; padding-bottom: 10px; }
  .em-key .em-lg-group { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 12px; }
  .em-lg-h { margin: 0; font-size: 9.5px; letter-spacing: .08em; }
  .em-map { padding: 10px 12px 14px; }
  /* the key follows the map on phones, with a one-line pointer to it above */
  .em-map { display: flex; flex-direction: column; }
  .em-key-pointer { display: block; order: 0; font-size: 12px; color: var(--on-navy-faint); margin: 0 0 8px; }
  .em-key-pointer a { color: var(--on-navy); text-decoration: underline; text-decoration-color: var(--on-navy-faint); }
  .em-grid { order: 1; }
  .em-key { order: 2; margin: 12px 0 0; padding: 10px 0 0; border-bottom: 0; border-top: 1px solid var(--navy-line); scroll-margin-top: calc(var(--head-h, 144px) + 8px); }
  .em-key ul { display: contents; }
  .em-key li { font-size: 11.5px; gap: 5px; }
  .em-key .em-sw { width: 16px; height: 12px; }
  .em-lg-more > summary {
    display: list-item; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--on-navy-soft);
  }
  .em-lg-more[open] > summary { margin-bottom: 4px; }
}

/* the map: part labels, then one row per chapter, label beside the cells (above them at 900px) */
.em-part { padding-bottom: 6px; }
.em-map .part-h { color: var(--on-navy-faint); border-bottom-color: var(--navy-line); border-bottom-width: 1px; font-size: 10px; margin: 6px 0 2px; padding-bottom: 3px; }
.em-map .part-h em { color: var(--on-navy-faint); }
.em-ch { display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: 3px 14px; align-items: start; padding: 3px 0; }
@media (max-width: 900px) { .em-ch { grid-template-columns: minmax(0, 1fr); padding: 4px 0; } }
.em-ch-l { font-size: 11.5px; line-height: 1.35; color: var(--on-navy-faint); text-align: right; padding-top: 4px; }
@media (max-width: 900px) { .em-ch-l { text-align: left; padding-top: 0; } }
.em-ch-l:hover { color: var(--on-navy); }
.em-ch-l .rom { font-family: var(--display); font-weight: 700; color: var(--on-navy-soft); margin-right: 5px; }
.em-cells { display: flex; flex-wrap: wrap; gap: 3px; }

/* the entrenched core, below the band on the page surface */
.em-core { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1080px) { .em-core { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .em-core { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.em-core-card {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 11px 10px; border-radius: var(--radius);
  background: var(--bg-raised); border: 1px solid var(--line); border-left: 3px solid var(--gold); color: var(--text);
}
.em-core-card:hover { text-decoration: none; border-color: var(--accent); border-left-color: var(--gold); }
.em-core-n { font-family: var(--display); font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--accent-deep); }
.em-core-t { font-size: 13px; font-weight: 600; line-height: 1.3; }
.em-core-s { font-size: 11.5px; line-height: 1.35; color: var(--text-faint); margin-top: auto; padding-top: 3px; }
.em-core-note { font-size: 13.5px; line-height: 1.55; color: var(--text-soft); margin: 12px 0 0; max-width: 110ch; }

/* a cell is sized by its content (min-width + padding), so "155FFF" never clips */
.em-cell, .em-sw {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  border: 1px solid var(--era-3); border-radius: 3px;
}
.em-cell {
  min-width: 34px; height: 24px; padding: 0 5px; white-space: nowrap;
  font: 600 11px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--navy-deep);
}
.em-sw { width: 22px; height: 16px; flex: none; }
.em-cell:hover { text-decoration: none; outline: 2px solid var(--text); outline-offset: 1px; }
.em-t0 { background: var(--era-4); }
.em-t1 { background: var(--era-3); }
.em-t2 { background: var(--era-1); color: var(--on-navy); }
.em-rep {
  background: repeating-linear-gradient(45deg, var(--line-strong) 0 1.5px, var(--bg-raised) 1.5px 5px);
  border-color: var(--line-strong); color: var(--text-faint); text-decoration: line-through;
}
.em-cell.em-rep:hover { text-decoration: line-through; }
.em-ent { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }

/* cells on the navy band: brighter = amended more often (the light ramp would put --era-1, the
   navy itself, on navy). Fill is still times amended; the gold ring is still the only outline. */
.em-band .em-cell, .em-band .em-sw { border-color: color-mix(in srgb, var(--on-navy) 22%, transparent); }
.em-band .em-t0 { background: var(--navy-line); color: var(--on-navy-soft); }
.em-band .em-t1 { background: var(--era-3); color: color-mix(in srgb, var(--navy-deep) 60%, #000); }
.em-band .em-t2 { background: var(--era-4); color: var(--navy-deep); }
.em-band .em-t3 { background: var(--on-navy); color: var(--navy-deep); }
.em-band .em-rep {
  background: repeating-linear-gradient(45deg, var(--navy-line) 0 1.5px, transparent 1.5px 5px);
  color: var(--on-navy-soft);
}
.em-band .em-ent { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.em-band .em-cell:hover { outline-color: var(--on-navy); }

.em-questions { gap: 12px 34px; }
.em-questions .callout { background: none; border-left-color: var(--accent-deep); border-radius: 0; padding: 2px 0 2px 13px; margin: 0 0 14px; }

@media print {
  .em-cell, .em-sw, .em-band, .em-map { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tip { display: none; }
}

/* ============================================================
   About page: the independence line, coverage counted from the
   data, and the correction form (posts to Web3Forms; no script)
   ============================================================ */
.about-indep {
  flex: 1 1 100%; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--navy-line);
  font-size: 13.5px; line-height: 1.5; color: var(--on-navy-soft); max-width: none;
}
.about-indep strong { color: var(--on-navy); }
.about-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
@media (max-width: 700px) { .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.about-fact { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.about-fact b { display: block; font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--accent-deep); margin-bottom: 5px; }
.about-fact span { display: block; font-size: 13px; line-height: 1.35; color: var(--text-soft); }
.about-cover { font-size: 14px; line-height: 1.55; color: var(--text-soft); margin: 0; max-width: 100ch; }
.about-two { gap: 12px 40px; }
.about-two .about-sec { max-width: none; }
.about-two .callout { background: none; border-left-color: var(--accent-deep); border-radius: 0; padding: 2px 0 2px 13px; margin: 0 0 14px; }
.about-btns { margin: 12px 0 4px; }

.about-form { max-width: 880px; }
.af-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
@media (max-width: 700px) { .af-row { grid-template-columns: minmax(0, 1fr); } }
.af-field { margin: 0 0 14px; }
.af-field label { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 5px; }
.af-tag { font-size: 12px; font-weight: 500; color: var(--text-faint); margin-left: 4px; }
.about-form input:not([type="checkbox"]), .about-form select, .about-form textarea {
  width: 100%; box-sizing: border-box; font: 15px/1.4 var(--sans); padding: 10px 12px;
  color: var(--text); background: var(--bg); border: 1px solid var(--text-faint); border-radius: var(--radius);
  color-scheme: var(--scheme);
}
.about-form textarea { resize: vertical; min-height: 130px; }
.about-form ::placeholder { color: var(--text-faint); opacity: 1; }
.af-help { font-size: 12.5px; color: var(--text-faint); margin: 4px 0 0; }
.af-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 4px 0 0; }
.af-privacy { flex: 1 1 320px; font-size: 13px; line-height: 1.5; color: var(--text-soft); margin: 0; max-width: 70ch; }
.af-offline { font-size: 14px; line-height: 1.55; color: var(--text-soft); margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); max-width: 70ch; }
.af-offline strong { color: var(--text); }
/* the hCaptcha widget renders 83px tall: reserve it so its late arrival does not push the page down */
.af-captcha { min-height: 83px; margin: 0 0 12px; }
/* the widget's iframe is a fixed 302px; below ~360px the form column is narrower, so shrink it to fit */
@media (max-width: 359px) { .h-captcha { transform: scale(.87); transform-origin: 0 0; } }
/* an error says so in words ("Not sent:"), never by colour alone; empty, it takes no space */
.af-error { font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--text); margin: 0 0 12px; padding-left: 10px; border-left: 3px solid var(--gold); max-width: 70ch; }
.af-error:empty { margin: 0; padding: 0; border: 0; }
/* the confirmation sits beside Send; empty, it takes no space (kept displayed so the live region is announced) */
.af-send { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.af-sent { font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--text); margin: 0; padding-left: 10px; border-left: 3px solid var(--accent); max-width: 44ch; }
.af-sent:empty { padding: 0; border: 0; }
/* spam honeypot: off screen, never display:none (some bots skip hidden fields) */
.af-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Offices: the verification notice and the left-out entries, in the
   same card treatment as the Pending page, at the top of the page
   ============================================================ */
.office-notices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
@media (max-width: 900px) { .office-notices { grid-template-columns: minmax(0, 1fr); } }
.office-notices #office-exclusions { display: grid; gap: 12px; }
.office-notices .pend p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-soft); }
.office-notices .pend .pend-links { margin-top: 8px; }
.office-notices .pend :is(h2, h3) { margin: 6px 0 6px; }

/* the reading pane: which text this is (always shown), and what a summary is */
.read-asat {
  font-size: 12.5px; line-height: 1.45; color: var(--text-faint); margin: -4px 0 16px;
  padding: 6px 0 6px 10px; border-left: 2px solid var(--line-strong);
}
.read-marker {
  font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--text-soft);
  background: var(--bg-sunk); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}

/* 404 */
.nf-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--text-soft); }
.nf-links a { font-weight: 600; }

/* narrow panes: the label row wraps as a whole rather than breaking the label */
.read-lbl-row { flex-wrap: wrap; row-gap: 6px; }
.read-lbl-row .read-lbl { white-space: nowrap; }

/* ============================================================
   Reading pane context (design-reference/mock-1a-reading-pane-inline.html):
   what it takes to change the article, how it has changed, where it
   sits in its chapter, and a citation line
   ============================================================ */
.ctx-block { border-top: 1px solid var(--line-strong); padding: 16px 0 0; margin: 0 0 22px; }
.ctx-count { color: var(--accent); margin-left: 8px; letter-spacing: .04em; }
.ctx-note { font-size: 12.5px; line-height: 1.6; color: var(--text-faint); margin: 12px 0 0; }

/* two levels, two panels */
.diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 600px) { .diff { grid-template-columns: minmax(0, 1fr); } }
.diff-step { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--bg-raised); }
.diff-bar { display: block; height: 4px; border-radius: 2px; background: var(--line-strong); margin-bottom: 10px; }
.diff-step.on .diff-bar { background: var(--accent); }
.diff-step.on.gold { border-color: var(--gold); background: var(--gold-soft); }
.diff-step.on.gold .diff-bar { background: var(--gold); }
.diff-step.off { background: transparent; border-style: dashed; border-color: var(--line-strong); }
.diff-t { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text); }
.diff-step.off .diff-t { color: var(--text-faint); }
.diff-s { display: block; font-size: 12.5px; line-height: 1.55; color: var(--text-soft); margin-top: 4px; }

/* the amendment timeline: an SVG drawn at the pane's width, sharing the amendments chart's dot classes */
.strip-wrap { width: 100%; }
.strip-svg { display: block; max-width: 100%; overflow: visible; }
.strip-svg a:focus { outline: none; }
.strip-svg a:focus-visible circle, .strip-svg a:hover circle { stroke: var(--text); stroke-width: 2.5; }
.strip-empty { background: var(--bg-sunk); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 12px 14px; }
.strip-note { font-size: 13px; line-height: 1.6; color: var(--text-soft); margin: 8px 0 0; }
.strip-note b { color: var(--text); }
.strip-list { list-style: none; margin: 14px 0 12px; padding: 0; display: grid; gap: 10px; }
.strip-list li { border-left: 3px solid var(--cat-4); padding: 2px 0 2px 12px; }
.strip-list li.cat-presidency { border-left-color: var(--cat-1); }
.strip-list li.cat-independence { border-left-color: var(--cat-2); }
.strip-list li.cat-elections { border-left-color: var(--cat-3); }
.strip-list a { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.strip-list a b { font-size: 14px; font-weight: 600; }
.strip-list a span { font-size: 12.5px; color: var(--text-faint); }
.strip-list p { font-size: 13.5px; line-height: 1.55; color: var(--text-soft); margin: 3px 0 0; }

/* where this sits: the entrenchment map's cells, plain fill, the current article in --accent */
.pos-cells { gap: 4px; }
.em-pos:not(.em-rep) { background: var(--bg-raised); color: var(--text-soft); }
.em-pos:not(.em-ent):not(.em-rep) { border-color: var(--line-strong); }
.em-pos:hover { color: var(--accent); }
.em-pos.em-here { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.em-pos.em-here.em-ent { border-color: var(--gold); }
.em-pos.em-rep { opacity: .75; }

/* citation */
.cite { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 8px; }
.cite-t { flex: 1 1 280px; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); margin: 0; }
.cite-b { flex: none; font: 600 12.5px/1 var(--sans); color: var(--accent); background: var(--accent-soft); border: 1px solid transparent; border-radius: 4px; padding: 8px 12px; cursor: pointer; }
.cite-b:hover { border-color: var(--accent); }

@media print {
  .cite-b { display: none; }
  .strip-svg, .em-cell, .diff-step { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* the reading pane: amendments behind the wording now in force (on the axis), and, apart from them,
   earlier amendments the dataset records that the Revised Edition 2023 does not note (never on the axis) */
.strip-sub { font-size: 12.5px; line-height: 1.5; color: var(--text-faint); margin: -8px 0 4px; }
.also { margin: 4px 0 14px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg-sunk); }
.also-h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); margin: 0 0 4px; }
.also-note { font-size: 12.5px; line-height: 1.55; color: var(--text-faint); margin: 0 0 8px; }
.also-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.also-list li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.also-list a { color: var(--text-soft); font-weight: 600; }
.also-list span { font-size: 12px; color: var(--text-faint); }

/* amendments page: the chart as a filter, and each card's two kinds of article list */
#am-legend .lg-i { font: inherit; font-size: 11.5px; font-weight: 500; color: var(--text-soft); background: none; border: 1px solid transparent; border-radius: 999px; padding: 2px 8px 2px 6px; }
#am-legend button.lg-i { cursor: pointer; }
#am-legend button.lg-i:hover { border-color: var(--line-strong); }
#am-legend button.lg-i[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.dot.dim { opacity: .22; }
.dot.on circle { stroke: var(--text); stroke-width: 3; }
.dot:focus-visible circle { stroke: var(--accent); stroke-width: 3; }
.am.dim { opacity: .45; }
.am-status { font-size: 13px; color: var(--text-soft); margin: 0; }
.am-clear { font: 600 12.5px/1 var(--sans); color: var(--accent); background: var(--accent-soft); border: 1px solid transparent; border-radius: 4px; padding: 6px 10px; cursor: pointer; }
.am-clear:hover { border-color: var(--accent); }
.am-also { font-size: 12px; line-height: 1.55; color: var(--text-faint); margin: 5px 0 0; padding: 5px 7px; border: 1px dashed var(--line-strong); border-radius: 4px; background: var(--bg-sunk); }
.am-also-n { font-weight: 600; color: var(--text-soft); margin-right: 2px; }
.am-also a { color: var(--text-soft); font-weight: 600; margin-right: 3px; font-variant-numeric: tabular-nums; }
.am-also-q { font-style: italic; }