/* ── Tollgate UI — Afterpay DESIGN.md system ──────────────────────────────
 * Ink #000000 on canvas #ffffff, hairline #cccccc borders, a single 12px
 * corner radius on every clickable affordance, no shadows, no chromatic
 * chrome. One typeface family (Italian Plate No2 Expanded, substituted with
 * Inter + widened tracking) at a binary 400/700 weight pair.
 * Monospace survives ONLY inside terminals/code blocks: that is content,
 * like the flag pictograms in the source system, not chrome.
 * ─────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
  /* Afterpay palette — no primary voltage. "Primary" chrome is ink. */
  --primary: #000000;
  --on-primary: #ffffff;
  --primary-active: #000000;
  --primary-neutral: #cccccc;
  --primary-pale: #ffffff;

  --ink: #000000;
  --ink-deep: #000000;
  --body: #000000;
  --mute: #666666;      /* pragmatic extension: ink at 60% for secondary text */

  --canvas: #ffffff;
  --canvas-soft: #ffffff;
  --hairline: #cccccc;

  /* Status is carried by labels, not hue: all semantic tones collapse to ink. */
  --positive: #000000;
  --positive-deep: #000000;
  --warning: #ffffff;
  --warning-content: #000000;
  --negative: #000000;
  --negative-bg: #000000;

  --accent-orange: #666666;  /* legacy references render as gray */
  --accent-cyan: #999999;

  --font-display: 'Italian Plate No2 Expanded', 'Inter', Helvetica, Arial, sans-serif;
  --font-body: 'Italian Plate No2 Expanded', 'Inter', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Single-radius discipline: every rounded tier is 12px. */
  --radius-sm: 12px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --radius-pill: 12px;

  /* No shadow tier. */
  --elev-card: none;
  --elev-raised: none;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: 0.02em; }
p { margin: 0; }
a { color: inherit; }

.mono { font-family: var(--font-mono); }
.container { max-width: 1240px; margin: 0 auto; padding: 0 64px; }
.container-app { max-width: 1160px; margin: 0 auto; padding: 36px 24px 64px; }

/* ── Buttons — 48px, 12x24 padding, 12px radius, binary ink/canvas ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; border-radius: 12px;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: opacity 140ms ease;
  padding: 12px 24px; font-size: 16px; line-height: 24px; height: 48px;
  border: 1px solid transparent;
}
.btn:hover { opacity: 0.8; }
.btn:active { opacity: 0.65; }
.btn-sm { padding: 8px 16px; font-size: 14px; line-height: 20px; height: 40px; }
.btn-lg { padding: 12px 32px; font-size: 18px; line-height: 24px; height: 52px; }
.btn-primary { background: var(--ink); color: var(--canvas); }
.btn-secondary { background: var(--canvas); color: var(--ink); border-color: var(--ink); }
.btn-tertiary { background: var(--canvas); color: var(--ink); border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-danger { background: var(--ink); color: var(--canvas); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* On ink surfaces, primary inverts to canvas-on-ink. */
.on-ink .btn-primary { background: var(--canvas); color: var(--ink); }
.on-ink .btn-secondary { background: transparent; color: var(--canvas); border-color: var(--canvas); }

