/* Name the Pay: what's its own. The family shell (fonts, masthead, tile row,
   buttons, dialogs, the finished screen, More games) comes first from
   /shared/css/family.css; this file adds the job, its fact boxes, the slider,
   the reveal and the pay stubs, played straight: flat boxes, Wordle-style
   verdict colors and pastel pay segments. */
:root {
  /* The four verdicts grade a guess; the three pastels split a paycheck. */
  --spot: #6aaa64; --close: #c9b458; --off: #e8a54b; --way: #a7abaf;
  --base: #b0c4ef; --ot: #ba81c5; --other: #f9df6d;
  --col: 640px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--sd-page); }
body { margin: 0; min-height: 100dvh; background: var(--sd-page); color: var(--sd-ink); font: 400 16px/1.4 var(--sd-text); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; }
/* Read aloud, not shown: a done tile's verdict. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- shell ---------- */
/* The page runs edge to edge (viewport-fit=cover, for the guess sheet), so
   the shared masthead keeps clear of a notch here. */
.sd-masthead { padding-top: env(safe-area-inset-top); }
.sd-masthead-in { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }

main { max-width: var(--col); margin: 0 auto; padding: 0 16px 48px; }
.soon { margin: 80px auto; font: 700 28px/1.15 var(--sd-slab); text-align: center; }

/* The tile row runs under the masthead with its own hairline. */
main .sd-status { margin: 0 -16px; padding: 12px 16px; border-bottom: 1px solid var(--sd-hair); }
/* Done jobs take their verdict's color. */
.sd-tiles li.is-spot { background: var(--spot); border-color: var(--spot); color: #fff; }
.sd-tiles li.is-close { background: var(--close); border-color: var(--close); color: #fff; }
.sd-tiles li.is-off { background: var(--off); border-color: var(--off); color: var(--sd-ink); }
.sd-tiles li.is-way { background: var(--way); border-color: var(--way); color: var(--sd-ink); }

/* ---------- dialogs ---------- */
/* Pay's spread is by rank, and rank names need more room than the kit's 22px. */
#stats .sd-dist li { grid-template-columns: 112px 1fr; }
.sd-dialog-head form { margin: 0; }

/* ---------- a job ---------- */
.job { margin: 18px 0 0; font: 700 clamp(28px, 8.7vw, 40px)/1.06 var(--sd-slab); letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.q { margin: 4px 0 0; font: 400 16px/1.4 var(--sd-text); color: var(--sd-ink-2); }

.clues { margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.clue { border: 1px solid var(--sd-hair); border-radius: 6px; padding: 9px 12px 10px; }
.clue .k, .guess .k { font: 800 11.5px/1 var(--sd-text); letter-spacing: .06em; text-transform: uppercase; color: var(--sd-ink-2); }
.clue .v { margin-top: 5px; font: 600 16px/1.25 var(--sd-text); overflow-wrap: anywhere; }
.clue.wide { grid-column: 1 / -1; }

/* ---------- the guess ---------- */
/* Money is set like the family's scores: Zilla Slab with tabular figures, so
   the guess holds still while the slider moves. */
.guess { text-align: center; }
.guess .k { display: block; }
.dial { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; margin-top: 8px; }
.amount, .real { font: 700 clamp(36px, 12.8vw, 52px)/1 var(--sd-slab); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.amount { display: block; text-align: center; white-space: nowrap; }
.step { display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 2px; border-radius: 50%; border: 1.5px solid var(--sd-ink); background: var(--sd-page); font: 500 24px/1 var(--sd-text); cursor: pointer; transition: background-color .15s; }
@media (hover: hover) { .step:hover:not(:disabled) { background: var(--sd-game-soft); } }
.step:disabled { border-color: var(--sd-line); color: var(--sd-ink-3); cursor: default; }
.track { position: relative; margin-top: 12px; }
input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; touch-action: none; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--sd-ink) 0 var(--fill, 50%), var(--sd-miss) var(--fill, 50%)); }
input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: var(--sd-miss); }
input[type=range]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--sd-ink); }
/* The thumb is the one lifted object, ringed in Pay's soft color. */
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--sd-page); border: 2px solid var(--sd-ink); box-shadow: 0 0 0 5px var(--sd-game-soft), 0 2px 6px rgba(18, 18, 18, .18); cursor: grab; }
input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--sd-page); border: 2px solid var(--sd-ink); box-shadow: 0 0 0 5px var(--sd-game-soft), 0 2px 6px rgba(18, 18, 18, .18); }
.scale { position: relative; height: 32px; margin: 0 15px; }
.scale span { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; font: 700 11.5px/1 var(--sd-text); color: var(--sd-ink-2); font-variant-numeric: tabular-nums; }
.scale span::before { content: ""; width: 1px; height: 7px; background: var(--sd-ink-2); }
.scale span.minor::before { height: 4px; background: var(--sd-line); }
.guess .sd-pill { margin-top: 14px; }

