/* GCMD Library — Color tokens
 *
 * Source of truth for all colors. Never hardcode hex values in components
 * or pages — always reference these variables. See DESIGN_SYSTEM_PLAN.md §3.
 *
 * Why indigo over the legacy blue (#0066CC): medical sites overuse blue,
 * and indigo gives GCMD its own lane while staying professional. Pairs
 * with warm stone neutrals instead of the cold blue-grays elsewhere.
 */

:root {
  /* ── Primary ─────────────────────────────────────────────── */
  --color-primary:        #4F46E5;   /* Indigo 600 — brand, CTAs, active states */
  --color-primary-hover:  #4338CA;   /* Indigo 700 */
  --color-primary-light:  #EEF2FF;   /* Indigo 50 — subtle backgrounds */
  --color-primary-100:    #E0E7FF;   /* Indigo 100 — tag bgs */
  --color-primary-200:    #C7D2FE;   /* Indigo 200 — borders on active items */

  /* ── Secondary ──────────────────────────────────────────── */
  --color-secondary:        #0EA5E9; /* Sky 500 — links, secondary actions */
  --color-secondary-hover:  #0284C7; /* Sky 600 */
  --color-secondary-light:  #F0F9FF; /* Sky 50 */

  /* ── Accent ─────────────────────────────────────────────── */
  --color-accent:        #F59E0B;    /* Amber 500 — highlights, badges */
  --color-accent-light:  #FFFBEB;    /* Amber 50 */

  /* ── Semantic ───────────────────────────────────────────── */
  --color-success:        #10B981;
  --color-success-light:  #ECFDF5;
  --color-warning:        #F59E0B;
  --color-warning-light:  #FFFBEB;
  --color-error:          #EF4444;
  --color-error-light:    #FEF2F2;

  /* ── Neutrals (stone scale) ─────────────────────────────── */
  --color-gray-950:  #0C0A09;   /* Near-black — primary headings */
  --color-gray-900:  #1C1917;   /* Body text */
  --color-gray-800:  #292524;   /* Strong body text (between 900 and 700) */
  --color-gray-700:  #44403C;   /* Secondary text */
  --color-gray-600:  #57534E;   /* Slightly lighter secondary */
  --color-gray-500:  #78716C;   /* Tertiary, placeholders */
  --color-gray-400:  #A8A29E;   /* Disabled text, timestamps */
  --color-gray-300:  #D6D3D1;   /* Borders */
  --color-gray-200:  #E7E5E4;   /* Dividers */
  --color-gray-100:  #F5F5F4;   /* Card backgrounds */
  --color-gray-50:   #FAFAF9;   /* Page background */
  --color-white:     #FFFFFF;

  /* ── Surface ────────────────────────────────────────────── */
  --color-surface:         #FFFFFF;
  --color-surface-raised:  #FAFAF9;
  --color-surface-sunken:  #F5F5F4;
  --color-backdrop:        rgba(0, 0, 0, 0.5);

  /* ── Content type colors (cards, tags) ──────────────────── */
  --color-type-video:        #EF4444;   /* Red */
  --color-type-podcast:      #8B5CF6;   /* Violet */
  --color-type-article:      #3B82F6;   /* Blue */
  --color-type-infographic:  #10B981;   /* Emerald */
  --color-type-guideline:    #F59E0B;   /* Amber */
  --color-type-playbook:     #EC4899;   /* Pink */

  /* ── Space accent fallback ──────────────────────────────── */
  /* Per-space accent is set inline via [data-space-theme]; this is
     the default so components don't 500 when no space context exists. */
  --space-accent:        var(--color-primary);
  --space-accent-hover:  var(--color-primary-hover);
  --space-accent-light:  var(--color-primary-light);
  --space-accent-rgb:    79, 70, 229;
}
/* GCMD Library — Typography tokens
 *
 * Inter replaces Poppins. Poppins is a geometric display font that gets
 * tiring at body sizes; Inter was designed for screens and has tabular
 * numbers (critical for metadata, stats, timestamps).
 *
 * Inter is loaded from Google Fonts via templates/base.html.
 */

:root {
  /* ── Font stacks ─────────────────────────────────────────── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Fira Code', monospace;

  /* ── Size scale ──────────────────────────────────────────── */
  --text-xs:    0.75rem;   /* 12px — badges, labels */
  --text-sm:    0.875rem;  /* 14px — metadata */
  --text-base:  1rem;      /* 16px — body */
  --text-lg:    1.125rem;  /* 18px — lead */
  --text-xl:    1.25rem;   /* 20px — section subtitles */
  --text-2xl:   1.5rem;    /* 24px — card headings */
  --text-3xl:   1.875rem;  /* 30px — section headings */
  --text-4xl:   2.25rem;   /* 36px — page titles */
  --text-5xl:   3rem;      /* 48px — hero titles */

  /* ── Line heights ───────────────────────────────────────── */
  --leading-tight:    1.25;
  --leading-snug:     1.375;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;

  /* ── Font weights ───────────────────────────────────────── */
  --font-regular:    400;
  --font-normal:     400;   /* Alias for --font-regular */
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  800;

  /* ── Letter spacing ─────────────────────────────────────── */
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;   /* All-caps labels */
}
/* GCMD Library — Spacing & layout tokens */

:root {
  /* ── Spacing scale (4-px base) ──────────────────────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Layout containers ──────────────────────────────────── */
  --container-max:      1280px;
  --container-narrow:   800px;
  --container-padding:  var(--space-6);
  --sidebar-width:      280px;

  /* ── Border radius ──────────────────────────────────────── */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* ── Breakpoints (reference values; use @media manually) ─ */
  --bp-sm:   480px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;
  --bp-2xl:  1536px;

  /* ── Heights ────────────────────────────────────────────── */
  --header-height:        64px;
  --header-height-mobile: 56px;
  --bottom-nav-height:    60px;
}
/* GCMD Library — Effects: shadows, motion, animation tokens */

:root {
  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 3px var(--color-primary-100);

  /* ── Motion ─────────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --duration-slower: 500ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Skeleton shimmer keyframe (used by components/skeleton.css) ── */
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Card-lift on hover (utility) ── */
@keyframes lift-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion: kill animations for users who opted out ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* GCMD Library — Modern CSS reset
 * Based on Andy Bell's modern reset + Josh Comeau's. Sets sensible
 * defaults so components don't have to defensively override browser UA.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; tab-size: 4; }

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

ul[role='list'], ol[role='list'] { list-style: none; padding: 0; margin: 0; }

body {
  min-height: 100vh;
  line-height: var(--leading-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--leading-tight);
  text-wrap: balance;
}

a {
  color: inherit;
  text-decoration: none;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

textarea:not([rows]) { min-height: 10em; }

:target { scroll-margin-block: 5ex; }

/* Hide visually but keep accessible for screen readers */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* GCMD Library — Global base styles
 *
 * Page-level defaults built on the token system. Anything that needs
 * to look the same everywhere (body color, link hover, heading scale)
 * lives here. Component-specific styles go in components/.
 */

/* ── Flat design — kill all shadows app-wide. ──────────────────
   Product direction: no drop shadows, no card lift, no glow.
   Anywhere depth is needed, use a thin border or background tint.
   Focus rings preserved via the :focus-visible rule below. */
*,
*::before,
*::after { box-shadow: none !important; }

/* Restore focus indicators since we just nuked all box-shadows
   (which is what most focus rings use). */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus,
[tabindex]:focus { outline: none; }
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  color: var(--color-gray-900);
  background: var(--color-gray-50);
  font-feature-settings: 'cv11', 'ss01';  /* Inter readability tweaks */
}

/* ── Headings ─────────────────────────────────────────────── */
h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-950);
}
h2 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-950);
}
h3 {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
}
h4 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
}
h5 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
}
h6 {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-gray-700);
}

/* ── Body text ────────────────────────────────────────────── */
p {
  color: var(--color-gray-700);
  line-height: var(--leading-normal);
}
p + p { margin-top: var(--space-4); }

/* ── Links ────────────────────────────────────────────────── */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover { color: var(--color-primary-hover); }
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Subtle link inside body copy (gets underline) */
p a, li a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* ── Meta / caption text ──────────────────────────────────── */
.meta,
.caption {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

/* ── All-caps label ──────────────────────────────────────── */
.label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-gray-500);
}

/* ── Tabular numerals for stats / timestamps ─────────────── */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Containers (utility) ─────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}
.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ── Selection ────────────────────────────────────────────── */
::selection {
  background: var(--color-primary-100);
  color: var(--color-gray-950);
}

