/* ==========================================================================
   System-0 Design System · components.css · v2 "Signal"
   Base elements + reusable components. Reads tokens.css only.
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-fg);font-family:var(--font-body);font-size:var(--font-size-body);line-height:var(--line-height-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight);margin:0;text-wrap:balance}
h2{font-size:var(--font-size-section)}
h3{font-size:var(--font-size-title);letter-spacing:-.02em;line-height:var(--line-height-snug);font-weight:var(--font-weight-medium)}
p{margin:0;max-width:62ch}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:var(--radius-sm)}
::selection{background:var(--color-accent);color:var(--color-on-accent)}

/* --- Layout primitives --------------------------------------------------- */
.wrap{max-width:var(--layout-container);margin:0 auto;padding-left:var(--layout-gutter-l);padding-right:var(--layout-gutter-r)}
.section{padding-block:var(--space-section);position:relative}
.section + .section{border-top:1px solid var(--rule-color)}
.stack{display:flex;flex-direction:column;gap:var(--space-stack)}

/* Backdrop grid: faint lab graph paper, masked to fade at the edges */
.gridbg{position:relative;isolation:isolate}
.gridbg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%)}
.aura{position:relative;isolation:isolate}
.aura::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--gradient-aura)}

/* --- Text styles --------------------------------------------------------- */
.lede{font-size:var(--font-size-lead);max-width:56ch;color:var(--color-fg-muted)}
.lede strong{color:var(--color-fg);font-weight:var(--font-weight-medium)}
.mute{color:var(--color-fg-muted)}
.mono{font-family:var(--font-mono);font-size:.78rem;letter-spacing:var(--letter-spacing-mono)}
.grad{color:var(--color-accent-text)}  /* accent emphasis: solid colour, one phrase per view */
.eyebrow{font-family:var(--font-mono);font-size:var(--font-size-label);letter-spacing:var(--letter-spacing-label);text-transform:uppercase;color:var(--eyebrow-color);display:flex;align-items:center;gap:var(--space-3)}
.eyebrow b{font-weight:var(--font-weight-medium);color:var(--eyebrow-index-color)}
.eyebrow::after{content:"";flex:0 1 var(--space-12);height:1px;background:var(--color-border-strong)}
.quote{margin:0;font-family:var(--font-quote);font-style:italic;font-weight:var(--font-weight-regular);font-size:var(--font-size-quote);line-height:1.05;letter-spacing:-.01em;text-wrap:balance}
.cite{display:block;margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--font-size-micro);letter-spacing:var(--letter-spacing-label);text-transform:uppercase;color:var(--color-fg-muted);font-style:normal}

/* --- Chip ---------------------------------------------------------------- */
.chip{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border:1px solid var(--chip-border);background:var(--chip-bg);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--font-size-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--color-fg)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--chip-dot)}
.chip.is-negative{--chip-dot:var(--color-negative)}

/* --- Button -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--button-pad-y) var(--button-pad-x);border:1px solid var(--button-bg);background:var(--button-bg);color:var(--button-fg);font-weight:var(--button-font-weight);text-decoration:none;border-radius:var(--button-radius);transition:border-color var(--duration-fast),background-color var(--duration-fast)}
.btn:hover{background:var(--button-hover-bg);border-color:var(--button-hover-bg)}
.btn .arr{transition:transform var(--duration-base) var(--ease-out)}
.btn:hover .arr{transform:translateX(3px)}
.btn.ghost{background:var(--button-ghost-bg);color:var(--color-fg);border-color:var(--button-ghost-border)}
.btn.ghost:hover{border-color:var(--button-ghost-hover-border);background:var(--button-ghost-bg)}

/* --- Card grid (glass) --------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--card-min,260px)),1fr));gap:var(--space-4)}
.card{position:relative;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--card-radius);padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--space-3);min-width:0;backdrop-filter:blur(var(--card-blur));-webkit-backdrop-filter:blur(var(--card-blur));transition:background-color var(--duration-base),border-color var(--duration-base)}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(160deg,rgb(255 255 255 / .08),transparent 35%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.cards.is-interactive .card:hover{background:var(--card-hover-bg);border-color:var(--color-border-strong)}
.card .idx{font-family:var(--font-mono);font-size:var(--font-size-micro);letter-spacing:.1em;color:var(--color-fg-faint)}
.card-foot{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--rule-color);font-family:var(--font-mono);font-size:var(--font-size-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--color-negative)}

/* --- Rule list ----------------------------------------------------------- */
.rules{display:flex;flex-direction:column;border-top:1px solid var(--rule-color)}
.rules > *{border-bottom:1px solid var(--rule-color)}

