/* COG-AI shared design system for sub-pages (notes, telemetry) */

:root{
  --carbon:#0A0A0B;
  --panel:#111113;
  --panel2:#151517;
  --bone:#E9E4DA;
  --tx:#CFC9BE;
  --dim:#99938A;
  --faint:rgba(233,228,218,.16);
  --hair:rgba(233,228,218,.08);
  --verm:#FF4200;
  --verm-soft:#FF9A6B;
  --grid:rgba(233,228,218,.045);
  --navbg:rgba(10,10,11,.82);
  --disp:'Unbounded','Archivo Black',Impact,sans-serif;
  --body:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'Fragment Mono','IBM Plex Mono',ui-monospace,Menlo,monospace;
  --gutter:clamp(20px,4.5vw,72px);
}
[data-theme="blueprint"]{
  --carbon:#E8E3D7;
  --panel:#DFD9CB;
  --panel2:#D5CEBE;
  --bone:#17161B;
  --tx:#2E2B33;
  --dim:#5C564A;
  --faint:rgba(23,22,27,.25);
  --hair:rgba(23,22,27,.12);
  --verm:#D63A00;
  --verm-soft:#A33308;
  --grid:rgba(23,22,27,.06);
  --navbg:rgba(232,227,215,.85);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--carbon)}
body{
  color:var(--tx);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:72px 72px;
  background-position:center top;
}
::selection{background:var(--verm);color:var(--carbon)}
a{color:inherit}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--verm);outline-offset:3px}
img,svg{max-width:100%}

/* ── Top bar ────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:95;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--gutter);height:64px;
  background:var(--navbg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:16px;letter-spacing:.02em;color:var(--bone);text-decoration:none}
.brand em{font-style:normal;color:var(--verm)}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-link{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--dim);text-decoration:none;padding:6px 0}
.nav-link:hover{color:var(--bone)}
.nav-cta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--verm);border:1px solid var(--verm);padding:9px 16px;text-decoration:none;transition:background .25s,color .25s}
.nav-cta:hover{background:var(--verm);color:var(--carbon)}
.mode-btn{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);border:1px solid var(--faint);padding:9px 12px;transition:color .25s,border-color .25s}
.mode-btn:hover{color:var(--bone);border-color:var(--dim)}
@media(max-width:640px){.nav-link{display:none}}

/* ── Document prose ─────────────────────────────────────── */
.doc{max-width:760px;margin:0 auto;padding:130px var(--gutter) 90px}
.doc-kick{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.kick{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--verm);white-space:nowrap}
.kick-line{flex:1;height:1px;background:var(--faint)}
.fig{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);white-space:nowrap}
.doc h1{
  font-family:var(--disp);font-weight:800;color:var(--bone);
  font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.08;letter-spacing:-.01em;
  text-wrap:balance;margin-bottom:14px;
}
.doc-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);margin-bottom:44px}
.doc-meta b{color:var(--verm);font-weight:400}
.doc h2{
  font-family:var(--disp);font-weight:700;color:var(--bone);
  font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.25;
  margin:2.4em 0 .8em;
}
.doc p{margin:0 0 1.2em;max-width:68ch}
.doc strong{color:var(--bone)}
.doc ul,.doc ol{margin:0 0 1.2em;padding-left:1.4em}
.doc li{margin-bottom:.4em}
.doc li::marker{color:var(--verm)}
.doc a{color:var(--bone);text-decoration-color:var(--verm);text-underline-offset:3px}
.doc a:hover{color:var(--verm)}
.doc hr{border:0;border-top:1px solid var(--faint);margin:2.5em 0}
.doc code{font-family:var(--mono);font-size:.86em;color:var(--verm-soft);background:var(--panel);border:1px solid var(--hair);padding:2px 6px}
.doc pre{
  background:var(--panel);border:1px solid var(--faint);
  padding:18px 20px;margin:0 0 1.4em;overflow-x:auto;
  font-family:var(--mono);font-size:12.5px;line-height:1.8;letter-spacing:.02em;color:var(--tx);
}
.doc pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.doc table{border-collapse:collapse;margin:0 0 1.4em;font-family:var(--mono);font-size:12px;letter-spacing:.04em;width:100%}
.doc .tbl{overflow-x:auto;margin:0 0 1.4em}
.doc .tbl table{margin:0}
.doc th{color:var(--verm);font-weight:400;text-align:left;letter-spacing:.14em;font-size:10.5px}
.doc th,.doc td{border-bottom:1px solid var(--hair);padding:9px 18px 9px 0;vertical-align:top;font-variant-numeric:tabular-nums}
.doc blockquote{border-left:2px solid var(--verm);padding:4px 0 4px 20px;margin:0 0 1.4em;color:var(--dim)}
.callout{border:1px solid var(--faint);background:var(--panel);padding:16px 20px;margin:0 0 1.4em}
.callout b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--verm);font-weight:400;margin-bottom:6px}

/* ── Note listing rows ──────────────────────────────────── */
.nrow{
  display:grid;grid-template-columns:96px 1fr;gap:6px 18px;align-items:baseline;
  padding:26px 0;border-top:1px solid var(--faint);text-decoration:none;color:inherit;
}
.nrow:last-of-type{border-bottom:1px solid var(--faint)}
.nrow-num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--verm)}
.nrow-title{font-family:var(--disp);font-weight:700;font-size:clamp(1.05rem,2vw,1.4rem);color:var(--bone);letter-spacing:.01em;transition:color .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.nrow-meta{grid-column:2;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--dim)}
.nrow-desc{grid-column:2;color:var(--dim);max-width:62ch;font-size:.95rem}
.nrow:hover .nrow-title{color:var(--verm);transform:translateX(8px)}
@media(max-width:640px){.nrow{grid-template-columns:64px 1fr}}

/* ── Foot bar ───────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--faint);margin-top:40px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px var(--gutter);max-width:1360px;margin-inline:auto;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);
}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--bone)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}
@media print{
  :root{--carbon:#fff;--panel:#fff;--panel2:#f2efe8;--bone:#111;--tx:#222;--dim:#444;
    --faint:rgba(0,0,0,.3);--hair:rgba(0,0,0,.15);--verm:#C33200;--verm-soft:#8A2A00;--grid:transparent;--navbg:#fff}
  body{background:#fff;background-image:none}
  .nav,.mode-btn,.nav-cta{display:none}
  .doc{padding-top:30px}
}