/*
 * The upload page's styles (W-421; UX review design/briefs/w421_upload_page_ux_wording_review.md section 3.2, L-1 to L-7).
 * The page loads no other file, so the few tokens it uses are copied here with their canonical names and values from
 * design-system/actvia-tokens.css v1.3 (tests/infra/test_w421_upload_page.py checks that none has drifted).
 * Type sizes are this page's own: the platform's 13px body is too small for this reader, and iOS zooms into
 * controls under 16px (UX-685). System fonts only; no web font.
 */
:root {
  --color-cyan: #00D4C8;
  --color-cyan-dk: #009E94;
  --color-amber: #F5A623;
  --color-amber-dim: rgba(245, 166, 35, 0.08);
  --color-amber-text: #996000;
  --color-success-dim: rgba(45, 158, 107, 0.08);
  --color-success-bdr: rgba(45, 158, 107, 0.24);
  --color-success-text: #1F7A52;
  --color-error: #C0614A;
  --color-error-dim: rgba(192, 97, 74, 0.08);
  --color-error-bdr: rgba(192, 97, 74, 0.24);
  --color-error-text: #B04F38;
  --color-bg: #F8FAFB;
  --color-white: #FFFFFF;
  --color-surface: #F0F4F8;
  --color-text: #0F1923;
  --color-text-2: #4A5568;
  --color-text-muted: #8A9AB0;
  --color-border: #D8E0E8;
  --color-border-2: #E8EEF4;
  --btn-primary-bg: var(--color-cyan);
  --btn-primary-color: #000000;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --ls-tight: -0.02em;
  --email-cta-min-height: 48px;
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }

body.up {
  --up-fs-body: 16px;
  --up-fs-small: 14px;
  --up-fs-h1: 24px;
  margin: 0;
  background: var(--color-bg);
  min-height: 100vh;
  font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--up-fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
}

.up-wrap { max-width: 560px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.up-brand { font-weight: var(--fw-bold); font-size: 18px; letter-spacing: var(--ls-tight); margin-bottom: var(--space-5); }
.up-brand sup, .up h1 sup, .up-foot sup, body.up h1 sup { font-size: 0.6em; }
body.up h1 { font-size: var(--up-fs-h1); line-height: var(--lh-tight); margin: 0 0 var(--space-3); }
body.up p { margin: 0 0 var(--space-3); }

.up-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-4); margin-bottom: var(--space-4); }
.up-expiry { font-size: var(--up-fs-small); color: var(--color-text-2); margin: 0; }
.up-warn { border-left: 3px solid var(--color-amber); background: var(--color-amber-dim); padding: var(--space-3); border-radius: var(--radius-md); margin-top: var(--space-3); font-size: var(--up-fs-small); }

.up-drop { border: 2px dashed var(--color-border); border-radius: var(--radius-xl); background: var(--color-white); padding: var(--space-6) var(--space-4); text-align: center; margin-bottom: var(--space-2); }
.up-drop .or { color: var(--color-text-2); font-size: var(--up-fs-small); margin: var(--space-2) 0; }
.up-nodrop #drop-label, .up-nodrop .or { display: none; }

.up-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--email-cta-min-height); padding: 0 var(--space-6); font: inherit; font-weight: var(--fw-semibold); background: var(--btn-primary-bg); color: var(--btn-primary-color); border: 0; border-radius: var(--radius-md); cursor: pointer; }
.up-btn.full { width: 100%; }
.up-btn:focus-visible, .up-retry:focus-visible { outline: 3px solid var(--color-text); outline-offset: 2px; }

.up-hint { font-size: var(--up-fs-small); color: var(--color-text-2); margin: var(--space-2) 0 var(--space-3); }
.up-keep { font-size: var(--up-fs-small); color: var(--color-text-2); margin-bottom: var(--space-4); }

.up-sum { border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.up-sum.ok { background: var(--color-success-dim); border: 1px solid var(--color-success-bdr); }
.up-sum.part { background: var(--color-error-dim); border: 1px solid var(--color-error-bdr); }
.up-sum p:last-child { margin-bottom: 0; }

.up-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.up-list:empty { display: none; }
.up-list li { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-2); }
.up-list li:last-child { border-bottom: 0; }
.up-name { font-weight: var(--fw-medium); word-break: break-word; }
.up-size { color: var(--color-text-2); font-weight: var(--fw-regular); }
.up-st { font-size: var(--up-fs-small); margin-top: 2px; color: var(--color-text-2); }
.up-st.done { color: var(--color-success-text); font-weight: var(--fw-semibold); }
.up-st.fail { color: var(--color-error-text); }
.up-st.chk { color: var(--color-amber-text); }
.up-bar { height: 6px; background: var(--color-surface); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.up-bar i { display: block; height: 100%; width: 0; background: var(--color-cyan-dk); }
.up-retry { font: inherit; font-size: var(--up-fs-small); font-weight: var(--fw-semibold); background: var(--color-white); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 4px 12px; margin-left: var(--space-2); min-height: 36px; cursor: pointer; }

.up-wrong { font-size: var(--up-fs-small); color: var(--color-text-2); margin-bottom: var(--space-5); }
.up-limits { font-size: var(--up-fs-small); color: var(--color-text-2); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.up-stop { background: var(--color-white); border: 1px solid var(--color-border); border-left: 4px solid var(--color-error); border-radius: var(--radius-lg); padding: var(--space-4); margin: var(--space-4) 0 var(--space-6); }
.up-stop.neutral { border-left-color: var(--color-text-muted); }
.up-stop p:last-child { margin-bottom: 0; }
.up-net { background: var(--color-error-dim); border: 1px solid var(--color-error-bdr); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); font-size: var(--up-fs-small); }
.up-foot { font-size: var(--up-fs-small); color: var(--color-text-2); border-top: 1px solid var(--color-border); margin-top: var(--space-5); padding-top: var(--space-4); }