/* GENERATED COPY — edit libs/shared/ui/src/styles/deck.css, then run pnpm tsx scripts/decks/sync-deck-css.ts */
/*
 * deck.css — the one stylesheet every STATIC deck under /decks/*.html shares.
 * Mirrors the in-app deck language (apps/web/src/app/[lang]/decks/_components):
 * serif display headings, mono eyebrows, warm near-black ink on white with
 * warm stone fills, lane colours (green = waste-to-value, blue = DAC /
 * platform, amber = the honesty box), and NO border-radius anywhere. React
 * deck pages get the same look from Tailwind; static ports get it from here.
 * Change both or neither.
 *
 * Values are the warm-monochrome platform tokens (2026-10-05,
 * libs/shared/ui/src/tokens/palette.ts; docs/ui-conventions.md "Colour and
 * type tokens"): the ink ramp is INK, the fills are SURFACE, green / amber /
 * rose are the positive / caution / critical state ramps (the same values the
 * Tailwind preset remaps green-* / amber-* / rose-* onto), and blue / violet
 * are CATEGORICAL labcoat / burgundy, because in a deck they encode a lane or
 * a figure category, i.e. data. Chrome (links, buttons, focus) stays ink.
 */
/* Static decks have no next/font: load the platform's two webfonts by name
   (must precede every other rule). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:wght@100..800&family=Source+Serif+4:ital,wght@0,200..900;1,200..900&display=swap');

:root {
  /* Same faces as tokens/typography.ts FONTS (minus the next/font
     --font-* variables, which don't exist in a static page). */
  --deck-serif: var(--font-source-serif, 'Source Serif 4'), 'Source Serif 4', 'Iowan Old Style',
    'Palatino Linotype', Palatino, Georgia, serif;
  --deck-sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --deck-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Ink ramp. The -70/-55/-45 steps are opaque INK shades, AA on white and
     cream (ink-45 is the <12px muted ink): the old black-alpha steps put
     10-11px mono labels at 3.3:1. The -15/-10 rules stay translucent so they
     read the same on paper, cream and stone. */
  --deck-ink: #1a1a17;
  --deck-ink-70: #44443d;
  --deck-ink-55: #5e5e55;
  --deck-ink-45: #6a6a60;
  --deck-ink-15: rgba(26, 26, 23, 0.15);
  --deck-ink-10: rgba(26, 26, 23, 0.1);
  --deck-paper: #fff;
  --deck-stone: #eceadf;
  --deck-stone-300: #dcd9d0;
  /* State ramps: positive moss, caution ochre, critical rust. */
  --deck-green: #3f5a3a;
  --deck-green-soft: #e8ede4;
  --deck-green-edge: #c5d1bf;
  --deck-amber: #7d6219;
  --deck-amber-soft: #faf4e2;
  --deck-amber-edge: #dcd3bc;
  --deck-rose: #923826;
  /* Categorical (data only): labcoat, burgundy, warm slate. */
  --deck-blue: #3a6fa0;
  --deck-blue-soft: #ebf1f6;
  --deck-blue-edge: #b8cce0;
  --deck-violet: #7a3f4a;
  --deck-slate: #44443d;
  --deck-max: 64rem;
}

* {
  box-sizing: border-box;
  border-radius: 0 !important;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--deck-paper);
  color: var(--deck-ink);
  font-family: var(--deck-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.deck {
  max-width: var(--deck-max);
  margin: 0 auto;
  padding: 5rem 1.5rem 6rem;
}

.deck-eyebrow {
  margin: 0 0 1.5rem;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--deck-ink-55);
}

.deck h1,
.deck h2,
.deck h3 {
  font-family: var(--deck-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--deck-ink);
  margin: 0;
}

.deck h1 {
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1.05;
  max-width: 48rem;
}

.deck h2 {
  font-size: 30px;
  line-height: 1.15;
}

.deck h3 {
  font-size: 22px;
  line-height: 1.2;
}

.deck .lede {
  margin: 1.5rem 0 0;
  max-width: 42rem;
  font-size: 18px;
  color: var(--deck-ink-70);
}

.deck section {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--deck-ink-10);
}

