/* ————————————————————————————————————————————————
   Finding Future Perfect · Mission 2071
   Tokens taken from the MOTF design system (motf-design-system.vercel.app):
   F2 grey canvas · white panels at 32px · black ink · pill buttons
   4px spacing grid · radii 8/24/32/pill · 300ms motion
   Type: ABC Diatype (ours) on their scale
   ———————————————————————————————————————————————— */

:root{
  /* core palette */
  --canvas:#F2F2F2;           /* the page */
  --panel:#FFFFFF;            /* content panels */
  --card-bg:#FAFAFA;
  --ink:#000000;
  --grey-30:#262626;          /* dark hover */
  --grey-57:#6E6E6E;          /* secondary text, 4.55:1 on canvas */
  --grey-42:#949494;
  --grey-15:#D9D9D9;          /* field borders */
  --grey-10:#E6E6E6;          /* hairlines */

  /* aliases kept so existing rules resolve */
  --paper:#FFFFFF;
  --ink-55:var(--grey-57);
  --ink-35:var(--grey-42);
  --fill:#F2F2F2;
  --fill-hi:var(--grey-10);
  --line:var(--grey-10);

  /* radii */
  --r-sm:8px;                 /* small controls */
  --r-field:12px;
  --card:24px;                /* cards */
  --card-lg:32px;             /* panels */
  --pill:999px;

  /* 4px spacing grid */
  --s-1:4px;  --s-2:8px;  --s-4:16px; --s-8:32px;
  --s-10:40px; --s-20:80px; --s-30:120px; --s-40:160px;

  /* motion */
  --dur:300ms; --dur-hover:150ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-fade:cubic-bezier(0,0,.58,1);
  --ease-transform:cubic-bezier(.22,1,.36,1);

  --font:'ABC Diatype', "Helvetica Neue", Helvetica, Arial, sans-serif;

  --page:40px;                /* xl outer gutter */
  --gap:clamp(18px, 3vh, 26px);
  color-scheme:light;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  padding:var(--page);
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px; line-height:1.5; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body{font-family:'IBM Plex Sans Arabic', var(--font);}
.mono{font-family:var(--font);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* buttons take a soft halo; fields just deepen their own border (their spec) */
:is(button, a):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(0,0,0,.12);
}
input:focus-visible{outline:none;}
[tabindex="-1"]:focus{outline:none;}

/* ————— Shell — white panel on the grey canvas ————— */
.shell{
  min-height:calc(100dvh - var(--page) * 2);
  min-height:calc(100vh - var(--page) * 2);
  display:flex; flex-direction:column;
  background:var(--panel);
  border-radius:var(--card-lg);
  padding:0 var(--s-10);
  max-width:1600px; margin-inline:auto;
}
.shell > *{width:100%; max-width:1200px; margin-inline:auto;}

/* top bar — their header sits 110px tall; inside the panel that reads as 32px in */
.bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block:var(--s-8) 0;
  min-height:78px;
}
.sys{
  display:flex; align-items:center; gap:9px;
  font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap;
}
.sys-ring{width:14px; height:10px; border:1.5px solid var(--ink); border-radius:50%; flex:none;}

