/* ============================================================
   CSS VARS + BASE — COZY AFTERNOON WORKSHOP PALETTE
   ============================================================
   Theme notes for anyone editing these values:
   - Wood tones are honey/caramel, not chocolate. The workshop is lit
     by afternoon sun, not overhead fluorescents or candlelight.
   - Paper is butter-cream, slightly warmer than plain cream. Reads as
     "well-used but well-kept."
   - Brass and gold are bright enough to catch light — not dull metal.
   - Ink stays deep brown (never pure black) so everything reads as
     warm even at the text level.
*/
:root {
  --wood:         #a06b3a;   /* mid caramel — main chrome + rails */
  --wood-dark:    #6b4423;   /* darker honey — bottom edges, shadow */
  --wood-light:   #c9984f;   /* lit wood — highlighted surfaces */
  --paper:        #fdf0d5;   /* butter-cream — cards, ledger pages */
  --paper-dark:   #f4e4bc;   /* soft cream — hover / inactive paper */
  --paper-edge:   #c9a961;   /* paper border — brass-tinted */
  --ink:          #2b1810;   /* deep brown, never black */
  --ink-light:    #5a3d28;   /* secondary text */

  /* Santa / snow / sky accent ramp — for primary-action surfaces,
     holiday flourishes, and "bright and cozy" moments. Use these when
     an element needs to POP against the honey wood: accept buttons,
     featured card headers, drawer-tab active states, festive trim. */
  --santa:        #c83030;   /* primary Santa red */
  --santa-dark:   #8a1818;   /* red shadow + letterpress */
  --candy:        #e85560;   /* brighter candy-stripe red */
  --snow:         #ffffff;   /* pure white — trim, highlights */
  --snow-cream:   #fff8e8;   /* very warm white — card interiors */
  --sky:          #6ba9c9;   /* muted sky blue — accents, shutters */
  --sky-dark:     #3a6b8a;   /* darker sky — borders on blue surfaces */
  --holly:        #2d7a3f;   /* festive green — tree/holly accents */

  --red:          #a62828;   /* existing marquee red */
  --red-dark:     #6f1818;
  --green:        #4a8557;   /* ok / shipped — brighter, more lively */
  --green-dark:   #2d5a3f;
  --gold:         #e0b870;   /* bright brass, afternoon-catch */
  --brass:        #c9a961;   /* decorative accents, chip borders */
  --brass-dark:   #8a6a2a;
  --copper:       #c67f4a;   /* slightly warmer copper */
  --copper-dark:  #7a4324;
  --grid:         rgba(201, 169, 97, 0.16);
  --ok:           #4a8557;
  --warn:         #d4a04a;
  --bad:          #a63030;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: Georgia, 'Book Antiqua', serif;
  color: var(--ink);
  /* Layered background: subtle vertical grain + horizontal pinstripes
     over a honey-wood radial that lightens at the top (like sun through
     a skylight) and falls to a mid-caramel floor. */
  background:
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(42, 20, 8, 0.05) 40px 41px, transparent 41px 80px),
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(255, 250, 220, 0.035) 6px 7px),
    radial-gradient(ellipse at 50% 15%, var(--wood-light) 0%, var(--wood) 55%, var(--wood-dark) 100%);
  min-height: 100vh;
  padding: 14px;
  overflow-x: hidden;
}

.workshop {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}

/* ============================================================
   MARQUEE HEADER
   ============================================================ */
.marquee {
  background: linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%);
  border: 3px solid var(--brass-dark);
  border-radius: 6px;
  padding: 10px 18px;
  color: #fdf0d5;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.2),
    inset 0 -3px 6px rgba(0,0,0,0.4),
    0 4px 0 #2a0a0a,
    0 8px 16px rgba(0,0,0,0.5);
  position: relative;
}
.marquee::before, .marquee::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  background: radial-gradient(circle at 35% 35%, var(--gold), var(--brass-dark));
  border-radius: 50%;
  top: 50%; transform: translateY(-50%);
  box-shadow: inset 0 -2px 2px rgba(0,0,0,0.4);
}
.marquee::before { left: 8px; }
.marquee::after { right: 8px; }

