/* Work scene ("She ships JUWEL, and builds it to be trusted"). Every surface is a vendored JUWEL class (.pf-card, .jb-approval,
   .jb-group / .jb-row, .jb-pill, .jb-tag, .jb-note, .pf-btn, .pf-sheet, .pf-iconbtn from vendor/porcelain.css and vendor/jb.css).
   This file only PLACES them: colours and type are tokens, UI motion is opacity only. ch-now.js sets --zl/--zt/--zw/--zh
   (the proof zone) and data-mode = side | wide | phone on .now. */

.now { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: var(--jb-ink); }
/* the product's base.css resets every margin (* { margin: 0 }); the vendored jb.css leaves that rule out, so scope it to this scene at zero specificity (class rules still win) */
:where(.now, .now-sheet) :where(p, h2, h3, figure, dl, dd, pre) { margin: 0; }
.now-zone { position: absolute; inset-inline-start: var(--zl, 0px); inset-block-start: var(--zt, 0px); inline-size: var(--zw, 100%); block-size: var(--zh, 100%);
  display: grid; align-content: center; align-content: safe center; justify-items: center; }   /* safe: an over-tall beat grows downward, never up into the caption */
.now-sec { grid-area: 1 / 1; inline-size: 100%; display: grid; gap: var(--jb-s-12); align-content: center; justify-items: center; min-inline-size: 0;
  transition: opacity var(--jb-fade-slow-dur) var(--jb-fade-slow); }
.now-sec.out { opacity: 0; }

/* the crew's tendrils reveal every Stone-built part; nothing here fades in on its own */
.now .tb { opacity: 0; }
.now.solid .tb { opacity: 1; transition: none; }
.now .pf-card, .now .jb-group, .now .now-code { pointer-events: auto; }

/* ---- launch: one card, one real screen ---- */
.now-shot { display: grid; gap: var(--jb-s-12); padding: var(--jb-s-16);
  inline-size: min(100%, calc((var(--zh) - 124px) * 1.6 + 32px)); }
.now-frame { margin: 0; overflow: hidden; line-height: 0; border: 1px solid var(--jb-line); border-radius: var(--jb-r-16); background: var(--jb-surface-2); }
.now-frame img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1440 / 496; object-fit: cover; }

/* ---- trust: the approval card, then the rows ---- */
.now-trust { display: grid; gap: var(--jb-s-16); align-content: center; inline-size: min(100%, 520px); min-inline-size: 0; }
.now-trust__approval, .now-trust__rows { display: grid; gap: var(--jb-s-12); align-content: start; min-inline-size: 0; }
.now-trust .jb-approval { max-inline-size: none; }           /* the product caps it at 500; here it matches the rows below it */
.now-trust .jb-row__text { min-inline-size: 0; }
.now-trust[data-view="card"] .now-trust__rows { display: none; }
.now-trust[data-view="rows"] .now-trust__approval { display: none; }
.now[data-mode="wide"] .now-trust { inline-size: min(100%, 1040px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: var(--jb-s-24); }
.now[data-mode="wide"] .now-trust[data-view] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.now[data-mode="wide"] .now-trust[data-view="card"], .now[data-mode="wide"] .now-trust[data-view="rows"] { grid-template-columns: minmax(0, 520px); justify-content: center; }
/* the crew's "checked" chip lands on the group's top-right corner: keep the first row's text clear of it */
.now:not(.solid) .now-trust .jb-row:first-child .jb-row__text { padding-inline-end: 92px; }

.now-code { display: flex; align-items: center; gap: var(--jb-s-8); opacity: 0; visibility: hidden;
  transition: opacity var(--jb-fade-slow-dur) var(--jb-fade-slow), visibility 0s linear var(--jb-fade-slow-dur); }
.now-code.on { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ---- games: two horizontal cards ---- */
.now-games { display: grid; gap: var(--jb-s-12); inline-size: min(100%, 620px); }
.now-game { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 14fr); gap: var(--jb-s-16); align-items: center; padding: var(--jb-s-12); }
.now-game__frame { margin: 0; overflow: hidden; line-height: 0; aspect-ratio: 16 / 10; border: 1px solid var(--jb-line); border-radius: var(--jb-r-12); background: var(--jb-surface-2); }
.now-game__frame img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.now-game__text { display: grid; gap: var(--jb-s-4); min-inline-size: 0; }
.now-game__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jb-s-8); margin-block-start: var(--jb-s-4); }
.now-game__meta .jb-pill--status { background: var(--jb-surface-2); }                 /* the neutral well token: the status pill stays visible on a white card */
.now[data-mode="phone"] .now-games { gap: var(--jb-s-8); }
.now[data-mode="phone"] .now-game { grid-template-columns: minmax(0, 9fr) minmax(0, 14fr); gap: var(--jb-s-12); padding: var(--jb-s-8) var(--jb-s-12) var(--jb-s-12); }
.now[data-mode="phone"] .now-game__text { padding-block-start: var(--jb-s-16); }          /* clear of the checked chip */

