/* DINGBloop prototype: shared tokens, type, wordmark, direction switch, buttons, notices and the hands -> phone stage.
   Day twin direction (SPEC §1 decision 8): warm paper, gold signature, family blue, ink. Light by default,
   dark via prefers-color-scheme or the theme toggle ([data-theme] on <html>, set by /js/theme-boot.js). */

:root{
  --ink:#0A1628; --ink-2:#0F2138;
  --drop:#0089FF; --drop-deep:#006ECC; --drop-light:#7EC2FF;
  --gold:#E8A94D; --gold-deep:#C6822B; --gold-hi:#F0B962;
  --mist:#8FA3B8; --mist-dark:#4C6178;
  --ok:#1F7A4D; --warn-bg:#FFF4E0; --warn-line:#E8A94D; --warn-ink:#6B3F05;
  --bad:#B42318; --bad-bg:#FDECEA;

  --bg:#FAF7F1; --bg-2:#F2ECE1; --surface:#FFFFFF; --surface-2:#FBF9F5;
  --text:#0A1628; --text-2:#4C6178; --text-3:#5F7085;
  --rule:rgba(10,22,40,0.11);
  --ding-strong:#8A5208;
  --accent-a:#006ECC;
  --tile:#0F2138; --tile-2:#0A1628; --tile-ink:#FFFFFF; --tile-sub:#B5C3D2;
  --nav-bg:rgba(250,247,241,0.92);
  --shadow:0 18px 44px rgba(10,22,40,0.16), 0 2px 0 rgba(255,255,255,0.6) inset;
  --card-shadow:0 1px 0 rgba(10,22,40,0.03), 0 10px 30px rgba(10,22,40,0.06);
  --hands-filter:invert(1);
  --f-head:'Space Grotesk', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --f-body:'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A1628; --bg-2:#0F2138; --surface:#12243C; --surface-2:#0F2138;
    --text:#FFFFFF; --text-2:#B5C3D2; --text-3:#9AAEC2;
    --rule:rgba(255,255,255,0.12);
    --ding-strong:#F0BC6A; --accent-a:#3FA0FF;
    --tile:#FFF7E8; --tile-2:#F6E7CC; --tile-ink:#0A1628; --tile-sub:#4C6178;
    --nav-bg:rgba(10,22,40,0.92);
    --shadow:0 20px 50px rgba(0,0,0,0.4), 0 0 40px rgba(232,169,77,0.14);
    --card-shadow:0 10px 30px rgba(0,0,0,0.25);
    --warn-bg:#2A2212; --warn-ink:#F6D9A8; --bad-bg:#3A1414; --bad:#FF8A80; --ok:#5DD39E;
    --hands-filter:none;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1628; --bg-2:#0F2138; --surface:#12243C; --surface-2:#0F2138;
  --text:#FFFFFF; --text-2:#B5C3D2; --text-3:#9AAEC2;
  --rule:rgba(255,255,255,0.12);
  --ding-strong:#F0BC6A; --accent-a:#3FA0FF;
  --tile:#FFF7E8; --tile-2:#F6E7CC; --tile-ink:#0A1628; --tile-sub:#4C6178;
  --nav-bg:rgba(10,22,40,0.92);
  --shadow:0 20px 50px rgba(0,0,0,0.4), 0 0 40px rgba(232,169,77,0.14);
  --card-shadow:0 10px 30px rgba(0,0,0,0.25);
  --warn-bg:#2A2212; --warn-ink:#F6D9A8; --bad-bg:#3A1414; --bad:#FF8A80; --ok:#5DD39E;
  --hands-filter:none;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body{font-family:var(--f-body); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; line-height:1.45;}
h1,h2,h3,h4{font-family:var(--f-head); letter-spacing:-0.02em; line-height:1.1;}
img{display:block; max-width:100%;}
button,input,select{font:inherit; color:inherit;}
a{color:inherit;}
.mono{font-family:var(--f-mono);}
:focus-visible{outline:3px solid var(--drop); outline-offset:2px; border-radius:6px;}
.hidden{display:none !important;}
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* ---------- Wordmark: DING (gold, italic, ink keyline) leads, Bloop (blue) follows; the flow line ends in the big drop ---------- */
.wm{display:inline-flex; align-items:flex-end; text-decoration:none; position:relative; font-family:var(--f-head); font-weight:700;
  font-size:30px; line-height:1; padding:0 27px 9px 10px; letter-spacing:-0.01em; white-space:nowrap;}
.wm .d{font-style:italic; color:var(--gold); padding-right:4px;
  text-shadow:-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink),0 -2px 0 var(--ink),0 2px 0 var(--ink),-2px 0 0 var(--ink),2px 0 0 var(--ink);}
