/* =====================================================================
   3D Anatomy — CoreLuke skin (shared by the atlas, library, article, quiz)
   Loaded after bootstrap.min.css, shopeers.css and site.css. It maps the
   site tokens (--cp-*) onto the CoreLuke tokens (--sp-*), so colour, radius,
   shadow and the light / dark theme (the shared sp-theme) come from the
   dashboard, and restyles the shared header, footer, buttons and chips.
   ===================================================================== */

/* tokens — three :root's out-rank the site's dark-mode token blocks */
:root:root:root {
  --cp-brand: var(--sp-primary); --cp-brand-2: var(--sp-primary-hover); --cp-brand-soft: var(--sp-primary-soft);
  --cp-accent: var(--sp-warning); --cp-gold: var(--sp-amber);
  --cp-bg: var(--sp-bg); --cp-surface: var(--sp-surface); --cp-surface-2: var(--sp-surface-3);
  --cp-line: var(--sp-border); --cp-line-2: var(--sp-border-strong);
  --cp-text: var(--sp-text); --cp-text-2: var(--sp-text-2); --cp-muted: var(--sp-muted);
  --cp-stage-1: #f3f4f7; --cp-stage-2: #d3d8e1;
  --cp-shadow: var(--sp-shadow-md);
  --cp-radius: var(--sp-radius-md); --cp-radius-sm: var(--sp-radius-sm);
  --cp-font: var(--sp-font); --cp-display: var(--sp-font); --cp-serif: var(--sp-font);
  --cp-head: 64px;
  color-scheme: light;
}
:root[data-bs-theme="dark"]:root:root {
  --cp-stage-1: #1b2029; --cp-stage-2: #090b0f;
  color-scheme: dark;
}
body { font-size: var(--sp-fs-base); }

/* brand: workspace tile + name */
.cp-brand { display: inline-flex; align-items: center; gap: 9px; flex: none; margin-right: 6px; color: var(--sp-text); }
.cp-brand:hover { color: var(--sp-text); }
.cp-brand-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--sp-radius-sm); background: var(--sp-primary-soft); color: var(--sp-primary-text); font-size: 18px; }
.cp-brand-name { font-size: var(--sp-fs-lg); font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }

/* header — the dashboard topbar */
.cp-head { height: var(--cp-head); gap: 12px; padding: 0 var(--sp-gutter); background: color-mix(in srgb, var(--sp-surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(10px); backdrop-filter: saturate(1.6) blur(10px); }
.cp-nav { gap: 2px; margin-left: 8px; }
.cp-nav a { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--sp-radius-sm); font-size: var(--sp-fs-sm); font-weight: 500; color: var(--sp-text-2); }
.cp-nav a:hover { background: var(--sp-surface-3); color: var(--sp-text); }
.cp-nav a[aria-current="page"] { background: var(--sp-primary-soft); color: var(--sp-primary-text); }
.cp-head-search { max-width: 360px; }
.cp-head-search input { height: 38px; border-radius: var(--sp-radius-pill); background: var(--sp-surface-2); font-size: var(--sp-fs-sm); }
.cp-head-search input:focus { border-color: var(--sp-primary); background: var(--sp-surface); box-shadow: 0 0 0 3px var(--sp-primary-ring); }
.cp-head-search kbd { border-radius: var(--sp-radius-pill); padding: 4px 8px; }
.cp-results { border-radius: var(--sp-radius-md); box-shadow: var(--sp-shadow-lg); }
.cp-head-actions { gap: 8px; }
@media (max-width: 960px) { .cp-nav.is-open { padding: 10px 16px 16px; } }
@media (max-width: 640px) { .cp-head { padding: 0 12px; } .cp-brand-name { display: none; } .cp-head-actions .btn { display: none; } }

/* buttons — the same look as .btn */
.cp-btn { height: 38px; padding: 0 14px; border-radius: var(--sp-radius); font-size: .835rem; font-weight: 500; letter-spacing: -.005em;
  background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-text-2); box-shadow: var(--sp-shadow-xs); }
.cp-btn:hover { background: var(--sp-surface-hover); border-color: var(--sp-border-strong); color: var(--sp-text); }
.cp-btn.is-sm { height: 31px; padding: 0 11px; font-size: .78rem; border-radius: var(--sp-radius-sm); }
.cp-btn.is-primary, :root:root:root .cp-btn.is-primary { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; box-shadow: var(--sp-shadow-btn); }
.cp-btn.is-primary:hover, :root:root:root .cp-btn.is-primary:hover { background: var(--sp-primary-hover); border-color: var(--sp-primary-hover); color: #fff; }

/* chips, kicker, headings */
.cp-chip { height: 24px; border-radius: var(--sp-radius-pill); font-size: var(--sp-fs-xs); font-weight: 500; background: var(--sp-surface); }
.cp-kicker { font: 600 var(--sp-fs-2xs)/1 var(--sp-font); letter-spacing: .08em; color: var(--sp-primary-text); }
.cp-h1, .cp-h2, .cp-h3 { font-weight: 600; letter-spacing: -.03em; }
.cp-lead { font-size: var(--sp-fs-md); color: var(--sp-muted); }

/* footer */
.cp-foot { font-size: var(--sp-fs-sm); }
.cp-foot h4 { font-size: var(--sp-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-subtle); }