/* Computer page. Two-screen composition like BloopDING: screen 1 = nav + hero pair (tile + card) in exactly one viewport;
   the live handoff happens INSIDE the card (same frame); screen 2 = a short "how it works" + footer.
   The whole pair scales from one number, --T (the tile's side), capped by viewport width AND height. */

.wrap{max-width:calc(var(--T) * 2.74 + 64px); margin:0 auto; padding:0 32px;}
body.desk{
  /* the tile side --T drives the whole pair: fits width (pair = 2.74 T) and height (viewport minus nav 66, paddings 30, proto line 34, air 40) */
  --T: max(280px, min(580px, calc((100vw - 64px) / 2.74), calc(100vh - 180px)));
  --T: max(280px, min(580px, calc((100vw - 64px) / 2.74), calc(100svh - 180px)));
}

.screen-1{min-height:100vh; min-height:100svh; display:flex; flex-direction:column;}
.nav{position:relative; z-index:20; background:var(--nav-bg); border-bottom:1px solid var(--rule);}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding-top:8px; padding-bottom:8px;}
.nav .dir-switch{margin-left:auto;}

.hero{flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px 16px 10px; position:relative; overflow:hidden;
}
.hero::before{content:''; position:absolute; left:-12%; top:-35%; width:65%; height:130%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(232,169,77,0.16), rgba(232,169,77,0));}
.pair{position:relative; display:grid; grid-template-columns:var(--T) calc(var(--T) * 1.62); gap:calc(var(--T) * 0.12); align-items:stretch;}
.proto-line{margin-top:14px; font:500 12px/1.3 var(--f-mono); letter-spacing:.04em; color:var(--text-3); display:flex; align-items:center; gap:8px; position:relative;}
.proto-line .dot{width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(232,169,77,.25);}

/* ---------- the tile ---------- */
.tile{position:relative; width:var(--T); height:var(--T); border-radius:calc(var(--T) * 0.07); background:linear-gradient(160deg,var(--tile) 0%,var(--tile-2) 100%);
  box-shadow:var(--shadow); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; isolation:isolate;}
