/* ============================================================================
   theme-sky.css — THEME D · "Sky Studio 青空" · the FRIENDLY-PRODUCT look
   ----------------------------------------------------------------------------
   Loaded AFTER tokens.css + base.css. Modern-edtech restyle for the JC SEN
   Student Portfolio Platform: cool-white ground, one vivid-but-tasteful
   sky-blue accent, a warm coral reserved EXCLUSIVELY for the "attention"
   role (alerts, needs-a-look, demo banner), pill buttons, large friendly
   radii, chunky readable type. Energetic and product-grade — never childish,
   never clinical.
   RULES HONOURED:
   - Light mode only here; the explicit dark toggle (`:root[data-theme="dark"]`)
     is left completely untouched — every component override below is written
     in var() terms so it re-skins itself when the dark tokens swap in.
   - WCAG AA verified (computed, not guessed — ratios in the delivery note):
       ink/bg 13.70 · muted/bg 6.11 · btn-fg/primary 4.82 ·
       primary-ink/primary-soft 5.97 · faint/raise 5.00
   - System font stacks only, CJK fallbacks retained. No imports, no CDN.
   - No layout mechanics touched; touch targets stay ≥44px; motion stays
     gentle and rides the existing reduced-motion kill switch in base.css.
   ========================================================================== */

:root {
  /* ---- cool-white sky ground ---- */
  --bg:       #f5f9fd;   /* cool white with a whisper of sky */
  --surface:  #ffffff;
  --raise:    #eaf2fa;   /* light sky panels */
  --line:     #dbe6f1;   /* cool hairline */

  --ink:      #142b40;   /* deep slate-navy text — 13.70:1 on --bg */
  --muted:    #46617a;   /* secondary text — 6.11:1 on --bg */
  --faint:    #4e6a84;   /* labels / meta — 5.00:1 on --raise, 5.65:1 on white */

  /* ---- ONE accent story: vivid sky blue + coral kept to the attention role ---- */
  --primary:      #0b74c9;  /* vivid, tasteful sky blue — 4.82:1 under white */
  --primary-soft: #dceeff;  /* duotone chip ground */
  --primary-ink:  #0a5a9e;  /* text-on-soft — 5.97:1 on --primary-soft */

  --success:       #147a52;  /* fresh leaf green — 5.34:1 under white */
  --success-soft:  #ddf2e7;
  --success-ink:   #0f6644;  /* 5.97:1 on --success-soft */
  --attention:     #c14a33;  /* WARM CORAL — the single secondary accent,
                                used sparingly: alerts/"needs a look" only.
                                4.89:1 under white (buttons stay AA). */
  --attention-soft:#fde8e2;  /* peach wash for coral chips/banners */
  --attention-ink: #a83c26;  /* 5.34:1 on --attention-soft */
  --danger:        #b02e18;  /* staff-facing critical only */
  --focus:         #0b74c9;  /* keyboard focus ring rides the sky blue */
  --btn-fg:        #ffffff;

  /* ---- friendly geometry: big soft radii, one cool shadow language ---- */
  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(13, 51, 92, .05), 0 8px 24px rgba(13, 51, 92, .07);

  /* ---- chunky readable type (system stack, CJK fallbacks retained) ---- */
  --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;
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 20px; --fs-xl: 27px;
}

/* ============================ TOPBAR — brand moment ======================= */
/* A very light sky tint fading to the surface, with a blue-kissed hairline.
   Written in var() terms so the dark toggle keeps a coherent dark topbar. */
.topbar {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--primary-soft) 55%, var(--surface)),
              var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
}
.logo {                                  /* rounded logo chip, soft sky ring */
  border-radius: 12px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}
.topbar .ttl { font-weight: 740; letter-spacing: -.01em; }
.avatar {
  background: linear-gradient(150deg, var(--primary-soft),
              color-mix(in srgb, var(--primary) 22%, var(--primary-soft)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent);
}
.envtag { background: var(--surface); }

/* Demo banner — coral duotone, gentle (the coral's ONE editorial job). */
.demobar { border-bottom: 1px solid color-mix(in srgb, var(--attention) 18%, var(--line)); }

/* ============================ NAV RAIL ==================================== */
.rail { background: color-mix(in srgb, var(--raise) 70%, var(--surface)); }
.rail a { border-radius: var(--r-pill); font-weight: 550; }
.rail a.on {
  background: var(--primary-soft); color: var(--primary-ink); font-weight: 680;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
}
.rail a:hover { background: var(--surface); box-shadow: var(--shadow); }
.bottomnav a { border-radius: var(--r-md); }

/* ============================ TYPOGRAPHY ================================== */
h1.page { font-weight: 760; letter-spacing: -.02em; }
.sec h2 { font-weight: 720; letter-spacing: -.015em; }
p.lead { font-size: var(--fs-base); }             /* friendlier intro line */
.panel-h { letter-spacing: .08em; font-weight: 680; }

/* ============================ CARDS & PANELS ============================== */
.card, .step { border-radius: var(--r-lg); border-color: var(--line); }
.card.click { transition: border-color var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease,
              transform var(--dur-press) var(--ease-out); }
@media (hover:hover) and (pointer:fine) {
  .card.click:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
    box-shadow: 0 2px 4px rgba(13,51,92,.06), 0 12px 32px rgba(13,51,92,.10);
    transform: translateY(-2px);
  }
}
.card .nm { font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.01em; }

