/* Grown-ups → About → "Check smoothness" (js/smoothcheck.js, 3 Oct 2026). While it measures, the screen IS the card
   screen's layout (.lc in stage.css), so the card spins at exactly the size the card screen gives it on this device; the
   panel holds the title, what is running and a progress bar that moves on the compositor (one transition per look), so
   it costs the frames being timed nothing. The result is one card on the night sky, laid out to be screenshotted. */
.scheck{z-index:60}
/* the panel takes the rows of the card screen's name and button dock (rows 3-4 of .lc), at their height as measured on
   3 Oct 2026, so the card's row, and so the card, is the card screen's size (ui_test.py flow_check compares the two:
   if the card screen's rows change, change these heights) */
.scheck-panel{grid-area:3/1/5/-1;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  min-height:197px;padding:8px calc(var(--sr) + 16px) calc(var(--sb) + 14px) calc(var(--sl) + 16px)}
@media (max-height:700px){ .scheck-panel{min-height:183px} }
@media (min-width:700px) and (min-height:561px){ .scheck-panel{min-height:184px} }
@media (orientation:landscape) and (min-height:561px){ .scheck-panel{min-height:170px} }
/* a phone held sideways: the card on the left, the panel on the right (as the card screen's own panel) */
@media (orientation:landscape) and (max-height:560px){ .scheck-panel{grid-area:1/2;min-height:0;justify-content:center;padding:4px calc(var(--sr) + 12px) 4px 4px} }
.scheck-h{font-family:var(--serif);font-size:1.5rem;line-height:1.2;color:var(--moon)}
.scheck-phase{min-height:1.45em;font:700 1rem var(--sans);color:var(--moon-soft)}
.scheck-bar{width:min(100%,360px);height:6px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.scheck-bar-in{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#56D8F6,#C47AF6,#F9A8F8);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 0s linear;will-change:transform}
.scheck-keep{font:600 .92rem var(--sans);color:var(--moon-soft)}

.scheck.done{position:fixed;inset:0;z-index:60;display:grid;place-items:center;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--st) + 16px) calc(var(--sr) + 16px) calc(var(--sb) + 16px) calc(var(--sl) + 16px);background:rgba(10,12,36,.55)}
.scheck-card{--v:#C6C2E6;width:min(100%,460px);padding:22px 22px 18px;border-radius:24px;color:var(--moon);
  background:linear-gradient(180deg,#2E3278,#1C2052);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 70px -24px rgba(0,0,0,.8)}
.scheck-card[data-verdict="smooth"]{--v:#8AF0C8}
.scheck-card[data-verdict="steady30"]{--v:#8AC8FF}
.scheck-card[data-verdict="uneven"]{--v:#F2C14E}
.scheck-card[data-verdict="slow"]{--v:#FF8AB8}
.scheck-kicker{font:800 .78rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--moon-soft)}
.scheck-verdict{display:flex;align-items:center;gap:12px;margin-top:4px;font-family:var(--serif);font-size:1.9rem;line-height:1.15;color:var(--moon)}
.scheck-dot{flex:none;width:16px;height:16px;border-radius:50%;background:var(--v);box-shadow:0 0 14px 2px var(--v)}
.scheck-say{margin-top:8px;font-size:1rem;color:var(--moon)}
.scheck-run{margin-top:18px}
.scheck-run h3{font:800 .82rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.scheck-card dl{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);margin:6px 0 0}
.scheck-card dt,.scheck-card dd{margin:0;padding:7px 0;border-top:1px solid rgba(255,255,255,.1);font-size:.98rem;line-height:1.35}
.scheck-card dt{padding-right:12px;color:var(--moon-soft)}
.scheck-card dd{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.scheck-card .scheck-facts{margin-top:18px}
.scheck-shot{margin-top:14px;font-size:.9rem;color:var(--moon-soft)}
.scheck-row{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:14px}
/* an iPad on its side (810 px tall) or a small phone: a little tighter, so the whole card fits one screenshot */
@media (max-height:860px){
  .scheck-card{padding:18px 20px 14px}
  .scheck-verdict{font-size:1.7rem}
  .scheck-run,.scheck-card .scheck-facts{margin-top:12px}
  .scheck-card dt,.scheck-card dd{padding:5px 0}
}
/* calm motion: one switch for "Always calm" and the device setting alike (html.reduce, steady.js; plan 2.8) */
html.reduce .scheck-bar-in{transition:none}
/* the sky rests while the card spins, as it does under the card screen (app.css, plan 2.3), so the check times the card
   screen as the child sees it */
body:has(> .scheck) .app-sky *{animation-play-state:paused}
body:has(> .scheck) .app-sky .shoot{visibility:hidden}