/* ============================================================================
   ydid.css — ydid.org v1 stylesheet (R325/§318 piece ydid-issuer).
   ONE DESIGN LANGUAGE (brief item 4): every token below is carried from
   ysdk.org's ysdk.css (R321/§314 palette audit) — the goldenratiocolors.com
   golden-ratio RGB ladder {0,14,37,60,97,158,195,218,241,255}, retrieved live
   2026-08-30 by that lane; grcNNN = ladder indices for R,G,B; brand grc258,
   accent grc955 (the same values ysdk.org's manifest cites in brand.paletteSource).
   The reused wall module (wall.css) consumes the --l-* tokens defined here, so it
   renders in this language without a rewrite.
   Laws: container queries for layout (spec 5.1); oklch/color-mix relative colour
   only from the ladder tokens (5.2); floors never pins (5.6); reduced motion is a
   real path (5.7); no viewport-height units; no inline styles (CSP style-src 'self').
============================================================================ */

@layer reset, tokens, layout, components, a11y;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { min-block-size: 100dvb; -webkit-font-smoothing: antialiased; }
  img, svg { display: block; max-inline-size: 100%; }
  input, textarea, button { font: inherit; color: inherit; }
  h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: inherit; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    --s1: .382rem; --s2: .618rem; --s3: 1rem;
    --s4: 1.618rem; --s5: 2.618rem; --s6: 4.236rem; --s7: 6.854rem;

    --h: 232;
    --brand:     #259ef1; /* grc258 */
    --brand-lit: #3cc3f1; /* grc368 */
    --brand-dim: #00619e; /* grc045 */
    --accent:    #ff9e9e; /* grc955 */

    --void:  #0e0e0e; /* grc111 */
    --sunk:  #0e0e25; /* grc112 */
    --surf:  #0e2525; /* grc122 */
    --surf2: #252525; /* grc222 */
    --edge:  #253c3c; /* grc233 */
    --edge2: #3c6161; /* grc344 */
    --well:  #000e0e; /* grc011 — recessed fields and code */

    --ink:   #f1f1f1; /* grc888 */
    --ink2:  #c3c3c3; /* grc666 */
    --ink3:  #9e9e9e; /* grc555 */

    --ok:   #61c361; /* grc464 */
    --warn: #f1c33c; /* grc863 */
    --bad:  #f16161; /* grc844 */

    --ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, monospace;

    --tap: 44px; --tap-fine: 36px;
    --r1: .5rem; --r2: .875rem; --r3: 1.25rem;
    --dur: 220ms; --ease: cubic-bezier(.2,0,0,1);
    --maxw: 68rem;
    color-scheme: dark;

    /* the reused wall module reads these (wall.css contract) */
    --l-paper: var(--well); --l-raised: var(--surf); --l-edge: var(--edge); --l-rule: var(--edge2);
    --l-ink: var(--ink); --l-ink2: var(--ink2); --l-dim: var(--ink3);
    --l-accent: var(--brand); --l-accent2: var(--brand-lit); --l-deny: var(--bad); --l-on-accent: var(--void);
    --l-veil: var(--void); --l-hi: rgb(255 255 255 / .056);
    --l-body: var(--ui); --l-mono: var(--mono);
    --yf-s0: var(--s1); --yf-s1: var(--s2); --yf-s2: var(--s3); --yf-s3: var(--s4); --yf-r1: var(--r1);
  }
  body {
    font-family: var(--ui);
    font-size: clamp(1rem, .96rem + .18cqi, 1.0625rem);
    line-height: 1.62;
    color: var(--ink2);
    background:
      radial-gradient(120% 80% at 50% -8%, rgb(0 60 97 / .38), transparent 62%),   /* grc034 */
      radial-gradient(90% 60% at 92% 8%, rgb(97 14 37 / .18), transparent 55%),    /* grc412 */
      var(--void);
    background-attachment: fixed;
  }
}

