/* ============================================================
   styles.css — SURFACE-ONLY CSS for the Franklin County portal.
   Layout, the canvas, the login card, the vault column, and the
   ONE bespoke component (the upload card). No buttons, no inputs,
   no toasts — those are kit components (app/kit/…). Every colour
   here is a token or a recipe ported verbatim from the locked
   Discovery frames (reference/discovery-frames.html); nothing is
   invented.
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0 }
[hidden]{ display:none !important; }   /* survives display:flex on the same element */

/* ---------- 1 · canvas ----------
   Locked Surface-Studio look: bare --bg navy + the OVERHEAD light
   pool (frames :62-65) — one soft pool falling from top-centre,
   a faint cool steel lift off the bottom edge. Content sits above
   it on its own layer. */
body{ background:var(--bg); color:var(--text); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; min-height:100vh; }
body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1250px 760px at 50% -10%, color-mix(in srgb, var(--h-500) 15%, transparent), transparent 60%),
    radial-gradient(760px 520px at 50% 118%,  color-mix(in srgb, var(--neutral) 6%, transparent), transparent 58%); }

/* ---------- 2 · ported frame idioms ---------- */

/* account-card glass (frames .card :362-368) — MODELED glass, no
   backdrop-filter (the locked flicker fix). All values are the
   --card-glass* tokens. */
.card{ position:relative;
  background:
    linear-gradient(180deg, var(--card-glass-sheen), transparent 55%),
    color-mix(in srgb, var(--card-glass) var(--card-glass-fill), transparent);
  border:1px solid var(--card-glass-line); border-radius:var(--r);
  box-shadow:var(--shadow-sm), inset 0 1px 0 var(--card-glass-top); }

/* micro-label eyebrow (the frames .crumb recipe :297-298, static) */
.eyebrow{ font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-dim); }

/* field micro-label (frames .lab :405 — Michael's locked recipe) */
.lab{ display:block; font-size:11px; letter-spacing:0; color:var(--text); font-weight:600;
  margin-bottom:5px; }

.hint{ font-size:11.5px; color:var(--text-dim); }

/* the gold role pill (frames .chip-active/.who__role :307-309 — one recipe) */
.chip-role{ font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--r-pill); white-space:nowrap;
  background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent-text);
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); }

/* identity chip (frames .who :117-126, minus the topbar positioning) */
.who{ display:inline-flex; align-items:center; gap:10px; flex-shrink:0;
  padding:4px 12px 4px 4px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--text-strong) 3%, transparent);
  border:1px solid color-mix(in srgb, var(--text-strong) 8%, transparent); }
.who__av{ width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-strong));
  color:var(--on-accent); display:grid; place-items:center; font-size:11px; font-weight:700; }
.who__name{ font-size:13px; font-weight:500; color:var(--text-strong); white-space:nowrap; }

/* the glass app-icon squircle (frames .rail__mark :172-176). Halo hosts:
   `class="acn-halo mark"` — position:relative + border-radius:inherit are
   what the kit ring reads. */
.mark{ position:relative; width:40px; height:40px; flex:0 0 auto; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(160deg, color-mix(in srgb, var(--surface-2) 84%, #fff), var(--surface));
  box-shadow:0 3px 10px color-mix(in srgb, black 40%, transparent),
             inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent); }
.mark img{ width:27px; height:27px; object-fit:contain; display:block;
  filter:drop-shadow(0 1px 3px color-mix(in srgb, black 34%, transparent)); }
.mark--lg{ width:64px; height:64px; border-radius:var(--r-lg); }
.mark--lg img{ width:43px; height:43px; }

/* page head (frames .page-head :294-310; left side becomes mark + text) */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:26px; }
.page-head__l{ display:flex; align-items:center; gap:16px; min-width:0; }
.page-head__name{ font-family:var(--font-display); font-size:30px; line-height:1.1;
  font-weight:600; letter-spacing:-.02em; color:var(--text-strong); margin:2px 0 4px; }
.page-head__meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:13px; color:var(--text); }
.page-head__meta .sep{ width:3px; height:3px; border-radius:50%; background:var(--text-dim); }
.page-head__r{ display:flex; align-items:center; gap:12px; flex-shrink:0; }

/* the trust line — lock glyph + "Encrypted · private to Franklin County" */
.assure{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); }
.assure svg{ width:13px; height:13px; fill:currentColor; flex:0 0 auto; }

/* ---------- 3 · login ---------- */
.login{ position:relative; z-index:1; min-height:100vh; display:grid; place-items:center;
  padding:24px; }
.login__card{ width:min(432px, 100%); padding:38px 34px 30px;
  display:flex; flex-direction:column; align-items:center; text-align:center; }
.login__mark{ margin-bottom:20px; }
.login__card .eyebrow{ margin-bottom:10px; }
.login__card .page-head__name{ margin:0; font-size:24px; }  /* --t-2xl step: one line at this card width */
.login__welcome{ font-size:13px; color:var(--text); margin-top:8px; }
.login__form{ width:100%; margin-top:26px; display:flex; flex-direction:column; gap:14px;
  text-align:left; }