/* ---- the static end state (skip, reduced / paused motion): all three beats in one column that scrolls inside the zone ---- */
.now.stack .now-zone { display: block; overflow-y: auto; overflow-x: hidden; pointer-events: auto; padding-block: var(--jb-s-4) var(--jb-s-12); scrollbar-width: thin; }
.now.stack.more .now-zone { -webkit-mask-image: linear-gradient(to bottom, var(--jb-ink) calc(100% - var(--jb-s-12)), transparent); mask-image: linear-gradient(to bottom, var(--jb-ink) calc(100% - var(--jb-s-12)), transparent); }   /* the column fades out at the foot only when there is more below */
.now.stack .now-sec { margin-block-end: var(--jb-s-24); }
.now.stack .now-sec:last-child { margin-block-end: 0; }
.now.stack .now-shot { inline-size: min(100%, 640px); }
.now.stack[data-mode] .now-trust[data-view] { inline-size: min(100%, 520px); grid-template-columns: minmax(0, 1fr); }     /* one column here, also on wide screens */
/* short viewport (ctx.compact): the proof sits in two columns, approval card beside the rows, and the rows keep their titles only */
.now.stack[data-compact="1"] .now-trust[data-view] { inline-size: min(100%, 1040px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: var(--jb-s-16); }
.now.stack[data-compact="1"] .jb-row__sub { display: none; }
.now.stack[data-compact="1"] .now-trust__rows { gap: var(--jb-s-8); }
.now.stack[data-mode="phone"] .now-trust, .now.stack[data-mode="phone"] .now-trust__approval, .now.stack[data-mode="phone"] .now-trust__rows { gap: var(--jb-s-8); }
.now-zone:focus-visible { outline: 2px solid var(--jb-focus-ring); outline-offset: 2px; }

/* ---- the code sheet: lives on <body> (the stage sits under the characters). The scrim is the product's own token. ---- */
.now-scrim { position: fixed; inset: 0; z-index: 10; background: var(--jb-scrim); opacity: 0; transition: opacity .2s ease; }
.now-sheet { position: fixed; z-index: 11; inset-inline: 0; margin-inline: auto; inset-block-start: calc(var(--pf-header-h) + var(--jb-s-24));
  inline-size: min(640px, calc(100vw - 2 * var(--pf-gutter))); max-block-size: calc(100dvh - var(--pf-header-h) - 2 * var(--jb-s-24) - 72px); overflow: auto;
  opacity: 0; transition: opacity .2s ease; }
.now-scrim.on, .now-sheet.on { opacity: 1; }
.now-sheet .jb-card--quiet { justify-items: stretch; min-inline-size: 0; }
.now-sheet pre { margin: 0; overflow-x: auto; white-space: pre; tab-size: 2; color: var(--jb-ink-2); }
.now-sheet__foot { display: flex; align-items: center; gap: var(--jb-s-8); flex-wrap: wrap; }
.now-sheet__foot .jb-note { margin: 0; }
.now-nw { white-space: nowrap; }                                                           /* keep a date from splitting across lines */

@media (prefers-reduced-motion: reduce) { .now-sec, .now-code, .now-scrim, .now-sheet { transition: none; } }
:root[data-calm="true"] .now-sec, :root[data-calm="true"] .now-code, :root[data-calm="true"] .now-scrim, :root[data-calm="true"] .now-sheet { transition: none; }

/* ---- launch: the three captioned lines under the screenshot, each with its own label pill ---- */
.now-lines { display: grid; gap: var(--jb-s-8); }
.now-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jb-s-8); }
.now-line .jb-pill--tint { margin-block: 0; }                /* jb.css gives the tint pill block margins for its own context; here the line owns the rhythm */

/* the source location of the excerpt, above the code */
.now-sheet .now-path { margin: 0; font-family: var(--jb-font-mono); overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; }

/* launch beat: one transform-only nudge per line as its Stone hops (the line is never hidden or faded) */
.now-line--nudge { transform-origin: 0 50%; animation: now-nudge 0.6s var(--jb-ease-arrive); }
@keyframes now-nudge { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .now-line--nudge { animation: none; } }
:root[data-calm="true"] .now-line--nudge { animation: none; }