/* ═══════════════════════════════════════════════════════════════
   careiti-science.css — styles for the bilingual evidence layer
   Pairs with careiti-science.js. Palette matches careiti-ui.css.
   Uses local fallbacks so it works even on pages that predate
   the shared design tokens.
   ═══════════════════════════════════════════════════════════════ */
.sci-card, .sci-grade {
  --sc-teal: var(--c-teal, var(--teal, #0D9488));
  --sc-teal-d: var(--c-teal-dark, var(--teal-dark, #0F766E));
  --sc-amber: var(--c-amber, var(--amber, #F59E0B));
  --sc-paper: var(--c-paper, var(--paper, #fff));
  --sc-cream: var(--c-cream, var(--cream, #FAF8F3));
  --sc-ink: var(--c-ink, var(--ink, #1C1917));
  --sc-ink2: var(--c-ink2, var(--ink2, #57534E));
  --sc-ink3: var(--c-ink3, var(--ink3, #A8A29E));
  --sc-line: var(--c-line, var(--line, #ECE9E2));
  --sc-good: var(--c-good, var(--good, #16A34A));
  --sc-bad: var(--c-bad, var(--bad, #EF4444));
  font-family: var(--c-font, var(--font, "PingFang HK","Microsoft JhengHei",-apple-system,sans-serif));
}

/* ── Science card (start screen) ─────────────────────────── */
.sci-card {
  background: var(--sc-paper);
  border: 1.5px solid var(--sc-line);
  border-radius: 18px;
  padding: 15px 16px 13px;
  box-shadow: 0 6px 22px rgba(28,25,23,.07);
  position: relative;
}
.sci-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.sci-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  background:rgba(13,148,136,.10); color:var(--sc-teal-d);
  font-size:11.5px; font-weight:800; letter-spacing:.2px;
}
.sci-lang, .sci-langbtn-std {
  flex:none; min-width:38px; height:28px; padding:0 9px;
  border:1.5px solid var(--sc-line); border-radius:9px;
  background:var(--sc-cream); color:var(--sc-ink2);
  font-size:12px; font-weight:800; cursor:pointer; transition:.15s;
  font-family:inherit;
}
.sci-lang:hover, .sci-langbtn-std:hover { border-color:var(--sc-teal); color:var(--sc-teal); }
.sci-why { font-size:11px; font-weight:800; color:var(--sc-ink3); letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.sci-body { font-size:13.5px; line-height:1.62; color:var(--sc-ink); margin-bottom:11px; }
.sci-meta { display:flex; flex-direction:column; gap:8px; margin:0 0 11px; }
.sci-meta > div { display:grid; grid-template-columns:88px 1fr; gap:8px; align-items:baseline; }
.sci-meta dt { font-size:11px; font-weight:800; color:var(--sc-teal-d); }
.sci-meta dd { font-size:12.5px; line-height:1.5; color:var(--sc-ink2); }
.sci-more {
  display:inline-block; font-size:12.5px; font-weight:800;
  color:var(--sc-teal-d); text-decoration:none;
  border-bottom:1.5px solid rgba(13,148,136,.3); padding-bottom:1px;
}
.sci-more:hover { border-bottom-color:var(--sc-teal); }
.sci-disc { margin-top:10px; font-size:10.5px; line-height:1.5; color:var(--sc-ink2); }

/* ── Risk-grade panel (result screen) ────────────────────── */
.sci-grade {
  border-radius:16px; padding:14px 16px; margin-top:12px;
  border:1.5px solid var(--sc-line); background:var(--sc-paper);
  text-align:left;
}
.sci-grade-top { display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.sci-grade-label {
  font-size:15px; font-weight:900; padding:4px 12px; border-radius:999px; color:#fff;
}
.sci-grade-domain { font-size:11.5px; font-weight:700; color:var(--sc-ink2); }
.sci-grade-title { font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--sc-ink3); margin-bottom:4px; }
.sci-grade-note { font-size:12.5px; line-height:1.55; color:var(--sc-ink2); margin:0; }
.g-optimal .sci-grade-label { background:linear-gradient(135deg,#16A34A,#0D9488); }
.g-normal  .sci-grade-label { background:linear-gradient(135deg,#0D9488,#14B8A6); }
.g-mild    .sci-grade-label { background:linear-gradient(135deg,#F59E0B,#FBBF24); }
.g-concern .sci-grade-label { background:linear-gradient(135deg,#E11D48,#FB7185); }
.g-optimal { border-color:rgba(22,163,74,.35); }
.g-concern { border-color:rgba(225,29,72,.30); }

/* high-contrast */
[data-contrast="high"] .sci-card,
[data-contrast="high"] .sci-grade { background:#111 !important; border-color:#fff !important; color:#fff; }
[data-contrast="high"] .sci-body,
[data-contrast="high"] .sci-meta dd,
[data-contrast="high"] .sci-grade-note { color:#eee !important; }

@media (prefers-reduced-motion: reduce){ .sci-card *, .sci-grade * { transition:none !important; } }