/* ==========================================================================
   PM Countdown: sim.css
   The position calculator, standalone, on a light sports-media page.

   assets/sport-board.css owns the same component for the dark board, where every
   colour resolves through the --d* tokens that only exist under
   body[data-section="sports"]. A game page is not that page: it has no board grid
   to span, no dark plate, and none of those tokens. Rather than widen the board's
   selectors and risk moving the board by a pixel, this file restates the .sh-calc
   rules for .sh-calc--solo and remaps the --d* names onto the light tokens the
   game pages already ship (--ink, --line, --paper, --brand-ink, --gain, --drop).
   The rules below are the board's rules with the same measurements, written against
   the light tokens directly. The --d* remap on .sh-calc--solo is the backstop: any
   board rule this file has not restated still resolves to a light value rather than
   to nothing, which is how you get white text on white.

   Loaded only by the game pages. sport-board.css is not loaded here and this file
   is not loaded there.
   ========================================================================== */

.sh-calc--solo{
  /* Light counterparts for every dark-board token the component reads. */
  --dink:var(--ink);
  --dink-2:var(--ink-2);
  --dink-3:var(--ink-3);
  --dline:var(--line);
  --dlink:var(--brand-ink);
  --d-t1:var(--surface-2);
  --d-t2:var(--chip);
  --d-chipink:#ffffff;
  --up:var(--gain);
  --amber:var(--drop);
}

/* No grid to span, so no grid-column. The panel is a plate in the article column. */
.sh-calc.sh-calc--solo{
  display:block;margin:0;border:1px solid var(--line);border-radius:14px;
  background:var(--paper);box-shadow:var(--shadow)}
.sh-calc--solo .sh-calc-in{padding:18px 18px 16px}

