/**
 * AIU — Shared Design System (V.1.0)
 * ===================================
 * One stylesheet, both surfaces. The website and the mobile WebView load this
 * file, so a button, a card, or a choice-row looks identical on a phone in
 * Chengdu and a laptop in Milpitas. Surface-specific rules live in each app's
 * own small stylesheet; everything shared lives here.
 *
 * Constraints that shaped it (from the Operations Plan target market):
 *   - budget Android on slow networks → no web fonts, no framework, tiny file
 *   - Chinese + English → generous line-height, nothing sized to English words
 *   - accessibility → 48px targets, visible focus, reduced-motion honoured
 *
 * Palette carried forward from the existing AIU site so the rebuild reads as
 * an evolution, not a stranger: navy, emerald, amber on near-black.
 */

:root {
  /* Brand — from the existing site, systematised */
  --navy:        #0D2452;
  --navy-deep:   #0A0E1A;
  --emerald:     #10B981;
  --emerald-dim: #0E9E6E;
  --amber:       #F59E0B;
  --cyan:        #0891B2;

  /* Surfaces (light — the app runs light) */
  --bg:          #FFFFFF;
  --bg-alt:      #F5F7FA;
  --bg-sunk:     #EEF2F7;
  --ink:         #0F1B33;
  --ink-soft:    #55617A;
  --line:        #DCE2EC;

  /* Semantic */
  --primary:     var(--emerald);
  --primary-ink: #073B2A;
  --accent:      var(--amber);
  --danger:      #C4321F;
  --ok:          var(--emerald);

  /* Rhythm */
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px;
  --gap: 16px; --tap: 48px;
  --shadow: 0 1px 2px rgba(13,36,82,.06), 0 8px 24px rgba(13,36,82,.08);
  --shadow-lift: 0 2px 6px rgba(13,36,82,.10), 0 16px 40px rgba(13,36,82,.14);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", Roboto, system-ui, sans-serif;
  --font-display: "Cambria", Georgia, "Songti SC", var(--font);

  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font); color: var(--ink); background: var(--bg);
  font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* ── Type ─────────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: clamp(1.9rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 3.5vw, 2.1rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; font-family: var(--font); }
p  { margin: 0 0 1em; }
.lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.tiny  { font-size: .8rem; color: var(--ink-soft); }
.brand { color: var(--emerald); font-weight: 800; letter-spacing: .04em; }
.on-dark { color: #fff; } .on-dark .muted { color: #B9C4DA; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--tap); padding: 12px 22px;
  border: none; border-radius: var(--r-pill);
  font: 600 1rem/1 var(--font); cursor: pointer;
  background: var(--primary); color: var(--primary-ink);
  transition: transform .06s, box-shadow .15s, background .15s; text-decoration: none;
}
.btn:hover { box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: default; }
.btn--lg { min-height: 56px; padding: 16px 30px; font-size: 1.1rem; }
.btn--block { display: flex; width: 100%; }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--dark  { background: var(--navy); color: #fff; }
.btn--quiet { background: transparent; color: var(--ink-soft); min-height: 40px; padding: 8px 12px; }
.btn--danger{ background: transparent; color: var(--danger); border: 1.5px solid var(--line); }

/* ── THE NEXT-THREE CHOICE ROW — the signature component ──────────────────── */
/* Three cards, side by side on desktop, stacked on phones. The primary one is
   emphasised; an urgent one gets an amber flag. This is how every screen ends. */
.choices { display: grid; gap: 12px; margin-top: var(--gap); }
@media (min-width: 620px) { .choices { grid-template-columns: repeat(3, 1fr); } }

.choice {
  display: flex; flex-direction: column; gap: 6px;
  min-height: 92px; padding: 16px 18px; text-align: left;
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg); color: var(--ink);
  font: inherit; cursor: pointer; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .06s;
}
.choice:hover { border-color: var(--emerald); box-shadow: var(--shadow); }
.choice:active { transform: translateY(1px); }
.choice__row { display: flex; align-items: center; gap: 10px; }
.choice__icon { width: 26px; height: 26px; flex: none; stroke: var(--emerald); fill: none; stroke-width: 1.9; }
.choice__label { font-weight: 700; font-size: 1.02rem; }
.choice__desc  { font-size: .85rem; color: var(--ink-soft); line-height: 1.4; }
.choice__arrow { width: 20px; height: 20px; flex: none; margin-left: auto; opacity: .4;
  stroke: currentColor; fill: none; stroke-width: 1.9; }

/* The one most-likely action: filled, so the eye lands on it first. */
.choice--primary {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.choice--primary .choice__desc { color: #B9C4DA; }
.choice--primary .choice__icon { stroke: var(--emerald); }
.choice--primary:hover { border-color: var(--emerald); }

/* Needs attention: an amber edge, never a red alarm. */
.choice--urgent { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber) inset; }
.choice--urgent .choice__icon { stroke: var(--amber); }

/* The anchor: a slim, quiet full-width bar back to Home/Dashboard. */
.anchor {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; margin-top: 10px;
  border: none; background: transparent; color: var(--ink-soft);
  font: 600 .95rem var(--font); cursor: pointer; text-decoration: none;
}
.anchor:hover { color: var(--navy); }
.anchor svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; }

/* ── Cards / surfaces ─────────────────────────────────────────────────────── */
.card { padding: 20px; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--bg); }
.card--sunk { background: var(--bg-alt); border-color: transparent; }
.stat { font-family: var(--font-display); font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 800; color: var(--navy); line-height: 1; }
.stat--em { color: var(--emerald); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label { font-weight: 600; font-size: .95rem; }
.input {
  min-height: var(--tap); width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r);
  font: 1rem var(--font); background: var(--bg); color: var(--ink);
}
.input:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.input--code { font-size: 1.7rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--emerald); }

/* ── Banners ──────────────────────────────────────────────────────────────── */
.banner { padding: 12px 14px; border-radius: var(--r); font-size: .92rem; }
.banner--warn { background: #FFF6E5; color: #7A5A00; border: 1px solid #F0DCA8; }
.banner--err  { background: #FBEAE8; color: var(--danger); border: 1px solid #F0C3BE; }
.banner--ok   { background: #E7F6EF; color: var(--primary-ink); border: 1px solid #B6E3CE; }

/* ── Progress ─────────────────────────────────────────────────────────────── */
.bar { height: 8px; border-radius: 4px; background: var(--bg-sunk); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--emerald); transition: width .5s ease; }
.steps { display: flex; gap: 6px; }
.steps > i { flex: 1; height: 4px; border-radius: 2px; background: var(--bg-sunk); }
.steps > i.on { background: var(--emerald); }

/* ── Motion / loaders ─────────────────────────────────────────────────────── */
.spin { width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid rgba(13,36,82,.15); border-top-color: var(--emerald); animation: spin .7s linear infinite; }
.spin--light { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.dots span { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%;
  background: var(--ink-soft); animation: bob 1.2s infinite; }
.dots span:nth-child(2){animation-delay:.15s} .dots span:nth-child(3){animation-delay:.3s}
@keyframes bob { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-4px)} }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--gap); }
.wrap--narrow { max-width: 520px; }
.stack > * + * { margin-top: var(--gap); }
.stack-sm > * + * { margin-top: 8px; }
.row { display: flex; align-items: center; gap: 12px; }
.between { justify-content: space-between; }
.wrapflex { flex-wrap: wrap; }
.center { text-align: center; }
.grow { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }