/* app.css — layout for the main screen. Components come from tokens.css. */
html, body { height: 100%; margin: 0; }
.app { display: grid; grid-template-columns: var(--drawer-w) minmax(0, 1fr) var(--drawer-w); grid-template-rows: auto minmax(0, 1fr); gap: 6px; height: 100vh; padding: 6px; background: var(--carpet); box-sizing: border-box; }
.strip { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; min-height: var(--strip-h); background: var(--carpet-dark); box-shadow: 0 0 0 2px var(--partition); overflow: hidden; }
.strip .tile { flex: 0 1 auto; min-width: 0; min-height: var(--strip-h); box-sizing: border-box; justify-content: center; overflow: hidden; }
.strip .tile .value { white-space: nowrap; }
.strip .actions { flex: 0 0 auto; flex-wrap: nowrap; min-height: var(--strip-h); margin-left: auto; }
.strip .tile:last-child { border-right: 0; }
.strip .spacer { flex: 1; }
.strip .actions { display: flex; align-items: center; gap: 6px; padding: 0 var(--s3); }
.drawer { background: var(--carpet-dark); box-shadow: 0 0 0 2px var(--partition); display: flex; flex-direction: column; min-height: 0; }
.drawer .tabs { display: flex; border-bottom: 2px solid var(--partition); }
.drawer .tabs button { flex: 1; font-family: var(--font-pixel); font-size: var(--pixel-xs); text-transform: uppercase; background: none; border: 0; color: var(--paper-muted); padding: var(--s2); cursor: pointer; }
.drawer .tabs button[aria-selected="true"] { color: var(--ink); background: var(--wall); }
.drawer .tabs button:focus-visible { outline: 0; box-shadow: var(--frame-focus); }
.drawer .body { flex: 1; overflow: auto; background: var(--wall); color: var(--ink); padding: var(--s2) var(--s3); min-height: 0; }
.drawer .body h3 { margin: var(--s2) 0 var(--s1); }
.drawer .body .label { color: var(--steel-dark); }
.floor-wrap { position: relative; background: var(--carpet-dark); box-shadow: 0 0 0 2px var(--partition); display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; }
.floor-wrap canvas { display: block; max-width: 100%; max-height: 100%; }
.floor-wrap .day { position: absolute; top: 8px; left: 10px; font-family: var(--font-pixel); font-size: var(--pixel-sm); }
.floor-wrap .day i { color: var(--lcd); font-style: normal; }
.floor-wrap .counters { position: absolute; top: 8px; right: 10px; display: flex; gap: var(--s3); font-size: var(--fs-xs); color: var(--paper-muted); }
.floor-wrap .counters b { color: var(--paper-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.floor-wrap .ticker { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(31,40,53,.94); border-top: 2px solid var(--partition); padding: 6px 10px; font-size: var(--fs-xs); color: var(--paper-muted); white-space: nowrap; overflow: hidden; }
.floor-wrap .ticker b { color: var(--lcd); font-weight: 500; }
.floor-wrap .ticker .bad { color: var(--bad); } .floor-wrap .ticker .ok { color: var(--ok); }
.floor-wrap .empty { text-align: center; color: var(--paper-muted); max-width: 40ch; }
.floor-wrap .empty h2 { color: var(--paper-text); margin-bottom: var(--s2); }

/* rows in drawers */
.row { display: grid; grid-template-columns: 16px 1fr auto; gap: var(--s2); align-items: center; padding: 3px 0; border-bottom: 1px solid var(--wall-dim); font-size: var(--fs-sm); cursor: pointer; }
.row:hover { background: rgba(0,0,0,.04); }
.row.selected { background: var(--lcd-glow); }
.row .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .who small { color: var(--steel-dark); }
.row .num { font-variant-numeric: tabular-nums; }
.detail { background: var(--wall-dim); padding: var(--s2) var(--s3); margin: var(--s2) 0; font-size: var(--fs-sm); }
.detail .stats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin: var(--s1) 0; text-align: center; }
.detail .stats b { display: block; font-family: var(--font-pixel); font-size: var(--pixel-xs); color: var(--steel-dark); }
.detail .stats span { font-variant-numeric: tabular-nums; }
.detail .actions { display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s2); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s3); font-size: var(--fs-sm); align-items: baseline; }
.kv .num { font-variant-numeric: tabular-nums; }
.slider-row { margin: var(--s1) 0 var(--s3); }
.btn-row { display: flex; gap: var(--s1); flex-wrap: wrap; margin: var(--s2) 0; }
.btn.sm { padding: 4px 8px; font-size: var(--pixel-xs); }
.trait { font-size: var(--fs-xs); }
.trait.neg { color: var(--bad); } .trait.pos { color: var(--ok-dim); } .trait.hid { color: var(--steel-dark); }

