/*
 * theme.css — Relay Manifest's design-system values.
 * Kraft paper, stamped ink, stencilled crate lettering. Brutalist: hard
 * corners, thick ink borders, offset shadows like a rubber stamp hitting
 * paper. Opens light (a sorting facility under daylight); dark is the same
 * facility at night, lit by one bulb over the belt.
 */

:root {
  --canvas: #ede6d6;
  --surface: #f7f4ed;
  --surface-2: #e2d7bf;
  --border: #201d18;
  --border-strong: #201d18;
  --ink: #201d18;
  --muted: #615c55;
  --accent: #c23b22;
  --accent-hover: #a4321d;
  --accent-ink: #f7f4ed;
  --accent-text: #a4321d;
  --accent-strong: #a4321d;
  --accent-soft: #f0d9ce;
  --accent-border: #a4321d;
  --success: #3f6b2e;
  --success-ink: #ffffff;
  --success-soft: #dfe8d0;
  --success-strong: #2e4f22;
  --warning: #a86a17;
  --warning-ink: #ffffff;
  --warning-soft: #f1e0c3;
  --warning-strong: #7c4e10;
  --danger: #a4321d;
  --danger-ink: #ffffff;
  --danger-soft: #f0d9ce;
  --danger-strong: #7c2515;
  --chart-1: #c23b22;
  --chart-2: #201d18;
  --chart-3: #a86a17;
  --chart-4: #3f6b2e;
  --chart-5: #1c5f73;
  --chart-6: #615c55;

  --font-display: "Big Shoulders Display", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 900;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.14em;

  /* Brutalist shape: square corners, thick ink borders, hard offset shadows. */
  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --border-w: 2px;
  --border-strong-w: 3px;
  --shadow-btn: 3px 3px 0 0 var(--ink);
  --shadow-card: 6px 6px 0 0 var(--ink);
  --shadow-raised: 10px 10px 0 0 var(--ink);
  --card-pad: 1.75rem;
  --caps: uppercase;
  --caps-tracking: 0.06em;
  --btn-weight: 700;
  --measure: 70ch;

  /* App's own tokens — the ink band and the stamp, held constant across
     modes so the "catch-all" section always reads as one dim sorting room. */
  --x-band-bg: #1a1611;
  --x-band-ink: #f2ead9;
  --x-band-accent: #ff6b47;
  --x-stamp: var(--accent-strong);
  --x-tape: #d8c9a3;
}

html[data-theme="dark"] {
  --canvas: #17130f;
  --surface: #211b15;
  --surface-2: #2b2318;
  --border: #ede6d6;
  --border-strong: #ede6d6;
  --ink: #ede6d6;
  --muted: #b8ae9c;
  --accent: #e2552f;
  --accent-hover: #ff6b47;
  --accent-ink: #17130f;
  --accent-text: #ff8a63;
  --accent-strong: #ff8a63;
  --accent-soft: #3a2016;
  --accent-border: #e2552f;
  --success: #6b9a4f;
  --success-ink: #14210c;
  --success-soft: #23301a;
  --success-strong: #9cc47f;
  --warning: #d9a441;
  --warning-ink: #221806;
  --warning-soft: #332812;
  --warning-strong: #e8c179;
  --danger: #e2552f;
  --danger-ink: #17130f;
  --danger-soft: #3a2016;
  --danger-strong: #ff8a63;
  --chart-1: #e2552f;
  --chart-2: #ede6d6;
  --chart-3: #e8c179;
  --chart-4: #9cc47f;
  --chart-5: #6fc3d6;
  --chart-6: #b8ae9c;

  --shadow-btn: 3px 3px 0 0 var(--ink);
  --shadow-card: 6px 6px 0 0 var(--ink);
  --shadow-raised: 10px 10px 0 0 var(--ink);

  --x-band-bg: #0d0a07;
  --x-band-ink: #f2ead9;
  --x-band-accent: #ff8a63;
  --x-stamp: var(--accent-strong);
  --x-tape: #4a4030;
}

/*
 * app.css — Relay Manifest's own screens: the kraft ground, the marquee
 * strip, the sorting board and its chutes, the flow trace, the ink band and
 * the crate labels. Tokens only. Loads last, after design.css and theme.css.
 */

/* ---- Ground: a faint diagonal kraft-paper fibre, everywhere. -------------- */
body {
  background-image: repeating-linear-gradient(
    123deg,
    color-mix(in srgb, var(--ink) 4%, transparent) 0px,
    color-mix(in srgb, var(--ink) 4%, transparent) 1px,
    transparent 1px,
    transparent 15px
  );
}

/* ---- Marquee: the one thing on the page that moves. ---------------------- */
@keyframes manifest-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee {
  overflow: hidden;
  border-block: var(--border-w, 2px) solid var(--ink);
  background: var(--surface-2);
}
.marquee__track {
  display: inline-flex;
  width: max-content;
  gap: 3rem;
  padding-block: 0.6rem;
  animation: manifest-marquee 32s linear infinite;
  will-change: transform;
}
html.reduced-motion .marquee__track { animation: none; }

/* ---- Sorting board: kraft chutes pinned to the corkboard. ----------------- */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1.75rem;
}
.chute {
  background: var(--surface);
  border: var(--border-w, 2px) solid var(--ink);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
}
.chute:nth-child(3n+1) { transform: rotate(-0.5deg); }
.chute:nth-child(3n+2) { transform: rotate(0.4deg); }
.chute:nth-child(3n)   { transform: rotate(-0.2deg); }
/* The pinned tilt reads as motion once text inside reflows (a web-font
   swap, a rule change); a reduced-motion visitor gets the flush, still
   version instead. */
html.reduced-motion .chute { transform: none; }
.chute-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 2px dashed var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}
.slip { padding-block: 0.65rem; border-bottom: 1px solid var(--border); }
.slip:last-child { border-bottom: 0; padding-bottom: 0; }
.slip-from { font-weight: 600; }
.slip-subject { color: var(--muted); }

/* A red-ink rubber stamp — the one accent moment inside a chute. */
.stamp {
  display: inline-block;
  transform: rotate(-4deg);
  border: 2px solid var(--x-stamp);
  color: var(--x-stamp);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 0.4rem;
}

/* ---- Flow trace: one message, checked against every rule in order. ------- */
.trace-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0 0.7rem 1.25rem;
  border-left: 3px solid var(--border);
}
.trace-row.is-skipped { opacity: 0.5; }
.trace-row.is-skipped .trace-kw { text-decoration: line-through; }
.trace-row.is-match { border-left-color: var(--x-stamp); }
.trace-kw {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
}
.trace-row.is-match .trace-kw {
  color: var(--x-stamp);
  font-weight: 700;
  border: 2px solid var(--x-stamp);
  border-radius: 999px;
  padding: 0.05rem 0.6rem;
}
.trace-row.is-final { border-left-color: var(--ink); padding-top: 1rem; }

/* ---- The catch-all band: one dim room, lit by the stamp colour. ---------- */
.ink-band { background: var(--x-band-bg); color: var(--x-band-ink); }
.ink-band .stamp-lg { color: var(--x-band-accent); }
.ink-band .muted-on-ink { color: color-mix(in srgb, var(--x-band-ink) 65%, transparent); }
.ink-band .ink-band-rule { border-top-color: color-mix(in srgb, var(--x-band-ink) 20%, transparent); }

/* ---- Connect: three stencilled crate labels. ------------------------------ */
.crate {
  border: 3px dashed var(--border-strong);
  background: var(--surface);
  padding: 1.5rem;
}
.crate-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}