/* ── Scrollbar (subtle) ───────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
}
*::-webkit-scrollbar-thumb:hover { background: var(--color-gray-400); }
/* GCMD Library — Buttons
 *
 * Three variants: primary (filled), secondary (outlined), ghost (text).
 * Size modifiers: -sm, default, -lg. Icon support via .btn-icon.
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              color      var(--duration-fast) var(--ease-default),
              border     var(--duration-fast) var(--ease-default),
              transform  var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  min-height: 40px;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Primary ─────────────────────────────────────────────── */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.30);
  color: var(--color-white);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-xs);
}

/* ── Secondary ───────────────────────────────────────────── */
.btn-secondary {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-gray-300);
}
.btn-secondary:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* ── Ghost ───────────────────────────────────────────────── */
.btn-ghost {
  background: transparent;
  color: var(--color-gray-700);
}
.btn-ghost:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

/* ── Destructive ─────────────────────────────────────────── */
.btn-danger {
  background: var(--color-error);
  color: var(--color-white);
}
.btn-danger:hover {
  background: #DC2626;   /* Red 600 */
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.30);
}

/* ── Sizes ───────────────────────────────────────────────── */
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  min-height: 32px;
  border-radius: var(--radius-sm);
}
.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  min-height: 48px;
}

/* ── Full width ──────────────────────────────────────────── */
.btn-block {
  width: 100%;
}

/* ── Icon-only buttons ───────────────────────────────────── */
.btn-icon {
  padding: var(--space-2);
  min-width: 40px;
  min-height: 40px;
}
.btn-icon.btn-sm { min-width: 32px; min-height: 32px; padding: var(--space-1); }
.btn-icon.btn-lg { min-width: 48px; min-height: 48px; padding: var(--space-3); }

/* ── Space-themed primary (uses space accent if set) ─────── */
.btn-space-primary {
  background: var(--space-accent);
  color: var(--color-white);
}
.btn-space-primary:hover {
  background: var(--space-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--space-accent-rgb), 0.30);
}

/* ── Touch target enforcement on mobile ──────────────────── */
@media (max-width: 640px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
}
/* GCMD Library — Unified content card
 *
 * One card component for every page (Library home, listing pages,
 * Space resources, video sidebar). Used to be 3-4 different card
 * implementations — this replaces them all.
 *
 * Structure (see DESIGN_SYSTEM_PLAN.md §6.3):
 *   <a class="card card-content" href="...">
 *     <div class="card-thumb card-thumb-video">
 *       <img src="..." alt="" />          [or fallback]
 *       <span class="card-type-badge tag-video">Video</span>
 *       <span class="card-duration">12:34</span>
 *     </div>
 *     <div class="card-body">
 *       <h3 class="card-title">...</h3>
 *       <p class="card-author">Dr. Author Name</p>
 *       <p class="card-meta">May 20, 2026 · 1.2K views</p>
 *       <div class="card-tags">
 *         <span class="tag tag-article">Article</span>
 *         <span class="tag tag-topic">Pediatrics</span>
 *       </div>
 *     </div>
 *   </a>
 */

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-base) var(--ease-default),
              background  var(--duration-base) var(--ease-default);
}

/* Hover: just deepen the border. No more lift/shadow — the user
   asked for clean thin borders over shadow effects. */
.card:hover,
.card:focus-visible {
  border-color: var(--color-gray-400);
  outline: none;
}

/* ── Thumbnail container ─────────────────────────────────── */
.card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-gray-100);
  overflow: hidden;
}
.card-thumb img,
.card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback gradient + icon for cards without a real thumbnail.
   Each content type gets its own color (matches tag colors).
   The icon is drawn via ::before so we don't need extra HTML. */
.card-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
              var(--card-fallback-from, var(--color-gray-400)),
              var(--card-fallback-to,   var(--color-gray-500)));
  color: var(--color-white);
}
.card-thumb-fallback::before {
  content: '';
  width: 56px;
  height: 56px;
  background-color: currentColor;
  /* Default: play triangle */
  -webkit-mask: var(--card-fallback-icon, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z'/></svg>")) center/contain no-repeat;
          mask: var(--card-fallback-icon, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z'/></svg>")) center/contain no-repeat;
  opacity: 0.85;
}

/* Type-specific fallback colors */
.card-thumb-video.card-thumb-fallback {
  --card-fallback-from: #F87171; --card-fallback-to: #B91C1C;
  --card-fallback-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z'/></svg>");
}
.card-thumb-podcast.card-thumb-fallback {
  --card-fallback-from: #A78BFA; --card-fallback-to: #6D28D9;
  --card-fallback-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 14a3 3 0 003-3V5a3 3 0 00-6 0v6a3 3 0 003 3zm5.91-3a.991.991 0 00-.99-1.07.989.989 0 00-.992.92A5.001 5.001 0 0112 15a5.001 5.001 0 01-3.93-4.16A.989.989 0 007.07 9.93.991.991 0 006.09 11A7.001 7.001 0 0011 17.92V21h2v-3.08A7.001 7.001 0 0017.91 11z'/></svg>");
}
.card-thumb-article.card-thumb-fallback {
  --card-fallback-from: #60A5FA; --card-fallback-to: #1D4ED8;
  --card-fallback-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 7V3.5L18.5 9H13z'/></svg>");
}
.card-thumb-infographic.card-thumb-fallback {
  --card-fallback-from: #34D399; --card-fallback-to: #047857;
  --card-fallback-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 13h2v8H3v-8zm4-5h2v13H7V8zm4 4h2v9h-2v-9zm4-8h2v17h-2V4zm4 6h2v11h-2V10z'/></svg>");
}
.card-thumb-guideline.card-thumb-fallback {
  --card-fallback-from: #FBBF24; --card-fallback-to: #B45309;
  --card-fallback-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/></svg>");
}
.card-thumb-playbook.card-thumb-fallback {
  --card-fallback-from: #F472B6; --card-fallback-to: #BE185D;
  --card-fallback-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 5v2H9V5h10m0 6v2h-6v-2h6m0 6v2h-6v-2h6M3 5v2h2V5H3m0 6v2h2v-2H3m0 6v2h2v-2H3z'/></svg>");
}

/* Overlays on the thumb */
.card-type-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.card-duration {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.75);
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}
.card-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4));
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-default);
}
.card-play-overlay::before {
  content: '';
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none'/><path d='M10 8l6 4-6 4V8z' fill='black'/></svg>") center/contain no-repeat;
}
.card:hover .card-play-overlay { opacity: 1; }

/* ── Body ─────────────────────────────────────────────────── */
.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
}
.card-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-gray-950);
  line-height: var(--leading-tight);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-author {
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  margin: 0;
}
.card-author strong { font-weight: var(--font-medium); color: var(--color-gray-900); }
.card-meta {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin-top: auto;     /* push to bottom even on short cards */
  font-variant-numeric: tabular-nums;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

/* ── Compact variant (sidebars, related content) ─────────── */
.card-compact {
  flex-direction: row;
  gap: var(--space-3);
  padding: var(--space-2);
  align-items: flex-start;
}
.card-compact .card-thumb {
  width: 120px;
  aspect-ratio: 16/9;
  flex: 0 0 120px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.card-compact .card-body { padding: 0; }
.card-compact .card-title {
  font-size: var(--text-sm);
  -webkit-line-clamp: 2;
}

/* ── Space card (doctor profile in a directory) ──────────── */
.card-space {
  text-align: center;
  padding: var(--space-6);
  align-items: center;
}
.card-space .space-avatar {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin-bottom: var(--space-4);
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-gray-200);
}
.card-space .space-name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-gray-950);
}
.card-space .space-specialty {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}
.card-space .space-count {
  font-size: var(--text-xs);
  color: var(--color-gray-400);
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}

/* ── Pillar / Focus card (Space profile "Areas of Focus") ─ */
.card-pillar {
  padding: var(--space-6);
}
/* Icon block sits at the top — small filled square, accent-tinted bg,
   accent-colored glyph. Replaces the 4-px colored top strap which
   read as a stock AI-design trope. */
.card-pillar .pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: var(--text-xl);
  background: rgba(var(--space-accent-rgb), 0.12);
  color: var(--space-accent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.card-pillar .pillar-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-gray-950);
  margin-bottom: var(--space-2);
}
.card-pillar .pillar-desc {
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  margin-bottom: var(--space-3);
}
.card-pillar .pillar-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card-pillar .pillar-links a {
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-decoration: none;
}
.card-pillar .pillar-links a:hover {
  text-decoration: underline;
}