.wm .b{color:var(--drop);
  text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,0 -2px 0 #fff,0 2px 0 #fff,-2px 0 0 #fff,2px 0 0 #fff;}
.wm::before{content:''; position:absolute; left:0; bottom:1px; width:8px; height:11px; background:var(--gold);
  clip-path:path('M4 0C4 0 0 5 0 7.5a4 4 0 0 0 8 0C8 5 4 0 4 0Z');}
.wm::after{content:''; position:absolute; left:8px; right:13px; bottom:3px; height:4px; border-radius:2px; background:linear-gradient(90deg,var(--gold),var(--drop));}
.wm img{position:absolute; right:0; bottom:-1px; width:20px; height:auto;}
.wm.sm{font-size:21px; padding:0 18px 7px 7px;}
.wm.sm img{width:14px;}
.wm.sm::after{height:3px; bottom:2px; right:9px; left:6px;}
.wm.sm::before{width:6px; height:8px; clip-path:path('M3 0C3 0 0 3.6 0 5.4a3 3 0 0 0 6 0C6 3.6 3 0 3 0Z');}
.wm.sm .d{text-shadow:-1.5px -1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink),1.5px 1.5px 0 var(--ink);}
.wm.sm .b{text-shadow:-1.5px -1.5px 0 #fff,1.5px -1.5px 0 #fff,-1.5px 1.5px 0 #fff,1.5px 1.5px 0 #fff;}
.bdname .b{color:var(--drop); font-weight:700;} .bdname .d{font-style:italic; font-weight:700;}

/* ---------- Direction switch (same markup on both family sites) ---------- */
.dir-switch{display:inline-flex; padding:3px; border-radius:999px; border:1px solid var(--rule); background:var(--surface); gap:2px; font-size:13px; line-height:1.15;}
.dir-switch a{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; text-decoration:none; min-height:40px;
  padding:5px 14px 5px 12px; border-radius:999px; color:var(--text-2); white-space:nowrap; transition:background .2s,color .2s;}
.dir-switch a .dl{font-weight:600;}
.dir-switch a .dn{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; opacity:.85;}
.dir-switch a:hover{color:var(--text); background:var(--bg-2);}
.dir-switch a[aria-current="page"]{background:var(--ink); color:#fff;}
.dir-switch a[aria-current="page"] .dn{color:var(--gold); opacity:1;}
:root[data-theme="dark"] .dir-switch a[aria-current="page"]{background:var(--gold); color:var(--ink);}
:root[data-theme="dark"] .dir-switch a[aria-current="page"] .dn{color:var(--ink);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dir-switch a[aria-current="page"]{background:var(--gold); color:var(--ink);}
  :root:not([data-theme="light"]) .dir-switch a[aria-current="page"] .dn{color:var(--ink);}
}

.theme-btn{width:40px; height:40px; flex:0 0 auto; border-radius:10px; border:1px solid var(--rule); background:transparent; color:var(--text-2); cursor:pointer;
  display:grid; place-items:center;}
.theme-btn svg{width:18px; height:18px;}
.theme-btn:hover{background:var(--bg-2); color:var(--text);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 20px; border-radius:10px;
  font:600 15px/1.2 var(--f-body); text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .15s, transform .15s, border-color .15s;
  -webkit-tap-highlight-color:transparent; text-align:center;}
.btn:disabled{opacity:.55; cursor:default;}
.btn-ding{background:var(--gold); color:var(--ink);}
.btn-ding:hover:not(:disabled){background:var(--gold-hi);}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--rule);}
.btn-ghost:hover:not(:disabled){background:var(--bg-2);}
.btn-ink{background:var(--ink); color:#fff;}
:root[data-theme="dark"] .btn-ink{background:#fff; color:var(--ink);}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn-ink{background:#fff; color:var(--ink);} }
.btn-link{background:none; border:0; color:var(--drop-deep); font-weight:600; padding:6px 4px; min-height:0; text-decoration:underline; text-underline-offset:3px;}
:root[data-theme="dark"] .btn-link{color:var(--drop-light);}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn-link{color:var(--drop-light);} }
.btn-danger{background:transparent; color:var(--bad); border-color:var(--rule);}

/* ---------- Notices ---------- */
.note{border-radius:12px; padding:10px 14px; font-size:14px; line-height:1.45; border:1px solid var(--rule); background:var(--surface-2); color:var(--text-2);}
.note b{color:var(--text);}
.note.warn{background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-ink);}
.note.warn b{color:inherit;}
.note.bad{background:var(--bad-bg); border-color:rgba(180,35,24,.35); color:var(--bad);}
.note.bad b{color:inherit;}
.note.ok{border-color:rgba(31,122,77,.35); color:var(--ok);}

