/* ============================================================
   THE SLIPDOCK DESIGN SYSTEM
   ------------------------------------------------------------
   Lineage: the Freeside design system's grammar (8px grid, paper-on-canvas
   cards, Geist + JetBrains Mono, calm motion, semantic colour mapped to the
   product's own architecture, mandatory WCAG AA).

   Where Slipdock departs — its own flair:
     · 8-bit. Hard 2-4px offset shadows on a pixel grid, never a soft blur.
       Square corners by default; radius is the exception, not the rule.
     · Machine-forward type. Mono is not the accent voice here, it is half the
       system — most readers of this product are programs.
     · Colour answers "who is acting?", which is the one question that matters
       in a product where an agent and a human share a workflow:

         HULL   blue   → structure, the platform, primary action
         BEACON cyan   → the AGENT is acting (automated, live, machine)
         AMBER  gold   → a HUMAN is needed (payment, approval, consent)
         LIVE   green  → provisioned, running, done

       Amber means "a person must act" and is used for nothing else, anywhere.
       That single rule is what makes the pay-link moment instantly legible.

   Every pair below was verified with the WCAG contrast formula in both themes.
   Fills that fail as text (beacon, amber, live) have `-text` variants; use
   those for lettering and never the raw hue.
   ============================================================ */

/* ------------------------------------------------------------
   SITE COPY — two deliberate deltas from design/slipdock.css:

   1. The Google Fonts @import is REMOVED. This site makes zero external
      requests, by rule: it is read by agents on flaky networks and served
      from a bucket, and a webfont round-trip to a third party is both a
      privacy leak and a rendering stall we do not control.
   2. --sd-sans / --sd-mono therefore start from Geist / JetBrains Mono if the
      reader happens to have them, then fall through to a system stack that
      renders identically enough for this design (the 8-bit grammar carries
      the identity, not the typeface).

   To self-host the real faces later: drop woff2 files in assets/fonts/, add
   @font-face blocks here, and change nothing else. See site/README.md.
   ------------------------------------------------------------ */

:root {
  /* Surfaces */
  --sd-canvas:  #FFFFFF;
  --sd-surface: #F2F5F8;
  --sd-paper:   #FFFFFF;
  --sd-line:    #D8E0E8;
  --sd-line2:   #EAEFF4;

  /* Ink — harbour navy. All AA on canvas. */
  --sd-ink:  #0D1B2A;   /* 17.4:1 */
  --sd-ink2: #38485C;   /*  9.3:1 */
  --sd-ink3: #5F6E80;   /*  5.2:1 */
  --sd-ink-invert: #FFFFFF;

  /* HULL — structure + primary action. White on hull passes (7.3:1). */
  --sd-hull:        #0E5C86;
  --sd-hull-strong: #0A4667;
  --sd-hull-soft:   #E3EFF6;
  --sd-hull-ink:    #073A56;   /* lettering on --sd-hull-soft */
  --sd-on-hull:     #FFFFFF;

  /* BEACON — the agent. Fills/dots/borders only; 2.96:1 fails as text. */
  --sd-beacon:      #00A5BA;
  --sd-beacon-soft: #D6F2F6;
  --sd-beacon-text: #00707E;   /* 5.8:1 — the ONLY cyan allowed as lettering */

  /* AMBER — a human is needed. Dark ink on amber (8.6:1), never white. */
  --sd-amber:      #F5A623;
  --sd-amber-soft: #FDEFD5;
  --sd-amber-text: #8A5300;    /* 6.3:1 */
  --sd-on-amber:   #0D1B2A;

  /* LIVE — provisioned and running. */
  --sd-live:        #1E8E4A;   /* 4.2:1 — UI/fills only */
  --sd-live-strong: #17703A;   /* white on this passes */
  --sd-live-soft:   #DEF2E5;
  --sd-live-text:   #17703A;   /* 6.2:1 */

  --sd-danger:      #D14343;
  --sd-danger-soft: #FBE3E3;
  --sd-danger-text: #B3302F;

  /* Type */
  --sd-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI",
             "Helvetica Neue", Arial, sans-serif;
  --sd-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular,
             "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* 8px grid */
  --sd-1:4px; --sd-2:8px; --sd-3:12px; --sd-4:16px; --sd-5:20px;
  --sd-6:24px; --sd-7:32px; --sd-8:40px; --sd-9:48px; --sd-10:64px;

  /* 8-bit elevation: hard offsets, zero blur. This is the signature. */
  --sd-lift-1: 2px 2px 0 var(--sd-line);
  --sd-lift-2: 4px 4px 0 var(--sd-line);
  --sd-lift-hull: 4px 4px 0 var(--sd-hull);
  --sd-lift-amber: 4px 4px 0 var(--sd-amber);

  --sd-rad: 0px;        /* square by default — the 8-bit tell */
  --sd-rad-soft: 3px;   /* only where a hard corner would read as broken */

  --sd-motion: 120ms cubic-bezier(.2,.8,.2,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sd-canvas:  #0D1520;
    --sd-surface: #131E2C;
    --sd-paper:   #111B27;
    --sd-line:    #26364A;
    --sd-line2:   #1B2938;

    --sd-ink:  #E6EDF5;
    --sd-ink2: #A9B8C9;
    --sd-ink3: #7C8B9E;
    --sd-ink-invert: #0D1520;

    --sd-hull:        #3D9BD1;
    --sd-hull-strong: #62B4E2;
    --sd-hull-soft:   #14304A;
    --sd-on-hull:     #06121C;

    --sd-beacon:      #22C3D6;
    --sd-beacon-soft: #0C3540;
    --sd-beacon-text: #46D2E3;

    --sd-amber:       #F5B547;
    --sd-amber-soft:  #3A2A0C;
    --sd-amber-text:  #F0BC63;
    --sd-on-amber:    #1A1200;

    --sd-live:        #3BB56B;
    --sd-live-strong: #3BB56B;
    --sd-live-soft:   #0F2E1D;
    --sd-live-text:   #5FCB88;

    --sd-danger:      #E86A6A;
    --sd-danger-soft: #3A1717;
    --sd-danger-text: #F08A8A;

    --sd-lift-1: 2px 2px 0 var(--sd-line);
    --sd-lift-2: 4px 4px 0 var(--sd-line);
  }
}

