/* ICD10Ref layout mockup – white with blue accents */
:root {
  --bg: #ffffff;
  --surface: #f5f8fd;
  --surface-2: #eaf0fa;
  --text: #0f1b2d;
  --muted: #56647d;
  --border: #d6dfee;
  --blue: #1a56db;
  --blue-strong: #1243ad;
  --blue-soft: #e8f0ff;
  --focus: #1a56db;
  --shadow: 0 1px 2px rgba(15, 27, 45, .06), 0 4px 16px rgba(15, 27, 45, .06);
  --radius: 10px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-billable: #0d5c2e; --t-billable-bg: #e5f6ec; --t-billable-bd: #93d2ab;
  --t-header: #3a4558; --t-header-bg: #eef1f6; --t-header-bd: #c5cedd;
  --t-seventh: #2b3a9e; --t-seventh-bg: #e8ecff; --t-seventh-bd: #b3bff4;
  --t-first: #874700; --t-first-bg: #fff0d9; --t-first-bd: #f0c481;
  --t-add: #0a4d86; --t-add-bg: #e2f1fd; --t-add-bd: #98caef;
  --t-also: #0b5c56; --t-also-bg: #dff6f3; --t-also-bd: #8dd5cd;
  --t-ex1: #9a1b1b; --t-ex1-bg: #fde8e8; --t-ex1-bd: #f2aaaa;
  --t-ex2: #6a1fa5; --t-ex2-bg: #f3e8ff; --t-ex2-bd: #d5b1fb;
  --t-poa: #4a4f5c; --t-poa-bg: #ececf1; --t-poa-bd: #c9cbd6;
  --t-new: #7a5a00; --t-new-bg: #fff6cc; --t-new-bd: #ecd36d;
}
:root[data-theme="dark"] {
  --bg: #0b1220;
  --surface: #121b2e;
  --surface-2: #19243c;
  --text: #e7eefc;
  --muted: #9dacc9;
  --border: #26334f;
  --blue: #6da2ff;
  --blue-strong: #9cc0ff;
  --blue-soft: #16264a;
  --focus: #8db6ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);

  --t-billable: #8ee2ab; --t-billable-bg: #10321f; --t-billable-bd: #2b6b45;
  --t-header: #c3cde0; --t-header-bg: #1c2638; --t-header-bd: #38465f;
  --t-seventh: #b9c4ff; --t-seventh-bg: #1c2352; --t-seventh-bd: #3d4a97;
  --t-first: #ffcf8a; --t-first-bg: #3a2708; --t-first-bd: #7a5316;
  --t-add: #a5d4fa; --t-add-bg: #0f2c47; --t-add-bd: #2a5f8f;
  --t-also: #9be6de; --t-also-bg: #0d312e; --t-also-bd: #27675f;
  --t-ex1: #ffb3b3; --t-ex1-bg: #3d1414; --t-ex1-bd: #85302f;
  --t-ex2: #dcbcff; --t-ex2-bg: #2b1745; --t-ex2-bd: #6a3fa1;
  --t-poa: #cfd3de; --t-poa-bg: #232838; --t-poa-bd: #414962;
  --t-new: #ffe28a; --t-new-bg: #3a3007; --t-new-bd: #7a6614;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220; --surface: #121b2e; --surface-2: #19243c; --text: #e7eefc; --muted: #9dacc9;
    --border: #26334f; --blue: #6da2ff; --blue-strong: #9cc0ff; --blue-soft: #16264a; --focus: #8db6ff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    --t-billable: #8ee2ab; --t-billable-bg: #10321f; --t-billable-bd: #2b6b45;
    --t-header: #c3cde0; --t-header-bg: #1c2638; --t-header-bd: #38465f;
    --t-seventh: #b9c4ff; --t-seventh-bg: #1c2352; --t-seventh-bd: #3d4a97;
    --t-first: #ffcf8a; --t-first-bg: #3a2708; --t-first-bd: #7a5316;
    --t-add: #a5d4fa; --t-add-bg: #0f2c47; --t-add-bd: #2a5f8f;
    --t-also: #9be6de; --t-also-bg: #0d312e; --t-also-bd: #27675f;
    --t-ex1: #ffb3b3; --t-ex1-bg: #3d1414; --t-ex1-bd: #85302f;
    --t-ex2: #dcbcff; --t-ex2-bg: #2b1745; --t-ex2-bd: #6a3fa1;
    --t-poa: #cfd3de; --t-poa-bg: #232838; --t-poa-bd: #414962;
    --t-new: #ffe28a; --t-new-bg: #3a3007; --t-new-bd: #7a6614;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h, 57px) + 56px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-strong); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
kbd { font: 12px var(--mono); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; background: var(--surface); color: var(--muted); }
code { font-family: var(--mono); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--blue); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-sun { display: none; }
:root[data-theme="dark"] .i-sun { display: inline; }
:root[data-theme="dark"] .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: inline; }
  :root:not([data-theme="light"]) .i-moon { display: none; }
}
/* the logo is a mask: it takes the page text color (dark navy in light mode, light blue-white in dark mode), so one file serves both themes */
.brand .logo { display: block; height: 32px; width: 160px; background-color: var(--text); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }

/* header */
.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.hdr { display: flex; align-items: center; gap: 20px; height: 56px; }
.brand { display: flex; flex: none; }

.hdr-tools { margin-left: auto; display: flex; gap: 10px; align-items: center; flex: none; }
.fy { width: 104px; height: 38px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 0 10px; font: 600 14px var(--sans); }
.icon-btn { width: 38px; height: 38px; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; display: grid; place-items: center; }
.icon-btn:hover { background: var(--surface-2); }
.banner { background: var(--blue-soft); border-bottom: 1px solid var(--border); font-size: 14px; }
.banner .wrap { padding-top: 8px; padding-bottom: 8px; }