/* ---------- the reveal ---------- */
.result { position: relative; scroll-margin-top: 64px; }
.result .sd-pill { margin-top: 20px; }
/* The Rive stamp sits centered on the verdict row (30px tall), over nothing else. */
.moments { position: absolute; left: 50%; top: calc(15px - min(100%, 360px) * 55 / 360); z-index: 2; width: min(100%, 360px); aspect-ratio: 360 / 110; transform: translateX(-50%); pointer-events: none; }
.auto { margin: 10px 0 0; text-align: center; font: 600 13px var(--sd-text); color: var(--sd-ink-2); }
.verdict { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pill { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; font: 800 13px/1 var(--sd-text); letter-spacing: .05em; text-transform: uppercase; color: var(--sd-ink); }
.v-spot { background: var(--spot); } .v-close { background: var(--close); }
.v-off { background: var(--off); } .v-way { background: var(--way); }
/* Points sit still, so they keep Zilla's proportional figures (its tabular 1 gapes). */
.pts { font: 700 30px/1 var(--sd-slab); }
.real { margin-top: 14px; }
.vs { margin-top: 6px; font: 400 15px/1.4 var(--sd-text); color: var(--sd-ink-2); }
.vs b { color: var(--sd-ink); font-weight: 700; }
.bar { position: relative; margin-top: 24px; height: 28px; border-radius: 4px; background: var(--sd-soft); }
.bar.sm { height: 12px; margin-top: 14px; border-radius: 3px; }
/* Segments sit at their final size; the reveal grows them with scaleX. */
.bar i { position: absolute; top: 0; bottom: 0; transform-origin: left center; }
.bar .b { background: var(--base); border-radius: 4px 0 0 4px; }
.bar .o { background: var(--ot); }
.bar .x { background: var(--other); border-radius: 0 4px 4px 0; }
.bar .me { width: 3px; margin-left: -1.5px; top: -6px; bottom: -6px; background: var(--sd-ink); }
.bar .me::after { content: "You"; position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font: 800 11px/1 var(--sd-text); letter-spacing: .04em; }
/* On a stub the row below says "You $X", so the marker goes untagged. */
.bar.sm .me { width: 2px; margin-left: -1px; top: -4px; bottom: -4px; }
.bar.sm .me::after { content: none; }
.legend { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.legend li { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; font: 400 15px/1.2 var(--sd-text); text-align: left; }
.legend li b { font-weight: 700; font-variant-numeric: tabular-nums; }
.legend .sw { width: 14px; height: 14px; border-radius: 3px; }
.legend .sw.b { background: var(--base); } .legend .sw.o { background: var(--ot); } .legend .sw.x { background: var(--other); }
.fact { margin: 16px 0 0; padding: 12px 14px; background: var(--sd-soft); border-radius: 6px; font: 400 14px/1.45 var(--sd-text); }
.fact b { font-weight: 700; }

/* ---------- the finished screen ---------- */
/* The verdict panel and Share run the phone's full width, like the tile row. */
.summary .sd-verdict, .summary .sd-actions { margin: 0 -16px; }
.stubs { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--sd-hair); }
.stubs h2 { margin: 0 0 12px; font: 700 20px/1.1 var(--sd-slab); }
.cards { display: grid; gap: 8px; }
.card { border: 1px solid var(--sd-hair); border-radius: 8px; padding: 12px 14px 13px; }
.card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card .j { margin: 0; font: 700 18px/1.15 var(--sd-slab); overflow-wrap: anywhere; }
.card .d { margin-top: 3px; font: 400 13.5px/1.3 var(--sd-text); color: var(--sd-ink-2); }
.card .right { display: flex; align-items: center; gap: 8px; flex: none; }
.card .pill { height: 22px; padding: 0 8px; font-size: 11px; }
.card .p { min-width: 32px; font: 700 21px/1 var(--sd-slab); text-align: right; }
.card .nums { margin-top: 9px; display: flex; justify-content: space-between; gap: 12px; font: 400 14px/1.3 var(--sd-text); color: var(--sd-ink-2); }
.card .nums b { color: var(--sd-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Local test mode only (see testBar in app.js). */
.test-bar { position: fixed; left: 50%; bottom: 12px; z-index: 30; transform: translateX(-50%); display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px; border-radius: 12px; background: #ff6fab; color: var(--sd-ink); box-shadow: 0 8px 24px rgba(0,0,0,.35);
  font: 800 12px var(--sd-text); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.test-bar a, .test-bar button { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border: 0; border-radius: 8px;
  background: var(--sd-ink); color: #fff; font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { .step { transition: none; } }

/* ---------- layout: phone first ---------- */
/* On a phone the guess sits in a sheet pinned to the bottom, under the thumb,
   while the job and its facts scroll above it. Once you submit, the sheet
   gives way to the result in the page's own flow. */
@media (max-width: 899px) {
  .panel { margin-top: 22px; }
  .play:not(.is-revealed) .panel { position: sticky; bottom: 0; z-index: 4; margin: 22px -16px 0; padding: 16px 16px max(16px, env(safe-area-inset-bottom));
    background: var(--sd-page); border-top: 1px solid var(--sd-hair); box-shadow: 0 -10px 24px -18px rgba(18, 18, 18, .3); }
  .play.is-revealed .panel { border-top: 1px solid var(--sd-hair); padding-top: 22px; }
  /* The finished screen's section rules run edge to edge too. */
  .stubs, .summary .sd-more { margin-inline: -16px; padding-inline: 16px; }
}

/* Desktop: the masthead's 1040px, the job and its facts on the left, the
   guess (then the result) in a card on the right that stays in view. The
   finished screen keeps one 640px column, its verdict panel a rounded card. */
@media (min-width: 900px) {
  :root { --col: 1040px; }
  .play { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 0 48px; align-items: start; }
  .play .sd-status { margin: 0; padding: 18px 0 12px; }
  .play .panel { position: sticky; top: 76px; margin: 18px 0 0; padding: 22px; border: 1px solid var(--sd-hair); border-radius: 12px; box-shadow: 0 18px 40px -28px rgba(18, 18, 18, .35); }
  .job { font-size: 44px; }
  .amount, .real { font-size: 56px; }
  .summary { max-width: 640px; margin: 0 auto; }
  .summary .sd-status { margin: 0; padding: 18px 0 12px; border-bottom: 0; }
  .summary .sd-verdict { margin: 0; padding: 26px 24px 24px; border-radius: 12px; }
  .summary .sd-actions { margin: 0; padding: 18px 0 0; }
}

/* ---------- moving between jobs ---------- */
/* The tile row is chrome: it stays put while the job and its facts slide
   (out left, in from the right), and it carries straight over to the finished
   screen. The panel doesn't morph between the result and the guess sheet; the
   old one fades and the new sheet rises. The results page crossfades in, and
   its own sequence plays after. */
main .sd-status { view-transition-name: progress; }
.job-wrap { view-transition-name: job; }
.panel { view-transition-name: panel; }
::view-transition-group(progress) { animation: none; }
::view-transition-old(progress) { display: none; }
::view-transition-new(progress) { animation: none; }
::view-transition-old(job) { animation: slide-out .14s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(job) { animation: slide-in .24s var(--sd-ease-out) .04s both; }
::view-transition-group(panel) { animation: none; }
::view-transition-old(panel) { animation: fade-out .12s ease-in both; }
::view-transition-new(panel) { animation: sheet-up .26s var(--sd-ease-out) .05s both; }
::view-transition-old(root) { animation: fade-out .14s ease-in both; }
::view-transition-new(root) { animation: fade-in .2s var(--sd-ease-out) both; }
@keyframes slide-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(32px); } }
@keyframes sheet-up { from { opacity: 0; transform: translateY(48px); } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}