/* ── base ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--sd-canvas);
  color: var(--sd-ink);
  font-family: var(--sd-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sd-hull); text-underline-offset: 2px; }
a:hover { color: var(--sd-hull-strong); }
code, kbd, pre, .sd-mono { font-family: var(--sd-mono); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--sd-3); letter-spacing: -0.01em; }
h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 21px; font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; }
p  { margin: 0 0 var(--sd-4); color: var(--sd-ink2); }
small, .sd-small { font-size: 13px; color: var(--sd-ink3); }

.sd-wrap { max-width: 680px; margin: 0 auto; padding: var(--sd-8) var(--sd-5) var(--sd-10); }
.sd-wrap--wide { max-width: 960px; }

/* ── logo ─────────────────────────────────────────────────── */
.sd-logo { display: inline-flex; align-items: center; gap: var(--sd-3); text-decoration: none; }
.sd-logo svg { display: block; image-rendering: pixelated; }
.sd-logo__word {
  font-family: var(--sd-mono); font-weight: 700; font-size: 19px;
  letter-spacing: -0.02em; color: var(--sd-ink);
}

/* ── card ─────────────────────────────────────────────────── */
.sd-card {
  background: var(--sd-paper);
  border: 2px solid var(--sd-ink);
  box-shadow: var(--sd-lift-2);
  padding: var(--sd-6);
  margin-bottom: var(--sd-6);
}
.sd-card--hull  { border-color: var(--sd-hull);  box-shadow: var(--sd-lift-hull); }
.sd-card--amber { border-color: var(--sd-amber); box-shadow: var(--sd-lift-amber); }
.sd-card--quiet { border: 1px solid var(--sd-line); box-shadow: var(--sd-lift-1); }

/* ── buttons ──────────────────────────────────────────────── */
.sd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sd-2);
  font-family: var(--sd-sans); font-weight: 600; font-size: 15px;
  padding: 12px var(--sd-5); min-height: 44px;   /* touch target */
  border: 2px solid var(--sd-ink); background: var(--sd-paper); color: var(--sd-ink);
  box-shadow: 3px 3px 0 var(--sd-ink);
  cursor: pointer; text-decoration: none;
  transition: transform var(--sd-motion), box-shadow var(--sd-motion);
}
.sd-btn:hover  { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--sd-ink); }
.sd-btn:active { transform: translate(3px,3px);  box-shadow: 0 0 0 var(--sd-ink); }
.sd-btn:focus-visible { outline: 3px solid var(--sd-beacon); outline-offset: 2px; }

.sd-btn--primary {
  background: var(--sd-hull); color: var(--sd-on-hull);
  border-color: var(--sd-hull-strong); box-shadow: 3px 3px 0 var(--sd-hull-strong);
}
.sd-btn--primary:hover  { box-shadow: 4px 4px 0 var(--sd-hull-strong); }
.sd-btn--primary:active { box-shadow: 0 0 0 var(--sd-hull-strong); }

