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

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f3;
  --bg-tertiary: #eeece8;
  --text-primary: #1a1a18;
  --text-secondary: #6b6b66;
  --text-tertiary: #9c9c97;
  --border-light: rgba(0,0,0,0.09);
  --border-mid: rgba(0,0,0,0.16);
  --radius-md: 8px;
  --radius-lg: 12px;
  --accent: #534AB7;
  --accent-bg: #EEEDFE;
  --accent-border: #AFA9EC;
  --accent-text: #3C3489;
  --ok: #085041;
  --ok-bg: #E1F5EE;
  --ok-border: #5DCAA5;
  --warn: #633806;
  --warn-bg: #FAEEDA;
  --warn-border: #EF9F27;
  --bad: #791F1F;
  --bad-bg: #FCEBEB;
  --bad-border: #F09595;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #1c1c1a; --bg-secondary: #252523; --bg-tertiary: #2e2e2b;
    --text-primary: #f0ede8; --text-secondary: #9c9c97; --text-tertiary: #6b6b66;
    --border-light: rgba(255,255,255,0.07); --border-mid: rgba(255,255,255,0.13);
    --accent: #8b84d7; --accent-bg: #26215C; --accent-border: #534AB7; --accent-text: #AFA9EC;
    --ok: #7FD9BB; --ok-bg: #123B33; --ok-border: #2F7D66;
    --warn: #E8B868; --warn-bg: #3A2C12; --warn-border: #8A6420;
    --bad: #F0A3A3; --bad-bg: #3A1A1A; --bad-border: #8A3A3A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg-primary: #1c1c1a; --bg-secondary: #252523; --bg-tertiary: #2e2e2b;
  --text-primary: #f0ede8; --text-secondary: #9c9c97; --text-tertiary: #6b6b66;
  --border-light: rgba(255,255,255,0.07); --border-mid: rgba(255,255,255,0.13);
  --accent: #8b84d7; --accent-bg: #26215C; --accent-border: #534AB7; --accent-text: #AFA9EC;
  --ok: #7FD9BB; --ok-bg: #123B33; --ok-border: #2F7D66;
  --warn: #E8B868; --warn-bg: #3A2C12; --warn-border: #8A6420;
  --bad: #F0A3A3; --bad-bg: #3A1A1A; --bad-border: #8A3A3A;
  color-scheme: dark;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-tertiary); color: var(--text-primary);
  min-height: 100vh; padding: 2rem 1rem; line-height: 1.6;
}
.wrap { max-width: 860px; margin: 0 auto; }