.marquee h1 {
  font-family: 'Didot', Georgia, serif;
  font-size: 22px;
  letter-spacing: 3px;
  font-weight: 900;
  text-shadow: 1px 1px 0 #2a0a0a, 2px 2px 0 rgba(0,0,0,0.3);
  text-align: center;
}
.marquee h1 small {
  display: block;
  font-size: 10px;
  letter-spacing: 5px;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 2px;
  font-family: Georgia, serif;
}

.inspector-badge {
  background: var(--paper);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  line-height: 1.4;
  border: 1px solid var(--paper-edge);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
  min-width: 140px;
}
.inspector-badge strong { color: var(--red-dark); letter-spacing: 1px; }
.inspector-badge .badge-sub { color: var(--ink-light); font-size: 9px; }

.shift-clock {
  background: var(--ink);
  color: var(--gold);
  padding: 6px 10px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  border: 1px solid var(--gold);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.6);
  min-width: 120px;
  text-align: center;
}
.shift-clock small { display: block; font-size: 9px; letter-spacing: 2px; opacity: 0.7; }

/* ============================================================
   RP / R&D POINTS READOUT
   ============================================================ */
.rp-readout {
  background: linear-gradient(180deg, #1a3626 0%, #0e1e15 100%);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid var(--gold);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.1);
  min-width: 110px;
  text-align: center;
  font-family: 'Courier New', monospace;
  position: relative;
}
.rp-readout .rp-label {
  font-size: 8px;
  letter-spacing: 2px;
  opacity: 0.7;
  line-height: 1;
  margin-bottom: 2px;
}
.rp-readout .rp-value {
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  color: #fff3c0;
  text-shadow: 0 0 8px rgba(255, 243, 192, 0.5);
}
.rp-readout .rp-next {
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(201, 169, 97, 0.7);
  margin-top: 2px;
  line-height: 1;
}
.rp-readout.flash {
  animation: rpFlash 0.7s ease;
}
@keyframes rpFlash {
  0%, 100% { background: linear-gradient(180deg, #1a3626 0%, #0e1e15 100%); }
  50% { background: linear-gradient(180deg, var(--gold) 0%, var(--brass) 100%); }
}

/* Wonder Credits readout — mirrors RP but with copper tones */
.wc-readout {
  background: linear-gradient(180deg, #3a2416 0%, #1f140c 100%);
  color: var(--gold);
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid var(--brass);
  box-shadow:
    inset 0 0 8px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.1);
  min-width: 92px;
  text-align: center;
  font-family: 'Courier New', monospace;
  position: relative;
}
.wc-readout .wc-label {
  font-size: 8px;
  letter-spacing: 2px;
  opacity: 0.7;
  line-height: 1;
  margin-bottom: 2px;
}
.wc-readout .wc-value {
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  color: #ffd97d;
  text-shadow: 0 0 8px rgba(255, 217, 125, 0.5);
}
.wc-readout .wc-unit {
  font-size: 9px;
  letter-spacing: 1px;
  color: rgba(201, 169, 97, 0.7);
  margin-top: 2px;
  line-height: 1;
}
.wc-readout.low .wc-value { color: #ffd47a; }
.wc-readout.broke .wc-value {
  color: #ff9090;
  animation: wcHeaderBrokePulse 1.2s infinite;
}
@keyframes wcHeaderBrokePulse { 50% { opacity: 0.5; } }
.wc-readout.flash {
  animation: wcFlash 0.7s ease;
}
@keyframes wcFlash {
  0%, 100% { background: linear-gradient(180deg, #3a2416 0%, #1f140c 100%); }
  50% { background: linear-gradient(180deg, var(--brass) 0%, var(--brass-dark) 100%); }
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
main {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 12px;
  align-items: start;
}

/* ============================================================
   FOOTER ACTION BAR
   ============================================================ */
footer.action-bar {
  background: linear-gradient(180deg, #3e2818 0%, #1f1009 100%);
  border: 3px solid var(--brass-dark);
  border-radius: 6px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.1),
    inset 0 -4px 10px rgba(0,0,0,0.4),
    0 6px 14px rgba(0,0,0,0.4);
}
.case-info {
  background: rgba(0,0,0,0.3);
  border: 1px dashed rgba(201, 169, 97, 0.5);
  border-radius: 3px;
  padding: 6px 10px;
  color: #fdf0d5;
  font-size: 10px;
  letter-spacing: 2px;
}
.case-info .big-num {
  color: var(--gold);
  font-size: 16px;
  font-family: 'Courier New', monospace;
  margin-left: 4px;
}
.spacer { flex: 1; }

.stamp-btn {
  font-family: 'Arial Black', sans-serif;
  font-weight: 900;
  letter-spacing: 3px;
  padding: 10px 20px;
  border: 3px solid;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  transition: transform 0.1s;
  text-transform: uppercase;
  font-size: 14px;
}
.stamp-btn.approve {
  color: var(--ok);
  border-color: var(--ok);
  background: rgba(61, 139, 80, 0.12);
}
.stamp-btn.reject {
  color: var(--bad);
  border-color: var(--bad);
  background: rgba(166, 40, 40, 0.12);
  font-size: 12px;
  padding: 8px 14px;
}
.stamp-btn:hover { transform: translateY(-1px); }
.stamp-btn:active { transform: translateY(1px) rotate(-1deg); }

.shipped-counter {
  display: flex;
  gap: 6px;
}
.counter-pill {
  background: rgba(0,0,0,0.3);
  border-radius: 2px;
  padding: 4px 8px;
  text-align: center;
  color: #fdf0d5;
  font-size: 9px;
  letter-spacing: 1px;
  min-width: 58px;
}
.counter-pill .num {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: bold;
  display: block;
  margin-top: 1px;
}
.counter-pill.approved { border-left: 3px solid var(--ok); }
.counter-pill.rejected { border-left: 3px solid var(--bad); }

/* ============================================================
   RESULT LETTER MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-backdrop.show { display: flex; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.letter {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
  width: min(540px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  border: 2px solid var(--paper-edge);
  padding: 28px 32px;
  border-radius: 3px;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.8);
  transform: rotate(-1deg);
  animation: letterIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes letterIn {
  0% { transform: rotate(-15deg) scale(0.5); opacity: 0; }
  100% { transform: rotate(-1deg) scale(1); opacity: 1; }
}
.letter::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 50px; height: 50px;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.15) 50%);
}
.letter-header {
  text-align: center;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px double var(--ink-light);
}
.letter-header h2 {
  font-family: 'Didot', Georgia, serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--red-dark);
  margin-bottom: 4px;
}
.letter-header .subtitle {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--ink-light);
}
.letter-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.letter-body p { margin-bottom: 10px; }
.letter-body .signoff {
  margin-top: 14px;
  font-style: italic;
  text-align: right;
}
.letter .stamp {
  position: absolute;
  top: 20px; right: 24px;
  border: 3px solid;
  padding: 6px 14px;
  font-family: 'Arial Black', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  transform: rotate(12deg);
  opacity: 0.85;
}
.letter .stamp.approved { color: var(--ok); border-color: var(--ok); }
.letter .stamp.rejected { color: var(--bad); border-color: var(--bad); }
.letter .stamp.mixed { color: var(--warn); border-color: var(--warn); }

.letter-btn {
  display: block;
  margin: 20px auto 0;
  padding: 10px 24px;
  background: var(--green);
  color: #fdf0d5;
  border: 2px solid var(--green-dark);
  border-radius: 3px;
  font-family: Georgia, serif;
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
  text-transform: uppercase;
}
.letter-btn:hover { background: var(--green-dark); }

/* ============================================================
   RP REWARD (inside result letter)
   ============================================================ */
.rp-reward {
  margin-top: 16px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #1a3626 0%, #0e1e15 100%);
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 3px;
  text-align: center;
  box-shadow: 0 0 20px rgba(201, 169, 97, 0.15);
}
.rp-reward .reward-gains {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: baseline;
  margin-bottom: 4px;
}
.rp-reward .rp-gained {
  font-family: 'Didot', Georgia, serif;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #fff3c0;
  text-shadow: 0 0 12px rgba(255, 243, 192, 0.6);
  line-height: 1;
}
.rp-reward .wc-gained {
  font-family: 'Didot', Georgia, serif;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #ffd97d;
  text-shadow: 0 0 12px rgba(255, 217, 125, 0.6);
  line-height: 1;
}
.rp-reward .rp-total-line {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  opacity: 0.85;
}
.rp-reward .unlock-banner {
  margin-top: 10px;
  padding: 6px 10px;
  background: linear-gradient(180deg, var(--gold), var(--brass));
  color: var(--ink);
  font-family: 'Arial Black', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  border-radius: 2px;
  border: 1px solid var(--ink);
  text-transform: uppercase;
  animation: bannerPulse 1.5s ease-in-out infinite;
}
@keyframes bannerPulse {
  50% { transform: scale(1.02); box-shadow: 0 0 16px rgba(201, 169, 97, 0.6); }
}

.complete-screen { text-align: center; }
.complete-screen h2 { font-size: 26px; color: var(--green-dark); }
.complete-screen .final-stats {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 20px 0;
}
.final-stats .stat-big { text-align: center; }
.final-stats .stat-big .num {
  font-family: 'Didot', serif;
  font-size: 32px;
  font-weight: bold;
  color: var(--red-dark);
  display: block;
}
.final-stats .stat-big .label {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ink-light);
}

/* ============================================================
   TUNING PANEL (modal)
   ============================================================ */
.tuning-panel {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
  width: min(440px, 92vw);
  border: 3px solid var(--paper-edge);
  border-radius: 4px;
  padding: 20px 24px 18px;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.8);
  animation: letterIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tuning-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 2px double var(--ink-light);
}
.tuning-icon {
  width: 44px;
  height: 44px;
  background: rgba(0,0,0,0.06);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid var(--paper-edge);
}
.tuning-title h3 {
  font-family: 'Didot', Georgia, serif;
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--red-dark);
  margin-bottom: 1px;
}
.tuning-title .tuning-partnum {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--ink-light);
  letter-spacing: 1px;
}

.tuning-slider-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 14px;
}
.tuning-slider-row label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-light);
  font-weight: bold;
}
.tuning-slider-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  background: var(--ink);
  padding: 8px 12px;
  border-radius: 3px;
  border: 1px solid var(--brass-dark);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.tuning-min, .tuning-max {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--gold);
  opacity: 0.7;
  min-width: 16px;
  text-align: center;
}
input#tuneSlider {
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, var(--copper-dark), var(--copper), var(--brass));
  height: 6px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