/* search */
.search { position: relative; display: flex; align-items: center; flex: 1; max-width: 560px; }
.search-ic { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.q { width: 100%; height: 42px; padding: 0 44px 0 42px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); border-radius: 10px; font: 16px var(--sans); appearance: none; }
.q::placeholder { color: var(--muted); }
.q:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 22%, transparent); background: var(--bg); }
.search .hint { position: absolute; right: 12px; }
.results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; z-index: 40; max-height: 70vh; overflow-y: auto; }
.results[hidden] { display: none; }
.results li a { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.results li:last-child a { border-bottom: 0; }
.results li[aria-selected="true"] a, .results li a:hover { background: var(--blue-soft); }
.results .rc { font: 700 15px var(--mono); color: var(--blue-strong); }
.results .rd { font-size: 14.5px; }
.results .rv { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.results .rd mark { background: none; font-weight: 700; color: inherit; text-decoration: underline; text-decoration-color: var(--blue); }
.results .rnote { padding: 8px 14px; font-size: 12px; color: var(--muted); background: var(--surface); }
.results .empty { padding: 14px; color: var(--muted); }

/* tags */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; font: 600 13.5px/1.2 var(--sans); border: 1.5px solid var(--tbd); background: var(--tbg); color: var(--tfg); text-decoration: none; white-space: nowrap; }
a.tag:hover { color: var(--tfg); filter: brightness(.97); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tbd) 45%, transparent); }
.tag--mini { padding: 2px 8px 2px 6px; font-size: 12px; }
.tag--billable { --tfg: var(--t-billable); --tbg: var(--t-billable-bg); --tbd: var(--t-billable-bd); }
.tag--header { --tfg: var(--t-header); --tbg: var(--t-header-bg); --tbd: var(--t-header-bd); }
.tag--seventh { --tfg: var(--t-seventh); --tbg: var(--t-seventh-bg); --tbd: var(--t-seventh-bd); }
.tag--first { --tfg: var(--t-first); --tbg: var(--t-first-bg); --tbd: var(--t-first-bd); }
.tag--add { --tfg: var(--t-add); --tbg: var(--t-add-bg); --tbd: var(--t-add-bd); }
.tag--also { --tfg: var(--t-also); --tbg: var(--t-also-bg); --tbd: var(--t-also-bd); }
.tag--ex1 { --tfg: var(--t-ex1); --tbg: var(--t-ex1-bg); --tbd: var(--t-ex1-bd); }
.tag--ex2 { --tfg: var(--t-ex2); --tbg: var(--t-ex2-bg); --tbd: var(--t-ex2-bd); }
.tag--poa { --tfg: var(--t-poa); --tbg: var(--t-poa-bg); --tbd: var(--t-poa-bd); }
.tag--new { --tfg: var(--t-new); --tbg: var(--t-new-bg); --tbd: var(--t-new-bd); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 9px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font: 600 14px var(--sans); text-decoration: none; }
.btn:hover { background: var(--surface-2); color: var(--text); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
:root[data-theme="dark"] .btn.primary { color: #0b1220; }
.btn.primary:hover { background: var(--blue-strong); border-color: var(--blue-strong); color: #fff; }
:root[data-theme="dark"] .btn.primary:hover { color: #0b1220; }
.btn.ghost { background: transparent; }
.btn.is-disabled { opacity: .55; cursor: not-allowed; }
.btn small { font-weight: 500; color: var(--muted); }
.btn[aria-pressed="true"] { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-strong); }
.btn[aria-pressed="true"] .i { fill: currentColor; }
.btn.copied { background: var(--t-billable-bg); border-color: var(--t-billable-bd); color: var(--t-billable); }

/* breadcrumb */
.crumbs { position: sticky; top: var(--hdr-h, 57px); z-index: 20; background: var(--bg); padding: 7px 0; border-bottom: 1px solid transparent; transition: border-color .15s; }
.crumbs.stuck { border-bottom-color: var(--border); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: 14px; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: ""; width: 6px; height: 6px; margin: 0 9px; border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg); opacity: .7; }
.crumbs a, .crumbs span, .crumbs button { padding: 3px 6px; border-radius: 6px; text-decoration: none; font-family: var(--mono); font-weight: 600; font-size: 13.5px; }
.crumbs a:hover { background: var(--blue-soft); }
.crumbs a .i { width: 1.2em; height: 1.2em; vertical-align: -3px; }
.crumbs .c-cur span { color: var(--text); background: var(--surface-2); }
.crumbs .c-more { display: none; }
.crumbs button { border: 0; background: var(--surface-2); color: var(--muted); }
@media (max-width: 680px) {
  .crumbs .c-far { display: none; }
  .crumbs .c-more { display: inline-flex; }
  .crumbs.open .c-far { display: inline-flex; }
  .crumbs.open .c-more { display: none; }
}

/* layout */
.main { padding-bottom: 56px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 32px; align-items: start; margin-top: 8px; }
.content { min-width: 0; }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }
.sidebar { display: grid; gap: 16px; }

/* code header */
.eyebrow { font: 700 12.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.code-head { padding: 10px 0 18px; }
.code-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; justify-content: space-between; }
h1.code { font: 800 clamp(34px, 6vw, 52px)/1 var(--mono); letter-spacing: -.02em; color: var(--text); }
.c7 { color: var(--blue); border-bottom: 4px solid var(--blue); }
.code-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.code-desc { font-size: clamp(18px, 2.4vw, 22px); font-weight: 500; margin-top: 10px; }
.meta { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--muted); }
.meta a { color: var(--muted); }
.meta a:hover { color: var(--blue); }
.meta .sep { opacity: .5; }
.yearchip { background: var(--blue); color: #fff; font: 700 12px var(--sans); padding: 3px 9px; border-radius: 999px; letter-spacing: .03em; }
:root[data-theme="dark"] .yearchip { color: #0b1220; }

/* status */
.status { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; padding: 14px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); }
.status-main { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border-radius: 10px; border: 2px solid; }
.status-main .i { width: 32px; height: 32px; }
.status-main strong { display: block; font-size: 19px; line-height: 1.1; }
.status-main span { font-size: 13.5px; }
.status--ok { color: var(--t-billable); background: var(--t-billable-bg); border-color: var(--t-billable-bd); }
.status--head { color: var(--t-header); background: var(--t-header-bg); border-color: var(--t-header-bd); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* 7th character */
.seventh { margin-top: 20px; border: 1.5px solid var(--t-seventh-bd); background: color-mix(in srgb, var(--t-seventh-bg) 55%, var(--bg)); border-radius: var(--radius); padding: 16px 18px 18px; }
.seventh > header { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; margin-bottom: 12px; color: var(--t-seventh); }
.seventh > header .i { width: 26px; height: 26px; }
.seventh > header h2 { font-size: 18px; }
.seventh > header p { grid-column: 1 / -1; color: var(--text); font-size: 14.5px; margin-top: 6px; }
.seventh-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.seventh-pick button { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 9px; border: 1.5px solid var(--border); background: var(--bg); }
.seventh-pick button b { font: 800 20px var(--mono); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-2); flex: none; }
.seventh-pick button span { font-size: 14px; line-height: 1.25; }
.seventh-pick button:hover { border-color: var(--t-seventh-bd); }
.seventh-pick button[aria-checked="true"] { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 2px var(--blue) inset; }
.seventh-pick button[aria-checked="true"] b { background: var(--blue); color: #fff; }
:root[data-theme="dark"] .seventh-pick button[aria-checked="true"] b { color: #0b1220; }
.seventh-out { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--t-seventh-bd); }
.seventh-out .lbl { font-size: 13px; color: var(--muted); font-weight: 600; }
.assembled { font: 800 26px var(--mono); letter-spacing: -.01em; }
.assembled b { color: var(--blue); border-bottom: 3px solid var(--blue); }
.seventh--ref p { font-size: 14px; margin-bottom: 8px; }
.sev-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 16px; }
.sev-list li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.sev-list b { font: 800 15px var(--mono); color: var(--blue-strong); }

/* notes */
.notes-group { margin-top: 20px; border: 1px solid var(--border); border-left: 5px solid var(--tbd, var(--border)); border-radius: var(--radius); padding: 14px 18px 16px; background: color-mix(in srgb, var(--tbg, var(--surface)) 42%, var(--bg)); }
.notes-group > header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px; color: var(--tfg, var(--text)); }
.notes-group > header .i { width: 22px; height: 22px; }
.notes-group > header h2 { font-size: 17px; }
.notes-group > header p { flex-basis: 100%; font-size: 13.5px; color: var(--muted); }
.notes--first { --tfg: var(--t-first); --tbd: var(--t-first-bd); --tbg: var(--t-first-bg); }
.notes--add { --tfg: var(--t-add); --tbd: var(--t-add-bd); --tbg: var(--t-add-bg); }
.notes--also { --tfg: var(--t-also); --tbd: var(--t-also-bd); --tbg: var(--t-also-bg); }
.notes--ex1 { --tfg: var(--t-ex1); --tbd: var(--t-ex1-bd); --tbg: var(--t-ex1-bg); }
.notes--ex2 { --tfg: var(--t-ex2); --tbd: var(--t-ex2-bd); --tbg: var(--t-ex2-bg); }
.notes--info { --tfg: var(--muted); --tbd: var(--border); --tbg: var(--t-header-bg); }
.note-src + .note-src { margin-top: 12px; }
.src-label { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.src-label .src-desc { text-transform: none; letter-spacing: 0; font-weight: 500; }
.note-src ul { list-style: none; }
.note-src li { position: relative; padding: 3px 0 3px 18px; }
.note-src li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.note-src li.lead { font-weight: 600; }
.note-src li.lead ul { font-weight: 400; margin-top: 2px; }
.src-far { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 8px; }
.src-far summary { cursor: pointer; font-size: 13.5px; color: var(--blue); font-weight: 600; }
.src-far[open] summary { margin-bottom: 8px; }
a.ref { font-family: var(--mono); font-weight: 600; font-size: .94em; background: var(--blue-soft); padding: 0 4px; border-radius: 4px; text-decoration: none; white-space: nowrap; }
a.ref:hover, a.ref:focus-visible { background: var(--blue); color: #fff; }
:root[data-theme="dark"] a.ref:hover { color: #0b1220; }

/* hover card */
.hovercard { position: absolute; z-index: 60; width: min(340px, calc(100vw - 24px)); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 30px rgba(15, 27, 45, .22); padding: 12px 14px; pointer-events: auto; }
.hovercard[hidden] { display: none; }
.hovercard .hc-code { font: 800 18px var(--mono); color: var(--blue-strong); }
.hovercard .hc-desc { font-size: 14.5px; margin: 4px 0 8px; }
.hovercard .hc-open { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; }

/* tree / lists */
.codes-below { margin-top: 28px; }
.codes-below > h2 { font-size: 20px; margin-bottom: 12px; }
.codes-below > h2 small { font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.tree-tools { display: flex; gap: 8px; margin-bottom: 10px; }
.tree-tools .btn { height: 32px; font-size: 13px; }
.tree, .tree ul { list-style: none; }
.tree ul { margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--border); }
.tree li { margin: 2px 0; }
.tree summary { list-style: none; cursor: pointer; }
.tree summary::-webkit-details-marker { display: none; }
.trow { display: flex; align-items: baseline; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.tree summary .trow::before { content: ""; width: 7px; height: 7px; margin-right: 2px; flex: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg) translateY(-2px); transition: transform .12s; align-self: center; }
.tree details[open] > summary .trow::before { transform: rotate(45deg) translateY(-2px); }
.trow:hover { background: var(--surface); }
.tcode { font: 700 14.5px var(--mono); color: var(--blue-strong); text-decoration: none; flex: none; min-width: 72px; }
.tdesc { flex: 1; min-width: 0; font-size: 15px; }
.trow .tag { align-self: center; }
li.is-target > .trow, li.is-target > details > summary .trow { background: color-mix(in srgb, var(--t-new-bg) 80%, transparent); outline: 2px solid var(--t-new-bd); }
.list-rows { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.list-rows li + li { border-top: 1px solid var(--border); }
.list-rows .row { display: flex; align-items: center; gap: 14px; padding: 11px 14px; color: var(--text); text-decoration: none; }
.list-rows .row:hover { background: var(--blue-soft); }
.list-rows .tcode { min-width: 84px; }
.list-rows .chev { color: var(--muted); }

/* sidebar */
.side-card { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 14px; }
.side-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 8px; }
.side-card h4 { font-size: 13px; margin: 12px 0 4px; color: var(--muted); }
.side-card .up { display: flex; gap: 8px; align-items: center; font-size: 14px; text-decoration: none; padding: 6px 8px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); }
.side-list a { display: block; padding: 6px 8px; border-radius: 7px; font-size: 14px; color: var(--text); text-decoration: none; line-height: 1.3; }
.side-list a b { font-family: var(--mono); color: var(--blue-strong); margin-right: 4px; }
.side-list a:hover { background: var(--blue-soft); }
.side-list li[aria-current="true"] > a { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.fy-switch { display: flex; gap: 8px; margin-top: 10px; }
.tagkey summary { cursor: pointer; list-style: none; }
.tagkey summary::-webkit-details-marker { display: none; }
.tagkey summary h3 { margin: 0; }
.tagkey .key { display: grid; gap: 6px; margin: 10px 0; }
.tools .btn { width: 100%; justify-content: center; }
.ad { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; background: var(--bg); }
.ad-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.ad-box { min-height: 250px; display: grid; place-content: center; text-align: center; border: 2px dashed var(--border); border-radius: 8px; color: var(--muted); font-size: 14px; padding: 12px; }

/* home */
.hero { padding: 40px 0 28px; text-align: center; }
.hero h1 { font-size: clamp(34px, 6vw, 54px); letter-spacing: -.03em; }
.hero .lead { color: var(--muted); font-size: 18px; margin: 12px auto 24px; max-width: 52ch; }
.hero .search { max-width: 720px; margin: 0 auto; }
.search--hero .q { height: 60px; font-size: 19px; border-radius: 14px; padding-left: 50px; box-shadow: var(--shadow); }
.search--hero .search-ic { left: 18px; width: 24px; height: 24px; }
.search--hero .results { text-align: left; }
.try { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; font-size: 14px; color: var(--muted); }
.try button { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.try button:hover { background: var(--blue-soft); border-color: var(--blue); }
.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } }
.panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--surface); }
.panel h2 { font-size: 15px; display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.mini-list li a { display: flex; gap: 10px; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: 14.5px; }
.mini-list li a:hover { background: var(--blue-soft); }
.mini-list b { font-family: var(--mono); color: var(--blue-strong); flex: none; min-width: 78px; }
.mini-list .sample { opacity: .55; }
.mini-list .hintline { font-size: 13px; color: var(--muted); padding: 4px 8px; }
.wn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.wn li { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px; text-align: center; font-size: 13px; color: var(--muted); }
.wn b { display: block; font-size: 24px; color: var(--text); }
.browse { margin-top: 36px; }
.browse h2 { font-size: 20px; margin-bottom: 12px; }
.chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.chapters li { display: flex; }
.chapters a { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; }
.chapters a:hover { background: var(--blue-soft); border-color: var(--blue); }
.chrange { flex: none; min-width: 104px; text-align: center; padding: 7px 10px; border-radius: 8px; background: var(--blue-soft); color: var(--blue-strong); font: 800 17px/1.1 var(--mono); letter-spacing: -.01em; white-space: nowrap; }
.chtext { flex: 1; min-width: 0; line-height: 1.25; }
.chtext b { display: block; font-size: 14.5px; font-weight: 600; }
.chtext small { color: var(--muted); font-size: 12.5px; }
.chevron, .chev { color: var(--muted); }

/* misc pages / footer */
.nf { padding: 48px 0; max-width: 720px; }
.nf h1 { font-size: 34px; margin-bottom: 8px; }
.nf h2 { margin: 28px 0 10px; font-size: 18px; }
.nf .lead { color: var(--muted); }
.nf ul { list-style: disc; margin: 8px 0 8px 22px; }
.nf ol { list-style: decimal; margin: 8px 0 8px 22px; }
.nf li { margin: 4px 0; }
.nf h3 { margin: 18px 0 6px; font-size: 15.5px; }
.nf ul.chg { list-style: none; margin: 8px 0 18px; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.chg li { display: grid; grid-template-columns: 112px 1fr; gap: 14px; margin: 0; padding: 8px 14px; border-top: 1px solid var(--border); line-height: 1.4; }
.chg li:first-child { border-top: 0; }
.chg .cd { font: 700 14px var(--mono); }
.chg a.cd { color: var(--blue); text-decoration: none; }
.chg a.cd:hover { text-decoration: underline; }
.chg-was, .chg-now { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.nf .jump { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.nf .jump a { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; }
@media (max-width: 520px) { .chg li { grid-template-columns: 1fr; gap: 2px; } }
.nf code { font-family: var(--mono); font-size: .92em; }
.nf .lead + p { margin-top: 14px; }
.nf .callout { border-left: 4px solid var(--blue); background: var(--surface); padding: 10px 14px; border-radius: 6px; margin: 18px 0; }
.nf-list { border: 1px solid var(--border); border-radius: 10px; padding: 6px; }
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 28px 0 40px; color: var(--muted); font-size: 13.5px; }
.site-footer p + p { margin-top: 6px; }
.site-footer .phi-warn { text-decoration: underline; text-underline-offset: 2px; }
.site-footer .links { margin-top: 14px; display: flex; gap: 16px; flex-wrap: wrap; }

/* responsive header */
@media (max-width: 720px) {
  .hdr { flex-wrap: wrap; height: auto; padding-top: 7px; padding-bottom: 7px; gap: 7px 10px; }
  .brand .logo { height: 28px; width: 140px; }
  .hdr-tools { order: 2; margin-left: auto; }
  .search--header { order: 3; flex-basis: 100%; max-width: none; }
  .site-header { position: sticky; }
  .trow { flex-wrap: wrap; }
  .tcode { min-width: 0; }
  .status-main strong { font-size: 17px; }
  .results li a { grid-template-columns: 84px 1fr; }
  .results li a .tag { grid-column: 2; justify-self: start; }
}
.print-only { display: none; }
@media print {
  .site-header, .banner, .sidebar, .site-footer, .code-actions, .crumbs, .tree-tools, .skip, .hovercard { display: none !important; }
  .layout { display: block; }
  .print-only { display: block; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .notes-group, .status, .seventh { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  .src-far:not([open]) > *:not(summary) { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* jump highlight */
.notes-group.is-target, .seventh.is-target { animation: jumpflash 2.2s ease-out; }
@keyframes jumpflash { 0%, 35% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--tbd, var(--blue)) 70%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* level navigator */
.nav-card > p { margin-bottom: 10px; }
.lvl { border-top: 1px solid var(--border); }
.lvl:first-of-type { border-top: 0; }
.lvl > summary { list-style: none; cursor: pointer; display: block; padding: 8px 6px 8px calc(6px + var(--d, 0) * 7px); border-radius: 8px; }
.lvl > summary::-webkit-details-marker { display: none; }
.lvl > summary:hover { background: var(--blue-soft); }
.lvl-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.lvl-count { display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.lvl-chev { width: 14px; height: 14px; transition: transform .12s; }
.lvl[open] > summary .lvl-chev { transform: rotate(90deg); }
.lvl-text { display: block; margin-top: 2px; font-size: 14px; line-height: 1.3; color: var(--text); text-decoration: none; }
.lvl-text b { font-family: var(--mono); color: var(--blue-strong); }
a.lvl-text:hover { text-decoration: underline; }
.lvl--cur > summary .lvl-name { color: var(--blue); }
.lvl--cur > summary { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.lvl > .side-list { margin: 2px 0 8px calc(6px + var(--d, 0) * 7px); padding-left: 8px; border-left: 2px solid var(--border); max-height: 320px; overflow: auto; }

.lvl-cur-list { margin: 2px 0 0 calc(6px + var(--d, 0) * 7px); padding-left: 8px; border-left: 2px solid var(--border); }
.nav-card > .lvl:first-of-type { border-top: 0; }
.lvl + .lvl-cur-list { margin-top: 0; }

/* current item dropdown: immediate children only */
.side-list li.has-kids { margin: 2px 0; }
.side-list li.has-kids > details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 7px; font-size: 14px; line-height: 1.3; background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.side-list li.has-kids > details > summary::-webkit-details-marker { display: none; }
.cur-label b { font-family: var(--mono); color: var(--blue-strong); margin-right: 4px; }
.kid-toggle { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.kid-chev { width: 14px; height: 14px; transition: transform .12s; }
details[open] > summary .kid-chev { transform: rotate(90deg); }
ul.kids { margin: 4px 0 6px 12px; padding-left: 8px; border-left: 2px solid var(--border); }

/* SEO summary + index terms */
.summary { margin-top: 16px; font-size: 15px; color: var(--muted); line-height: 1.55; }
.summary b { color: var(--text); font-family: var(--mono); }
.index-list { columns: 2 260px; column-gap: 28px; margin-top: 4px; }
.index-list li { break-inside: avoid; padding: 3px 0 3px 18px; position: relative; font-size: 14.5px; }
.index-list li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.notes-group .count { color: var(--muted); font-weight: 600; }

/* 404 */
.nf404 { max-width: 760px; margin: 0 auto; padding: 36px 0 24px; text-align: center; }
.nf-num { font: 800 clamp(84px, 20vw, 150px)/1 var(--mono); letter-spacing: -.04em; color: var(--text); margin-bottom: 8px; }
.nf-title { font-size: clamp(26px, 5vw, 38px); letter-spacing: -.02em; }
.nf404 .lead { color: var(--muted); font-size: 18px; margin: 10px auto 6px; max-width: 52ch; }
.nf-asked { margin-bottom: 22px; word-break: break-all; }
.nf404 .search { max-width: 640px; margin: 0 auto; }
.nf404 .search--hero .q { height: 56px; font-size: 18px; }
.nf404 .try { margin-top: 14px; }
.nf-links { display: inline-flex; gap: 8px; margin-left: 6px; }
.nf-links .btn { height: 32px; font-size: 13.5px; }
.home-grid--2 { grid-template-columns: repeat(2, 1fr); text-align: left; margin-top: 30px; }
@media (max-width: 700px) { .home-grid--2 { grid-template-columns: 1fr; } }
.nf-sample { margin-top: 22px; }
.nf-sample b { color: var(--text); }
@media (max-width: 520px) { .chrange { min-width: 92px; font-size: 15.5px; } }
.nf-num { margin-bottom: 18px; }
.nf-num .c7 { display: inline-block; line-height: .8; border-bottom-width: 9px; }
@media (max-width: 520px) { .search--hero .q { font-size: 16px; height: 52px; padding-left: 46px; } .nf-num .c7 { border-bottom-width: 6px; } }

/* home chapters: two roomy columns, every tile the same height */
.chapters { grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); }
@media (min-width: 760px) { .chapters { grid-auto-rows: 1fr; } }

/* header: always the opposite of the page theme (dark bar on a light page, light bar on a dark page).
   The header re-declares the colour tokens, so its search box, buttons and chip follow along. */
.site-header {
  --bg: #0b1220; --surface: #121b2e; --surface-2: #19243c; --text: #e7eefc; --muted: #9dacc9; --border: #26334f;
  --blue: #6da2ff; --blue-strong: #9cc0ff; --blue-soft: #16264a; --focus: #8db6ff; --on-blue: #0b1220;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
  color: var(--text); background: var(--bg); border-bottom-color: var(--border);
}
:root[data-theme="dark"] .site-header {
  --bg: #ffffff; --surface: #f5f8fd; --surface-2: #eaf0fa; --text: #0f1b2d; --muted: #56647d; --border: #d6dfee;
  --blue: #1a56db; --blue-strong: #1243ad; --blue-soft: #e8f0ff; --focus: #1a56db; --on-blue: #ffffff;
  --shadow: 0 1px 2px rgba(15, 27, 45, .06), 0 4px 16px rgba(15, 27, 45, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header {
    --bg: #ffffff; --surface: #f5f8fd; --surface-2: #eaf0fa; --text: #0f1b2d; --muted: #56647d; --border: #d6dfee;
    --blue: #1a56db; --blue-strong: #1243ad; --blue-soft: #e8f0ff; --focus: #1a56db; --on-blue: #ffffff;
    --shadow: 0 1px 2px rgba(15, 27, 45, .06), 0 4px 16px rgba(15, 27, 45, .06);
  }
}
.site-header .icon-btn { color: var(--text); }
:root .site-header .yearchip { color: var(--on-blue); }
.results mark { background: none; color: inherit; font-weight: 800; text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 3px; }

/* tip of the day */
.tipcard { border-left: 4px solid var(--blue); background: var(--blue-soft); }
.tipcard[hidden] { display: none; }
.tipcard h3 { margin-bottom: 6px; }
.tip-title { font-weight: 800; margin: 0 0 4px; line-height: 1.3; }
.tip-body { margin: 0; font-size: 14px; line-height: 1.5; }
.tip-link { margin: 8px 0 0; font-size: 14px; font-weight: 700; }

/* tag key: show it is expandable */
.tagkey summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; border-radius: 8px; }
.tagkey summary:hover h3 { color: var(--blue-strong); }
.tagkey summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.tk-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--blue-strong); }
.tk-hint::before { content: "Show"; }
.tk-hint::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.tagkey[open] .tk-hint::before { content: "Hide"; }
.tagkey[open] .tk-hint::after { transform: translateY(1px) rotate(225deg); }
@media (prefers-reduced-motion: reduce) { .tk-hint::after { transition: none; } }

/* empty named slots take no space (and no grid gap) until a feature fills them */
[data-slot]:empty { display: none; }

/* ---------- Alphabetic Index ---------- */
.nm { color: var(--muted); font-weight: 500; }
.ix-h1 { font: 800 clamp(28px, 4.6vw, 42px)/1.12 var(--sans); letter-spacing: -.02em; overflow-wrap: anywhere; }
.ix-h1 .nm { font-size: .6em; font-weight: 500; letter-spacing: 0; }
.ix-entry { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); }
.ix-entry .lbl { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ix-howto { margin-top: 8px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 16px 20px 18px; }
.ix-howto h2 { font-size: 18px; margin-bottom: 10px; }
.ix-howto ol { margin: 0 0 12px 22px; padding: 0; list-style: decimal; display: grid; gap: 6px; font-size: 15px; }
.ix-howto em { font-style: italic; }

/* subterm tree */
.ix-tree-wrap { margin-top: 24px; }
.ix-tree-wrap > h2 { font-size: 20px; margin-bottom: 12px; }
.ix-tree-wrap > h2 small { font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.ix-tree .trow { padding: 4px 8px; }
.ix-tree li > .trow { padding-left: 26px; }
.ix-title { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.ix-x { color: var(--muted); font-size: 14px; }
.ix-x em { font-style: italic; }
.ix-codes { flex: none; display: flex; flex-wrap: wrap; gap: 4px 6px; justify-content: flex-end; align-items: baseline; max-width: 52%; }
.ix-entry .ix-codes { max-width: none; justify-content: flex-start; }
.ix-manif { font: 600 13px var(--mono); color: var(--muted); }
.ixc { font: 600 13.5px var(--mono); color: var(--muted); }
.ix-tree li.is-target > details > summary .trow, .ix-tree li.is-target > .trow { outline-offset: -2px; }
@media (max-width: 720px) { .ix-codes { max-width: none; flex-basis: 100%; justify-content: flex-start; } }

/* previous / next main term */
.ix-pager { display: flex; gap: 12px; margin-top: 30px; }
.ix-pager > * { flex: 1; min-width: 0; }
.ix-pager a { display: block; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; background: var(--bg); }
.ix-pager a:hover { background: var(--blue-soft); border-color: var(--blue); }
.ix-pager small { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.ix-pager span { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-pager .next { text-align: right; }

/* A to Z */
.az-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.az-grid a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); }
.az-grid a:hover { background: var(--blue-soft); border-color: var(--blue); }
.az-l { font: 800 30px/1 var(--mono); color: var(--blue-strong); min-width: 28px; text-align: center; }
.az-n { font-size: 13.5px; line-height: 1.25; font-weight: 600; }
.az-n small { color: var(--muted); font-weight: 500; font-size: 12px; }
.az-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; align-items: center; }
.az-chips a { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; font: 700 15px var(--mono); text-decoration: none; color: var(--text); background: var(--bg); }
.az-chips a:hover { background: var(--blue-soft); border-color: var(--blue); }
.az-chips a[aria-current="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
:root[data-theme="dark"] .az-chips a[aria-current="true"] { color: #0b1220; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .az-chips a[aria-current="true"] { color: #0b1220; } }
.az-chips--sm a { min-width: 34px; height: 34px; font-size: 13.5px; }
.az-chips--pre { margin: 8px 0 4px; }
.az-chips--pre .lbl { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.az-chips--pre a { font-family: var(--sans); font-weight: 600; min-width: 34px; }
.browse .az-chips a { min-width: 60px; height: 60px; font-size: 20px; }
/* Home: 26 letters as two even rows of 13 (A-M, N-Z). Narrower screens wrap freely. */
@media (min-width: 900px) { .browse .az-chips { display: grid; grid-template-columns: repeat(13, 60px); gap: 6px; } }

/* letter page rows */
.ix-lrow { gap: 14px; }
.ix-lt { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.ix-meta { flex: none; margin-left: auto; color: var(--muted); font-size: 13.5px; text-align: right; }
.ix-meta b { font-family: var(--mono); color: var(--blue-strong); font-size: 14px; }
.ix-meta i { font-style: italic; }
@media (max-width: 560px) { .ix-lrow { flex-wrap: wrap; gap: 2px 14px; } .ix-meta { margin-left: 0; text-align: left; flex-basis: 100%; order: 3; } }

/* Alphabetic Index: code cards and "where the Index sends you" */
.ix-codes-block, .ix-answer { margin-top: 22px; }
.ix-codes-block > h2, .ix-answer > h2 { font-size: 20px; margin-bottom: 12px; }
.ix-card { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 14px 16px 16px; }
.ix-card + .ix-card { margin-top: 12px; }
.ix-card > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.ix-card-code a.ref { font-size: 22px; padding: 2px 8px; }
.ix-card-code .ixc { font: 800 22px var(--mono); }
.ix-card-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ix-card-desc { margin-top: 10px; font-size: 17px; font-weight: 500; }
.ix-card h3 { font-size: 15px; margin: 16px 0 8px; }
.ix-card h3 small { color: var(--muted); font-weight: 600; margin-left: 4px; }
.ix-card .list-rows { background: var(--bg); }
.ix-card-open { margin-top: 14px; }
.ix-card-open .btn { height: 34px; font-size: 13.5px; }
.ix-more { margin-top: 8px; }
.ix-target { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 16px; background: var(--surface); }
.ix-target + .ix-target { margin-top: 12px; }
.ix-target > p { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.ix-target > p em { font-weight: 500; color: var(--muted); }
.ix-target h3 { font-size: 15px; margin: 16px 0 6px; }
.ix-target h3 small { color: var(--muted); font-weight: 600; margin-left: 4px; }
.ix-target .ix-card { background: var(--bg); margin-top: 10px; }
.ix-flat .trow { padding-left: 8px; }
.ix-flat li > .trow { padding-left: 8px; }
.ix-hop { font-size: 15px !important; font-weight: 500 !important; margin: 0 0 4px 14px; color: var(--muted); }
.ix-hop em { font-weight: 500; }

/* Alphabetic Index: two-letter groups inside a big letter */
.az-grid--grp { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.az-grid--grp .az-l { font-size: 21px; min-width: 64px; white-space: nowrap; }
.az-grid--grp .az-n small { display: block; margin-top: 2px; font-weight: 500; }
.az-grid--grp a { height: 100%; box-sizing: border-box; }

/* header link to the Alphabetic Index */
.hdr-link { color: var(--text); text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); white-space: nowrap; }
.hdr-link:hover { background: var(--surface-2); border-color: var(--blue); }
@media (max-width: 720px) { .hdr-link .hl-long { display: none; } .hdr-link { padding: 6px 10px; } }

/* home hero eyebrow: a size up, CM heavier */
.eyebrow--hero { font-size: 20px; font-weight: 600; letter-spacing: .07em; margin-bottom: 8px; }
.eyebrow--hero b { font-weight: 900; }

/* my notes (sidebar, bottom) */
.notes textarea { width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); font: 400 14.5px/1.45 var(--sans); }
.notes textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--blue); }
.notes-status { margin: 6px 0 0; min-height: 1.3em; }
.notes-warn { margin: 6px 0 10px; color: var(--muted); line-height: 1.4; }
.notes-warn b { color: var(--text); }
.notes-tools { display: flex; gap: 8px; }
.notes-tools .btn { flex: 1; justify-content: center; height: 34px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* my notes: warning copy, flat Backup / Restore, disclaimer */
.notes-warn { margin: 8px 0 10px; color: var(--muted); line-height: 1.45; }
.notes-warn b { color: var(--text); }
.notes-phi { text-decoration: underline; text-underline-offset: 2px; }
.notes-tools { margin-bottom: 10px; }
.notes-tools .btn { border: 0; background: var(--surface-2); font-weight: 700; color: var(--text); }
.notes-tools .btn:hover { background: var(--blue-soft); }
.notes-help { margin: 8px 0 0; }
.notes-disc { margin: 0; color: var(--muted); line-height: 1.45; }

/* full-width slot under the breadcrumb (not sticky) */
.ad--wide { margin: 6px 0 14px; }
.ad--wide .ad-box { min-height: 90px; padding: 8px 12px; }

/* My notes list page */
.notes-all { margin: 6px 0 0; }
.notes-links { margin: 8px 0 0; white-space: nowrap; }
.mn-list { list-style: none; margin: 14px 0; padding: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.mn-list:empty { display: none; }
.mn-list li { display: grid; grid-template-columns: 120px 1fr; gap: 4px 14px; padding: 10px 14px; border-top: 1px solid var(--border); line-height: 1.4; }
.mn-list li:first-child { border-top: 0; }
.mn-code { font: 700 14px var(--mono); color: var(--blue); text-decoration: none; }
.mn-code:hover { text-decoration: underline; }
.mn-desc { font-weight: 600; }
.mn-note { grid-column: 2; margin: 0; color: var(--text); overflow-wrap: anywhere; }
.mn-meta { grid-column: 2; margin: 0; color: var(--muted); font-size: 13px; }
.mn-flag { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; font-weight: 700; }
@media (max-width: 520px) { .mn-list li { grid-template-columns: 1fr; } .mn-note, .mn-meta { grid-column: 1; } }

/* Guidelines tips (coding_tips.py) */
:root { --t-gl: #1d3a63; --t-gl-bg: #e8eef8; --t-gl-bd: #a9bddf; }
:root[data-theme="dark"] { --t-gl: #b9cdf2; --t-gl-bg: #14213a; --t-gl-bd: #34507f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --t-gl: #b9cdf2; --t-gl-bg: #14213a; --t-gl-bd: #34507f; } }
.notes--gl { --tbd: var(--t-gl-bd); --tbg: var(--t-gl-bg); --tfg: var(--t-gl); }
.gl-lead { font-size: 16px; font-weight: 600; margin: 2px 0 8px; max-width: 70ch; }
.gl-src { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13.5px; color: var(--muted); }
.gl-chip { display: inline-block; font-family: var(--mono); font-size: 12.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--t-gl-bg); color: var(--t-gl); border: 1px solid var(--t-gl-bd); }
a.gl-chip { text-decoration: none; }
a.gl-chip:hover { text-decoration: underline; }
.gl-quote { margin: 14px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--t-gl-bd); max-width: 72ch; }
.gl-quote p { font-size: 16px; line-height: 1.6; }
.gl-crumb { font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.gl-meta { font-size: 13.5px; color: var(--muted); margin-top: 14px; }
.gl-applies { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.gl-note { margin-top: 16px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 14px; max-width: 72ch; }

/* Guidelines page: collapsible chapter groups */
.gl-group { border: 1px solid var(--border); border-radius: 10px; margin: 8px 0; background: var(--card, transparent); }
.gl-group > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; font-weight: 700; }
.gl-group > summary::-webkit-details-marker { display: none; }
.gl-group > summary::before { content: ""; width: 7px; height: 7px; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .12s; margin-right: 2px; }
.gl-group[open] > summary::before { transform: rotate(45deg); }
.gl-group > summary:hover { background: var(--blue-soft); }
.gl-gname { flex: 1; }
.gl-gcount { font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.gl-group > ul { margin: 0 0 8px; padding: 0 14px 6px; }
.gl-bulk { display: flex; gap: 8px; margin: 10px 0 4px; }
.gl-bulk button { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; }
.gl-bulk button:hover { background: var(--blue-soft); }

/* Care settings (program tags) */
.settings{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;margin:10px 0 0}
.settings-label{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 10px;border-radius:999px;border:1.5px solid var(--border);background:var(--bg);color:var(--text);font-size:14px;font-weight:650;text-decoration:none;line-height:1.25}
.pill .i{width:16px;height:16px;color:var(--muted);flex:none}
.pill small{font-weight:500;color:var(--muted);font-size:13px}
.pill--yes{border-color:var(--t-billable-bd)}
.pill--yes .i{color:var(--t-billable)}
.pill--no{border-color:var(--t-ex1-bd)}
.pill--no .i{color:var(--t-ex1)}
.pill--blue{border-color:var(--t-add-bd)}
.pill--blue .i{color:var(--t-add)}
.pill--yes:hover{background:var(--t-billable-bg);border-color:var(--t-billable-bd)}
.pill--no:hover{background:var(--t-ex1-bg);border-color:var(--t-ex1-bd)}
.pill--blue:hover{background:var(--t-add-bg);border-color:var(--t-add-bd)}
.care-row{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:6px 18px;padding:12px 0;border-top:1px solid var(--border)}
.care-row:first-of-type{border-top:0}
.care-row h3{font-size:15px;display:flex;align-items:center;gap:8px}
.care-row h3 .i{width:18px;height:18px;color:var(--muted)}
.care-row p{font-size:14.5px;margin:0}
.care-row .src{display:block;color:var(--muted);font-size:13px;margin-top:4px}
@media(max-width:640px){.care-row{grid-template-columns:1fr}}
.care-tbl{border-collapse:collapse;margin:10px 0;font-size:13.5px;width:100%}
.care-tbl th,.care-tbl td{border-top:1px solid var(--border);padding:5px 8px;text-align:left;vertical-align:top}
.care-tbl th{color:var(--muted);font-weight:600}
.care-tbl td:last-child,.care-tbl th:last-child{white-space:nowrap;text-align:right}

/* home hero: full-width blue band */
body.home .hero { position: relative; isolation: isolate; color: #fff; padding: 52px 0 40px; --hero-bg: #1b4fa0; --hero-bg-2: #2c68cc; }
:root[data-theme="dark"] body.home .hero { --hero-bg: #10346c; --hero-bg-2: #1b4c96; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.home .hero { --hero-bg: #10346c; --hero-bg-2: #1b4c96; } }
body.home .hero::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: radial-gradient(900px 420px at 88% -20%, rgba(255,255,255,.22), transparent 62%), radial-gradient(600px 300px at 0% 110%, rgba(8,20,50,.28), transparent 70%), linear-gradient(135deg, var(--hero-bg), var(--hero-bg-2)); }
body.home { overflow-x: clip; }
body.home .hero h1 { color: #fff; }
body.home .hero .lead { color: #dbe7fb; }
body.home .hero .try, body.home .hero .try .muted { color: rgba(255, 255, 255, .85); }
body.home .hero .try button { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); color: #fff; }
body.home .hero .try button:hover { background: rgba(255, 255, 255, .28); border-color: #fff; }
body.home .hero .try kbd { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); color: #fff; }
body.home .hero .q { border-color: transparent; }

/* home v2: look of the OASIS REF home page */
body.home { background: var(--surface); }
body.home .hero .eyebrow--hero { color: #9cc7ff; font-size: 17px; font-weight: 500; letter-spacing: .04em; }
body.home .hero .eyebrow--hero b { color: inherit; }
body.home .hero h1 { font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.08; letter-spacing: -.03em; }
body.home .hero .search { max-width: 640px; }
body.home .hero .search--hero .q { height: 62px; border-radius: 12px; box-shadow: 0 14px 34px rgba(6, 16, 40, .38); }
.hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; max-width: 640px; margin: 28px auto 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 14.7px; color: #cbdaf3; }
.hero-stats b { color: #fff; font-weight: 700; }
body.home .panel { background: var(--bg); border-radius: 12px; }
body.home .browse h2 { font-size: 22px; margin-bottom: 4px; }
.block-sub { color: var(--muted); font-size: 15px; margin: 0 0 14px; }
body.home .chapters { grid-template-columns: repeat(2, 1fr); gap: 0 44px; }
@media (max-width: 760px) { body.home .chapters { grid-template-columns: 1fr; } }
body.home .chapters li { display: block; }
body.home .chapters a { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; padding: 11px 8px; gap: 14px; }
body.home .chapters li:last-child a, body.home .chapters li:nth-last-child(2):nth-child(odd) a { border-bottom: 0; }
body.home .chapters a:hover { background: var(--blue-soft); }
body.home .chrange { background: none; padding: 0; min-width: 104px; text-align: left; font-size: 15px; font-weight: 700; color: var(--blue-strong); }
body.home .chtext { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
body.home .chtext b { display: inline; font-weight: 500; font-size: 15px; }
body.home .chtext small { white-space: nowrap; }
body.home .chapters .chev { display: none; }
body.home .chapters { grid-auto-rows: auto !important; }
body.home .chapters a { align-items: baseline; }