/* LifeNotes Companion Guide
   Structure follows BookStack: header bar, breadcrumb strip, contents sidebar,
   the page in a card, page navigation on the right. Mobile first, so the base
   rules are the phone layout and the media queries add columns.

   COLOR POLICY, enforced through the whole file:
   1. Every surface is a neutral grey with no color cast. Because no background
      is tinted, accent color on text and icons is safe on all of them.
   2. The two colored surfaces are the header bar and solid accent fills
      (buttons, badges, filled pips, bars). Both carry white text only.
   3. No one-side border on any rounded container. Separation is spacing.
      Table cell rules are the one exception, because a table needs them. */

:root {
  --page-bg:   #f0f0f0;
  --card:      #ffffff;
  --surface:   #f6f6f6;
  --surface-2: #eaeaea;
  --border:    #d8d8d8;
  --border-2:  #c0c0c0;
  --text:      #2c2c2c;
  --text-dim:  #545454;
  --text-faint:#6a6a6a;
  --accent:    #6844b4;
  --accent-hi: #4e3189;
  --fill:      #5b3fa6;
  --fill-hi:   #4b3389;
  --on-fill:   #ffffff;
  --hdr-bg:    #3d2f6b;
  --hdr-text:  #ffffff;
  --hdr-dim:   rgba(255,255,255,0.78);
  --hdr-field: rgba(255,255,255,0.15);
  --shadow:    0 1px 2px rgba(0,0,0,0.06), 0 3px 10px rgba(0,0,0,0.05);
  --r:         4px;
  --r-lg:      6px;
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --page-bg: #121212; --card: #1c1c1c; --surface: #232323; --surface-2: #2c2c2c;
    --border: #343434; --border-2: #474747; --text: #e6e6e6; --text-dim: #b0b0b0;
    --text-faint: #949494; --accent: #bb9af7; --accent-hi: #d2bafd;
    --fill: #7a5cc4; --fill-hi: #8f74d1; --on-fill: #ffffff; --hdr-bg: #17171a; --hdr-text: #f0f0f0; --hdr-dim: rgba(240,240,240,0.72);
    --hdr-field: rgba(255,255,255,0.09);
    --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 3px 12px rgba(0,0,0,0.35);
  }
}
:root.theme-dark {
  --page-bg: #121212; --card: #1c1c1c; --surface: #232323; --surface-2: #2c2c2c;
  --border: #343434; --border-2: #474747; --text: #e6e6e6; --text-dim: #b0b0b0;
  --text-faint: #949494; --accent: #bb9af7; --accent-hi: #d2bafd;
  --fill: #7a5cc4; --fill-hi: #8f74d1; --on-fill: #ffffff; --hdr-bg: #17171a; --hdr-text: #f0f0f0; --hdr-dim: rgba(240,240,240,0.72);
  --hdr-field: rgba(255,255,255,0.09);
  --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 3px 12px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--page-bg); color: var(--text);
  font: 400 16px/1.62 'Inter', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; }

/* Links carry the accent. Every surface behind them is a neutral grey. */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }
/* No resting underline anywhere. A link sitting inside a sentence needs a
   second cue besides color, because accent against body text measures
   2.04:1 in light and 1.85:1 in dark, under the 3:1 that color alone needs.
   Weight carries it, and hover adds the underline back for that state only. */
.page-card p a, .page-card li a, .page-card td a, .page-card blockquote a,
.page-card .callout-body a, .page-card figcaption a { font-weight: 600; }
.page-card p a:hover, .page-card li a:hover, .page-card td a:hover,
.page-card blockquote a:hover, .page-card .callout-body a:hover,
.page-card figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }
img, svg { max-width: 100%; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--fill); color: var(--on-fill); padding: 10px 16px; border-radius: var(--r);
}
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 14px; }