input#tuneSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 35% 35%, #e8c471 0%, var(--brass) 60%, var(--brass-dark) 100%);
  border: 2px solid var(--ink);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.4);
}
input#tuneSlider::-webkit-slider-thumb:active { cursor: grabbing; }
input#tuneSlider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 35% 35%, #e8c471 0%, var(--brass) 60%, var(--brass-dark) 100%);
  border: 2px solid var(--ink);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.tuning-value {
  background: var(--brass);
  color: #fdf0d5;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid var(--brass-dark);
  min-width: 44px;
  text-align: center;
  justify-self: end;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}

.tuning-readout {
  background: rgba(0,0,0,0.06);
  border: 1px solid var(--paper-edge);
  border-left: 4px solid var(--green);
  padding: 8px 12px;
  border-radius: 2px;
  font-size: 12px;
  line-height: 1.55;
}
.tuning-readout .r-row { display: block; color: var(--ink); }
.tuning-readout .r-row b { color: var(--red-dark); font-family: 'Courier New', monospace; }
.tuning-readout .r-delta { color: var(--ink-light); font-size: 10px; font-style: italic; }
.tuning-readout .r-stat {
  display: inline-block;
  margin-right: 8px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

.tuning-hint {
  text-align: center;
  font-size: 10px;
  color: var(--ink-light);
  font-style: italic;
  letter-spacing: 1px;
  margin-top: 10px;
}

.tuning-panel .close-btn {
  position: static;
  background: var(--ink);
  color: var(--gold);
  border: 2px solid var(--gold);
  width: 28px;
  height: 28px;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  align-self: start;
}
.tuning-panel .close-btn:hover {
  background: var(--red-dark);
  color: #fff;
  border-color: var(--red-dark);
}

/* ============================================================
   UTILITIES
   ============================================================ */
.empty-hint {
  color: rgba(253, 240, 213, 0.5);
  font-style: italic;
  font-size: 12px;
  padding: 20px;
  text-align: center;
}
.empty-hint.small { font-size: 11px; padding: 12px; }
.empty-hint strong { color: var(--gold); font-style: normal; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  main { grid-template-columns: 1fr; }
  .marquee { grid-template-columns: 1fr; text-align: center; }
  .marquee h1 { font-size: 18px; letter-spacing: 2px; }
  footer.action-bar { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   NEXT ACTION BAR — stage-aware onboarding hint
   ============================================================
   Sits just below the cd-header inside the circuit-designer
   panel. Updates on every render to reflect current game state.
   ============================================================ */
.next-action-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin: -6px 0 10px;
  background: linear-gradient(180deg, var(--gold) 0%, #d6b06a 100%);
  color: var(--ink);
  border: 1px solid var(--brass-dark);
  border-radius: 3px;
  font-family: Georgia, serif;
  font-size: 12px;
  line-height: 1.35;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 1px 3px rgba(43, 24, 16, 0.2);
  animation: naFadeIn 0.25s ease;
}
.next-action-bar.show { display: flex; }

@keyframes naFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.na-step {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid var(--brass-dark);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}
.na-arrow {
  flex-shrink: 0;
  color: var(--brass-dark);
  font-weight: bold;
}
.na-text {
  flex: 1;
  font-style: italic;
  color: var(--ink);
}
.na-text strong {
  font-style: normal;
  letter-spacing: 0.5px;
  color: var(--brass-dark);
  background: rgba(253, 240, 213, 0.6);
  padding: 0 4px;
  border-radius: 2px;
}

/* "All specs clear — SHIP" stage gets a green treatment */
.next-action-bar.stage-done {
  background: linear-gradient(180deg, #8cc498 0%, var(--green) 100%);
  border-color: var(--green-dark);
}
.next-action-bar.stage-done .na-step {
  background: var(--green-dark);
  color: #fdf0d5;
  border-color: var(--green-dark);
}
.next-action-bar.stage-done .na-text strong {
  color: var(--green-dark);
}

/* ============================================================
   HIGHLIGHT TARGET — pulse the button the hint is pointing at
   ============================================================ */
@keyframes highlightPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(201, 169, 97, 0.0), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
}
.highlight-target {
  animation: highlightPulse 1.4s ease-in-out infinite;
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  position: relative;
  z-index: 2;
}

/* ============================================================
   PER-TOY BUDGET READOUT (space-toggle bar, working phase only)
   ============================================================
   Inline pill showing spend vs budget. Three states:
   - default: brass/paper, calm
   - .near:   amber accent (approaching limit)
   - .over:   red wash + pulsing glow (over budget — fresh only; repair
             can't reach this state due to hard gate)
   - .under:  subtle green tint (comfortably under budget)
   Plus .repair toggles "HARD CAP" vs "BONUS IF UNDER" tag flavor.
*/
.budget-readout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  margin-left: 12px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
  border: 2px solid var(--brass-dark);
  border-radius: 3px;
  font-family: Georgia, serif;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.15);
  transition: background 0.2s, border-color 0.2s;
}
.budget-label {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--ink-light);
  font-weight: bold;
}
.budget-nums {
  font-family: 'Didot', Georgia, serif;
  font-size: 15px;
  font-weight: bold;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.budget-sep {
  margin: 0 3px;
  color: var(--brass-dark);
  font-weight: normal;
}
.budget-unit {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  font-weight: normal;
  color: var(--ink-light);
  margin-left: 2px;
  letter-spacing: 1px;
}
.budget-tag {
  font-family: 'Courier New', monospace;
  font-size: 8px;
  letter-spacing: 1.5px;
  padding: 2px 6px;
  border-radius: 2px;
  background: var(--green);
  color: #fdf0d5;
  font-weight: bold;
  border: 1px solid var(--green-dark);
}
.budget-readout.repair .budget-tag {
  background: var(--brass-dark);
  color: var(--paper);
  border-color: var(--ink);
}
.budget-readout.under {
  border-color: var(--green-dark);
  background: linear-gradient(180deg, #e8f2da 0%, #d0e5b8 100%);
}
.budget-readout.near {
  border-color: #c68a3a;
  background: linear-gradient(180deg, #fff1d0 0%, #f7d896 100%);
}
.budget-readout.near .budget-nums {
  color: #8a4a1a;
}
.budget-readout.over {
  border-color: var(--bad);
  background: linear-gradient(180deg, #f7d4d0 0%, #e8a59a 100%);
  animation: budgetOverPulse 1.2s infinite alternate;
}
.budget-readout.over .budget-nums {
  color: var(--bad);
}
.budget-readout.over .budget-tag {
  background: var(--bad);
  color: #fff;
  border-color: #6b1818;
}
@keyframes budgetOverPulse {
  from { box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.15); }
  to   { box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 10px rgba(166,48,48,0.5); }
}

/* Ship letter budget note */
.budget-line {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: var(--brass-dark);
  padding: 4px 8px;
  margin: 6px 0;
  border-left: 2px solid var(--brass);
  background: rgba(201, 169, 97, 0.08);
}

/* ============================================================
   INTERCOM — transient announcements (top-right toast)
   ============================================================ */
.intercom {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  pointer-events: none;
  max-width: 420px;
  min-width: 240px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.intercom.visible {
  opacity: 1;
  transform: translateY(0);
}

.intercom-frame {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-dark) 100%);
  border: 3px solid var(--brass-dark);
  border-radius: 3px;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.28),
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  font-family: Georgia, serif;
  position: relative;
}
.intercom-frame::before {
  content: '◉ INTERCOM';
  position: absolute;
  top: -9px;
  left: 12px;
  font-family: 'Courier New', monospace;
  font-size: 8px;
  letter-spacing: 2px;
  background: var(--ink);
  color: var(--gold);
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid var(--brass-dark);
}

/* Tiny pulsing dot on the left of the message */
.intercom-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bad);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(166, 48, 48, 0.7);
  animation: intercomBlink 1s infinite;
}
@keyframes intercomBlink {
  0%, 40% { opacity: 1; }
  50%, 90% { opacity: 0.25; }
}

.intercom-from {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  background: var(--brass-dark);
  color: var(--paper);
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: bold;
  flex-shrink: 0;
}
.intercom-msg {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.35;
}

/* Tone-specific accents */
.intercom.tone-good .intercom-dot { background: var(--green); box-shadow: 0 0 6px rgba(74, 133, 87, 0.7); }
.intercom.tone-warn .intercom-dot { background: #d4a04a; box-shadow: 0 0 6px rgba(212, 160, 74, 0.7); }
.intercom.tone-alert .intercom-dot { background: var(--bad); box-shadow: 0 0 10px rgba(166, 48, 48, 0.9); animation: intercomBlink 0.4s infinite; }
.intercom.tone-good .intercom-frame { border-color: var(--green-dark); }
.intercom.tone-alert .intercom-frame {
  border-color: var(--bad);
  box-shadow:
    0 4px 14px rgba(166, 48, 48, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}