/* Kept landing hero: six frames of one moment, judged the way the app judges a burst (hero.js).
   Shared by every locale page. Colours are the page's own variables (Theme.swift's palette).
   The markup is the settled state (Kept has ranked the set). The "raw" look, in shot order, is
   only drawn when scripts run, motion isn't reduced, and hero.js hasn't ranked the set yet. */

.kh{position:relative;width:100%;max-width:440px;margin:0 auto;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
@media(min-width:941px){.kh{margin-right:0}}
.kh::before{content:"";position:absolute;left:50%;top:2%;width:90%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(245,180,60,.2),transparent 64%);filter:blur(24px);z-index:-1;pointer-events:none}
.kh [hidden]{display:none!important}

/* the card: a deck card (CardView.swift) holding the frame on show */
.kh-card{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:#0c0a10;border:1px solid var(--line2);
  box-shadow:0 34px 70px -34px rgba(0,0,0,.9);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;
  -webkit-tap-highlight-color:transparent}
.kh-card.kh-drag{cursor:grabbing}
.kh-card.kh-spring{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.kh-card.kh-fly{transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .38s}
.kh-card.kh-in{animation:kh-in .22s cubic-bezier(.2,.7,.2,1)}
@keyframes kh-in{from{opacity:0;transform:scale(.96)}}
.kh-f{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .18s;pointer-events:none;-webkit-user-drag:none}
.kh-f.on{opacity:1}
.kh-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.34),transparent 24%,transparent 56%,rgba(0,0,0,.5))}
.kh-wash{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}
.kh-wk{background:linear-gradient(90deg,transparent 28%,rgba(74,222,128,.62))}
.kh-wt{background:linear-gradient(270deg,transparent 28%,rgba(226,86,63,.62))}
.kh-stamp{position:absolute;top:18px;z-index:3;font:700 20px/1 "Space Grotesk",-apple-system,sans-serif;letter-spacing:2px;
  padding:6px 12px;border:3px solid;border-radius:12px;opacity:0;pointer-events:none;transform:rotate(var(--r))}
