/* ============================================================
   CATBACK tokenomics — ATM SYSTEM DIAGNOSTIC readout.
   Module-owned styles. Every color/font comes from tokens.css.
   ============================================================ */

/* ---- DESK 03: an information display board ------------------
   Each readout is a separate glass-fronted module screwed into
   the department plate, with an olive header rule at the top of
   the stack acting as the display's caption rail. */
.tok-diag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;
}
.tok-diag::before {
  content: 'INFORMATION DISPLAY';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  padding-left: 22px;
  font-family: var(--font-pixel);
  font-size: 7px;
  line-height: 14px;
  letter-spacing: 2px;
  color: var(--ink-3);
  background:
    linear-gradient(90deg, var(--c-olive) 0 46%, var(--forest-2) 46% 100%);
  box-shadow: 0 0 0 var(--px) var(--shade-soft);
  pointer-events: none;
}

.tok-panel { padding: 16px 18px; }

.tok-panel-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 14px;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 1px;
  /* deep emerald reads as branch signage AND clears 4.5:1 on cream
     (the ATM body green never did — it is a body colour, not an ink) */
  color: var(--c-emerald);
}
.tok-panel-sub { color: var(--terminal-dim); }

/* ---- amber placeholder banner ------------------------------- */
.tok-banner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 12px;
  padding: 15px 16px;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 10px;
  line-height: 1.9;
  letter-spacing: 1px;
  color: var(--amber);
  border-color: var(--amber);
  box-shadow: 0 0 0 var(--px) var(--forest), 0 0 18px rgba(230, 166, 60, 0.22);
  box-shadow: 0 0 0 var(--px) var(--forest),
              0 0 18px color-mix(in srgb, var(--amber) 25%, transparent);
}
.tok-banner-icon { animation: tok-warn 1.6s step-end infinite; }
@keyframes tok-warn {
  0%, 54%   { opacity: 1; }
  55%, 100% { opacity: 0.25; }
}

/* ---- TBA chip ------------------------------------------------ */
.tok-chip {
  display: inline-block;
  padding: 3px 5px 2px;
  margin-left: 4px;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--amber);
  box-shadow: var(--px) var(--px) 0 0 var(--forest-2);
  vertical-align: middle;
  transform: translateY(-2px);
}

/* ---- supply / tax header ------------------------------------- */
.tok-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 28px;
  margin: 0;
  padding: 16px 18px;
}
.tok-head dt {
  margin: 0 0 6px;
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--terminal-dim);
}
.tok-head dd {
  margin: 0;
  font-family: var(--font-term);
  font-size: 22px;
  line-height: 1.2;
  color: var(--terminal-soft);
}

/* ---- visual 1: segmented allocation bar ----------------------- */
.tok-bar {
  display: flex;
  gap: var(--px);
  height: 48px;
  padding: var(--px);
  background: var(--ink);
  border: var(--px) solid var(--forest-2);
}
.tok-seg {
  min-width: 0;
  flex: 1 1 0;                /* flex-grow overridden inline per pct */
  display: flex;
  gap: var(--px);
  margin: 0; padding: 0; border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-snap);
}
.tok-seg:hover,
.tok-seg:focus-visible,
.tok-seg.is-current { transform: translateY(calc(-1 * var(--px))); }
.tok-seg i {
  flex: 1 1 0;
  min-width: 2px;
  background: var(--forest);
}

/* tones — block colors, token palette only */
.tok-tone-0 { --seg: var(--terminal); }
.tok-tone-1 { --seg: var(--sol-cyan); }
.tok-tone-2 { --seg: var(--amber); }
.tok-tone-3 { --seg: var(--atm-green); }
.tok-tone-4 { --seg: var(--note-pale); }

