/* MyoMed Rescue — product styles on the shared brand tokens.
   brand.css loads first: white light / obsidian dark neutrals, the chrome
   (top bar, sidebar, footer), and the card/button/pill primitives. Rescue only
   names its accent (copper) and its own components, so it reads as one design
   with NexGen and RadMatrix. */

:root {
  /* Direction B: Rescue copper. Deep enough to read on white, warm in dark. */
  --product-accent: #b45309;
  --product-accent-ink: #ffffff;
  /* Legacy names used across Rescue's components; alias them to the shared
     tokens so every rule follows the scheme instead of a fixed dark palette. */
  --steel: var(--product-accent);
  --steel-bright: var(--product-accent-strong);
  --steel-deep: var(--product-accent);
  --bg-elev: var(--surface-1);
  --bg-card: var(--card);
  --radius: 14px;
  --focus: 0 0 0 3px var(--bg), 0 0 0 6px var(--product-accent);
}
:root[data-theme="dark"], html.theme-dark, body.theme-dark {
  --product-accent: #fb923c;
  --product-accent-ink: #2a0f0a;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
}
img { max-width: 100%; height: auto; }
a { color: var(--product-accent-strong); }
a:hover { color: var(--product-accent); }
h1, h2, h3 { line-height: 1.2; color: var(--heading); font-weight: 650; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
p { max-width: 70ch; }
:focus-visible { outline: 2px solid var(--product-accent); outline-offset: 2px; }

/* Skip link: shared class (brand.css base), Rescue's product accent. */
.skip-link {
  position: absolute; left: 0.75rem; top: -3rem; z-index: 20;
  background: var(--product-accent); color: var(--product-accent-ink);
  padding: 0.5rem 0.8rem; border-radius: 8px;
}
.skip-link:focus { top: 0.75rem; }

/* Top bar follows the page (chrome), like the other products. */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--chrome-bg);
  color: var(--chrome-ink);
  border-bottom: 1px solid var(--chrome-line);
}
.topbar-inner {
  max-width: calc(var(--max) + 4rem);
  margin: 0 auto;
  padding: 0.7rem 1rem;
  display: flex; align-items: center; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; min-width: 0; }
.brand-mark { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--product-accent); }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-weight: 750; letter-spacing: 0.04em; color: var(--chrome-ink); }
.brand-tag { font-size: var(--text-xs); color: var(--chrome-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.nav-toggle {
  margin-left: auto; display: none;
  background: transparent; color: var(--chrome-ink); border: 1px solid var(--chrome-line);
  border-radius: 8px; padding: 0.45rem 0.7rem; font: inherit;
}
.main-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 0.85rem; margin-left: auto; align-items: center; }
.main-nav a { color: var(--chrome-ink); text-decoration: none; font-size: var(--text-base); font-weight: 600; }
.main-nav a:hover { color: var(--product-accent-strong); }
.main-nav a[aria-current] { color: var(--product-accent-strong); }
.theme-toggle {
  background: transparent; border: 1px solid var(--chrome-line); color: var(--chrome-ink);
  border-radius: 8px; cursor: pointer; padding: 0.4rem 0.6rem; font: inherit; line-height: 1; margin-left: 0.25rem;
}
.theme-toggle:hover { background: color-mix(in srgb, var(--chrome-ink) 10%, transparent); }

/* Wide-screen sidebar (mirrors NexGen): a 232px chrome rail with grouped
   destinations and an accent active state. Below this width the top nav is used. */
.app-sidebar { display: none; }
@media (min-width: 1180px) {
  body { padding-left: 232px; }
  .app-sidebar {
    display: block; position: fixed; top: 0; left: 0; bottom: 0; width: 232px;
    overflow-y: auto; background: var(--chrome-bg); border-right: 1px solid var(--chrome-line);
    padding: 1rem 0.6rem 2.5rem; z-index: 60;
  }
  .topbar .main-nav { display: none; }
  .sidebar-nav { display: flex; flex-direction: column; gap: 0.1rem; }
  .sidebar-nav a {
    color: var(--chrome-ink); text-decoration: none; padding: 0.5rem 0.7rem;
    border-radius: 8px; font-size: var(--text-base); font-weight: 600;
  }
  .sidebar-nav a:hover { background: color-mix(in srgb, var(--chrome-ink) 10%, transparent); color: var(--chrome-ink); }
  .sidebar-nav a[aria-current] { background: var(--product-accent); color: var(--product-accent-ink); }
  .sidebar-group {
    margin: 0.95rem 0 0.25rem; padding: 0 0.7rem;
    font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--chrome-muted);
  }
}
.nav-auth {
  background: var(--product-accent); color: var(--product-accent-ink) !important;
  padding: 0.35rem 0.75rem; border-radius: 999px;
}

