/* ============================================================
   UEE PATHFINDERS - INTERFACE STANDARD
   Base theme stylesheet. Tokens and component recipes match the
   signed-off style guide (July 2026), itself lifted from the
   pathfinder-cms prototype's Tailwind theme.
   ============================================================ */

@font-face { font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/russo-one-400.07eb45e69b3a.woff2") format('woff2'); }
@font-face { font-family: 'Exo'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/exo-var.40836fee7a59.woff2") format('woff2'); }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/exo2-var.12eddf021312.woff2") format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/montserrat-var.311d352d9323.woff2") format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/montserrat-italic-var.7921052ef928.woff2") format('woff2'); }
@font-face { font-family: 'Neuton'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/neuton-400.01f86f068598.woff2") format('woff2'); }
@font-face { font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/share-tech-mono-400.65d3eea7a186.woff2") format('woff2'); }
@font-face { font-family: 'Fira Code'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/fira-code-var.24b4e480e340.woff2") format('woff2'); }

:root, :root[data-theme="dark"], :root[data-theme="light"] {
  /* -- Ground -- */
  --bg-0: oklch(.1825 .0202 226.35);  /* page (=--color-background) */
  --bg-1: oklch(.243 .0246 234.22);   /* panel (=--color-card) */
  --bg-2: oklch(.3595 .0349 236.25);  /* raised / chip (=--color-nav-page-bg) */
  --line: #17414f;        /* borders */
  --line-bright: #2e8299; /* emphasized borders */

  /* -- Ink -- */
  --ink: hsl(202 30% 75%);            /* body (=--color-foreground) */
  --ink-dim: #718e9f;                 /* secondary (=--color-nav-page-text) */

  /* -- Accents -- */
  --cyan: oklch(.829 .097 220.49);    /* headings/interactive (=primary-200) */
  --cyan-deep: #43899e;               /* fills (=--color-primary) */
  --gold: #c9a04d;        /* display titles only */
  --phosphor: #8df08a;    /* terminal / code output */
  --alert: oklch(.645 .201 22.26);    /* warnings (=destructive-400) */

  --glow-cyan: 0 0 14px rgba(86,207,230,.45), 0 0 3px rgba(86,207,230,.6);
  --glow-phosphor: 0 0 10px rgba(141,240,138,.35);

  --radius: 10px;       /* panels & boxes (=0.625rem) */
  --radius-sm: 6px;     /* chips & small controls */

  --mono: 'Share Tech Mono', ui-monospace, monospace;
  --code: 'Fira Code', var(--mono);
  --heading: 'Exo', system-ui, sans-serif;
  --serif: 'Neuton', ui-serif, serif;
  --body: 'Montserrat', system-ui, sans-serif;
  --display: 'Russo One', var(--heading);
}

* { box-sizing: border-box; }
html { background: var(--bg-0); }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  background:
    repeating-linear-gradient(0deg,  rgba(86,166,190,.05) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(86,166,190,.05) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(86,166,190,.025) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(86,166,190,.025) 0 1px, transparent 1px 24px),
    var(--bg-0);
}

/* ---------- portal header replica ----------
   From header.tsx: plate = w-fit rounded-t-sm bg-primary-700, name font-russoOne,
   subtitle font-title (Exo 2) tracking 1.4, nav row bg-primary-900. */
.masthead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 14px 28px 0;
}
.org-plate {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 12px 3px 8px;
  background: oklch(.409 .053 219.7);        /* primary-700 */
  border-radius: 4px 4px 0 0;                /* rounded-t-sm */
}
.org-logo { width: 64px; height: 46px; object-fit: contain; flex: none; }
.org-plate b {
  display: block; font-family: var(--display); font-weight: 400;
  color: var(--ink); font-size: 24px; line-height: 1.0;
}
.org-plate span {
  display: block; font-family: 'Exo 2', var(--heading);
  font-size: 16.5px; line-height: 1.15; letter-spacing: 1.4px;
  color: var(--ink);
}
.masthead .user { font-family: var(--body); color: var(--ink); font-size: 15px; padding-bottom: 8px; display: flex; align-items: center; gap: 14px; }
.masthead .org-plate { text-decoration: none; }
.user-name { font-family: var(--mono); color: var(--ink-dim); }
.user-action { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; color: var(--cyan); text-transform: uppercase; }
.user-action:hover { text-shadow: var(--glow-cyan); }

/* ---------- primary nav ---------- */
.mainnav {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 0 28px;
  background: oklch(.23 .03 222.3);                 /* primary-900 */
  border-bottom: 1px solid var(--line);
}
.mainnav-link {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-dim); text-decoration: none;
  padding: 9px 16px; border-bottom: 2px solid transparent;
}
.mainnav-link:hover { color: var(--cyan); }
.mainnav-link.is-current {
  color: var(--cyan); border-bottom-color: var(--cyan);
  text-shadow: 0 0 8px rgba(86,207,230,.3);
}