.sh-calc--solo .sh-calc-controls{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:flex-end;margin-bottom:16px}
.sh-calc--solo .sh-calc-lbl{display:block;font:700 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.sh-calc--solo .sh-chips{display:flex;flex-wrap:wrap;gap:6px}
/* --line-3, not --line, on anything whose border is its only boundary against
   --paper: --line measures below 3:1 and fails WCAG 1.4.11 for a control. */
.sh-calc--solo .sh-chip{display:inline-flex;align-items:center;gap:2px;min-height:38px;padding:0 12px;border-radius:9px;
  border:1px solid var(--line-3);background:var(--paper);color:var(--ink-2);cursor:pointer;
  font:700 13.5px/1 var(--sans);transition:background .15s,color .15s,border-color .15s}
.sh-calc--solo .sh-chip:hover{background:var(--chip);color:var(--ink)}
.sh-calc--solo .sh-chip.is-on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.sh-calc--solo .sh-chip:focus-visible,.sh-calc--solo .sh-chip:focus-within{outline:2px solid var(--brand-ink);outline-offset:2px}
.sh-calc--solo .sh-chip--other{padding-left:10px;padding-right:8px;cursor:text}
.sh-calc--solo .sh-chip--other input{width:62px;background:transparent;border:0;color:var(--ink);font:700 13.5px/1 var(--sans);padding:0 2px}
.sh-calc--solo .sh-chip--other input:focus{outline:none}

.sh-calc--solo .sh-calc-nums{display:flex;gap:14px}
.sh-calc--solo .sh-calc-num{display:block}
.sh-calc--solo .sh-inp{display:inline-flex;align-items:center;min-height:38px;padding:0 9px;border-radius:9px;
  border:1px solid var(--line-3);background:var(--paper)}
.sh-calc--solo .sh-inp input{width:48px;background:transparent;border:0;color:var(--ink);font:700 15px/1 var(--cond);padding:0;
  font-variant-numeric:tabular-nums}
.sh-calc--solo .sh-inp input:focus{outline:none}
.sh-calc--solo .sh-inp:focus-within{outline:2px solid var(--brand-ink);outline-offset:1px}
.sh-calc--solo .sh-inp i{font:600 12px/1 var(--sans);color:var(--ink-3);font-style:normal;margin-left:1px}

.sh-calc--solo .sh-calc-out{display:grid;gap:14px}
.sh-calc--solo .sh-calc-k{font:700 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.sh-calc--solo .sh-calc-big{font:800 27px/1 var(--cond);color:var(--ink);margin:0;font-variant-numeric:tabular-nums}
.sh-calc--solo .sh-calc-big.is-up{color:var(--gain)}
.sh-calc--solo .sh-calc-big.is-dn{color:var(--drop)}
.sh-calc--solo .sh-calc-big.is-none{color:var(--ink-3)}
.sh-calc--solo .sh-calc-sub{font:500 12.5px/1.5 var(--sans);color:var(--ink-3);margin:5px 0 0}
.sh-calc--solo .sh-calc-am{color:var(--ink-2)}
.sh-calc--solo .sh-calc-risk{font:600 12.5px/1.5 var(--sans);color:var(--ink-2);margin:8px 0 0}
.sh-calc--solo .sh-calc-risk b{color:var(--drop)}
.sh-calc--solo .sh-calc-cost{padding:13px 15px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2)}
.sh-calc--solo .sh-calc-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sh-calc--solo .sh-calc-case{padding:13px 15px;border-radius:12px;border:1px solid var(--line)}
.sh-calc--solo .sh-calc-case--first{border-color:var(--brand-ink);background:var(--brand-soft)}
.sh-calc--solo .sh-calc-note{font:500 12px/1.5 var(--sans);color:var(--ink-2);margin:8px 0 0}
.sh-calc--solo .sh-calc-warn{font:600 13px/1.5 var(--sans);color:var(--drop);margin:0}
.sh-calc--solo .sh-calc-fine{font:500 11.5px/1.55 var(--sans);color:var(--ink-3);margin:14px 0 0;max-width:62em}
.sh-calc--solo .sh-calc-fine b{color:var(--ink-2)}

.sh-calc--solo .sh-outcomes{margin:0;display:grid;gap:6px}
.sh-calc--solo .sh-outcomes > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 10px;border-radius:9px;background:var(--surface-2)}
.sh-calc--solo .sh-outcomes dt{font:700 11px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.sh-calc--solo .sh-outcomes dd{margin:0;display:flex;align-items:baseline;gap:7px;font:800 19px/1 var(--cond);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-calc--solo .sh-outcomes dd.is-up{color:var(--gain)}
.sh-calc--solo .sh-outcomes dd.is-dn{color:var(--drop)}
.sh-calc--solo .sh-outcomes dd small{font:600 11.5px/1 var(--sans);color:var(--ink-3)}

/* The two doors out of the calculator. Both are real destinations, so both look like
   buttons; the account link leads because most readers arriving from search do not have
   an account yet, and the contract link is the quieter one. */
.sh-calc--solo .sh-calc-go{display:grid;gap:10px;margin-top:18px}
@media (min-width:560px){.sh-calc--solo .sh-calc-go{grid-template-columns:1fr 1fr}}
.sh-calc--solo .sh-go-a,.sh-calc--solo .sh-go-b{display:grid;gap:3px;height:auto;padding:12px 16px;text-align:center;
  text-decoration:none;line-height:1.3}
.sh-calc--solo .sh-go-a b,.sh-calc--solo .sh-go-b b{font:800 14.5px/1.3 var(--sans)}
.sh-calc--solo .sh-go-a span,.sh-calc--solo .sh-go-b span{font:500 11.5px/1.3 var(--sans);opacity:.82}
.sh-calc--solo .sh-go-fine{grid-column:1/-1;margin:2px 0 0;font:500 11.5px/1.6 var(--sans);
  color:var(--ink-3);text-wrap:pretty}

/* Framing prose and the no-JavaScript fallback, both article furniture rather than
   calculator parts, so they sit outside .sh-calc. */
.sim-none{margin:0;padding:13px 15px;border-radius:12px;border:1px dashed var(--line-2);
  background:var(--surface-2);font:500 13.5px/1.6 var(--sans);color:var(--ink-2)}

/* Phones. The board drops to one column at 640px for the same reason: two money
   plates side by side at 390px put four digits on two lines each. */
@media (max-width:640px){
  .sh-calc--solo .sh-calc-in{padding:15px 14px 14px}
  .sh-calc--solo .sh-calc-cases{grid-template-columns:1fr}
  .sh-calc--solo .sh-calc-controls{gap:14px 18px}
  .sh-calc--solo .sh-calc-big{font-size:24px}
  .sh-calc--solo .sh-calc-nums{gap:10px}
}