/* ── Unified content card (pbd-card) ──────────────────────────
   Single content card design used everywhere: Recently Added on home,
   Resources tab on space profile, Search results. Mirrors the cards
   on the playbook detail page so the visual language is consistent.

   Structure:
     <a class="pbd-card">
       <div class="pbd-card-thumb-wrap">
         <img class="pbd-card-thumb">
         <span class="pbd-card-type-pill">Video</span>
       </div>
       <div class="pbd-card-body">
         <h3 class="pbd-card-title">…</h3>
         <p class="pbd-card-desc">…</p>
       </div>
     </a>
*/
.pbd-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: 1fr;            /* every card in a row matches the tallest */
  gap: var(--space-4);
}
.pbd-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-default);
}
.pbd-card:hover { border-color: var(--color-gray-400); }
.pbd-card-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-gray-900);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
}
.pbd-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pbd-card-type-pill {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: rgba(15, 23, 42, 0.85);
  color: var(--color-white);
  font-size: 11px;
  font-weight: var(--font-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pbd-card-body {
  padding: var(--space-3) var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}
.pbd-card-title {
  font-size: 1rem;                /* was 0.95rem — promote to body+ for legibility */
  font-weight: var(--font-bold);  /* was semibold — bump per TYPOGRAPHY_OVERHAUL Part 6 */
  color: var(--color-gray-950);
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pbd-card-desc {
  font-size: 0.8125rem;           /* per TYPOGRAPHY_OVERHAUL Part 6 — slight bump */
  color: var(--color-gray-600);
  line-height: 1.5;               /* was 1.45 — same Part 6 spec */
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* was 3; tighter wins consistency */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;              /* reserve 2 lines so empty descs don't shrink the card */
}
.pbd-card-meta {
  font-size: 0.75rem;
  color: var(--color-gray-500);
  margin-top: auto;                                    /* pin to bottom of card */
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-gray-100);         /* TYPOGRAPHY_OVERHAUL: visual separator from desc */
}
/* Fallback art when no thumbnail — show the type icon centered. */
.pbd-card-thumb-fallback {
  font-size: 32px;
  opacity: 0.5;
}

/* ── Unified playbook card (pbdir-card) ──────────────────────
   Same shape used on /playbooks directory, home Most Popular,
   space Featured Playbooks, space Playbooks tab, and search
   results. Per product feedback the cover is a thin accent band
   with a "Playbook" label, not a tall gradient with a letter. */
.pbdir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: 1fr;            /* match .pbd-card-grid — rows lock height */
  gap: 1rem;
}
.pbdir-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-default);
}
.pbdir-card:hover {
  border-color: var(--pb-accent, var(--color-gray-400));
}
.pbdir-card-cover {
  /* Thin accent band — shrunk per product feedback. */
  height: 56px;
  background: var(--pb-accent, #6366f1);
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--pb-accent, #6366f1) 100%, transparent),
    color-mix(in srgb, var(--pb-accent, #6366f1) 70%, #000));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* If a real cover image is supplied, restore full 16:9 frame. */
.pbdir-card-cover.has-image {
  height: auto;
  aspect-ratio: 16 / 9;
  padding: 0;
}
.pbdir-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pbdir-card-body {
  padding: 0.75rem 0.9rem 0.9rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pbdir-card-title {
  font-size: 0.98rem;
  font-weight: var(--font-semibold);
  color: var(--color-gray-950);
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pbdir-card-owner {
  font-size: 0.8rem;
  color: var(--color-gray-600);
  font-style: normal;
}
.pbdir-card-owner strong {
  color: var(--color-gray-950);
  font-weight: var(--font-medium);
}
.pbdir-card-desc {
  font-size: 0.8rem;
  color: var(--color-gray-600);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: normal;
}
.pbdir-card-meta {
  font-size: 0.75rem;
  color: var(--color-gray-500);
  margin-top: auto;
}
.pbdir-card-meta .star {
  color: var(--pb-accent, var(--color-primary));
  font-weight: var(--font-semibold);
}
/* GCMD Library — Tags / pills
 *
 * Two flavors:
 *   .tag .tag-<type>  — content type (video, podcast, article, …)
 *   .tag .tag-topic   — neutral topic tag (Pediatrics, AI Tools, …)
 */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  white-space: nowrap;
  line-height: 1;
  min-height: 22px;
}

/* ── Content type colors ─────────────────────────────────── */
.tag-video       { background: #FEE2E2; color: #991B1B; }
.tag-podcast     { background: #EDE9FE; color: #5B21B6; }
.tag-article     { background: #DBEAFE; color: #1E40AF; }
.tag-infographic { background: #D1FAE5; color: #065F46; }
.tag-guideline   { background: #FEF3C7; color: #92400E; }
.tag-playbook    { background: #FCE7F3; color: #9D174D; }
.tag-document    { background: #F1F5F9; color: #334155; }
.tag-storycast   { background: #E0F2FE; color: #075985; }
.tag-quiz        { background: #ECFDF5; color: #047857; }
.tag-link        { background: #F5F5F4; color: #44403C; }
.tag-tool        { background: #F3E8FF; color: #6B21A8; }

/* ── Topic / neutral tag ─────────────────────────────────── */
.tag-topic {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-200);
}

/* ── Status / state tags ─────────────────────────────────── */
.tag-success  { background: var(--color-success-light); color: #065F46; }
.tag-warning  { background: var(--color-warning-light); color: #92400E; }
.tag-error    { background: var(--color-error-light); color: #991B1B; }
.tag-info     { background: var(--color-secondary-light); color: #075985; }

/* ── Type-badge variant (for thumbnail overlays) ─────────── */
/* Inherits tag-<type> colors via card-type-badge in cards.css.
   White-on-color variant for use on dark thumbs: */
.tag-badge {
  background: rgba(0, 0, 0, 0.7);
  color: var(--color-white);
  backdrop-filter: blur(8px);
}

/* ── Sizes ───────────────────────────────────────────────── */
.tag-sm {
  font-size: 0.6875rem;
  padding: 0 var(--space-2);
  min-height: 18px;
}
.tag-lg {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-4);
  min-height: 28px;
}
/* GCMD Library — Forms, inputs, search */

.input,
.textarea,
.select {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-gray-900);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.input:disabled,
.textarea:disabled,
.select:disabled {
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  cursor: not-allowed;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--color-gray-400);
}

.textarea {
  min-height: 6rem;
  resize: vertical;
}

/* ── Form layout ─────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.form-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-900);
}
.form-help {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}
.form-error {
  font-size: var(--text-xs);
  color: var(--color-error);
}

.input-error,
.input.error {
  border-color: var(--color-error);
}
.input-error:focus,
.input.error:focus {
  box-shadow: 0 0 0 3px var(--color-error-light);
}

/* ── Search bar (rounded pill style) ─────────────────────── */
.search-bar {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 560px;
}
.search-bar .search-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-12) 0 var(--space-12);
  font-size: var(--text-base);
  color: var(--color-gray-900);
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}
.search-bar .search-input::placeholder { color: var(--color-gray-400); }
.search-bar .search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.search-bar .search-icon {
  position: absolute;
  left: var(--space-4);
  width: 20px;
  height: 20px;
  color: var(--color-gray-500);
  pointer-events: none;
}
.search-bar .search-clear {
  position: absolute;
  right: var(--space-3);
  width: 28px;
  height: 28px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--color-gray-500);
  background: transparent;
}
.search-bar .search-clear:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}
.search-bar.has-value .search-clear { display: inline-flex; }

/* ── Checkbox + Radio ────────────────────────────────────── */
.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-gray-900);
  cursor: pointer;
}
.checkbox input,
.radio input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ── Touch targets on mobile ─────────────────────────────── */
@media (max-width: 640px) {
  .input,
  .select { min-height: 44px; }
  .search-bar .search-input { height: 52px; }
}
/* GCMD Library — Segment control (pill-style tab switcher)
 *
 * Replaces the legacy "Articles (147) | Videos (191)" text tabs with
 * a proper segment control like Apple/iOS. Mobile-friendly with
 * horizontal scroll on overflow.
 */

.segment-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  padding: var(--space-1);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.segment-control::-webkit-scrollbar { display: none; }

.segment-control button,
.segment-control a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}

.segment-control button:hover,
.segment-control a:hover {
  color: var(--color-gray-900);
}

.segment-control button.active,
.segment-control a.active,
.segment-control button[aria-selected='true'],
.segment-control a[aria-current='true'] {
  background: var(--color-white);
  color: var(--color-gray-950);
  border: 1px solid var(--color-gray-300);
  font-weight: var(--font-semibold);
}

.segment-control .segment-count {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
}
.segment-control button.active .segment-count,
.segment-control a.active .segment-count,
.segment-control button[aria-selected='true'] .segment-count {
  color: var(--color-gray-700);
}

/* ── Sizes ───────────────────────────────────────────────── */
.segment-control-sm button,
.segment-control-sm a {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  min-height: 28px;
}
.segment-control-lg button,
.segment-control-lg a {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-base);
  min-height: 44px;
}

/* ── Full width variant ──────────────────────────────────── */
.segment-control-block {
  display: flex;
  width: 100%;
}
.segment-control-block button,
.segment-control-block a {
  flex: 1;
  justify-content: center;
}
/* GCMD Library — Skeleton loading states
 *
 * Use these in place of "Loading..." text. The shimmer animation
 * (defined in tokens/effects.css) sweeps across a gradient.
 *
 * Apply .skeleton to any block, or use the preset card/text/avatar
 * helpers for common shapes.
 */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-100) 25%,
    var(--color-gray-200) 50%,
    var(--color-gray-100) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
  color: transparent;
  user-select: none;
}

/* ── Preset shapes ───────────────────────────────────────── */
.skeleton-text {
  height: 0.85em;
  margin: 0.25em 0;
  border-radius: var(--radius-sm);
}
.skeleton-text-sm { height: 0.7em; }
.skeleton-text-lg { height: 1.1em; }

.skeleton-line {
  display: block;
  width: 100%;
  height: 0.85em;
  margin: 0.25em 0;
  border-radius: var(--radius-sm);
}
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-80 { width: 80%; }

.skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
}
.skeleton-avatar-lg { width: 96px; height: 96px; }

.skeleton-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.skeleton-button {
  width: 120px;
  height: 40px;
  border-radius: var(--radius-md);
}

/* ── Composite: skeleton content card ────────────────────── */
.skeleton-card {
  background: var(--color-surface);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.skeleton-card .skeleton-thumb {
  border-radius: 0;
}
.skeleton-card-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* GCMD Library — Global header (NEW)
 *
 * Currently the public site has no persistent navigation. This adds a
 * sticky header: logo · nav · search · avatar. See DESIGN_SYSTEM_PLAN.md
 * §6.1.
 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: var(--header-height);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  transition: box-shadow var(--duration-base) var(--ease-default);
}

/* Once we leave the top of the page, deepen the bottom border so
   the header still feels grounded. No shadow — keeping the
   thin-border aesthetic everywhere. */
.site-header.scrolled {
  border-bottom-color: var(--color-gray-300);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: var(--container-max);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--container-padding);
}

/* ── Logo / wordmark ─────────────────────────────────────── */
.site-logo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  text-decoration: none;
  flex: 0 0 auto;
}
.site-logo .logo-mark {
  color: var(--color-primary);
}
.site-logo .logo-suffix {
  color: var(--color-gray-700);
  font-weight: var(--font-medium);
}
.site-logo:hover .logo-mark { color: var(--color-primary-hover); }

/* ── Navigation ──────────────────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}
.site-nav a {
  position: relative;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-700);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default);
}
.site-nav a:hover {
  color: var(--color-gray-950);
  background: var(--color-gray-100);
}
.site-nav a.active,
.site-nav a[aria-current='page'] {
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}
.site-nav a.active::after,
.site-nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  bottom: -1px;   /* sit on the bottom border */
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px 2px 0 0;
}

/* ── Right cluster: search + avatar ──────────────────────── */
.site-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.site-header-search {
  position: relative;
  width: 320px;
  max-width: 100%;
}
.site-header-search .search-input {
  height: 40px;
  font-size: var(--text-sm);
}
.site-header-search .search-icon {
  left: var(--space-3);
  width: 18px;
  height: 18px;
}

/* Compact icon-button version for narrow screens */
.site-header-search-icon {
  display: none;
}

/* ── Avatar / sign in ────────────────────────────────────── */
.site-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid var(--color-gray-200);
  background: var(--color-gray-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-gray-700);
  cursor: pointer;
  text-decoration: none;
}
.site-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.site-header-avatar:hover {
  border-color: var(--color-primary);
}

/* ── Mobile hamburger ────────────────────────────────────── */
.site-header-menu {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: transparent;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-700);
}
.site-header-menu:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-950);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .site-header-search { width: 200px; }
}
@media (max-width: 768px) {
  .site-header { height: var(--header-height-mobile); }
  .site-nav { display: none; }
  .site-header-search { display: none; }
  .site-header-search-icon { display: inline-flex; }
  .site-header-menu { display: inline-flex; }
}
/* GCMD Library — Global footer (NEW)
 *
 * Site-wide footer. Dark, four-column layout that collapses to single
 * column on mobile. See DESIGN_SYSTEM_PLAN.md §6.2.
 */

