/* ============================================================================
   theme-porcelain.css — "Porcelain 瓷白" · ENTERPRISE-CRISP THEME
   ----------------------------------------------------------------------------
   Load order: AFTER tokens.css and base.css. Light-mode focused; the existing
   explicit dark toggle (:root[data-theme="dark"]) is untouched and still wins
   because every component override below consumes tokens, never raw colours.

   The look: pure-white surfaces floating on a faint cool-gray canvas; ONE
   decisive cobalt accent (#1d4fd8); hairline 1px borders carry all structure
   (shadows nearly eliminated); compact 8/10/12px radii; tabular numerals
   everywhere; uppercase micro-labels with generous letter-spacing on section
   headers. Dense, exact, businesslike — Stripe-dashboard energy, kept calm.

   Contrast (WCAG, computed): ink/bg 15.87:1 · muted/bg 7.09:1 ·
   btn-fg/primary 6.64:1 · primary-ink/primary-soft 8.20:1 ·
   faint/raise 5.45:1 · white/success 5.32:1 · white/attention 5.21:1.
   ========================================================================== */

/* ---------- 1 · TOKENS — the porcelain palette ---------- */
:root {
  /* cool ground: white porcelain on faint gray felt */
  --bg:       #f7f8fa;   /* faint cool-gray canvas */
  --surface:  #ffffff;   /* pure white porcelain */
  --raise:    #f1f3f7;   /* recessed cool panel */
  --line:     #e4e7ec;   /* the hairline — it does the work shadows used to */

  --ink:      #191d26;   /* near-black cool charcoal — 15.87:1 on bg */
  --muted:    #4b5565;   /* secondary text — 7.09:1 on bg */
  --faint:    #5a6373;   /* micro-labels / meta — 5.45:1 on raise */

  /* ONE accent: decisive cobalt */
  --primary:      #1d4fd8;
  --primary-soft: #e9eefc;
  --primary-ink:  #173aa8;   /* 8.20:1 on primary-soft */

  --success:       #1e7a4e;  /* cool pine — 5.32:1 with white */
  --success-soft:  #e3f2ea;
  --success-ink:   #166a42;  /* 5.72:1 on success-soft */
  --attention:     #95620f;  /* precise amber — 5.21:1 with white */
  --attention-soft:#faf0dc;
  --attention-ink: #82550c;  /* 5.70:1 on attention-soft */
  --danger:        #b3362b;
  --focus:         #1d4fd8;
  --btn-fg:        #ffffff;  /* 6.64:1 on cobalt */

  /* compact, consistent radii + one whisper shadow (borders carry depth) */
  --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);

  /* system stack, CJK fallbacks retained (tender MUST) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "PingFang TC", "PingFang SC", "Noto Sans TC", "Noto Sans SC",
               "Noto Sans", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}

/* ---------- 2 · GLOBAL — exact numerals, crisp rendering ---------- */
body {
  font-variant-numeric: tabular-nums;      /* every figure lines up */
  -webkit-font-smoothing: antialiased;
}

/* ---------- 3 · TOPBAR — white, hairline, strong cobalt logo block ---------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.logo {
  background: var(--primary);              /* solid block, no gradient — decisive */
  border-radius: var(--r-sm);
  font-weight: 800;
  letter-spacing: -.02em;
}
.topbar .ttl { font-weight: 650; letter-spacing: -.01em; }
.topbar .ttl small { letter-spacing: .02em; }
.avatar {
  background: var(--primary-soft);
  color: var(--primary-ink);
  border: 1px solid var(--line);
}
.envtag { border-style: solid; background: var(--raise); }

/* ---------- 4 · RAIL — canvas-toned, cobalt active indicator ---------- */
.rail { background: var(--bg); border-right: 1px solid var(--line); }
.rail a { border-radius: var(--r-sm); }
.rail a.on {
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--primary);   /* crisp left tick, zero layout shift */
}
.rail a:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.bottomnav { box-shadow: 0 -1px 0 var(--line); }

/* ---------- 5 · TYPOGRAPHY — uppercase micro-labels carry hierarchy ---------- */
h1.page { font-weight: 700; letter-spacing: -.02em; }
p.lead { color: var(--muted); }
/* section headers become Stripe-style micro-labels: small caps, tracked wide */
.sec h2 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 700;
  color: var(--faint);
}
.panel-h { letter-spacing: .09em; font-weight: 700; }
.rolegroup { letter-spacing: .09em; }
.tbl th { letter-spacing: .08em; font-weight: 600; background: var(--raise); }
.statcard .l { letter-spacing: .08em; }