/* ---- header ---- */
.masthead { margin-bottom: 1.5rem; }
.masthead h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.4px; margin-bottom: 8px; }
.masthead p { font-size: 14px; color: var(--text-secondary); max-width: 680px; }
.page-nav { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
.page-nav a {
  color: var(--accent); text-decoration: none;
  border-bottom: 0.5px solid var(--accent-border); padding-bottom: 1px;
}
.page-nav a:hover { border-bottom-color: var(--accent); }
.page-nav a.here { color: var(--text-tertiary); border-bottom-color: transparent; pointer-events: none; }

/* ---- search ---- */
.search-card {
  background: var(--bg-primary); border: 0.5px solid var(--border-mid);
  border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.5rem;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.search-card input {
  flex: 1; min-width: 200px; font-size: 14px; padding: 9px 14px;
  border: 0.5px solid var(--border-mid); border-radius: var(--radius-md);
  background: var(--bg-secondary); color: var(--text-primary); outline: none;
  transition: border-color .15s;
}
.search-card input:focus { border-color: var(--accent); }
.btn-primary {
  font-size: 14px; padding: 9px 22px; border: none; border-radius: var(--radius-md);
  background: var(--accent); color: #fff; cursor: pointer; font-weight: 500;
  transition: opacity .15s; white-space: nowrap;
}
.btn-primary:hover { opacity: .85; }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }

/* ---- trail ---- */
.crumbs { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumbs button { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.crumbs .sep { opacity: .5; }
.crumbs .here { color: var(--text-primary); font-weight: 500; }

/* ---- current field ---- */
.node-name { font-size: 19px; font-weight: 600; margin: 0; letter-spacing: -0.2px; }
.node-blurb { font-size: 14px; color: var(--text-secondary); margin: 4px 0 0; max-width: 680px; }

/* ---- running example ---- */
.example {
  background: var(--bg-primary); border: 0.5px solid var(--border-mid);
  border-left: 2px solid var(--accent); border-radius: var(--radius-md);
  padding: 1rem 1.25rem; margin: 1.25rem 0 0;
}
.example .tag { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); font-weight: 600; display: block; margin-bottom: 6px; }
.example h3 { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--accent); margin-bottom: 6px; }
.example p { font-size: 14px; line-height: 1.7; margin: 0; }

/* ---- subfields ---- */
.sub-label { font-size: 12px; color: var(--text-secondary); margin: 1.5rem 0 10px; }
.chips { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: 8px; margin: 1.25rem 0 0; padding: 0; }
.chip {
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: var(--bg-secondary); border: 0.5px solid var(--border-mid);
  border-radius: var(--radius-md); padding: 10px 12px; transition: all .15s;
}
.chip:hover { border-color: var(--accent); background: var(--bg-primary); }
.chip b { display: block; font-size: 13px; font-weight: 500; margin-bottom: 3px; }
.chip i { display: block; font-size: 11px; font-style: normal; color: var(--text-secondary); line-height: 1.4; }

/* on the example page the demands carry the content */
.demands .chips { display: block; }
.demands .chip { border: none; border-left: 2px solid var(--border-mid); border-radius: 0; background: none; padding: 8px 0 8px 12px; margin-bottom: 2px; }
.demands .chip:hover { border-left-color: var(--accent); background: var(--bg-primary); }
.demands .chip i { font-size: 12px; }

/* ---- actions ---- */
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 1.5rem 0 0; }
.btn-ghost {
  font-size: 14px; padding: 9px 18px; border-radius: var(--radius-md);
  border: 0.5px solid var(--border-mid); background: var(--bg-primary);
  color: var(--text-primary); cursor: pointer; text-decoration: none; display: inline-block;
  transition: all .15s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---- pipeline ---- */
.pipeline { background: var(--bg-primary); border: 0.5px solid var(--border-mid); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.pipeline-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); margin-bottom: 14px; }
.pipeline-steps { display: flex; flex-direction: column; gap: 12px; }
.pipeline-step { display: flex; align-items: center; gap: 12px; }
.step-icon { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.step-icon.pending { background: var(--bg-secondary); color: var(--text-tertiary); border: 0.5px solid var(--border-mid); }
.step-icon.running { background: var(--accent-bg); color: var(--accent); border: 0.5px solid var(--accent-border); animation: breathe 1.2s infinite; }
.step-icon.done { background: var(--ok-bg); color: var(--ok); border: 0.5px solid var(--ok-border); }
.step-icon.error { background: var(--bad-bg); color: var(--bad); border: 0.5px solid var(--bad-border); }
@keyframes breathe { 0%,100%{opacity:1} 50%{opacity:.5} }
@media (prefers-reduced-motion: reduce) { .step-icon.running { animation: none; } }
.step-label { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.step-label strong { color: var(--text-primary); font-weight: 500; }
.step-detail { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

.err { background: var(--bad-bg); border: 0.5px solid var(--bad-border); border-radius: var(--radius-lg); padding: 1rem 1.25rem; font-size: 13px; color: var(--bad); margin: 1rem 0; }

/* ---- narrative ---- */
.opening { font-size: 15px; line-height: 1.75; margin: 1.5rem 0 0; max-width: 700px; padding-left: 14px; border-left: 2px solid var(--accent); }
.spine { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.beat { display: grid; grid-template-columns: 1fr minmax(0,280px); gap: 14px 20px; margin-bottom: 10px; background: var(--bg-primary); border: 0.5px solid var(--border-light); border-radius: var(--radius-lg); padding: 1rem 1.25rem; }
.beat:hover { border-color: var(--border-mid); }
.beat-text { min-width: 0; }
.yr { font-family: var(--mono); font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; }
.move { font-size: 14px; font-weight: 500; margin: 3px 0 6px; }
.beat-text p { font-size: 13px; line-height: 1.7; margin: 0; }
.cite { min-width: 0; align-self: start; background: var(--bg-secondary); border-radius: var(--radius-md); padding: 10px 12px; }
.cite .ct { font-size: 12.5px; font-weight: 500; line-height: 1.45; margin-bottom: 4px; overflow-wrap: break-word; }
.cite .ct a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-mid); }
.cite .ct a:hover { text-decoration-color: var(--accent); }
.cite .ca { font-size: 11.5px; color: var(--text-secondary); margin-bottom: 4px; line-height: 1.4; overflow-wrap: break-word; }
.cite .cv { font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cite .found { font-size: 10.5px; color: var(--ok); margin-top: 6px; }
.venue { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: var(--accent-bg); color: var(--accent-text); font-weight: 500; white-space: nowrap; }

.closing { background: var(--accent-bg); border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin-top: 1rem; font-size: 13.5px; line-height: 1.7; }
.closing b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-text); margin-bottom: 5px; }

.rest { margin-top: 1.25rem; font-size: 13px; }
.rest summary { cursor: pointer; color: var(--text-secondary); }
.rest ul { margin: 10px 0 0 1.1rem; }
.rest li { margin-bottom: 5px; line-height: 1.5; }
.rest a { color: var(--accent); text-decoration: none; }
.rest a:hover { text-decoration: underline; }
.rest .cv { color: var(--text-tertiary); font-size: 11.5px; }

.checked { font-size: 12px; color: var(--text-tertiary); line-height: 1.65; padding: 10px 14px; margin-top: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius-md); border: 0.5px solid var(--border-light); }