.site-footer {
  background: var(--color-gray-950);
  color: var(--color-gray-400);
  padding: var(--space-16) 0 var(--space-8);
  margin-top: var(--space-20);   /* breathing room from page content */
}

.site-footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ── Brand column ────────────────────────────────────────── */
.site-footer-brand .footer-logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-extrabold);
  color: var(--color-white);
  margin-bottom: var(--space-3);
}
.site-footer-brand .footer-logo .logo-mark { color: var(--color-primary-200); }
.site-footer-brand .footer-tagline {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  max-width: 280px;
  margin-bottom: var(--space-6);
}
.site-footer-brand .footer-socials {
  display: flex;
  gap: var(--space-3);
}
.site-footer-brand .footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-300);
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}
.site-footer-brand .footer-socials a:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ── Link columns ────────────────────────────────────────── */
.site-footer-column h4 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-4);
}
.site-footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-footer-column a {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
.site-footer-column a:hover {
  color: var(--color-white);
}

/* ── Bottom bar ──────────────────────────────────────────── */
.site-footer-bottom {
  max-width: var(--container-max);
  margin: var(--space-12) auto 0;
  padding: var(--space-6) var(--container-padding) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.site-footer-bottom p {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin: 0;
}
.site-footer-bottom .footer-legal {
  display: flex;
  gap: var(--space-4);
}
.site-footer-bottom .footer-legal a {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  text-decoration: none;
}
.site-footer-bottom .footer-legal a:hover {
  color: var(--color-gray-300);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .site-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .site-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .site-footer { padding: var(--space-12) 0 var(--space-6); }
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .site-footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* GCMD Library — Page shell shared by listing + detail pages
 *
 * Provides:
 *   .breadcrumb       — Library > Space > Item
 *   .page-shell       — content max-width wrapper under the header
 *   .page-header      — title + meta + actions row
 *   .page-section     — labeled section with title + optional link
 *   .page-toolbar     — segment-control + sort dropdown + view toggle
 */

.page-shell {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-padding) var(--space-16);
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-6);
}
.breadcrumb a {
  color: var(--color-gray-600);
  text-decoration: none;
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}
.breadcrumb a:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
}
.breadcrumb .breadcrumb-sep {
  color: var(--color-gray-400);
  user-select: none;
}
.breadcrumb .breadcrumb-current {
  color: var(--color-gray-900);
  font-weight: var(--font-medium);
}

/* ── Page header ─────────────────────────────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.page-header h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-950);
  margin: 0;
}
.page-header .page-header-count {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-gray-500);
  margin-left: var(--space-2);
  font-variant-numeric: tabular-nums;
}
.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ── Page section ────────────────────────────────────────── */
.page-section {
  margin-top: var(--space-10);
}
.page-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.page-section-header h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-950);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}
.page-section-header .page-section-link {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.page-section-header .page-section-link::after { content: '→'; }
.page-section-header .page-section-link:hover { gap: var(--space-2); }

/* ── Toolbar (segment + sort + view toggle) ──────────────── */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.page-toolbar-left { flex: 1; min-width: 0; }
.page-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sort-select {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-700);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: 36px;
}
.sort-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.view-toggle {
  display: inline-flex;
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: 2px;
}
.view-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-gray-500);
  cursor: pointer;
}
.view-toggle button:hover { color: var(--color-gray-900); }
.view-toggle button.active {
  background: var(--color-white);
  color: var(--color-gray-950);
  border: 1px solid var(--color-gray-200);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-shell { padding-top: var(--space-6); }
  .page-header h1 { font-size: var(--text-3xl); }
  .page-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .page-toolbar-left,
  .page-toolbar-right { width: 100%; }
  .page-toolbar-right { justify-content: space-between; }
}
/* GCMD Library — Home page (Phase 3 redesign)
 *
 * Sections (top to bottom):
 *   1. Hero  — full-width gradient, "Discover Medical Knowledge",
 *              centered search bar, popular topic pills.
 *   2. Featured Spaces — horizontal scroll of doctor cards.
 *   3. Recently Added — segment-control filter + 4-col card grid.
 *   4. Browse by Topic — visual topic tiles.
 *
 * Layout is built on top of the design-system token + component CSS.
 * Nothing here uses hardcoded hex values — everything goes through
 * tokens so we can re-theme via CSS variables alone.
 *
 * See DESIGN_SYSTEM_PLAN.md §7.1.
 */

