/* Tinkhaven Transfer — web client.
   Same tokens as the design mockup, so the built thing and the drawn thing agree. */

:root {
  --ink:#171d29; --ink-2:#3d4657; --muted:#6e7889;
  --line:#e2e7ee; --line-soft:#eef1f6;
  --bg:#f2f4f8; --panel:#fff; --panel-2:#f7f9fc;
  --coral:#ee7e6d; --coral-ink:#cf4f39; --btn-fg:#fff;
  --seal:#0f766e; --seal-soft:rgba(15,118,110,.10);
  --bad:#b3261e;
  --shadow:0 12px 44px rgba(23,29,41,.10); --shadow-sm:0 2px 10px rgba(23,29,41,.06);
  --radius:14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#eef1f6; --ink-2:#c2cad7; --muted:#8d99ab;
    --line:#2b3341; --line-soft:#222936;
    --bg:#0e121a; --panel:#161c25; --panel-2:#1b222d;
    --coral:#f08e7e; --coral-ink:#f6a795; --btn-fg:#2a120c;
    --seal:#4fd1c5; --seal-soft:rgba(79,209,197,.13);
    --bad:#f2b8b5;
    --shadow:0 12px 44px rgba(0,0,0,.5); --shadow-sm:0 2px 10px rgba(0,0,0,.35);
  }
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
body {
  margin:0; min-height:100vh; background:var(--bg); color:var(--ink); line-height:1.6;
  font-family:"IBM Plex Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background-image:
    radial-gradient(900px 420px at 85% -10%, color-mix(in srgb, var(--coral) 20%, transparent), transparent 60%),
    radial-gradient(700px 400px at 0% 70%, color-mix(in srgb, var(--seal) 13%, transparent), transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3 { font-family:Archivo,ui-sans-serif,system-ui,sans-serif; margin:0; letter-spacing:-.018em; text-wrap:balance; }
p { margin:0; }
a { color:var(--coral-ink); }
:focus-visible { outline:2px solid var(--seal); outline-offset:2px; border-radius:6px; }
.mono { font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }

.shell { max-width:1060px; margin:0 auto; padding:22px 20px 60px; }
.top { display:flex; align-items:center; gap:10px; padding-bottom:26px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-family:Archivo,sans-serif; font-weight:700; font-size:1.02rem; color:var(--ink); text-decoration:none; }
.mark { width:26px; height:26px; }
.stage { display:grid; grid-template-columns:minmax(0,408px) minmax(0,1fr); gap:40px; align-items:start; }
@media (max-width:920px) { .stage { grid-template-columns:1fr; gap:28px; } }
.stage.solo { grid-template-columns:minmax(0,520px); justify-content:center; }

.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; display:flex; flex-direction:column; gap:16px; }
.panel-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.panel-head h2 { font-size:1.06rem; font-weight:600; }
.quota { font-size:.74rem; color:var(--muted); }
.bar { height:4px; border-radius:99px; background:var(--line-soft); overflow:hidden; }
.bar i { display:block; height:100%; width:0; background:var(--coral); border-radius:99px; transition:width .25s ease; }
.bar.seal i { background:var(--seal); }

.drop { border:1.5px dashed var(--line); border-radius:12px; background:var(--panel-2); padding:22px 16px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; transition:border-color .15s, background .15s; }
.drop.over { border-color:var(--seal); background:var(--seal-soft); }
.drop .plus { width:34px; height:34px; color:var(--coral); margin-bottom:4px; }
.drop b { font-weight:600; font-size:.95rem; }
.linky { background:none; border:0; padding:0; cursor:pointer; color:var(--coral-ink); font-size:.86rem; text-decoration:underline; text-underline-offset:2px; }

.files { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.files li { display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line-soft); }
.files li:last-child { border-bottom:0; }
.ftype { flex:none; width:30px; height:30px; border-radius:7px; background:var(--seal-soft); color:var(--seal); display:grid; place-items:center; font-family:"IBM Plex Mono",monospace; font-size:.56rem; font-weight:500; }
.fname { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.88rem; }
.fsize { flex:none; font-size:.76rem; color:var(--muted); }
.frm { flex:none; border:0; background:none; cursor:pointer; color:var(--muted); line-height:1; padding:2px 5px; border-radius:6px; }
.frm:hover { color:var(--coral-ink); background:var(--panel-2); }

.opts { display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--line-soft); padding-top:12px; }
.opt { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 0; }
.opt span { font-size:.87rem; color:var(--ink-2); }
.opt select { background:transparent; border:1px solid var(--line); border-radius:8px; padding:5px 8px; font-size:.82rem; color:inherit; cursor:pointer; }

