/* ============================================================================
   theme-jade.css — THEME C · "Jade Paper 暖玉" · the CALM-PREMIUM look
   ----------------------------------------------------------------------------
   A refined evolution of the current warm identity: warm porcelain ground,
   deep jade primary, and a muted brass hairline as the quiet second accent.
   Display headings move to a serif stack (Georgia / Noto Serif CJK) for a
   premium wellbeing-brand voice; body stays in the calm system sans.
   Load AFTER tokens.css and base.css. LIGHT mode only — the existing
   :root[data-theme="dark"] block in tokens.css wins on the dark toggle
   (attribute selector beats bare :root), so dark keeps working untouched.
   ----------------------------------------------------------------------------
   WCAG AA (computed, relative-luminance method):
     --ink #26251f        on --bg #faf8f4        = 14.48 : 1  (≥7 ✓)
     --muted #5f6459      on --bg #faf8f4        =  5.73 : 1  (≥4.5 ✓)
     --btn-fg #ffffff     on --primary #1f6f5c   =  6.02 : 1  (≥4.5 ✓)
     --primary-ink #14574a on --primary-soft #e3efe9 = 7.14 : 1 (≥4.5 ✓)
     --faint #6b685a      on --raise #f4efe4     =  4.88 : 1  (≥4.5 ✓)
     (kept from the audited base: success-ink 6.06, attention-ink 5.11,
      white on --attention 5.13 — all AA)
   Brass (#b28e4c / #d9c692) is DECORATIVE ONLY — hairlines and rules,
   never text, so it carries no contrast requirement.
   ========================================================================== */

:root {
  /* ---- warm porcelain ground ---- */
  --bg:       #faf8f4;   /* porcelain */
  --surface:  #ffffff;
  --raise:    #f4efe4;   /* warm bone panels */
  --line:     #e8e1d2;   /* soft warm border */

  --ink:      #26251f;   /* deep warm ink — 14.48:1 on porcelain */
  --muted:    #5f6459;   /* sage-grey secondary — 5.73:1 */
  --faint:    #6b685a;   /* labels / meta — 4.88:1 on bone panels */

  /* ---- jade accent & warm semantics ---- */
  --primary:      #1f6f5c;  /* deep jade — trust without the corporate blue */
  --primary-soft: #e3efe9;  /* jade mist */
  --primary-ink:  #14574a;  /* text-on-soft — 7.14:1 */

  --success:       #3f7d5c;  /* sage (kept — audited) */
  --success-soft:  #e4f0e9;
  --success-ink:   #2f6247;
  --attention:     #96631a;  /* warm amber (kept — audited) */
  --attention-soft:#f9edd8;
  --attention-ink: #8a5a12;
  --danger:        #a8503c;  /* warm terracotta, staff-facing only */
  --focus:         #1f6f5c;
  --btn-fg:        #ffffff;

  /* ---- brass — the quiet second accent (hairlines only, never text) ---- */
  --gold:      #b28e4c;
  --gold-hair: #d9c692;

  /* ---- shape & depth — soft 12–14px radii, one warm whisper-shadow ---- */
  --r-sm: 12px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(84, 70, 42, .04), 0 10px 26px rgba(84, 70, 42, .07);

  /* ---- type — serif display voice + calm sans body (CJK first-class) ---- */
  --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;
  --font-display: Georgia, "Times New Roman", "Noto Serif TC", "Noto Serif SC",
                  "Songti TC", "Songti SC", "Noto Serif", serif;
}

/* ============================================================================
   TOPBAR — the brand moment: porcelain sheen over a brass hairline.
   ========================================================================== */