.deck-rail {
  display: flex;
  align-items: baseline;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.deck-rail .label {
  font-family: var(--deck-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.deck-rail .sub {
  font-family: var(--deck-serif);
  font-size: 22px;
  font-weight: 600;
}

.deck-rail.ink .label {
  color: var(--deck-ink);
}
.deck-rail.g .label {
  color: var(--deck-green);
}
.deck-rail.b .label {
  color: var(--deck-blue);
}
.deck-rail.amber .label {
  color: var(--deck-amber);
}

.deck p {
  margin: 0.75rem 0 0;
  max-width: 42rem;
  color: var(--deck-ink-70);
}

.deck .mono,
.deck code {
  font-family: var(--deck-mono);
  font-size: 12px;
}

.deck code {
  background: var(--deck-stone);
  padding: 0.1em 0.35em;
}

.deck .tag {
  display: inline-block;
  border: 1px solid var(--deck-ink-15);
  padding: 0.15rem 0.5rem;
  font-family: var(--deck-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deck-ink-55);
}

.deck .tag.g {
  border-color: var(--deck-green-edge);
  color: var(--deck-green);
}
.deck .tag.b {
  border-color: var(--deck-blue-edge);
  color: var(--deck-blue);
}
.deck .tag.amber {
  border-color: var(--deck-amber-edge);
  color: var(--deck-amber);
}

/* Stat tiles ------------------------------------------------------------ */
.deck .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--deck-ink-10);
  border: 1px solid var(--deck-ink-10);
  margin-top: 1.5rem;
}

.deck .tile {
  background: var(--deck-paper);
  padding: 1.25rem 1.25rem 1.1rem;
}

.deck .tile .n {
  font-family: var(--deck-serif);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
}

.deck .tile .l {
  margin-top: 0.5rem;
  font-size: 13px;
  color: var(--deck-ink-70);
}

.deck .tile .s {
  margin-top: 0.35rem;
  font-family: var(--deck-mono);
  font-size: 11px;
  color: var(--deck-ink-45);
}

.deck .tile.g .n {
  color: var(--deck-green);
}
.deck .tile.b .n {
  color: var(--deck-blue);
}

/* Tables ---------------------------------------------------------------- */
.deck .table-wrap {
  overflow-x: auto;
  margin-top: 1.5rem;
}

.deck table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.deck th {
  text-align: left;
  font-family: var(--deck-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deck-ink-55);
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--deck-ink);
}

.deck td {
  vertical-align: top;
  padding: 0.7rem 0.75rem 0.7rem 0;
  border-bottom: 1px solid var(--deck-ink-10);
  color: var(--deck-ink-70);
}

.deck td:first-child,
.deck th:first-child {
  padding-left: 0;
}

.deck td strong {
  color: var(--deck-ink);
}

/* Honesty box ----------------------------------------------------------- */
.deck .honesty {
  margin-top: 1.5rem;
  border: 1px solid var(--deck-amber-edge);
  background: var(--deck-amber-soft);
  padding: 1.25rem 1.5rem;
}

.deck .honesty .label {
  font-family: var(--deck-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deck-amber);
}

.deck .honesty ul {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  color: var(--deck-ink-70);
}

/* Buttons + links ------------------------------------------------------- */
.deck a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.deck .btn {
  display: inline-block;
  border: 1px solid var(--deck-ink);
  padding: 0.65rem 1.1rem;
  font-family: var(--deck-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--deck-ink);
  background: var(--deck-paper);
}

.deck .btn:hover {
  background: var(--deck-ink);
  color: var(--deck-paper);
}

.deck .btn.solid {
  background: var(--deck-ink);
  color: var(--deck-paper);
}

/* Controls (ported simulators) ----------------------------------------- */
.deck input[type='range'] {
  width: 100%;
  accent-color: var(--deck-ink);
}

.deck input,
.deck select,
.deck textarea,
.deck button {
  font-family: var(--deck-mono);
  font-size: 13px;
  border: 1px solid var(--deck-ink-15);
  background: var(--deck-paper);
  color: var(--deck-ink);
  padding: 0.45rem 0.6rem;
}

.deck .controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem 1.5rem;
  margin-top: 1.5rem;
}

.deck .controls label {
  display: block;
  font-family: var(--deck-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deck-ink-55);
  margin-bottom: 0.35rem;
}

.deck .controls .val {
  float: right;
  color: var(--deck-ink);
}

/* Figures --------------------------------------------------------------- */
.deck figure {
  margin: 1.5rem 0 0;
}

.deck figure svg,
.deck figure canvas {
  display: block;
  width: 100%;
  height: auto;
  background: var(--deck-paper);
  border: 1px solid var(--deck-ink-10);
}

.deck figcaption {
  margin-top: 0.5rem;
  font-family: var(--deck-mono);
  font-size: 11px;
  color: var(--deck-ink-45);
}

/* Footer ---------------------------------------------------------------- */
.deck-foot {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--deck-ink-10);
  font-family: var(--deck-mono);
  font-size: 12px;
  color: var(--deck-ink-45);
}

.deck-foot a {
  color: inherit;
}

@media (max-width: 640px) {
  .deck {
    padding: 3.5rem 1.25rem 4rem;
  }
  .deck h2 {
    font-size: 26px;
  }
}