.tile .zone{position:absolute; inset:12px; border:2px dashed transparent; border-radius:calc(var(--T) * 0.05); transition:border-color .2s; z-index:1; pointer-events:none;}
.tile-hit{position:absolute; inset:0; z-index:2; background:transparent; border:0; cursor:pointer; border-radius:inherit;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding:0 12px calc(var(--T) * 0.035); text-align:center;}
.tile-hit:focus-visible{outline:3px solid var(--gold); outline-offset:-6px;}
.cta-main{font:700 clamp(15px, calc(var(--T) * 0.037), 19px)/1.2 var(--f-head); color:var(--gold); padding:2px 8px; border-radius:8px;}
.cta-sub{display:block; font:500 clamp(12px, calc(var(--T) * 0.027), 14px)/1.4 var(--f-body); color:var(--tile-sub); margin-top:3px;}
:root[data-theme="dark"] .cta-main{color:#8A5208;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cta-main{color:#8A5208;} }
.tile:not(.busy):hover, .tile:not(.busy):focus-within, .tile.dragover{transform:translateY(-3px); box-shadow:var(--shadow), 0 0 0 3px rgba(232,169,77,0.55);}
.tile.dragover .zone{border-color:rgba(232,169,77,0.95);}
.tile.busy .tile-hit{display:none;}
/* "or choose a folder" sits in the tile's empty top-left corner, above the click area (a button can't hold another button);
   the call to action and the hands keep their approved places */
.tile-folder{position:absolute; left:calc(var(--T) * 0.05); top:calc(var(--T) * 0.05); z-index:3; background:none; border:0; cursor:pointer; white-space:nowrap;
  font:600 clamp(12px, calc(var(--T) * 0.027), 14px)/1.3 var(--f-body); color:var(--tile-sub); text-decoration:underline; text-underline-offset:3px; padding:4px 8px; border-radius:6px;}
.tile-folder:hover{color:var(--gold);}
.tile-folder:focus-visible{outline:3px solid var(--gold); outline-offset:1px;}
.tile.busy .tile-folder{display:none;}
/* selection: remove buttons and the folder path shown under a name (shown here only, never sent) */
.filelist .x{width:32px; height:32px; border-radius:8px; border:1px solid var(--rule); background:transparent; color:var(--text-2); cursor:pointer; font:600 16px/1 var(--f-body);}
.filelist .x:hover{background:var(--bg-2); color:var(--text);}
.filelist .x:focus-visible{outline:3px solid var(--gold); outline-offset:1px;}
.filelist .fn .where{font-family:var(--f-mono); font-size:11.5px;}
.tile-cap{position:absolute; left:0; right:0; bottom:calc(var(--T) * 0.04); z-index:2; text-align:center; font:600 clamp(13px, calc(var(--T) * 0.033), 16px)/1.3 var(--f-mono);
  letter-spacing:.03em; color:var(--tile-sub); opacity:0; transition:opacity .2s; padding:0 16px;}
.tile.busy .tile-cap{opacity:1;}
.tile-cap b{color:var(--gold); font-weight:700;}
:root[data-theme="dark"] .tile-cap b{color:#8A5208;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tile-cap b{color:#8A5208;} }
.drag-veil{position:fixed; inset:0; z-index:30; display:none;}
body.dragging .drag-veil{display:block;}

/* ---------- the card: intro face and flow face ---------- */
.card{position:relative; background:var(--surface); border:1px solid var(--rule); border-radius:calc(var(--T) * 0.055); box-shadow:var(--card-shadow);
  height:var(--T); overflow:hidden; --pad:calc(var(--T) * 0.075);}
.face{position:absolute; inset:0; padding:var(--pad); display:flex; flex-direction:column; transition:opacity .18s ease;}
.face[hidden]{display:none;}
.intro{justify-content:center;}
.eyebrow{font:600 clamp(11.5px, calc(var(--T) * 0.028), 14px)/1.2 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ding-strong);
  display:flex; align-items:center; gap:10px; margin-bottom:calc(var(--T) * 0.045);}
.eyebrow::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(232,169,77,0.22);}
.intro h1{font-size:clamp(30px, calc(var(--T) * 0.108), 58px); line-height:1.03; font-weight:700; margin-bottom:calc(var(--T) * 0.05);}
.intro h1 .accent{background:linear-gradient(120deg,var(--accent-a),var(--drop)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.intro h1 .gdot{-webkit-text-fill-color:var(--gold); color:var(--gold);}
.lede{font-size:clamp(15px, calc(var(--T) * 0.04), 20px); line-height:1.5; color:var(--text-2);}
.wrongway{margin-top:calc(var(--T) * 0.06); padding-top:calc(var(--T) * 0.04); border-top:1px solid var(--rule); font-size:clamp(13px, calc(var(--T) * 0.031), 15px); color:var(--text-3);
  display:flex; flex-wrap:wrap; gap:4px 10px;}
.wrongway a, .family a{color:var(--drop-deep); font-weight:600; text-decoration:none; border-bottom:1.5px solid rgba(0,137,255,0.35);}
:root[data-theme="dark"] .wrongway a, :root[data-theme="dark"] .family a{color:var(--drop-light);}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wrongway a, :root:not([data-theme="light"]) .family a{color:var(--drop-light);} }

/* flow face: a head, a body that may scroll internally (long file lists), and an action row */
.flow{gap:calc(var(--T) * 0.03); font-size:clamp(13.5px, calc(var(--T) * 0.033), 15.5px);}
.flow .f-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.flow .kick{font:600 clamp(11px, calc(var(--T) * 0.026), 13px)/1.2 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ding-strong); margin-bottom:6px; display:flex; align-items:center; gap:8px;}
.flow h2{font-size:clamp(22px, calc(var(--T) * 0.066), 34px); line-height:1.08;}
.flow .lead{color:var(--text-2); margin-top:4px; line-height:1.45;}
.flow .lead b{color:var(--text);}
.flow .f-body{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:10px;}
.flow .f-scroll{flex:1 1 auto; min-height:0; overflow:auto; padding-right:4px; overscroll-behavior:contain;}
.flow .f-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.flow .f-actions .grow{flex:1;}
.flow .meta{font:500 12.5px/1.4 var(--f-mono); color:var(--text-3);}
.flow .meta b{color:var(--text-2);}
.flow .banner{margin:0;}
.flow .notes{display:flex; flex-direction:column; gap:8px;}
.flow .notes:empty{display:none;}

/* waiting for scan: QR left, details right */
.qr-grid{display:grid; grid-template-columns:auto minmax(0,1fr); gap:calc(var(--T) * 0.06); flex:1 1 auto; min-height:0;}
/* same frame as BloopDING's receiver QR (.receiver-qr): 280 px canvas + 23 px white pad (= the quiet zone), 18 px radius, soft shadow;
   the canvas shrinks only when the tile is too small to hold 280 px */
.qr-box{background:#fff; border-radius:18px; padding:23px; border:1px solid rgba(10,22,40,0.1); align-self:start; display:flex; align-items:center; justify-content:center;
  width:fit-content; box-shadow:0 6px 16px rgba(10,22,40,0.06); --qr:min(280px, calc(var(--T) - 140px));}