.topbar {
  background: linear-gradient(180deg, #ffffff 0%, #fbf8f2 100%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(178, 142, 76, .30),      /* the brass hairline */
              0 8px 24px rgba(84, 70, 42, .05);
}
.logo {
  border-radius: 11px;
  background: linear-gradient(150deg, #2a8a72, var(--primary) 55%, #14574a);
  box-shadow: 0 0 0 1px rgba(178, 142, 76, .45),    /* brass ring on the seal */
              0 2px 6px rgba(20, 87, 74, .25);
}
.topbar .ttl { font-family: var(--font-display); letter-spacing: .01em; }
.topbar .ttl small { font-family: var(--font-sans); }
.avatar { box-shadow: inset 0 0 0 1px rgba(31, 111, 92, .18); }
.envtag { border-color: var(--gold-hair); }

/* demo banner — quieter, gallery-plaque feel */
.demobar { border-bottom: 1px solid var(--gold-hair); }

/* ============================================================================
   NAVIGATION RAIL — bone panel, jade selection, soft hover
   ========================================================================== */
.rail { background: var(--raise); border-right: 1px solid var(--line); }
.rail a { transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.rail a.on { background: var(--primary-soft); color: var(--primary-ink);
             box-shadow: inset 3px 0 0 var(--primary); }
.bottomnav { box-shadow: 0 -1px 0 rgba(178, 142, 76, .22); }

/* ============================================================================
   TYPOGRAPHY — serif display voice for headings and section labels
   ========================================================================== */
h1.page {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 650;
  letter-spacing: .005em; color: var(--ink);
}
.sec h2 { font-family: var(--font-display); font-weight: 620; letter-spacing: .005em; }
.panel-h {
  font-family: var(--font-display);
  letter-spacing: .09em; font-weight: 600; font-size: var(--fs-xs);
}
p.lead { font-size: var(--fs-sm); }
.kid h1 { font-family: var(--font-display); }
.letterhead .lh-name { font-family: var(--font-display); }
.letterhead { border-bottom: 2px solid var(--gold); }   /* brass rule on the report sheet */
.report-summary { border-left-color: var(--gold); }

/* ============================================================================
   CARDS — brass top hairline + a touch more air (the premium tell)
   ========================================================================== */
.card {
  padding: 20px;
  border-top: 2px solid var(--gold-hair);
  box-shadow: var(--shadow);
}
@media (hover:hover) and (pointer:fine) {
  .card.click:hover { border-color: var(--primary); border-top-color: var(--gold); }
}
.tblwrap { border-top: 2px solid var(--gold-hair); }
.step { border-top: 2px solid var(--gold-hair); padding: 16px 18px; }
.kidcard { box-shadow: var(--shadow); }

/* stat cards — brass left bar when neutral; jade/sage/amber keep their meaning */
.statcard { padding: 18px 20px; border-top: 2px solid var(--gold-hair); }
.statcard::before { background: var(--gold-hair); }
.statcard.accent::before { background: var(--primary); }
.statcard.good::before   { background: var(--success); }
.statcard.warn::before   { background: var(--attention); }
.statcard .k { font-family: var(--font-display); font-weight: 650; letter-spacing: -.01em; }

/* ============================================================================
   BUTTONS — solid jade, soft depth, gentle hover deepen
   ========================================================================== */
.btn {
  border-radius: var(--r-sm);
  box-shadow: 0 1px 2px rgba(20, 87, 74, .18);
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease;
}
@media (hover:hover) and (pointer:fine) {
  .btn:hover { background: #1a5f4e; border-color: #1a5f4e;
               box-shadow: 0 2px 8px rgba(20, 87, 74, .22); }
  .btn.good:hover { background: #366c4f; border-color: #366c4f; }
  .btn.warn:hover { background: #855715; border-color: #855715; }
  .btn.ghost:hover { background: var(--primary-soft); border-color: var(--primary);
                     box-shadow: none; }
}
.btn.ghost { color: var(--primary-ink); box-shadow: none; }
.btn.good  { box-shadow: 0 1px 2px rgba(47, 98, 71, .18); }
.btn.warn  { box-shadow: 0 1px 2px rgba(138, 90, 18, .18); }
.backlink { color: var(--primary-ink); }

/* ============================================================================
   FORMS — porcelain fields, jade focus halo
   ========================================================================== */
input[type=text], input[type=search], textarea, select {
  border-radius: var(--r-sm);
  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 rgba(31, 111, 92, .14);
  outline: none;   /* the halo replaces it here; :focus-visible ring stays global */
}
.check input { accent-color: var(--primary); }

/* ============================================================================
   TABLES · TIMELINE · NOTICES — thin brass rules, jade voice
   ========================================================================== */
.tbl th { background: var(--raise); border-bottom: 1px solid var(--gold-hair); }
.ev .body { border-radius: var(--r-sm); }
.tl { border-left-color: var(--gold-hair); }
.notice { border-left-width: 3px; }
.ai { box-shadow: var(--shadow); }
.ai .lab { font-family: var(--font-display); letter-spacing: .09em; }
.alertbox { border-radius: var(--r-sm); }
.toast { background: #1e2a26; color: #f6f3ec; }   /* jade-black, warm porcelain text */

/* ============================================================================
   CHARTS — the SVGs read --primary/--success/--attention/--faint, so they
   inherit jade automatically; only the soft fills need a warm nudge.
   ========================================================================== */
.sparkfill { fill: var(--primary-soft); opacity: .8; }
.sparkline { stroke: var(--primary); }
.sparkdot  { fill: var(--primary-ink); }
.bartrack  { background: #efe9db; }
.sigbar    { background: #efe9db; }
.ring .track { stroke: #efe9db; }
.meter { background: #efe9db; }

/* ============================================================================
   STUDENT (KID) SURFACE — jade mist wash, same warmth, zero clinical chrome
   ========================================================================== */
.kid { background: linear-gradient(160deg, var(--primary-soft), var(--raise)); }
.kidcount .big { color: var(--primary); }
.sticker { background: var(--success-soft); }
.thumb { background: linear-gradient(135deg, var(--primary-soft), #f3ead6);
         color: var(--primary-ink); }

/* language switcher + theme toggle pick up the new tokens; just soften edges */
.langs { border-color: var(--line); }
.langs button.on { color: var(--primary-ink); }

/* pills — slightly airier, reads as a hand-set label */
.pill { padding: 4px 11px; letter-spacing: .01em; }
.prov-chip { border-color: var(--gold-hair); }

/* print keeps the jade seal + brass rule */
@media print {
  .letterhead { border-bottom-color: var(--gold); }
}