/* ── Page wrapper ─────────────────────────────────────────── */
.home-page {
  background: var(--color-gray-50);
}

/* ── 1) Hero ──────────────────────────────────────────────── */
.home-hero {
  position: relative;
  padding: var(--space-20) var(--container-padding) var(--space-16);
  background:
    radial-gradient(ellipse at 50% 0%,
                    var(--color-primary-light) 0%,
                    transparent 60%),
    linear-gradient(180deg,
                    var(--color-white) 0%,
                    var(--color-gray-50) 100%);
  overflow: hidden;
}

.home-hero::before {
  /* Subtle indigo bloom on the side for visual interest */
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle,
                              rgba(79, 70, 229, 0.08) 0%,
                              transparent 70%);
  pointer-events: none;
}

.home-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.home-hero h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-950);
  margin-bottom: var(--space-4);
  line-height: 1.1;
}

.home-hero .home-hero-sub {
  font-size: var(--text-lg);
  color: var(--color-gray-600);
  margin-bottom: var(--space-8);
}

.home-hero .search-bar {
  margin: 0 auto var(--space-6);
}
.home-hero .search-bar .search-input {
  height: 56px;
  font-size: var(--text-lg);
  border-radius: var(--radius-full);
  border-color: var(--color-gray-200);
  border-width: 1px;
}
.home-hero .search-bar .search-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.home-hero .search-icon { left: var(--space-5); }

.home-hero-popular {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.home-hero-popular-label {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-right: var(--space-2);
}
.home-hero-popular a {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-default);
}
.home-hero-popular a:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* ── Section wrappers ─────────────────────────────────────── */
.home-section {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-12) var(--container-padding);
}

.home-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.home-section-header h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-950);
  margin: 0;
}
.home-section-header .home-section-link {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: gap var(--duration-fast) var(--ease-default);
}
.home-section-header .home-section-link:hover {
  gap: var(--space-2);
}
.home-section-header .home-section-link::after {
  content: '→';
}

/* ── 2) Featured Spaces — horizontal scroll ───────────────── */
.home-spaces-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
}

/* Small variant of the card-space component used in the rail */
.home-spaces-rail .card-space {
  padding: var(--space-5);
}
.home-spaces-rail .card-space .space-avatar {
  width: 80px;
  height: 80px;
  margin-bottom: var(--space-3);
}

/* ── 3) Recently Added — segment + grid ───────────────────── */
.home-recent-controls {
  display: flex;
  justify-content: flex-start;
  margin-bottom: var(--space-6);
}

.home-recent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.home-recent-loadmore {
  text-align: center;
  margin-top: var(--space-8);
}

/* ── 4) Browse by Topic — visual tiles ────────────────────── */
.home-topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.home-topic-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  height: 180px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg,
                              var(--topic-color-from, var(--color-primary)),
                              var(--topic-color-to, var(--color-primary-hover)));
  color: var(--color-white);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-default),
              box-shadow var(--duration-base) var(--ease-default);
}
.home-topic-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  color: var(--color-white);
}
.home-topic-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.25));
  pointer-events: none;
}
.home-topic-tile .topic-icon {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: var(--text-3xl);
  opacity: 0.55;
}
.home-topic-tile .topic-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-1);
  position: relative;
  z-index: 1;
}
.home-topic-tile .topic-desc {
  font-size: var(--text-sm);
  opacity: 0.85;
  position: relative;
  z-index: 1;
}

/* Per-topic color variants */
.topic-pediatric    { --topic-color-from: #6366F1; --topic-color-to: #4338CA; }
.topic-cardiology   { --topic-color-from: #DC2626; --topic-color-to: #991B1B; }
.topic-ai          { --topic-color-from: #06B6D4; --topic-color-to: #0E7490; }
.topic-surgery     { --topic-color-from: #10B981; --topic-color-to: #047857; }
.topic-research    { --topic-color-from: #8B5CF6; --topic-color-to: #6D28D9; }
.topic-education   { --topic-color-from: #F59E0B; --topic-color-to: #B45309; }

/* ── Empty state ──────────────────────────────────────────── */
.home-empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-gray-500);
  background: var(--color-white);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .home-recent-grid  { grid-template-columns: repeat(3, 1fr); }
  .home-topics-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .home-hero {
    padding: var(--space-12) var(--container-padding) var(--space-10);
  }
  .home-hero h1 { font-size: var(--text-4xl); }
  .home-hero .home-hero-sub { font-size: var(--text-base); }
  .home-recent-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .home-hero h1 { font-size: var(--text-3xl); }
  .home-recent-grid  { grid-template-columns: 1fr; }
  .home-topics-grid  { grid-template-columns: 1fr; }
  .home-topic-tile   { height: 140px; }
}

/* ── Search results playbook sub-grid ──────────────────────── */
.search-pbdir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}

/* ── Search-results "Spaces" row (#2 RECOVERY) ───────────────────
   Compact horizontal row above the Playbooks/Videos sections so
   matching spaces are the first hit when a user types e.g. "Ponsky".
   Doctor spaces: circular avatar. Institutional spaces (kind ==
   'institutional'): square logo with rounded corners. */
.search-spaces-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.search-space-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-default);
}
.search-space-card:hover { border-color: var(--color-primary); }
.search-space-card-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;        /* default: doctor space — circle */
  object-fit: cover;
  background: var(--color-gray-100);
}
.search-space-card.is-institutional .search-space-card-avatar {
  border-radius: var(--radius-md);  /* institutional: square w/ rounded */
}
.search-space-card-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  color: var(--color-gray-600);
  font-size: 1.25rem;
}
.search-space-card-body { min-width: 0; }
.search-space-card-name {
  font-weight: var(--font-bold);
  color: var(--color-gray-950);
  font-size: 0.95rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-space-card-sub {
  font-size: 0.8125rem;
  color: var(--color-gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* GCMD Library — Listing pages (Phase 4)
 *
 * Recently Added, Most Popular, Category views. The page-shell.css
 * provides the breadcrumb / header / toolbar primitives; this file
 * adds the grid + list-view + pagination specifics.
 *
 * See DESIGN_SYSTEM_PLAN.md §7.2.
 */

.listing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

/* List-view mode (toggle via view-toggle) */
.listing-grid.view-list {
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.listing-grid.view-list .card {
  flex-direction: row;
}
.listing-grid.view-list .card .card-thumb {
  width: 240px;
  flex: 0 0 240px;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  overflow: hidden;
}
.listing-grid.view-list .card .card-body {
  padding: var(--space-4) var(--space-5);
  flex: 1;
}
.listing-grid.view-list .card .card-title {
  font-size: var(--text-lg);
  -webkit-line-clamp: 2;
}

.listing-loadmore {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
}
.listing-loadmore-count {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
}

.listing-empty {
  text-align: center;
  padding: var(--space-16) var(--space-4);
  color: var(--color-gray-500);
  background: var(--color-white);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) { .listing-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  {
  .listing-grid { grid-template-columns: 1fr; }
  .listing-grid.view-list .card { flex-direction: column; }
  .listing-grid.view-list .card .card-thumb {
    width: 100%;
    flex: 0 0 auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}
/* GCMD Library — Video / content detail page (Phase 4)
 *
 * Two-column layout: main (65%) + sidebar (35%). The main column
 * contains the player, stats bar, author card, title, timestops,
 * and description. The sidebar holds "Related Content" and "From
 * This Space" cards.
 *
 * See DESIGN_SYSTEM_PLAN.md §7.3.
 */

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-8);
  margin-top: var(--space-4);
}

/* ── Main column ─────────────────────────────────────────── */
.detail-main { min-width: 0; }

/* Video player wrapper — preserves 16:9 even before player loads. */
.detail-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-gray-950);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-200);
  overflow: hidden;
}
.detail-player iframe,
.detail-player video,
.detail-player img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Stats / action bar ─────────────────────────────────── */
.detail-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.detail-stats-counts {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  font-variant-numeric: tabular-nums;
}
.detail-stats-counts strong {
  font-weight: var(--font-semibold);
  color: var(--color-gray-900);
}
.detail-stats-counts .stat-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: var(--space-1);
  color: var(--color-gray-500);
}
.detail-stats-actions {
  display: flex;
  gap: var(--space-2);
}