.review-banner {
  background: var(--warn-bg); color: var(--pill-warn-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  padding: 0.65rem 1rem; text-align: center; font-weight: 600;
}
.review-banner[hidden] { display: none !important; }

#main { max-width: var(--max); margin: 0 auto; padding: 1.6rem 1rem 3.5rem; }
.hero { display: grid; gap: 1.4rem; padding: 1rem 0 2rem; }
.hero-lockup { width: min(100%, 720px); border-radius: 16px; background: var(--chrome-bg); box-shadow: var(--shadow); }
/* The lockup is dark art on transparent; lift it on the dark chrome only. */
:root[data-theme="dark"] .hero-lockup, html.theme-dark .hero-lockup { filter: brightness(1.9) saturate(1.1); }
.lede { font-size: var(--text-lg); color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }

button { font: inherit; color: inherit; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem; padding: 0.65rem 1.05rem; border-radius: 10px;
  border: 1px solid transparent; font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--product-accent); color: var(--product-accent-ink); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--product-accent); color: var(--product-accent); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-flex; }
  .main-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; padding: 0.4rem 0 0.8rem; }
  .main-nav.open { display: flex; }
  .topbar-inner { flex-wrap: wrap; }
}
.card {
  background: var(--card); border: 1px solid var(--line);
  border-top: 3px solid var(--product-accent);
  border-radius: var(--radius); padding: 1.25rem 1.35rem;
  box-shadow: var(--elev-1);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.card h2, .card h3 { margin-top: 0; }
.card p { color: var(--muted); }
.card.clickable { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.card.clickable:hover {
  border-color: color-mix(in srgb, var(--product-accent) 55%, var(--line));
  transform: translateY(-3px);
  box-shadow: var(--elev-3);
}

.pill {
  display: inline-block; font-size: var(--text-xs); font-weight: 750;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  background: var(--product-accent-soft); color: var(--product-accent-strong);
}
.pill.warn { background: var(--warn-bg); color: var(--pill-warn-ink); }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
@media (max-width: 720px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; }
.stat b { display: block; font-size: var(--text-2xl); color: var(--product-accent-strong); }
.stat span { color: var(--muted); font-size: var(--text-sm); }

form.stack { display: grid; gap: 0.85rem; max-width: 420px; }
label { display: grid; gap: 0.3rem; font-weight: 650; }
input, select, textarea {
  font: inherit; padding: 0.65rem 0.75rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--input-bg); color: var(--ink);
}
.err { color: var(--bad); font-weight: 650; }
.muted { color: var(--muted); }
.notice {
  background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  color: var(--pill-warn-ink);
  border-radius: 12px; padding: 0.85rem 1rem; margin: 0 0 1.1rem;
}

.options { display: grid; gap: 0.55rem; }
.option {
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.75rem 0.85rem; cursor: pointer;
}
.option:has(input:focus-visible) { box-shadow: var(--focus); }
.option.correct { border-color: var(--good); }
.option.miss { border-color: var(--bad); }
.rationale { background: var(--good-bg); border: 1px solid color-mix(in srgb, var(--good) 45%, transparent); border-radius: 12px; padding: 0.9rem 1rem; }
.vitals { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vital { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem 0.6rem; font-variant-numeric: tabular-nums; }
.skill-step { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.flash-card {
  width: 100%; min-height: 220px; display: grid; place-items: center; text-align: center;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem;
  font-size: var(--text-xl); cursor: pointer; color: var(--ink);
}
.table-scroll { overflow-x: auto; }
table.matrix { width: 100%; border-collapse: collapse; }
table.matrix th, table.matrix td { border: 1px solid var(--line); padding: 0.45rem 0.55rem; text-align: center; }
table.matrix th[scope="row"] { text-align: left; }
.site-footer { border-top: 1px solid var(--chrome-line); background: var(--chrome-bg); color: var(--chrome-muted); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 1.4rem 1rem 2rem; color: var(--chrome-muted); font-size: var(--text-sm); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.footer-links a { color: var(--chrome-muted); }
.footer-links a:hover { color: var(--chrome-ink); }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Sign-up consent: one checkbox beside normal wrapping text (the global
   label grid split each link into its own column). */
label.consent {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-weight: 500; line-height: 1.5;
  padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 10px;
}
label.consent input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; }
label.consent span { flex: 1; min-width: 0; }

/* Lessons and decision cases (2026 expansion) */
.lesson-list { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.lesson-row { display: flex; gap: 1rem; align-items: flex-start; }
.lesson-row h3 { margin: 0 0 0.2rem; }
.lesson-row p { margin: 0.1rem 0; }
.unit-num { flex: 0 0 4.2rem; font-weight: 700; color: var(--product-accent-strong); padding-top: 0.15rem; }
.lesson-body { max-width: 72ch; line-height: 1.65; }
.lesson-body p { margin: 0 0 1rem; }
.refs { font-size: var(--text-base); color: var(--muted); }
details summary { cursor: pointer; color: var(--product-accent-strong); }
.br-choice { text-align: left; font: inherit; color: var(--ink); background: transparent; cursor: pointer; width: 100%; }
.br-choice:hover:not([disabled]) { border-color: var(--product-accent); }
.branch-step { border-left: 3px solid var(--line); padding: 0.2rem 0 0.2rem 0.9rem; margin: 0.8rem 0; }
.branch-step p { margin: 0.2rem 0; }
.branch-step.ok { border-left-color: var(--good); }
.branch-step.miss { border-left-color: var(--bad); }
.branch-remediate { border-color: var(--bad); }
@media (max-width: 720px) { .lesson-row { flex-direction: column; gap: 0.2rem; } .unit-num { flex-basis: auto; } }
/* Shared MyoMed product switcher (shared/brand/product-switcher.js) */
.brand-switcher { position: relative; flex: 0 0 auto; margin-left: auto; color: var(--chrome-muted); }
.brand-switcher + .main-nav { margin-left: 0; }
.brand-switcher summary { cursor: pointer; padding: 0.45rem 0.6rem; font-weight: 700; font-size: var(--text-base); }
.brand-switcher-links {
  position: absolute; right: 0; top: 100%; z-index: 30; min-width: 190px; padding: 0.4rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.brand-switcher-links a { display: block; padding: 0.5rem; color: var(--ink); text-decoration: none; }
.brand-switcher-links a[aria-current] { color: var(--product-accent-strong); font-weight: 700; }
.footer-address { margin-top: 0.6rem; font-size: var(--text-sm); }

/* ---------- Certificates of Completion ---------- */
.cert-banner { border-left: 4px solid var(--gold-ink, #8a6d1f); }
.cert-banner h2, .cert-row h2 { margin: 0.2rem 0 0.3rem; }
.cert-kicker {
  margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-ink, #8a6d1f);
}

/* ---- Per-item Q&A discussion panel (js/qa.js) ---- */
.qa-panel { border-top: 1px solid var(--color-border, var(--line)); margin-top: 1.25rem; padding-top: 1rem; }
.qa-toggle { background: none; border: none; color: var(--color-accent, var(--teal)); cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-semibold, 600); padding: 0; }
.qa-body { margin-top: 0.75rem; }
.qa-post { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border, var(--line)); }
.qa-main { flex: 1; min-width: 0; }
.qa-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-accent, var(--teal)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--font-bold, 700); flex-shrink: 0; }
.qa-meta { font-size: var(--text-xs); color: var(--color-text-secondary, var(--muted)); }
.qa-body-text { font-size: var(--text-sm); margin: 0.25rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.qa-actions { display: flex; gap: 0.5rem; align-items: center; }
.qa-thumbs { background: none; border: 1px solid var(--color-border, var(--line)); border-radius: 4px; cursor: pointer; font-size: var(--text-xs); padding: 2px 8px; color: var(--color-text-secondary, var(--muted)); }
.qa-thumbs.reacted { border-color: var(--color-accent, var(--teal)); color: var(--color-accent, var(--teal)); }
.qa-link { background: none; border: none; padding: 0; cursor: pointer; font-size: var(--text-xs); color: var(--color-text-secondary, var(--muted)); text-decoration: underline; }
.qa-textarea { width: 100%; resize: vertical; min-height: 72px; padding: 0.5rem; border: 1px solid var(--color-border, var(--line)); border-radius: 6px; background: var(--color-surface, var(--card)); color: var(--color-text-primary, var(--ink)); font-size: var(--text-sm); margin-top: 0.75rem; }
.qa-input-row { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.qa-input-row .qa-submit { align-self: flex-start; }
.qa-more { margin-top: 0.5rem; }
.cert-legal { font-size: var(--text-sm); margin-top: 1.5rem; }

/* ---- Micro-animations (typography + motion pass) ---- */
.card, [class*="card"], .widget { transition: transform .2s ease, box-shadow .2s ease; }
.card:hover, [class*="card"]:hover, .widget:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
button, .btn, [role="button"] { transition: transform .1s, background-color .2s; }
button:active, .btn:active, [role="button"]:active { transform: scale(.97); }
.skeleton {
  background: linear-gradient(90deg, var(--color-surface, var(--surface-1, #eef0f2)) 25%, var(--color-surface-alt, var(--surface-2, #e2e5e9)) 50%, var(--color-surface, var(--surface-1, #eef0f2)) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 4px; color: transparent;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.page-leave { opacity: 0; transform: translateY(-8px); transition: opacity 200ms ease-in, transform 200ms ease-in; }
.page-enter { opacity: 1; transform: translateY(0); transition: opacity 200ms ease-out, transform 200ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .card, [class*="card"], .widget, button, .btn, [role="button"], .page-leave, .page-enter { transition: none; }
  .card:hover, [class*="card"]:hover, .widget:hover, button:active, .btn:active, [role="button"]:active { transform: none; }
  .skeleton { animation: none; }
  .page-leave { opacity: 1; transform: none; }
}

/* State protocol overlay (js/protocols.js) */
.state-selector-wrap { display: inline-flex; align-items: center; margin-left: auto; }
.state-selector {
  font: inherit; font-size: 0.85rem; max-width: 11rem;
  padding: 0.35rem 0.5rem; border-radius: 8px;
  background: var(--bg-card); color: var(--ink); border: 1px solid var(--chrome-line);
}
.state-selector:focus-visible { box-shadow: var(--focus); outline: none; }
.state-badge {
  display: inline-block; margin-top: 0.5rem; padding: 0.15rem 0.55rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em;
  background: var(--product-accent); color: var(--product-accent-ink);
}
.state-badge-flag { outline: 2px solid var(--product-accent-strong); outline-offset: 1px; }
.state-note { margin: 0.35rem 0 0; font-size: 0.85rem; line-height: 1.4; }
.state-note-flag { border-left: 3px solid var(--product-accent); padding-left: 0.5rem; }
.state-disclaimer {
  margin: 0.5rem 0 1rem; padding: 0.6rem 0.85rem; border-radius: 10px;
  border: 1px solid var(--product-accent); background: var(--bg-elev); font-size: 0.9rem;
}
@media (max-width: 720px) { .state-selector { max-width: 8.5rem; } }
/* Paywall (402) — modal dialog and in-page card. */
.paywall-dialog { border: 0; padding: 0; background: transparent; max-width: min(34rem, calc(100vw - 2rem)); }
.paywall-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.paywall-card { border-color: var(--product-accent); }
.paywall-card .paywall-message { color: var(--ink); font-weight: 600; }
.paywall-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0; }