/* report overlay */
.overlay { position: fixed; inset: 0; background: rgba(17,24,33,.7); display: flex; align-items: center; justify-content: center; z-index: 20; padding: var(--s6); }
.report { background: var(--wall); color: var(--ink); box-shadow: var(--frame); max-width: 1100px; width: 100%; max-height: 92vh; overflow: auto; padding: var(--s4) var(--s6); }
.report .head { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s3); }
.report .head .spacer { flex: 1; }
.report .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }
.report .grid h3 { margin-bottom: var(--s1); color: var(--steel-dark); }
.report table td { padding: 2px var(--s2); }
.report .events { margin-top: var(--s3); font-size: var(--fs-sm); }
.report .events li { margin: 2px 0; }
.waterfall { display: grid; grid-template-columns: 110px 1fr 70px; gap: 2px var(--s2); align-items: center; font-size: var(--fs-xs); }
.waterfall .bar { height: 10px; background: var(--lcd); }
.waterfall .bar.lost { background: var(--bad); }
.waterfall .bar.good { background: var(--ok); }
.waterfall .num { text-align: right; font-variant-numeric: tabular-nums; }
.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--steel-dark); color: var(--paper-text); padding: var(--s2) var(--s4); font-size: var(--fs-sm); box-shadow: var(--frame); z-index: 30; }

@media (max-width: 1100px) { .app { grid-template-columns: 260px minmax(0,1fr) 260px; } }
@media (max-width: 860px) { .app { grid-template-columns: 1fr; grid-template-rows: auto 360px auto auto; height: auto; } }