/* ── Header bar. Solid color, white text only. ────────── */
.hdr { background: var(--hdr-bg); color: var(--hdr-text); position: sticky; top: 0; z-index: 60; }
.hdr-wrap { max-width: 1500px; margin: 0 auto; padding: 0 8px; height: 54px; display: flex; align-items: center; gap: 6px; }
.hdr-btn {
  background: transparent; border: 0; color: var(--hdr-text); width: 40px; height: 40px;
  border-radius: var(--r); display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; flex: 0 0 auto; text-decoration: none;
}
.hdr-btn:hover { background: var(--hdr-field); color: var(--hdr-text); text-decoration: none; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--hdr-text); min-width: 0; flex: 0 0 auto; text-decoration: none; }
.brand:hover { text-decoration: none; color: var(--hdr-text); }
.brand-icon { font-size: 17px; opacity: 0.9; }
.brand-text { font-weight: 700; font-size: 15px; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.brand-text em { display: none; font-style: normal; font-weight: 400; color: var(--hdr-dim); }
.hdr-search { display: none; flex: 1 1 90px; min-width: 0; position: relative; align-items: center; }
.hdr-spacer { flex: 1 1 auto; }
.hdr-searchlink { display: inline-flex; }
.hdr-search i { position: absolute; left: 11px; font-size: 13px; color: var(--hdr-dim); pointer-events: none; }
.hdr-search input {
  width: 100%; background: var(--hdr-field); border: 1px solid transparent; color: var(--hdr-text);
  border-radius: 999px; padding: 8px 12px 8px 32px; font: inherit; font-size: 14px;
}
.hdr-search input::placeholder { color: var(--hdr-dim); }
.hdr-search input:focus { outline: none; border-color: var(--hdr-dim); background: rgba(255,255,255,0.2); }

/* ── Breadcrumb strip. Full-width bar, not a rounded box. ─ */
.crumbbar { background: var(--card); border-bottom: 1px solid var(--border); }
.crumbs { display: flex; align-items: center; gap: 7px; height: 42px; font-size: 13px; overflow-x: auto; white-space: nowrap; }
.crumbs a, .crumbs > span { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); }
.crumbs a { color: var(--accent); }
.crumbs .sep { color: var(--text-faint); font-size: 10px; }
.crumbs .crumb-cur { color: var(--text); font-weight: 600; }
.crumbs i { font-size: 12px; }

.layout { display: block; padding-top: 16px; padding-bottom: 40px; }

/* ── Contents sidebar: drawer until there is room ─────── */
.tree {
  position: fixed; top: 0; left: 0; bottom: 0; width: 282px; max-width: 86vw; z-index: 80;
  background: var(--card); border-right: 1px solid var(--border);
  transform: translateX(-102%); transition: transform 0.2s ease; overflow-y: auto;
}
.tree.open { transform: translateX(0); }
.tree-inner { padding: 14px 12px 20px; }
.tree-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 70; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.tree-scrim.open { opacity: 1; pointer-events: auto; }
.panel-label {
  display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); padding: 4px 8px 14px;
}
.tree-group { margin-bottom: 14px; }
.tree-chapter {
  display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); padding: 4px 8px 6px;
}
.tree-chapter i { font-size: 11px; color: var(--accent); }
.tree-page {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r);
  color: var(--text-dim); font-size: 14.5px; line-height: 1.3; text-decoration: none;
}
.tree-page i { font-size: 13px; width: 16px; text-align: center; flex: 0 0 auto; color: var(--text-faint); }
.tree-page:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.tree-page.active { background: var(--surface-2); color: var(--text); font-weight: 700; }
.tree-page.active i { color: var(--accent); }
.tree-foot { margin-top: 20px; padding: 0 10px; font-size: 12px; color: var(--text-faint); }

/* ── Content card ────────────────────────────────────── */
.content { min-width: 0; }
.page-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow); padding: 20px 16px 30px; min-width: 0; overflow-wrap: break-word;
}
.page-head { padding-bottom: 0; margin-bottom: 26px; }
.page-head h1 { display: flex; align-items: flex-start; gap: 13px; margin: 0; font-size: 25px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.24; }
.page-head h1 i { color: var(--accent); font-size: 20px; margin-top: 4px; flex: 0 0 auto; }
.lede { margin: 10px 0 0; color: var(--text-dim); font-size: 15.5px; }