@layer layout {
  main { container-type: inline-size; container-name: page; display: block; }
  .band {
    inline-size: min(100% - 2.5rem, var(--maxw));
    margin-inline: auto;
    padding-block: var(--s6);
    border-block-start: 1px solid oklch(from var(--edge) l c h / .38);
  }
  .band:first-of-type, .band-first { border-block-start: 0; }
  .band-h { font-size: clamp(1.5rem, 1.1rem + 1.5cqi, 2.2rem); color: var(--ink); letter-spacing: -.02em; }
  .band-sub { margin-block-start: var(--s3); max-inline-size: 62ch; color: var(--ink3); }

  .topbar {
    position: sticky; inset-block-start: 0; z-index: 40;
    container-type: inline-size; container-name: topbar;
    display: flex; align-items: center; gap: var(--s4);
    inline-size: min(100% - 2.5rem, var(--maxw));
    margin-inline: auto; padding-block: var(--s3);
    background: oklch(from var(--void) l c h / .82);
    backdrop-filter: blur(14px) saturate(1.3);
    border-block-end: 1px solid oklch(from var(--edge) l c h / .3);
  }
  .brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
  .brand-mark { inline-size: 26px; block-size: 30px; }
  .bm-hex { fill: none; stroke: var(--brand); stroke-width: 2.5; }
  .bm-core { fill: var(--brand); opacity: .9; }
  .brand-word { font-weight: 700; letter-spacing: .06em; color: var(--ink); }
  .brand-ver { font: 600 .625rem/1 var(--mono); color: var(--ink3);
    border: 1px solid var(--edge); border-radius: 999px; padding: .25rem .45rem; }
  .topnav { display: flex; gap: var(--s4); margin-inline-start: auto; flex-wrap: wrap; }
  .topnav a { color: var(--ink3); text-decoration: none; font-size: .9375rem;
    padding-block: .35rem; border-block-end: 2px solid transparent; transition: color var(--dur) var(--ease); }
  .topnav a:hover, .topnav a[aria-current="page"] { color: var(--ink); border-color: var(--brand); }
  @container topbar (inline-size < 560px) { .topnav { gap: var(--s3); } .topnav a { font-size: .875rem; } .brand-ver { display: none; } }

  .hero {
    inline-size: min(100% - 2.5rem, var(--maxw));
    margin-inline: auto;
    display: grid; gap: var(--s5);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: start;
    padding-block: var(--s6) var(--s5);
  }
  @container page (inline-size < 820px) { .hero { grid-template-columns: minmax(0, 1fr); } }
  .eyebrow { font: 600 .75rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-lit); }
  .hero h1, .page-h1 { margin-block-start: var(--s3); font-size: clamp(1.9rem, 1.2rem + 3.4cqi, 3.4rem); letter-spacing: -.035em; color: var(--ink); }
  .lede { margin-block-start: var(--s4); font-size: clamp(1.02rem, .96rem + .4cqi, 1.15rem); max-inline-size: 56ch; }
  .lede strong { color: var(--ink); }
  .hero-note { margin-block-start: var(--s4); font-size: .9rem; color: var(--ink3); max-inline-size: 52ch; }
}