/* patterns — identity is never color alone */
.tok-pat-solid i.on,
.tok-swatch.tok-pat-solid {
  background: var(--seg);
}
.tok-pat-vstripe i.on,
.tok-swatch.tok-pat-vstripe {
  background: repeating-linear-gradient(90deg, var(--seg) 0 4px, var(--forest-2) 4px 7px);
}
.tok-pat-checker i.on,
.tok-swatch.tok-pat-checker {
  background: conic-gradient(var(--seg) 25%, var(--forest-2) 0 50%, var(--seg) 0 75%, var(--forest-2) 0);
  background-size: 8px 8px;
}
.tok-pat-hstripe i.on,
.tok-swatch.tok-pat-hstripe {
  background: repeating-linear-gradient(0deg, var(--seg) 0 4px, var(--forest-2) 4px 7px);
}
.tok-pat-grid i.on,
.tok-swatch.tok-pat-grid {
  background-color: var(--forest-2);
  background-image:
    repeating-linear-gradient(0deg, var(--seg) 0 5px, transparent 5px 7px),
    repeating-linear-gradient(90deg, var(--seg) 0 5px, transparent 5px 7px);
}

/* ---- legend ---------------------------------------------------- */
.tok-legend {
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: 10px 22px;
  margin: 14px 0 0;
  padding: 0;
  font-family: var(--font-term);
  font-size: 18px;
}
.tok-legend-item { display: flex; align-items: center; gap: 8px; }
.tok-swatch {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  box-shadow: 0 0 0 var(--px) var(--forest-2);
}
.tok-legend-pct { color: var(--terminal); }

/* ---- detail readout line ---------------------------------------- */
.tok-detail {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: var(--px) solid var(--forest-2);
  font-family: var(--font-term);
  font-size: 19px;
  line-height: 1.4;
  color: var(--terminal-soft);
  min-height: 2.2em;
}
.tok-detail strong { color: var(--terminal); font-weight: normal; }

/* ---- visual 2 + 3 grid ------------------------------------------- */
.tok-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 20px;
  align-items: stretch;
}

.tok-canvas {
  display: block;
  width: 100%;
  height: 300px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---- diagnostic typing column ------------------------------------- */
.tok-lines {
  font-family: var(--font-term);
  font-size: 19px;
  line-height: 1.55;
  color: var(--terminal-soft);
  white-space: pre;
  overflow-x: auto;
}
.tok-line { min-height: 1.55em; }
.tok-st-ok     { color: var(--terminal); }
.tok-st-tba    { color: var(--amber); }
.tok-st-active { color: var(--sol-cyan); }

.tok-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  vertical-align: -0.15em;
  background: var(--terminal);
  animation: tok-blink 0.95s step-end infinite;
}
@keyframes tok-blink {
  0%, 45%   { opacity: 1; }
  46%, 100% { opacity: 0; }
}

.tok-rerun {
  margin-top: 16px;
  min-height: 44px;
  min-width: 44px;
}

/* ---- mobile -------------------------------------------------------- */
@media (max-width: 760px) {
  .tok-grid { grid-template-columns: 1fr; }
  .tok-bar { height: 56px; }
  .tok-head dd { font-size: 20px; }
  .tok-legend { font-size: 17px; }
  .tok-lines { font-size: 18px; }
  .tok-canvas { height: 240px; }
}

/* ============================================================
   Micro-interaction + depth pass (additive).
   .tok-live is toggled by tokenomics.js while the section is on
   screen — ambient loops only run when visible.
   ============================================================ */

/* ---- display-module depth: bezel, screws, cast shadow -------------- */
.tok-panel,
.tok-head {
  position: relative;
  background-color: var(--ink-3);          /* opaque over the room */
  box-shadow:
    0 0 0 var(--px) var(--forest),
    0 0 0 calc(2 * var(--px)) var(--c-olive),
    calc(2 * var(--px)) calc(3 * var(--px)) 0 0 var(--shade-soft),
    0 12px 22px var(--shade),
    inset 0 0 0 var(--px) var(--ink-3),
    inset 0 calc(3 * var(--px)) 0 0 var(--scanline),
    inset 0 calc(-2 * var(--px)) 0 0 var(--glow-soft);
}
.tok-panel { overflow: hidden; }