.page-card h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; margin: 40px 0 14px; scroll-margin-top: 68px; }
.page-card h2:first-of-type { margin-top: 8px; }
.page-card h3 { font-size: 16.5px; font-weight: 700; margin: 28px 0 8px; scroll-margin-top: 68px; }
.page-card h2 i, .page-card h3 i { color: var(--accent); margin-right: 9px; }
.page-card h4 { font-size: 15px; font-weight: 700; margin: 20px 0 6px; color: var(--text-dim); }
.page-card p { margin: 0 0 14px; }
.page-card ul, .page-card ol { margin: 0 0 16px; padding-left: 22px; }
.page-card li { margin-bottom: 7px; }
.page-card li > ul, .page-card li > ol { margin-top: 7px; }
.page-card strong { font-weight: 700; color: var(--text); }
.page-card hr { border: 0; height: 1px; background: var(--border); margin: 30px 0; }
blockquote { margin: 0 0 16px; padding: 13px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); }
blockquote p:last-child { margin-bottom: 0; }
code, kbd, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 5px; word-break: break-word; color: var(--text);
}
pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; overflow-x: auto; margin: 0 0 16px; }
pre code { background: none; border: 0; padding: 0; font-size: 13px; }

/* ── Tables. Cell rules are the one place a single edge is right. ── */
.table-wrap { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--border); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 460px; }
thead th { background: var(--surface); text-align: left; font-weight: 700; font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--border-2); white-space: nowrap; color: var(--text); }
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--surface); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Callouts. Neutral fill, full border, neutral icon. ── */
.callout { display: flex; gap: 11px; padding: 14px 15px; border-radius: var(--r); border: 1px solid var(--border-2); background: var(--surface); margin: 0 0 18px; }
.callout > i { font-size: 15px; margin-top: 3px; flex: 0 0 auto; color: var(--accent); }
.callout p:last-child { margin-bottom: 0; }
.callout-body { min-width: 0; }
.callout-title { font-weight: 700; display: block; margin-bottom: 3px; color: var(--text); }
.callout.law, .callout.watch, .callout.refuse { background: var(--surface-2); }

/* ── Chips and badges. Accent only as a solid fill. ───── */
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.chip i { font-size: 11px; }
.badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.badge.done { background: var(--fill); color: var(--on-fill); }
.badge.hold { background: var(--surface-2); color: var(--accent); border: 1px solid var(--accent); }
.badge.plan { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin: 0 0 20px; }
.stats > * { min-width: 0; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 13px; }
.stat-k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); font-weight: 700; line-height: 1.35; }
.stat-v { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; margin-top: 3px; font-variant-numeric: tabular-nums; color: var(--accent); }
.stat-n { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }

/* ── Link cards ──────────────────────────────────────── */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 24px; }
.cards > * { min-width: 0; }
.card-link { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 15px; color: var(--text); text-decoration: none; }
.card-link:hover { background: var(--surface-2); border-color: var(--border-2); text-decoration: none; }
.card-link .ct { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15.5px; color: var(--accent); }
.card-link .ct i { color: var(--accent); font-size: 15px; text-decoration: none; }
.card-link .cb { color: var(--text-dim); font-size: 14px; margin-top: 5px; display: block; }

/* ── Definition rows ─────────────────────────────────── */
.defs { margin: 0 0 20px; }
.def { border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; margin-bottom: 9px; background: var(--surface); }
.def-t { font-weight: 700; font-size: 15.5px; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; color: var(--text); }
.def-t .where { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.def-d { color: var(--text-dim); font-size: 14.5px; margin-top: 4px; }
.def-d strong { color: var(--text); }

/* ── Figures ─────────────────────────────────────────── */
.demo { border: 1px solid var(--border-2); border-radius: var(--r-lg); background: var(--surface); padding: 15px 14px; margin: 0 0 22px; min-width: 0; }
.demo-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; margin-bottom: 4px; color: var(--text); }
.demo-head i { color: var(--accent); }
.demo-note { font-size: 13px; color: var(--text-dim); margin: 0 0 14px; }
.demo-note.tight { margin: 8px 0 0; }
.tight { margin: 8px 0 0; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.demo-grid > * { min-width: 0; }
.demo-out { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 13px; min-width: 0; }
.ctl { margin-bottom: 13px; }
.ctl-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; margin-bottom: 5px; gap: 10px; }
.ctl-row.tight3 { margin-top: 3px; }
.ctl-row b { font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--fill); height: 22px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--fill); color: var(--on-fill); border: 1px solid transparent; border-radius: 999px; padding: 9px 18px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--fill-hi); text-decoration: none; color: var(--on-fill); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-row { display: flex; flex-wrap: wrap; gap: 9px; }