.kh-sk{left:18px;color:#4ade80;--r:-12deg}
.kh-st{right:18px;color:var(--trash);--r:12deg}
.kh-card[data-state=kept] .kh-sk,.kh-card[data-state=trashed] .kh-st{opacity:1;animation:kh-slam .26s cubic-bezier(.2,.7,.2,1)}
@keyframes kh-slam{from{opacity:0;transform:rotate(var(--r)) scale(1.35)}}
.kh-tags{position:absolute;left:12px;bottom:12px;right:12px;z-index:3;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.kh-best,.kh-why{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:5px 10px;color:#231702;
  font:700 11px/1.15 "Space Mono",ui-monospace,monospace;letter-spacing:.03em}
.kh-best{background:var(--keep2)}
.kh-best svg{width:11px;height:11px}
.kh-why{background:var(--keep)}
.kh-verdict{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;margin:0;display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:16px;background:rgba(18,13,22,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(226,86,63,.55);color:rgba(255,255,255,.9);font-size:13px;line-height:1.3}
.kh-verdict i{flex:none;width:22px;height:22px;border-radius:7px;background:var(--trash);color:#2a0d08;display:grid;place-items:center}
.kh-verdict i svg{width:13px;height:13px}
.kh-verdict b{color:#fff;font-weight:600}

/* the set: VariantsView's grid in a row, Kept's pick first */
.kh-row{display:flex;justify-content:space-between;gap:12px;margin:14px 2px 8px;font:12px/1.35 "Space Mono",ui-monospace,monospace;color:var(--mut)}
.kh-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(4px,1.6vw,8px)}
.kh-t{grid-row:1;position:relative;aspect-ratio:1;min-height:44px;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:pointer;
  background:var(--bg3);filter:grayscale(.85) brightness(.72);-webkit-tap-highlight-color:transparent;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),filter .4s,box-shadow .25s}
.kh-t img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.kh-t::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line2);pointer-events:none;transition:box-shadow .4s}
.kh-t.b{filter:none}
.kh-t.b::after{box-shadow:inset 0 0 0 3px var(--keep2)}
.kh-t[aria-checked=true]{transform:translateY(-4px);box-shadow:0 0 0 2px #fff}
.kh-t[data-state=kept]{filter:none}
.kh-t[data-state=trashed]{filter:grayscale(1) brightness(.45);transform:scale(.9)}
.kh-t[data-state=trashed][aria-checked=true]{transform:translateY(-4px) scale(.9)}
.kh-t::before{position:absolute;top:3px;right:3px;z-index:1;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  font:700 10px/1 -apple-system,"Segoe UI",sans-serif}
.kh-t[data-state=kept]::before{content:"✓";background:#4ade80;color:#0c2414}
.kh-t[data-state=trashed]::before{content:"✕";background:var(--trash);color:#2a0d08}
.kh-t[data-n="1"]{--cap:1}.kh-t[data-n="2"]{--cap:2}.kh-t[data-n="3"]{--cap:3}.kh-t[data-n="4"]{--cap:4}.kh-t[data-n="5"]{--cap:5}.kh-t[data-n="6"]{--cap:6}

/* the burst as shot, before Kept ranks it: shot order, every frame in colour, frame 1 on the card.
   Never under reduced motion, which shows the ranked set from the first paint. */
.kh-play .kh-f{transition:none}
.kh-play .kh-t.kh-cur{box-shadow:0 0 0 2px #fff}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference){
  .kh:not(.ranked) .kh-t{grid-column:var(--cap);filter:none;transform:none;box-shadow:none}
  .kh:not(.ranked) .kh-t::after{box-shadow:inset 0 0 0 1px var(--line2)}
  .kh:not(.ranked):not(.kh-play) .kh-t[data-n="1"],.kh:not(.ranked) .kh-t.kh-cur{box-shadow:0 0 0 2px #fff}
  .kh:not(.ranked):not(.kh-play) .kh-f.on{opacity:0}
  .kh:not(.ranked):not(.kh-play) .kh-f[data-n="1"]{opacity:1}
  .kh:not(.ranked) .kh-tags{visibility:hidden}
}

/* the deck's controls: undo, trash, keep (DeckView.bottomOverlay) */
.kh-dock{display:flex;align-items:center;gap:10px;margin-top:14px}
.kh-dock button{display:inline-flex;align-items:center;justify-content:center;border-radius:99px;border:1px solid var(--line2);
  background:var(--bg2);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .14s,opacity .2s}
.kh-dock button:active{transform:scale(.96)}
.kh-dock button[aria-disabled=true]{opacity:.35;cursor:default;transform:none}
.kh-dock svg{width:20px;height:20px;flex:none}
.kh-dock .kh-undo{flex:none;width:44px;height:44px;color:var(--mut)}
.kh-dock .kh-bin{flex:none;width:52px;height:52px;color:var(--trash)}
.kh-dock .kh-keep{flex:1;min-width:0;min-height:52px;gap:9px;padding:6px 18px;font:600 15px/1.2 "Space Grotesk",-apple-system,sans-serif;
  border-color:rgba(74,222,128,.5);text-align:center}
.kh-dock .kh-keep svg{width:22px;height:22px;color:#4ade80}

/* the session HUD (SessionHUD.swift) */
.kh-hud{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 12px;margin-top:14px;padding:12px 14px;border-radius:16px;
  background:var(--bg2);border:1px solid var(--line)}
.kh-free{margin:0;display:flex;flex-direction:column;gap:2px}
.kh-free small{font:11px/1.2 "Space Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.kh-free b{font:700 26px/1.05 "Space Grotesk",-apple-system,sans-serif;color:var(--keep2);font-variant-numeric:tabular-nums}
.kh-free b small{font:400 13px/1 Inter,-apple-system,sans-serif;letter-spacing:0;text-transform:none;color:var(--mut)}
.kh-tally{margin:0;font:12px/1.35 "Space Mono",ui-monospace,monospace;color:var(--mut);text-align:right}
.kh-tally b{font-weight:400}
.kh-nk{color:var(--keep2)}
.kh-nx{color:var(--trash2)}
.kh-thread{grid-column:1/-1;display:block;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.kh-bar{display:block;height:100%;background:var(--mind);transform-origin:left;transform:scaleX(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),background .4s}
.kh-learn{grid-column:1/-1;margin:0;font:11px/1.2 "Space Mono",ui-monospace,monospace;letter-spacing:.03em;color:var(--mind);transition:color .4s,text-shadow .4s}
.kh-lit .kh-learn{color:var(--mind2);text-shadow:0 0 12px rgba(185,140,255,.9)}
.kh-lit .kh-bar{background:var(--mind2)}
.kh figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--mut);text-align:center}
.kh-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* no scripts: the settled set, with nothing that needs a script to work */
@media (scripting: none){.kh-dock,.kh-hud{display:none}.kh-card,.kh-t{cursor:default}}