/* progress bar: the fill is scaled, never resized (GPU-friendly) */
.bar{position:relative; height:8px; border-radius:6px; background:var(--bg-2); overflow:hidden;}
.bar>i{position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--gold),var(--drop)); transition:transform .25s linear; border-radius:inherit;}
.overall{display:flex; align-items:center; gap:12px;}
.overall .bar{flex:1; height:10px;}
.overall .pct{font:700 14px var(--f-mono); min-width:4ch; text-align:right;}
.filelist .act.wide{grid-column:2 / -1; justify-content:flex-start; flex-wrap:wrap;}
.bar.countdown>i{background:var(--gold); transition:none;}

.spin{display:inline-block; width:14px; height:14px; border:2px solid var(--rule); border-top-color:var(--gold); border-radius:50%; animation:dbSpin 1s linear infinite; vertical-align:-2px; margin-right:8px; flex:0 0 auto;}
@keyframes dbSpin{to{transform:rotate(360deg)}}

.filelist{list-style:none; display:flex; flex-direction:column;}
.filelist li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:7px 0; border-top:1px solid var(--rule);}
.filelist li:first-child{border-top:0;}
.filelist .ico{width:34px; height:34px; border-radius:8px; display:grid; place-items:center; font:700 10px var(--f-mono); color:var(--ink); background:var(--bg-2); text-transform:uppercase; letter-spacing:.02em;}
.filelist .ico.img{background:linear-gradient(135deg,#7EC2FF,#0089FF); color:#fff;}
.filelist .ico.vid{background:#0A1628; color:#fff;}
:root[data-theme="dark"] .filelist .ico.vid{background:#000;}
.filelist .ico.doc{background:var(--gold);}
.filelist .ico.exe{background:#F4D2CE; color:#7A1A12;}
.filelist .fn{min-width:0;}
.filelist .fn b{display:block; font-weight:600; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.filelist .fn span{display:block; font-size:12.5px; color:var(--text-3);}
.filelist .fn .bar{margin-top:5px; height:6px;}
.filelist .st{font:600 12.5px var(--f-mono); color:var(--text-3); white-space:nowrap;}
.filelist .st.ok{color:var(--ok);}
.filelist .st.bad{color:var(--bad);}
.filelist .exe-tag{display:inline-block; font:600 10.5px var(--f-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--bad); margin-left:4px;}

/* =====================================================================================================
   THE STAGE: hands -> phone. Square box; every child is absolutely positioned in % of the box.
   Movement uses transforms/opacity only. .st-move wrappers are the size of the stage, so translate(%)
   is in stage units: JS (stage.js) writes one transform per wrapper per frame, nothing else.
   ===================================================================================================== */
.stage{position:absolute; inset:0; pointer-events:none; contain:strict; container-type:size;}
.stage .st-halo{position:absolute; left:14%; top:40%; width:50%; height:40%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,137,255,.42), rgba(0,137,255,0)); opacity:.35; transition:opacity .6s;}
.stage .st-hands{position:absolute; left:8%; top:46%; width:62%; height:auto; filter:var(--hands-filter); opacity:.95; user-select:none; -webkit-user-drag:none;}
.stage .st-phone{position:absolute; left:61%; top:6%; width:22%; height:38%; border-radius:15% / 9%; border:3px solid var(--tile-ink);
  transform:rotate(8deg); opacity:.55; transition:opacity .4s, border-color .4s;}
.stage .st-phone::before{content:''; position:absolute; left:36%; right:36%; top:4%; height:2.4%; min-height:2px; border-radius:2px; background:var(--tile-ink); opacity:.55;}
.stage .st-screen{position:absolute; inset:10% 7% 7%; border-radius:10% / 6%; overflow:hidden;}
.stage .st-fill{position:absolute; inset:0; transform-origin:50% 100%; transform:scaleY(0); background:linear-gradient(0deg, rgba(232,169,77,.85), rgba(232,169,77,.35)); transition:transform .4s ease-out;}
.stage .st-lit{position:absolute; inset:0; background:radial-gradient(closest-side, rgba(232,169,77,.95), rgba(232,169,77,0)); opacity:0;}
.stage .st-check{position:absolute; inset:0; display:grid; place-items:center; color:var(--tile-ink); font:700 clamp(14px, 3.4cqw, 34px)/1 var(--f-head); opacity:0; transform:scale(.6); transition:opacity .25s, transform .35s cubic-bezier(.3,1.5,.5,1);}
.stage .st-ring{position:absolute; left:72%; top:25%; width:34%; aspect-ratio:1; margin:-17% 0 0 -17%; border-radius:50%; border:3px solid var(--gold); opacity:0; transform:scale(.5);}
.stage .st-ring.soft{border-width:2px;}
.stage .st-move{position:absolute; inset:0; transform-origin:39% 60%; will-change:transform, opacity;}
.stage .st-move.mini{opacity:0;}
.stage .st-drop{position:absolute; left:34.5%; top:52.2%; width:9%; height:auto; transform-origin:50% 60%; user-select:none; -webkit-user-drag:none;}
.stage .st-move.mini .st-drop{left:36.5%; top:56%; width:5%;}
.stage[data-phone="found"] .st-phone, .stage[data-phone="busy"] .st-phone{opacity:.95;}
.stage[data-phone="found"] .st-phone{border-color:var(--gold);}
.stage[data-phone="done"] .st-phone{opacity:1; border-color:var(--gold);}
.stage[data-phone="done"] .st-check{opacity:1; transform:scale(1);}
.stage[data-phone="done"] .st-lit{opacity:.75;}
.stage[data-phone="error"] .st-phone{opacity:.35;}
.stage[data-mood="error"] .st-halo{opacity:0;}
.stage[data-mood="busy"] .st-halo{opacity:.7;}

/* Reduced motion: a static composition. The drop rests just above the phone; on delivered the ring is drawn statically.
   State changes only crossfade (<=150 ms). stage.js does not animate at all in this mode. */
@media (prefers-reduced-motion:reduce){
  .stage .st-move{transition:opacity .12s linear;}
  .stage .st-phone,.stage .st-fill,.stage .st-check,.stage .st-halo,.stage .st-lit{transition:opacity .12s linear !important;}
  .stage .st-check{transform:none;}
  .stage[data-phone="done"] .st-ring{opacity:.9; transform:scale(1.15); transition:opacity .12s linear;}
  .spin{animation:none; border-top-color:var(--gold); border-right-color:var(--gold);}
  *{scroll-behavior:auto !important;}
}

/* dark mode: DING turns white (the gold keyline version is for light paper) */
:root[data-theme="dark"] .wm .d{color:#fff;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wm .d{color:#fff;} }
.filelist .fn .exe-tag{display:inline; color:var(--bad); margin-left:6px;}