/* ==========================================================================
   NAG design tokens — ported verbatim from the companion app's
   renderer/web-v3/src/theme/nag-theme.css ramp, plus marketing-scale
   utility components (plate, slab, ledger, door, frame, buttons).

   Rules carried over from the app surface:
   - One gold ramp: eyebrow → edge → fill → hover. Nothing else mints gold.
   - Gold is chrome, never judgement. Judgement uses --nag-pos/warn/neg and
     only where a benchmark backs it; otherwise --nag-neutral.
   - Depth is shadow distance, never a luminance bloom. Focus is an outline
     at a distance, never a glow.
   - Hairlines divide; cards do not float.
   - Four durations, one curve, never `transition: all`.
   - The ledger separates buckets by LUMINANCE + texture, not hue.
   ========================================================================== */

:root {
  /* ink & surface */
  --nag-ink: #07090c;
  --nag-plate-bg: #080a0c;
  --nag-panel: rgba(14, 15, 18, 0.78);
  --nag-panel-raised: rgba(255, 255, 255, 0.028);
  --nag-hairline: rgba(255, 255, 255, 0.075);
  --nag-edge: rgba(255, 255, 255, 0.095);
  --nag-edge-hover: rgba(255, 255, 255, 0.22);
  --nag-inset: rgba(0, 0, 0, 0.28);

  /* text */
  --nag-text: #f4f2ed;
  --nag-text-dim: #c8c8cc;
  --nag-text-mute: #8a8a90;
  --nag-text-faint: #83838a;

  /* gold chrome — one ramp, nothing else mints gold */
  --nag-gold-eyebrow: #a77d38;
  --nag-gold-text: rgba(230, 189, 116, 0.78);
  --nag-gold-edge: rgba(215, 167, 79, 0.16);
  --nag-gold-edge-strong: rgba(215, 167, 79, 0.32);
  --nag-gold-fill: #dda343;
  --nag-gold-hover: #e7b65f;
  --nag-focus-ring: rgba(231, 184, 101, 0.92);

  /* judgement (reserved; never decoration) */
  --nag-pos: #5fc992;
  --nag-warn: #e0a35a;
  --nag-neg: #e58179;
  --nag-neutral: #8a8a90;

  /* the door — cold blue-white; "this takes you somewhere" */
  --nag-door-ink: #5f6d78;
  --nag-door-ink-lit: #a9c8dd;
  --nag-door-jamb: rgba(140, 178, 205, 0.24);
  --nag-door-jamb-lit: rgba(169, 200, 221, 0.92);
  --nag-door-wash: rgba(126, 165, 194, 0.075);
  --nag-door-wash-strong: rgba(126, 165, 194, 0.13);

  /* explanatory callout (sky, distinct from door + gold) */
  --nag-info: #9ecbff;

  /* ledger bucket luminance ramp */
  --nag-bucket-boss: #e6e3db;
  --nag-bucket-trash: #767a83;
  --nag-bucket-runback: #4c505a;
  --nag-bucket-idle: #262a31;
  --nag-bucket-edge: #14171c;
  --nag-bucket-empty: rgba(255, 255, 255, 0.05);
  --nag-hatch-line: rgba(255, 255, 255, 0.14);
  --nag-hatch-line-soft: rgba(255, 255, 255, 0.07);

  /* plate optics */
  --nag-scrim-v: linear-gradient(180deg, rgba(5, 7, 9, 0.72), rgba(5, 7, 9, 0.16) 38%, rgba(5, 7, 9, 0.92));
  --nag-scrim-h: linear-gradient(90deg, rgba(5, 7, 9, 0.66), transparent 46%, rgba(5, 7, 9, 0.34));
  --nag-vignette-bg: radial-gradient(ellipse at 30% 60%, rgba(3, 5, 7, 0.72), rgba(3, 5, 7, 0.34) 56%, transparent 86%);
  --nag-plate-grade: saturate(0.62) contrast(1.08) brightness(0.72);
  --nag-plate-grade-hover: saturate(0.8) contrast(1.08) brightness(0.84);
  --nag-plate-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  --nag-plate-shadow-lift: 0 25px 58px rgba(0, 0, 0, 0.48);
  --nag-mark-ink: rgba(255, 255, 255, 0.073);
  --nag-over-art-shadow: 0 2px 16px rgba(0, 0, 0, 0.84);

  /* graph-paper frame */
  --nag-grid-line: rgba(255, 255, 255, 0.028);
  --nag-grid-bg: rgba(9, 11, 13, 0.9);
  --nag-frame-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.48), 0 20px 54px rgba(0, 0, 0, 0.25);

  /* motion — four durations, one curve */
  --dur-fast: 150ms;
  --dur-surface: 200ms;
  --dur-drawer: 220ms;
  --dur-layout: 440ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --nag-radius: 5px;
  --nag-radius-lg: 8px;
}

/* ==========================================================================
   Utilities (marketing scale — same grammar as the app, sized for a page
   read at arm's length rather than a tool used at desk density)
   ========================================================================== */