/* The like-button uses .btn-ghost so it picks up the same hover
   states as other buttons; the icon turns red on .liked. */
.btn-like .heart-icon { width: 18px; height: 18px; }
.btn-like.liked       { color: var(--color-error); }
.btn-like.liked .heart-icon { fill: var(--color-error); stroke: var(--color-error); }

/* ── Author card ─────────────────────────────────────────── */
.detail-author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}
.detail-author-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  flex: 0 0 auto;
  overflow: hidden;
}
.detail-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-author-info  { flex: 1; min-width: 0; }
.detail-author-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-gray-950);
  margin: 0;
}
.detail-author-role {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin: 0;
}

/* ── Title block (between author and timestops) ──────────── */
.detail-title {
  margin-top: var(--space-6);
}
.detail-title h1 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-950);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-tight);
}
.detail-title-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
}
.detail-title-meta .dot { width: 4px; height: 4px; background: currentColor; border-radius: 50%; opacity: 0.5; }

/* ── Timestops ───────────────────────────────────────────── */
.detail-timestops {
  margin-top: var(--space-8);
}
.detail-timestops h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-gray-950);
  margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-gray-200);   /* TYPOGRAPHY_OVERHAUL — section underline */
  padding-bottom: var(--space-2);
}
.detail-timestops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}
.timestop-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-default),
              background  var(--duration-fast) var(--ease-default);
}
.timestop-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.timestop-time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  /* TYPOGRAPHY_OVERHAUL Part 8: mono + chip background so timestamps look like timestamps */
  font-family: var(--font-mono);
  background: rgba(79, 70, 229, 0.08);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.timestop-label {
  font-size: var(--text-sm);
  color: var(--color-gray-900);
  line-height: var(--leading-tight);
}

/* ── Description / Topic Overview ─────────────────────────── */
.detail-description {
  margin-top: var(--space-8);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}
.detail-description h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-gray-950);
  margin-bottom: var(--space-3);
}
.detail-description p {
  font-size: var(--text-base);
  color: var(--color-gray-700);
  line-height: var(--leading-relaxed);
}

/* ── Sidebar ─────────────────────────────────────────────── */
.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}
.detail-sidebar-section h3 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-gray-500);
  margin-bottom: var(--space-3);
}
.detail-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The compact card variant from cards.css (.card-compact) is the
   default in the sidebar — small thumb + title + meta. */

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .detail-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .detail-sidebar {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-4);
  }
  .detail-sidebar-section { flex: 0 0 320px; }
}
@media (max-width: 640px) {
  .detail-title h1 { font-size: var(--text-2xl); }
  .detail-stats {
    flex-direction: column;
    align-items: stretch;
  }
  .detail-stats-actions { justify-content: space-around; }
  .detail-sidebar {
    flex-direction: column;
  }
  .detail-sidebar-section { flex: 1 1 auto; }
}
/* GCMD Library — Spaces directory (Phase 5, §7.4)
 *
 * Replaces the current /spaces page (gray placeholder photos, simple
 * list) with: hero + Your Spaces (logged-in) + Browse Doctor Spaces
 * grid of circular avatar cards.
 */

.spaces-page {
  background: var(--color-gray-50);
}

/* ── Hero ─────────────────────────────────────────────────── */
.spaces-hero {
  padding: var(--space-16) var(--container-padding) var(--space-12);
  background:
    radial-gradient(ellipse at 50% 0%,
                    var(--color-primary-light) 0%,
                    transparent 60%),
    var(--color-white);
  text-align: center;
}
.spaces-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}
.spaces-hero h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-950);
  margin-bottom: var(--space-3);
}
.spaces-hero p {
  font-size: var(--text-lg);
  color: var(--color-gray-600);
  max-width: 560px;
  margin: 0 auto var(--space-6);
}
.spaces-hero-actions {
  display: inline-flex;
  gap: var(--space-3);
}

/* ── Section wrapper ──────────────────────────────────────── */
.spaces-section {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-10) var(--container-padding);
}
.spaces-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.spaces-section-header h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-950);
  margin: 0;
}

/* ── Card grid ────────────────────────────────────────────── */
.spaces-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

/* Variant card — fixes the photo to 120px and centers everything */
.spaces-grid .card-space .space-avatar {
  width: 120px;
  height: 120px;
}
.spaces-grid .card-space .space-status {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}
.spaces-grid .card-space .space-status-published { background: var(--color-success-light); color: #065F46; }
.spaces-grid .card-space .space-status-review    { background: var(--color-warning-light); color: #92400E; }
.spaces-grid .card-space .space-status-draft     { background: var(--color-gray-100);     color: var(--color-gray-600); }

/* ── Empty / no-results ───────────────────────────────────── */
.spaces-empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-gray-500);
  background: var(--color-white);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
}

@media (max-width: 1024px) { .spaces-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  {
  .spaces-grid { grid-template-columns: repeat(2, 1fr); }
  .spaces-hero { padding: var(--space-10) var(--container-padding) var(--space-8); }
  .spaces-hero h1 { font-size: var(--text-4xl); }
}
@media (max-width: 480px)  {
  .spaces-grid { grid-template-columns: 1fr; }
  .spaces-grid .card-space .space-avatar { width: 96px; height: 96px; }
}

/* ── Status pill (draft / review / published) ──────────────── */
.status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: capitalize;
  background: var(--color-gray-100);
  color: var(--color-gray-700);
}
.space-status-draft     { background: var(--color-gray-100); color: var(--color-gray-700); }
.space-status-review    { background: #FEF3C7; color: #92400E; }
.space-status-published { background: #D1FAE5; color: #065F46; }

/* ── 4-step "How a Doctor Space comes to life" process ──────── */
.spaces-process .spaces-section-sub {
  margin-top: var(--space-1);
  font-size: var(--text-base);
  color: var(--color-gray-600);
}
.spaces-process-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}
.spaces-process-step {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}
.spaces-process-step .step-num {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--font-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
}
.spaces-process-step h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-gray-950);
}
.spaces-process-step p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
}
/* GCMD Library — Space profile (Phase 5, §7.5)
 *
 * Replaces the Linktree-style centered single-column page with a
 * Spotify-artist-style page:
 *   • Horizontal hero banner (photo left, info right) tinted with
 *     the space's accent color
 *   • Tab navigation: Overview | Resources (count) | Playbooks (count)
 *   • Overview: bio, featured playbooks rail, latest content grid,
 *     "Areas of Focus" pillar cards
 *
 * Theming: every accent-tinted element uses var(--space-accent). The
 * space sets that variable inline on the .space-profile wrapper so
 * the rest of the page stays brand-consistent.
 *
 * See DESIGN_SYSTEM_PLAN.md §7.5 and §8.
 */

.space-profile {
  /* Default to brand primary if the inline style didn't set one */
  --space-accent:       var(--color-primary);
  --space-accent-hover: var(--color-primary-hover);
  --space-accent-light: var(--color-primary-light);
  --space-accent-rgb:   79, 70, 229;
  background: var(--color-gray-50);
}

/* ── Hero banner ──────────────────────────────────────────── */
.space-hero {
  position: relative;
  padding: var(--space-12) 0 var(--space-10);
  background: linear-gradient(135deg,
              rgba(var(--space-accent-rgb), 0.18) 0%,
              rgba(var(--space-accent-rgb), 0.05) 60%,
              transparent 100%),
              var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  overflow: hidden;
}
.space-hero::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle,
              rgba(var(--space-accent-rgb), 0.15) 0%,
              transparent 70%);
  pointer-events: none;
}

.space-hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  position: relative;
  z-index: 1;
}

.space-hero-avatar {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--color-white);
  border: 4px solid var(--color-white);
  outline: 1px solid var(--color-gray-200);
  outline-offset: -4px;
}
.space-hero-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.space-hero-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--space-accent);
  color: var(--color-white);
  font-size: var(--text-5xl);
  font-weight: var(--font-extrabold);
}