/* agent card */
.detail.agent table { font-size: var(--fs-xs); margin: 2px 0; }
.detail.agent th { font-size: 7px; padding: 2px 4px; }
.detail.agent td { padding: 1px 4px; }
/* help overlay */
.report.help { max-width: 1200px; }
.help-nav { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 8px; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.help-entry { background: var(--wall-dim); padding: 8px 10px; font-size: var(--fs-sm); }
.help-entry b { font-family: var(--font-pixel); font-size: var(--pixel-xs); text-transform: uppercase; }
.help-entry p { margin: 4px 0 0; }
.help-entry ul { margin: 4px 0 0; padding-left: 16px; font-size: var(--fs-xs); }
.report .events table td, .report .events table th { font-size: var(--fs-xs); vertical-align: top; }

/* ── start / sold screens ── */
.start { grid-column: 1 / -1; grid-row: 1 / -1; display: flex; align-items: center; justify-content: center; overflow: auto; }
.start-box { background: var(--wall); color: var(--ink); box-shadow: var(--frame); max-width: 720px; width: 100%; padding: var(--s5) var(--s6); }
.start-box h1 { font-family: var(--font-pixel); font-size: 22px; margin: 0 0 var(--s2); }
.start-box .field { display: block; margin: var(--s3) 0; font-size: var(--fs-sm); }
.start-box .field > span { display: block; font-family: var(--font-pixel); font-size: var(--pixel-xs); text-transform: uppercase; color: var(--steel-dark); margin-bottom: var(--s1); }
.start-box .field input { width: 100%; box-sizing: border-box; font-family: var(--font-mono); font-size: var(--fs-md); padding: 6px 8px; border: 2px solid var(--partition); background: #fff; color: var(--ink); }
.vcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.vcard { text-align: left; background: var(--wall-dim); border: 2px solid var(--partition); padding: var(--s2) var(--s3); cursor: pointer; color: var(--ink); font-family: var(--font-mono); }
.vcard b { display: block; font-family: var(--font-pixel); font-size: var(--pixel-xs); text-transform: uppercase; }
.vcard i { display: block; color: var(--lcd); font-style: normal; font-size: var(--fs-xs); margin: 2px 0 4px; }
.vcard span { display: block; font-size: var(--fs-xs); color: var(--steel-dark); }
.vcard.on { border-color: var(--lcd); background: var(--lcd-glow); }
.vcard:focus-visible { outline: 0; box-shadow: var(--frame-focus); }

/* ── division tabs in the strip ── */
.ccm .strip .tile.divs { display: flex; flex: 0 0 auto; flex-direction: row; gap: 4px; align-items: center; padding: 0 var(--s2); min-width: 0; }
.divtab { font-family: var(--font-pixel); font-size: var(--pixel-xs); background: none; border: 2px solid var(--partition); color: var(--paper-muted); padding: 4px 8px; cursor: pointer; text-transform: uppercase; }
.divtab.on { background: var(--wall); color: var(--ink); border-color: var(--wall); }
.divtab.add { color: var(--lcd); border-style: dashed; }
.ccm .strip .tile.co { min-width: 170px; flex: 0 1 auto; } .tile.co .value { white-space: nowrap; } .tile.co .label { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── cards: decisions, board letter, offer ── */
.report.card { max-width: 640px; }
.card .story { font-size: var(--fs-md); line-height: 1.5; margin: var(--s2) 0; }
.card .choices { display: grid; gap: var(--s2); margin-top: var(--s3); }
.card .choice { text-align: left; background: var(--wall-dim); border: 2px solid var(--partition); padding: var(--s2) var(--s3); cursor: pointer; color: var(--ink); font-family: var(--font-mono); }
.card .choice b { display: block; font-family: var(--font-pixel); font-size: var(--pixel-xs); text-transform: uppercase; margin-bottom: 2px; }
.card .choice span { font-size: var(--fs-sm); color: var(--steel-dark); }
.card .choice:hover { border-color: var(--lcd); background: var(--lcd-glow); }
.card .grade { font-family: var(--font-pixel); font-size: 22px; padding: 0 var(--s2); }
.card.letter .story { font-family: var(--font-mono); }

/* ── funnel strip ── */
.funnel { display: flex; align-items: stretch; gap: 0; margin: var(--s2) 0; overflow-x: auto; }
.funnel .stage { flex: 1; min-width: 92px; background: var(--wall-dim); border-right: 2px solid var(--wall); padding: 6px 8px; position: relative; }
.funnel .stage:last-child { border-right: 0; background: rgba(74,214,109,.18); }
.funnel .stage b { display: block; font-family: var(--font-mono); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.funnel .stage span { font-family: var(--font-pixel); font-size: 7px; text-transform: uppercase; color: var(--steel-dark); }
.funnel .stage i { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--steel-dark); margin-top: 2px; }
.funnel .stage i.bad { color: var(--bad); font-weight: 600; }

/* ── hire minigraph ── */
.row.cand { grid-template-columns: 16px 1fr auto auto; }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.bars i { display: block; width: 4px; background: var(--steel-dark); }
.bars i.hi { background: var(--ok-dim); } .bars i.lo { background: var(--bad); } .bars i.hid { background: repeating-linear-gradient(0deg, var(--steel), var(--steel) 1px, transparent 1px, transparent 2px); }

/* ── profitability table ── */
table.profit { width: 100%; border-collapse: collapse; }
table.profit th { text-align: left; font-size: 7px; font-family: var(--font-pixel); text-transform: uppercase; color: var(--steel-dark); padding: 2px 6px; }
table.profit th.num, table.profit td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.profit td { padding: 2px 6px; border-top: 1px solid var(--wall-dim); font-size: var(--fs-xs); }

/* ── how to play ── */
.report.card.tutorial { max-width: 680px; min-height: 360px; display: flex; flex-direction: column; }
.tutorial h3 { font-family: var(--font-pixel); font-size: var(--pixel-md); margin: var(--s2) 0; }
.tutorial .btn-row { margin-top: auto; align-items: center; }
.tutorial .dot { width: 10px; height: 10px; border: 2px solid var(--partition); background: none; padding: 0; margin: 0 2px; cursor: pointer; }
.tutorial .dot.on { background: var(--lcd); border-color: var(--lcd); }
.toast.bad { background: var(--bad); }
/* funnel strip inside a drawer: wrap into two rows instead of scrolling */
.drawer .funnel { flex-wrap: wrap; }
.drawer .funnel .stage { flex: 1 1 30%; min-width: 80px; border-bottom: 2px solid var(--wall); }

/* ── jukebox (bottom-right) ── */
.jukebox { position: fixed; right: 10px; bottom: 10px; z-index: 40; display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--carpet-dark); color: var(--paper-text); box-shadow: 0 0 0 2px var(--partition); font-size: var(--fs-xs); }
.jukebox .jb-title { flex: 0 1 auto; min-width: 120px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper-muted); }
.jukebox .jb-btn.jb-mute { font-family: var(--font-pixel); font-size: 8px; text-transform: uppercase; }
.jukebox .jb-title i { color: var(--lcd); font-style: normal; }
.jukebox .jb-btn { font-family: var(--font-mono); font-size: 11px; line-height: 1; background: var(--steel); color: var(--ink); border: 0; padding: 4px 7px; cursor: pointer; box-shadow: var(--inset); }
.jukebox .jb-btn.on { background: var(--lcd); }
.jukebox .jb-vol { width: 70px; accent-color: var(--lcd); margin: 0; }
.jukebox .jb-n { color: var(--steel-dark); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .jukebox .jb-title { max-width: 100px; } }

/* the strip is always one row: the action buttons never wrap under the tiles. Below ~1450px the tiles
   tighten; below ~1350px the buttons compact too and the tiles give up their minimum width and clip. */
@media (max-width: 1450px) {
  .ccm .strip .tile { min-width: 84px; padding: var(--s1) var(--s2); }
  .ccm .strip .tile .value { font-size: var(--fs-md); }
  .ccm .strip .tile.co { min-width: 120px; }
  .ccm .strip .actions .btn { padding: 4px 6px; font-size: var(--pixel-xs); }
}
@media (max-width: 1350px) {
  .ccm .strip .tile { min-width: 0; padding: var(--s1) 6px; }
  .ccm .strip .tile.co { min-width: 100px; }
  .ccm .strip .actions { gap: 4px; padding: 0 6px; }
  .ccm .strip .actions > .label { display: none; }
  .ccm .strip .actions .btn { padding: 4px 5px; }
}

/* ── portraits: a face and a speech bubble, bottom-left of an overlay ────────
   The picture is 128px art upscaled with pixelated rendering, same as the
   floor. The bubble is drawn in the panel's own colours with a pixel tail. */
.says { display: flex; align-items: flex-end; gap: var(--s3); margin-top: var(--s4); padding-top: var(--s3); border-top: 2px solid var(--wall-dim); }
.says .portrait { width: 88px; height: 88px; flex: none; image-rendering: pixelated; align-self: flex-end; }
.says .bubble {
  position: relative; margin-bottom: 10px; max-width: 46ch;
  background: var(--wall-dim); color: var(--ink); border: 2px solid var(--partition);
  padding: var(--s2) var(--s3); font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.45;
}
/* tail: a bordered square turned on its corner, pointing back at the mouth */
.says .bubble::before {
  content: ''; position: absolute; left: -9px; bottom: 14px; width: 14px; height: 14px;
  background: var(--wall-dim);
  border-left: 2px solid var(--partition); border-bottom: 2px solid var(--partition);
  transform: rotate(45deg);
}
.says.lead { margin-top: 0; margin-bottom: var(--s3); padding-top: 0; border-top: 0; border-bottom: 2px solid var(--wall-dim); padding-bottom: var(--s3); }
.says.lead .portrait { width: 76px; height: 76px; }
@media (max-width: 560px) {
  .says .portrait { width: 64px; height: 64px; }
  .says .bubble { font-size: var(--fs-xs); }
}

/* ── upgrade banner ──────────────────────────────────────────────────────────
   A full-width strip that slides in from the right, parks over the lower third
   for two seconds, then slides back out the way it came. Blocking: the wrap
   covers the viewport and eats clicks (clicking anywhere dismisses it early).
   Mounted on document.body by upgradeBanner.js, outside #app, so an app
   re-render mid-animation cannot restart it. */
.ug-banner-wrap {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: stretch;
  padding-top: 64vh;                       /* lower third */
  background: rgba(17, 24, 33, .35);       /* set to transparent for no dimming */
  cursor: pointer;
  animation: ug-veil var(--ug-in, 420ms) ease-out both;
}
.ug-banner-wrap.leaving { animation: ug-veil var(--ug-out, 380ms) ease-in reverse both; }

.ug-banner {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--s6);
  padding: var(--s4) var(--s6);
  background: var(--carpet-dark);
  border-top: 2px solid var(--paper-text);      /* the thin white border */
  border-bottom: 2px solid var(--paper-text);
  border-left: 8px solid var(--lcd);            /* LCD accent, leading edge */
  position: relative;
  box-shadow: 0 0 0 4px rgba(17, 24, 33, .55),
              0 0 40px 4px rgba(63, 169, 245, .42),   /* soft glow, outward */
              inset 0 0 64px rgba(63, 169, 245, .18); /* and a breath of it inside */
  animation: ug-slide-in var(--ug-in, 420ms) cubic-bezier(.16, .84, .44, 1) both,
             ug-glow 2.2s ease-in-out var(--ug-in, 420ms) infinite alternate;
}
.ug-banner-wrap.leaving .ug-banner {
  animation: ug-slide-out var(--ug-out, 380ms) cubic-bezier(.6, 0, .9, .4) both;
}