/* ---------- section index (child links grid) ---------- */
.section-index { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.section-index-link { text-decoration: none; }
.section-index-link .chip { font-size: 14px; padding: 8px 16px; }
.section-index-link:hover .chip { border-color: var(--cyan); text-shadow: var(--glow-cyan); }

/* ---------- page frame ---------- */
.page { max-width: 1080px; margin: 0 auto; padding: 40px 28px 96px; }

/* ---------- hero media / body ---------- */
.hero--solo { grid-template-columns: 1fr; }
.hero-media { border-left: 1px solid var(--line); overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-body { margin: 0 0 16px; color: var(--ink); }
.hero-cta { margin: 0; }
@media (max-width: 760px) {
  .hero-media { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- figures / gallery / embed ---------- */
.pf-figure { margin: 24px 0; }
.pf-figure img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); display: block; }
.pf-figure figcaption, .pf-embed figcaption { color: var(--ink-dim); font-size: 13px; margin-top: 6px; }
.pf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 24px 0; }
.pf-gallery-item img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-sm); display: block; }
.pf-embed { margin: 24px 0; }
.pf-embed-frame { position: relative; padding-top: 56.25%; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pf-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- document download ---------- */
.pf-doc {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); text-decoration: none;
  color: var(--cyan); background: var(--bg-2);
  border: 1px solid var(--line-bright); border-radius: var(--radius-sm);
  padding: 10px 16px; margin: 8px 0;
}
.pf-doc:hover { background: rgba(86,207,230,.1); text-shadow: var(--glow-cyan); }
.pf-doc-meta { font-size: 11px; color: var(--ink-dim); letter-spacing: .08em; }

/* ---------- accordion ---------- */
.pf-accordion { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
.pf-accordion-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-1); }
.pf-accordion-item summary {
  cursor: pointer; padding: 12px 16px; list-style: none;
  font-family: var(--heading); color: var(--cyan);
}
.pf-accordion-item summary::-webkit-details-marker { display: none; }
.pf-accordion-item summary::before { content: '▸ '; color: var(--ink-dim); }
.pf-accordion-item[open] summary::before { content: '▾ '; }
.pf-accordion-body { padding: 0 16px 14px; }

/* ---------- card grids (section / training indexes) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 32px 0; }
.pf-card {
  display: block; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-1); padding: 16px 18px;
}
.pf-card:hover { border-color: var(--line-bright); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.pf-card-title { font-family: var(--heading); color: var(--ink); font-size: 18px; margin: 10px 0 6px; }
.pf-card-desc { color: var(--ink-dim); font-size: 14px; margin: 6px 0 0; }
.doc-meta { display: flex; gap: 10px; margin: 0 0 8px; }

/* ---------- service record / org data ---------- */
.record-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;
  margin: 26px 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-1);
}
.record-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px; }
.medal-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ink-dim { color: var(--ink-dim); }
.entity-card--unknown { opacity: .7; }
.entity-card--unknown .avatar { font-family: var(--heading); font-size: 26px; color: #26343c; }
.members-tools { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }

/* ---------- search ---------- */
.nav-search { margin-left: auto; display: flex; align-items: center; }
.nav-search-input, .search-input {
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: oklch(.1825 .0202 226.35); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 6px 12px;
}
.nav-search-input { width: 140px; }
.nav-search-input:focus, .search-input:focus { outline: none; border-color: var(--cyan); }
.search-form { display: flex; gap: 10px; margin-top: 20px; }
.search-input { flex: 1; font-size: 15px; padding: 10px 14px; }

/* ---------- certification matrix ---------- */
.matrix { border-collapse: separate; border-spacing: 0; }
.matrix th.matrix-name, .matrix td.matrix-name {
  position: sticky; left: 0; z-index: 1;
  background: var(--bg-2); text-align: left; white-space: nowrap; min-width: 160px;
}
.matrix th.matrix-cert { height: 130px; padding: 0; vertical-align: bottom; }
.matrix th.matrix-cert span {
  display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--mono); font-size: 12px; color: var(--cyan);
  padding: 8px 4px; white-space: nowrap;
}
.matrix td.matrix-cell { text-align: center; }
.matrix-yes { color: var(--phosphor); text-shadow: var(--glow-phosphor); }
.matrix-no { color: var(--line-bright); }