.space-hero-info { flex: 1; min-width: 0; }
.space-hero-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--space-accent);
  margin-bottom: var(--space-1);
}
.space-hero-info h1 {
  font-size: var(--text-5xl);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-950);
  margin-bottom: var(--space-2);
  line-height: 1.05;
}
.space-hero-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  color: var(--color-gray-700);
  margin-bottom: var(--space-4);
}
.space-hero-sub .dot { width: 4px; height: 4px; background: currentColor; border-radius: 50%; opacity: 0.4; }

.space-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.space-hero-actions .btn-space-primary {
  background: var(--space-accent);
  color: var(--color-white);
}
.space-hero-actions .btn-space-primary:hover {
  background: var(--space-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--space-accent-rgb), 0.30);
}
.space-hero-actions .btn-secondary { background: var(--color-white); }

/* ── Tabs ─────────────────────────────────────────────────── */
.space-tabs {
  position: sticky;
  top: var(--header-height);
  z-index: 10;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
}
.space-tabs-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.space-tabs-inner::-webkit-scrollbar { display: none; }
.space-tabs a,
.space-tabs .space-tab {
  position: relative;
  padding: var(--space-4) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-gray-600);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--duration-fast) var(--ease-default);
}
.space-tabs a:hover,
.space-tabs .space-tab:hover { color: var(--color-gray-950); }
.space-tabs a.active,
.space-tabs .space-tab.active,
.space-tabs a[aria-current='page'],
.space-tabs .space-tab[aria-current='page'] {
  color: var(--color-gray-950);
}
.space-tabs a.active::after,
.space-tabs .space-tab.active::after,
.space-tabs a[aria-current='page']::after,
.space-tabs .space-tab[aria-current='page']::after {
  content: '';
  position: absolute;
  bottom: 0; left: var(--space-4); right: var(--space-4);
  height: 3px;
  background: var(--space-accent);
  border-radius: 2px 2px 0 0;
}
/* Resources / Playbooks pane grid (4-col, shared shape with home). */
.space-resources-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1024px) {
  .space-resources-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .space-resources-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .space-resources-grid { grid-template-columns: 1fr; }
}
.space-section-count {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-gray-500);
}
.space-tabs .tab-count {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-gray-500);
  font-variant-numeric: tabular-nums;
}

/* ── Content body ─────────────────────────────────────────── */
.space-body {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-10) var(--container-padding);
}

.space-section { margin-bottom: var(--space-10); }
.space-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-5);
}
.space-section-header h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-950);
  margin: 0;
}
.space-section-header .section-link {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--space-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.space-section-header .section-link::after { content: '→'; }
.space-section-header .section-link:hover { gap: var(--space-2); }

/* ── Bio block — sized to match the unified card body text ───── */
.space-bio {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-700);
}
.space-bio p + p { margin-top: var(--space-2); }

/* Read-more toggle — flat link, no shadow / button frame. */
.space-bio-toggle {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--space-accent);
  background: transparent;
  border: none;
  padding: 0;
  margin-top: var(--space-2);
  cursor: pointer;
  text-decoration: none;
}
.space-bio-toggle:hover { text-decoration: underline; }

/* Resources tab — card descriptions should match the home unified
   size, not the larger default content paragraph. */
.space-resources-grid .card-desc,
.pbdir-grid .pbdir-card-desc {
  font-size: 0.8rem;
  line-height: 1.45;
}

/* ── Featured Playbooks rail ──────────────────────────────── */
.space-playbooks-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}

/* ── Latest content grid (Overview's preview) ─────────────── */
.space-latest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

/* ── Areas of Focus / Pillars ─────────────────────────────── */
.space-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.space-pillar {
  position: relative;
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--ease-default);
}
.space-pillar:hover {
  border-color: var(--color-gray-400);
}
/* Icon block — small filled square, accent-tinted bg, accent glyph.
   Replaces the old colored top-border strap. */
.space-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: var(--text-2xl);
  background: rgba(var(--space-accent-rgb), 0.12);
  color: var(--space-accent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  line-height: 1;
}
.space-pillar-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-gray-950);
  margin-bottom: var(--space-2);
}
.space-pillar-desc {
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  margin-bottom: var(--space-4);
  line-height: var(--leading-normal);
}
.space-pillar-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.space-pillar-links a {
  font-size: var(--text-sm);
  color: var(--space-accent);
  text-decoration: none;
}
.space-pillar-links a:hover { text-decoration: underline; }

/* ── Social links rail ────────────────────────────────────── */
.space-socials {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-5) 0;
}
.space-socials a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-700);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-default);
}
.space-socials a:hover {
  border-color: var(--space-accent);
  background: var(--space-accent-light);
  color: var(--space-accent);
}

/* ── Share / QR component ────────────────────────────────────── */
.space-share {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
}
.space-share-qr {
  flex: 0 0 auto;
  padding: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
}
.space-share-qr img { display: block; width: 160px; height: 160px; }
.space-share-body { flex: 1; min-width: 0; }
.space-share-url {
  font-size: var(--text-sm);
  color: var(--color-gray-700);
  word-break: break-all;
  margin: 0 0 var(--space-3);
}
.space-share-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .space-share { flex-direction: column; align-items: stretch; }
  .space-share-qr { align-self: center; }
}

/* ── Inline-editor overlay (visible only to owners) ──────────── */
.space-edit-toolbar {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-950);
  color: var(--color-white);
  border-radius: var(--radius-full);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  font-size: var(--text-sm);
}
.space-edit-toolbar a,
.space-edit-toolbar button {
  color: var(--color-white);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  text-decoration: none;
  cursor: pointer;
}
.space-edit-toolbar a:hover,
.space-edit-toolbar button:hover {
  background: rgba(255,255,255,0.1);
}

/* ── Resources category jump-tabs ───────────────────────────── */
.cat-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
  position: sticky;
  top: calc(var(--header-height, 64px) + 44px);
  background: var(--color-gray-50);
  z-index: 5;
}
.cat-tab {
  appearance: none;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-700);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}
.cat-tab:hover {
  border-color: var(--color-gray-400);
  color: var(--color-gray-950);
}
.cat-tab.active {
  background: var(--space-accent, var(--color-primary));
  border-color: var(--space-accent, var(--color-primary));
  color: var(--color-white);
}
.cat-tab .cat-count {
  font-weight: var(--font-normal);
  opacity: 0.75;
  margin-left: 2px;
}

/* ── Pagination controls ─────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.page-btn {
  appearance: none;
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-800);
  font-family: inherit;
  font-size: var(--text-sm);
  padding: 6px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.page-btn:hover:not(:disabled) {
  border-color: var(--space-accent, var(--color-gray-500));
}
.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.page-info {
  font-size: var(--text-sm);
  color: var(--color-gray-700);
}

/* ── Sticky contact bar (slides in after hero scrolls past) ──────── */
.space-sticky-bar {
  position: fixed;
  top: var(--header-height, 64px);
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--duration-base) var(--ease-default),
              opacity var(--duration-base) var(--ease-default);
}
.space-sticky-bar.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.space-sticky-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2) var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.space-sticky-left {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.space-sticky-left strong {
  font-size: var(--text-base);
  color: var(--color-gray-950);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.space-sticky-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.space-sticky-avatar-fallback {
  background: var(--space-accent);
  color: var(--color-white);
  font-weight: var(--font-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
}
.space-sticky-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.btn-sm {
  padding: 6px 12px;
  font-size: var(--text-sm);
  min-height: 32px;
}
@media (max-width: 640px) {
  .space-sticky-actions .btn-secondary { display: none; }
}

/* ── Bio fade-out gradient when collapsed ───────────────────────── */
.space-bio { transition: max-height var(--duration-base) var(--ease-default); }
.space-bio-fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 3.5em;
  background: linear-gradient(to bottom, transparent, var(--color-white) 80%);
  pointer-events: none;
}

/* ── Empty state ──────────────────────────────────────────── */
.space-empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-gray-500);
  background: var(--color-white);
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .space-latest-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .space-hero { padding: var(--space-8) 0; }
  .space-hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
  }
  .space-hero-avatar { width: 120px; height: 120px; }
  .space-hero-info h1 { font-size: var(--text-3xl); }
  .space-hero-sub { justify-content: center; }
  .space-hero-actions { justify-content: center; }
  .space-latest-grid  { grid-template-columns: repeat(2, 1fr); }
  .space-pillars-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .space-latest-grid { grid-template-columns: 1fr; }
}

/* ── Pagination current/total emphasis ─────────────────────── */
.page-total {
  font-weight: var(--font-semibold);
  color: var(--color-gray-700);
}