.nag-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--nag-gold-eyebrow);
  font-size: 0.8rem;
  font-weight: 850;
  letter-spacing: 0.105em;
  text-transform: uppercase;
}

.nag-display {
  margin: 0 0 0.4em;
  color: var(--nag-text);
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 780;
  letter-spacing: -0.035em;
  line-height: 1.06;
  text-wrap: balance;
}

.nag-display--hero { font-size: clamp(2.5rem, 5.6vw, 4.3rem); line-height: 1.02; }
.nag-display--sub { font-size: clamp(1.45rem, 2.4vw, 2.1rem); }

.nag-lead {
  color: var(--nag-text-dim);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  max-width: 62ch;
}

.nag-caption {
  color: var(--nag-text);
  font-size: clamp(1.12rem, 1.85vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.36;
  max-width: 44ch;
  text-wrap: balance;
}

.nag-num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   The plate — atmospheric surface: art under tint, double scrim,
   ghost wordmark, content with over-art text shadow
   ========================================================================== */

.nag-plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--nag-edge);
  border-radius: var(--nag-radius);
  background: var(--nag-plate-bg);
  box-shadow: var(--nag-plate-shadow);
}

.nag-plate__art {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: var(--nag-plate-art);
  background-size: cover;
  background-position: var(--nag-plate-crop, 50% 30%);
  filter: var(--nag-plate-grade);
  opacity: 0.88;
  transition: filter var(--dur-surface) var(--ease-out), opacity var(--dur-surface) var(--ease-out);
}

.nag-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--nag-scrim-v), var(--nag-scrim-h);
  pointer-events: none;
}

.nag-plate[data-mark]::after {
  content: attr(data-mark);
  position: absolute;
  right: 18px;
  bottom: -14px;
  z-index: -1;
  color: var(--nag-mark-ink);
  font-size: clamp(3.7rem, 6vw, 5.9rem);
  font-weight: 780;
  letter-spacing: -0.085em;
  line-height: 0.92;
  text-align: right;
  text-transform: uppercase;
  pointer-events: none;
}

.nag-plate__body {
  position: relative;
  z-index: 1;
  text-shadow: var(--nag-over-art-shadow);
}

.nag-plate--flat .nag-plate__art { display: none; }

a.nag-plate,
button.nag-plate { cursor: pointer; }

a.nag-plate:hover,
a.nag-plate:focus-visible,
button.nag-plate:hover,
button.nag-plate:focus-visible {
  border-color: var(--nag-gold-edge-strong);
  box-shadow: var(--nag-plate-shadow-lift);
}

a.nag-plate:hover .nag-plate__art,
button.nag-plate:hover .nag-plate__art {
  filter: var(--nag-plate-grade-hover);
  opacity: 1;
}

/* local legibility pool behind display type over art — never plate-wide */
.nag-vignette { position: relative; }
.nag-vignette::before {
  content: "";
  position: absolute;
  inset: -12px 2px -14px;
  z-index: -1;
  background: var(--nag-vignette-bg);
  pointer-events: none;
}

/* ==========================================================================
   The slab — one hairline-ruled monolith, the opposite of floating cards
   ========================================================================== */

.nag-slab {
  display: grid;
  border-top: 1px solid var(--nag-hairline);
  border-bottom: 1px solid var(--nag-hairline);
  background: var(--nag-panel-raised);
}

.nag-slab__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-right: 1px solid var(--nag-hairline);
  min-width: 0;
}
.nag-slab__cell:last-child { border-right: none; }

