/* amadan — Ink & Verdigris.
   Direction contract (docs/superpowers/specs/2026-08-08-amadan-web-ux-design.md;
   lives here because html/template strips HTML comments, and this file
   ships verbatim in the binary at /static/css/amadan.css):

   THESIS: GitHub's grammar with amadan's heart. The one rule — "if the
   server is compromised, the attacker gets nothing" — is the hero,
   verbatim. Refused: the anonymous GitHub clone; dark-hacker neon.
   OWN-WORLD: Irish scriptorium rendered modern. Iron-gall ink neutrals
   (warm green cast, never GitHub blue-gray), verdigris accent, red-lead
   danger, gilt amber private tier. System-stack type throughout (speed
   embodied; Paul cut the display webfont 2026-08-08 — "horrible"),
   Commit Mono for code. Filled verdigris sealed chip for E2EE; outline
   chips for public/private. Wide field: 1400px cap, 60rem reading
   pages (Paul: wider, 2026-08-08).
   STORY: a developer recognizes GitHub instantly, reads plainly what
   amadan can and cannot see, and feels pages land instantly.
   FIRST VIEWPORT: signed-out home = the one rule set huge, one line of
   what amadan is, sign-in CTA, three-tier honesty ledger as the demo.
   FORM: brief-pinned direction (GitHub-familiar + amadan twist); no
   seed roll — user-pinned beats the roll.
   FINISH: unreviewed and undocumented is unfinished; this build ends
   with the finish review, the verdict, and DESIGN.md.

   No external requests: fonts below are embedded in the binary and
   served same-origin under CSP default-src 'self'.
   🤖 rewritten in the web-UX pass, 2026-08-08 (previous look: Task 5,
   2026-08-03). */

/* ---------- embedded faces ---------- */

@font-face {
  font-family: "Commit Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* Relative (not /static/-absolute) so the font rides the same
     fingerprinted prefix this stylesheet was fetched under. */
  src: url("../fonts/commit-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Commit Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/commit-mono-latin-700-normal.woff2") format("woff2");
}

/* ---------- tokens ---------- */

:root {
  --on-accent: #ffffff;
  --on-danger: #ffffff;
  --bg: #ffffff;
  --bg-inset: #f4f7f5;
  --border: #d5ddd9;
  --fg: #181d1b;
  --fg-muted: #5c6660;
  --link: #0b6e63;
  --accent: #0b6e63;
  --accent-emph: #095a51;
  --accent-wash: #e7f2ef;
  --badge-public: #1a7f37;
  --badge-public-bg: #eaf5ec;
  --badge-private: #9a6700;
  --badge-private-bg: #fbf3e0;
  --sealed-bg: #0b6e63;
  --sealed-fg: #ffffff;
  --danger: #b03a25;
  --danger-bg: #fbeeea;
  --code-bg: #f4f7f5;
  --radius: 8px;
  --radius-ctl: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  /* Display = the same system stack, heavier — Paul cut the embedded
     display face (2026-08-08); personality lives in weight, color, and
     the chip system now. The token stays so a future face is a
     one-line change. */
  --display: var(--font);
  --mono: "Commit Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Ink night: developers at a terminal after dark — dark mode is a
   first-class scene, not an inversion. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Bright verdigris carries the accent at night, so anything painted
       with it flips to ink-dark text — white-on-bright-teal fails
       contrast. */
    --on-accent: #0d1412;
    --on-danger: #1a0c08;
    --bg: #101413;
    --bg-inset: #171d1a;
    --border: #2b342f;
    --fg: #e7edea;
    --fg-muted: #93a09a;
    --link: #4cc4b5;
    --accent: #4cc4b5;
    --accent-emph: #6fd6c9;
    --accent-wash: #14251f;
    --badge-public: #4ac26b;
    --badge-public-bg: #12271a;
    --badge-private: #d4a72c;
    --badge-private-bg: #2b2312;
    --sealed-bg: #0b6e63;
    --sealed-fg: #ffffff;
    --danger: #f0704f;
    --danger-bg: #321812;
    --code-bg: #171d1a;
  }
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html {
  color-scheme: light dark;
  /* Kill WebKit's mobile text autosizing: it inflated the code table's
     long non-wrapping lines to roughly double size on phones, while
     wrapped text (commit messages) was spared — the sized-in-CSS type
     scale is the intended one on every device. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Reserve the scrollbar's width even on pages too short to scroll, so
     the centered layout doesn't jump sideways when navigating between
     scrolling and non-scrolling pages. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  caret-color: var(--accent);
  scrollbar-color: var(--border) transparent;
}

::selection { background: var(--accent); color: var(--on-accent); }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

a, button, input, select, textarea, summary {
  transition: color 120ms ease-out, background-color 120ms ease-out,
    border-color 120ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* .loading appears via a delayed animation (see .loading below), and
     a delayed appearance isn't motion: without this carve-out,
     animation:none would leave the loader visibility:hidden forever.
     Only the pulse is dropped. */
  .loading { animation: loading-appear 0s 0.5s forwards !important; }
}

code, pre, kbd, .mono { font-family: var(--mono); }

/* ---------- icons ----------
   Lucide geometry via an in-page sprite (templates/icons.html);
   every icon is an inline <svg class="icon"><use> pair, so this one
   rule is the single stroke-and-weight voice for all of them. */

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: 1.6rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }

main {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  flex: 1;
}
main.narrow { max-width: 60rem; }