/* --- Stratum (layered list with a highlighted row) ----------------------- */
.stratum{display:grid;grid-template-columns:130px minmax(0,1fr);gap:var(--space-6);padding:var(--space-7) var(--space-5);border:1px solid transparent;border-top-color:var(--rule-color);align-items:start}
.stratum .depth{font-family:var(--font-mono);font-size:var(--font-size-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--color-fg-muted);padding-top:var(--space-2)}
.stratum h3{font-size:var(--font-size-title-lg);color:var(--color-fg-faint);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight)}
.stratum h3 small{display:block;font-family:var(--font-mono);font-weight:var(--font-weight-regular);font-size:var(--font-size-label);letter-spacing:.06em;text-transform:uppercase;margin-top:var(--space-2);color:var(--color-fg-muted)}
.stratum p{margin-top:var(--space-3);color:var(--color-fg-muted)}
.stratum.is-near h3{color:var(--color-fg-muted)}
.stratum.is-highlight{background:var(--highlight-wash);border-color:var(--highlight-border);border-radius:var(--radius-md)}
.stratum.is-highlight h3{color:var(--color-accent-text)}
.stratum.is-highlight .depth{color:var(--color-accent-text)}
.stratum.is-highlight p{color:var(--color-fg)}
@media (max-width:640px){.stratum{grid-template-columns:1fr;gap:var(--space-1)}.stratum .depth{padding-top:0}}

/* --- Media (photography) ------------------------------------------------- */
.media{position:relative;margin:0;border-radius:var(--media-radius);overflow:hidden;border:1px solid var(--media-border);background:var(--color-bg-deep);isolation:isolate}
.media img{width:100%;height:100%;object-fit:cover;filter:var(--image-filter)}
.media::after{content:"";position:absolute;inset:0;background:var(--image-tint);mix-blend-mode:color;pointer-events:none}
.media.is-raw::after{display:none}
/* HUD: corner brackets + mono caption, the "machine is looking" layer */
.hud{position:absolute;inset:var(--space-4);pointer-events:none;z-index:1;
  background:
    linear-gradient(var(--media-hud),var(--media-hud)) top left/18px 1px,linear-gradient(var(--media-hud),var(--media-hud)) top left/1px 18px,
    linear-gradient(var(--media-hud),var(--media-hud)) top right/18px 1px,linear-gradient(var(--media-hud),var(--media-hud)) top right/1px 18px,
    linear-gradient(var(--media-hud),var(--media-hud)) bottom left/18px 1px,linear-gradient(var(--media-hud),var(--media-hud)) bottom left/1px 18px,
    linear-gradient(var(--media-hud),var(--media-hud)) bottom right/18px 1px,linear-gradient(var(--media-hud),var(--media-hud)) bottom right/1px 18px;
  background-repeat:no-repeat}
.hud-label{position:absolute;z-index:2;font-family:var(--font-mono);font-size:var(--font-size-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--media-hud)}
.hud-label b{color:var(--media-hud-accent);font-weight:var(--font-weight-medium)}
.hud-label.tl{top:var(--space-6);left:var(--space-7)}
.hud-label.tr{top:var(--space-6);right:var(--space-7);text-align:right}
.hud-label.bl{bottom:var(--space-6);left:var(--space-7)}
.hud-label.br{bottom:var(--space-6);right:var(--space-7);text-align:right}
.media figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--space-4) var(--space-5);font-family:var(--font-mono);font-size:var(--font-size-micro);color:var(--color-fg-muted);background:linear-gradient(transparent,rgb(3 4 7 / .8))}

/* --- Readout list (key / value) ------------------------------------------ */
.readout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-4);align-items:baseline}
.readout dt{font-family:var(--font-mono);font-size:var(--font-size-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--color-fg-muted)}
.readout dd{margin:0}

/* --- Band ---------------------------------------------------------------- */
.band{background:var(--color-bg-deep)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}