/* Stat cards: the edge stripe becomes a rounded accent tab. */
.statcard { border-radius: var(--r-lg); }
.statcard::before { width: 5px; border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.statcard .k { font-weight: 780; font-size: 32px; letter-spacing: -.03em; }
.statcard .l { font-weight: 640; letter-spacing: .06em; }
.statcard .ic { opacity: .8; }

/* ============================ BUTTONS — pills ============================= */
.btn {
  border-radius: var(--r-pill);
  padding: 9px 20px;
  font-weight: 660;
  box-shadow: 0 1px 2px rgba(13,51,92,.10);
  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,
              box-shadow var(--dur-fast) ease;
}
@media (hover:hover) and (pointer:fine) {
  .btn:hover { filter: brightness(.94); }         /* darkens → contrast only improves */
  .btn.ghost:hover { filter: none;
    border-color: color-mix(in srgb, var(--primary) 40%, var(--line));
    background: color-mix(in srgb, var(--primary-soft) 40%, var(--surface)); }
}
.btn.ghost { box-shadow: none; font-weight: 640; }
.btn.sm { padding: 6px 14px; }
.backlink { font-weight: 620; }

/* ============================ PILLS & CHIPS — playful duotone ============= */
.pill, .tag, .prov-chip {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
  font-weight: 660;
}
.pill.prov { box-shadow: none; }                  /* keeps its dashed border look */
.sticker { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 25%, transparent); }

/* ============================ FORMS ======================================= */
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 color-mix(in srgb, var(--primary) 15%, transparent);
}
.searchbar input[type=search] { border-radius: var(--r-pill); padding-left: 16px; }
.check input { accent-color: var(--primary); }

/* ============================ TABLES ====================================== */
.tblwrap { border-radius: var(--r-md); }
.tbl th { background: color-mix(in srgb, var(--raise) 75%, var(--surface));
          font-weight: 700; letter-spacing: .06em; }
@media (hover:hover) and (pointer:fine) {
  .tbl tbody tr:hover td { background: color-mix(in srgb, var(--primary-soft) 30%, transparent); }
}

/* ============================ TIMELINE / EVIDENCE ========================= */
.ev .body { border-radius: var(--r-md); }
.ev::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.ev.video::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--attention) 12%, transparent); }
.ev.note::before, .ev.observation::before
  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 12%, transparent); }

/* ============================ ALERTS / NOTICES / AI ======================= */
.alertbox { border-radius: var(--r-md);
  border-color: color-mix(in srgb, var(--attention) 20%, var(--line)); }
.notice { border-radius: var(--r-md); border-color: transparent; }
.ai { border-radius: var(--r-lg);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
  background: linear-gradient(165deg, var(--primary-soft),
              color-mix(in srgb, var(--primary-soft) 45%, var(--surface))); }
.ai .lab { letter-spacing: .08em; }

/* ============================ CHARTS — bright, harmonious ================= */
/* SVG charts consume --primary / --success / --attention / --faint, so the
   sky-blue + leaf + coral trio carries through automatically. Extra polish: */
.sparkline { stroke-width: 2.5; }
.sparkfill { opacity: .55; }
.bartrack, .sigbar, .meter { background: color-mix(in srgb, var(--raise) 80%, var(--surface)); }
.sigbar { border-color: transparent; }
.donut .ctr, .ring .num { font-weight: 780; }

/* ============================ KID SURFACE ================================= */
.kid { background: linear-gradient(160deg, var(--primary-soft),
       color-mix(in srgb, var(--primary-soft) 30%, var(--surface))); }
.kid h1 { font-weight: 780; letter-spacing: -.02em; }
.kidcard .cap, .kidcount .cap { font-weight: 740; }
.kidcount .big { font-weight: 820; }

/* ============================ MISC ======================================== */
.thumb { background: linear-gradient(135deg, var(--primary-soft), var(--success-soft)); }
.langs { background: color-mix(in srgb, var(--raise) 70%, var(--surface)); }
.langs button.on { font-weight: 700; }
.toast { font-weight: 620; }
.letterhead .lh-mark { border-radius: 12px; }
.step-n { font-weight: 760; }
.recbox { border-radius: var(--r-md);
  border-color: color-mix(in srgb, var(--primary) 25%, var(--line)); }