/* the icon sits in a steel slot — the art is near-black and would disappear
   against the carpet-dark body on its own */
.ug-slot {
  flex: none; width: 112px; height: 112px;
  display: flex; align-items: center; justify-content: center;
  background: var(--steel-dark);
  box-shadow: var(--inset), 0 0 28px 4px rgba(191, 227, 255, .50);
}
.ug-slot img { width: 96px; height: 96px; image-rendering: pixelated; image-rendering: crisp-edges; }

.ug-text {
  margin: 0;
  font-family: var(--font-mono); font-size: 18px; font-weight: 500; line-height: 1.5;
  color: var(--paper-text); text-shadow: 2px 2px 0 rgba(0, 0, 0, .5);
  /* long copy wraps to a second line rather than stretching the strip; balance
     keeps the two lines near-equal instead of leaving one orphaned word */
  max-width: 46ch; text-wrap: balance; text-align: center;
}
/* Next to an icon the text must start at the SAME distance on every banner.
   Centred text cannot: once copy wraps, the box grows to the full max-width
   and each line is centred inside it, so a short first line floats ~130px
   from the icon while a single-line banner sits flush at the 24px gap.
   Left-aligning against the icon makes every line start at that same 24px.
   Text-only banners keep the centring — they have nothing to align to. */