/* ---- walkthrough ---- */
.runline { font-size: 13px; color: var(--text-secondary); margin: 1.25rem 0 0; padding: 10px 14px; background: var(--bg-primary); border: 0.5px solid var(--border-mid); border-radius: var(--radius-md); }
.step { background: var(--bg-primary); border: 0.5px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.25rem; margin-top: 10px; display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.step-n { width: 26px; height: 26px; border-radius: 50%; border: 0.5px solid var(--border-mid); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; color: var(--accent); }
.step-body { min-width: 0; }
.step-sub { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); font-weight: 600; margin-bottom: 4px; }
.step-body h4 { font-size: 16px; font-weight: 600; margin-bottom: 8px; line-height: 1.35; }
.step-body p { font-size: 13px; line-height: 1.7; margin-bottom: 10px; }
.cant { font-size: 12.5px !important; color: var(--warn); background: var(--warn-bg); border-radius: var(--radius-md); padding: 8px 11px; }
.cant b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
pre.code, pre.formal { font-family: var(--mono); font-size: 12px; line-height: 1.65; background: var(--bg-secondary); border-radius: var(--radius-md); padding: 11px 13px; margin-bottom: 10px; overflow-x: auto; white-space: pre; }
pre.formal { border-left: 2px solid var(--accent); }

.fig { margin: 0 0 12px; max-width: 520px; }
.fig svg { width: 100%; height: auto; display: block; }
.figslot { min-height: 40px; }
figcaption { font-size: 11.5px; color: var(--text-secondary); margin-top: 5px; line-height: 1.5; }

.vid { margin-bottom: 4px !important; }
a.yt { font-size: 12.5px; color: var(--accent); text-decoration: none; }
a.yt:hover { text-decoration: underline; }

.chk { border-radius: var(--radius-md); padding: 9px 12px; margin-bottom: 10px; }
.chk-tag { display: block; font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 3px; }
.chk-note { display: block; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
.chk code { font-family: var(--mono); font-size: 11px; }
.ok-chk { background: var(--ok-bg); } .ok-chk .chk-tag { color: var(--ok); }
.bad-chk { background: var(--bad-bg); } .bad-chk .chk-tag { color: var(--bad); }
.nil-chk { background: var(--bg-secondary); } .nil-chk .chk-tag { color: var(--text-tertiary); }

footer { margin-top: 3rem; padding-top: 1rem; border-top: 0.5px solid var(--border-light); font-size: 11px; color: var(--text-tertiary); line-height: 1.7; }
footer em { font-style: normal; color: var(--text-secondary); }

@media (max-width: 680px) {
  .beat { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 10px; }
}

/* home page sits a little lower and keeps its two choices close to the search */
.home { max-width: 640px; }
.home .masthead { margin-bottom: 1.25rem; }
.home .actions { margin-top: 0; }
.home .btn-ghost { flex: 1 1 220px; text-align: center; padding: 14px 18px; font-size: 14.5px; }