/* four screw heads per module — it is bolted to the board */
.tok-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--charcoal) 0 0), linear-gradient(var(--charcoal) 0 0),
    linear-gradient(var(--charcoal) 0 0), linear-gradient(var(--charcoal) 0 0);
  background-size: 5px 5px, 5px 5px, 5px 5px, 5px 5px;
  background-position:
    6px 6px, calc(100% - 6px) 6px,
    6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
}

/* faint CRT hum band drifting down each monitor */
.tok-panel::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 26%;
  pointer-events: none;
  opacity: 0.16;
  transform: translateY(-140%);
  background: linear-gradient(180deg,
    transparent 0 15%,
    var(--glow-soft) 15% 35%,
    var(--glow-terminal) 35% 65%,
    var(--glow-soft) 65% 85%,
    transparent 85% 100%);
}
.tok-live .tok-panel::after {
  animation: tok-hum 7.6s steps(26, end) infinite;
}
@keyframes tok-hum {
  0%   { transform: translateY(-140%); }
  72%  { transform: translateY(420%); }
  100% { transform: translateY(420%); }
}
body[data-motion="reduce"] .tok-panel::after { animation: none; }

/* ---- segment hover/focus: brighter pattern + 1px lift -------------- */
.tok-seg {
  transition:
    transform var(--dur-fast) var(--ease-snap),
    filter var(--dur-fast) var(--ease-snap);
}
.tok-seg:hover,
.tok-seg:focus-visible,
.tok-seg.is-current {
  transform: translateY(-1px);
  filter: brightness(1.25);
}

/* legend row highlights in sync with its segment */
.tok-legend-item {
  transition: transform var(--dur-fast) var(--ease-snap);
}
.tok-legend-label,
.tok-legend-pct { transition: color var(--dur-fast) var(--ease-snap); }
.tok-legend-item.is-hot { transform: translateX(3px); }
.tok-legend-item.is-hot .tok-legend-label { color: var(--terminal); }
.tok-legend-item.is-hot .tok-legend-pct { color: var(--white-hi); }
.tok-legend-item.is-hot .tok-swatch {
  box-shadow: 0 0 0 var(--px) var(--terminal), 0 0 8px var(--glow-terminal);
}

/* ---- one-shot scanline sweep when the chart finishes building ------- */
.tok-sweep {
  position: absolute;
  left: 0; right: 0;
  overflow: hidden;
  pointer-events: none;
}
.tok-sweep::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 22%;
  opacity: 0.55;
  transform: translateY(-110%);
  background: linear-gradient(180deg,
    transparent 0 22%,
    var(--glow-soft) 22% 50%,
    var(--glow-terminal) 50% 78%,
    var(--terminal) 78% 86%,
    transparent 86% 100%);
  animation: tok-sweep 640ms steps(18, end) 1 forwards;
}
@keyframes tok-sweep {
  from { transform: translateY(-110%); }
  to   { transform: translateY(500%); }
}

/* ---- TBA chips: slow amber pulse (opacity only) --------------------- */
.tok-live .tok-chip {
  animation: tok-chip-pulse 3.4s var(--ease-mech) infinite;
}
@keyframes tok-chip-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
body[data-motion="reduce"] .tok-chip { animation: none; }

/* ---- RE-RUN SELF-TEST: screen-flicker on the diagnostic column ------ */
.tok-flicker { animation: tok-flicker 300ms var(--ease-mech) 1; }
@keyframes tok-flicker {
  0%   { opacity: 1; }
  15%  { opacity: 0.4; }
  35%  { opacity: 0.95; }
  55%  { opacity: 0.5; }
  100% { opacity: 1; }
}