.pip-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.pip-name { width: 84px; flex: 0 0 auto; font-size: 13.5px; font-weight: 600; }
.pips { display: flex; gap: 4px; flex: 1 1 auto; }
.pip { width: 100%; height: 15px; border-radius: 3px; background: var(--surface-2); border: 1px solid transparent; }
.pip.filled { background: var(--fill); }
.pip.locked { background: var(--surface-2); border: 1px dashed var(--border-2); }
.pip-tag { width: 62px; flex: 0 0 auto; text-align: right; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.meter-shell { height: 22px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.meter-shell.slim { height: 16px; }
.meter-fill { height: 100%; width: 0; background: var(--fill); transition: width 0.12s ease; }
.meter-fill.dim { background: var(--border-2); }
.tap-pad { margin-top: 12px; border: 1px dashed var(--border-2); border-radius: var(--r-lg); padding: 22px 12px; text-align: center; cursor: pointer; user-select: none; background: var(--card); }
.tap-pad:active { background: var(--surface-2); }
.tap-pad .paw { font-size: 30px; color: var(--accent); display: block; transition: transform 0.1s; }
.tap-pad.bump .paw { transform: scale(1.22) rotate(-8deg); }
.tap-pad .hint { font-size: 13px; color: var(--text-dim); margin-top: 8px; display: block; }

.flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.flow > * { min-width: 0; }
.flow-col { border: 1px solid var(--border); border-radius: var(--r); background: var(--card); padding: 11px 12px; }
.flow-col h4, .flow-label { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.flow-item { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; padding: 4px 0; }
.flow-item b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-mid { text-align: center; }
.flow-wallet { border: 1px solid var(--border-2); background: var(--surface-2); border-radius: var(--r-lg); padding: 14px; text-align: center; }
.flow-wallet .n { font-size: 26px; font-weight: 700; letter-spacing: -0.6px; color: var(--accent); }
.flow-wallet .l { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text); font-weight: 700; }
.flow-wallet .demo-note { color: var(--text); }
.flow-rail { height: 46px; display: flex; justify-content: center; gap: 10px; }
.token { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--fill); }
.travel { animation: travel 2.4s linear infinite; }
.travel.d1 { animation-delay: 0s; }
.travel.d2 { animation-delay: 0.8s; }
.travel.d3 { animation-delay: 1.6s; }
@keyframes travel { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(46px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .travel { animation: none; } html { scroll-behavior: auto; } }

.radar { color: var(--accent); width: 100%; max-width: 250px; height: auto; display: block; margin: 0 auto 14px; }
.radar .area { fill: var(--accent); fill-opacity: 0.28; stroke: var(--accent); stroke-width: 1.6; }
.radar .grid { fill: none; stroke: var(--border-2); }
.radar .lbl { fill: var(--text-dim); font-size: 10px; }

/* ── Page navigation ─────────────────────────────────── */
.pagenav { margin-top: 16px; }
.pagenav-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.pagenav-box > summary {
  display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 12px 14px 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); list-style: none;
}
.pagenav-box > summary::-webkit-details-marker { display: none; }
.pagenav-box > summary .caret { margin-left: auto; transition: transform 0.15s; }
.pagenav-box[open] > summary .caret { transform: rotate(180deg); }
.pagenav-body { padding: 0 14px 12px; }
.pagenav-body ul { list-style: none; margin: 4px 0 0; padding: 0; }
.pagenav-body li { margin: 0; }
.pagenav-body a { display: block; padding: 6px 8px; border-radius: var(--r); font-size: 14px; color: var(--text-dim); text-decoration: none; }
.pagenav-body a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.pagenav-body a.here { background: var(--surface-2); color: var(--accent); font-weight: 700; }
.pagenav-top { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 10px; font-size: 13px; color: var(--text-dim); }

/* ── Pager and footer ────────────────────────────────── */
.pager { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; }
.pager-link { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; color: var(--text); text-decoration: none; }
.pager-link:hover { border-color: var(--border-2); background: var(--surface); text-decoration: none; }
.pager-link.empty { display: none; }
.pager-dir { display: flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-faint); }
.pager-link.next { text-align: right; }
.pager-link.next .pager-dir { justify-content: flex-end; }
.pager-title { display: block; font-weight: 600; margin-top: 3px; color: var(--accent); }
.site-foot { border-top: 1px solid var(--border); background: var(--card); padding: 22px 0 30px; }
.site-foot p { margin: 0 0 5px; font-size: 13px; color: var(--text-dim); }

