/* Encor brand tokens — from Encor_Brand_Guideline_Final.pdf
   Palette: Oxford Blue, Falu Red, Strong Red, Amaranth, Snow Gray, White
   Type: Geologica (Bold = headings, Medium = subheadings), Verdana Regular = body */
@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600;700&display=swap");

:root {
  --oxford: #00283f;          /* Oxford Blue — brand guideline p.8-9: HEX 00283F, RGB 0,40,63 */
  --oxford-90: #2f4a60;   /* tints follow the 3-step Oxford ramp on guideline p.8 */
  --oxford-70: #4f6a82;
  --oxford-50: #7993a7;
  --oxford-30: #a9bac7;
  --oxford-10: #e6ebf0;
  --oxford-05: #f1f4f7;
  --falu: #81181b;
  --strong: #c40a2d;          /* primary action */
  --strong-hover: #a50826;
  --amaranth: #ea3347;
  --rose-10: #fdecee;
  --rose-20: #f9cdd3;
  --snow: #fcfcfc;
  --white: #ffffff;

  /* semantic */
  --bg: var(--snow);
  --surface: var(--white);
  --text: #00283f;
  --text-muted: #4a5f73;       /* >= 4.5:1 on white */
  --border: #d9e0e7;
  --border-strong: #b9c5d0;

  --ok: #11734b;     --ok-bg: #e5f4ec;
  --warn: #8a5a00;   --warn-bg: #fdf1d6;
  --bad: var(--strong); --bad-bg: var(--rose-10);
  --info: #1f5f99;   --info-bg: #e4eefa;

  --font-head: "Geologica", "Segoe UI", system-ui, sans-serif;
  --font-body: Verdana, "BT Verdana", Geneva, sans-serif;
  --cjk-sc: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --cjk-tc: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Source Han Sans TC", sans-serif;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px;
  --shadow-1: 0 1px 2px rgba(0,40,63,.06), 0 1px 3px rgba(0,40,63,.08);
  --shadow-2: 0 8px 24px rgba(0,40,63,.12);
  --ring: 0 0 0 3px rgba(196,10,45,.28);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; margin: 0; line-height: 1.2; }
h4, .sub { font-weight: 500; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--strong); }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: 14px; height: 14px; }
.icon.lg { width: 24px; height: 24px; }
.muted { color: var(--text-muted); }
.mono { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid transparent; font-family: var(--font-head); font-weight: 600; font-size: 14px; background: var(--strong); color: #fff; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); white-space: nowrap; }
.btn:hover { background: var(--strong-hover); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--oxford-10); color: var(--oxford-50); cursor: not-allowed; }
.btn.secondary { background: transparent; color: var(--oxford); border-color: var(--border-strong); }
.btn.secondary:hover { background: var(--oxford-05); border-color: var(--oxford-50); }
.btn.ghost { background: transparent; color: var(--oxford); }
.btn.ghost:hover { background: var(--oxford-05); }
.btn.navy { background: var(--oxford); } .btn.navy:hover { background: var(--oxford-90); }
.btn.sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn.icon-only { width: 36px; min-height: 36px; padding: 0; }

/* chips / badges */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; font-family: var(--font-head); background: var(--oxford-10); color: var(--oxford-90); white-space: nowrap; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--falu); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.pulse .dot { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* confidence */
.conf { --c: var(--ok); display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 12px; color: var(--c); }
.conf.med { --c: var(--warn); } .conf.low { --c: var(--bad); }
.conf .bar { width: 44px; height: 6px; border-radius: 99px; background: var(--oxford-10); overflow: hidden; }
.conf .bar > i { display: block; height: 100%; width: var(--w); background: var(--c); border-radius: 99px; }

/* inputs */
.field-input, .field-select, .field-textarea { width: 100%; min-height: 40px; padding: 8px 12px; border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: #fff; transition: border-color .15s, box-shadow .15s; }
.field-textarea { min-height: 72px; resize: vertical; }
.field-input:hover, .field-select:hover, .field-textarea:hover { border-color: var(--oxford-50); }
.field-input:focus, .field-select:focus, .field-textarea:focus { outline: none; border-color: var(--strong); box-shadow: var(--ring); }
.field-input[aria-invalid="true"], .field-select[aria-invalid="true"], .field-textarea[aria-invalid="true"] { border-color: var(--bad); background: var(--bad-bg); }
.err-msg { color: var(--falu); font-size: 12px; margin-top: 4px; display: flex; gap: 4px; align-items: center; }

/* toasts */
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 100; }
.toast { background: var(--oxford); color: #fff; padding: 12px 16px; border-radius: var(--r-md); box-shadow: var(--shadow-2); display: flex; gap: 10px; align-items: center; max-width: 360px; animation: toast-in .25s var(--ease); }
.toast.ok { background: var(--ok); } .toast.bad { background: var(--falu); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

/* brand motif: rounded-corner tile (top-left radius), used in the guideline's colour blocks */
.tile-corner { border-top-left-radius: 48px; }

.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Chinese UI: Geologica/Verdana have no CJK glyphs, so lead with system CJK faces (headings keep bold weight) */
html[lang="zh-CN"] { --font-head: "Geologica", var(--cjk-sc); --font-body: Verdana, var(--cjk-sc); }
html[lang="zh-TW"] { --font-head: "Geologica", var(--cjk-tc); --font-body: Verdana, var(--cjk-tc); }
html[lang^="zh"] body { line-height: 1.6; }
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3 { letter-spacing: 0; }
html[lang^="zh"] .grp > h3, html[lang^="zh"] .tbl th { letter-spacing: .02em; text-transform: none; }

/* language switch (EN / 简体 / 繁體) */
.lang { display: inline-flex; padding: 3px; border-radius: 99px; background: var(--oxford-10); gap: 2px; }
.lang button { border: 0; background: transparent; height: 26px; min-width: 38px; padding: 0 10px; border-radius: 99px; font: 600 12px var(--font-head); color: var(--oxford-90); }
.lang button:hover { background: rgba(0,40,63,.08); }
.lang button[aria-pressed="true"] { background: #fff; color: var(--oxford); box-shadow: var(--shadow-1); }
.lang.on-dark { background: rgba(255,255,255,.12); margin: 0 10px 12px; align-self: flex-start; }
.lang.on-dark button { color: #d6dfe7; } .lang.on-dark button:hover { background: rgba(255,255,255,.12); }
.lang.on-dark button[aria-pressed="true"] { background: #fff; color: var(--oxford); }