.ug-banner.has-icon .ug-text { text-align: left; }

@keyframes ug-slide-in  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes ug-slide-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes ug-veil      { from { opacity: 0; } to { opacity: 1; } }
@keyframes ug-glow {
  from { box-shadow: 0 0 0 4px rgba(17, 24, 33, .55), 0 0 28px 2px rgba(63, 169, 245, .30), inset 0 0 48px rgba(63, 169, 245, .12); }
  to   { box-shadow: 0 0 0 4px rgba(17, 24, 33, .55), 0 0 56px 10px rgba(63, 169, 245, .55), inset 0 0 80px rgba(63, 169, 245, .24); }
}

/* sparkles: square-armed pixel stars, popped in discrete frames rather than
   tweened, so they read as drawn art and not as a particle system. Positions,
   sizes and delays are randomised per banner in upgradeBanner.js. They sit at
   opacity 0 at rest, which is also what reduced motion leaves them at. */
.ug-sparks { position: absolute; pointer-events: none; }
.ug-sparks.behind { inset: 0; z-index: 0; }
.ug-slot-wrap { position: relative; flex: none; z-index: 2; }
.ug-sparks.front { inset: 0; z-index: 3; }
.ug-slot, .ug-text { position: relative; z-index: 2; }

.ug-spark {
  position: absolute; width: var(--sz, 12px); height: var(--sz, 12px);
  margin: calc(var(--sz, 12px) / -2) 0 0 calc(var(--sz, 12px) / -2);
  opacity: 0; transform: scale(0);
  animation: ug-spark 800ms steps(1, end) infinite;
}
/* the two arms — a plus, not a blurred dot */
.ug-spark::before, .ug-spark::after {
  content: ''; position: absolute; background: var(--spark, var(--lcd-glow));
  box-shadow: 0 0 6px var(--spark, var(--lcd-glow));      /* the sparkle carries its own bloom */
}
.ug-spark::before { left: 0; right: 0; top: 50%; height: var(--th, 4px); transform: translateY(-50%); }
.ug-spark::after  { top: 0; bottom: 0; left: 50%; width: var(--th, 4px); transform: translateX(-50%); }

.ug-spark.ta { --spark: var(--lcd-glow); }
.ug-spark.tb { --spark: var(--paper-text); }
.ug-spark.tc { --spark: var(--lcd); }
/* the back layer reads dimmer so it never competes with the text */
.ug-sparks.behind .ug-spark::before,
.ug-sparks.behind .ug-spark::after { opacity: .55; }

@keyframes ug-spark {
  0%   { opacity: 0; transform: scale(0); }
  20%  { opacity: 1; transform: scale(.5); }
  45%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(.5); }
  85%  { opacity: 1; transform: scale(.25); }
  100% { opacity: 0; transform: scale(0); }
}

@media (max-width: 860px) {
  .ug-banner-wrap { padding-top: 58vh; }
  .ug-banner { gap: var(--s4); padding: var(--s3) var(--s4); }
  .ug-slot { width: 76px; height: 76px; }
  .ug-slot img { width: 64px; height: 64px; }
  .ug-text { font-size: 13px; max-width: 34ch; }
}