/* ── Search results ─────────────────────────────────── */
.result { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 13px 14px; margin-bottom: 10px; }
.result-t { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 10px; color: var(--accent); }
.result-t i { color: var(--accent); font-size: 14px; text-decoration: none; }
.result-s { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.result-x { font-size: 14.5px; color: var(--text-dim); margin-top: 7px; }
.result-x mark { background: var(--fill); color: var(--on-fill); font-weight: 700; padding: 0 3px; border-radius: 2px; }
.searchbox { display: flex; gap: 9px; margin: 0 0 22px; }
.searchbox input { flex: 1 1 auto; min-width: 0; background: var(--card); border: 1px solid var(--border-2); border-radius: var(--r); padding: 11px 13px; font: inherit; color: var(--text); }
.searchbox input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* ── Timeline ───────────────────────────────────────── */
.timeline { margin: 0 0 22px; }
.tl-item { display: flex; gap: 13px; }
.tl-rail { flex: 0 0 auto; width: 24px; display: flex; flex-direction: column; align-items: center; }
.tl-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border-2); margin-top: 6px; }
.tl-item.done .tl-dot { background: var(--fill); border-color: transparent; }
.tl-line { flex: 1 1 auto; width: 2px; background: var(--border); min-height: 14px; }
.tl-item:last-child .tl-line { display: none; }
.tl-body { padding-bottom: 18px; min-width: 0; }
.tl-t { font-weight: 700; font-size: 15.5px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tl-d { color: var(--text-dim); font-size: 14.5px; margin-top: 3px; }

/* ══ Tablet ═════════════════════════════════════════ */
@media (min-width: 560px) {
  .hdr-search { display: flex; }
  .hdr-spacer, .hdr-searchlink { display: none; }
}
@media (min-width: 700px) { .brand-text em { display: inline; } .brand-text { max-width: none; } }
@media (min-width: 900px) {
  .wrap { padding: 0 22px; }
  .layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; padding-top: 24px; }
  .tree { position: sticky; top: 54px; align-self: start; transform: none; width: auto; max-width: none;
          background: transparent; border-right: 0; max-height: calc(100vh - 78px); }
  .tree-inner { padding: 0 0 20px; }
  .tree-scrim, .tree-toggle { display: none; }
  .page-card { padding: 26px 30px 40px; }
  .page-head h1 { font-size: 30px; }
  .page-head h1 i { font-size: 24px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .flow { grid-template-columns: minmax(0,1fr) 150px minmax(0,1fr); align-items: start; }
  .pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pager-link.empty { display: block; visibility: hidden; }
  .brand-text { font-size: 16px; }
  .hdr-search { max-width: 420px; margin: 0 auto; }
}
@media (min-width: 1240px) {
  .layout { grid-template-columns: 252px minmax(0, 1fr) 244px; }
  .pagenav { margin-top: 0; position: sticky; top: 78px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; }
  .pagenav-box > summary { cursor: default; }
  .pagenav-box > summary .caret { display: none; }
  .pagenav-body, .pagenav-box:not([open]) .pagenav-body { display: block; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}