/* ─────────────────────────────────────────────────────────────────────────
   GENERATED — DO NOT EDIT.

   Copied from lib/quiet-upload.css by scripts/sync-quiet-upload.mjs. Editing
   this file is how the two upload pages drift apart again: the next sync
   overwrites it with no error and the change is gone. Change
   lib/quiet-upload.css and re-run the script.
   ───────────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════════════
   QUIET — Palette B-Purple, for the two CLIENT UPLOAD pages.

   Georgiy, 2026-10-31: *"can you change the design to match this
   https://infointake.stoicphysique.com"* — for labs.stoicphysique.com
   (lab-upload) and the gym photo upload (client-upload).

   ── WHY THIS FILE EXISTS AT ALL, RATHER THAN TWO <style> BLOCKS ───────────
   The two pages are near-identical siblings: same three steps, same drop
   zone, same file list, same success card. Their class lists differ by five
   names. Before this they each carried a PRIVATE copy of a beige/blue palette
   — so "make them match the intake" would have been two edits that have to
   stay in step for ever, which is how this repo grows four copies of one
   thing.

   One file, synced into each site by scripts/sync-quiet-upload.mjs the same
   way lib/ui-loading.js is, and a test that fails on a stale copy.

   ── THE TOKENS ARE DERIVED, NOT EYEBALLED ─────────────────────────────────
   Copied from ~/stoic-design-quiet/palettes.css `:root[data-palette="purple"]`
   — the same block intake-v2/quiet.css reads — so the three sites cannot
   drift to three slightly different purples. The contrast notes are that
   file's own measurements, kept because they are the reason the values are
   these and not the brighter #7b2fff the repos use elsewhere.

   ── LIGHT ONLY, ON PURPOSE ────────────────────────────────────────────────
   intake-v2/quiet.css pins every data-theme to the same values and declares
   `color-scheme:light`. These pages sit beside it in a client's hand, often
   one after the other, so they follow it. A dark variant here would mean the
   lab page and the intake disagree on the same phone.
   ════════════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --ground:#ffffff;
  --surface:#f6f5fa;   /* h252 s33% l97% — a tint, exempt from the dead-middle rule */
  --card:#ffffff;
  --ink:#1b191f;       /* h260 s11% l11% — 17.22:1 */
  --grey:#605a6c;      /* h260 s9%  l39% —  6.59:1 */
  --faint:#908a9e;     /* h258 s9%  l58% — DIVIDERS AND DOTS ONLY */
  --accent:#5a17c4;    /* h263 s79% l43% — 8.92:1; darker than #7b2fff so it works as TEXT */
  --divider:#e8e6ef;
  --accent-soft:#f1ecfd;
  --accent-line:#c9b8ee;
  --good:#3f5227;
  --alert:#8a3a1c;
  --alert-soft:#fbeeea;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:5px;
  color-scheme:light;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }

body{
  background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.43; letter-spacing:-.374px;
  -webkit-font-smoothing:antialiased;
  min-height:100svh; display:flex; flex-direction:column;
}

/* ── the bar ──────────────────────────────────────────────────────────────
   Quiet's bar is a wordmark and nothing else: no logo lockup, no nav. The
   progress rule under it is the only moving part. */
/* THE BAR CARRIES ITS OWN LAYOUT. The intake has a .bar-in because it holds
   a wordmark AND a step counter; these pages hold only the wordmark, so a
   second wrapper would be an element that exists to be empty. */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--ground);
  border-bottom:1px solid var(--divider)}
.wordmark{max-width:640px;margin:0 auto;padding:18px 20px;font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grey);white-space:nowrap}
/* The brand's dot is the one flash of accent in the bar, exactly as the
   wordmark renders it on the intake. */
.wordmark span{color:var(--accent)}

/* ── the column ───────────────────────────────────────────────────────── */
.main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:32px 20px 48px}
/* The steps' container. It holds no style of its own — it replaced an outer
   `.card` that used to box the whole flow, because the intake puts the
   heading on the white ground and keeps the panel for the question. Declared
   rather than left implicit so the next reader knows it is deliberate and not
   a class someone forgot to style. */
.flow{display:block}
.step{display:none}
.step.active{display:block;animation:rise .32s ease-out}
@keyframes rise{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.step.active{animation:none}}

