/* ClearFrame — design tokens from the handoff README §1. Components use these names, never raw hex. */
:root{
  --brand-primary:#E8352B; --brand-primary-press:#B02015; --brand-primary-deep:#A8123C;
  --brand-accent:#FFC531; --brand-accent-ink:#3D2600; --brand-warm:#FF8A2B;
  --status-pass:#0E9B5C; --status-pass-bg:#E8F8EF; --status-pass-ink:#07603A;
  --status-fix:#F2A21B;  --status-fix-bg:#FFF4D6;  --status-fix-ink:#7A5300;  --status-fix-ink2:#96702A;
  --status-retake:#E2452C; --status-retake-bg:#FFEDE6; --status-retake-ink:#B02015;
  --status-info:#00A79A; --status-info-bg:#E0F5F3; --status-info-ink:#0A6E6A;
  --ink-900:#2B1710; --ink-700:#5A3E30; --ink-600:#6B5346; --ink-500:#7A6154; --ink-400:#9A8172; --ink-300:#AC9484;
  --line-200:#E8C7AE; --line-100:#F3E3D5;
  --surface-raised:#FFF8F1; --surface-sunken:#FFF4EA; --surface-page:#FFFFFF; --surface-tint:#FFEDE6;
  --shadow-card:0 6px 18px rgba(80,30,15,.12); --shadow-cta:0 12px 26px rgba(232,53,43,.32);
  --ease:cubic-bezier(.2,.7,.3,1);
}
html,body{margin:0;height:100%;background:#F6EEE6;font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink-900);-webkit-font-smoothing:antialiased}

/* The stage: a phone on desktop, the whole viewport on a phone. */
#stage{min-height:100dvh;display:flex;justify-content:center;align-items:flex-start}
#stage > [data-screen-label]{
  width:100%; max-width:430px; min-height:100dvh; height:auto !important;
  border-radius:0 !important; box-shadow:none !important; overflow:visible !important;
  background:var(--surface-page);
}
@media (min-width:640px){
  #stage{padding:32px 0}
  #stage > [data-screen-label]{ min-height:844px; border-radius:42px !important; box-shadow:0 0 0 9px #2A150E,0 20px 46px rgba(80,30,15,.18) !important; overflow:hidden !important; max-width:390px }
}
/* The mock's fixed 844px frames clip; a real screen scrolls (README §"About the design files"). */
#stage > [data-screen-label] > *{flex-shrink:0}

/* things the app draws itself */
.cf-screen-enter{animation:cf-in .26s var(--ease)}
@keyframes cf-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cf-screen-enter{animation:cf-fade .2s}@keyframes cf-fade{from{opacity:0}to{opacity:1}}}
.cf-hidden{display:none !important}
.cf-busy{opacity:.55;pointer-events:none}
[data-cf-click]{cursor:pointer}
.cf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#000}
.cf-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink-900);color:#fff;font:600 13px/1.4 "Plus Jakarta Sans",sans-serif;padding:11px 16px;border-radius:14px;box-shadow:var(--shadow-card);z-index:50;max-width:min(92vw,380px);text-align:center}
.cf-ba-after{position:absolute;inset:0;overflow:hidden}
.cf-ba-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cf-ba-handle{position:absolute;top:0;bottom:0;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);transform:translateX(-50%);pointer-events:none}