.cta { border:0; cursor:pointer; background:var(--coral); color:var(--btn-fg); font-family:Archivo,sans-serif; font-weight:600; font-size:.98rem; padding:13px 18px; border-radius:10px; transition:background .15s, transform .1s; }
.cta:hover:not(:disabled) { background:var(--coral-ink); }
.cta:active:not(:disabled) { transform:translateY(1px); }
.cta:disabled { opacity:.55; cursor:default; }
.ghost { border:1px solid var(--line); background:transparent; color:var(--ink-2); cursor:pointer; padding:10px 14px; border-radius:10px; font-size:.87rem; font-weight:500; }
.ghost:hover { background:var(--panel-2); color:var(--ink); }
.row2 { display:grid; grid-template-columns:1fr auto; gap:8px; }
.fine { font-size:.77rem; color:var(--muted); line-height:1.5; }
.err { color:var(--bad); font-size:.85rem; }

.sealed { display:inline-flex; align-items:center; gap:6px; background:var(--seal-soft); color:var(--seal); border-radius:999px; padding:4px 10px; font-size:.74rem; font-weight:500; align-self:flex-start; }
.sealed svg { width:13px; height:13px; }

.pct { font-family:Archivo,sans-serif; font-weight:700; font-size:2.9rem; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.steps li { display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--muted); }
.steps .dot { width:16px; height:16px; flex:none; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; }
.steps li.done { color:var(--ink-2); }
.steps li.done .dot { border-color:var(--seal); background:var(--seal); }
.steps li.done .dot::after { content:""; width:5px; height:8px; border:solid var(--panel); border-width:0 1.7px 1.7px 0; transform:rotate(45deg) translate(-1px,-1px); }
.steps li.now { color:var(--ink); font-weight:500; }
.steps li.now .dot { border-color:var(--seal); box-shadow:0 0 0 3px var(--seal-soft); }
.telemetry { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:.74rem; color:var(--muted); }

.linkbox { border:1px solid var(--line); border-radius:11px; background:var(--panel-2); padding:12px 13px; word-break:break-all; font-size:.82rem; line-height:1.65; }
.linkbox .host { color:var(--ink-2); }
.linkbox .key { color:var(--seal); background:var(--seal-soft); border-radius:4px; padding:1px 2px; }
.keynote { display:flex; gap:8px; font-size:.76rem; color:var(--muted); line-height:1.5; }
.keynote .arrow { color:var(--seal); flex:none; }
.meta { display:flex; flex-direction:column; border-top:1px solid var(--line-soft); padding-top:10px; }
.meta div { display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:.83rem; }
.meta div span:first-child { color:var(--muted); }

.tell { display:flex; flex-direction:column; gap:22px; max-width:560px; }
.tell h1 { font-size:clamp(1.8rem,3.4vw,2.7rem); font-weight:700; line-height:1.05; }
.tell p { color:var(--ink-2); }
.claims { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.claims li { display:flex; gap:10px; font-size:.9rem; color:var(--ink-2); }
.claims .tick { color:var(--seal); flex:none; font-weight:700; }
.from { display:flex; align-items:center; gap:11px; }
.avatar { width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--coral); color:var(--btn-fg); }
.avatar svg { width:17px; height:17px; }
.hashes { font-size:.7rem; color:var(--muted); word-break:break-all; }

/* What is left of the launch allowance. Said out loud, because a limit you can see coming
   is a different thing from one you discover by being refused. */
.allowance { font-size:.8rem; color:var(--muted); margin-top:.6rem; }
.allowance.low { color:var(--bad); }