/* THE EYEBROW is the intake's step marker: purple, uppercase, letterspaced.
   It is what makes a page read as part of the same set at a glance. */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
h1{font-size:clamp(30px,7vw,40px);font-weight:700;line-height:1.08;letter-spacing:-1.1px;margin:0 0 12px;text-wrap:balance}
/* `.highlight` wraps the second line of every heading on these pages. In the
   old design it was a blue accent; here it is the brand violet, which is the
   one place on the page the accent appears as large type. */
.highlight{color:var(--accent)}
.subtitle{color:var(--grey);font-size:16px;margin:0 0 26px;max-width:52ch;text-wrap:pretty}

/* ── cards and fields ─────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--divider);border-radius:var(--r);padding:20px 22px;margin-bottom:14px}
.field-label{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
input[type=text],input[type=email],input[type=tel]{
  width:100%;font:inherit;font-size:17px;color:var(--ink);
  background:var(--card);border:1px solid var(--divider);border-radius:var(--r);
  padding:14px 16px;min-height:52px}
input::placeholder{color:var(--faint)}
input:focus-visible,button:focus-visible,label:focus-visible,.drop-zone:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
input:focus{border-color:var(--accent-line);outline:none}

/* ── the drop zone ────────────────────────────────────────────────────── */
.drop-zone{position:relative;background:var(--surface);border:1.5px dashed var(--accent-line);
  border-radius:var(--r);padding:38px 22px;text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.drop-zone:hover,.drop-zone.dragover{background:var(--accent-soft);border-color:var(--accent)}
.drop-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
/* ── ONE ICON PER UPLOAD TYPE ─────────────────────────────────────────────
   Georgiy, 2026-10-31: *"an icon for the dexa and a different one for labs
   and a different one for the gym so they have some slight differences that
   are memorable... Just keep it looking professional and clean."*

   NOT EMOJI, which is what both pages used (📄 and 📷). An emoji is a
   different drawing on every phone, sits on its own baseline, and carries a
   colour nothing in the palette chose — three reasons it reads as unfinished
   next to type this deliberate.

   MASKS, NOT <img>. The glyph is a mask and the COLOUR comes from
   `background`, so every icon inherits the one accent token. A second purple
   cannot creep in, and the same file works if the palette ever moves.

   All three live HERE rather than in the two pages, for the same reason the
   palette does: lab-upload and client-upload are siblings, and an icon pasted
   into each is two drawings to keep in step. */
.ico{display:inline-block;width:24px;height:24px;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.ico-dexa{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8.5V6.5A2.5 2.5 0 0 1 6.5 4h2M15.5 4h2A2.5 2.5 0 0 1 20 6.5v2M20 15.5v2a2.5 2.5 0 0 1-2.5 2.5h-2M8.5 20h-2A2.5 2.5 0 0 1 4 17.5v-2'/><circle cx='12' cy='9.6' r='1.9'/><path d='M12 11.9v4.3M9.8 13.6h4.4'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8.5V6.5A2.5 2.5 0 0 1 6.5 4h2M15.5 4h2A2.5 2.5 0 0 1 20 6.5v2M20 15.5v2a2.5 2.5 0 0 1-2.5 2.5h-2M8.5 20h-2A2.5 2.5 0 0 1 4 17.5v-2'/><circle cx='12' cy='9.6' r='1.9'/><path d='M12 11.9v4.3M9.8 13.6h4.4'/></svg>")}
.ico-labs{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9.4 3.2h5.2M10.6 3.2v8.1L6.9 17.9a2.4 2.4 0 0 0 2.1 3.6h6a2.4 2.4 0 0 0 2.1-3.6l-3.7-6.6V3.2'/><path d='M8.3 15.4h7.4'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9.4 3.2h5.2M10.6 3.2v8.1L6.9 17.9a2.4 2.4 0 0 0 2.1 3.6h6a2.4 2.4 0 0 0 2.1-3.6l-3.7-6.6V3.2'/><path d='M8.3 15.4h7.4'/></svg>")}
.ico-gym{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.2 9.3v5.4M6.6 6.8v10.4M17.4 6.8v10.4M20.8 9.3v5.4M6.6 12h10.8'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M3.2 9.3v5.4M6.6 6.8v10.4M17.4 6.8v10.4M20.8 9.3v5.4M6.6 12h10.8'/></svg>")}

/* THE PAGE BADGE. A tinted square above the eyebrow — the one spot of colour
   before the heading, so the three pages are told apart at a glance before a
   word is read. */
.page-icon{display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent);margin-bottom:16px}
.page-icon .ico{width:25px;height:25px}

/* And the same glyph inside the drop zone, so the two halves of the page
   agree about what is being asked for. */
.drop-icon{display:flex;justify-content:center;margin-bottom:10px;color:var(--accent)}
.drop-icon .ico{width:30px;height:30px}
.drop-primary{font-size:17px;font-weight:600;margin-bottom:4px}
.drop-hint{font-size:14px;color:var(--grey)}

/* ── the file list ────────────────────────────────────────────────────────
   `.file-item` wraps a row and ITS OWN progress bar — the bar is per file,
   not a page-level step indicator. Styled from the markup in
   lab-upload/index.html rather than from the class name, which reads like a
   page bar and is not one. */
.file-list{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.file-item{background:var(--card);border:1px solid var(--divider);border-radius:var(--r);overflow:hidden}
.file-item-row{display:flex;align-items:center;gap:10px;padding:11px 13px;font-size:15px}
.file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* FOUR STATES, EACH ITS OWN COLOUR. A failed upload in the muted grey of
   "queued" is a file nobody chases; this page's whole job is files arriving. */
.file-status{font-size:13px;color:var(--grey);font-variant-numeric:tabular-nums;white-space:nowrap}
.file-status.uploading{color:var(--accent);font-weight:600}
.file-status.done{color:var(--good);font-weight:600}
.file-status.error{color:var(--alert);font-weight:600}
.progress-bar{height:2px;background:var(--divider);overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--accent);transition:width .3s ease}
.progress-fill.done{background:var(--good);width:100%}
@media (prefers-reduced-motion:reduce){.progress-fill{transition:none}}
.file-type-badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
/* THE TWO VARIANTS, DECLARED AS A PAIR. `.img` matched the base rule and so
   looked correct while being undeclared — which is how the pair later gets
   split by someone restyling `.pdf` and not finding its sibling. */
.file-type-badge.img{background:var(--accent-soft);color:var(--accent)}
.file-type-badge.pdf{background:var(--alert-soft);color:var(--alert)}
.remove-btn{font:inherit;font-size:19px;line-height:1;color:var(--faint);background:none;
  border:none;cursor:pointer;padding:2px 6px;border-radius:var(--r)}
.remove-btn:hover{color:var(--alert);background:var(--alert-soft)}

/* ── consent (lab work only) ──────────────────────────────────────────── */
.consent-box{display:flex;gap:12px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--divider);border-radius:var(--r);padding:15px 17px;margin-top:16px;cursor:pointer}
.consent-box input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;margin-top:1px;accent-color:var(--accent);cursor:pointer}
.consent-text{font-size:14.5px;color:var(--grey);line-height:1.5}

/* ── the one button ───────────────────────────────────────────────────── */
.btn{display:block;width:100%;font:inherit;font-size:16px;font-weight:700;
  background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:999px;
  padding:15px 22px;min-height:54px;margin-top:20px;cursor:pointer;transition:filter .15s}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.btn:disabled{background:var(--surface);color:var(--faint);border-color:var(--divider);cursor:not-allowed}

/* ── messages ─────────────────────────────────────────────────────────── */
.error-msg{display:none;background:var(--alert-soft);border:1px solid var(--alert);
  border-radius:var(--r);padding:12px 15px;margin-bottom:14px;font-size:14.5px;color:var(--alert);font-weight:600}
.error-msg.show{display:block}

/* ── the done step ────────────────────────────────────────────────────── */
.success-card{background:var(--surface);border:1px solid var(--divider);border-radius:var(--r);padding:34px 26px;text-align:center}
.success-icon{font-size:40px;line-height:1;margin-bottom:14px;color:var(--accent)}
.success-tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:5px 13px;margin-bottom:16px}

.footer{max-width:640px;margin:0 auto;padding:22px 20px 32px;color:var(--faint);font-size:13px;text-align:center}