/*
 * Shared design-system stylesheet (M9). Linked from clinician.php, dataclerk.php, landing.php,
 * public/predictive.php, and cbioportal.php. Every rule below uses var(--token, fallback) so it
 * renders correctly even on a page that doesn't define --token at all — safe to link from any
 * page without requiring that page's own palette to match first.
 *
 * Palette fragmentation reference (found while wiring cbioportal.php in here, not yet resolved):
 *   - landing.php defines no CSS custom properties at all — its colors are hardcoded throughout.
 *   - clinician.php/dataclerk.php/cbioportal.php each define their own --red/--amber/--green/etc.
 *     with DIFFERENT variable-naming conventions (e.g. dataclerk.php uses --s2/--t2/--t3 where
 *     clinician.php uses --surface2/--text2/--text3), so tokens can't be merged by simply
 *     re-pointing one page's names at another's values.
 *   - Confirmed byte-identical across clinician.php (all 5 theme variants), dataclerk.php (both
 *     variants), and cbioportal.php: --red2:#ef4444 and --amber2:#f59e0b. Everything else
 *     (green/blue/purple/background/surface scales, font families) currently diverges by page.
 *   - Icon libraries also diverge: clinician/dataclerk/cbioportal use Tabler Icons (now pinned to
 *     the same @3.24.0 version across all three — was @latest on cbioportal.php, an unpinned-
 *     version drift risk); landing.php uses Font Awesome instead, a different library entirely.
 *   - landing.php loads five separate Google Fonts families in one page load.
 *
 * A full token merge (renaming variables, reconciling the diverging colors, picking one icon
 * library and font set) is a real visual-design decision across pages with genuinely different
 * layouts, and needs browser-based visual regression testing to do safely — not attempted here.
 * What's safe and done: every page now links this file, and the two confirmed-universal alert
 * colors (--red2, --amber2) are documented above as the actual current common ground.
 */
.tcp-env-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  border:1px solid var(--border, #334155);
  background:rgba(15,23,42,.16);
}
.tcp-env-badge[data-tone="demo"]{
  color:var(--amber2, #f59e0b);
  border-color:rgba(245,158,11,.35);
  background:rgba(245,158,11,.10);
}
.tcp-env-badge[data-tone="live"]{
  color:var(--green2, #22c55e);
  border-color:rgba(34,197,94,.35);
  background:rgba(34,197,94,.10);
}
.tcp-domain-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.tcp-domain-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid var(--border2, #475569);
  background:var(--bg3, rgba(15,23,42,.25));
  color:var(--muted, #94a3b8);
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.tcp-page-grammar{
  display:grid;
  gap:14px;
  margin-bottom:18px;
}
.tcp-priority-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;
}
.tcp-priority-card{
  background:var(--bg2, #111827);
  border:1px solid var(--border2, #334155);
  border-radius:10px;
  padding:12px 14px;
}
.tcp-priority-card b{
  display:block;
  font-size:11px;
  color:var(--text, #e5e7eb);
  margin-bottom:4px;
}
.tcp-priority-card span{
  font-size:11px;
  color:var(--muted, #94a3b8);
}
.tcp-shell-note{
  font-size:11px;
  color:var(--muted2, #64748b);
}