.nag-slab__value {
  color: var(--nag-text);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.nag-slab__label {
  color: var(--nag-text-mute);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.nag-slab__sub {
  color: var(--nag-text-faint);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* ==========================================================================
   The graph-paper frame — for screenshots and diagrams
   ========================================================================== */

.nag-frame {
  padding: 10px;
  border: 1px solid var(--nag-gold-edge);
  border-radius: var(--nag-radius-lg);
  background:
    linear-gradient(90deg, var(--nag-grid-line) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(var(--nag-grid-line) 1px, transparent 1px) 0 0 / 52px 52px,
    var(--nag-grid-bg);
  box-shadow: var(--nag-frame-shadow);
}

/* ==========================================================================
   Buttons — war-table vocabulary at marketing size
   ========================================================================== */

.nag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 780;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.nag-btn--primary {
  color: #16110a;
  background: var(--nag-gold-fill);
  border-color: #e3af56;
}
.nag-btn--primary:hover { background: var(--nag-gold-hover); color: #16110a; }

.nag-btn--ghost {
  color: #d7d4ce;
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.12);
}
.nag-btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.22);
}

/* ==========================================================================
   The door — one treatment for anything that goes one layer deeper
   ========================================================================== */

.nag-door {
  position: relative;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.nag-door__jamb {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  z-index: 4;
  background: var(--nag-door-jamb);
  transform-origin: left center;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.nag-door__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--nag-door-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nag-door__go::after {
  content: "\203A";
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

.nag-door:hover,
.nag-door:focus-visible { background-color: var(--nag-door-wash); }
.nag-door:hover .nag-door__jamb,
.nag-door:focus-visible .nag-door__jamb {
  background: var(--nag-door-jamb-lit);
  transform: scaleX(1.6);
}
.nag-door:hover .nag-door__go,
.nag-door:focus-visible .nag-door__go {
  color: var(--nag-door-ink-lit);
  transform: translateX(2px);
}

/* plate-doors lift instead of washing (a wash would grey the art) */
.nag-plate.nag-door:hover,
.nag-plate.nag-door:focus-visible {
  background-color: var(--nag-plate-bg);
  border-color: var(--nag-door-jamb-lit);
  box-shadow: var(--nag-plate-shadow-lift);
}

/* ==========================================================================
   The ledger — the signature product visual. Buckets separated by
   luminance + texture, struck onto the plate once, left to right.
   ========================================================================== */

.nag-ledger__bar {
  display: flex;
  height: 66px;
  border: 1px solid var(--nag-hairline);
  border-radius: 3px;
  background: var(--nag-bucket-empty);
  box-shadow: inset 0 0 0 1px var(--nag-inset);
  overflow: hidden;
}

.nag-ledger__bar.is-struck {
  animation: nagLedgerIn var(--dur-layout) var(--ease-out) both;
}

@keyframes nagLedgerIn {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.nag-ledger__seg {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid var(--nag-bucket-edge);
  transition: filter var(--dur-fast) var(--ease-out);
}
.nag-ledger__seg:last-child { border-right: none; }

.nag-ledger__seg[data-bucket="boss"] { background: var(--nag-bucket-boss); }
.nag-ledger__seg[data-bucket="trash"] { background: var(--nag-bucket-trash); }
.nag-ledger__seg[data-bucket="runback"] {
  background-color: var(--nag-bucket-runback);
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--nag-hatch-line) 5px 6px);
}
.nag-ledger__seg[data-bucket="idle"] {
  background-color: var(--nag-bucket-idle);
  background-image: repeating-linear-gradient(90deg, var(--nag-hatch-line-soft) 0 1px, transparent 1px 8px);
}
.nag-ledger__seg[data-bucket="setup"],
.nag-ledger__seg[data-bucket="wrap"] {
  background-color: var(--nag-bucket-idle);
  background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--nag-hatch-line-soft) 3px 5px);
}

.nag-ledger__bar:hover .nag-ledger__seg { filter: brightness(0.82); }
.nag-ledger__bar:hover .nag-ledger__seg:hover { filter: brightness(1.14); }

.nag-ledger__seg-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  color: var(--nag-text);
  text-shadow: 0 1px 6px var(--nag-inset);
  white-space: nowrap;
  overflow: hidden;
}
.nag-ledger__seg[data-bucket="boss"] .nag-ledger__seg-label {
  color: #14171c;
  text-shadow: none;
}
.nag-ledger__seg-label b {
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}
.nag-ledger__seg-label i {
  font-style: normal;
  font-size: 0.86rem;
  font-weight: 780;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.nag-ledger__seg.is-tight .nag-ledger__seg-label { display: none; }

.nag-ledger__legend { margin-top: 14px; }

.nag-ledger__swatch {
  display: inline-block;
  width: 26px;
  height: 9px;
  border-radius: 1px;
  border: 1px solid var(--nag-bucket-edge);
}
.nag-ledger__swatch[data-bucket="boss"] { background: var(--nag-bucket-boss); }
.nag-ledger__swatch[data-bucket="trash"] { background: var(--nag-bucket-trash); }
.nag-ledger__swatch[data-bucket="runback"] {
  background-color: var(--nag-bucket-runback);
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--nag-hatch-line) 5px 6px);
}
.nag-ledger__swatch[data-bucket="idle"] {
  background-color: var(--nag-bucket-idle);
  background-image: repeating-linear-gradient(90deg, var(--nag-hatch-line-soft) 0 1px, transparent 1px 8px);
}

/* ==========================================================================
   The piece — round icon with three-layer depth
   ========================================================================== */

.nag-piece {
  position: relative;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(224, 228, 232, 0.18);
  border-radius: 50%;
  background: var(--nag-plate-bg);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.5);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nag-piece::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -8px;
  height: 13px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.76);
  filter: blur(6px);
  opacity: 0.68;
  transform: scaleX(0.9);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index: -1;
}
.nag-piece img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ==========================================================================
   Focus + reduced motion (scoped to token surfaces)
   ========================================================================== */

[data-nag-surface] :focus-visible {
  outline: 2px solid var(--nag-focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  [data-nag-surface] *,
  [data-nag-surface] *::before,
  [data-nag-surface] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .nag-ledger__bar.is-struck { animation: none !important; clip-path: none; }
  .nag-door:hover .nag-door__jamb,
  .nag-door:focus-visible .nag-door__jamb,
  .nag-door:hover .nag-door__go,
  .nag-door:focus-visible .nag-door__go { transform: none; }
}