/* ── Resources toolbar: type tabs + search + sort ────────────── */
.res-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) 0 var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
}
.res-toolbar-types {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  background: var(--color-gray-100);
  border-radius: var(--radius-full);
  padding: 4px;
}
.res-type-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-gray-700);
  font-family: inherit;
  font-size: var(--text-sm);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}
.res-type-btn:hover { color: var(--color-gray-950); }
.res-type-btn.active {
  background: var(--color-white);
  color: var(--color-gray-950);
  font-weight: var(--font-semibold);
}
.res-type-btn .res-count {
  font-weight: var(--font-normal);
  opacity: 0.7;
  margin-left: 2px;
}
.res-toolbar-controls {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}
.res-search {
  font-family: inherit;
  font-size: var(--text-sm);
  padding: 6px 12px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  min-width: 200px;
}
.res-search:focus {
  outline: none;
  border-color: var(--color-primary);
}
.res-sort {
  font-family: inherit;
  font-size: var(--text-sm);
  padding: 6px 10px;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
@media (max-width: 768px) {
  .res-toolbar { flex-direction: column; align-items: stretch; }
  .res-search { width: 100%; }
}
/* GCMD Library — Admin panel polish (Phase 6, §9)
 *
 * Layered on top of templates/admin/_layout.html. The legacy layout's
 * inline <style> still defines the sidebar / topbar / shell, but this
 * file replaces hardcoded values with design-system tokens for the
 * pieces that matter most (stat cards, tables, buttons, badges) and
 * adds the missing affordances:
 *   • Colored left border per stat-card type + trend arrow
 *   • Zebra-striped, hover-highlighted activity tables
 *   • Button styles aligned to the public-site .btn-* tokens
 *   • Card border-radius / shadow tokens
 *
 * The inline <style> in _layout.html loads BEFORE design-system.css
 * so these rules win on specificity ties via load order.
 */

/* ── Sidebar — re-skin with tokens but keep the structure ─── */
.admin-sidebar {
  background: var(--color-gray-950) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-sidebar-brand {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--font-extrabold);
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
.admin-nav-link {
  font-family: var(--font-sans);
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}
.admin-nav-link.active {
  border-left-color: var(--color-primary) !important;
  background: rgba(79, 70, 229, 0.18) !important;
}
.admin-nav-sublink.active {
  border-left-color: var(--color-primary) !important;
}
.admin-role-pill {
  background: rgba(99, 102, 241, 0.25) !important;
  color: #e0e7ff !important;
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-wider);
}

/* ── Topbar ──────────────────────────────────────────────── */
.admin-topbar {
  background: var(--color-white) !important;
  border-bottom-color: var(--color-gray-200) !important;
}

/* ── Content area ────────────────────────────────────────── */
.admin-content {
  background: var(--color-gray-50);
}
.admin-content,
.admin-card,
.admin-panel,
.admin-action-card,
.admin-stat,
.admin-table-wrap {
  font-family: var(--font-sans);
}

/* ── Cards: clean thin borders, no shadows ────────────────── */
.admin-card,
.admin-panel,
.admin-action-card,
.admin-stat,
.admin-table-wrap {
  border-radius: var(--radius-lg) !important;
  border-color: var(--color-gray-200) !important;
  box-shadow: none !important;
}

/* ── Stat cards: subtle accent dot before the metric label
   instead of a 4-px colored left strap. The strap read as a
   stock AI-design trope. ─────────────────────────────────── */
.admin-stat {
  position: relative;
  padding: var(--space-4) var(--space-5) !important;
}
.admin-stat-label {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs) !important;
  color: var(--color-gray-500) !important;
  text-transform: uppercase;
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
}
.admin-stat-label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  flex: 0 0 auto;
}
.admin-stat-value {
  font-size: var(--text-3xl) !important;
  font-weight: var(--font-bold) !important;
  color: var(--color-gray-950) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: var(--space-2) !important;
}
.admin-stat-sub {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin-top: var(--space-1);
  font-variant-numeric: tabular-nums;
}
.admin-stat .admin-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  margin-top: var(--space-1);
}
.admin-stat .admin-stat-trend-up    { color: var(--color-success); }
.admin-stat .admin-stat-trend-down  { color: var(--color-error); }
.admin-stat .admin-stat-trend-flat  { color: var(--color-gray-500); }

/* Type variants — recolor the accent dot instead of a left border */
.admin-stat.stat-success  .admin-stat-label::before { background: var(--color-success); }
.admin-stat.stat-warning  .admin-stat-label::before { background: var(--color-warning); }
.admin-stat.stat-error    .admin-stat-label::before { background: var(--color-error); }
.admin-stat.stat-info     .admin-stat-label::before { background: var(--color-secondary); }
.admin-stat.stat-accent   .admin-stat-label::before { background: var(--color-accent); }
.admin-stat.stat-neutral  .admin-stat-label::before { background: var(--color-gray-400); }

/* ── Tables ──────────────────────────────────────────────── */
.admin-table {
  font-family: var(--font-sans) !important;
}
.admin-table th {
  background: var(--color-gray-100) !important;
  color: var(--color-gray-600) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--font-semibold) !important;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-3) var(--space-4) !important;
  border-bottom: 1px solid var(--color-gray-200) !important;
}
.admin-table td {
  padding: var(--space-3) var(--space-4) !important;
  border-bottom: 1px solid var(--color-gray-100) !important;
  color: var(--color-gray-900);
  font-size: var(--text-sm);
}
/* Zebra striping */
.admin-table tbody tr:nth-child(even) td {
  background: var(--color-gray-50);
}
.admin-table tbody tr:hover td {
  background: var(--color-primary-light);
}
.admin-table tbody tr:last-child td {
  border-bottom: none;
}
.admin-table .admin-timestamp,
.admin-table .timestamp,
.admin-table td.tabular-nums {
  font-variant-numeric: tabular-nums;
  color: var(--color-gray-500);
  font-size: var(--text-xs);
}

/* ── Buttons — match the public site .btn-* sizes ────────── */
.admin-btn {
  font-family: var(--font-sans) !important;
  font-weight: var(--font-semibold) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2) var(--space-4) !important;
  font-size: var(--text-sm) !important;
  min-height: 36px;
  transition: background var(--duration-fast) var(--ease-default),
              border var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}
.admin-btn:hover { transform: translateY(-1px); }
.admin-btn-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.admin-btn-primary:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.30);
}
.admin-btn-danger {
  background: var(--color-error) !important;
  border-color: var(--color-error) !important;
}
.admin-btn-success {
  background: var(--color-success) !important;
  border-color: var(--color-success) !important;
}

/* ── Badges — recolor with semantic tokens ───────────────── */
.admin-badge {
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full) !important;
}
.admin-badge-blue   { background: #DBEAFE !important; color: #1E40AF !important; }
.admin-badge-green  { background: var(--color-success-light) !important; color: #065F46 !important; }
.admin-badge-red    { background: var(--color-error-light)   !important; color: #991B1B !important; }
.admin-badge-yellow { background: var(--color-warning-light) !important; color: #92400E !important; }
.admin-badge-gray   { background: var(--color-gray-100)      !important; color: var(--color-gray-700) !important; }
.admin-badge-purple { background: #EDE9FE !important; color: #5B21B6 !important; }

/* ── Forms ───────────────────────────────────────────────── */
.admin-input,
.admin-textarea,
.admin-select,
.admin-form-input,
.admin-search-input {
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  border-radius: var(--radius-md) !important;
  border-color: var(--color-gray-300) !important;
  color: var(--color-gray-900) !important;
}
.admin-input:focus,
.admin-textarea:focus,
.admin-select:focus,
.admin-form-input:focus,
.admin-search-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: var(--shadow-focus) !important;
}

/* ── Headings & section titles ───────────────────────────── */
.admin-toolbar h1,
.admin-section-title {
  font-family: var(--font-display) !important;
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-950) !important;
}

/* ── Tabs ────────────────────────────────────────────────── */
.admin-tab {
  font-family: var(--font-sans) !important;
  font-weight: var(--font-medium) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-sm) !important;
}
.admin-tab.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* ── Toast ───────────────────────────────────────────────── */
.admin-toast {
  font-family: var(--font-sans);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.admin-toast.info { background: var(--color-primary) !important; }
.admin-toast.success { background: var(--color-success) !important; }
.admin-toast.error { background: var(--color-error) !important; }

/* ── Misc ────────────────────────────────────────────────── */
.admin-empty {
  font-family: var(--font-sans);
  color: var(--color-gray-500) !important;
  padding: var(--space-12) !important;
}