/* language: their pill tab group */
.lang{display:flex; gap:4px;}
.lang button{
  font-family:inherit; font-size:14px; font-weight:500; line-height:1;
  background:var(--canvas); border:0; color:var(--grey-57);
  padding:11px 17px; border-radius:var(--pill); cursor:pointer;
  transition:background .2s, color .2s;
}
.lang button:hover{background:var(--fill-hi);}
.lang button[aria-pressed="true"]{background:var(--ink); color:#fff;}

/* ————— Stage ————— */
.stage{
  display:flex; flex-direction:column;
  padding-block:var(--s-10) var(--s-8);
  margin-top:auto;
}
.state{display:flex; flex-direction:column; gap:var(--gap);}

/* statement screens sit centred; record screens run two-up */
:is(#s-locked, #s-ready, #s-wait, #s-done){align-items:center; text-align:center;}
:is(#s-locked, #s-ready, #s-wait, #s-done) .lede{margin-inline:auto;}

/* ————— Type ————— */
.ghost{
  margin:0 0 calc(var(--gap) * -.55);
  font-size:clamp(16px, 1.8vw, 19px); font-weight:400; line-height:1.35;
  color:var(--ink-35);
}
h1{
  margin:0; text-wrap:balance;
  font-size:clamp(30px, 4.4vw, 48px); font-weight:500; line-height:1.1; letter-spacing:-.03em;
}
h2{
  margin:0; text-wrap:balance;
  font-size:clamp(24px, 3.2vw, 34px); font-weight:500; line-height:1.18; letter-spacing:-.022em;
}
html[dir="rtl"] :is(h1,h2,.ghost){letter-spacing:normal; font-family:'IBM Plex Sans Arabic', sans-serif;}
.eyebrow{margin:0; font-size:14px; font-weight:500; color:var(--ink-55);}
.lede{margin:0; max-width:52ch; font-size:16px; line-height:1.5; color:var(--ink-55);}
.lede.small{font-size:15px;}
.wait-word{
  font-size:clamp(44px, 7vw, 76px); font-weight:500; line-height:1.05; letter-spacing:-.04em;
}
html[dir="rtl"] .wait-word{font-family:'IBM Plex Sans Arabic', sans-serif;}

/* ————— Locked: notify ————— */
.notify{display:flex; gap:8px; width:100%; max-width:460px; margin-inline:auto;}
.notify input{
  flex:1; min-width:0;
  background:var(--panel); border:1px solid var(--grey-15); border-radius:var(--pill);
  color:var(--ink); padding:15px 22px; font-size:15px; font-family:inherit;
  transition:border-color var(--dur-hover) var(--ease);
}
.notify input::placeholder{color:var(--grey-42);}
.notify input:focus{border-color:var(--grey-42); outline:none;}
.notify button{
  background:var(--ink); color:#fff; border:0; border-radius:var(--pill);
  font-family:inherit; font-size:14px; font-weight:500;
  padding:14px 28px; cursor:pointer; white-space:nowrap;
  transition:background var(--dur-hover) var(--ease);
}
.notify button:hover{background:var(--grey-30);}
.notify-ok{margin:0; font-size:15px; color:var(--ink-55);}


/* ————— Image reel — edge-to-edge inside the panel, loops forever ————— */
.reel{
  align-self:stretch;
  margin-top:var(--s-4);
  margin-inline:calc(var(--s-10) * -1);      /* bleed to the panel edges */
  width:calc(100% + var(--s-10) * 2);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.reel-track{
  --reel-gap:12px;
  --reel-w:240px;              /* integer width keeps the wrap exact */
  --reel-n:4;                  /* images per set */
  display:flex; gap:var(--reel-gap); width:max-content;
  animation:reel 46s linear infinite;
  will-change:transform;
  backface-visibility:hidden;
}
.reel img{
  width:var(--reel-w); height:auto; aspect-ratio:4/3;  /* size known before load — no reflow mid-loop */
  flex:none; display:block;
  border-radius:var(--card); object-fit:cover;
  background:var(--canvas);
}
/* Travel exactly one set: n images plus the gap that follows each.
   Pixel maths, not a percentage — percentages drift on subpixel widths and the
   loop then jumps a pixel or two every cycle. */
@keyframes reel{
  to{ transform:translateX(calc((var(--reel-w) + var(--reel-gap)) * var(--reel-n) * -1)); }
}
/* In RTL the row lays out right-to-left, so the track must travel the other way.
   animation-direction:reverse only replays the same leftward path and opens a gap. */
@keyframes reel-rtl{
  to{ transform:translateX(calc((var(--reel-w) + var(--reel-gap)) * var(--reel-n))); }
}
html[dir="rtl"] .reel-track{animation-name:reel-rtl;}
.reel:hover .reel-track{animation-play-state:paused;}

@media (max-width:880px){
  .reel{ margin-inline:calc(var(--s-8) * -1); width:calc(100% + var(--s-8) * 2); }
  .reel-track{--reel-w:200px;}
}
@media (max-width:560px){
  .reel{ margin-inline:-20px; width:calc(100% + 40px); }
  .reel img{border-radius:16px;}
  .reel-track{--reel-w:168px; --reel-gap:10px; animation-duration:34s;}
}
@media (prefers-reduced-motion: reduce){
  .reel-track{animation:none;}
  .reel{overflow-x:auto;}
}


/* ————— Countdown to the pods opening ————— */
.countdown{
  /* needs a real width: the parent centres its children, so without this the
     flex:1 cells on mobile collapse to their minimum */
  width:100%; max-width:424px; margin-inline:auto;
  display:flex; gap:8px; justify-content:center;
  margin-top:calc(var(--gap) * -.25);
}
.cd-cell{
  /* fixed square so the four cells match — otherwise each sizes to its label
     and "Seconds" comes out wider than "Days" */
  width:92px; height:92px; flex:none;
  background:var(--canvas); border-radius:var(--card);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.cd-num{
  font-size:30px; font-weight:500; line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cd-lab{font-size:13px; line-height:1; color:var(--grey-57);}
@media (max-width:560px){
  .countdown{gap:6px;}
  .cd-cell{width:auto; height:78px; flex:1 1 0; min-width:0;}
  .cd-num{font-size:24px;}
  .cd-lab{font-size:12px;}
}

/* ————— Ready: their pill chip row ————— */
.brief{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.brief li{
  background:var(--canvas); color:var(--grey-57);
  font-size:14px; font-weight:500; line-height:1;
  padding:11px 17px; border-radius:var(--pill);
}

/* ————— Viewfinder: their media card ————— */
.state-record{gap:calc(var(--gap) * .9);}
.q-col{display:flex; flex-direction:column; gap:14px;}
.view{
  position:relative; width:100%; aspect-ratio:4/3;
  background:var(--ink);
  border-radius:var(--card); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.view video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scaleX(-1); display:none;
}
.view.has-cam video{display:block;}
.corner{position:absolute; width:22px; height:22px; border:2px solid rgba(255,255,255,.35); z-index:2;}
.corner.tl{top:18px; inset-inline-start:18px; border-inline-end:0; border-bottom:0;}
.corner.br{bottom:18px; inset-inline-end:18px; border-inline-start:0; border-top:0;}
.view-idle,.view-live{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.hint{font-size:15px; color:rgba(255,255,255,.65);}
.clock{font-variant-numeric:tabular-nums; font-size:clamp(46px,9vw,68px); font-weight:500; letter-spacing:-.02em; color:#fff;}
.view.low .clock{animation:pulse 1s steps(2,end) infinite;}
.recline{
  display:flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.14); border-radius:var(--pill); padding:8px 16px;
  font-size:14px; font-weight:500; color:#fff;
}
.dot{width:8px; height:8px; border-radius:50%; background:#fff; animation:pulse 1.1s steps(2,end) infinite;}
@keyframes pulse{50%{opacity:.25}}

.fuse{
  position:absolute; bottom:0; inset-inline-start:0; z-index:3;
  height:3px; width:100%; background:#fff;
  transform-origin:0 50%; transform:scaleX(0);
}
html[dir="rtl"] .fuse{transform-origin:100% 50%;}
.view.armed .fuse{transform:scaleX(1);}
.view.running .fuse{transition:transform 45s linear; transform:scaleX(0);}
.view.low .fuse{height:5px;}

/* ————— Form ————— */
#form{display:flex; flex-direction:column; width:100%;}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.field label{font-size:14px; font-weight:500; color:var(--ink);}
.field input{
  background:var(--panel); border:1px solid var(--grey-15); border-radius:var(--r-field);
  color:var(--ink); padding:15px 18px; font-size:16px; font-family:inherit;
  transition:border-color var(--dur-hover) var(--ease);
}
.field input:focus{border-color:var(--grey-42); outline:none;}
.field input.invalid{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink);}
.consent{
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  background:var(--card-bg); border:1px solid var(--grey-10); border-radius:var(--r-field); padding:16px 20px; margin-top:4px;
}
.consent input{margin-top:2px; accent-color:var(--ink); width:18px; height:18px; flex:none; cursor:pointer;}
.consent span{font-size:14px; line-height:1.5; color:var(--ink-55);}

/* ————— Received ————— */
.ref{
  width:100%; max-width:460px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  background:var(--card-bg); border:1px solid var(--grey-10); border-radius:var(--card-lg); padding:var(--s-8) 28px;
}
.ref-row{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;}
.ref-num{font-size:clamp(30px, 4.4vw, 42px); font-weight:500; letter-spacing:-.03em; color:var(--ink);}
.ref-share{
  background:var(--panel); border:1px solid var(--grey-15); color:var(--ink); border-radius:var(--pill);
  font-family:inherit; font-size:14px; font-weight:500;
  padding:11px 20px; cursor:pointer; transition:opacity .2s;
}
.ref-share:hover{opacity:.7;}

/* ————— Actions: their pill buttons ————— */
.actions{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding-block:0 var(--s-8);
}
.btn{
  border:0; border-radius:var(--pill); cursor:pointer;
  background:var(--ink); color:#fff;
  font-family:var(--font); font-weight:500; font-size:14px; line-height:1;
  padding:14px 28px; min-height:50px;
  transition:background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.btn:hover{background:var(--grey-30);}
.btn.rec{background:var(--ink);}
.btn[disabled]{opacity:.25; cursor:not-allowed;}
.btn.ghost-btn{
  background:none; border:1px solid var(--ink); color:var(--ink);
}
.btn.ghost-btn:hover{background:var(--ink); color:#fff;}
.fineprint{margin:0; text-align:center; max-width:460px; font-size:14px; color:var(--ink-35);}

.mirror{
  text-align:center;
  border-top:1px solid var(--line);
  margin-top:auto;
  padding-block:var(--s-4) calc(var(--s-8) + env(safe-area-inset-bottom,0px));
  font-size:14px; line-height:1.5; color:var(--ink-35);
}

/* ————— Prototype nav ————— */
.demo{
  position:fixed; bottom:16px; inset-inline-end:16px; z-index:40;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  pointer-events:none;
}
.demo > *{pointer-events:auto;}
.demo-toggle{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); border:0; color:#fff;
  border-radius:var(--pill); font-family:inherit; font-size:13px; font-weight:500;
  padding:10px 16px; cursor:pointer;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.5);
}
.demo-dot{
  width:7px; height:7px; border-radius:50%; background:#fff;
  animation:pulse 1.6s steps(2,end) infinite;
}
.demo-panel{
  background:var(--panel); border:1px solid var(--grey-15);
  border-radius:var(--card); padding:14px;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.35);
  width:min(260px, calc(100vw - 32px));
}
.demo-title{
  margin:0 0 10px; font-size:12px; font-weight:500; color:var(--grey-57);
}
.demo-grid{display:flex; flex-direction:column; gap:4px;}
.demo-grid button{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:0; border-radius:var(--r-sm);
  font-family:inherit; font-size:14px; color:var(--ink);
  padding:9px 10px; cursor:pointer; text-align:start;
  transition:background var(--dur-hover) var(--ease);
}
.demo-grid button b{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--canvas); color:var(--grey-57);
  font-size:11px; font-weight:500;
  display:flex; align-items:center; justify-content:center;
}
.demo-grid button:hover{background:var(--canvas);}
.demo-grid button[aria-current="true"]{background:var(--ink); color:#fff;}
.demo-grid button[aria-current="true"] b{background:rgba(255,255,255,.22); color:#fff;}

/* ————— Desktop ————— */
@media (min-width:880px){
  .state{max-width:680px; margin-inline:auto;}
  :is(#s-ready, #s-wait, #s-done){max-width:820px;}
  /* locked screen runs full container so the card row is full width.
     width+margin:0 are required: an auto inline margin makes a flex item shrink-to-fit */
  #s-locked{max-width:none; width:100%; margin-inline:0;}
  #s-locked :is(.ghost, h1, .lede, .notify, .notify-ok){max-width:760px; margin-inline:auto;}
  .state-record{
    /* width+margin:0 stop the auto inline margin shrinking the grid to its
       content — without them Q1 and Q2 render at different widths */
    max-width:none; width:100%; margin-inline:0;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:clamp(40px, 5vw, 72px); align-items:center;
  }
  .q-col{gap:16px;}
  .q-col .lede{max-width:40ch;}
  .view{aspect-ratio:16/10; max-height:60vh;}
  /* app.js moves the action into the question column at this width */
  .q-col .actions{align-items:flex-start; padding-block:12px 0;}
  .q-col .actions .fineprint{text-align:start;}
  #s-details{max-width:560px;}
}

/* ————— Phones ————— */
@media (max-width:1024px){ :root{--page:24px;} .shell{padding-inline:var(--s-8);} }
@media (max-width:560px){
  :root{--page:12px; --card:20px; --card-lg:24px;}
  .shell{padding-inline:20px;}

  /* explicit type ladder so the hierarchy holds at phone width:
     14 label · 34 title · 16 body */
  .ghost{font-size:14px; line-height:1.4; margin-bottom:calc(var(--gap) * -.75);}
  h1{font-size:34px; line-height:1.12; letter-spacing:-.025em;}
  h2{font-size:24px; line-height:1.2;}
  .wait-word{font-size:52px; line-height:1.02;}
  .lede{font-size:16px; line-height:1.5; max-width:34ch;}
  .lede.small{font-size:15px;}
  .eyebrow{font-size:14px;}
  .sys{font-size:13px;}
  .bar{padding-block:20px 0; min-height:0;}
  .stage{padding-block:28px 24px;}
  .actions{padding-block:0 24px;}
  .mirror{padding-block:var(--s-4) calc(20px + env(safe-area-inset-bottom,0px));}
  .notify{flex-direction:column;}
  .notify button{padding:16px 28px;}
  .btn{width:100%; padding:17px 28px;}
  .actions > *{width:100%;}
  .ref{padding:26px 20px;}
}

/* every touch device gets a 44px minimum target, regardless of width */
@media (pointer: coarse){
  .lang button{padding:13px 18px; min-height:44px;}
  .ref-share{min-height:44px;}
  .demo-toggle{min-height:44px;}
  .demo-grid button{min-height:44px;}
}

@media (prefers-reduced-motion: reduce){
  .view.running .fuse{transition:none;}
  .dot, .view.low .clock{animation:none;}
}