/* ---------- terminal chips ---------- */
.chip {
  display: inline-block;
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
  color: var(--cyan);
  background: var(--bg-2);
  border: 1px solid var(--line-bright);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  white-space: nowrap;
}
.chip--gold { color: var(--gold); border-color: #6e5626; }
.chip--alert { color: var(--alert); border-color: #6e3a32; }

/* ---------- sections ---------- */
section { margin-top: 72px; }
.sect-head {
  display: flex; align-items: baseline; gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px; margin-bottom: 28px;
}
.sect-head small { color: var(--ink-dim); font-size: 13px; letter-spacing: .05em; }

/* ---------- typography scale ---------- */
.display {
  font-family: var(--display);
  color: var(--gold);
  font-size: clamp(44px, 7vw, 64px);
  line-height: 1.05;
  margin: 18px 0 6px;
  text-wrap: balance;
}
.standfirst { font-family: var(--serif); color: #e8eef4; font-size: 19px; max-width: 62ch; margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading); font-weight: 700;
  color: var(--cyan);
  text-shadow: var(--glow-cyan);
  line-height: 1.2;
  margin: 1.6em 0 .3em;
  text-wrap: balance;
}
h1 { font-size: 34px; }
h2 { font-size: 28px; }
h3 { font-size: 23px; }
h4 { font-size: 19px; text-shadow: 0 0 8px rgba(86,207,230,.3); }
h5 { font-size: 17px; text-shadow: none; }
h6 { font-size: 15px; text-shadow: none; letter-spacing: .05em; }
.subtitle { font-family: var(--heading); color: #c9974a; margin: 0 0 .5em; }
h4 + .subtitle, h5 + .subtitle, h6 + .subtitle { font-size: 14px; }
p { max-width: 70ch; }
a { color: var(--cyan); text-decoration-color: var(--line-bright); text-underline-offset: 3px; }
a:hover { text-shadow: var(--glow-cyan); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.spec-row {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  border-top: 1px dashed var(--line); padding-top: 4px; margin-top: 28px;
}
.spec-row .chip { font-size: 11px; padding: 2px 8px; }

/* ---------- palette ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.swatch { border: 1px solid var(--line); background: var(--bg-1); border-radius: var(--radius); overflow: hidden; }
.swatch .well { height: 74px; border-bottom: 1px solid var(--line); }
.swatch dl { margin: 0; padding: 10px 12px; font-family: var(--mono); font-size: 12.5px; }
.swatch dt { color: var(--ink); letter-spacing: .04em; }
.swatch dd { margin: 2px 0 0; color: var(--ink-dim); }

/* ---------- hero block ---------- */
.hero {
  display: grid; grid-template-columns: 1.1fr .9fr;
  border: 1px solid var(--line-bright);
  background: linear-gradient(120deg, rgba(14,46,58,.9), rgba(8,26,34,.9));
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 24px rgba(86,207,230,.08), inset 0 0 60px rgba(5,20,25,.6);
}
.hero-copy { padding: 26px 30px 30px; }
.hero-title {
  font-family: var(--heading); font-weight: 700; color: var(--cyan); text-shadow: var(--glow-cyan);
  font-size: clamp(30px, 4.4vw, 42px); line-height: 1.15; margin: 14px 0 4px;
}
.hero-sub { color: #c9974a; font-style: italic; margin: 0 0 14px; }  /* hero keeps italic per hero reference shot */
.hero-holo { position: relative; min-height: 260px; border-left: 1px solid var(--line); }
.hero-holo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero-holo { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--mono); font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan); background: transparent;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm);
  padding: 10px 22px; cursor: pointer;
}
.btn:hover { background: rgba(86,207,230,.1); text-shadow: var(--glow-cyan); }
.btn--primary { background: var(--cyan-deep); border-color: var(--cyan); }
.btn--primary:hover { background: #23708a; }
.btn--alert { color: var(--alert); border-color: #6e3a32; }
.btn--alert:hover { background: rgba(224,106,90,.1); text-shadow: 0 0 10px rgba(224,106,90,.4); }
.btn[disabled] { color: var(--ink-dim); border-color: var(--line); cursor: not-allowed; }
.btn[disabled]:hover { background: transparent; text-shadow: none; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------- callout / blockquote / code / table ---------- */
.callout {
  border: 1px solid var(--line-bright); border-left: 4px solid var(--cyan);
  background: rgba(14,46,58,.55); padding: 14px 18px; max-width: 74ch;
  border-radius: var(--radius);
}
.callout--alert { border-color: #6e3a32; border-left-color: var(--alert); background: rgba(58,22,17,.28); }
.callout .chip { margin-bottom: 6px; }
.callout p { margin: 4px 0 0; }

blockquote {
  border: 1px solid var(--line-bright);
  margin: 0; padding: 18px 22px; max-width: 74ch;
  background: rgba(10,34,44,.5);
  border-radius: var(--radius);
  position: relative;
}
blockquote::before {
  content: '\201C';
  font-family: var(--body); font-weight: 700; font-size: 44px;
  color: var(--cyan); line-height: 0; position: absolute; top: 26px; left: 14px;
}
blockquote p { margin: 0 0 0 26px; }
blockquote footer { margin: 8px 0 0 26px; color: var(--ink-dim); font-family: var(--mono); font-size: 13px; }

pre {
  position: relative;
  font-family: var(--code); font-size: 14.5px; line-height: 1.55;
  color: var(--phosphor);
  text-shadow:
    0 0 2px rgba(141,240,138,.9),
    0 0 8px rgba(141,240,138,.65),
    0 0 22px rgba(141,240,138,.35);
  text-transform: uppercase;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%, #0b1f0e 0%, #06130a 75%);
  border: 1px solid #2e5a32; border-radius: var(--radius);
  padding: 16px 20px; overflow-x: auto; max-width: 100%;
  box-shadow:
    inset 0 0 46px rgba(141,240,138,.14),
    inset 0 0 6px rgba(141,240,138,.18),
    0 0 16px rgba(141,240,138,.12);
}
pre::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -40%;
  height: 34%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(141,240,138,.07) 45%, rgba(141,240,138,.12) 50%, rgba(141,240,138,.07) 55%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  pre::before { animation: crt-sweep 7s linear infinite; }
  @keyframes crt-sweep {
    from { top: -40%; }
    to   { top: 110%; }
  }
}

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th {
  font-family: var(--mono); font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cyan); font-size: 13px; text-align: left;
  background: var(--bg-2); border-bottom: 1px solid var(--line-bright);
  padding: 10px 14px;
}
td { padding: 9px 14px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
tbody tr:hover { background: rgba(86,207,230,.05); }
.status { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; }
.status--ok { color: var(--phosphor); }
.status--warn { color: var(--gold); }
.status--down { color: var(--alert); }

/* ---------- breadcrumb bar ---------- */
.crumbbar {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  color: var(--cyan); background: oklch(.23 .03 222.3);  /* primary-900 */
  padding: 6px 28px;
  text-transform: uppercase;
}

/* ---------- document headings (richtext default: no glow) ---------- */
.doc-heads h1, .doc-heads h2, .doc-heads h3,
.doc-heads h4, .doc-heads h5, .doc-heads h6 {
  font-family: var(--heading); font-weight: 500;
  color: var(--ink); text-shadow: none;
  margin: .35em 0;
}
.doc-heads h1 { font-size: 2rem; }
.doc-heads h2 { font-size: 1.7rem; }
.doc-heads h3 { font-size: 1.5rem; }
.doc-heads h4 { font-size: 1.35rem; }
.doc-heads h5 { font-size: 1.2rem; }
.doc-heads h6 { font-size: 1.1rem; }

/* ---------- inline code ---------- */
code {
  font-family: var(--code); font-size: .92em;
  color: var(--cyan);
  background: oklch(.21 .03 226.5 / .75);
  border: 1px solid oklch(.409 .053 219.7);
  border-radius: .25em; padding: .12em .45em;
  white-space: pre-wrap; /* improvement over prototype: long lines wrap */
}

/* ---------- live entity card ----------
   From relationship-frame.tsx: rounded-md border-2 border-secondary bg-primary-800,
   title text-primary-400 font-semibold, info font-sans text-sm / text-xs. */
.entity-card {
  display: inline-flex; gap: 12px; align-items: center;
  margin: 8px 0; padding: 8px 14px 8px 8px; max-width: 400px;
  background: oklch(.317 .041 218.66);              /* primary-800 */
  border: 2px solid oklch(.4393 .0534 236.12);      /* secondary */
  border-radius: 8px;                                /* radius-md */
  box-shadow: 0 5px 10px rgb(0 0 0 / .45);          /* shadow-nav-page */
}
.entity-card .avatar {
  width: 72px; height: 72px; flex: none; border-radius: 8px;
  background: linear-gradient(180deg, #4d5a64, #3a454e);
  display: grid; place-items: center; overflow: hidden;
}
.entity-card b {
  display: block; font-family: var(--heading); font-weight: 700; font-size: 15.5px;
  color: var(--ink);                                /* foreground — pale blue-white */
}
.entity-card .role { font-family: var(--body); font-weight: 500; color: var(--ink); font-size: 14px; }
.entity-card .stats { display: flex; gap: 16px; font-family: var(--heading); font-weight: 500; font-size: 12.5px; color: var(--ink); opacity: .9; margin-top: 4px; }

/* ---------- lists ----------
   From ListItems/style.module.css — list content is set in EXO, not Montserrat. */
ul.checklist { list-style: none; padding: 0; margin: 0; font-family: var(--heading); }
ul.checklist li { display: grid; grid-template-columns: 1em auto; gap: .5em; align-items: center; margin-top: .35rem; line-height: 1.1; }
ul.checklist .box {
  width: 1.15em; height: 1.15em;
  background: oklch(.23 .03 222.3);                 /* primary-900 */
  border: .1em solid oklch(.503 .065 219.9);        /* primary-600 */
  border-radius: .25em;
  display: grid; place-content: center;
  transform: translateY(-.075em);
}
ul.checklist .box.on::after {
  content: ''; width: .65em; height: .65em;
  background: oklch(.674 .088 220.38);              /* primary-400 */
}

ol.chips, ol.chips ol { list-style: none; counter-reset: item; margin: 0; padding: 0; }
ol.chips { display: grid; row-gap: .5em; font-family: var(--heading); }
ol.chips ol { display: grid; row-gap: .5em; margin-left: 2em; margin-top: .5em; }
ol.chips li { display: grid; grid-template-columns: auto 1fr; gap: .6em; align-items: start; line-height: 1.4; }
ol.chips li > ol { grid-column: 1 / -1; }
ol.chips li::before {
  counter-increment: item;
  content: counters(item, ".");
  font-family: var(--mono); font-size: .8em; font-weight: 600;
  line-height: 1.5em; padding: 0 .45em; align-self: start; justify-self: start;
  color: oklch(.752 .097 219.87);                   /* primary-300 */
  background: oklch(.317 .041 218.66);              /* primary-800 */
  border-radius: .25em;
}

ul.rings, ul.rings ul { list-style: none; margin: 0; padding: 0; }
ul.rings { font-family: var(--heading); }
ul.rings ul { margin-left: 1.5em; }
ul.rings li { margin: 5px 0; padding-left: 19px; position: relative; line-height: 1.4; }
ul.rings li::before {
  content: ''; position: absolute; left: 2px; top: .45em;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid oklch(.674 .088 220.38);      /* primary-400 */
}

/* ---------- slim quote & rule ---------- */
.quote-slim {
  border-left: 3px solid var(--cyan-deep);
  padding: 2px 0 2px 16px; margin: 0;
  font-style: italic; color: var(--ink); max-width: 74ch;
}
hr.rule { border: none; border-top: 1px solid var(--line); margin: 26px 0; }

/* ---------- terminal line (typewriter breadcrumb) ----------
   From prototype: w-fit border-t-2 border-accent bg-primary-800 px-2,
   TerminalEffect types at 15ms/char, chars burn in, block cursor while typing. */
.term-line {
  display: inline-block; width: fit-content;
  font-family: var(--mono); font-size: 14.5px;
  color: var(--ink); white-space: pre;
  background: oklch(.317 .041 218.66);            /* primary-800 */
  border-top: 2px solid oklch(.398 .07 227.39);   /* accent */
  padding: 2px 8px 3px;
  min-height: 1.5em;
}
.term-line .ch { animation: term-burn-in 1.5s ease-out; }
.term-line .cursor {
  display: inline-block; width: 12px; height: 1.05em;
  vertical-align: text-bottom; margin-left: 1px;
  background: oklch(.919 .041 223.94);            /* primary-100 */
}
@keyframes term-burn-in {
  0%   { filter: brightness(1.8); text-shadow: 0 0 6px rgb(0, 218, 102); }
  100% { filter: brightness(1); }
}

/* ---------- footer ---------- */
.endcap {
  margin-top: 88px; border-top: 1px solid var(--line); padding-top: 18px;
  color: var(--ink-dim); font-family: var(--mono); font-size: 13px; letter-spacing: .05em;
}