/* ---------- 6 · CARDS & PANELS — hairlines instead of shadows ---------- */
.card, .statcard, .step {
  box-shadow: none;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
@media (hover:hover) and (pointer:fine) {
  .card.click:hover { border-color: var(--primary); box-shadow: 0 1px 2px rgba(16,24,40,.06); }
}
.tblwrap { box-shadow: none; border: 1px solid var(--line); border-radius: var(--r-md); }
.tbl th, .tbl td { padding: 10px 14px; }     /* a touch denser — businesslike */
.kidcard, .kidcount { border: 1px solid var(--line); box-shadow: var(--shadow); }
.statcard::before { width: 3px; }            /* keep the accent spine, hairline-thin */

/* ---------- 7 · BUTTONS — solid cobalt, crisp 8px, darken on hover ---------- */
.btn {
  border-radius: var(--r-sm);
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: none;
  transition: transform var(--dur-press) var(--ease-out),
              filter var(--dur-fast) ease,
              background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease;
}
@media (hover:hover) and (pointer:fine) {
  .btn:hover { filter: brightness(.92); }    /* subtle darken; theme-safe (works on dark tokens too) */
  .btn.ghost:hover { filter: none; background: var(--raise); border-color: var(--muted); }
}
.btn.ghost { background: var(--surface); color: var(--primary-ink); border-color: var(--line); }
.backlink { color: var(--primary-ink); font-weight: 600; }

/* ---------- 8 · FORMS — quiet fields, cobalt focus ring ---------- */
input[type=text], input[type=search], textarea, select {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
input[type=text]:focus, input[type=search]:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
  outline: none;                              /* ring replaces outline here; :focus-visible global ring remains elsewhere */
}
.check input { accent-color: var(--primary); }

/* ---------- 9 · PILLS, TAGS, CHIPS — hairline-edged, exact ---------- */
.pill { font-weight: 600; letter-spacing: .01em; }
.pill.ok   { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success-ink) 22%, transparent); }
.pill.warn { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--attention-ink) 22%, transparent); }
.pill.info { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-ink) 22%, transparent); }
.pill.prov { border-style: solid; }
.tag { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-ink) 22%, transparent); }
.prov-chip { background: var(--surface); }

/* ---------- 10 · NOTICES, ALERTS, AI — flat fills, cobalt spine ---------- */
.notice { border-radius: var(--r-sm); border-left-width: 3px; }
.alertbox { border-radius: var(--r-sm); }
.ai { border: 1px solid var(--primary); border-radius: var(--r-md); }
.ai .lab { letter-spacing: .09em; }
.demobar { letter-spacing: .01em; }

/* ---------- 11 · DATA VIZ — cobalt-led, exact numerals ---------- */
.statcard .k { letter-spacing: -.02em; }
.bartrack, .sigbar, .meter { background: var(--raise); }
.sparkfill { opacity: .55; }                 /* lighter wash under the cobalt line */
.legend .sw { border-radius: 2px; }          /* square-ish swatches — precise */
.kidcount .big { color: var(--primary); }

/* ---------- 12 · TIMELINE & REPORT — hairline discipline ---------- */
.ev .body { border-radius: var(--r-sm); box-shadow: none; }
.letterhead .lh-mark { border-radius: var(--r-sm); background: var(--primary); }
.report-summary { border-left: 3px solid var(--primary); }

/* ---------- 13 · TOPBAR CONTROLS & TOAST ---------- */
.langs { background: var(--raise); border: 1px solid var(--line); }
.langs button.on { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.themebtn { border: 1px solid var(--line); background: var(--surface); }
.toast {
  border-radius: var(--r-sm);                /* crisp corner, not a pill */
  box-shadow: 0 4px 12px rgba(16, 24, 40, .12);
}

/* ---------- 14 · KID SURFACE — porcelain-cool but still soft-cornered ---------- */
.kid { border: 1px solid var(--line); }      /* the gradient reads cool via the new tokens */
.sticker { border: 1px solid var(--line); }

/* end theme-porcelain.css */