.qr-box canvas{display:block; width:var(--qr); height:var(--qr);}
.qr-side{display:flex; flex-direction:column; gap:10px; min-height:0;}
.qr-side .f-scroll{max-height:none;}
.expiry{display:flex; align-items:center; gap:8px; font:600 13px var(--f-mono); color:var(--text-2);}
.expiry.low{color:var(--bad);}

/* claim prompt */
.claim{display:flex; flex-direction:column; gap:12px; flex:1 1 auto; min-height:0;}
.claim .who{font-size:clamp(15px, calc(var(--T) * 0.04), 19px); line-height:1.45; color:var(--text-2);}
.claim .who b{color:var(--text);}
.sas-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.sas{font:700 clamp(40px, calc(var(--T) * 0.14), 68px)/1 var(--f-mono); letter-spacing:.14em; color:var(--text); padding:10px 18px 10px 24px; border-radius:14px;
  background:var(--bg); border:2px solid var(--gold);}
.sas-q{font:600 clamp(15px, calc(var(--T) * 0.038), 18px)/1.35 var(--f-head); max-width:22ch;}
.claim .f-actions .btn{min-height:48px; padding:12px 22px; font-size:15.5px;}

/* sending */
.flow .filelist .fn .bar{height:6px;}

/* delivered */
.done-mark{display:inline-grid; place-items:center; width:1.4em; height:1.4em; border-radius:50%; background:var(--gold); color:var(--ink); font-size:.8em; margin-right:6px; vertical-align:.08em;}

/* ---------- screen 2 ---------- */
.screen-2{background:var(--bg-2); border-top:1px solid var(--rule);}
.screen-2 .wrap{padding-top:56px; padding-bottom:40px;}
.kicker{font:600 12.5px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ding-strong); margin-bottom:10px;}
.screen-2 h2{font-size:clamp(26px, 3vw, 36px); margin-bottom:26px;}
.steps{list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px;}
.steps li{background:var(--surface); border:1px solid var(--rule); border-radius:18px; padding:22px 22px 20px;}
.steps .n{font:700 13px var(--f-mono); color:var(--ink); background:var(--gold); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; margin-bottom:14px;}
.steps h3{font-size:19px; margin-bottom:6px;}
.steps p{color:var(--text-2); font-size:15px; line-height:1.55;}
.steps .snd{display:inline-block; margin-top:12px; font:600 12px var(--f-mono); letter-spacing:.06em; padding:3px 9px; border-radius:999px; border:1px solid var(--rule); color:var(--text-2);}
.family{margin-top:26px; color:var(--text-2); font-size:15px;}
.foot{background:var(--ink); color:var(--mist); text-align:center; font:13px var(--f-mono);}
.foot .wrap{padding-top:18px !important; padding-bottom:18px !important;}
.foot .bdname .d{color:#fff;}

/* ---------- phone visitor sheet ---------- */
.phone-sheet{position:fixed; left:0; right:0; bottom:0; z-index:60; padding:0 12px 12px;}
.ps-card{max-width:480px; margin:0 auto; background:var(--ink); color:#fff; border-radius:16px; padding:18px 20px 16px; box-shadow:0 10px 34px rgba(10,22,40,.45); border:1px solid rgba(232,169,77,.4);}
.ps-card h2{font-size:19px; margin-bottom:8px;}
.ps-card p{font-size:15px; line-height:1.5; color:#C7D3DF; margin-bottom:6px;}
.ps-card a{color:var(--drop-light);}
.ps-card .btn{width:100%; margin-top:10px; min-height:48px;}

/* ---------- narrow windows: stack, tile first ---------- */
@media (max-width:860px), (max-aspect-ratio:4/5){
  .wrap{padding:0 16px;}
  .nav-row{flex-wrap:wrap; gap:10px;}
  .nav .dir-switch{order:3; width:100%; margin-left:0;}
  .dir-switch a{flex:1;}
  body.desk{--T:min(340px, calc(100vw - 32px));}
  .wrap{max-width:none;}
  .hero{padding:18px 16px 12px; justify-content:flex-start;}
  .pair{grid-template-columns:minmax(0,1fr); gap:16px; width:min(560px, 100%); justify-items:center;}
  .card{width:100%; height:auto; min-height:0;}
  .face{position:relative; inset:auto; padding:22px 18px;}
  .intro h1{font-size:clamp(30px, 8.5vw, 42px);}
  body.flowing .tile{--T:min(200px, 52vw);}
  .qr-grid{grid-template-columns:minmax(0,1fr); gap:14px;}
  .qr-box{--qr:min(268px, calc(94vw - 78px)); justify-self:center;}
  body.flowing .tile-cap{font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; bottom:6px;}
  .steps{grid-template-columns:minmax(0,1fr);}
  .screen-2 .wrap{padding-top:40px;}
}
@media (max-height:620px) and (min-width:861px){
  .proto-line{margin-top:8px;}
}