/* ── Badges — status carried by the label, not by hue ── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: 14px; line-height: 20px;
  padding: 4px 12px; border-radius: 12px; white-space: nowrap;
  border: 1px solid transparent;
}
.badge-positive { background: var(--ink); color: var(--canvas); }
.badge-brand { background: var(--ink); color: var(--canvas); }
.badge-negative { background: var(--ink); color: var(--canvas); }
.badge-warning { background: var(--canvas); color: var(--ink); border-color: var(--ink); }
.badge-neutral { background: var(--canvas); color: var(--ink); border-color: var(--hairline); }
.badge-sm { font-size: 12px; line-height: 16px; padding: 3px 10px; }

/* ── Cards — canvas fill, hairline border, 12px radius (region-card) ── */
.card {
  border-radius: 12px; padding: 24px;
  font-family: var(--font-body); font-size: 16px; line-height: 24px;
  border: 1px solid var(--hairline);
}
.card-white { background: var(--canvas); color: var(--ink); }
.card-sage { background: var(--canvas); color: var(--ink); }
.card-green { background: var(--canvas); color: var(--ink); border-color: var(--ink); }
.card-dark { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.card-flush { padding: 0; }

/* ── Inputs — canvas fill, hairline border, 12px radius, 48px ── */
.field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.field-label { font-weight: 700; font-size: 14px; line-height: 20px; color: var(--ink); }
.field-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--canvas); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 12px 16px; min-height: 48px; transition: border-color 140ms ease;
}
.field-box:focus-within { border-color: var(--ink); }
.field-box input, .field-box select {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-body); font-size: 16px; line-height: 24px; color: var(--ink); min-width: 0;
}
.field-lead { display: inline-flex; color: var(--mute); }
.field-help { font-size: 12px; line-height: 16px; color: var(--mute); }
.field-error { font-size: 12px; line-height: 16px; color: var(--ink); font-weight: 700; }
.field-box.is-error { border-color: var(--ink); }

/* ── Nav pills ── */
.navpill { font-size: 14px; font-weight: 700; color: var(--ink); border-radius: 12px; padding: 8px 16px; text-decoration: none; border: 1px solid transparent; }
.navpill.active { background: var(--ink); color: var(--canvas); }
.navpill-dark { color: var(--canvas); opacity: 0.65; }
.navpill-dark.active { background: var(--canvas); color: var(--ink); opacity: 1; }

/* ── Brand mark — ink square, canvas 402 ── */
.brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.brand-dot { border-radius: 12px; background: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: var(--canvas); letter-spacing: 0; }
.on-ink .brand-dot, .brand-dot.inverse { background: var(--canvas); color: var(--ink); }

/* ── Terminal panels — ink surface; log text is content, kept grayscale ── */
.term { background: var(--ink); border-radius: 12px; font-family: var(--font-mono); }
.term-line { display: flex; gap: 10px; font-family: var(--font-mono); font-size: 13px; line-height: 21px; }

@keyframes tgPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.pulse-dot { width: 8px; height: 8px; border-radius: 12px; background: var(--canvas); animation: tgPulse 1.6s ease infinite; display: inline-block; }

/* ── Tables ── */
.trow { display: grid; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--hairline); align-items: center; }
.trow:last-child { border-bottom: none; }
.thead { display: grid; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--hairline); font-size: 12px; font-weight: 700; color: var(--mute); }

.icon-tile { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; border: 1px solid var(--hairline); background: var(--canvas); }

/* misc */
.linkish { font-weight: 700; color: var(--ink); text-decoration: underline; cursor: pointer; background: none; border: none; font-size: 13.5px; font-family: var(--font-body); padding: 0; }
.avatar { width: 34px; height: 34px; border-radius: 12px; background: var(--ink); color: var(--canvas); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.chip { font-family: var(--font-body); font-size: 12px; font-weight: 700; border: 1px solid var(--hairline); border-radius: 12px; padding: 5px 14px; color: var(--ink); }

.flash { border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 700; margin-bottom: 18px; border: 1px solid var(--ink); }
.flash-error { background: var(--canvas); color: var(--ink); }
.flash-ok { background: var(--canvas); color: var(--ink); border-color: var(--hairline); }

/* Callout used by demo warnings and notices: hairline box, ink text. */
.notice { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 19px; color: var(--ink); background: var(--canvas); border: 1px solid var(--ink); border-radius: 12px; padding: 10px 14px; }

@media print {
  nav, .btn, footer { display: none !important; }
  body { background: #fff; }
}
/* ── Ink-surface inversions: primary buttons flip to canvas-on-ink ── */
.card-dark .btn-primary, .on-ink .btn-primary { background: var(--canvas); color: var(--ink); }
.card-dark .btn-secondary, .on-ink .btn-secondary { background: transparent; color: var(--canvas); border-color: var(--canvas); }
.card-dark .linkish, .on-ink .linkish { color: var(--canvas); }