.login__form .acn-inp{ width:100%; }
.login__err{ font-size:12px; color:var(--bad); min-height:15px; }  /* reserved slot — no reflow when the error lands */
.login__act{ margin-top:6px; }
.login__act .acn-act-btn{ width:100%; justify-content:center; }
.login__card .assure{ margin-top:24px; }

/* ---------- 4 · the upload card (THE bespoke component) ----------
   The 21st.dev drag-drop card rebuilt on the kit: modeled navy glass
   (.card recipe), gold only on the active drop state, kit radii and
   easing throughout. The drop zone doubles as the halo host while a
   drag is over it (JS adds `acn-halo is-drag`). */
.upcard{ padding:20px 20px 18px; }
.upcard__head{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.upcard__badge svg{ width:22px; height:22px; fill:var(--text-strong); }
.upcard__title{ font-family:var(--font-display); font-size:17px; font-weight:600;
  letter-spacing:-.01em; color:var(--text-strong); }
.upcard__sub{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }

.upcard__zone{ position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; padding:34px 24px 28px; cursor:pointer;
  border:1px dashed var(--border-strong); border-radius:var(--r-lg);
  transition:border-color .25s var(--ease), background-color .25s var(--ease); }
.upcard__zone:hover{ border-color:var(--accent); }
.upcard__zone:focus-visible{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring); }
.upcard__cloud{ width:34px; height:34px; fill:var(--text-dim);
  transition:fill .2s var(--ease), transform .3s var(--ease-spring); }
.upcard__cta{ font-size:14px; font-weight:500; color:var(--text-strong); }
/* active drop — gold, plus the kit live-wire (`acn-halo` is toggled on the
   zone by JS only while a drag is over it, so the sweep is the drop signal) */
.upcard__zone.is-drag{ border-color:var(--accent); background:var(--accent-soft); }
.upcard__zone.is-drag .upcard__cloud{ fill:var(--accent-text); transform:translateY(-3px); }
.upcard__zone.is-drag .upcard__cta{ color:var(--accent-text); }

.upcard__queue{ list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.upcard__queue:empty{ display:none; margin:0; }
.upcard__queue .filerow{ position:relative; background:color-mix(in srgb, var(--surface-2) 45%, transparent);
  border-radius:var(--r-sm); padding:9px 10px; }

/* upload progress — the gold live-wire fills along the row's bottom edge
   while bytes move (same gradient family as the navpill thumb/railmark) */
.filerow__bar{ position:absolute; left:10px; right:10px; bottom:2px; height:3px;
  border-radius:var(--r-pill); overflow:hidden; opacity:0;
  background:color-mix(in srgb, var(--text-strong) 8%, transparent);
  transition:opacity .2s var(--ease); }
.filerow.is-uploading .filerow__bar{ opacity:1; }
.filerow__bar-fill{ display:block; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg, var(--accent-strong), var(--accent) 55%, var(--accent-hi));
  box-shadow:0 0 8px color-mix(in srgb, var(--accent) 55%, transparent);
  transition:width .25s var(--ease); }
.upcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:16px; }

/* ---------- 5 · file rows + list sections ---------- */
.filerow{ display:flex; align-items:center; gap:12px; }
.filelist .filerow{ padding:12px 14px; }   /* list rows also carry .card (glass) */
.filechip{ width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:var(--r-sm);
  background:linear-gradient(160deg, color-mix(in srgb, var(--surface-2) 84%, #fff), var(--surface));
  box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
  font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.06em;
  color:var(--text); }
.filerow__main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.filerow__name{ font-size:13px; font-weight:500; color:var(--text-strong);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.filerow__meta{ font-family:var(--font-mono); font-size:12px; font-weight:600;
  color:var(--text-dim); }
.filerow__state{ font-size:11.5px; color:var(--text-dim); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.filerow__state.is-done{ color:var(--good); }
.filerow__state.is-bad{ color:var(--bad); }
.filerow__acts{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }

.vault{ position:relative; z-index:1; max-width:860px; margin:0 auto; padding:38px 24px 90px; }
.vault__list{ margin-top:30px; }
.vault__listhead{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.vault__listhead h2{ font-family:var(--font-display); font-size:17px; font-weight:600;
  letter-spacing:-.01em; color:var(--text-strong); }
.vault__count{ font-family:var(--font-mono); font-size:12px; font-weight:600;
  color:var(--text-dim); }
.filelist{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.empty{ font-size:12.5px; color:var(--text-dim); padding:18px 16px;
  border:1px dashed var(--border); border-radius:var(--r); }

/* ---------- 6 · reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .upcard__zone, .upcard__cloud{ transition:none; }
  .upcard__zone.is-drag .upcard__cloud{ transform:none; }
}