/* The approve button. Amber = a human is acting. Dark ink, never white. */
.sd-btn--approve {
  background: var(--sd-amber); color: var(--sd-on-amber);
  border-color: var(--sd-ink); box-shadow: 3px 3px 0 var(--sd-ink);
  font-size: 16px; padding: 14px var(--sd-6);
}
.sd-btn--block { width: 100%; }

/* ── pills / status ───────────────────────────────────────── */
.sd-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sd-mono); font-size: 12px; font-weight: 500;
  padding: 3px var(--sd-2); border: 1px solid currentColor;
  text-transform: lowercase;
}
.sd-pill--agent { color: var(--sd-beacon-text); background: var(--sd-beacon-soft); }
.sd-pill--human { color: var(--sd-amber-text);  background: var(--sd-amber-soft); }
.sd-pill--live  { color: var(--sd-live-text);   background: var(--sd-live-soft); }
.sd-pill--fail  { color: var(--sd-danger-text); background: var(--sd-danger-soft); }

.sd-dot { width: 8px; height: 8px; background: currentColor; display: inline-block; }
.sd-dot--pulse { animation: sd-pulse 1.6s steps(2, end) infinite; }
@keyframes sd-pulse { 50% { opacity: .25; } }

/* ── line items / totals ──────────────────────────────────── */
.sd-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sd-4); padding: var(--sd-3) 0;
  border-bottom: 1px solid var(--sd-line2);
}
.sd-row:last-child { border-bottom: 0; }
.sd-row__name { font-family: var(--sd-mono); font-size: 14px; color: var(--sd-ink); }
.sd-row__meta { font-size: 13px; color: var(--sd-ink3); }
.sd-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--sd-4); padding-top: var(--sd-4);
  border-top: 2px solid var(--sd-ink);
  font-family: var(--sd-mono); font-size: 20px; font-weight: 700;
}

/* ── fields ───────────────────────────────────────────────── */
.sd-field { margin-bottom: var(--sd-5); }
.sd-field__label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.sd-field__hint  { font-size: 13px; color: var(--sd-ink3); margin-top: 6px; }
.sd-input {
  width: 100%; font-family: var(--sd-mono); font-size: 16px;  /* 16px: no iOS zoom */
  padding: 11px var(--sd-3); min-height: 44px;
  background: var(--sd-canvas); color: var(--sd-ink);
  border: 2px solid var(--sd-line); border-radius: var(--sd-rad);
}
.sd-input:focus { outline: none; border-color: var(--sd-hull); box-shadow: var(--sd-lift-1); }

.sd-choices { display: flex; gap: var(--sd-2); flex-wrap: wrap; }
.sd-choice {
  flex: 1 1 auto; min-width: 88px; text-align: center; cursor: pointer;
  font-family: var(--sd-mono); font-size: 15px; padding: 11px var(--sd-2); min-height: 44px;
  border: 2px solid var(--sd-line); background: var(--sd-canvas);
  display: flex; align-items: center; justify-content: center;
}
.sd-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.sd-choice:has(input:checked) {
  border-color: var(--sd-hull); background: var(--sd-hull-soft);
  color: var(--sd-hull); font-weight: 700;
}
.sd-choice:has(input:focus-visible) { outline: 3px solid var(--sd-beacon); outline-offset: 2px; }

/* ── machine voice ────────────────────────────────────────── */
.sd-term {
  font-family: var(--sd-mono); font-size: 13.5px; line-height: 1.7;
  background: var(--sd-ink); color: #D6E3EF;
  padding: var(--sd-4); overflow-x: auto;
  border: 2px solid var(--sd-ink);
  white-space: pre;   /* the transcript is laid out, not reflowed */
  tab-size: 2;
}
@media (max-width: 480px) { .sd-term { font-size: 12px; } }
.sd-term .c { color: var(--sd-beacon); }   /* the agent speaking */
.sd-term .k { color: var(--sd-amber); }    /* the human moment */

/* ── scanline rule — the one decorative flourish ──────────── */
.sd-rule {
  height: 4px; border: 0; margin: var(--sd-7) 0;
  background: repeating-linear-gradient(90deg,
    var(--sd-ink) 0 4px, transparent 4px 8px);
  opacity: .25;
}

/* ── a11y + mobile ────────────────────────────────────────── */
.sd-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 480px) {
  .sd-wrap { padding: var(--sd-6) var(--sd-4) var(--sd-9); }
  h1 { font-size: 25px; }
  .sd-card { padding: var(--sd-5); }
}
@media (forced-colors: active) {
  .sd-card, .sd-btn { border: 2px solid ButtonText; }
}