@layer components {
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-block-size: var(--tap-fine);           /* FLOOR, never a fixed size */
    padding: .6rem 1.15rem;
    border-radius: var(--r2); border: 1px solid transparent;
    font-weight: 600; font-size: .9375rem; text-decoration: none;
    cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), translate var(--dur) var(--ease);
  }
  @media (pointer: coarse) { .btn, .field, .copy, .wall__open, .wall__input { min-block-size: var(--tap); } }
  .btn-primary { background: var(--brand); color: var(--void); }
  .btn-primary:hover:not(:disabled) { background: var(--brand-lit); translate: 0 -1px; }
  .btn-ghost { background: oklch(from var(--surf) l c h / .6); border-color: var(--edge); color: var(--ink); }
  .btn-ghost:hover:not(:disabled) { border-color: var(--edge2); background: var(--surf2); }
  .btn-danger { background: transparent; border-color: oklch(from var(--bad) l c h / .5); color: var(--bad); }
  .btn-danger:hover:not(:disabled) { background: oklch(from var(--bad) l c h / .12); }
  .btn:disabled { opacity: .45; cursor: not-allowed; }

  .cards { display: grid; gap: var(--s3); margin-block-start: var(--s5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .card {
    padding: var(--s4); border-radius: var(--r3); min-inline-size: 0;
    background: linear-gradient(165deg, oklch(from var(--surf) l c h / .8), oklch(from var(--sunk) l c h / .7));
    border: 1px solid oklch(from var(--edge) l c h / .55);
  }
  .card h2, .card h3 { font-size: 1.0625rem; color: var(--ink); }
  .card > p { margin-block-start: var(--s2); font-size: .9375rem; color: var(--ink3); }
  .card em { color: var(--ink2); font-style: normal; }
  .card code, .band code { font-family: var(--mono); font-size: .875em; color: var(--brand-lit); overflow-wrap: anywhere; }

  /* the plate: the wall's home (the same "one filled door" idea as yfile's plate) */
  .plate { padding: var(--s4); border-radius: var(--r3);
    background: linear-gradient(165deg, oklch(from var(--surf) l c h / .9), oklch(from var(--sunk) l c h / .8));
    border: 1px solid oklch(from var(--edge) l c h / .7); min-inline-size: 0; }
  .plate-title { font-size: 1.0625rem; color: var(--ink); }
  .plate-sub { margin-block-start: var(--s2); font-size: .9rem; color: var(--ink3); }
  .plate .wall { border-block-start-color: oklch(from var(--edge) l c h / .7); }
  .wall__open:disabled { color: var(--ink); }                 /* host skin: white on the deep door (6.5:1); dark text lands on the lit door */

  .stack { display: grid; gap: var(--s4); margin-block-start: var(--s5); }
  .row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; margin-block-start: var(--s3); }
  .status { margin-block-start: var(--s2); min-block-size: 1.6em; font: .875rem/1.6 var(--mono); color: var(--ink3); overflow-wrap: anywhere; }
  .status[data-kind="ok"] { color: var(--ok); }
  .status[data-kind="bad"] { color: var(--bad); }

  .lbl { display: block; margin-block: var(--s3) var(--s2); font-size: .8125rem; font-weight: 600; color: var(--ink2); }
  .field {
    inline-size: 100%; min-block-size: var(--tap-fine);
    padding: .6rem .85rem; border-radius: var(--r2);
    background: var(--well); border: 1px solid var(--edge);
    color: var(--ink); font-family: var(--mono); font-size: .8125rem; line-height: 1.55;
  }
  .field:focus-visible { border-color: var(--brand); }
  .field-area { resize: vertical; min-block-size: 12rem; }
  .hint { margin-block-start: var(--s2); font-size: .8125rem; color: var(--ink3); max-inline-size: 70ch; }

  /* the DID: 3.5k characters must WRAP, never overflow — the gap in the cyphr.me bar at 390 */
  .did-abbr { margin-block-start: var(--s3); font: 600 1.05rem/1.4 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
  .did-full {
    margin-block-start: var(--s2); padding: var(--s3); border-radius: var(--r2);
    background: var(--well); border: 1px solid var(--edge);
    font: .8125rem/1.6 var(--mono); color: var(--ink2);
    overflow-wrap: anywhere; word-break: break-all; white-space: pre-wrap;
    max-block-size: 12.8em; overflow-y: auto; scrollbar-width: thin;
    min-inline-size: 0;
  }
  .did-full:empty { display: none; }
  .code {
    margin: 0; margin-block-start: var(--s2); padding: var(--s3); border-radius: var(--r2);
    background: var(--well); border: 1px solid var(--edge);
    font: .8125rem/1.6 var(--mono); color: var(--ink2);
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
    max-block-size: 24em; overflow: auto; scrollbar-width: thin; min-inline-size: 0;
  }
  .code:empty { display: none; }

  .facts { margin-block-start: var(--s4); display: grid; gap: .5rem var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .facts div { display: grid; gap: .15rem; padding: .6rem .8rem; border-radius: var(--r1); background: oklch(from var(--sunk) l c h / .7); border: 1px solid oklch(from var(--edge) l c h / .5); min-inline-size: 0; }
  .facts dt { font: 600 .6875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
  .facts dd { font: .875rem/1.45 var(--mono); color: var(--ink); overflow-wrap: anywhere; }

  /* the custody warning: stark by design (brief item 12) */
  .custody { margin-block-start: var(--s4); padding: var(--s4); border-radius: var(--r2);
    border: 1px solid oklch(from var(--bad) l c h / .55); border-inline-start: 5px solid var(--bad);
    background: oklch(from var(--bad) l c h / .09); }
  .custody h3 { font-size: 1.0625rem; color: var(--bad); letter-spacing: .02em; }
  .custody ul { margin-block-start: var(--s2); padding-inline-start: var(--s4); display: grid; gap: .35rem; font-size: .9375rem; color: var(--ink); }
  .custody strong { color: var(--ink); font-weight: 700; }
  .ack { display: flex; gap: .7rem; align-items: flex-start; margin-block-start: var(--s3); font-size: .9375rem; color: var(--ink); cursor: pointer; min-block-size: var(--tap); }
  .ack input { inline-size: 1.4rem; block-size: 1.4rem; min-inline-size: 24px; min-block-size: 24px; margin-block-start: .2rem; accent-color: var(--bad); cursor: pointer; }

  .verdict { display: flex; align-items: center; gap: var(--s3); margin-block-start: var(--s4); padding: var(--s3) var(--s4);
    border-radius: var(--r2); border: 1px solid var(--edge); background: var(--well); min-inline-size: 0; }
  .verdict-lvl { font: 800 1.6rem/1 var(--mono); flex: none; }
  .verdict.pass .verdict-lvl { color: var(--ok); }
  .verdict.fail .verdict-lvl { color: var(--bad); }
  .verdict p { font-size: .875rem; color: var(--ink3); overflow-wrap: anywhere; }
  .verdict p b { color: var(--ink); font-family: var(--mono); font-weight: 600; }

  .rt { list-style: none; padding: 0; margin-block-start: var(--s4); display: grid; gap: .6rem; counter-reset: rt; }
  .rt li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .6rem; align-items: start; font-size: .9375rem; padding: .6rem .8rem;
    border-radius: var(--r1); background: oklch(from var(--sunk) l c h / .7); border: 1px solid oklch(from var(--edge) l c h / .5); }
  .rt li::before { counter-increment: rt; content: counter(rt); font: 700 .8125rem/1.5 var(--mono); color: var(--ink3); }
  .rt li[data-kind="ok"]::before { color: var(--ok); }
  .rt li[data-kind="bad"]::before { color: var(--bad); }
  .rt b { color: var(--ink); font-weight: 600; display: block; }
  .rt-out { display: block; font: .8125rem/1.5 var(--mono); color: var(--ink3); overflow-wrap: anywhere; }
  .rt li[data-kind="ok"] .rt-out { color: var(--ink2); }
  .rt li[data-kind="bad"] .rt-out { color: var(--bad); }

  .honest { margin-block-start: var(--s4); padding-inline-start: var(--s4); display: grid; gap: var(--s2); font-size: .9375rem; color: var(--ink3); max-inline-size: 76ch; }
  .honest strong { color: var(--ink); }
  .band-honest { border-block-start-color: oklch(from var(--warn) l c h / .35); }

  .foot { margin-block-start: var(--s7); border-block-start: 1px solid var(--edge); background: oklch(from var(--void) l c h / .9); }
  .foot-grid { inline-size: min(100% - 2.5rem, var(--maxw)); margin-inline: auto;
    padding-block: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
  .foot-brand { font-weight: 700; color: var(--ink); }
  .foot-brand span { font: 600 .6875rem var(--mono); color: var(--ink3); }
  .foot-note { font-size: .875rem; color: var(--ink3); }
  .foot nav { display: flex; gap: var(--s4); margin-inline-start: auto; flex-wrap: wrap; }
  .foot nav a { font-size: .875rem; color: var(--ink3); text-decoration: none; }
  .foot nav a:hover { color: var(--ink); }
  .foot-status { inline-size: 100%; font: .75rem/1.6 var(--mono); color: var(--ink3); overflow-wrap: anywhere; }
}

@layer a11y {
  :focus-visible { outline: 3px solid var(--brand-lit); outline-offset: 2px; border-radius: 3px; }
  .skip {
    position: absolute; inset-block-start: var(--s2); inset-inline-start: var(--s2);
    z-index: 100; padding: .6rem 1rem; border-radius: var(--r1);
    background: var(--surf2); color: var(--ink); text-decoration: none;
    translate: 0 -300%;
  }
  .skip:focus-visible { translate: 0 0; }
  @media (pointer: coarse) {
    .topnav a, .foot nav a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
    .brand { min-block-size: var(--tap); }
  }
  @media (forced-colors: active) {
    .card, .plate, .facts div, .verdict, .code, .did-full, .custody, .rt li { border: 1px solid CanvasText; }
    .btn-primary { border: 1px solid ButtonText; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  }
}