/*
  custom.css — RIM design system. Single source of truth for all styles.
  webflow.css and rim.webflow.css are no longer loaded.
  Do not modify webflow.css or rim.webflow.css — they are archived, not active.
*/


/* ═══════════════════════════════════════════════════
   QUINCY CF — self-hosted font
   Files are in /public/fonts/. No CDN dependency.
═══════════════════════════════════════════════════ */
@font-face {
  font-family: Quincycf;
  src: url('../fonts/QuincyCF-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Quincycf;
  src: url('../fonts/QuincyCF-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Quincycf;
  src: url('../fonts/QuincyCF-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Quincycf;
  src: url('../fonts/QuincyCF-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Quincycf;
  src: url('../fonts/QuincyCF-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Quincycf;
  src: url('../fonts/QuincyCF-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: Quincycf;
  src: url('../fonts/QuincyCF-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Quincycf;
  src: url('../fonts/QuincyCF-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}


/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
   Derived from the RIM newsletter (Flodesk) editorial style.
   Use these variables on all new pages to keep a consistent look.
═══════════════════════════════════════════════════ */

:root {
  /* Colors */
  --rim-bg:          #f5f5f5;  /* cool light grey — original RIM site */
  --rim-bg-accent:   #eeeeee;  /* slightly darker grey — callouts, cards */
  --rim-dark:        #0d2235;  /* deep navy */
  --rim-blue:        #135274;  /* darker teal-blue */
  --rim-mid:         #39607a;  /* mid teal-blue — links, accents */
  --rim-text:        #333333;  /* primary text */
  --rim-text-quote:  #555555;  /* pull-quotes, secondary text */
  --rim-text-muted:  #666666;  /* labels, captions, attribution */
  --rim-rule:        #d5d5d5;  /* borders, dividers — neutral grey */

  /* Alert / notification */
  --color-alert:        #C8821A;
  --color-alert-bg:     #FDF6EC;
  --color-alert-border: #F0C98A;

  /* Semantic feedback colors */
  --color-error:         #c0392b;
  --color-error-bg:      #fef2f2;
  --color-success:       #2e7d32;
  --color-success-bg:    #e8f5e9;
  --color-warning:       #7a4f00;
  --color-warning-bg:    #fff8ec;

  /* Fonts */
  --font-heading:     'Quincycf', Georgia, serif;
  --font-serif:       'Quincycf', Georgia, serif;
  --font-sans:        'Open Sans', sans-serif;
  --font-source-sans: 'Source Sans 3', 'Open Sans', sans-serif;
  --font-mono:        ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, 'Courier New', monospace;

  /* ── Type scale ─────────────────────────────────────────────
     THE locked scale. Use these tokens everywhere.
     Do not invent font sizes per component — use a token or
     request a new one. Only named exceptions (hero, editorial)
     may use values outside this scale.

     Hero uses clamp() for fluid scaling on wide screens.
     All others are fixed px — clear, predictable, Webflow-safe. */
  --text-hero:   clamp(2.5rem, 4vw + 1rem, 3.25rem); /* ~40–52px */
  --text-h1:     38px;
  --text-h2:     28px;
  --text-h3:     24px;
  --text-h4:     20px;
  --text-body:   18px;  /* p, li, td — all editorial body text */
  --text-small:  15px;  /* captions, timestamps, helper text */
  --text-ui:     14px;  /* admin body text, form inputs, buttons, table cells */
  --text-xs:     13px;  /* field labels, small links, section help */
  --text-label:  12px;  /* form help text, slug labels, meta captions */
  --text-xxs:    11px;  /* badges, table headers, uppercase eyebrow labels */

  /* Line heights */
  --lh-heading:  1.3;
  --lh-body:     1.7;

  /* Layout */
  --reading-width: 700px;
}


/* ═══════════════════════════════════════════════════
   BASE TYPOGRAPHY — global site defaults
   Applies to every page. Component/page styles override as needed.
   This is the single source of truth for typography.
═══════════════════════════════════════════════════ */

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--rim-text);
  background-color: var(--rim-bg);
}
/* Prevent accidental horizontal scroll on mobile when any descendant
   overshoots the viewport by a few pixels (long program names, grid
   rounding, 100vw children sitting inside padded containers, etc.).
   Vertical scroll still works; this only kills horizontal.
   overflow-x: hidden on html = universal support (clips reliably, does
   not break position:sticky inside body because html is the ICB and
   body is the scroll container).
   overflow-x: clip on body = newer Safari/Chrome, preserves sticky
   better when nested containers use overflow-x. Both together cover
   the full browser matrix. */
html {
  overflow-x: hidden;
}
body {
  overflow-x: clip;
  max-width: 100%;
}

/* ── Global element defaults ─────────────────────────────────────────────── */
p {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 1.2em;
}
ul, ol {
  margin-left: 0;
  padding-left: 1.75em;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
li {
  margin-left: 0;
  margin-bottom: 0.35em;
  padding-left: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Headings: quincy-cf 400, global type scale.
   Sizes ARE set here — they come from tokens. Context classes may
   override spacing (margin) but should not reinvent sizes unless
   there is a named exception (hero, editorial long-form). */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--rim-text);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }


/* ═══════════════════════════════════════════════════
   .rim-content — UNIVERSAL EDITOR OUTPUT BASE
   Applied to every rich-text output wrapper alongside its context class
   (prog-description, man-body, lp-body, etc.).

   Sets font, size, spacing, and list treatment for ALL editor output.
   Context classes override only what differs for that surface
   (heading sizes, max-width, color).

   Explicit values (not inherit) so behavior is predictable
   regardless of ancestor element styles.
═══════════════════════════════════════════════════ */

/* Base typography — set once here, inherit everywhere below */
.rim-content {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--rim-text);
}

/* Paragraphs */
.rim-content p { margin: 0 0 1.2em; }

/* Unordered lists — custom bullet, no browser disc */
.rim-content ul {
  list-style: none;
  margin: 0 0 1.4em;
  padding: 0;
  font-family: var(--font-sans); /* beats rim.webflow.css: ul { font-family: Inter } */
}
.rim-content ul > li {
  position: relative;
  padding-left: 1.1em;
}
.rim-content ul > li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--rim-text-muted);
}

/* Ordered lists */
.rim-content ol {
  list-style-type: decimal;
  margin: 0 0 1.4em;
  padding-left: 1.4em;
}

/* List items — explicit on every property that rim.webflow.css pollutes:
   li { font-family: "Source Sans 3"; line-height: 32px } */
.rim-content li {
  font-family: var(--font-sans); /* explicit — beats rim.webflow.css Source Sans 3 override */
  font-size: inherit;            /* matches body text — same as p */
  line-height: inherit;          /* matches body text — same as p */
  margin-bottom: 0.4em;
}

/* Empty paragraphs render as visible line breaks (TipTap output).
   Legacy BlockNote-suppression rule removed — empty paragraphs from
   rich text are now intentional and should take a line of height. */

/* Inline formatting */
.rim-content strong { font-weight: 700; }
.rim-content em { font-style: italic; }


/* ═══════════════════════════════════════════════════
   .rim-content-- SCOPE MODIFIERS
   Applied alongside .rim-content to declare the publishing surface.
   Editorial elements (pull quote, practice, reflection, verse, note)
   render differently per scope: utilitarian in documents, full
   editorial in lessons and programs.

   Scopes:
     --document  — staff manual, hub documents, admin surfaces, member
                   utility (dana message). Open Sans throughout. Editor
                   ≈ rendered. No decorative marks.
     --lesson    — lesson pages. Full editorial treatment. Quincy CF
                   display headings, teal accents, decorative glyphs,
                   generous whitespace.
     --program   — program description + special notes + course pages.
                   Editorial variant — tighter than lesson, calmer.
═══════════════════════════════════════════════════ */

/* Document scope — internal tool tier. Keep sans throughout; no
   decorative editorial affordances. Underlying .rim-content base
   already uses --font-sans so this is a hook for element overrides. */
.rim-content--document {
  --rim-scope: document;
}

/* Lesson scope — full editorial. Marker for element CSS to unlock
   Quincy CF display, teal accents, and decorative marks. */
.rim-content--lesson {
  --rim-scope: lesson;
}

/* Program scope — editorial variant. Quieter than lesson. */
.rim-content--program {
  --rim-scope: program;
}


/* ═══════════════════════════════════════════════════
   lr- LIST ROW
   Universal list-row card: community programs, dashboard
   Zoom links, My Library, course lessons (SeriesListItem).
   Replaces Webflow's programlistblock + related classes.
═══════════════════════════════════════════════════ */

.lr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  border-radius: 6px;
  padding: 20px 24px;
  margin-bottom: 20px;
}

.lr-info {
  flex: 1;
  min-width: 0;
}

/* Doubled class beats .rim-section--grey p { margin: 0 0 18px } */
.lr-row .lr-name {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--rim-text);
  margin: 0 0 2px;
  line-height: 1.3;
}

.lr-badge {
  font-size: var(--text-small);
  font-weight: 400;
  margin-left: 4px;
}

.lr-row .lr-schedule {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-mid);
  margin: 0;
  line-height: 1.5;
}

.lr-row .lr-note {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-style: italic;
  color: var(--rim-mid);
  margin: 6px 0 0;
}

.lr-row .lr-announcement {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-warning);
  background: var(--color-warning-bg);
  padding: 6px 12px;
  margin: 8px 0 0;
  line-height: 1.5;
}

.lr-action {
  flex-shrink: 0;
}

.lr-btn {
  display: inline-block;
  padding: 10px 22px;
  background: var(--rim-blue);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
  cursor: pointer;
}
.lr-btn:hover {
  opacity: 0.85;
  color: #fff;
}
.lr-btn--disabled {
  opacity: 0.4;
  cursor: default;
  background: var(--rim-mid);
}
.lr-btn--disabled:hover {
  opacity: 0.4;
}

@media (max-width: 430px) {
  .lr-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
  }
  .lr-action { width: 100%; }
  .lr-btn { width: 100%; text-align: center; }
}


/* ═══════════════════════════════════════════════════
   PAGE BLOCK SYSTEM — rim-section / rim-container
   Shared layout primitives. Use these on all pages.
   Page-specific classes (pg-, lp-, hp-, etc.) handle
   unique elements; blocks handle the shell.
═══════════════════════════════════════════════════ */

/* Section — full-width row with vertical breathing room */
.rim-section {
  padding-top: 96px;
  padding-bottom: 96px;
}
.rim-section--white { background-color: #fff; }
.rim-section--grey  { background-color: var(--rim-bg); }
.rim-section--teal  {
  background-color: var(--rim-blue);
  color: rgba(255,255,255,0.92);
}
.rim-section--teal h1,
.rim-section--teal h2,
.rim-section--teal h3,
.rim-section--teal h4 { color: #fff; }
.rim-section--teal p  { color: rgba(255,255,255,0.88); }
.rim-section--teal strong { color: #fff; }

/* Container — max-width centered, responsive padding */
.rim-container {
  width: 100%;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}
.rim-container--narrow {
  max-width: var(--reading-width);
}

/* Two-column grid — equal halves, responsive */
.rim-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

@media (max-width: 768px) {
  .rim-section          { padding-top: 64px; padding-bottom: 64px; }
  .rim-container        { padding-left: 20px; padding-right: 20px; }
  .rim-two-col          { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 430px) {
  .rim-section          { padding-top: 48px; padding-bottom: 48px; }
}


/* ═══════════════════════════════════════════════════
   HOMEPAGE — hp-
═══════════════════════════════════════════════════ */

/* Hero — matte paper panel on full-bleed video */
.hp-hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  background-color: var(--rim-dark);
  overflow: hidden;
}
.hp-hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hp-hero__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hp-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 22, 0.38);
  z-index: 1;
}
.hp-hero .rim-container { position: relative; z-index: 2; }
.hp-hero__content {
  display: inline-block;
  background: rgba(250, 249, 246, 0.95);
  padding: 56px 64px;
  max-width: 560px;
  margin: 80px 0;
}
.hp-hero__heading {
  font-family: var(--font-serif);
  font-size: var(--text-hero);
  font-weight: 400;
  color: var(--rim-text);
  line-height: 1.2;
  margin: 0 0 20px;
}
.hp-hero__desc {
  font-size: var(--text-body);
  color: var(--rim-text);
  line-height: var(--lh-body);
  margin: 0 0 32px;
}
.hp-hero__cta {
  display: inline-block;
  background-color: var(--rim-blue);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 32px;
}

/* Global section spacing for white + grey sections */
.rim-section--white h2,
.rim-section--grey  h2  { margin: 0 0 20px; }
.rim-section--white h3,
.rim-section--grey  h3  { margin: 36px 0 14px; }
.rim-section--white p,
.rim-section--grey  p   { margin: 0 0 18px; }
.rim-section--teal  h2  { margin: 0 0 28px; }
.rim-section--teal  p   { margin: 0 0 18px; }

/* Shared inline arrow link */
.hp-link {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--rim-mid);
  text-decoration: none;
  font-weight: 500;
}
.hp-link:hover { text-decoration: underline; }

/* ── Welcome ─────────────────────────────────────── */
.hp-welcome__body {
  font-size: var(--text-body);
  color: var(--rim-text);
  line-height: var(--lh-body);
  margin: 0 0 24px;
}
.hp-welcome__anchor {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 400;
  color: var(--rim-mid);
  line-height: 1.5;
  margin: 0;
}

/* ── Schedule ─────────────────────────────────────── */
.hp-sched__heading { margin: 0 0 36px; }
.hp-sched {
  border-top: 1px solid var(--rim-rule);
  margin-bottom: 20px;
}
.hp-sched__row {
  display: grid;
  grid-template-columns: 130px 1fr 130px 180px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--rim-rule);
  gap: 0;
}
.hp-sched__day {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
}
.hp-sched__program {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hp-sched__program strong {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 400;
  color: var(--rim-text);
}
.hp-sched__desc {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
}
.hp-sched__time {
  font-size: var(--text-small);
  color: var(--rim-text);
  font-variant-numeric: tabular-nums;
}
.hp-sched__fmt {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  font-weight: 500;
}
.hp-sched__fmt--inperson {
  color: var(--rim-mid);
  font-weight: 600;
}
.hp-sched__note {
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  line-height: var(--lh-body);
  margin: 0 0 28px;
}

/* ── Voices / Testimonials ────────────────────────── */
.hp-voices__heading {
  font-size: var(--text-h3);
  margin: 0 0 48px;
  text-align: center;
}
.hp-voices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hp-voice {
  margin: 0;
  padding: 36px 32px;
  background: var(--rim-bg);
  border-top: 3px solid var(--rim-rule);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hp-voice p {
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--rim-text);
  font-style: italic;
  margin: 0;
  flex: 1;
}
.hp-voice footer {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  font-weight: 600;
  font-style: normal;
}

/* ── Paths — What You'll Find ─────────────────────── */
.hp-paths__heading {
  max-width: 620px;
  margin: 0 0 48px;
}
.hp-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rim-rule);
  border-bottom: 1px solid var(--rim-rule);
}
.hp-path {
  padding: 36px 32px 36px 0;
}
.hp-path:not(:first-child) { padding-left: 32px; }
.hp-path:not(:last-child)  { border-right: 1px solid var(--rim-rule); }
.hp-path__name {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 400;
  color: var(--rim-blue);
  margin: 0 0 12px;
}
.hp-path p { font-size: var(--text-body); line-height: var(--lh-body); margin: 0; color: var(--rim-text); }
.hp-paths__links {
  display: flex;
  gap: 32px;
  margin-top: 32px;
}

/* ── Three Circles ────────────────────────────────── */
.hp-circles__heading {
  text-align: center;
  color: #fff;
  margin: 0 0 56px;
}
.hp-circles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.hp-circle__title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 400;
  color: #fff;
  margin: 0 0 16px;
}
.hp-circle p { margin: 0; }

/* ── Dana links ───────────────────────────────────── */
.hp-dana__links {
  display: flex;
  gap: 32px;
  margin-top: 8px;
}
.rim-section--white .hp-link { color: var(--rim-mid); }
.rim-section--grey  .hp-link { color: var(--rim-mid); }

/* ── Closing invitation ───────────────────────────── */
.hp-closing {
  margin: 0;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--rim-rule);
}
.hp-closing__quote {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 400;
  font-style: italic;
  color: var(--rim-text);
  line-height: 1.45;
  margin: 0 0 16px;
}
.hp-closing__attr {
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  font-weight: 600;
}
.hp-closing__cta {
  display: inline-block;
  margin-top: 36px;
}

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
  .hp-hero             { min-height: 520px; }
  .hp-hero__content    { padding: 40px 36px; margin: 48px 0; max-width: 100%; display: block; }
  .hp-sched__row       { grid-template-columns: 110px 1fr; }
  .hp-sched__time      { display: none; }
  .hp-sched__fmt       { display: none; }
  .hp-voices           { grid-template-columns: 1fr; }
  .hp-paths            { grid-template-columns: 1fr; border-bottom: none; }
  .hp-path             { padding: 28px 0; border-bottom: 1px solid var(--rim-rule); border-right: none !important; }
  .hp-path:not(:first-child) { padding-left: 0; }
  .hp-circles          { grid-template-columns: 1fr; gap: 32px; }
  .hp-dana__links,
  .hp-paths__links     { flex-direction: column; gap: 16px; }
}
@media (max-width: 430px) {
  .hp-hero             { min-height: 440px; }
  .hp-hero__content    { padding: 32px 24px; margin: 32px 0; }
  .hp-welcome__anchor  { font-size: var(--text-h4); }
  .hp-closing__quote   { font-size: var(--text-h4); }
}


/* ═══════════════════════════════════════════════════
   NAVIGATION DROPDOWNS — SUPERSEDED
   Replaced by the nav- block at the bottom of this file.
   These rules only apply to any remaining Webflow nav
   markup if it ever surfaces; they are otherwise unused.
═══════════════════════════════════════════════════ */

/* Desktop (>767px): open dropdown on hover */
@media screen and (min-width: 768px) {
  .w-dropdown:hover > .w-dropdown-list {
    display: block;
  }

  /* Apply the w--open visual styles when shown via hover */
  .w-dropdown:hover > .navigation-dropdown {
    background-color: transparent;
    min-width: 360px;
    max-height: 100vh;
    padding-top: 10px;
    left: -100px;
  }
}

/* ═══════════════════════════════════════════════════
   ACTIVE / CURRENT PAGE INDICATORS — SUPERSEDED
   Replaced by nav__link--active in nav- block below.
═══════════════════════════════════════════════════ */

/* Top-level nav link active state */
.navigation-link.w--current {
  color: #39607a !important; /* RIM green */
  border-bottom: 2px solid #39607a;
  padding-bottom: 2px;
}

/* Dropdown link active state */
.dropdown-link.w--current .dropdown-title {
  color: #39607a;
}

/* Mobile nav link active state */
.mobile-nav-link.w--current {
  color: #39607a !important;
  font-weight: 600;
}


/* Mobile: when hamburger is open, show the nav menu — SUPERSEDED */
.w-nav-menu.w--open {
  display: block !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 999;
  padding: 10px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


/* ═══════════════════════════════════════════════════
   FOOTER — centered, single-column layout
   Form on top, logo + contact info below.
═══════════════════════════════════════════════════ */

.rim-footer {
  background-color: #135274;
  padding: 100px 24px 40px;
  text-align: center;
}

.rim-footer-inner {
  max-width: 680px;
  margin: 0 auto;
}

/* Newsletter section */
.rim-footer-newsletter { margin-bottom: 8px; }

.rim-footer-heading {
  color: #fff;
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 400;
  margin: 0 0 8px;
}

.rim-footer-sub {
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  margin: 0 0 20px;
}

/* Divider between form and contact */
.rim-footer-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin: 36px 0;
}

/* Contact section */
.rim-footer-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.rim-footer-logo   { width: 65px; margin-bottom: 4px; }

.rim-footer-name {
  color: #fff;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
}

.rim-footer-address {
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
}

.rim-footer-contact-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.rim-footer-contact-links a {
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  text-decoration: none;
  transition: color 0.15s;
}

.rim-footer-contact-links a:hover { color: #fff; }

.rim-footer-dot { color: rgba(255, 255, 255, 0.4); }

/* Bottom copyright row */
.rim-footer-bottom {
  max-width: 680px;
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--text-label);
}

.rim-footer-bottom a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.rim-footer-bottom a:hover { color: #fff; }

@media screen and (max-width: 767px) {
  .rim-footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Newsletter form — inline row on desktop, stacked on mobile */
.footer-subscribe-form { margin-top: 0; }

.footer-subscribe-row {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.footer-input {
  flex: 1;
  max-width: 210px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: var(--text-small);
  outline: none;
  transition: border-color 0.2s;
}

.footer-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.footer-input:focus        { border-color: rgba(255, 255, 255, 0.75); }

.footer-subscribe-btn {
  padding: 11px 22px;
  background: #fff;
  color: #135274;
  border: none;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.footer-subscribe-btn:hover    { background: #e8f0f5; }
.footer-subscribe-btn:disabled { opacity: 0.65; cursor: default; }

.footer-subscribe-msg {
  font-size: var(--text-ui);
  color: rgba(255, 255, 255, 0.85);
  margin: 10px 0 0;
}

.footer-subscribe-success {
  color: #a8d5a2;
  font-size: 16px;
  font-weight: 600;
}

@media screen and (max-width: 600px) {
  .footer-subscribe-row {
    flex-direction: column;
  }

  .footer-input {
    max-width: none;
  }
}


/* ═══════════════════════════════════════════════════
   LESSON PAGE — Editorial Design
   Matches the RIM newsletter style (Flodesk).
   Background: #f5f5f5 cool light grey throughout.
   Headings: Baskerville 400 weight, not bold.
   Body: Open Sans 17px / 1.8 line-height.
   lp- prefix. No Webflow dependencies.
═══════════════════════════════════════════════════ */

.lp-page {
  background: var(--rim-bg);
}

/* ── Page Header ── */

.lp-header {
  padding: 80px 24px 40px; /* bottom: 64→40 — was pushing 104px of space above the audio player */
  text-align: center;
}

.lp-header__inner {
  max-width: var(--reading-width);
  margin: 0 auto;
}

.lp-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 16px;
}

.lp-title {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--rim-text);
  margin: 0;
}

/* ── Hero Image ── */

.lp-hero-image {
  max-width: var(--reading-width);
  margin: 0 auto 48px;  /* 48px below — matches header's 40px bottom padding; gives breathing room before body */
  /* no horizontal padding — image goes edge to edge within reading column */
}

.lp-hero-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Shown while no CMS image is set — remove once wired to Sanity */
.lp-hero-image-placeholder {
  aspect-ratio: 16 / 9;
  background: var(--rim-bg-accent);
  border: 1px dashed var(--rim-rule);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rim-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Audio Player wrapper (positions card within reading column) ── */

.lp-audio {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 8px 24px 56px; /* 8px top + 40px header = 48px above card; 56px below — near-symmetric, slight downward lean grounds the player toward its content */
}


/* ═══════════════════════════════════════════════════
   AUDIO PLAYER  (.ap-)
   Dark card player — play/pause, ← 30s / 30s →,
   seekable progress bar, elapsed + remaining time.
   Inspired by minimal podcast player reference.
═══════════════════════════════════════════════════ */

.ap-player {
  background: rgba(46, 40, 38, 0.9);
  border-radius: 14px;
  padding: 18px 22px 20px;
  width: 100%;
  box-sizing: border-box;
  color: #fff;
  user-select: none;
}

/* ── Progress row: time | scrubber | time ── */

.ap-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.ap-time {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  min-width: 32px;
  letter-spacing: 0.02em;
}

.ap-time--remaining {
  text-align: right;
}

/* Range input — custom track with filled-progress trick via CSS var */
.ap-scrubber {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.85) var(--ap-progress, 0%),
    rgba(255,255,255,0.22) var(--ap-progress, 0%)
  );
  outline: none;
  cursor: pointer;
}

.ap-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  transition: transform 0.1s ease;
}

.ap-scrubber::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

.ap-scrubber:hover::-webkit-slider-thumb,
.ap-scrubber:focus::-webkit-slider-thumb {
  transform: scale(1.2);
}

/* ── Controls row: skip | play | skip ── */

.ap-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.ap-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, transform 0.1s ease;
  line-height: 1;
}

.ap-btn:hover {
  color: #fff;
}

.ap-btn:active {
  transform: scale(0.92);
}

/* Play/Pause — filled white circle */
.ap-btn--play {
  width: 52px;
  height: 52px;
  background: #fff;
  border-radius: 50%;
  color: #2e2826;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.ap-btn--play:hover {
  background: #f0eded;
  color: #2e2826;
  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}

.ap-btn--play:active {
  transform: scale(0.93);
}

/* Skip buttons — slightly smaller, no bg */
.ap-btn--skip {
  width: auto;
  height: 36px;
  gap: 6px;
  opacity: 0.85;
}

.ap-btn--skip:hover {
  opacity: 1;
}

.ap-skip-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
}

/* ── Content Column ── */

.lp-content {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* ── Editorial Pull Quote ── */

.lp-pullquote {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.65;
  color: var(--rim-text-quote);
  text-align: center;
  border: none;
  padding: 64px 0 0;   /* reserves space for " mark + gap to text */
  margin: 0 0 80px;    /* matches visual space above the " mark (52px content padding + 28px mark offset) */
  position: relative;
}

.lp-pullquote::before {
  content: "\201C";                /* left double quotation mark " */
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 72px;               /* reduced from 112px — more subtle, less dominant */
  line-height: 0.5;
  color: var(--rim-rule);
  pointer-events: none;
}

.lp-pullquote__cite {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-style: normal;
  letter-spacing: 0.05em;
  color: var(--rim-text-quote);
  margin-top: 20px;
}

/* ── Video ── */

.lp-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 52px;
}

.lp-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Rich Text Body ── */

.lp-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--rim-text);
  margin-bottom: 52px;
}

.lp-body p { margin: 0 0 1.8em; }
.lp-body p:last-child { margin-bottom: 0; }

/* Suppress blank paragraphs the CMS editor creates (Sanity/PortableText
   renders empty blocks as <p></p> or <p><span></span></p> — they carry
   full line-height + margin-bottom, creating ~61px of invisible space) */
.lp-body p:empty,
.lp-body p:has(> br:only-child),
.lp-body p:has(> span:only-child:empty) { display: none; }

/* ── Heading scale (Perfect Fourth from 17px body) ──────────────────────────
   h2 = major section heading  (32px, 1.88× body)
   h3 = sub-section heading    (24px, 1.41× body)
   h4 = minor / tertiary       (20px, 1.18× body)
   Page h1 is .lp-title (44px) — outside PortableText.
   Libre Baskerville 400 is lighter than same-size sans-serif;
   these sizes are tuned to read with appropriate visual weight.
   .lp-body is the shared prose class — reuse on all PortableText blocks. */

.lp-body h2 {
  font-family: var(--font-serif);
  font-size: 32px; /* editorial exception — long-form reading gets a bigger h2 */
  font-weight: 400;
  color: var(--rim-text);
  line-height: var(--lh-heading);
  margin: 64px 0 20px;
}

.lp-body h3 {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 400;
  color: var(--rim-text);
  line-height: var(--lh-heading);
  margin: 48px 0 16px;
}

.lp-body h4 {
  display: block;  /* rim.webflow.css sets h4 { display: inline-block } — must override */
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 400;
  color: var(--rim-text);
  line-height: 1.4;
  margin: 36px 0 12px;
}

.lp-body blockquote {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--rim-text-quote);
  border: none;
  border-left: 2px solid var(--rim-rule);
  padding: 4px 0 4px 28px;
  margin: 1.8em 0;  /* matches paragraph spacing — was 1.5em */
}

/* rim.webflow.css sets on all li: margin-left:-20px; font-size:18px;
   line-height:32px; font-family:"Source Sans 3". Reset everything here
   so it doesn't corrupt our list layout. */
.lp-body li {
  margin-left: 0;
  margin-bottom: 0.9em; /* was 0.5em (8.5px) — 0.9em (15px) ≈ 50% of line height, right for multi-line items */
  padding-left: 0;
  font-size: inherit;
  line-height: inherit;
  font-family: var(--font-sans); /* explicit — "inherit" still loses to rim.webflow.css in some cascade scenarios */
}

/* Unordered lists — absolutely-positioned bullet, immune to cascade quirks */
.lp-body ul {
  list-style: none;
  margin: 0 0 1.8em; /* match paragraph rhythm — 1em made post-list gaps half the size of post-paragraph gaps */
  padding: 0;
}

.lp-body ul > li {
  position: relative;
  padding-left: 1.1em;   /* space for the bullet */
}

.lp-body ul > li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--rim-text-muted);
}

/* Ordered lists */
.lp-body ol {
  list-style-type: decimal;
  margin: 0 0 1.8em; /* match paragraph rhythm */
  padding-left: 1.4em;
}
.lp-body strong { font-weight: 700; }
.lp-body em { font-style: italic; }

.lp-body a {
  color: var(--rim-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lp-body a:hover { color: var(--rim-blue); }

/* ── Practice Callout Block ── */

.lp-callout {
  background: var(--rim-bg-accent); /* design token — consistent with body-quote and dana */
  border-left: 3px solid var(--rim-mid);
  border-radius: 4px;
  padding: 24px 28px;
  margin: 2.5em 0; /* 2.5em × 17px = 42.5px — matches featured-block rhythm (42–51px range) */
}

.lp-callout__title {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rim-mid);
  margin: 0 0 12px;
}

.lp-callout__content {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--rim-text);
}

.lp-callout__content p {
  margin: 0 0 1.2em; /* 1.2em × 16px = 19px — proportional to 16px/1.75 box content */
}

.lp-callout__content p:last-child {
  margin-bottom: 0;
}

.lp-callout__content li {
  margin-left: 0;
  margin-bottom: 0.6em; /* 0.6em × 16px = 9.6px — ~50% of line height (27px), matches body li rhythm */
  padding-left: 0;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
}

.lp-callout__content ul {
  list-style: none;
  margin: 0 0 0.9em;
  padding: 0;
}

.lp-callout__content ul > li {
  position: relative;
  padding-left: 1.1em;
}

.lp-callout__content ul > li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--rim-text-muted);
}

.lp-callout__content ol {
  list-style-type: decimal;
  margin: 0 0 0.9em;
  padding-left: 1.4em;
}

.lp-callout__content ul:last-child,
.lp-callout__content ol:last-child {
  margin-bottom: 0;
}

.lp-callout__content strong { font-weight: 700; }
.lp-callout__content em     { font-style: italic; }

/* ── Body Quote Block ── */
/* Uses <div> not <blockquote> in JSX — Webflow's blockquote rules don't apply. */

.lp-body .lp-body-quote {
  background: var(--rim-bg-accent);
  border-radius: 4px;
  padding: 40px;
  margin: 2.5em 0;
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: 400;
  font-style: normal;   /* not italic — distinct from the hero pull quote which is italic */
  line-height: 1.75;
  color: var(--rim-text-quote);
}

.lp-body .lp-body-quote p {
  /* Webflow p { } element rules (declared) beat inherited values from parent div.
     Must set all typography explicitly here to win the cascade. */
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: 400;
  font-style: normal;
  line-height: 1.75;
  color: var(--rim-text-quote);
  margin-bottom: 0;
}

.lp-body-quote__text {
  margin: 0 0 8px;
}

.lp-body-quote__cite {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-style: normal;
  color: var(--rim-text-muted);
  letter-spacing: 0.04em;
}

/* ── Verse Quote Block ── */
/* Centered, decorative ~ above/below — for short poignant quotes.
   Extends 40px beyond body text on each side (body = 592px, verse quote = 672px).
   No inner padding — text fills the full extended width so the breakout is visible.
   Uses <div> not <blockquote> in JSX — Webflow's blockquote rules don't apply. */

.lp-body .lp-verse-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 1.2em -40px;  /* 1.2em × 22px ≈ 26px — paragraph spacing adds ~30px, total ~56px visible gap; part of flow */
  padding: 0;           /* no inner padding — text fills extended width, making breakout visible */
  font-family: var(--font-serif);
  font-size: 22px;      /* 22px vs 17px body = 1.29× — Baskerville reads heavier at larger sizes; 22px balances visual weight */
  font-weight: 400;
  font-style: italic;
  line-height: 1.65;
  color: var(--rim-text-muted);   /* lighter than --rim-text-quote to reduce perceived heaviness of the serif */
}

.lp-body .lp-verse-quote::before,
.lp-body .lp-verse-quote::after {
  content: '~';
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h4);
  line-height: 1;
  color: var(--rim-rule);
  flex-shrink: 0;
}

/* Equal spacing above and below the text — even, per design philosophy */
.lp-body .lp-verse-quote::before { margin-bottom: 16px; }
.lp-body .lp-verse-quote::after  { margin-top: 16px; }

.lp-body .lp-verse-quote p {
  /* Webflow has a p { font-size: 17px } element rule — declared values beat
     inherited values, so we must set font-size explicitly here (not just on
     the parent container) with high specificity to win. */
  font-size: 22px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.65;
  color: var(--rim-text-muted);
  margin-bottom: 0;
}

.lp-verse-quote__text {
  margin: 0 0 10px;
}

.lp-verse-quote__cite {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-style: normal;
  color: var(--rim-text-muted);
  letter-spacing: 0.06em;
  margin-bottom: 0;
}

/* ── Callout Text (Pull Quote) ── */
/* A key sentence/phrase set apart from body — Baskerville regular (not italic),
   slightly larger, extends into the left margin only (magazine pull-quote style).
   Uses .lp-body .lp-callout-text (0,2,0) to beat .lp-body p (0,1,1) which
   would otherwise reset margin-left to 0 and kill the left extension. */

.lp-body .lp-callout-text {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--rim-text-quote);
  margin: 2.5em 0 2.5em -40px;  /* extend 40px into left margin — clearly visible beyond body text */
  padding: 0;
}

/* ── Tables in content ── */

.lp-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: var(--text-small);
  line-height: 1.6;
}

.lp-body table th {
  background: var(--rim-bg-accent);
  color: var(--rim-text);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--rim-rule);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.lp-body table td {
  padding: 10px 14px;
  border: 1px solid var(--rim-rule);
  color: var(--rim-text);
  vertical-align: top;
}

.lp-body table tr:nth-child(even) td {
  background: var(--rim-bg);
}

/* ── Section Divider ── */

.lp-divider {
  width: 60px;
  border: none;
  border-top: 2px solid var(--rim-rule);
  margin: 56px auto;
}

/* ── Downloadable Resources ── */

.lp-resources { margin-bottom: 52px; }

.lp-resources__label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 20px;
}

.lp-resources__item { margin-bottom: 12px; }

.lp-resource-link {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--rim-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lp-resource-link:hover { color: var(--rim-blue); }

.lp-resources__desc {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 4px 0 0;
}

/* ── Teacher Attribution ── */

.lp-teacher {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  text-decoration: none;
  color: inherit;
}

.lp-teacher__photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.lp-teacher__by {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin-right: 2px;
}

.lp-teacher__name {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Dana / Donation Section ── */

.lp-dana {
  background: var(--rim-bg-accent);
  border-radius: 4px;
  padding: 48px;
  text-align: center;
}

.lp-dana p {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.8;
  color: var(--rim-text);
  margin: 0 0 1em;
}

.lp-dana p:last-child { margin-bottom: 0; }

.lp-dana a {
  color: var(--rim-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lp-dana a:hover { color: var(--rim-blue); }

.lp-dana em {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  font-style: italic;
}

/* ── Breadcrumb ── */

.lp-breadcrumb {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 28px 24px 0;
}

.lp-breadcrumb__link {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
}

.lp-breadcrumb__link:hover { color: var(--rim-blue); }

/* ── Lesson Navigation ── */

.lp-lesson-nav {
  border-top: 1px solid #e8e4de;
  margin-top: 0;
  padding: 28px 24px 56px;
}

.lp-lesson-nav__inner {
  max-width: var(--reading-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.lp-lesson-nav__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  padding: 14px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ebe6e1;
  transition: border-color 0.15s, background 0.15s;
  min-width: 0;
}

.lp-lesson-nav__link:hover { border-color: #c4bcb4; background: #faf8f6; }

.lp-lesson-nav__link--prev { align-items: flex-start; }
.lp-lesson-nav__link--next { align-items: flex-end; text-align: right; }

.lp-lesson-nav__dir {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  line-height: 1;
}

.lp-lesson-nav__name {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-blue);
  font-weight: 500;
  line-height: 1.35;
  max-width: 220px;
}

.lp-lesson-nav__count {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  white-space: nowrap;
  text-align: center;
  padding: 0 8px;
}

/* ── Mobile ── */

@media screen and (max-width: 767px) {
  .lp-header { padding: 56px 24px 32px; }
  .lp-title { font-size: 32px; }
  .lp-audio { padding: 0 24px 44px; }
  .lp-content { padding: 0 24px 60px; }
  .lp-pullquote { font-size: 21px; padding-top: 60px; }
  .lp-pullquote::before { font-size: 52px; top: 18px; }
  .lp-body { font-size: 16px; }
  .lp-dana { padding: 32px 24px; }
  .lp-lesson-nav { padding: 24px 16px 48px; }
  .lp-lesson-nav__inner { grid-template-columns: 1fr 1fr; }
  .lp-lesson-nav__count {
    grid-column: 1 / -1;
    order: -1;
    margin-bottom: 4px;
  }
  .lp-lesson-nav__name { max-width: 140px; font-size: var(--text-ui); }

  /* Breakout elements use negative margins to extend beyond .lp-content's padding.
     On mobile, the container fills the viewport — no room for negative margins.
     Zero them out so they stay within the viewport and don't cause horizontal scroll. */
  .lp-body .lp-verse-quote {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    font-size: 19px;
  }
  .lp-body .lp-verse-quote p {
    font-size: 19px;
  }
  .lp-body .lp-callout-text {
    margin-left: 0;
  }
}


/* ═══════════════════════════════════════════════════
   COURSE PAGE
   course-lessons: our own wrapper replacing section.background-white
   (which inherits 120px padding from .section — too much).
   course-header has margin-bottom: -30px baked in (designed for the
   old 120px-padded section) — zero it out so the lessons box doesn't
   overlap the description text.
═══════════════════════════════════════════════════ */

.course-header {
  margin-bottom: 0 !important;
  padding-bottom: 40px;
}

.course-lessons {
  background-color: #fafafa;
  padding: 40px 0 60px;
}


/* ═══════════════════════════════════════════════════
   COURSE PAGE
   rim.webflow.css sets font-weight: 700 on rich-text-block-19;
   body text should be normal weight.
   f-header-wrapper-left max-width is 620px by default —
   too narrow for long course titles, so we widen it here.
═══════════════════════════════════════════════════ */

.rich-text-block-19 {
  font-weight: 400;
}

.course-header .f-header-wrapper-left {
  max-width: 820px;
  text-align: center;
}

/* Section title headers in course lesson list — plain block, no grid */
.lesson-section-header {
  padding: 8px 5px 6px;
  margin-bottom: 8px;
}

/* lesson-section-break has margin-top: 10px by default — zero it out
   so all spacing is controlled by the wrapper above */
.lesson-section-header .lesson-section-break {
  margin-top: 0;
}


/* ═══════════════════════════════════════════════════
   DONATE PAGE — ACCORDIONS
   Collapsed by default; JS toggles max-height on click.
   The arrow (rotate 90deg = pointing down = "expand")
   flips to rotate 270deg (pointing up) when open.
═══════════════════════════════════════════════════ */

.accordion-content-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-arrow {
  transition: transform 0.3s ease;
}

.accordion-item.accordion-open .accordion-arrow {
  transform: rotate(270deg);
}


/* ═══════════════════════════════════════════════════
   PROGRAM DETAIL PAGE  (pg- prefix)
   Shares lp-content, lp-body, lp-pullquote, lp-teacher*, lp-divider, lp-label
   with the lesson page. pg- covers the page shell, hero header,
   details card, special notes, and registration section.
   Background: cool light grey throughout. No Webflow dependencies.

   NOTE: pg-hero is a placeholder — the colored band gives the
   program page a distinct feel from the lesson page's plain header.
   Revisit once all pages are migrated and the full design is settled.
═══════════════════════════════════════════════════ */

.pg-page {
  background: var(--rim-bg);
}

/* ── Hero header ──
   Background image (from programImage) with a semi-transparent
   teal overlay. Falls back to solid teal when no image is set.
   Extra bottom padding creates a landing zone for the details card
   to float up into — the card overlaps ~84px into the hero band. */

.pg-hero {
  background-color: var(--rim-blue);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  padding: 120px 24px 200px;
  text-align: center;
  position: relative;
}

/* Semi-transparent overlay — sits between image and text */
.pg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 82, 116, 0.8);
  pointer-events: none;
}

.pg-hero__inner {
  max-width: var(--reading-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.pg-hero__category {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--rim-text);
  text-decoration: none;
  background: #f4eeeb;
  border: none;
  padding: 10px 15px 9px;
  border-radius: 24px;
  margin-bottom: 15px;
  transition: background-color 0.15s;
}

.pg-hero__category:hover {
  background: #ece3de;
}

.pg-hero__title {
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0 0 12px;
}

.pg-hero__tagline {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
  margin: -8px 0 0;
}

/* ── Pull quote card ──
   Floats up into the hero with negative margin, matching the old
   Webflow layout. Warm background, centered serif text. */

.pg-quote {
  background: #fff;
  border-radius: 9px;
  padding: 35px 30px 30px;
  margin: -160px auto 45px;
  max-width: 700px;
  text-align: center;
  position: relative;
  z-index: 2;
  box-shadow: 1px 1px 20px rgba(116, 116, 116, 0.15);
}

.pg-quote__text {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 500;
  font-style: normal;
  line-height: 160%;
  color: var(--rim-text);
  margin: 0 0 10px;
  quotes: none;
  border: none;
  padding: 0;
}

.pg-quote__source {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--rim-text-muted);
}

/* ── Special Notes callout ──
   Warm card treatment — visually set apart from the main description. */

/* ── Program notes — tan card ──
   Reintroduced to match Webflow's "Additional Program Noted" block.
   Visually set apart from the description for supplementary context. */

.pg-notes {
  background: #f4eeeb;
  border-radius: 10px;
  padding: 30px 30px 25px;
  margin: 5px 0 15px;
}

.pg-notes__heading {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 500;
  color: var(--rim-text);
  margin: 0 0 10px;
}

/* ── Details section ──
   Heading + icon rows with dividers, matching old Webflow structure. */

.pg-details-section {
  margin-bottom: 15px;
}

.pg-section-heading {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 16px;
}

.pg-detail-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 5px 15px 0;
  border-bottom: 1px solid var(--rim-rule);
}

.pg-detail-row:last-child { border-bottom: none; }

.pg-detail-row__icon {
  flex-shrink: 0;
  color: var(--rim-text-muted);
  display: flex;
  align-items: center;
}

.pg-detail-row__text {
  font-family: var(--font-sans);
  font-size: 17px;
  color: var(--rim-text);
  line-height: 177%;
}

.pg-detail-row__link {
  color: var(--rim-mid);
  text-decoration: none;
  font-size: var(--text-ui);
}

.pg-detail-row__link:hover { color: var(--rim-blue); }

/* CTA row in details — same font as other detail rows */
.pg-detail-row--cta { border-bottom: none; }

.pg-detail-cta__link {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 177%;
  color: var(--rim-blue);
  text-decoration: none;
}
.pg-detail-cta__link:hover { text-decoration: underline; }

.pg-detail-cta__status {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 177%;
  color: var(--rim-text-muted);
}

.pg-detail-cta__text {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 177%;
  color: var(--rim-text);
}

.pg-detail-cta__inline-link {
  color: var(--rim-blue);
  text-decoration: underline;
}
.pg-detail-cta__inline-link:hover { color: var(--rim-mid); }

/* ── Facilitators section ── */

.pg-facilitators-section {
  margin-top: 20px;
  margin-bottom: 15px;
}

.pg-facilitator {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--rim-text);
}

.pg-facilitator--link {
  text-decoration: none;
  color: var(--rim-blue, #135274);
}
.pg-facilitator--link:hover { text-decoration: underline; }
.pg-facilitator + .pg-facilitator::before {
  content: ", ";
}

/* ── CTA card ──
   Bottom registration / open-program card. Warm background. */

.pg-cta-card {
  background: var(--rim-bg-accent);
  border-radius: 10px;
  padding: 30px 30px 25px;
  margin-top: 45px;
  margin-bottom: 48px;
}

.pg-cta-card__heading {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 10px;
}

.pg-cta-card__text {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--rim-text);
  margin: 0 0 16px;
}

.pg-cta-card__text:last-child { margin-bottom: 0; }

.pg-cta-card__link {
  color: var(--rim-blue);
  text-decoration: underline;
}

.pg-cta-card__btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rim-blue);
  padding: 11px 22px;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.15s;
}

.pg-cta-card__btn:hover { opacity: 0.85; color: #fff; }


/* ── Registration section ──
   Auth-gated. Warm card containing instructions + optional Fillout form. */

.pg-registration {
  margin-top: 52px;
}

.pg-registration__inner {
  background: var(--rim-bg-accent);
  border-radius: 6px;
  padding: 36px 40px;
}

/* Override lp-body margin inside registration card */
.pg-registration__inner .lp-body {
  margin-bottom: 0;
}

/* Fillout embed container */
.pg-fillout {
  margin-top: 24px;
}

/* ── Built-in registration form ── */

.pg-form {
  margin-top: 24px;
}

.pg-form__warning {
  background: #fef8e7;
  border-left: 3px solid #c8960c;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: var(--text-small);
  color: var(--rim-text);
}

.pg-form__waitlist-notice {
  background: var(--rim-bg-accent);
  border-left: 3px solid var(--rim-mid);
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: var(--text-small);
  color: var(--rim-text);
}

.pg-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pg-form__field {
  margin-bottom: 18px;
}

.pg-form__label {
  display: block;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin-bottom: 6px;
}

.pg-form__required {
  color: #b94040;
  margin-left: 1px;
}

.pg-form__input,
.pg-form__textarea,
.pg-form__select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--rim-text);
  transition: border-color 0.15s;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.pg-form__input:focus,
.pg-form__textarea:focus,
.pg-form__select:focus {
  outline: none;
  border-color: var(--rim-mid);
}

.pg-form__input[readonly],
.pg-form__input--locked {
  background: var(--rim-bg-accent);
  color: var(--rim-text-muted);
  cursor: default;
  border-color: var(--rim-rule);
}

.pg-form__textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.6;
}

.pg-form__submit {
  margin-top: 24px;
  width: 100%;
  padding: 14px 24px;
  background: var(--rim-blue);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s;
}

.pg-form__submit:hover:not(:disabled) {
  background: var(--rim-mid);
}

.pg-form__submit:disabled {
  background: var(--rim-rule);
  cursor: not-allowed;
}

.pg-form__error {
  background: #fde8e8;
  border-left: 3px solid #b94040;
  padding: 12px 16px;
  border-radius: 4px;
  margin-top: 16px;
  font-size: var(--text-small);
  color: #7b1f1f;
}

.pg-form__success {
  background: color-mix(in srgb, var(--rim-mid) 8%, var(--rim-bg));
  border-left: 3px solid var(--rim-mid);
  padding: 24px 28px;
  border-radius: 6px;
}

.pg-form__success--waitlist {
  background: var(--rim-bg-accent);
  border-left-color: var(--rim-mid);
}

.pg-form__success h3 {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 8px;
}

.pg-form__success p {
  font-size: 16px;
  color: var(--rim-text-muted);
  margin: 0;
}

.pg-form__already {
  color: var(--rim-text-muted);
  font-size: 16px;
  font-style: italic;
  margin: 8px 0 0;
}
.pg-form__email-found {
  font-size: var(--text-ui);
  color: var(--rim-mid);
  background: color-mix(in srgb, var(--rim-mid) 8%, var(--rim-bg));
  border-radius: 4px;
  padding: 7px 11px;
  margin: 6px 0 0;
}

/* ── Dana step (shown after registration success) ── */

.pg-dana {
  margin-top: 16px;
  padding: 24px 28px;
  background: var(--rim-bg-accent);
  border-radius: 6px;
}

.pg-dana__eyebrow {
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 16px;
}

.pg-dana__message {
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  line-height: 1.6;
  margin: 0 0 20px;
}

.pg-dana__fixed-amount {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  color: var(--rim-blue);
  margin-bottom: 20px;
}

.pg-dana__breakdown {
  margin-bottom: 20px;
}

.pg-dana__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rim-rule);
}

.pg-dana__row:last-of-type {
  border-bottom: none;
}

.pg-dana__row-label {
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
}

.pg-dana__row-value {
  font-size: 16px;
  color: var(--rim-text);
}

.pg-dana__total {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--rim-blue);
  text-align: right;
}

.pg-dana__field {
  margin-bottom: 20px;
}

.pg-dana__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin-bottom: 8px;
}

.pg-dana__input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pg-dana__currency {
  font-size: var(--text-body);
  color: var(--rim-text-muted);
  line-height: 1;
}

.pg-dana__input {
  width: 120px;
  padding: 10px 14px;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  font-size: var(--text-body);
  color: var(--rim-text);
  font-family: var(--font-sans);
  background: #fff;
}

.pg-dana__input:focus {
  outline: none;
  border-color: var(--rim-mid);
}

.pg-dana__skip {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pg-dana__skip:hover {
  color: var(--rim-text);
}

.pg-dana__btn {
  margin-top: 20px;
  width: 100%;
  padding: 14px 24px;
  background: var(--rim-mid);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s;
}

.pg-dana__btn:hover:not(:disabled) {
  background: var(--rim-blue);
}

.pg-dana__btn:disabled {
  background: var(--rim-rule);
  color: var(--rim-text-muted);
  cursor: not-allowed;
}

/* Dana result banners (shown after Stripe redirects back) */

.pg-dana-result {
  padding: 16px 20px;
  border-radius: 4px;
  font-size: var(--text-small);
  margin-bottom: 24px;
}

.pg-dana-result--success {
  background: #edf7ed;
  color: #2d6a2d;
  border: 1px solid #b8dfb8;
}

.pg-dana-result--cancelled {
  background: var(--rim-bg-accent);
  color: var(--rim-text-muted);
  border: 1px solid var(--rim-rule);
}

/* ── Mobile ── */

@media screen and (max-width: 767px) {
  /* Reduce hero padding and card overlap on mobile —
     less room for the effect, smaller overlap still reads well */
  .pg-hero          { padding: 60px 24px 110px; }
  .pg-hero__title   { font-size: 36px; }
  .pg-quote         { padding: 28px 24px 24px; margin-top: -50px; }
  .pg-quote__text   { font-size: var(--text-body); }
  .pg-cta-card      { padding: 24px 20px; }
  .pg-section-heading { font-size: var(--text-h3); }
  .pg-registration__inner { padding: 28px 20px; }
  .pg-form__row     { grid-template-columns: 1fr; gap: 0; }
}


/* ═══════════════════════════════════════════════════
   STYLE GUIDE  (/style-guide)
   Developer reference page only — sg- prefix.
═══════════════════════════════════════════════════ */

.sg-page {
  padding: 60px 0 120px;
  background: #fff;
}

.sg-header {
  padding-bottom: 48px;
  margin-bottom: 60px;
  border-bottom: 3px solid #e4e4e4;
}

.sg-title {
  font-size: 40px;
  font-weight: 700;
  color: #080e2a;
  margin: 0 0 8px;
}

.sg-subtitle {
  color: #666;
  font-size: 16px;
  margin: 0;
}

/* Section wrapper */
.sg-section { margin-bottom: 80px; }

.sg-section-title {
  font-size: 26px;
  font-weight: 700;
  color: #080e2a;
  margin: 0 0 28px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e8e8e8;
}

.sg-section-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: #999;
  margin: 0 0 8px;
}

/* Component card */
.sg-component {
  margin-bottom: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.sg-component-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.sg-component-name {
  font-family: var(--font-mono);
  font-size: var(--text-ui);
  font-weight: 700;
  color: #135274;
  background: #deeaf2;
  padding: 3px 9px;
  border-radius: 4px;
}

.sg-component-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  font-weight: 600;
  color: #fff;
  background: #39607a;
  padding: 3px 9px;
  border-radius: 10px;
}

.sg-component-path {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: #aaa;
}

.sg-component-desc {
  padding: 10px 20px;
  margin: 0;
  font-size: var(--text-xs);
  color: #555;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  line-height: 1.6;
}

.sg-component-desc code {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  background: #e4ecf2;
  padding: 1px 5px;
  border-radius: 3px;
  color: #135274;
}

.sg-component-preview {
  padding: 32px 24px;
  background: #fff;
}

.sg-component-preview--grey {
  background: #fafafa;
}

/* Typography rows */
.sg-section-preview {
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  overflow: hidden;
}

.sg-type-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid #f2f2f2;
}

.sg-type-row:last-child { border-bottom: none; }

.sg-type-row-dark {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 14px 0;
}

.sg-type-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  color: #aaa;
  min-width: 200px;
  flex-shrink: 0;
}

.sg-type-label--light {
  color: rgba(255,255,255,0.4);
}

/* Buttons section */
.sg-button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
}

.sg-button-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.sg-button-label {
  font-family: var(--font-mono);
  font-size: var(--text-xxs);
  color: #aaa;
}

/* Color palette */
.sg-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.sg-color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100px;
}

.sg-color-block {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
}

.sg-color-hex {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 600;
  color: #333;
}

.sg-color-name {
  font-size: var(--text-label);
  font-weight: 600;
  color: #555;
  text-align: center;
}

.sg-color-usage {
  font-size: var(--text-xxs);
  color: #aaa;
  text-align: center;
  line-height: 1.4;
}


/* ═══════════════════════════════════════════════════
   COMMUNITY PROGRAMS LIST PAGE  (pl- prefix)
   /community-programs — hero + program listings by category.
═══════════════════════════════════════════════════ */

/* Hero — bodhi-leaves background image with teal overlay.
   Left-aligned text block. Uses rim-container inside for
   consistent horizontal alignment with the listing section. */
.pl-hero {
  background-color: var(--rim-blue);
  background-image: url('/images/Bodhi-Leaves.jpg');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  position: relative;
}

.pl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 82, 116, 0.70);
  pointer-events: none;
}

/* z-index lifts text above the ::before overlay */
.pl-hero .rim-container { position: relative; z-index: 1; }

.pl-hero__title {
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 18px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  max-width: 540px;
}

.pl-hero__body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: rgba(255, 255, 255, 0.88);
  max-width: 480px;
  margin: 0 0 32px;
  line-height: var(--lh-body);
}

/* White pill CTA — solid white with dark text */
.pl-hero__cta {
  display: inline-block;
  background: #fff;
  color: var(--rim-text);
  border: none;
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 500;
  padding: 13px 30px;
  text-decoration: none;
  transition: opacity 0.15s;
}
.pl-hero__cta:hover {
  opacity: 0.9;
}

/* Category groups */
.pl-cat {
  margin-bottom: 56px;
}
.pl-cat:last-child {
  margin-bottom: 0;
}

.pl-cat__heading {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  color: var(--rim-text);
  margin: 0 0 16px;
  padding-left: 4px; /* nearly flush with card edge + hero text */
  line-height: var(--lh-heading);
}

.pl-list {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

@media (max-width: 430px) {
  .pl-hero__title { font-size: 36px; }
  .pl-cat__heading { padding-left: 18px; }
}


/* ═══════════════════════════════════════════════════
   THIS WEEK PAGE  (tw- prefix)
   /this-week — dynamic weekly schedule from Program data.
   Hero matches pl-hero (bg image + teal overlay).
   Program rows reuse lr-row card styling.
═══════════════════════════════════════════════════ */

/* Hero — same bg/overlay as pl-hero, centered text */
.tw-hero {
  background-color: var(--rim-blue);
  background-image: url('/images/Bodhi-Leaves.jpg');
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  position: relative;
  text-align: center;
}

.tw-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 82, 116, 0.70);
  pointer-events: none;
}

.tw-hero .rim-container { position: relative; z-index: 1; }

.tw-hero__title {
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.tw-hero__subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 6px;
}

.tw-hero__range {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 32px;
  letter-spacing: -0.3px;
}

/* Week nav pills */
.tw-hero__nav {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.tw-nav-btn {
  display: inline-block;
  padding: 9px 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tw-nav-btn:hover {
  border-color: #fff;
  color: #fff;
}
.tw-nav-btn--active {
  background: #fff;
  color: var(--rim-blue);
  border-color: #fff;
}

/* Program rows reuse lr-row + pl-cat + pl-list from the programs
   list page. These are the only overrides needed: */

/* Subtle category tag appended to the schedule line */
.tw-cat-tag {
  color: var(--rim-text-muted);
  font-size: var(--text-xs);
  font-style: italic;
}

/* Footer note */
.tw-footer {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  text-align: center;
  font-style: italic;
  margin: 48px 0 0;
}

.tw-empty {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--rim-mid);
  text-align: center;
  padding: 40px 0;
}

@media (max-width: 430px) {
  .tw-hero__title { font-size: var(--text-h2); }
}


/* ═══════════════════════════════════════════════════
   MEMBER DASHBOARD — Staff panel  (db- prefix)
   Appended below existing dashboard (Webflow-class) content.
═══════════════════════════════════════════════════ */

.db-staff {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--rim-rule);
}

.db-staff__label {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 16px;
}

.db-staff__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.db-staff__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 200px;
}

.db-staff__card:hover {
  border-color: var(--rim-mid);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.db-staff__card-title {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--rim-blue);
}

.db-staff__card-desc {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
}

/* ── Pending dana reminder (shown when promoted from waitlist) ── */
.db-dana-reminder {
  margin-top: 32px;
  padding: 20px 24px;
  background: #fef9f0;
  border: 1px solid #f0d8a0;
  border-radius: 6px;
}

.db-dana-reminder__label {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #856404;
}

.db-dana-reminder__desc {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: 1.6;
  color: var(--rim-text);
}

.db-dana-reminder__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.db-dana-reminder__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #f0d8a0;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--rim-blue);
  text-decoration: none;
}

.db-dana-reminder__item:hover { background: #fef3cd; }

.db-dana-reminder__arrow {
  font-size: 16px;
  color: #c9a230;
}


/* ═══════════════════════════════════════════════════
   VOLUNTEER ADMIN  (/volunteer)
   Internal registration management. vol- prefix.
═══════════════════════════════════════════════════ */

.vol-page {
  min-height: 100vh;
  padding: 48px 0 100px;
  background: var(--rim-bg);
}

.vol-content {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 32px;
}

.vol-unauthorized,
.vol-empty {
  color: var(--rim-text-muted);
  font-style: italic;
  font-size: 16px;
  padding: 24px 0;
}

/* ── Header ── */

.vol-header {
  margin-bottom: 32px;
}

.vol-header__title {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--rim-text);
  margin: 6px 0 0;
  line-height: 1.2;
}

.vol-back {
  display: inline-block;
  font-size: var(--text-ui);
  color: var(--rim-mid);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.15s;
}

.vol-back:hover { color: var(--rim-blue); }

.vol-header__row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.vol-header__edit-link {
  font-size: var(--text-ui); color: var(--rim-mid); text-decoration: none;
  font-family: var(--font-sans); font-weight: 400;
}
.vol-header__edit-link:hover { color: var(--rim-blue); text-decoration: underline; }

/* ── Program cards (landing) ── */

.vol-programs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vol-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-left: 3px solid var(--rim-rule);
  border-radius: 6px;
  padding: 20px 22px 20px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.vol-card:hover {
  border-color: var(--rim-mid);
  border-left-color: var(--rim-mid);
  background: var(--rim-bg-accent);
}

.vol-card--attention {
  border-left-color: #856404;
}

.vol-card__main {
  flex: 1;
  min-width: 0;
}

.vol-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 4px;
}

.vol-card__tagline {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 0;
}

/* Capacity bar on cards */
.vol-capacity {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vol-capacity__bar {
  width: 100px;
  height: 5px;
  background: var(--rim-rule);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.vol-capacity__fill {
  height: 100%;
  background: var(--rim-mid);
  border-radius: 3px;
  transition: width 0.3s;
}

.vol-capacity__fill--near { background: #856404; }
.vol-capacity__fill--full { background: #a83232; }

.vol-capacity__label {
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  white-space: nowrap;
}

/* Signal pills on cards */
.vol-card__signals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
}

.vol-card__arrow {
  font-size: var(--text-small);
  color: var(--rim-rule);
  transition: color 0.15s;
  margin-top: 2px;
}

.vol-card:hover .vol-card__arrow { color: var(--rim-mid); }

.vol-signal {
  font-size: var(--text-label);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.vol-signal--amber { background: #fef3cd; color: #856404; }
.vol-signal--clear { background: var(--rim-bg-accent); color: var(--rim-text-muted); font-weight: 400; }
.vol-signal--empty { color: var(--rim-text-muted); font-weight: 400; font-size: var(--text-label); padding: 3px 0; }
.vol-signal--spot-open { background: #d4edda; color: #155724; }

/* ── Status badges ── */

.vol-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.vol-badge--registered   { background: #e8f4ec; color: #2e7d52; }
.vol-badge--waitlisted   { background: #fef3cd; color: #856404; }
.vol-badge--approved     { background: #e0ecf8; color: #1a5c94; }
.vol-badge--cancelled    { background: #f2f2f2; color: #888; }

.vol-badge--donation-pending    { background: #fef3cd; color: #856404; font-weight: 400; font-size: var(--text-xs); }
.vol-badge--donation-completed  { background: #e8f4ec; color: #2e7d52; font-weight: 400; font-size: var(--text-xs); }
.vol-badge--donation-waived     { background: #f2f2f2; color: #888;    font-weight: 400; font-size: var(--text-xs); }
.vol-badge--donation-not_required { color: var(--rim-text-muted); font-size: var(--text-xs); }

/* ── Stat bar (above toolbar) ── */

.vol-stat-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px 0 20px;
  border-bottom: 1px solid var(--rim-rule);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.vol-stat-bar__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vol-stat-bar__item--amber .vol-stat-bar__num { color: #856404; }

.vol-stat-bar__num {
  font-size: 26px;
  font-weight: 700;
  color: var(--rim-blue);
  line-height: 1;
  font-family: var(--font-sans);
}

.vol-stat-bar__num--muted {
  color: var(--rim-text-muted);
  font-size: var(--text-h4);
}

.vol-stat-bar__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
}

.vol-stat-bar__capacity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* ── Toolbar ── */

.vol-table-wrap {
  margin-top: 8px;
}

.vol-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.vol-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.vol-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--rim-rule);
  border-radius: 20px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}

.vol-filter:hover {
  border-color: var(--rim-mid);
  color: var(--rim-text);
}

.vol-filter--active {
  background: var(--rim-blue);
  border-color: var(--rim-blue);
  color: #fff;
}

.vol-filter__count {
  display: inline-block;
  background: rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 0 6px;
  font-size: var(--text-xxs);
  font-weight: 700;
  line-height: 1.6;
}

.vol-csv-btn {
  padding: 7px 16px;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--rim-mid);
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}

.vol-csv-btn:hover {
  background: var(--rim-mid);
  border-color: var(--rim-mid);
  color: #fff;
}

/* ── Table ── */

.vol-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-ui);
}

.vol-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  border-bottom: 2px solid var(--rim-rule);
  white-space: nowrap;
}

.vol-th-toggle { width: 28px; padding-right: 0 !important; }

/* Row — left border indicates status at a glance */
.vol-row {
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.1s;
}

.vol-row:hover        { background: var(--rim-bg-accent); }
.vol-row--expanded    { background: var(--rim-bg-accent); }

.vol-row--registered  { border-left-color: #2e7d52; }
.vol-row--waitlisted  { border-left-color: #856404; }
.vol-row--approved    { border-left-color: #2e7d52; }
.vol-row--cancelled   { border-left-color: var(--rim-rule); opacity: 0.65; }

.vol-row td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--rim-rule);
  vertical-align: middle;
}

/* CSS chevron — replaces Unicode arrow characters */
.vol-row__toggle {
  padding-right: 0 !important;
  width: 28px;
}

.vol-chevron {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--rim-text-muted);
  border-bottom: 2px solid var(--rim-text-muted);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
  margin-top: 1px;
}

.vol-chevron--open {
  transform: rotate(45deg);
  margin-top: -3px;
}

/* Stacked name + email cell */
.vol-row__person {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.vol-row__name  { font-weight: 600; font-size: var(--text-ui); color: var(--rim-text); }
.vol-row__email { font-size: var(--text-label); color: var(--rim-text-muted); }

/* Status cell — text label, no pill */
.vol-row__status-cell { vertical-align: middle; }

.vol-row__status-text             { font-size: var(--text-xs); font-weight: 600; display: block; }
.vol-row__status-text--registered { color: #2e7d52; }
.vol-row__status-text--waitlisted { color: #856404; }
.vol-row__status-text--approved   { color: #2e7d52; }
.vol-row__status-text--cancelled  { color: var(--rim-text-muted); }

/* Inline promote — text link style, not a full button */
.vol-promote-inline {
  display: block;
  margin-top: 3px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1e6b58;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.vol-promote-inline:hover:not(:disabled) { color: var(--rim-blue); }
.vol-promote-inline:disabled { opacity: 0.4; cursor: default; }

.vol-row__dana { vertical-align: middle; }
.vol-row__date { color: var(--rim-text-muted); white-space: nowrap; vertical-align: middle; }

/* ── Expanded row detail ── */

.vol-row-detail td {
  padding: 0;
  border-bottom: 2px solid var(--rim-rule);
  background: #fff;
}

/* 3-column grid: Contact | Submission | Staff */
.vol-detail {
  display: grid;
  grid-template-columns: 210px 1fr 240px;
  border-top: 1px solid var(--rim-bg-accent);
}

.vol-detail__contact-col,
.vol-detail__submission-col,
.vol-detail__staff-col {
  padding: 20px 24px;
}

.vol-detail__contact-col   { background: var(--rim-bg); border-right: 1px solid var(--rim-rule); }
.vol-detail__submission-col { border-right: 1px solid var(--rim-rule); }
.vol-detail__staff-col     { background: var(--rim-bg); }

/* Column label — standalone or inside header row */
.vol-detail__col-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 12px;
}

/* Label + inline Edit button row (Responses column) */
.vol-detail__col-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.vol-detail__col-header .vol-detail__col-label {
  margin: 0;
}

/* Contact column */
.vol-detail__full-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 6px;
}

.vol-detail__link {
  display: block;
  font-size: var(--text-small);
  color: var(--rim-mid);
  text-decoration: none;
  margin-bottom: 3px;
  word-break: break-all;
}

.vol-detail__link:hover {
  color: var(--rim-blue);
  text-decoration: underline;
}

.vol-detail__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.vol-detail__meta-text {
  font-size: var(--text-small);
  color: var(--rim-text-muted);
}

.vol-detail__dana-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rim-rule);
}

/* Submission column */
.vol-detail__fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.vol-detail__field-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vol-detail__fields dt {
  font-size: var(--text-xxs);
  font-weight: 700;
  color: var(--rim-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.vol-detail__fields dd {
  font-size: var(--text-small);
  color: var(--rim-text);
  margin: 0;
  line-height: 1.5;
}

.vol-detail__comments {
  font-size: var(--text-ui);
  color: var(--rim-text);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
  padding-left: 12px;
  border-left: 3px solid var(--rim-rule);
}

.vol-detail__comments-section { margin-top: 20px; }

.vol-detail__empty {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  font-style: italic;
  margin: 0;
}

/* Staff column — notes + actions */
.vol-detail__notes-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.vol-detail__notes-wrap .rim-prose-editor {
  border: none;
  border-radius: 0;
  min-height: 80px;
}
.vol-detail__notes-wrap .rim-prose-editor .bn-editor {
  padding: 24px !important;
}
.vol-detail__notes-wrap .bn-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.vol-notes {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: 1.6;
  color: var(--rim-text);
  background: #fff;
  resize: vertical;
  box-sizing: border-box;
}

.vol-notes:focus {
  outline: none;
  border-color: var(--rim-mid);
}

.vol-save-btn {
  align-self: flex-start;
  padding: 6px 16px;
  background: var(--rim-mid);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.vol-save-btn:hover:not(:disabled) { background: var(--rim-blue); }
.vol-save-btn:disabled { background: var(--rim-rule); cursor: default; }

.vol-detail__actions-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--rim-rule);
}

/* Full-width action buttons inside the detail panel */
.vol-action-btn {
  width: 100%;
  padding: 11px 16px;
  min-height: 44px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  box-sizing: border-box;
}

.vol-action-btn:disabled { opacity: 0.45; cursor: default; }

/* ── Dominant action (state-based emphasis) ── */
.vol-action-btn--dominant { background: var(--rim-mid); border: none; color: #fff; font-size: 16px; }
.vol-action-btn--dominant:hover:not(:disabled) { background: var(--rim-blue); }

.vol-action-btn--promote { background: var(--rim-mid); border: none; color: #fff; }
.vol-action-btn--promote:hover:not(:disabled) { background: var(--rim-blue); }

.vol-action-btn--ghost { background: none; border: 1px solid var(--rim-rule); color: var(--rim-text-muted); }
.vol-action-btn--ghost:hover:not(:disabled) { border-color: var(--rim-mid); color: var(--rim-mid); }

.vol-action-btn--danger { background: none; border: 1px solid #dc7575; color: #a83232; }
.vol-action-btn--danger:hover:not(:disabled) { background: #fdf0f0; border-color: #c06060; }

.vol-action-btn--restore { background: none; border: 1px solid var(--rim-rule); color: var(--rim-text-muted); }
.vol-action-btn--restore:hover:not(:disabled) { border-color: var(--rim-mid); color: var(--rim-mid); }

/* Inline confirm-cancel */
.vol-confirm-wrap  { display: flex; flex-direction: column; gap: 8px; }
.vol-confirm-label { font-size: var(--text-label); color: var(--rim-text-muted); font-style: italic; }
.vol-confirm-btns  { display: flex; flex-direction: column; gap: 4px; }

/* Inline cancel text link (status cell — REGISTERED/APPROVED rows) */
.vol-cancel-inline {
  display: block; margin-top: 3px; padding: 0; background: none; border: none;
  font-family: var(--font-sans); font-size: var(--text-xxs); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #a83232; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s;
}
.vol-cancel-inline:hover { color: #c06060; }

/* Inline cancel confirm (appears in status cell on click) */
.vol-cancel-confirm {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}
.vol-cancel-confirm__yes {
  padding: 2px 7px;
  border: 1px solid #a83232;
  border-radius: 3px;
  background: none;
  color: #a83232;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s;
}
.vol-cancel-confirm__yes:hover:not(:disabled) { background: #fdf0f0; }
.vol-cancel-confirm__yes:disabled { opacity: 0.5; cursor: default; }
.vol-cancel-confirm__no {
  padding: 2px 5px;
  background: none;
  border: 1px solid var(--rim-rule);
  border-radius: 3px;
  color: var(--rim-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-label);
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.vol-cancel-confirm__no:hover { color: var(--rim-text); border-color: var(--rim-text-muted); }

/* Inline restore text link (status cell — CANCELLED rows) */
.vol-restore-inline {
  display: block; margin-top: 3px; padding: 0; background: none; border: none;
  font-family: var(--font-sans); font-size: var(--text-xxs); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--rim-text-muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s;
}
.vol-restore-inline:hover:not(:disabled) { color: var(--rim-mid); }
.vol-restore-inline:disabled { opacity: 0.4; cursor: default; }

/* Dana label in contact column */
.vol-detail__dana-label {
  font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--rim-text-muted);
}

/* Send Dana Reminder button */
.vol-action-btn--reminder { background: none; border: 1px solid #9ecfbe; color: #1e6b58; }
.vol-action-btn--reminder:hover:not(:disabled) { background: #e0f0ec; }

/* Send Edit Request button */
.vol-action-btn--edit-request {
  background: none; border: 1px solid var(--rim-rule); color: var(--rim-text-muted);
}
.vol-action-btn--edit-request:hover:not(:disabled) { border-color: var(--rim-mid); color: var(--rim-mid); }

/* Inline field editor — Responses column */
.vol-edit-fields-btn {
  display: inline-block; padding: 0; background: none; border: none;
  font-family: var(--font-sans); font-size: var(--text-xxs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--rim-mid); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s;
}
.vol-edit-fields-btn:hover { color: var(--rim-blue); }

.vol-fields-edit { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

.vol-field-edit__label {
  display: block; font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--rim-text-muted); margin-bottom: 3px;
}
.vol-field-edit__input,
.vol-field-edit__select {
  width: 100%; padding: 5px 8px; border: 1px solid var(--rim-rule); border-radius: 4px;
  font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-text);
  background: #fff; box-sizing: border-box;
}
.vol-field-edit__input:focus,
.vol-field-edit__select:focus { outline: none; border-color: var(--rim-mid); }
.vol-field-edit__textarea {
  min-height: 60px; resize: vertical;
}
.vol-field-edit__actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

/* Delete Record buttons */
.vol-action-btn--delete {
  background: none; border: 1px solid #dc7575; color: #a83232;
}
.vol-action-btn--delete:hover:not(:disabled) { background: #fdf0f0; border-color: #c06060; }

.vol-action-btn--delete-ghost {
  background: none; border: 1px solid var(--rim-rule); color: #bbb; font-size: var(--text-label);
}
.vol-action-btn--delete-ghost:hover:not(:disabled) { border-color: #dc7575; color: #a83232; }

/* Search input in toolbar */
.vol-search {
  padding: 6px 14px; border: 1px solid var(--rim-rule); border-radius: 20px;
  font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-text);
  background: #fff; width: 220px; transition: border-color 0.15s; box-sizing: border-box;
}
.vol-search:focus { outline: none; border-color: var(--rim-mid); }
.vol-search::placeholder { color: var(--rim-text-muted); }

/* ── Mobile ── */

@media screen and (max-width: 767px) {

  /* Page chrome */
  .vol-page    { padding: 24px 0 64px; }
  .vol-content { padding: 0 16px; }

  /* Programs list cards */
  .vol-card { flex-direction: column; align-items: flex-start; gap: 12px; }
  .vol-card__signals { align-items: flex-start; }

  /* Toolbar */
  .vol-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }

  /* Filter tabs: single scrollable row */
  .vol-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    gap: 6px;
  }

  .vol-filter  { flex-shrink: 0; white-space: nowrap; }
  .vol-search  { width: 100%; }
  .vol-csv-btn { align-self: flex-start; }

  /* ── Table → card layout ── */
  .vol-table,
  .vol-table tbody { display: block; }
  .vol-table thead { display: none; }

  .vol-row {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 3px;
    align-items: center;
    padding: 14px 16px 14px 12px;
    border-bottom: 1px solid var(--rim-rule);
    border-left-width: 3px;
  }

  /* Hide all cells; selectively reveal */
  .vol-row td {
    display: none;
    padding: 0;
    border: none;
    vertical-align: unset;
  }

  /* Specificity must beat .vol-row td (0,1,1) — use .vol-row .class (0,2,0) */
  .vol-row .vol-row__toggle     { display: block; grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .vol-row .vol-row__person     { display: flex;  grid-column: 2; grid-row: 1 / 3; }
  .vol-row .vol-row__status-cell { display: block; grid-column: 3; grid-row: 1 / 3; align-self: center; text-align: right; }
  .vol-row .vol-row__dana,
  .vol-row .vol-row__date       { display: none; }

  /* 3-col panel → single column */
  .vol-detail {
    grid-template-columns: 1fr;
  }

  .vol-detail__contact-col   { border-right: none; border-bottom: 1px solid var(--rim-rule); }
  .vol-detail__submission-col { border-right: none; border-bottom: 1px solid var(--rim-rule); }

  /* Stat bar */
  .vol-stat-bar { gap: 16px; padding: 12px 0 16px; }
  .vol-stat-bar__num { font-size: var(--text-h4); }
  .vol-stat-bar__capacity { margin-left: 0; width: 100%; }

  /* Save button full width */
  .vol-save-btn { align-self: stretch; text-align: center; }

  /* Inline cancel confirm — right-align to match status cell */
  .vol-cancel-confirm { justify-content: flex-end; }

}

/* ═══════════════════════════════════════════════════════════════════════════
   Register Page (rg-) — dedicated /programs/[slug]/register
   Design-system page; no Webflow CSS dependency.
   ═══════════════════════════════════════════════════════════════════════════ */

.rg-page {
  min-height: 100vh;
  background: var(--rim-bg);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.rg-header {
  background: var(--rim-blue);
  color: #fff;
  padding: 36px 24px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.rg-header__back {
  display: inline-block;
  color: rgba(255, 255, 255, 0.65);
  font: 500 12px / 1 var(--font-sans);
  text-decoration: none;
  letter-spacing: 0.04em;
  align-self: flex-start;       /* left-align the back link */
  transition: color 0.15s;
}
.rg-header__back:hover { color: rgba(255, 255, 255, 0.95); }

.rg-header__program-name {
  font: 600 11px / 1 var(--font-sans);
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
}

.rg-header__title {
  font: 400 30px / 1.2 var(--font-serif);
  color: #fff;
  margin: 0;
}

/* ── Content column ──────────────────────────────────────────────────────── */

.rg-content {
  max-width: 580px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ── Already-registered message ─────────────────────────────────────────── */

.rg-already {
  text-align: center;
  padding: 48px 0;
  font-family: var(--font-sans);
  color: var(--rim-text);
}
.rg-already p {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 20px;
}
.rg-already a {
  font-size: var(--text-small);
  color: var(--rim-mid);
  text-decoration: underline;
}
.rg-already a:hover { color: var(--rim-blue); }

/* ── Program page CTA buttons (replaces embedded form) ─────────────────── */

.pg-register-cta {
  margin-top: 4px;
}

.pg-register-btn {
  display: inline-block;
  background: var(--rim-blue);
  color: #fff;
  font: 600 14px / 1 var(--font-sans);
  padding: 11px 22px;
  border-radius: 3px;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: opacity 0.15s;
}
.pg-register-btn:hover { opacity: 0.85; color: #fff; }

.pg-register-btn--secondary {
  background: transparent;
  border: 1.5px solid var(--rim-mid);
  color: var(--rim-mid);
}
.pg-register-btn--secondary:hover {
  background: rgba(57, 96, 122, 0.07);
  opacity: 1;
  color: var(--rim-mid);
}

.pg-register-status {
  display: inline-block;
  font: 14px / 1.4 var(--font-sans);
  color: var(--rim-text-muted);
}

/* Add-to-calendar links — shown below ✓ registered status */
.pg-calendar-links {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.pg-calendar-link {
  font: 12px / 1.4 var(--font-sans);
  color: var(--rim-mid);
  text-decoration: none;
  white-space: nowrap;
}
.pg-calendar-link:hover {
  text-decoration: underline;
  color: var(--rim-blue);
}

/* ── Capacity notices — shown near registration CTA ─────────────────────── */
.pg-capacity {
  margin: 10px 0 0;
  font: 13px / 1.5 var(--font-sans);
  color: var(--rim-text-muted);
}
.pg-capacity--full {
  padding: 10px 14px;
  background: #fff8e1;
  border-radius: 4px;
  color: var(--rim-text);
}
.pg-capacity--low {
  /* plain muted text — low urgency, no background */
}

/* ── Register page mobile ────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .rg-header { padding: 28px 20px 24px; gap: 8px; }
  .rg-header__title { font-size: var(--text-h3); }
  .rg-content { padding: 28px 20px 60px; }
}

/* ═══════════════════════════════════════════════════
   UPDATE RESPONSES PAGE  (ur- prefix)
   /update/[token] — self-service form for registrants
═══════════════════════════════════════════════════ */

.ur-wrap  { max-width: 560px; margin: 60px auto; padding: 0 24px 80px; }
.ur-title {
  font-family: var(--font-serif); font-size: var(--text-h2); font-weight: 400;
  color: var(--rim-text); line-height: 1.3; margin: 0 0 10px;
}
.ur-sub   { font-size: var(--text-small); color: var(--rim-text-muted); margin: 0 0 36px; line-height: 1.7; }

.ur-field { margin-bottom: 22px; }
.ur-label {
  display: block; font-size: var(--text-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--rim-text-muted); margin-bottom: 6px;
}
.ur-input,
.ur-textarea,
.ur-select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--rim-rule); border-radius: 4px;
  font-family: var(--font-sans); font-size: var(--text-small); color: var(--rim-text);
  background: #fff; box-sizing: border-box;
}
.ur-input:focus,
.ur-textarea:focus,
.ur-select:focus { outline: none; border-color: var(--rim-mid); }
.ur-textarea { min-height: 90px; resize: vertical; }

.ur-submit {
  display: inline-block; padding: 12px 28px; background: var(--rim-mid); color: #fff;
  border: none; border-radius: 4px; font-family: var(--font-sans); font-size: var(--text-small);
  font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.ur-submit:hover:not(:disabled) { background: var(--rim-blue); }
.ur-submit:disabled { opacity: 0.6; cursor: default; }

.ur-success {
  font-family: var(--font-sans); font-size: 17px; color: #2e7d52;
  margin-top: 32px; line-height: 1.6;
}

@media (max-width: 767px) {
  .ur-wrap { margin: 36px auto; }
  .ur-title { font-size: 22px; }
}

/* ── Spot-opened alert banner (VolunteerTable) ──────────────────────────────── */
.vol-spot-opened {
  padding: 14px 18px;
  background: #fff8e1;
  border-left: 4px solid var(--rim-mid);
  border-radius: 0 4px 4px 0;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: 1.5;
  color: var(--rim-text);
  margin-bottom: 16px;
}
.vol-spot-opened strong { font-weight: 700; }

/* ── Reminder section — program-level (VolunteerTable) ────────────────────── */
.vol-reminder-section {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 11px 16px; background: var(--rim-bg-accent);
  border: 1px solid var(--rim-rule); border-radius: 4px; margin-bottom: 16px;
}
.vol-reminder-meta  { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vol-reminder-label {
  font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--rim-text-muted);
}
.vol-reminder-date  { font-size: var(--text-xs); color: var(--rim-text); }
.vol-reminder-count { font-size: var(--text-xs); color: var(--rim-text-muted); }
.vol-reminder-all-sent { font-size: var(--text-xs); color: #2e7d52; font-weight: 600; }

.vol-reminder-bulk-btn {
  margin-left: auto; padding: 6px 14px;
  background: none; border: 1px solid var(--rim-mid); color: var(--rim-mid);
  border-radius: 4px; font-size: var(--text-xs); font-weight: 600; cursor: pointer;
  transition: background 0.15s, color 0.15s; white-space: nowrap;
}
.vol-reminder-bulk-btn:hover:not(:disabled) { background: var(--rim-mid); color: #fff; }
.vol-reminder-bulk-btn:disabled { opacity: 0.6; cursor: default; }

.vol-reminder-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vol-reminder-names-toggle {
  font-size: var(--text-xs); color: var(--rim-mid); background: none; border: none;
  cursor: pointer; text-decoration: underline; font-family: var(--font-sans);
}
.vol-reminder-names-toggle:hover { color: var(--rim-blue); }
.vol-reminder-names {
  display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px;
  font-size: var(--text-ui); color: var(--rim-text); line-height: 1.6;
}
.vol-reminder-name { white-space: nowrap; }

/* Per-row reminder sent indicator and send button */
.vol-reminder-sent-badge {
  display: block; font-size: var(--text-label); color: var(--rim-text-muted); font-style: italic;
  margin-bottom: 6px;
}
.vol-action-btn--prog-reminder {
  background: none; border: 1px solid var(--rim-rule); color: var(--rim-text-muted);
}
.vol-action-btn--prog-reminder:hover:not(:disabled) {
  border-color: var(--rim-mid); color: var(--rim-mid);
}
.vol-action-btn--resend {
  background: none; border: 1px solid var(--rim-rule); color: var(--rim-text-muted);
}
.vol-action-btn--resend:hover:not(:disabled) {
  border-color: var(--rim-mid); color: var(--rim-mid);
}
/* (vol-meet CSS removed — Google Meet replaced by LiveKit) */

/* ============================================================
   ACCOUNT LAYOUT — sidebar + content shell (ac-)
   Desktop: sticky left sidebar, 220px expanded / 56px collapsed
            Collapse state persisted to localStorage
   Mobile:  horizontal scrollable strip below main nav
   ============================================================ */

/* UI font scale — 16px / 1.55 for all product/task interfaces.
   Applies to /account/*, /tools/*, and /admin/* contexts.
   Reading content inside these areas (.rim-content) overrides back to
   var(--text-body) / var(--lh-body) = 18px / 1.7 — editors, manuals,
   articles, and lessons stay generous regardless of their container. */
.ac-layout {
  display: flex;
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.55;
}
.admin-ui {
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
}
.ac-layout--no-sidebar {
  display: block;
}

/* ── Sidebar shell ── */
.ac-sidebar {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 10px 48px;
  border-right: 1px solid var(--rim-rule);
  background: var(--rim-bg);
  transition: width 0.2s ease;
}

.ac-sidebar--collapsed {
  width: 56px;
}

/* ── Toggle button ── */
.ac-sidebar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 auto 20px;
  border-radius: 6px;
  background: transparent;
  color: var(--rim-text-muted);
  cursor: pointer;
  border: none;
  transition: background 0.15s, color 0.15s;
}
.ac-sidebar__toggle:hover {
  background: var(--rim-bg-accent);
  color: var(--rim-text);
}
.ac-sidebar--collapsed .ac-sidebar__toggle {
  margin: 0 auto 20px;
}

/* ── Nav list ── */
.ac-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Individual links ── */
.ac-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--rim-text-muted);
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s, color 0.15s;
}
.ac-sidebar__link:hover {
  background: var(--rim-bg-accent);
  color: var(--rim-text);
}
.ac-sidebar__link--active {
  background: var(--rim-bg-accent);
  color: var(--rim-blue);
  font-weight: 600;
}

/* ── Icon ── */
.ac-sidebar__icon {
  flex-shrink: 0;
}

/* ── Label — hidden when collapsed ── */
.ac-sidebar__label {
  opacity: 1;
  transition: opacity 0.15s ease;
}
.ac-sidebar--collapsed .ac-sidebar__label {
  opacity: 0;
  pointer-events: none;
  width: 0;
  overflow: hidden;
}

/* Center icons when collapsed */
.ac-sidebar--collapsed .ac-sidebar__link {
  justify-content: center;
  padding: 9px 0;
}

/* ── Section labels ── */
.ac-sidebar__section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rim-text-muted);
  padding: 10px 10px 2px;
}

/* ── Dividers ── */
.ac-sidebar__divider {
  height: 1px;
  background: var(--rim-rule);
  margin: 10px 6px;
}

/* ── Content area ── */
.ac-content {
  flex: 1;
  min-width: 0;
  padding: 40px 48px 80px;
}

/* ── Universal centered inner container ── */
.ac-inner {
  max-width: 860px;
  margin: 0 auto;
}

/* ── Mobile: horizontal scroll strip ── */
@media (max-width: 700px) {
  .ac-layout {
    flex-direction: column;
  }

  .ac-sidebar {
    width: 100% !important;
    height: auto;
    position: static;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--rim-rule);
    overflow-y: visible;
    overflow-x: auto;
    transition: none;
  }

  .ac-sidebar__toggle {
    display: none;
  }

  .ac-sidebar__nav {
    flex-direction: row;
    gap: 0;
    padding: 6px 12px;
    white-space: nowrap;
  }

  .ac-sidebar__link {
    display: inline-flex;
    font-size: var(--text-xs);
    padding: 8px 10px;
    gap: 6px;
    white-space: nowrap;
    overflow: visible;
  }

  .ac-sidebar__label {
    opacity: 1 !important;
    width: auto !important;
  }

  .ac-sidebar__section-label {
    display: none;
  }

  .ac-sidebar__divider {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    align-self: center;
    flex-shrink: 0;
  }

  .ac-content {
    padding: 24px 20px 48px;
  }
}

/* ============================================================
   ADMIN MEMBER MANAGEMENT (adm-)
   /admin/members — member list, import, detail, role assignment
   ============================================================ */

.adm-page {
  min-height: 80vh;
  padding: 48px 24px 80px;
  background: var(--rim-bg);
}

.adm-content {
  max-width: 960px;
  margin: 0 auto;
}

.adm-content--narrow {
  max-width: 680px;
}

.adm-unauthorized {
  color: var(--rim-text-muted);
  font-style: italic;
}

/* ── Header ─────────────────────────────────────────── */
.adm-header {
  margin-bottom: 32px;
}

.adm-header__title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--rim-text);
  margin: 4px 0 0;
  line-height: 1.2;
}

.adm-header__count {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 4px 0 0;
}

.adm-header__meta {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 4px 0 0;
}

.adm-back {
  display: inline-block;
  font-size: var(--text-ui);
  color: var(--rim-mid);
  text-decoration: none;
  margin-bottom: 24px;
}

.adm-back:hover { text-decoration: underline; }

/* ── Search bar ─────────────────────────────────────── */
.adm-search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.adm-search__input {
  flex: 1;
  min-width: 200px;
  max-width: 420px;
  padding: 9px 14px;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  font-size: var(--text-small);
  font-family: var(--font-sans);
  background: #fff;
  color: var(--rim-text);
  outline: none;
}

.adm-search__input:focus { border-color: var(--rim-mid); }

.adm-search__filter {
  padding: 9px 12px;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  font-size: var(--text-ui);
  font-family: var(--font-sans);
  background: #fff;
  color: var(--rim-text);
  cursor: pointer;
  outline: none;
}

.adm-search__filter:focus { border-color: var(--rim-mid); }

.adm-search__count {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  white-space: nowrap;
}

/* ── Members table ──────────────────────────────────── */
.adm-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  background: #fff;
}

.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-ui);
}

.adm-table th {
  text-align: left;
  border-bottom: 1px solid var(--rim-rule);
  white-space: nowrap;
  padding: 0;
}

.adm-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rim-bg-accent);
  vertical-align: middle;
  color: var(--rim-text);
}

.adm-table tbody tr:last-child td { border-bottom: none; }

.adm-table__row {
  cursor: pointer;
  transition: background 0.1s;
}

.adm-table__row:hover { background: var(--rim-bg); }

.adm-table__name { font-weight: 600; }
.adm-table__email { color: var(--rim-text-muted); }

.adm-table__col--roles { white-space: nowrap; }
.adm-table__col--num { text-align: center; width: 100px; }
.adm-table__col--date { white-space: nowrap; color: var(--rim-text-muted); width: 120px; }

/* ── Role badges ────────────────────────────────────── */
.adm-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-right: 4px;
}

.adm-badge--admin     { background: var(--rim-blue); color: #fff; }
.adm-badge--registrar { background: var(--rim-mid); color: #fff; }
.adm-badge--treasurer { background: #3a7a6a; color: #fff; }
.adm-badge--teacher   { background: #7a5a3a; color: #fff; }
.adm-badge--volunteer { background: #5a5a7a; color: #fff; }
.adm-badge--other     { background: var(--rim-rule); color: var(--rim-text); }
.adm-badge--none      { color: var(--rim-rule); }
/* Subtle outline badge for "Primary" contact label in household rows */
.adm-badge--primary-contact {
  background: transparent;
  color: var(--rim-mid);
  border: 1px solid var(--rim-mid);
  font-weight: 600;
}

/* ── Empty state ────────────────────────────────────── */
.adm-empty {
  color: var(--rim-text-muted);
  font-style: italic;
  padding: 16px 0;
}

/* ── Detail page sections ───────────────────────────── */
.adm-section {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  padding: 28px 32px;
  margin-bottom: 20px;
}

.adm-section__title {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 16px;
}

.adm-section__hint {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: -8px 0 20px;
}

/* ── Profile form ───────────────────────────────────── */
.adm-form { display: flex; flex-direction: column; gap: 16px; }

.adm-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.adm-form__field { display: flex; flex-direction: column; gap: 6px; }

.adm-form__label {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
}

.adm-form__input {
  padding: 9px 12px;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  font-size: var(--text-small);
  font-family: var(--font-sans);
  color: var(--rim-text);
  background: #fff;
  outline: none;
}

.adm-form__input:focus { border-color: var(--rim-mid); }

/* ── Roles checkboxes ───────────────────────────────── */
.adm-roles { display: flex; flex-direction: column; gap: 12px; }

.adm-role {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px 16px;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}

.adm-role:hover { border-color: var(--rim-mid); background: var(--rim-bg); }

.adm-role:has(.adm-role__checkbox:checked) {
  border-color: var(--rim-mid);
  background: #eef4f8;
}

.adm-role__checkbox { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; }

.adm-role__text { display: flex; flex-direction: column; gap: 2px; }

.adm-role__name {
  font-size: var(--text-ui);
  font-weight: 700;
  color: var(--rim-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.adm-role__desc { font-size: var(--text-xs); color: var(--rim-text-muted); }

/* ── Save bar ───────────────────────────────────────── */
.adm-save {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.adm-save__btn {
  padding: 10px 24px;
  background: var(--rim-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: var(--text-small);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: opacity 0.15s;
}

.adm-save__btn:hover:not(:disabled) { opacity: 0.88; }
.adm-save__btn:disabled { opacity: 0.6; cursor: default; }

.adm-save__success { font-size: var(--text-ui); color: var(--color-success); font-weight: 600; }
.adm-save__error   { font-size: var(--text-ui); color: var(--color-error); }

/* Save bar (household pages) */
.adm-save-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.adm-save-bar__msg {
  font-size: var(--text-ui);
  color: #3a7a6a;
  font-weight: 600;
}
.adm-save__warning { font-size: var(--text-ui); color: #8a6000; background: #fff8e6; padding: 8px 12px; border-radius: 4px; margin-bottom: 8px; }

/* ── Email change warning + confirm ─────────────────── */
.adm-form__input--error {
  border-color: #c0392b !important;
  background: #fff8f8;
}

.adm-form__email-error {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-error);
  font-weight: 600;
}

.adm-form__email-checking {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
}

.adm-form__email-warning {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  padding: 8px 12px;
}

.adm-email-confirm {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 16px 20px;
  width: 100%;
}

.adm-email-confirm__text {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: 1.6;
  color: #92400e;
  margin-bottom: 14px;
}

.adm-email-confirm__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.adm-btn--cancel {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.adm-btn--cancel:hover:not(:disabled) { color: var(--rim-text); }
.adm-btn--cancel:disabled { opacity: 0.5; cursor: default; }

/* ── Registration history ───────────────────────────── */
.adm-reg-list { display: flex; flex-direction: column; gap: 10px; }

.adm-reg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--rim-bg-accent);
  gap: 12px;
}

.adm-reg:last-child { border-bottom: none; }

.adm-reg__main { display: flex; flex-direction: column; gap: 2px; }

.adm-reg__title {
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--rim-mid);
  text-decoration: none;
}

.adm-reg__title:hover { text-decoration: underline; }

.adm-reg__date { font-size: var(--text-label); color: var(--rim-text-muted); }

.adm-reg__status {
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

.adm-reg__status--registered { background: #e8f5e9; color: #2e7d32; }
.adm-reg__status--approved   { background: #e3f2fd; color: #1565c0; }
.adm-reg__status--waitlisted { background: #fff8e1; color: #f57f17; }
.adm-reg__status--cancelled  { background: var(--rim-bg-accent); color: var(--rim-text-muted); }

/* ── Import panel ───────────────────────────────────── */
.adm-import-btn {
  display: inline-block;
  padding: 8px 18px;
  margin-bottom: 24px;
  background: none;
  border: 1px solid var(--rim-mid);
  color: var(--rim-mid);
  border-radius: 6px;
  font-size: var(--text-ui);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.adm-import-btn:hover { background: var(--rim-mid); color: #fff; }

.adm-import {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  padding: 28px 32px;
  margin-bottom: 28px;
}

.adm-import__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.adm-import__title {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 400;
  color: var(--rim-text);
  margin: 0;
}

.adm-import__close {
  background: none;
  border: none;
  font-size: var(--text-body);
  color: var(--rim-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.adm-import__close:hover { color: var(--rim-text); }

.adm-import__help {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 0 0 20px;
  line-height: 1.6;
}

.adm-import__upload { margin-bottom: 16px; }

.adm-import__file { display: none; }

.adm-import__file-label {
  display: inline-block;
  padding: 9px 18px;
  border: 1px dashed var(--rim-rule);
  border-radius: 6px;
  font-size: var(--text-ui);
  color: var(--rim-mid);
  cursor: pointer;
  transition: border-color 0.15s;
}

.adm-import__file-label:hover { border-color: var(--rim-mid); }

.adm-import__error { font-size: var(--text-ui); color: var(--color-error); margin: 0 0 12px; }

.adm-import__count {
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--rim-text);
  margin: 0 0 12px;
}

.adm-import__preview-wrap { overflow-x: auto; margin-bottom: 16px; }

.adm-import__preview {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-xs);
}

.adm-import__preview th {
  padding: 8px 12px;
  text-align: left;
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  border-bottom: 1px solid var(--rim-rule);
}

.adm-import__preview td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rim-bg-accent);
  color: var(--rim-text);
}

.adm-import__preview-more {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 8px 0 0;
  font-style: italic;
}

.adm-import__actions { display: flex; align-items: center; gap: 16px; }

.adm-import__submit {
  padding: 10px 22px;
  background: var(--rim-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: var(--text-small);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: opacity 0.15s;
}

.adm-import__submit:hover:not(:disabled) { opacity: 0.88; }
.adm-import__submit:disabled { opacity: 0.6; cursor: default; }

.adm-import__cancel {
  background: none;
  border: none;
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  cursor: pointer;
  padding: 0;
  font-family: var(--font-sans);
}

.adm-import__cancel:hover { color: var(--rim-text); }

.adm-import__result { padding: 8px 0; }

.adm-import__result-line {
  font-size: var(--text-small);
  color: var(--rim-text);
  margin: 0 0 6px;
}

.adm-import__result-hint {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 0 0 16px;
}

/* ── Member archive / danger zone ──────────────────────── */

.adm-archived-banner {
  background: var(--rim-bg-accent);
  border-left: 3px solid var(--rim-text-muted);
  padding: 10px 14px;
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  border-radius: 4px;
  margin-bottom: 24px;
}

.adm-sanity {
  padding: 20px 24px;
  background: var(--rim-bg-accent);
  border-radius: 6px;
  margin-bottom: 24px;
}

.adm-sanity__label {
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 8px;
}

.adm-sanity__status {
  font-size: var(--text-ui);
  color: var(--rim-mid);
  margin: 0;
}

.adm-sanity__hint {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 0 0 12px;
}

.adm-sanity__error {
  font-size: var(--text-ui);
  color: #b94a3a;
  margin: 0 0 10px;
}

.adm-sanity__btn {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  padding: 8px 16px;
  background: var(--rim-mid);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.adm-sanity__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.adm-sanity__confirm-msg {
  font-size: var(--text-ui);
  color: var(--rim-text);
  margin: 0 0 12px;
}

.adm-sanity__confirm-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.adm-danger-zone {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rim-rule);
}

.adm-danger-zone__title {
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin-bottom: 14px;
}

.adm-danger-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.adm-danger-confirm__msg {
  font-size: var(--text-ui);
  color: var(--rim-text);
  margin-bottom: 14px;
  max-width: 480px;
}

.adm-danger-confirm__actions { display: flex; gap: 10px; }

.adm-btn--danger {
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: var(--text-ui);
  font-family: var(--font-sans);
  cursor: pointer;
}
.adm-btn--danger:hover { background: #a93226; }

.adm-btn--danger.adm-btn--outline {
  background: transparent;
  color: #c0392b;
  border: 1px solid #c0392b;
}
.adm-btn--danger.adm-btn--outline:hover { background: #fdf2f2; }

.adm-btn--restore {
  background: var(--rim-mid);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: var(--text-ui);
  font-family: var(--font-sans);
  cursor: pointer;
}
.adm-btn--restore:hover { background: var(--rim-blue); }

.adm-btn--neutral {
  background: transparent;
  color: var(--rim-text-muted);
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  padding: 8px 16px;
  font-size: var(--text-ui);
  font-family: var(--font-sans);
  cursor: pointer;
}
.adm-btn--neutral:hover { background: var(--rim-bg-accent); }

/* Archived member rows in table */
.adm-member-row--archived td { color: var(--rim-text-muted); }

/* Archived badge (inline in name) */
.adm-badge--archived {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--rim-bg-accent);
  color: var(--rim-text-muted);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Show archived toggle button */
.adm-toggle-btn {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  background: transparent;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.adm-toggle-btn:hover { background: var(--rim-bg-accent); }

/* ── Toolbar (replaces adm-search for list page) ─────── */
.adm-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.adm-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* ── Sortable table headers ─────────────────────────── */
.adm-table th { padding: 0; }

.adm-table__sort-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 11px 16px;
  background: none;
  border: none;
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  font-family: var(--font-sans);
  transition: color 0.15s;
}

.adm-table__sort-btn:hover { color: var(--rim-text); }

.adm-table__sort-btn--center { justify-content: center; }

.adm-table__sort-dir {
  font-size: var(--text-label);
  color: var(--rim-mid);
  line-height: 1;
}

.adm-table__sort-dir--inactive {
  color: var(--rim-rule);
}

.adm-table__preferred {
  font-weight: 400;
  color: var(--rim-text-muted);
  font-size: var(--text-xs);
}

/* ── Member status badges ───────────────────────────── */
.adm-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
  white-space: nowrap;
}

.adm-status--active    { background: #e8f5e9; color: #2e7d32; }
.adm-status--inactive  { background: var(--rim-bg-accent); color: var(--rim-text-muted); }
.adm-status--visitor   { background: #e3f2fd; color: #1565c0; }
.adm-status--student   { background: #e0f2f1; color: #00695c; }
.adm-status--volunteer { background: #fff3e0; color: #e65100; }

/* ── Form additions ─────────────────────────────────── */
.adm-form__select {
  padding: 9px 12px;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  font-size: var(--text-small);
  font-family: var(--font-sans);
  color: var(--rim-text);
  background: #fff;
  outline: none;
  cursor: pointer;
}

.adm-form__select:focus { border-color: var(--rim-mid); }

.adm-form__textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  font-size: var(--text-small);
  font-family: var(--font-sans);
  color: var(--rim-text);
  background: #fff;
  outline: none;
  resize: vertical;
  line-height: 1.6;
  box-sizing: border-box;
}

.adm-form__textarea:focus { border-color: var(--rim-mid); }

.adm-form__hint {
  margin-top: 6px;
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  line-height: 1.5;
}

.adm-form__hint--warn {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 8px;
}

/* 3-column address row */
.adm-form__row--3col {
  display: grid;
  grid-template-columns: 1fr 80px 120px;
  gap: 12px;
}

@media (max-width: 600px) {
  .adm-form__row--3col {
    grid-template-columns: 1fr;
  }
}

/* ── Tags ───────────────────────────────────────────── */
.adm-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  background: #fff;
  min-height: 44px;
}

.adm-tags:focus-within { border-color: var(--rim-mid); }

.adm-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--rim-bg-accent);
  color: var(--rim-text);
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}

.adm-tag__remove {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-small);
  line-height: 1;
  color: var(--rim-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.adm-tag__remove:hover { color: var(--rim-text); }

.adm-tags__input {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  font-size: var(--text-small);
  font-family: var(--font-sans);
  color: var(--rim-text);
  background: transparent;
  padding: 0;
}

.adm-tags__input::placeholder { color: var(--rim-rule); }

/* ── Admin Sitemap (adm-sm-) ───────────────────────────── */

.adm-sm-content {
  max-width: 1100px;
}

/* Header */
.adm-sm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.adm-sm-title {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 400;
  color: var(--rim-text);
  margin: 6px 0 8px;
}

.adm-sm-subtitle {
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  margin: 0;
}

.adm-sm-header__links {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
  padding-top: 28px;
}

.adm-sm-ext-link {
  font-size: var(--text-xs);
  color: var(--rim-mid);
  text-decoration: none;
  border: 1px solid var(--rim-rule);
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.adm-sm-ext-link:hover { background: var(--rim-bg-accent); }

/* Legend */
.adm-sm-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 14px 18px;
  background: var(--rim-bg-accent);
  border-radius: 8px;
  margin-bottom: 32px;
  font-family: var(--font-sans);
}

.adm-sm-legend__label {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin-right: 4px;
  flex-basis: 100%;
}

.adm-sm-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.adm-sm-legend__desc {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
}

/* Badges */
.adm-sm-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.adm-sm-badge--public  { background: #e8f5e9; color: #2e7d32; }
.adm-sm-badge--cms     { background: #e3f2fd; color: #1565c0; }
.adm-sm-badge--member  { background: #e0f2f1; color: #00695c; }
.adm-sm-badge--admin   { background: #e8eaf6; color: #283593; }
.adm-sm-badge--staff   { background: #ede7f6; color: #4527a0; }
.adm-sm-badge--utility { background: var(--rim-bg-accent); color: var(--rim-text-muted); }
.adm-sm-badge--dev     { background: #fff3e0; color: #b05000; }

/* Grid */
.adm-sm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Section card */
.adm-sm-section {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  overflow: hidden;
}

.adm-sm-section--wide {
  grid-column: 1 / -1;
}

.adm-sm-section--wide .adm-sm-pages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.adm-sm-section--wide .adm-sm-page {
  border-right: 1px solid var(--rim-bg-accent);
}
.adm-sm-section--wide .adm-sm-page:nth-child(2n) {
  border-right: none;
}

.adm-sm-section__head {
  padding: 14px 18px 12px;
  border-left: 4px solid var(--section-color, var(--rim-mid));
  background: var(--rim-bg);
  border-bottom: 1px solid var(--rim-rule);
}

.adm-sm-section__title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 4px;
}

.adm-sm-section__desc {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Page entries */
.adm-sm-pages {
  display: flex;
  flex-direction: column;
}

.adm-sm-page {
  padding: 12px 18px;
  border-bottom: 1px solid var(--rim-bg-accent);
}

.adm-sm-page:last-child { border-bottom: none; }

.adm-sm-page__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.adm-sm-page__name {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--rim-text);
}

.adm-sm-page__note {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  color: var(--rim-text-muted);
  font-style: italic;
}

.adm-sm-page__bottom {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.adm-sm-page__url {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--rim-mid);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.adm-sm-page__url:hover { text-decoration: underline; }

.adm-sm-page__url--template {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  white-space: nowrap;
}

.adm-sm-page__desc {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Footer note */
.adm-sm-footer-note {
  margin-top: 24px;
  padding: 14px 18px;
  background: var(--rim-bg-accent);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  line-height: 1.6;
}

.adm-sm-footer-note strong {
  color: var(--rim-text);
  font-weight: 600;
}

/* CSS layer chips */
.adm-sm-css {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.adm-sm-css--green  { background: #e8f5e9; color: #2e7d32; }
.adm-sm-css--orange { background: #fff3e0; color: #b05000; }

/* Status chips */
.adm-sm-status {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}
.adm-sm-status--stub       { background: #fff8e1; color: #b08000; }
.adm-sm-status--orphan     { background: #fce4ec; color: #880e4f; }
.adm-sm-status--repurposed { background: #e8eaf6; color: #283593; }

/* Flagged page highlight */
.adm-sm-page--flagged {
  background: #fffbf0;
}

/* Legend divider */
.adm-sm-legend__divider {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--rim-rule);
  margin: 4px 0;
}

/* Gap sections (Not Yet Built / Decommissioned) */
.adm-sm-gap-section {
  margin-top: 32px;
}
.adm-sm-gap-section__head {
  padding: 14px 18px;
  border-radius: 8px 8px 0 0;
}
.adm-sm-gap-section__head--todo {
  background: #fff8e1;
  border-left: 4px solid #f9a825;
}
.adm-sm-gap-section__head--done {
  background: #e8f5e9;
  border-left: 4px solid #388e3c;
}
.adm-sm-gap-section__title {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--rim-text);
  margin: 0 0 4px;
}
.adm-sm-gap-section__desc {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 0;
  line-height: 1.5;
}

.adm-sm-gap-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--rim-rule);
  border: 1px solid var(--rim-rule);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.adm-sm-gap-item {
  background: #fff;
  padding: 14px 16px;
}
.adm-sm-gap-item--done {
  background: #fafafa;
}
.adm-sm-gap-item__name {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--rim-text);
  margin-bottom: 4px;
}
.adm-sm-gap-item__url {
  display: block;
  font-size: var(--text-xxs);
  color: var(--rim-text-muted);
  background: var(--rim-bg-accent);
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 6px;
  word-break: break-all;
}
.adm-sm-gap-item__desc {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Feature lists (implemented + planned per page) */

.adm-sm-feature-block {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.adm-sm-feat {
  font-size: 11.5px;
  line-height: 1.4;
  padding-left: 16px;
  position: relative;
}

.adm-sm-feat::before {
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 10px;
}

.adm-sm-feat--done {
  color: var(--rim-text);
}

.adm-sm-feat--done::before {
  content: "✓";
  color: var(--rim-mid);
  font-weight: 700;
}

.adm-sm-feat--planned {
  color: var(--rim-text-muted);
  font-style: italic;
}

.adm-sm-feat--planned::before {
  content: "○";
  color: var(--rim-rule);
}

/* Legend dots for feature key */

.adm-sm-feat-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.adm-sm-feat-dot--done {
  background: var(--rim-mid);
}

.adm-sm-feat-dot--planned {
  background: var(--rim-rule);
}

/* ── Admin Roadmap (adm-rm-) ───────────────────────────── */

.adm-rm-section {
  margin-bottom: 40px;
  border-left: 3px solid var(--section-color, var(--rim-mid));
  padding-left: 20px;
}

.adm-rm-section__head { margin-bottom: 16px; }

.adm-rm-section__title {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--section-color, var(--rim-text));
  margin: 0 0 6px;
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.adm-rm-section__desc {
  font-size: 13.5px;
  color: var(--rim-text-muted);
  margin: 0;
  line-height: 1.5;
}

.adm-rm-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adm-rm-item {
  background: var(--rim-bg);
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  padding: 14px 16px;
}

.adm-rm-item__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.adm-rm-item__name {
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--rim-text);
  font-family: var(--font-sans);
}

.adm-rm-item__desc {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  line-height: 1.55;
  margin: 0 0 8px;
}

.adm-rm-item__ref {
  font-size: 11.5px;
  color: var(--rim-text-muted);
  margin: 0 0 6px;
  font-style: italic;
}

.adm-rm-item__files {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.adm-rm-item__files li {
  font-size: 11.5px;
  color: var(--rim-text-muted);
  padding: 2px 0;
}

.adm-rm-item__files code {
  background: var(--rim-bg-accent);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: var(--text-xxs);
  color: var(--rim-text);
}

/* Status badges */
.adm-rm-status {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.adm-rm-status--immediate { background: #fce8e6; color: #c0392b; }
.adm-rm-status--designed  { background: color-mix(in srgb, var(--rim-mid) 12%, var(--rim-bg)); color: var(--rim-mid); }
.adm-rm-status--planned   { background: var(--rim-bg-accent); color: var(--rim-text-muted); }
.adm-rm-status--ongoing   { background: #fef3e2; color: #b06800; }
.adm-rm-status--infra     { background: #f0f0f0; color: #4a4a4a; }

/* Effort badges */
.adm-rm-effort {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xxs);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.adm-rm-effort--small  { background: #eafaf1; color: #1e8449; }
.adm-rm-effort--medium { background: #fef3e2; color: #b06800; }
.adm-rm-effort--large  { background: #fce8e6; color: #c0392b; }

/* Mobile */
@media (max-width: 768px) {
  .adm-sm-grid {
    grid-template-columns: 1fr;
  }
  .adm-sm-section--wide {
    grid-column: auto;
  }
  .adm-sm-section--wide .adm-sm-pages {
    grid-template-columns: 1fr;
  }
  .adm-sm-section--wide .adm-sm-page {
    border-right: none;
  }
  .adm-sm-header {
    flex-direction: column;
    gap: 12px;
  }
  .adm-sm-header__links {
    padding-top: 0;
  }
  .adm-sm-legend {
    gap: 10px 16px;
  }
  .adm-sm-legend__label {
    flex-basis: auto;
  }
}

/* ── Admin Manual (adm-man-) ───────────────────────────── */

.adm-man-section {
  margin-bottom: 6px;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  overflow: hidden;
}

.adm-man-section--notes {
  border-left: 3px solid var(--rim-mid);
  border-color: var(--rim-mid);
  margin-bottom: 16px;
}

.adm-man-summary { list-style: none; cursor: pointer; background: var(--rim-bg-accent); user-select: none; }
.adm-man-summary::-webkit-details-marker { display: none; }
.adm-man-summary:hover { background: color-mix(in srgb, var(--rim-mid) 6%, var(--rim-bg-accent)); }

.adm-man-section--notes .adm-man-summary {
  background: color-mix(in srgb, var(--rim-mid) 8%, var(--rim-bg));
}

.adm-man-summary__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  flex-wrap: wrap;
}

.adm-man-summary__title {
  font-size: 14.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--rim-text);
  flex: 1;
}

.adm-man-section--notes .adm-man-summary__title { color: var(--rim-mid); }

.adm-man-summary__who {
  font-size: var(--text-xxs);
  font-weight: 600;
  background: var(--rim-bg);
  color: var(--rim-text-muted);
  border-radius: 3px;
  padding: 2px 7px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.adm-man-summary__count { font-size: var(--text-label); color: var(--rim-text-muted); white-space: nowrap; }

.adm-man-summary__caret {
  font-size: var(--text-xxs);
  color: var(--rim-text-muted);
  transition: transform 0.18s;
  flex-shrink: 0;
}

details[open] > .adm-man-summary .adm-man-summary__caret { transform: rotate(180deg); }

.adm-man-section__body {
  padding: 20px 22px 24px;
  border-top: 1px solid var(--rim-rule);
}

.adm-man-intro {
  font-size: 13.5px;
  color: var(--rim-text-muted);
  line-height: 1.6;
  margin: 0 0 18px;
}

.adm-man-features { display: flex; flex-direction: column; gap: 8px; }

.adm-man-feature {
  padding: 12px 14px;
  background: var(--rim-bg);
  border: 1px solid var(--rim-rule);
  border-radius: 5px;
}

.adm-man-feature__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.adm-man-feature__name { font-size: 13.5px; font-weight: 700; color: var(--rim-text); font-family: var(--font-sans); }
.adm-man-feature__who { font-size: var(--text-xxs); color: var(--rim-text-muted); font-style: italic; }

.adm-man-feature__desc {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  line-height: 1.58;
  margin: 0;
}

.adm-man-feature__bullets { margin: 8px 0 0 16px; padding: 0; }
.adm-man-feature__bullets li { font-size: 12.5px; color: var(--rim-text-muted); line-height: 1.5; padding: 2px 0; }

/* Notes grid */
.adm-man-notes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.adm-man-notes__heading {
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 6px;
  font-family: var(--font-sans);
}

.adm-man-notes__sub { font-size: 12.5px; color: var(--rim-text-muted); line-height: 1.5; margin: 0 0 14px; }

.adm-man-note {
  padding: 11px 13px;
  border: 1px solid var(--rim-rule);
  border-radius: 5px;
  margin-bottom: 7px;
  background: var(--rim-bg);
}

.adm-man-note--mind { border-left: 2px solid var(--rim-mid); }
.adm-man-note__title { font-size: var(--text-xs); font-weight: 700; color: var(--rim-text); margin-bottom: 5px; font-family: var(--font-sans); }
.adm-man-note__body { font-size: 12.5px; color: var(--rim-text-muted); line-height: 1.58; margin: 0; }

@media (max-width: 768px) {
  .adm-man-notes-grid { grid-template-columns: 1fr; gap: 14px; }
  .adm-man-summary__inner { gap: 6px; padding: 11px 14px; }
  .adm-man-section__body { padding: 16px 14px 20px; }
}

/* ── CourseAccessSection (ca-) ─────────────────────────── */
.ca-section { padding-top: 4px; }

.ca-search {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  font-size: var(--text-small);
  font-family: var(--font-sans);
  color: var(--rim-text);
  background: #fff;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.ca-search:focus { outline: none; border-color: var(--rim-mid); }

.ca-loading, .ca-empty {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  font-style: italic;
  margin: 8px 0;
}

.ca-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Single course row ─────────────────────────────────── */
.ca-course {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: start;
}

.ca-course__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ca-course__name {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--rim-text);
  line-height: 1.3;
}

.ca-course__slug {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--rim-text-muted);
}

/* ── Status badges ─────────────────────────────────────── */
.ca-course__status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
  padding-top: 2px;
}

.ca-badge {
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 8px;
  white-space: nowrap;
}

.ca-badge--members  { background: #e3f0e8; color: #2e6b3e; }
.ca-badge--reg      { background: #e8f0f5; color: var(--rim-mid); font-weight: 400; text-transform: none; font-size: var(--text-label); letter-spacing: 0; }
.ca-badge--grant    { background: #fff3cd; color: #856404; }
.ca-badge--none     { background: var(--rim-bg-accent); color: var(--rim-text-muted); font-weight: 400; text-transform: none; font-size: var(--text-label); letter-spacing: 0; }

/* ── Action area ───────────────────────────────────────── */
.ca-course__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding-top: 2px;
  min-width: 110px;
}

.ca-btn {
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  border-radius: 5px;
  padding: 5px 12px;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.ca-btn--grant {
  background: var(--rim-blue);
  color: #fff;
  border-color: var(--rim-blue);
}
.ca-btn--grant:hover { opacity: 0.88; }

.ca-btn--grant-anyway {
  background: #e07b00;
  color: #fff;
  border-color: #e07b00;
}
.ca-btn--grant-anyway:hover { opacity: 0.88; }

.ca-btn--revoke {
  background: none;
  color: var(--rim-text-muted);
  border-color: var(--rim-rule);
}
.ca-btn--revoke:hover { color: #c0392b; border-color: #c0392b; }

.ca-btn--revoke-confirm {
  background: #c0392b;
  color: #fff;
  border-color: #c0392b;
}
.ca-btn--revoke-confirm:hover { opacity: 0.88; }

.ca-btn--cancel {
  background: none;
  color: var(--rim-text-muted);
  border-color: transparent;
  padding: 5px 6px;
}
.ca-btn--cancel:hover { color: var(--rim-text); }

.ca-busy {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  font-style: italic;
}

/* ── Inline confirm ────────────────────────────────────── */
.ca-confirm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.ca-confirm__warning {
  font-size: var(--text-label);
  color: #856404;
  background: #fff3cd;
  border-radius: 4px;
  padding: 6px 10px;
  line-height: 1.4;
  max-width: 260px;
  text-align: left;
}

.ca-confirm__warning--info {
  color: var(--rim-mid);
  background: #e8f0f5;
}

.ca-confirm__btns {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 767px) {
  .adm-page { padding: 32px 16px 60px; }

  .adm-table__col--date,
  .adm-table__col--num { display: none; }

  .adm-form__row { grid-template-columns: 1fr; }

  .adm-section { padding: 20px 20px; }

  .adm-import { padding: 20px; }
}

/* =========================================================
   COURSE PAGES  (co-)
   Member-gated course and lesson-list pages
   ========================================================= */

.co-page {
  min-height: 60vh;
  padding: 48px 24px 80px;
  background: var(--rim-bg);
}

.co-content {
  max-width: 720px;
  margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────── */
.co-header {
  margin-bottom: 40px;
}

.co-title {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--rim-text);
  margin: 8px 0 0;
}

.co-subheading {
  font-size: var(--text-body);
  color: var(--rim-text-muted);
  margin: 10px 0 0;
  line-height: 1.5;
}

/* ── Lessons list ────────────────────────────────────── */
.co-lessons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.co-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 24px 0 8px;
  padding: 0;
}

.co-section-title:first-child { margin-top: 0; }

.co-lesson {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  text-decoration: none;
  color: var(--rim-text);
  transition: border-color 0.15s, background 0.15s;
}

.co-lesson:hover {
  border-color: var(--rim-mid);
  background: var(--rim-bg-accent);
}

.co-lesson__title {
  font-size: 16px;
  line-height: 1.4;
}

.co-lesson__badge {
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rim-mid);
  background: #e8f0f5;
  border-radius: 4px;
  padding: 3px 8px;
  flex-shrink: 0;
}

/* ── No access ───────────────────────────────────────── */
.co-no-access {
  padding: 40px 0;
}

.co-no-access__text {
  font-size: 17px;
  color: var(--rim-text);
  margin: 0 0 16px;
}

.co-no-access__link {
  font-size: var(--text-small);
  color: var(--rim-blue);
  text-decoration: none;
}

.co-no-access__link:hover { text-decoration: underline; }

/* ── Empty state ─────────────────────────────────────── */
.co-empty {
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  font-style: italic;
  margin: 24px 0;
}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 767px) {
  .co-page { padding: 32px 16px 60px; }
  .co-title { font-size: var(--text-h2); }
  .co-lesson { padding: 12px 14px; }
}


/* ═══════════════════════════════════════════════════
   WELCOME / COMMUNITY ONBOARDING PAGE  (wl-)
   Route: /account/welcome
   🟢 Design system — zero Webflow dependency
═══════════════════════════════════════════════════ */

.wl-page {
  min-height: 100vh;
  background-color: var(--rim-bg);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 24px 80px;
}

.wl-container {
  width: 100%;
  max-width: 520px;
}

/* ── Header ──────────────────────────────────────── */
.wl-header {
  margin-bottom: 48px;
}

.wl-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin-bottom: 12px;
}

.wl-title {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--rim-text);
  margin-bottom: 16px;
}

.wl-subtitle {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--rim-text-muted);
}

/* ── Form fields ─────────────────────────────────── */
.wl-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wl-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wl-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--rim-text);
}

.wl-required { color: var(--rim-mid); }
.wl-optional { font-weight: 400; color: var(--rim-text-muted); }

.wl-input {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--rim-text);
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.wl-input:focus {
  outline: none;
  border-color: var(--rim-mid);
}

/* ── Community agreements ────────────────────────── */
.wl-agreements {
  background-color: var(--rim-bg-accent);
  border-radius: 6px;
  padding: 24px;
}

.wl-agreements__text {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: 1.75;
  color: var(--rim-text-muted);
  margin-bottom: 16px;
}

.wl-agreements__details {
  margin-top: 4px;
  margin-bottom: 16px;
}

.wl-agreements__summary {
  display: inline;
  cursor: pointer;
  color: var(--rim-mid);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  text-decoration: underline;
  text-underline-offset: 2px;
  list-style: none;
  user-select: none;
}
.wl-agreements__summary::-webkit-details-marker { display: none; }
.wl-agreements__summary::after { content: " →"; }
details[open] > .wl-agreements__summary::after { content: " ↑"; }
.wl-agreements__summary:hover { color: var(--rim-blue); }

.wl-agreements__body {
  margin-top: 16px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: 1.7;
  color: var(--rim-text-muted);
}
.wl-agreements__body h4 {
  font-size: var(--text-ui);
  font-weight: 700;
  color: var(--rim-text);
  margin: 16px 0 4px;
}
.wl-agreements__body h4:first-child { margin-top: 0; }
.wl-agreements__body p { margin: 0 0 6px; }

.wl-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--rim-text);
  cursor: pointer;
}

.wl-checkbox {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--rim-mid);
}

/* ── Submit ──────────────────────────────────────── */
.wl-submit {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background-color: var(--rim-blue);
  border: none;
  border-radius: 4px;
  padding: 14px 24px;
  cursor: pointer;
  transition: background-color 0.15s;
  align-self: flex-start;
}

.wl-submit:hover:not(:disabled) { background-color: var(--rim-mid); }
.wl-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Error ───────────────────────────────────────── */
.wl-error {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: #b91c1c;
  background: var(--color-error-bg);
  border: 1px solid #fecaca;
  border-radius: 4px;
  padding: 10px 14px;
}

/* ── Decline ─────────────────────────────────────── */
.wl-decline {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--rim-rule);
}

.wl-decline__link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.wl-decline__link:hover { color: var(--rim-text); }

.wl-decline__confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wl-decline__confirm-text {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  line-height: 1.6;
}

.wl-decline__yes {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  color: #fff;
  background: #b91c1c;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  cursor: pointer;
  align-self: flex-start;
}

.wl-decline__yes:disabled { opacity: 0.5; cursor: not-allowed; }

.wl-decline__cancel {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  text-decoration: underline;
  cursor: pointer;
  align-self: flex-start;
}

/* ── Registration form agreements (pg- context) ──── */
.pg-form__agreements {
  background-color: var(--rim-bg-accent);
  border-radius: 6px;
  padding: 20px;
  margin-top: 8px;
}

.pg-form__agreements-text {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: 1.7;
  color: var(--rim-text-muted);
  margin-bottom: 14px;
}

.pg-form__agreements-details {
  margin-top: 4px;
  margin-bottom: 14px;
}

.pg-form__agreements-summary {
  display: inline;
  cursor: pointer;
  color: var(--rim-mid);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  text-decoration: underline;
  text-underline-offset: 2px;
  list-style: none;
  user-select: none;
}
.pg-form__agreements-summary::-webkit-details-marker { display: none; }
.pg-form__agreements-summary::after { content: " →"; }
details[open] > .pg-form__agreements-summary::after { content: " ↑"; }
.pg-form__agreements-summary:hover { color: var(--rim-blue); }

.pg-form__agreements-body {
  margin-top: 14px;
  padding: 14px 18px;
  background: #fff;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--rim-text-muted);
}
.pg-form__agreements-body h4 {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--rim-text);
  margin: 14px 0 4px;
}
.pg-form__agreements-body h4:first-child { margin-top: 0; }
.pg-form__agreements-body p { margin: 0 0 6px; }

.pg-form__agreements-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: 1.5;
  color: var(--rim-text);
  cursor: pointer;
}

.pg-form__agreements-check input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: var(--rim-mid);
}

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 767px) {
  .wl-page { padding: 48px 20px 60px; }
  .wl-title { font-size: var(--text-h2); }
  .wl-agreements { padding: 18px; }
}

/* ═══════════════════════════════════════════════════
   MEMBER DASHBOARD HUB — nav card grid  (db- extensions)
   Extends the existing db- block. Hub redesign 2026-03-03.
═══════════════════════════════════════════════════ */

.db-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}

.db-welcome {
  margin-bottom: 40px;
}

.db-welcome__greeting {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--rim-blue);
  margin: 0 0 6px;
  line-height: 1.2;
}

.db-welcome__sub {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  margin: 0;
}

/* 2-col nav card grid */
.db-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 48px;
}

.db-nav__card {
  display: block;
  padding: 24px 22px 20px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.15s;
}

.db-nav__card:hover {
  border-color: var(--rim-mid);
}

.db-nav__card--staff {
  border-left: 3px solid var(--rim-mid);
  background: var(--rim-bg);
}

.db-nav__label {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.db-nav__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--rim-mid);
  color: #fff;
}

.db-nav__badge--empty {
  background: var(--rim-bg-accent);
  color: var(--rim-text-muted);
}

.db-nav__title {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 400;
  color: var(--rim-blue);
  margin: 0 0 6px;
  line-height: 1.3;
}

.db-nav__desc {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Below-the-cards sections (zoom links, dana, staff) */
.db-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--rim-rule);
}

.db-section__label {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9b8f85;
  margin: 0 0 12px;
}

.db-section__empty {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  margin: 0;
}

/* ═══════════════════════════════════════════════════
   MY REGISTRATIONS PAGE  (mr- prefix)
   /account/dashboard-my-registrations
═══════════════════════════════════════════════════ */

.mr-page {
  padding-top: 48px;
  padding-bottom: 80px;
}

.mr-heading {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--rim-blue);
  margin: 0 0 40px;
  line-height: 1.2;
}

.mr-empty {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--rim-text-muted);
  line-height: 1.6;
}

.mr-empty a {
  color: var(--rim-mid);
  text-decoration: underline;
}

.mr-section {
  margin-bottom: 48px;
}

.mr-section__label {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rim-rule);
}

.mr-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mr-card {
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
}

.mr-card--muted {
  background: var(--rim-bg-accent);
}

.mr-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.mr-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--rim-blue);
  text-decoration: none;
  line-height: 1.3;
}

.mr-card__title:hover {
  text-decoration: underline;
}

.mr-badge {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}

.mr-badge--green  { background: #d1f0e0; color: #1a6b40; }
.mr-badge--blue   { background: #d0e8f5; color: #1a4d6b; }
.mr-badge--amber  { background: #fef3cd; color: #856404; }
.mr-badge--gray   { background: var(--rim-bg-accent); color: var(--rim-text-muted); }

.mr-card__meta {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 0 0 4px;
}

.mr-card__waitlist {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #856404;
  margin: 6px 0 0;
}

.mr-card__dana {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 14px;
  background: #fef9f0;
  border: 1px solid #f0d8a0;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text);
}

.mr-card__dana-link {
  font-weight: 600;
  color: var(--rim-mid);
  text-decoration: none;
  white-space: nowrap;
}

.mr-card__dana-link:hover { text-decoration: underline; }

.mr-card__date {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  margin: 10px 0 0;
}

/* ── Cancel registration button + confirm flow ── */

.mr-card__actions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rim-rule);
}

.mr-cancel-btn {
  background: none;
  border: none;
  padding: 0;
  font: 13px / 1 var(--font-sans);
  color: var(--rim-text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.mr-cancel-btn:hover {
  color: #c0392b;
  text-decoration-color: currentColor;
}

.mr-cancel-confirm {
  padding: 14px 16px;
  background: #fff5f5;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
}
.mr-cancel-confirm__text {
  font: 14px / 1.5 var(--font-sans);
  color: var(--rim-text);
  margin: 0 0 12px;
}
.mr-cancel-confirm__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mr-cancel-btn--yes {
  padding: 7px 16px;
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 3px;
  font: 600 13px / 1 var(--font-sans);
  cursor: pointer;
  transition: opacity 0.15s;
}
.mr-cancel-btn--yes:hover { opacity: 0.85; }

.mr-cancel-btn--keep {
  padding: 7px 16px;
  background: none;
  border: 1px solid var(--rim-rule);
  color: var(--rim-text-muted);
  border-radius: 3px;
  font: 13px / 1 var(--font-sans);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.mr-cancel-btn--keep:hover {
  border-color: var(--rim-text-muted);
  color: var(--rim-text);
}

.mr-cancel-done {
  font: 13px / 1 var(--font-sans);
  color: var(--rim-text-muted);
  margin: 0;
}

.mr-footer-note {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rim-rule);
}

.mr-footer-note a {
  color: var(--rim-mid);
}

/* ═══════════════════════════════════════════════════
   MEMBER PROGRAM DETAIL PAGE  (mpd- prefix)
   /account/programs/[slug]
   The "inside the building" view for members.
═══════════════════════════════════════════════════ */

.mpd-page { max-width: 700px; }

/* Back link */
.mpd-back {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  text-decoration: none;
  margin-bottom: 24px;
}
.mpd-back:hover { color: var(--rim-blue); }

/* Header */
.mpd-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.mpd-title {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 400;
  color: var(--rim-text);
  margin: 0;
}
.mpd-category {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--rim-text-muted);
  text-decoration: none;
  margin-bottom: 24px;
}
.mpd-category:hover { color: var(--rim-blue); }

/* Section labels */
.mpd-label {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 8px;
}

/* Quick info card */
.mpd-info {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  padding: 4px 20px;
  margin-bottom: 24px;
}
.mpd-info__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rim-rule);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text);
}
.mpd-info__row:last-child { border-bottom: none; }
.mpd-info__icon { flex-shrink: 0; color: var(--rim-text-muted); }
.mpd-info__ext { color: var(--rim-mid); text-decoration: none; font-size: var(--text-xs); }
.mpd-info__ext:hover { color: var(--rim-blue); }

/* Join section */
.mpd-join { margin-bottom: 24px; }
.mpd-join__btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  color: #fff;
  background: var(--rim-blue);
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.15s;
}
.mpd-join__btn:hover { opacity: 0.85; color: #fff; }
.mpd-join__note {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text);
  margin: 0;
  line-height: 1.6;
}
.mpd-join__inline-link { color: var(--rim-blue); text-decoration: underline; }

/* Pending dana callout */
.mpd-dana {
  background: var(--color-alert-bg);
  border: 1px solid var(--color-alert-border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.mpd-dana__text {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text);
  margin: 0 0 10px;
  line-height: 1.5;
}
.mpd-dana__link {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--color-alert);
  text-decoration: none;
}
.mpd-dana__link:hover { text-decoration: underline; }

/* Notice cards (announcement, early arrival) */
.mpd-notice {
  border-left: 3px solid var(--rim-blue);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text);
  line-height: 1.6;
  background: var(--rim-bg-accent);
  border-radius: 0 6px 6px 0;
}
.mpd-notice--soft { border-left-color: var(--rim-rule); }

/* Calendar links */
.mpd-calendar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.mpd-calendar__link {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-blue);
  text-decoration: none;
}
.mpd-calendar__link:hover { text-decoration: underline; }

/* Facilitators */
.mpd-facilitators { margin-bottom: 28px; }
.mpd-facilitators__names {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text);
  margin: 0;
}

/* Registration details */
.mpd-reg {
  border-top: 1px solid var(--rim-rule);
  padding-top: 24px;
  margin-top: 12px;
}
.mpd-reg__date {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 0 0 8px;
}
.mpd-reg__waitlist {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--color-alert);
  margin: 0 0 8px;
}
.mpd-reg__dana-complete {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 0 0 8px;
}
.mpd-reg__fields {
  margin: 16px 0;
}
.mpd-reg__field {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  border-bottom: 1px solid var(--rim-rule);
}
.mpd-reg__field:last-child { border-bottom: none; }
.mpd-reg__field-label {
  font-weight: 600;
  color: var(--rim-text-muted);
  min-width: 120px;
  flex-shrink: 0;
}
.mpd-reg__field-value { color: var(--rim-text); }
.mpd-reg__actions { margin-top: 16px; }

/* Mobile */
@media screen and (max-width: 700px) {
  .mpd-title { font-size: var(--text-h3); }
  .mpd-info { padding: 4px 16px; }
  .mpd-reg__field { flex-direction: column; gap: 2px; }
  .mpd-reg__field-label { min-width: 0; }
}


/* ═══════════════════════════════════════════════════
   MY LIBRARY PAGE  (ml- prefix)
   /account/dashboard-my-library
═══════════════════════════════════════════════════ */

.ml-page {
  padding-top: 48px;
  padding-bottom: 80px;
}

.ml-heading {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--rim-blue);
  margin: 0 0 8px;
  line-height: 1.2;
}

.ml-intro {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  line-height: 1.6;
  margin: 0 0 36px;
}

.ml-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ml-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rim-rule);
  text-decoration: none;
}

.ml-item--disabled {
  cursor: default;
}

.ml-item__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--rim-blue);
  line-height: 1.4;
}

.ml-item--disabled .ml-item__title {
  color: var(--rim-text-muted);
}

.ml-item__arrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--rim-mid);
  white-space: nowrap;
  flex-shrink: 0;
}

.ml-item--disabled .ml-item__arrow {
  color: var(--rim-text-muted);
}

.ml-item:not(.ml-item--disabled):hover .ml-item__title {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════
   MY PROFILE PAGE  (mp- prefix)
   /account/dashboard-my-profile
═══════════════════════════════════════════════════ */

.mp-page {
  max-width: 640px;
  margin: 0 auto;
}

.mp-heading {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--rim-blue);
  margin: 0 0 36px;
  line-height: 1.2;
}

.mp-success {
  margin-bottom: 24px;
  padding: 12px 16px;
  background: #d1f0e0;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: #1a6b40;
}

/* Profile header */
.mp-header {
  display: flex; gap: 20px; align-items: flex-start;
  padding-bottom: 28px; margin-bottom: 32px;
  border-bottom: 1px solid var(--rim-rule, #e5e2de);
}
.mp-header__initials {
  width: 56px; height: 56px; border-radius: 50%;
  background: #dce9ef; color: #6a8fa0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-body); font-weight: 700; flex-shrink: 0;
  font-family: var(--font-sans);
}
.mp-header__info { display: flex; flex-direction: column; gap: 4px; }
.mp-header__name { font-family: var(--font-serif); font-size: 22px; color: #2d3f47; }
.mp-header__title { font-size: var(--text-ui); color: var(--rim-text-muted); }
.mp-header__details { font-size: var(--text-xs); color: var(--rim-text-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.mp-header__details span + span::before { content: "\00b7"; margin-right: 8px; }
.mp-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mp-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 12px;
  background: #edf3f7; color: var(--rim-mid);
}
.mp-hubs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mp-hub-link {
  font-size: var(--text-label); padding: 2px 8px; border-radius: 10px;
  background: var(--rim-bg, #f5f5f5); color: var(--rim-text-muted);
  text-decoration: none;
}
.mp-hub-link:hover { color: var(--rim-mid); }

/* Household */
.mp-household { padding: 12px 0; }
.mp-household__name { font-family: var(--font-serif); font-size: 17px; color: var(--rim-text); margin-bottom: 8px; }
.mp-household__members { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-household__member { font-size: var(--text-ui); color: var(--rim-text-muted); }
.mp-household__member + .mp-household__member::before { content: "\00b7"; margin-right: 8px; }

.mp-section {
  margin-bottom: 40px;
}

.mp-section__title {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rim-rule);
}

.mp-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mp-field__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.mp-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--rim-text);
}

.mp-input {
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text);
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}

.mp-input:focus {
  outline: none;
  border-color: var(--rim-mid);
}

.mp-input--readonly {
  background: var(--rim-bg-accent);
  color: var(--rim-text-muted);
  cursor: default;
}

.mp-note {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 6px 0 0;
  line-height: 1.5;
}

.mp-note a {
  color: var(--rim-mid);
}

.mp-submit {
  align-self: flex-start;
  padding: 10px 24px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  color: #fff;
  background: var(--rim-blue);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.mp-submit:hover {
  background: var(--rim-mid);
}

.mp-section__hint {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

/* ── Save row (shared by About me inline edits) ── */

.mp-save {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.mp-save__btn {
  padding: 10px 22px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  color: #fff;
  background: var(--rim-blue);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 44px;
}

.mp-save__btn:hover:not(:disabled) { background: var(--rim-mid); }
.mp-save__btn:disabled { opacity: 0.55; cursor: default; }

.mp-save__success {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-success);
}

.mp-save__error {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-error);
  margin: 0 0 8px;
}

/* ── About me (bio + presence photo) ── */

.mp-bio__avatar-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.mp-bio__avatar {
  flex: 0 0 auto;
}

.mp-bio__avatar-preview {
  width: 96px;
  height: 96px;
  background-size: cover;
  background-position: center;
  background-color: var(--rim-bg-accent);
  border-radius: 8px;
}

.mp-bio__avatar-empty {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  background: var(--rim-bg-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
}

.mp-bio__avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mp-bio__avatar-btn {
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--rim-blue);
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
}

.mp-bio__avatar-btn:hover:not(:disabled) { border-color: var(--rim-mid); }
.mp-bio__avatar-btn:disabled { opacity: 0.55; cursor: default; }

.mp-bio__avatar-remove {
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.mp-bio__avatar-remove:hover { color: var(--color-error); }

.mp-bio__file-input { display: none; }

.mp-bio__editor {
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════
   COMMUNITY AGREEMENTS PAGE  (mc- prefix)
   /account/dashboard-member-care-agreements
═══════════════════════════════════════════════════ */

.mc-page {
  padding-top: 48px;
  padding-bottom: 80px;
}

.mc-heading {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--rim-blue);
  margin: 0 0 12px;
  line-height: 1.2;
}

.mc-intro {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  line-height: 1.7;
  margin: 0 0 48px;
}

.mc-agreement {
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rim-rule);
}

.mc-agreement:last-of-type {
  border-bottom: none;
}

.mc-agreement__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--rim-blue);
  margin: 0 0 12px;
  line-height: 1.3;
}

.mc-agreement__body {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--rim-text);
  margin: 0;
}

.mc-footer-link {
  margin-top: 40px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
}

.mc-footer-link a {
  color: var(--rim-mid);
}

/* ── Mobile  (shared breakpoint for all new db-/mr-/ml-/mp-/mc- blocks) ── */
@media (max-width: 768px) {
  .db-page { padding: 32px 20px 60px; }
  .db-welcome__greeting { font-size: 26px; }
  .db-nav { grid-template-columns: 1fr; gap: 12px; }
  .db-nav__card { padding: 20px 18px 16px; }

  .mr-page, .ml-page, .mc-page { padding: 32px 20px 60px; }
  .mr-heading, .ml-heading, .mp-heading, .mc-heading { font-size: 26px; }
  .mr-card { padding: 16px 18px; }
  .mr-card__header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mr-card__dana { flex-direction: column; align-items: flex-start; gap: 8px; }

  .mp-field__row { grid-template-columns: 1fr; }

  /* Dashboard */
  .db2-greeting__name { font-size: var(--text-h3); }
  .db-section { margin-top: 28px; padding-top: 24px; }
}

@media (max-width: 430px) {
  /* ── Dashboard (db2-) ── */
  .db2-greeting__name { font-size: 22px; }
  .db2-empty-card { padding: 16px; }

  /* Today's sessions: reduce padding, enlarge touch targets */
  .today-card__header { padding: 10px 14px 8px; }
  .today-row { padding: 12px 14px; gap: 8px; }
  .today-row--live { flex-wrap: wrap; }
  .today-row__left { flex-wrap: wrap; gap: 6px; }
  .today-row__title { font-size: var(--text-small); }
  .today-later-hdr { padding: 8px 14px; }
  .join-btn { padding: 12px 20px; font-size: var(--text-ui); min-height: 44px; box-sizing: border-box; }

  /* Upcoming programs */
  .db2-upcoming__title { padding: 12px 14px; font-size: var(--text-ui); }
  .db2-upcoming__date-block { width: 52px; }

  /* Quick links: stack, full-width, 44px touch targets */
  .db2-quicklinks { flex-direction: column; }
  .db2-quicklink { padding: 12px 18px; font-size: var(--text-ui); min-height: 44px; box-sizing: border-box; text-align: center; }

  /* Hub grid: single column, 44px rows */
  .db2-hub-grid { grid-template-columns: 1fr; }
  .db2-hub-card { padding: 14px 16px; min-height: 44px; }
  .db2-hub-card__name { font-size: var(--text-small); }

  /* Dana reminder */
  .db-dana-reminder__item { padding: 10px 12px; min-height: 44px; display: flex; align-items: center; }

  /* ── My Registrations (mr-) ── */
  .mr-page { padding: 24px 16px 48px; }
  .mr-heading { font-size: var(--text-h3); margin-bottom: 28px; }
  .mr-section { margin-bottom: 32px; }
  .mr-card__title { font-size: 16px; }

  /* Cancel button: enlarge touch targets */
  .mr-cancel-btn { padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; font-size: var(--text-ui); }
  .mr-cancel-btn--yes,
  .mr-cancel-btn--keep { padding: 12px 20px; min-height: 44px; font-size: var(--text-ui); box-sizing: border-box; }
  .mr-cancel-confirm__actions { gap: 8px; }
  .mr-card__dana-link { display: inline-block; padding: 8px 0; min-height: 44px; line-height: 28px; }

  /* ── My Library (ml-) ── */
  .ml-page { padding: 24px 16px 48px; }
  .ml-heading { font-size: var(--text-h3); }
  .ml-intro { margin-bottom: 24px; }
  .ml-item { padding: 14px 0; min-height: 44px; gap: 12px; }
  .ml-item__title { font-size: var(--text-small); }

  /* ── My Profile (mp-) ── */
  .mp-heading { font-size: var(--text-h3); margin-bottom: 24px; }
  /* iOS auto-zoom prevention: inputs must be ≥16px */
  .mp-input { font-size: 16px; }
  .mp-submit {
    align-self: stretch;
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    min-height: 48px;
    box-sizing: border-box;
    text-align: center;
  }
  .mp-section { margin-bottom: 28px; }
}


/* ═══════════════════════════════════════════════════
   NAV — 🟢 design system (nav- prefix)
   Replaces all Webflow nav classes. Sticky header,
   CSS-hover dropdowns on desktop, React-state hamburger
   on mobile. nav.js no longer loaded.
═══════════════════════════════════════════════════ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
}

.nav__inner {
  display: flex;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100px;
  gap: 8px;
}

/* Brand */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.nav__brand-name {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 400;
  color: var(--rim-text);
  line-height: 1.2;
}

/* Desktop nav container */
.nav__desktop {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

/* Flat nav links */
.nav__link {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--rim-text);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.nav__link:hover { color: var(--rim-blue); background: var(--rim-bg); }
.nav__link--active { color: var(--rim-blue); font-weight: 600; }

/* Dropdown */
.nav__dropdown { position: relative; }

.nav__dropdown-toggle {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--rim-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.nav__dropdown-toggle:hover { color: var(--rim-blue); background: var(--rim-bg); }
.nav__dropdown-caret { font-size: 10px; color: var(--rim-text-muted); }

.nav__dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 230px;
  background: transparent;
  padding-top: 6px;
  z-index: 200;
}
/* Inner wrapper — white stands out against warm page backgrounds */
.nav__dropdown-panel-inner {
  background: #fff;
  border-radius: 6px;
  padding: 8px;
}

.nav__dropdown:hover .nav__dropdown-panel,
.nav__dropdown:focus-within .nav__dropdown-panel {
  display: block;
}

.nav__dropdown-link {
  display: block;
  padding: 10px 12px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--rim-text);
  transition: color 0.15s, background 0.15s;
}
.nav__dropdown-link:not(:last-child) {
  border-bottom: 1px solid var(--rim-bg-accent);
  border-radius: 0;
}
.nav__dropdown-link:last-child { border-radius: 0 0 4px 4px; }
.nav__dropdown-link:first-child { border-radius: 4px 4px 0 0; }
.nav__dropdown-link:only-child { border-radius: 4px; }
.nav__dropdown-link:hover { color: var(--rim-blue); background: var(--rim-bg); }
.nav__dropdown-title { font-weight: 600; font-size: var(--text-ui); }
.nav__dropdown-desc { font-size: var(--text-label); color: var(--rim-text-muted); margin-top: 2px; }

/* Donate CTA pill */
.nav__donate {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: #c23b3b;
  padding: 8px 18px;
  border-radius: 9999px;
  text-decoration: none;
  white-space: nowrap;
  margin-left: 8px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.nav__donate:hover { background: #a83232; }

/* Hamburger button (hidden on desktop) */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--rim-text);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav__hamburger--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger--open span:nth-child(2) { opacity: 0; }
.nav__hamburger--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.nav__mobile {
  padding: 8px 0 20px;
  background: var(--rim-bg);
}
.nav__mobile-link {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--rim-text);
  text-decoration: none;
  padding: 13px 24px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rim-bg-accent);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: color 0.15s, background 0.15s;
}
.nav__mobile-link:first-child { border-top: 1px solid var(--rim-bg-accent); }
.nav__mobile-link:hover { color: var(--rim-blue); background: var(--rim-bg-accent); }
.nav__mobile-link--active { color: var(--rim-blue); font-weight: 600; }
.nav__mobile-donate {
  display: block;
  margin: 16px 24px 0;
  padding: 11px 16px;
  background: var(--rim-mid);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.15s;
}
.nav__mobile-donate:hover { background: var(--rim-blue); }

/* Responsive */
@media (max-width: 767px) {
  .nav__desktop { display: none; }
  .nav__donate   { display: none; }
  .nav__hamburger { display: flex; }
  .nav__brand-name { font-size: var(--text-small); }
}
@media (min-width: 768px) {
  .nav__mobile { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Staff Manual (man- prefix)
   Sidebar + reading-column layout. Readable, warm, document-like.
───────────────────────────────────────────────────────────────────────────── */

.man-layout {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  background: var(--rim-bg);
}

/* ── Sidebar ── */
.man-sidebar {
  width: 230px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 40px 20px 40px 28px;
  border-right: 1px solid var(--rim-rule);
  background: var(--rim-bg);
}

.man-sidebar__heading {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 16px;
}
.man-sidebar__editor-link {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--rim-mid);
  text-decoration: none;
  margin: -8px 0 16px;
  opacity: 0.7;
}
.man-sidebar__editor-link:hover { opacity: 1; }
.man-sidebar__public-note {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  color: var(--rim-text-muted);
  margin: -10px 0 12px;
  font-style: italic;
}
.man-public-banner {
  background: #f5f2ee;
  border: 1px solid #e8e4de;
  border-radius: 6px;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin-bottom: 32px;
}

.man-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.man-sidebar__link {
  display: block;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rim-text);
  text-decoration: none;
  padding: 4px 0;
}
.man-sidebar__link--soon { color: var(--rim-text-muted); font-weight: 500; cursor: default; }

.man-sidebar__sub {
  list-style: none;
  margin: 4px 0 8px 10px;
  padding: 0;
  border-left: 2px solid var(--rim-rule);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Reset rim.webflow.css li defaults (margin-left: -20px, margin-bottom: 15px,
   font-size: 18px, line-height: 32px) that would otherwise wreck sidebar layout */
.man-sidebar__list > li,
.man-sidebar__sub > li {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.man-sidebar__sublink {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  text-decoration: none;
  padding: 3px 0 3px 10px;
  line-height: 1.4;
}
.man-sidebar__sublink:hover { color: var(--rim-blue); }

.man-sidebar__soon-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.man-soon-badge {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--rim-text-muted);
  background: var(--rim-bg-accent);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

/* ── Main content ── */
.man-content {
  flex: 1;
  min-width: 0;
  max-width: 740px;
  padding: 56px 64px 100px;
}

/* ── Inline code ── */
.man-content code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--rim-bg-accent);
  color: var(--rim-mid);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── Chapter header ── */
.man-chapter {
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--rim-rule);
  scroll-margin-top: 24px;
}

/* Chapter break — visual separator when a second chapter follows */
.man-chapter--break {
  margin-top: 80px;
  padding-top: 48px;
  border-top: 2px solid var(--rim-blue);
}

.man-chapter__title {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 400;
  color: var(--rim-blue);
  margin: 0 0 10px;
  line-height: 1.2;
}

.man-chapter__subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  margin: 0;
  line-height: 1.65;
}

/* ── Section ── */
.man-section {
  margin-bottom: 56px;
  scroll-margin-top: 32px;
}

.man-section__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rim-rule);
}

/* Sub-heading within a section */
.man-section__h3 {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 700;
  color: var(--rim-text);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 28px 0 10px;
}

.man-section p {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text);
  line-height: 1.75;
  margin: 0 0 14px;
}

/* ── Numbered steps ── */
.man-steps {
  margin: 4px 0 16px;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.man-steps li {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text);
  line-height: 1.65;
}

/* ── Bullet list ── */
.man-list {
  margin: 4px 0 16px;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.man-list li {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text);
  line-height: 1.65;
}

/* ── Status grid ── */
.man-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 8px 0 16px;
}

.man-status-card {
  background: var(--rim-bg-accent);
  border-radius: 6px;
  padding: 16px 18px;
}

.man-status-card p {
  font-size: 13.5px !important;
  color: var(--rim-text-muted) !important;
  margin: 8px 0 0 !important;
  line-height: 1.6 !important;
}

.man-status-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}

.man-status-badge--registered { background: #d1fae5; color: #065f46; }
.man-status-badge--approved   { background: #dbeafe; color: #1e40af; }
.man-status-badge--waitlisted { background: #fef3c7; color: #92400e; }
.man-status-badge--cancelled  { background: #f3f4f6; color: #6b7280; }

/* ── Email trigger/description table ── */
.man-email-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 8px 0 20px;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  overflow: hidden;
}

.man-email-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: 1px solid var(--rim-rule);
}
.man-email-item:last-child { border-bottom: none; }

.man-email-item__trigger {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--rim-text);
  padding: 14px 16px;
  background: var(--rim-bg-accent);
  line-height: 1.4;
  border-right: 1px solid var(--rim-rule);
  align-self: start;
}

.man-email-item__desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--rim-text);
  padding: 14px 18px;
  line-height: 1.65;
}

/* ── Field guide (Sanity field-by-field documentation) ── */
.man-field-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 8px 0 20px;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  overflow: hidden;
}

.man-field {
  display: grid;
  grid-template-columns: 210px 1fr;
  border-bottom: 1px solid var(--rim-rule);
}
.man-field:last-child { border-bottom: none; }

.man-field__name {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--rim-text);
  padding: 14px 16px;
  background: var(--rim-bg-accent);
  line-height: 1.4;
  border-right: 1px solid var(--rim-rule);
  align-self: start;
}

.man-field__desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--rim-text);
  padding: 14px 18px;
  line-height: 1.65;
}

.man-field__desc p {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  margin: 0 0 8px !important;
}
.man-field__desc p:last-child { margin-bottom: 0 !important; }

.man-field__desc .man-list {
  margin-top: 8px;
  margin-bottom: 0;
}
.man-field__desc .man-list li { margin: 0; font-size: 13.5px; }

/* ── Tasks ── */
.man-task {
  margin-bottom: 28px;
  padding: 22px 24px;
  background: var(--rim-bg-accent);
  border-radius: 6px;
  border-left: 3px solid var(--rim-mid);
}

.man-task__title {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--rim-text);
  margin: 0 0 12px;
}

.man-task p {
  font-size: var(--text-ui) !important;
  color: var(--rim-text) !important;
  margin: 8px 0 0 !important;
  line-height: 1.7 !important;
}

.man-task .man-steps { margin-bottom: 0; }
.man-task .man-list  { margin-bottom: 0; }

.man-task__note {
  font-size: var(--text-xs) !important;
  color: var(--rim-text-muted) !important;
  font-style: italic;
  margin-top: 12px !important;
  border-top: 1px solid var(--rim-rule);
  padding-top: 10px;
}

/* ── Note callout ── */
.man-note {
  background: color-mix(in srgb, var(--rim-mid) 8%, var(--rim-bg));
  border-left: 3px solid var(--rim-mid);
  border-radius: 0 6px 6px 0;
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text);
  line-height: 1.65;
  margin: 16px 0;
}

/* man-note variant: warning (amber) */
.man-note--warn {
  background: color-mix(in srgb, #b45309 8%, var(--rim-bg));
  border-left-color: #b45309;
}

/* man-note variant: developer / technical context (cool slate) */
.man-note--dev {
  background: color-mix(in srgb, #334155 11%, var(--rim-bg));
  border-left-color: #475569;
  color: var(--rim-text);
}
.man-note--dev__label {
  display: block;
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 6px;
}

/* ── Role/permission table ── */
.man-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  margin: 16px 0;
}
.man-table th,
.man-table td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid var(--rim-rule);
  line-height: 1.5;
}
.man-table th {
  font-weight: 700;
  color: var(--rim-text-muted);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--rim-bg-accent);
}
.man-table td:first-child { color: var(--rim-text); font-weight: 500; }
.man-table td:not(:first-child) { color: var(--rim-text-muted); }

/* Permission check table — centre the ✓ columns */
.man-table--perms td:not(:first-child),
.man-table--perms th:not(:first-child) { text-align: center; }

/* ── Code / SQL block ── */
.man-code {
  background: var(--rim-bg-accent);
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--rim-text);
  overflow-x: auto;
  margin: 16px 0;
  white-space: pre;
}

/* ── Future editions ── */
.man-future {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 2px solid var(--rim-rule);
}

.man-future__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--rim-text-muted);
  margin: 0 0 12px;
}

.man-future__intro {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  margin: 0 0 20px;
  line-height: 1.7;
}

.man-future__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.man-future__list li {
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--rim-text-muted);
  line-height: 1.65;
  padding-left: 18px;
  position: relative;
}

.man-future__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--rim-rule);
}

/* ── Section divider (Google Meet sub-section within Programs chapter) ── */
.man-section--divider {
  border-top: 1px solid var(--rim-rule);
  margin-top: 72px;
  padding-top: 64px;
}

/* ── Sidebar sub-list divider ── */
.man-sidebar__sub-divider {
  border-top: 1px solid var(--rim-rule);
  margin: 8px 0 6px;
  list-style: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .man-layout { flex-direction: column; }
  .man-sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--rim-rule);
    padding: 24px 20px;
  }
  .man-sidebar__sub { display: none; }
  .man-content { padding: 32px 24px 64px; }
  .man-status-grid { grid-template-columns: 1fr; }
  .man-email-item { grid-template-columns: 1fr; }
  .man-email-item__trigger { border-right: none; border-bottom: 1px solid var(--rim-rule); }
  .man-field { grid-template-columns: 1fr; }
  .man-field__name { border-right: none; border-bottom: 1px solid var(--rim-rule); }
  .man-chapter--break { margin-top: 48px; padding-top: 32px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Feature Ideas & Backlog (bl- prefix)
   Admin-only page at /admin/ideas. Displays backlog.json grouped by category.
───────────────────────────────────────────────────────────────────────────── */

.bl-page {
  background: var(--rim-bg);
  min-height: 100vh;
  padding: 56px 0 100px;
}

.bl-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Header ── */
.bl-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rim-rule);
}

.bl-header__title {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 8px;
  line-height: 1.3;
}

.bl-header__subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 0;
  line-height: 1.6;
}

.bl-header__stats {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
}

.bl-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.bl-stat__num {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 400;
  color: var(--rim-blue);
  line-height: 1;
}

.bl-stat__num--high { color: #b05555; }

.bl-stat__label {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  white-space: nowrap;
}

/* ── Category sections ── */
.bl-category {
  margin-bottom: 48px;
}

.bl-category__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.bl-category__title {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0;
}

.bl-category__count {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 600;
  color: var(--rim-bg);
  background: var(--rim-mid);
  border-radius: 10px;
  padding: 1px 7px;
  line-height: 1.5;
}

/* ── Cards ── */
.bl-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bl-card {
  background: #fff;
  border-radius: 6px;
  padding: 20px 24px;
  border-left: 3px solid var(--rim-mid);
}

.bl-card--done {
  border-left-color: var(--rim-rule);
  opacity: 0.55;
}

.bl-card__top {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.bl-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--rim-text);
  margin: 0 0 6px;
  line-height: 1.4;
}

.bl-card--done .bl-card__title {
  text-decoration: line-through;
  color: var(--rim-text-muted);
}

.bl-card__desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--rim-text-muted);
  line-height: 1.65;
  margin: 0 0 12px;
}

.bl-card__notes {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-mid);
  font-style: italic;
  margin: 0 0 12px;
  line-height: 1.6;
}

.bl-card__meta {
  display: flex;
  gap: 16px;
  align-items: center;
}

.bl-card__date {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--rim-text-muted);
}

.bl-card__id {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--rim-rule);
}

/* ── Priority + status badges ── */
.bl-badge {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 2px 7px;
  line-height: 1.5;
}

.bl-badge--high     { background: #fdeaea; color: #9e3b3b; }
.bl-badge--medium   { background: #fdf4e0; color: #8a6020; }
.bl-badge--low      { background: var(--rim-bg-accent); color: var(--rim-text-muted); }
.bl-badge--inprogress { background: #e3edf5; color: #1e5478; }
.bl-badge--done     { background: #e8f2ea; color: #2e6b3e; }

/* ── Empty state ── */
.bl-empty {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  text-align: center;
  padding: 64px 0;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .bl-page { padding: 32px 0 64px; }
  .bl-container { padding: 0 20px; }
  .bl-header { flex-direction: column; gap: 20px; }
  .bl-header__stats { flex-direction: row; gap: 32px; }
  .bl-card { padding: 16px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOST AREA (hs-)
   /hosts — virtual programs with assigned room accounts for the host team
   ═══════════════════════════════════════════════════════════════════════════ */

.hs-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 32px 96px;
}

/* ── Header ── */
.hs-header {
  margin-bottom: 48px;
}

.hs-header__title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--rim-text);
  margin: 8px 0 16px;
  line-height: 1.25;
}

.hs-header__intro {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--rim-text-muted);
  margin: 0;
}

/* ── How to host ── */
.hs-how-to {
  background: var(--rim-bg-accent);
  border-radius: 4px;
  padding: 28px 32px;
  margin-bottom: 48px;
}

.hs-how-to__title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 16px;
}

.hs-steps {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: 1.75;
  color: var(--rim-text);
  margin: 0 0 16px;
  padding-left: 24px;
}

.hs-steps li {
  margin-bottom: 10px;
}

.hs-steps li:last-child {
  margin-bottom: 0;
}

.hs-how-to__note {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--rim-text-muted);
  margin: 0;
}

/* ── Program cards ── */
.hs-programs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hs-program {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 4px 24px;
  align-items: start;
}

.hs-program__name {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--rim-text);
  grid-column: 1;
  grid-row: 1;
}

.hs-program__day {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  grid-column: 1;
  grid-row: 2;
}

.hs-program__account {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  grid-column: 1;
  grid-row: 3;
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.hs-program__account-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
}

.hs-program__account-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--rim-blue);
  background: #eaf1f6;
  padding: 2px 8px;
  border-radius: 3px;
}

.hs-program__account--missing {
  color: var(--rim-text-muted);
  font-style: italic;
  grid-column: 1;
  grid-row: 3;
  margin-top: 8px;
}

.hs-program__join {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--rim-blue);
  text-decoration: none;
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  white-space: nowrap;
}

.hs-program__join:hover {
  text-decoration: underline;
}

/* ── Empty state ── */
.hs-empty {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  text-align: center;
  padding: 64px 0;
}


/* ── Mobile ── */
@media (max-width: 600px) {
  .hs-page { padding: 32px 20px 64px; }
  .hs-how-to { padding: 20px; }
  .hs-program {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .hs-program__join {
    grid-column: 1;
    grid-row: auto;
    margin-top: 12px;
  }
  .hs-program__account {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ── Admin Feature Inventory (adm-fi-) ──────────────────── */

.adm-fi-content { max-width: 900px; }

.adm-fi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.adm-fi-header__left { flex: 1; min-width: 0; }
.adm-fi-header__links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  flex-shrink: 0;
}

.adm-fi-title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--rim-text);
  margin: 4px 0 8px;
  line-height: 1.25;
}
.adm-fi-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Quick-jump nav */
.adm-fi-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 36px;
  padding: 14px 16px;
  background: var(--rim-bg-accent);
  border-radius: 8px;
}
.adm-fi-jump__link {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--rim-mid);
  text-decoration: none;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--rim-rule);
  background: #fff;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.adm-fi-jump__link:hover { background: var(--rim-bg); border-color: var(--rim-mid); }

/* Area sections */
.adm-fi-areas { display: flex; flex-direction: column; gap: 48px; }

.adm-fi-area {
  scroll-margin-top: 80px;
}

.adm-fi-area__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--rim-rule);
}
.adm-fi-area__icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.adm-fi-area__title {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--rim-blue);
  margin: 0 0 4px;
  line-height: 1.25;
}
.adm-fi-area__desc {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 0;
  line-height: 1.55;
}
.adm-fi-area__count {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  color: var(--rim-text-muted);
  background: var(--rim-bg-accent);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 4px;
}

/* Feature cards */
.adm-fi-features { display: flex; flex-direction: column; gap: 16px; }

.adm-fi-feat {
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.adm-fi-feat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--rim-bg);
  border-bottom: 1px solid var(--rim-rule);
}
.adm-fi-feat__name {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 700;
  color: var(--rim-text);
  margin: 0;
}
.adm-fi-feat__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.adm-fi-feat__note {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  color: var(--rim-text-muted);
  font-style: italic;
}

/* Feature body rows */
.adm-fi-feat__body { display: flex; flex-direction: column; }

.adm-fi-feat__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rim-bg-accent);
  align-items: baseline;
}
.adm-fi-feat__row:last-child { border-bottom: none; }

.adm-fi-feat__label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  padding-top: 2px;
}

/* Where: locations */
.adm-fi-feat__locations {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.adm-fi-feat__loc {
  font-size: 11.5px;
  font-family: var(--font-mono);
  background: var(--rim-bg-accent);
  color: var(--rim-text);
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
}

/* What: description */
.adm-fi-feat__what {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--rim-text);
  line-height: 1.6;
  margin: 0;
}

/* Related to: list */
.adm-fi-feat__related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.adm-fi-feat__rel-item {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  line-height: 1.5;
  padding-left: 16px;
  position: relative;
}
.adm-fi-feat__rel-item::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--rim-mid);
  font-size: var(--text-xxs);
  top: 1px;
}

/* Status badges */
.adm-fi-status {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.adm-fi-status--active  { background: #e8f5e9; color: #2e7d32; }
.adm-fi-status--stub    { background: #fff8e1; color: #b08000; }
.adm-fi-status--planned { background: var(--rim-bg-accent); color: var(--rim-text-muted); }
.adm-fi-status--partial { background: #fff3e0; color: #b05000; }

/* Quick-jump rows */
.adm-fi-jump { flex-direction: column; gap: 10px; }
.adm-fi-jump__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.adm-fi-jump__group-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin-right: 4px;
  white-space: nowrap;
}
.adm-fi-jump__divider {
  height: 1px;
  background: var(--rim-rule);
}
.adm-fi-jump__link--sys {
  background: color-mix(in srgb, var(--rim-mid) 10%, #fff);
  border-color: color-mix(in srgb, var(--rim-mid) 30%, var(--rim-rule));
  color: var(--rim-blue);
  font-weight: 600;
}
.adm-fi-jump__link--sys:hover {
  background: color-mix(in srgb, var(--rim-mid) 16%, #fff);
}

/* System-view sections */
.adm-fi-sys-section {
  scroll-margin-top: 80px;
  margin-bottom: 40px;
  padding: 28px 30px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 10px;
}
.adm-fi-sys-section__title {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 400;
  color: var(--rim-blue);
  margin: 0 0 6px;
  line-height: 1.25;
}
.adm-fi-sys-section__subtitle {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--rim-text);
  margin: 28px 0 12px;
}
.adm-fi-sys-section__intro {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--rim-text-muted);
  line-height: 1.65;
  margin: 0 0 20px;
}

/* Overview prose */
.adm-fi-overview-prose {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text);
  line-height: 1.7;
}
.adm-fi-overview-prose p { margin: 0 0 12px; }
.adm-fi-overview-list {
  margin: 8px 0 16px 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adm-fi-overview-list li { font-size: 13.5px; line-height: 1.55; }
.adm-fi-overview-note {
  margin-top: 20px;
  padding: 12px 16px;
  background: var(--rim-bg-accent);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  line-height: 1.6;
}
.adm-fi-overview-note strong { color: var(--rim-text); }
.adm-fi-overview-note code {
  font-size: var(--text-label);
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Tables */
.adm-fi-table-wrap { overflow-x: auto; margin: 0; }
.adm-fi-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}
.adm-fi-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  background: var(--rim-bg-accent);
  border-bottom: 1px solid var(--rim-rule);
}
.adm-fi-table td {
  padding: 10px 12px;
  vertical-align: top;
  border-bottom: 1px solid var(--rim-bg-accent);
  color: var(--rim-text);
  line-height: 1.55;
}
.adm-fi-table tbody tr:last-child td { border-bottom: none; }
.adm-fi-table tbody tr:hover td { background: var(--rim-bg); }
.adm-fi-table__muted { color: var(--rim-text-muted); font-size: 12.5px; }
.adm-fi-table__small { font-size: 12.5px; color: var(--rim-text-muted); }
.adm-fi-table__note { font-size: var(--text-label); color: var(--rim-text-muted); font-style: italic; }
.adm-fi-table--map td:first-child { white-space: nowrap; }

/* Data flows */
.adm-fi-flows { display: flex; flex-direction: column; gap: 24px; }
.adm-fi-flow {
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  overflow: hidden;
}
.adm-fi-flow__head {
  padding: 14px 18px;
  background: var(--rim-bg);
  border-bottom: 1px solid var(--rim-rule);
}
.adm-fi-flow__title {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 700;
  color: var(--rim-text);
  margin-bottom: 2px;
}
.adm-fi-flow__subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  font-style: italic;
}
.adm-fi-flow__steps {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  counter-reset: flow-step;
}
.adm-fi-flow__step {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 10px;
  padding: 7px 18px;
  border-bottom: 1px solid var(--rim-bg-accent);
  align-items: baseline;
  counter-increment: flow-step;
}
.adm-fi-flow__step:last-child { border-bottom: none; }
.adm-fi-flow__step-area {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  color: var(--rim-mid);
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding-top: 1px;
}
.adm-fi-flow__step-area::before {
  content: counter(flow-step) ". ";
  color: var(--rim-text-muted);
  font-weight: 400;
  font-size: var(--text-xxs);
}
.adm-fi-flow__step-text {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text);
  line-height: 1.55;
}

/* Critical dependencies */
.adm-fi-deps { display: flex; flex-direction: column; gap: 10px; }
.adm-fi-dep {
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  overflow: hidden;
}
.adm-fi-dep__system {
  padding: 10px 16px;
  background: #fff8e6;
  border-bottom: 1px solid #f0e0b0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  color: #6b4800;
  line-height: 1.4;
}
.adm-fi-dep__breaks {
  list-style: none;
  margin: 0;
  padding: 8px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #fff;
}
.adm-fi-dep__break-item {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text);
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
}
.adm-fi-dep__break-item::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: #c0392b;
  font-size: 10px;
  font-weight: 700;
  top: 2px;
}

/* "Feature detail" divider */
.adm-fi-detail-header {
  margin: 8px 0 32px;
  padding-top: 36px;
  border-top: 2px solid var(--rim-rule);
}
.adm-fi-detail-header__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 6px;
}
.adm-fi-detail-header__desc {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--rim-text-muted);
  margin: 0;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 640px) {
  .adm-fi-header { flex-direction: column; }
  .adm-fi-header__links { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
  .adm-fi-feat__row { grid-template-columns: 72px 1fr; gap: 8px; }
  .adm-fi-area__count { display: none; }
  .adm-fi-sys-section { padding: 18px 16px; }
  .adm-fi-flow__step { grid-template-columns: 110px 1fr; }
  .adm-fi-table--map td:first-child { white-space: normal; }
}

/* ─── hh- Household Management ──────────────────────────────────────────────── */

.hh-section { border-top: 1px solid var(--rim-rule); }

/* Shared link style */
.hh-link {
  color: var(--rim-mid);
  text-decoration: none;
  font-weight: 500;
}
.hh-link:hover { text-decoration: underline; }

/* Household card (in MemberDetail) */
.hh-household-card {
  background: var(--rim-bg-accent);
  border-radius: 6px;
  padding: 16px 18px;
}
.hh-household-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.hh-household-card__name { font-size: var(--text-small); }
.hh-household-card__rel {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
}
.hh-household-card__address {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 4px 0 10px;
}
.hh-household-card__footer { margin-top: 12px; }

/* From household address hint */
.hh-from-household { color: var(--rim-mid); font-weight: 500; }

/* Member list (used in both HouseholdSection + HouseholdDetail) */
.hh-member-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.hh-member-list--compact { margin: 10px 0 0; }

.hh-member-row {
  padding: 14px 0;
  margin-left: 0;      /* override: li { margin-left: -20px } from Webflow */
  margin-bottom: 0;    /* override: li { margin-bottom: 15px } from Webflow */
  border-bottom: 1px solid var(--rim-rule);
}
.hh-member-row:last-child { border-bottom: none; }
.hh-member-row--compact { padding: 7px 0; }

/* Main row: info stacked left, actions right */
.hh-member-row__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* Compact rows (HouseholdSection card) */
.hh-member-row--compact {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Two-line info block: name on top, relationship row below */
.hh-member-row__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hh-member-row__name {
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.4;    /* override: a { line-height: 32px } from Webflow */
}

/* Relationship row: label + edit + badge all inline */
.hh-member-row__rel-area {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hh-member-row__rel {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--rim-text-muted);
}
/* Subtle "edit" link — quiet until hovered */
.hh-member-row__edit-rel {
  font-size: var(--text-label);
  font-weight: 400;
  color: var(--rim-text-muted);
  opacity: 0.55;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.hh-member-row__edit-rel:hover { opacity: 1; text-decoration: underline; }
.hh-member-row__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Inline relationship edit form */
.hh-rel-edit {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--rim-bg-accent);
  border-radius: 4px;
}
.hh-rel-edit__select { width: auto; max-width: 190px; }
.hh-rel-edit__input { width: auto; max-width: 160px; }

/* Empty state */
.hh-empty {
  color: var(--rim-text-muted);
  margin: 0 0 14px;
}

/* Action buttons row */
.hh-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Create / join forms */
.hh-create-form,
.hh-join-form {
  margin-top: 16px;
  background: var(--rim-bg-accent);
  border-radius: 6px;
  padding: 18px;
}

/* Inline form row: relationship select + optional custom + action button */
.hh-inline-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.hh-inline-form__field { flex: 1; min-width: 140px; }
.hh-inline-form__btn { flex-shrink: 0; }

/* Add member section in HouseholdDetail */
.hh-add-member {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rim-rule);
}
.hh-add-member__title {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 12px;
}

.hh-add-form__selected {
  font-size: var(--text-ui);
  margin: 0 0 12px;
  color: var(--rim-text);
}

/* Search input + results */
.hh-search { position: relative; }
.hh-search__status {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 4px 0 0;
}
.hh-search__results {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  background: white;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}
.hh-search__result {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 9px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-ui);
  color: var(--rim-text);
}
.hh-search__result:hover { background: var(--rim-bg-accent); }
.hh-search__email {
  margin-left: auto;
  font-size: var(--text-label);
  color: var(--rim-text-muted);
}

/* Households list page */
.hh-link { color: var(--rim-mid); text-decoration: none; font-weight: 500; }
.hh-link:hover { text-decoration: underline; }
.hh-member-count { font-weight: 600; }
.hh-others { font-size: var(--text-xs); }

.hh-custom-labels {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rim-rule);
}
.hh-custom-labels__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 6px;
}
.hh-custom-labels__desc {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 0 0 14px;
}
.hh-custom-labels__table { max-width: 360px; }

/* adm- utilities used by households */
.adm-muted { color: var(--rim-text-muted); }
.adm-back {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  text-decoration: none;
}
.adm-back:hover { color: var(--rim-mid); }
.adm-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--rim-mid);
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}

/* Base button reset — all adm-btn* variants inherit from this */
.adm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
/* Primary filled button (main actions: Save, Add, Join, Create) */
.adm-btn--primary {
  padding: 9px 20px;
  background: var(--rim-blue);
  color: #fff;
  font-size: var(--text-ui);
  font-weight: 500;
  border: none;
}
.adm-btn--primary:hover:not(:disabled) { opacity: 0.88; }
.adm-btn--primary:disabled { opacity: 0.5; cursor: default; }

/* Small primary (inline edit save buttons) */
.adm-btn--sm.adm-btn--primary {
  padding: 4px 12px;
  font-size: var(--text-label);
  background: var(--rim-blue);
  color: #fff;
  border: 1px solid var(--rim-blue);
}
.adm-btn--sm.adm-btn--primary:hover:not(:disabled) { background: var(--rim-mid); border-color: var(--rim-mid); opacity: 1; }

/* Button variants used by households */
.adm-btn--sm {
  padding: 4px 10px;
  font-size: var(--text-label);
  border-radius: 4px;
  border: 1px solid var(--rim-rule);
  background: none;
  cursor: pointer;
  color: var(--rim-text);
  font-family: var(--font-sans);
}
.adm-btn--sm:hover { background: var(--rim-bg-accent); }
.adm-btn--ghost {
  background: none;
  border: 1px solid var(--rim-rule);
  color: var(--rim-text);
  padding: 8px 16px;
  font-size: var(--text-ui);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.adm-btn--ghost:hover { background: var(--rim-bg-accent); }
.adm-btn--danger-ghost {
  background: none;
  border: 1px solid #e0b0b0;
  color: #c44;
  padding: 4px 10px;
  font-size: var(--text-label);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.adm-btn--danger-ghost:hover { background: #fdf0f0; }
.adm-confirm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOST COMMUNITY HUB — hub- prefix
   Pages: /account/host, /account/host/subs, /account/host/threads,
          /account/host/threads/[id], /account/host/manage
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout — Hub Shell (sidebar + main) ── */
.hub-shell { display: flex; min-height: 100vh; background: var(--rim-bg); }
.hub-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hub-main__content { flex: 1; padding: 24px 32px; }

.hub-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.hub-page__title { font-size: 22px; font-weight: 400; font-family: var(--font-serif); color: var(--rim-text); margin: 0; }
.hub-page__subtitle { font-size: var(--text-ui); color: var(--rim-text-muted); margin: 4px 0 0; }
.hub-page__actions { display: flex; gap: 8px; align-items: center; }
.hub-empty { color: var(--rim-text-muted); font-size: var(--text-small); margin-top: 16px; }
.hub-back-link { display: inline-block; font-size: var(--text-xs); color: var(--rim-mid); text-decoration: none; margin-bottom: 24px; }
.hub-back-link:hover { text-decoration: underline; }
.hub-success-banner { background: #eef7ee; color: #2d6a2d; font-size: var(--text-ui); padding: 10px 14px; border-radius: 4px; margin-bottom: 20px; }

/* ── Hub Sidebar (HubSidebar component) ── */
.hub-sidebar {
  width: 220px; flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #e5e2de;
  display: flex; flex-direction: column;
  padding: 24px 0 16px;
  position: sticky; top: 90px; height: calc(100vh - 90px); overflow-y: auto;
  z-index: 10;
}
.hub-sb-identity { padding: 0 16px 16px; border-bottom: 0.5px solid var(--color-border-tertiary, #e5e2de); margin-bottom: 8px; }
.hub-sb-type { font-size: 10.5px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-tertiary, var(--rim-text-muted)); margin-bottom: 4px; }
.hub-sb-name { font-size: 16px; font-weight: 500; font-family: var(--font-serif); color: var(--color-text-primary, var(--rim-text)); margin-bottom: 2px; }
.hub-sb-meta { font-size: var(--text-label); color: var(--color-text-tertiary, var(--rim-text-muted)); }
.hub-sb-nav { padding: 8px; }
.hub-sb-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 7px;
  font-size: 13.5px; color: var(--color-text-secondary, #4a5568);
  cursor: pointer; text-decoration: none; justify-content: space-between;
}
.hub-sb-item:hover { background: var(--color-background-secondary, var(--rim-bg)); }
.hub-sb-item--active { background: #E1F5EE; color: #0F6E56; font-weight: 500; }
.hub-sb-item__icon { font-size: var(--text-ui); width: 16px; text-align: center; flex-shrink: 0; color: var(--color-text-tertiary, var(--rim-text-muted)); }
.hub-sb-item--active .hub-sb-item__icon { color: #1D9E75; }
.hub-sb-item__label { flex: 1; }
.hub-sb-item__badge { font-size: var(--text-xxs); background: var(--color-background-secondary, var(--rim-bg-accent)); border-radius: 10px; padding: 1px 6px; color: var(--color-text-tertiary, var(--rim-text-muted)); }
.hub-sb-item--active .hub-sb-item__badge { background: #9FE1CB; color: #0F6E56; }
.hub-sb-divider { height: 0.5px; background: var(--color-border-tertiary, #e5e2de); margin: 6px 16px; }
.hub-sb-group { padding: 8px 8px 4px; }
.hub-sb-group-label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-tertiary, var(--rim-text-muted)); padding: 4px 8px 6px; }
.hub-sb-tool {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 7px;
  font-size: 13.5px; color: var(--color-text-secondary, #4a5568);
  cursor: pointer; text-decoration: none;
}
.hub-sb-tool:hover { background: var(--color-background-secondary, var(--rim-bg)); }
.hub-sb-tool__arrow { font-size: var(--text-xxs); color: var(--color-text-tertiary, var(--rim-text-muted)); margin-left: auto; }
.hub-sb-footer { margin-top: auto; padding: 8px 8px 0; border-top: 0.5px solid var(--color-border-tertiary, #e5e2de); }

/* Mobile sidebar */
.hub-sb-mobile-bar {
  display: none; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--color-background-primary, #fff);
  border-bottom: 0.5px solid var(--color-border-tertiary, #e5e2de);
  position: sticky; top: 0; z-index: 40;
}
.hub-sb-mobile-toggle { background: none; border: none; font-size: 22px; cursor: pointer; padding: 4px; color: var(--rim-text); }
.hub-sb-mobile-name { font-size: 16px; font-weight: 500; font-family: var(--font-serif); color: var(--rim-text); }
.hub-sb-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 99; }

@media (max-width: 767px) {
  .hub-shell { flex-direction: column; }
  .hub-sidebar {
    display: none; position: fixed; left: 0; top: 0; z-index: 100;
    width: 260px; height: 100vh;
    transform: translateX(-100%); transition: transform 0.2s ease;
  }
  .hub-sidebar--open { display: flex; transform: translateX(0); }
  .hub-sb-mobile-bar { display: flex; }
  .hub-sb-backdrop { display: block; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Hub Workspace Shell (hub-ws-)
   ─────────────────────────────────────────────────────────────────────────
   A single unified left rail for a hub and the tools linked from it. Replaces
   both HubTabBar and ToolsNav. Stays visible when the user navigates into a
   tool with ?hub=<slug> so the tool and the hub feel like one place.

   Width: 260px fixed on desktop. On mobile, slides in from the left, opened
   by the hub-ws-mobilebar hamburger button.
   ───────────────────────────────────────────────────────────────────────── */

.hub-ws-layout {
  display: flex;
  min-height: 100vh;
  background: var(--rim-bg);
}
/* Admin / tool-surface typography: calm but compact per RIM spec.
   Matches .admin-ui / .ac-layout — 16px base, 1.55 line-height. The sidebar
   has its own explicit sizing; this affects the main content area only. */
.hub-ws-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  line-height: 1.55;
}

.hub-ws-content {
  flex: 1;
  padding: 32px 40px 72px;
  width: 100%;
}

.hub-ws-content--reading {
  max-width: 760px;
  margin: 0 auto;
}

.hub-ws-content--wide {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Sidebar ── */
.hub-ws-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: #ffffff;
  border-right: 1px solid var(--rim-rule);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  transition: width 0.22s ease;
}

/* ── Identity block ── */
.hub-ws-identity {
  padding: 28px 20px 16px;
  position: relative;
}
.hub-ws-identity__type {
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin-bottom: 6px;
}
.hub-ws-identity__name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--rim-text);
  line-height: 1.3;
  margin-bottom: 8px;
}
.hub-ws-identity__meta {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  line-height: 1.45;
}

/* Compact monogram (collapsed state) */
.hub-ws-identity__mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--rim-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  margin: 0 auto;
}

/* Divider between identity and nav groups */
.hub-ws-divider {
  height: 1px;
  background: var(--rim-rule);
  margin: 0 20px;
}

/* Close button — mobile only */
.hub-ws-close {
  display: none;
  position: absolute;
  top: 16px;
  right: 14px;
  width: 32px; height: 32px;
  border: none; background: transparent;
  color: var(--rim-text-muted);
  cursor: pointer;
  border-radius: 4px;
  align-items: center; justify-content: center;
}
.hub-ws-close:hover { color: var(--rim-text); background: var(--rim-bg); }

/* Collapse toggle — desktop only */
.hub-ws-collapse {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--rim-text-muted);
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.hub-ws-collapse:hover {
  color: var(--rim-text);
  border-color: var(--rim-rule);
  background: var(--rim-bg);
}

/* ── Groups ── */
.hub-ws-group {
  padding: 12px 10px 10px;
}
.hub-ws-group + .hub-ws-group { padding-top: 4px; }
.hub-ws-group__label {
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  padding: 0 12px 8px;
}

/* ── Links ── */
.hub-ws-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: var(--text-ui);
  color: var(--rim-text);
  text-decoration: none;
  line-height: 1;
  min-height: 38px;
  transition: background 0.12s ease, color 0.12s ease;
}
.hub-ws-link:hover {
  background: var(--rim-bg);
  color: var(--rim-text);
}
.hub-ws-link--active {
  background: #e8eef1;
  color: var(--rim-blue);
  font-weight: 600;
}
.hub-ws-link--active:hover {
  background: #e8eef1;
}
.hub-ws-link__icon {
  flex-shrink: 0;
  color: var(--rim-text-muted);
}
.hub-ws-link--active .hub-ws-link__icon {
  color: var(--rim-blue);
}
.hub-ws-link__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Primary link (the hub's tool) — visually dominant */
.hub-ws-link--primary {
  font-weight: 600;
  color: var(--rim-text);
}
.hub-ws-link--primary .hub-ws-link__icon {
  color: var(--rim-blue);
}

/* Badge */
.hub-ws-badge {
  flex-shrink: 0;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: #e2e8ec;
  color: var(--rim-text);
  font-size: var(--text-xxs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.hub-ws-badge--primary {
  background: var(--rim-blue);
  color: #ffffff;
}

/* ── Footer ── */
.hub-ws-footer {
  margin-top: auto;
  padding: 14px 10px 22px;
  border-top: 1px solid var(--rim-rule);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hub-ws-footer__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  text-decoration: none;
}
.hub-ws-footer__link:hover {
  color: var(--rim-text);
  background: var(--rim-bg);
}

/* ── Collapsed (desktop icon rail) ── */
.hub-ws-sidebar--collapsed { width: 68px; }
.hub-ws-sidebar--collapsed .hub-ws-identity { padding: 14px 8px 10px; }
.hub-ws-sidebar--collapsed .hub-ws-collapse {
  position: static;
  margin: 0 auto 10px;
}
.hub-ws-sidebar--collapsed .hub-ws-divider { margin: 0 12px; }
.hub-ws-sidebar--collapsed .hub-ws-group { padding: 10px 8px; }
.hub-ws-sidebar--collapsed .hub-ws-group__label { display: none; }
.hub-ws-sidebar--collapsed .hub-ws-link {
  justify-content: center;
  padding: 10px 8px;
  gap: 0;
}
.hub-ws-sidebar--collapsed .hub-ws-link__label { display: none; }
.hub-ws-sidebar--collapsed .hub-ws-badge {
  position: absolute;
  transform: translate(12px, -12px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 9px;
}
.hub-ws-sidebar--collapsed .hub-ws-link { position: relative; }
.hub-ws-sidebar--collapsed .hub-ws-footer { padding: 12px 8px 18px; }
.hub-ws-sidebar--collapsed .hub-ws-footer__link {
  justify-content: center;
  gap: 0;
  padding: 10px 8px;
}
.hub-ws-sidebar--collapsed .hub-ws-footer__link span { display: none; }

/* ── Mobile top bar (hamburger) ── */
.hub-ws-mobilebar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #ffffff;
  border-bottom: 1px solid var(--rim-rule);
  position: sticky;
  top: 0;
  z-index: 40;
}
.hub-ws-mobilebar__btn {
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  color: var(--rim-text);
  cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.hub-ws-mobilebar__btn:hover { background: var(--rim-bg); }
.hub-ws-mobilebar__name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--rim-text);
}

/* Backdrop */
.hub-ws-backdrop {
  display: none;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hub-ws-content { padding: 28px 28px 60px; }
}

@media (max-width: 900px) {
  /* Switch the layout from a flex row to a block stack on mobile so the
     fixed-position sidebar is unambiguously out of flow — no browser quirk
     where a flex container reserves space for a position:fixed child. */
  .hub-ws-layout {
    display: block;
  }
  .hub-ws-main {
    width: 100%;
  }
  .hub-ws-sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 280px;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 24px rgba(0,0,0,0.12);
  }
  .hub-ws-sidebar--open { transform: translateX(0); }
  /* Collapsed state only applies on desktop — mobile drawer always shows full */
  .hub-ws-sidebar--collapsed { width: 280px; }
  .hub-ws-sidebar--collapsed .hub-ws-identity { padding: 28px 20px 16px; }
  .hub-ws-sidebar--collapsed .hub-ws-group__label,
  .hub-ws-sidebar--collapsed .hub-ws-link__label,
  .hub-ws-sidebar--collapsed .hub-ws-footer__link span { display: initial; }
  .hub-ws-sidebar--collapsed .hub-ws-link,
  .hub-ws-sidebar--collapsed .hub-ws-footer__link { justify-content: flex-start; gap: 10px; padding: 9px 12px; }
  .hub-ws-sidebar--collapsed .hub-ws-badge { position: static; transform: none; min-width: 22px; height: 20px; padding: 0 6px; font-size: var(--text-xxs); }
  .hub-ws-collapse { display: none; }
  .hub-ws-mobilebar { display: flex; }
  .hub-ws-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20,30,36,0.38);
    z-index: 55;
  }
  .hub-ws-close { display: flex; }
  .hub-ws-content { padding: 20px 20px 60px; }
}

@media (max-width: 430px) {
  .hub-ws-content { padding: 16px 16px 60px; }
}

/* ── Tool head + sub-nav inside workspace ── */
.hub-ws-toolhead {
  padding: 20px 40px 0;
  border-bottom: 1px solid var(--rim-rule);
  background: #ffffff;
}
.hub-ws-toolhead__name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--rim-text);
  margin: 0 0 14px;
  line-height: 1.2;
}

.hub-ws-subnav {
  background: #ffffff;
  border-bottom: 1px solid var(--rim-rule);
  padding: 0 40px;
}
.hub-ws-subnav__inner {
  display: flex;
  gap: 2px;
}
.hub-ws-subnav__link {
  display: inline-flex;
  align-items: center;
  padding: 12px 16px;
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.hub-ws-subnav__link:hover { color: var(--rim-text); }
.hub-ws-subnav__link--active {
  color: var(--rim-blue);
  border-bottom-color: var(--rim-blue);
  font-weight: 600;
}

/* When subnav follows toolhead, merge their separator */
.hub-ws-toolhead + .hub-ws-subnav { padding-top: 0; }

@media (max-width: 900px) {
  .hub-ws-toolhead { padding: 14px 20px 0; }
  .hub-ws-toolhead__name { font-size: 19px; margin-bottom: 10px; }
  .hub-ws-subnav { padding: 0 20px; overflow-x: auto; }
}

/* Tools content inside workspace shell uses the reading or wide container
   — each tool's page chooses. Default to wide for tool surfaces. */

/* ── Hub Home (hub-home-) — session 87 redesign ──
   Shape: greeting + state sentence → primary tool card → pinned → activity rail → orientation.
   Visual hierarchy: primary card dominates; everything else is quiet scaffolding.              */

.hub-home {
  display: flex; flex-direction: column; gap: 32px;
  max-width: 760px; margin: 0 auto; padding: 8px 0 48px;
}

/* Header: soft greeting + plain-language state */
.hub-home__header { display: flex; flex-direction: column; gap: 6px; }
.hub-home__greeting {
  font-size: var(--text-ui); color: var(--rim-text-muted);
  font-weight: 400; letter-spacing: 0.01em;
}
.hub-home__state {
  font-family: var(--font-serif); font-size: var(--text-h2); font-weight: 400;
  color: var(--rim-text); line-height: 1.3; margin: 0; letter-spacing: -0.01em;
}

/* Generic section scaffolding */
.hub-home__section { display: flex; flex-direction: column; gap: 10px; }
.hub-home__section-label {
  font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--rim-text-muted);
}

/* Pinned threads list */
.hub-home__pinned { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hub-home__pinned-link {
  display: block; padding: 10px 14px; font-size: var(--text-small);
  color: var(--rim-blue); text-decoration: none; font-weight: 600;
  background: #fafaf9; border-radius: 6px; transition: background 0.12s;
}
.hub-home__pinned-link:hover { background: #f0efed; }

/* Activity rail: stacked cards of recent work */
.hub-home__activity {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
}

/* Orientation block (coordinator home content) */
.hub-home__orientation { display: flex; flex-direction: column; gap: 10px; }
.hub-home__orientation-body { font-size: var(--text-small); line-height: 1.65; color: var(--rim-text); }
.hub-home__orientation-body p { margin: 0 0 12px; }
.hub-home__orientation-body a { color: var(--rim-blue); }

/* ── Primary tool card — visually dominant ── */
.hub-home-card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--rim-rule);
  border-radius: 12px; transition: border-color 0.15s, transform 0.12s;
}
.hub-home-card:hover { border-color: var(--rim-mid); }
.hub-home-card--active {
  background: linear-gradient(180deg, #fff 0%, #f7faff 100%);
  border-color: #c6d9ee;
  border-left: 4px solid var(--rim-blue);
}
.hub-home-card--active:hover { border-color: var(--rim-blue); }
.hub-home-card__inner {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 26px;
}
.hub-home-card__label {
  font-size: var(--text-xxs); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rim-text-muted); margin: 0;
}
.hub-home-card__headline {
  font-family: var(--font-serif); font-size: var(--text-h3); font-weight: 400;
  color: var(--rim-text); line-height: 1.25; margin: 0;
}
.hub-home-card__count {
  display: flex; align-items: baseline; gap: 8px; margin-top: 2px;
}
.hub-home-card__count-num {
  font-family: var(--font-serif); font-size: 42px; font-weight: 400;
  color: var(--rim-blue); line-height: 1;
}
.hub-home-card__count-word {
  font-size: var(--text-small); color: var(--rim-text-muted); font-weight: 500;
}
.hub-home-card__quiet {
  font-size: var(--text-small); color: var(--rim-text-muted); margin: 0;
  font-style: italic;
}
.hub-home-card__cta {
  font-size: var(--text-xs); color: var(--rim-blue); font-weight: 600;
  margin-top: 6px; letter-spacing: 0.01em;
}

/* ── Activity card (recent conversations / tasks / docs) ── */
.hub-home-act {
  background: #fff; border: 1px solid var(--rim-rule); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
}
.hub-home-act__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--rim-rule);
  background: #fafaf9;
}
.hub-home-act__heading {
  font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--rim-text-muted);
}
.hub-home-act__view {
  font-size: var(--text-xs); color: var(--rim-mid); text-decoration: none;
}
.hub-home-act__view:hover { text-decoration: underline; }
.hub-home-act__body { display: flex; flex-direction: column; }
.hub-home-act__row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px; border-bottom: 1px solid var(--rim-rule);
  text-decoration: none; color: var(--rim-text); transition: background 0.12s;
}
.hub-home-act__row:last-child { border-bottom: none; }
a.hub-home-act__row:hover { background: #fafaf9; }
.hub-home-act__title {
  font-size: var(--text-ui); color: var(--rim-text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-home-act__meta {
  font-size: var(--text-label); color: var(--rim-text-muted);
}

/* ── Hub Home role toggle (coordinator-only preview-as-host) — Phase 5 ── */
.hub-home-toggle {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; background: #fafaf9;
  border-radius: 8px; align-self: flex-start;
}
.hub-home-toggle__label {
  font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--rim-text-muted);
}
.hub-home-toggle__pills { display: inline-flex; gap: 2px; }
.hub-home-toggle__pill {
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500;
  padding: 6px 12px; border: none; background: transparent;
  color: var(--rim-text-muted); cursor: pointer; border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.hub-home-toggle__pill:hover { color: var(--rim-text); }
.hub-home-toggle__pill.is-active {
  background: var(--rim-blue); color: #fff;
}

/* Shell placeholders (removed as each sub-step fills content) */
.hub-home-coord__placeholder,
.hub-home-host__placeholder {
  font-size: var(--text-small); color: var(--rim-text-muted);
  font-style: italic;
  padding: 12px 14px; background: #fafaf9; border-radius: 6px;
}
.hub-home__debug {
  font-family: var(--font-mono); font-size: var(--text-xxs);
  color: var(--rim-text-muted); opacity: 0.5;
}

/* Coordinator view — attention items, team directory, quick links, notes */
.hub-home-coord { display: flex; flex-direction: column; gap: 32px; }
.hub-home-coord__empty {
  font-size: var(--text-small); color: var(--rim-text-muted);
  padding: 16px 18px; background: var(--color-success-bg, #eef7ef);
  border-radius: 8px;
}
.hub-home-coord__attention {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
}
.hub-home-coord__quicklinks {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--text-small); color: var(--rim-text);
}
.hub-home-coord__quicklinks a { color: var(--rim-blue); font-weight: 600; }
.hub-home-coord__quicklinks span { color: var(--rim-text-muted); }
.hub-home-coord__notes-placeholder {
  font-size: var(--text-small); color: var(--rim-text-muted);
  padding: 12px 14px; background: #fafaf9; border-radius: 6px;
}
.hub-home-coord__notes-placeholder a { color: var(--rim-blue); }

/* Attention card (hub-home-att-) — reused by each attention list */
.hub-home-att {
  background: #fff; border: 1px solid var(--rim-rule);
  border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.hub-home-att__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hub-home-att__heading {
  font-size: var(--text-ui); font-weight: 600; color: var(--rim-text);
}
.hub-home-att__view {
  font-size: var(--text-xs); color: var(--rim-blue); text-decoration: none;
}
.hub-home-att__view:hover { text-decoration: underline; }
.hub-home-att__hint {
  font-size: var(--text-label); color: var(--rim-text-muted);
}
.hub-home-att__body { display: flex; flex-direction: column; }
.hub-home-att__row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 0; border-bottom: 1px solid var(--rim-rule);
  text-decoration: none; color: inherit;
}
.hub-home-att__row:last-child { border-bottom: none; }
.hub-home-att__row:hover .hub-home-att__title { color: var(--rim-blue); }
.hub-home-att__title {
  font-size: var(--text-small); color: var(--rim-text); font-weight: 500;
}
.hub-home-att__meta {
  font-size: var(--text-label); color: var(--rim-text-muted);
}

/* Host view — welcome, pinned, roster, troubleshooting, quick links */
.hub-home-host { display: flex; flex-direction: column; gap: 32px; }

/* Roster — vertical list of horizontal cards (photo left, body right).
   Uses a background-image div for the avatar instead of <img> so no stray
   img cascade (bio HTML, Webflow residue, BlockNote output) can stretch it. */
.hub-roster {
  display: flex; flex-direction: column; gap: 16px;
}
.hub-roster-card {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 14px 16px;
  background: #fff; border: 1px solid var(--rim-rule);
  border-radius: 10px;
}
.hub-roster-card__avatar {
  width: 56px; height: 56px;
  flex: 0 0 56px;
  border-radius: 50%;
  background-color: #eee;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-ui); font-weight: 600;
  color: var(--rim-text-muted);
  overflow: hidden;
}
.hub-roster-card__avatar--placeholder { background-color: #eee; }
.hub-roster-card__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.hub-roster-card__name {
  font-size: var(--text-ui); font-weight: 600; color: var(--rim-text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hub-roster-card__badge {
  font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--rim-blue);
  background: #eef3f8; padding: 2px 7px; border-radius: 4px;
}
.hub-roster-card__title {
  font-size: var(--text-label); color: var(--rim-text-muted);
}
.hub-roster-card__bio {
  font-size: var(--text-small); line-height: 1.55; color: var(--rim-text);
  margin-top: 4px;
}
.hub-roster-card__bio p { margin: 0 0 6px; }
.hub-roster-card__bio p:last-child { margin: 0; }
/* Defend against any img inside bio content trying to claim full width. */
.hub-roster-card__bio img {
  max-width: 100%; height: auto; border-radius: 6px;
}

.hub-home-host__trouble {
  font-size: var(--text-small); line-height: 1.6; color: var(--rim-text);
  display: flex; flex-direction: column; gap: 10px;
}
.hub-home-host__trouble p { margin: 0; }
.hub-home-host__trouble a { color: var(--rim-blue); }

.hub-home-host__quicklinks {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--text-small); color: var(--rim-text);
}
.hub-home-host__quicklinks a { color: var(--rim-blue); font-weight: 600; }
.hub-home-host__quicklinks span { color: var(--rim-text-muted); }

/* ── Hub Home inline edit (coordinator-only edit-in-place) ──
   Subtle "Edit" link beside section labels, a paneled editor surface, and a
   compact footer with Cancel / Save. Avoids decoration per design philosophy:
   the affordance reads as a text link, not a button competing for attention. */
.hub-home__section-label--with-action {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.hub-home__edit-link {
  appearance: none; background: transparent; border: 0; padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xxs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rim-text-muted);
  cursor: pointer;
  transition: color 0.12s;
}
.hub-home__edit-link:hover,
.hub-home__edit-link:focus-visible { color: var(--rim-blue); outline: none; }

.hub-home__empty-content {
  font-size: var(--text-small); color: var(--rim-text-muted);
  font-style: italic;
}
.hub-home__empty-action {
  appearance: none; background: transparent; border: 0; padding: 0;
  font: inherit; color: var(--rim-blue); cursor: pointer;
  text-decoration: underline; font-style: normal;
}

.hub-home__inline-editor {
  display: flex; flex-direction: column; gap: 10px;
}
.hub-home__inline-editor-surface {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  padding: 4px 8px;
}
.hub-home__inline-editor-footer {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--text-xs);
}
.hub-home__inline-editor-error { color: var(--color-error); flex: 1 1 auto; }
.hub-home__inline-editor-saved { color: var(--color-success); flex: 1 1 auto; }
.hub-home__inline-editor-actions {
  display: flex; gap: 8px; margin-left: auto;
}
.hub-home__inline-editor-cancel,
.hub-home__inline-editor-save {
  appearance: none; font: inherit;
  padding: 7px 14px; border-radius: 6px;
  font-size: var(--text-ui); font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hub-home__inline-editor-cancel {
  background: transparent; border: 1px solid var(--rim-rule); color: var(--rim-text);
}
.hub-home__inline-editor-cancel:hover:not(:disabled) { border-color: var(--rim-mid); }
.hub-home__inline-editor-save {
  background: var(--rim-blue); border: 1px solid var(--rim-blue); color: #fff;
}
.hub-home__inline-editor-save:hover:not(:disabled) { filter: brightness(0.95); }
.hub-home__inline-editor-cancel:disabled,
.hub-home__inline-editor-save:disabled {
  opacity: 0.55; cursor: not-allowed;
}

.hub-home__editor-loading {
  font-size: var(--text-small); color: var(--rim-text-muted);
  padding: 24px; text-align: center;
}

/* ── Hub Welcome Interstitial (hub-welcome-) ── */
.hub-welcome {
  display: flex; align-items: center; justify-content: center;
  min-height: 400px; padding: 40px 24px;
}
.hub-welcome__card {
  max-width: 560px; width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.hub-welcome__title {
  font-family: var(--font-serif); font-size: var(--text-h2); font-weight: 400;
  color: var(--rim-text); margin: 0;
}
.hub-welcome__headline {
  font-size: 17px; color: var(--rim-text-muted); margin: 0; line-height: 1.5;
}
.hub-welcome__body {
  font-size: 16px; line-height: 1.7; color: var(--rim-text); text-align: left; width: 100%;
}
.hub-welcome__body p { margin: 0 0 12px; }
.hub-welcome__body a { color: var(--rim-blue); }
.hub-welcome__btn {
  display: inline-block; min-height: 48px; padding: 12px 32px;
  background: var(--rim-blue); color: #fff; border: none; border-radius: 8px;
  font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 8px;
}
.hub-welcome__btn:hover { opacity: 0.9; }
.hub-welcome__btn:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 767px) {
  .hub-home { gap: 24px; padding: 4px 0 32px; }
  .hub-home__state { font-size: var(--text-h3); }
  .hub-home-card__inner { padding: 18px 20px; }
  .hub-home-card__count-num { font-size: 36px; }
  .hub-welcome { padding: 32px 16px; min-height: 300px; }
  .hub-welcome__title { font-size: var(--text-h3); }
  .hub-welcome__btn { width: 100%; }
}

/* ── Hub Tasks (hub-tasks-) — redesigned session 73 ── */

/* Three-column layout — white cards on warm canvas */
.hub-tasks { display: flex; min-height: 500px; gap: 12px; padding: 16px; }

/* ── Rail (left) ── */
.hub-tasks-rail {
  width: 220px; min-width: 220px; background: #fff;
  border: 0.5px solid #e5e0da; border-radius: 12px;
  padding: 16px 0; display: flex;
  flex-direction: column; gap: 1px; overflow: hidden;
}
.hub-tasks-rail__heading {
  display: none; font-family: var(--font-serif); font-size: 22px;
  font-weight: 400; margin: 0 0 12px; padding: 0 16px;
}
.hub-tasks-rail__section-label {
  font-size: var(--text-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--rim-text-muted); padding: 12px 16px 4px;
}
.hub-tasks-rail__section-label--templates { padding-top: 8px; }
.hub-tasks-rail__item {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 7px 16px; border: none; background: none;
  font-size: var(--text-ui); color: var(--rim-text); cursor: pointer; text-align: left;
}
.hub-tasks-rail__item:hover { background: rgba(255,255,255,0.5); }
.hub-tasks-rail__item--active { background: #fff; font-weight: 600; border-radius: 6px; margin: 0 8px; padding: 7px 8px; width: calc(100% - 16px); }
.hub-tasks-rail__item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.hub-tasks-rail__badge {
  font-size: var(--text-xxs); font-weight: 600; color: var(--rim-text-muted);
  background: rgba(0,0,0,0.06); border-radius: 8px; padding: 1px 7px; min-width: 18px;
  text-align: center;
}
.hub-tasks-rail__badge--overdue { background: #FDECEA; color: #993C1D; }

/* Rail list items */
.hub-tasks-rail__list-item {
  display: flex; align-items: center; position: relative;
}
.hub-tasks-rail__list-item--active { margin: 0 8px; }
.hub-tasks-rail__list-item--active .hub-tasks-rail__list-btn {
  background: #fff; font-weight: 600; border-radius: 6px;
}
.hub-tasks-rail__list-btn {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; border: none; background: none;
  font-size: var(--text-ui); color: var(--rim-text); cursor: pointer; text-align: left;
}
.hub-tasks-rail__list-item--active .hub-tasks-rail__list-btn { padding: 7px 8px; }
.hub-tasks-rail__list-btn:hover { background: rgba(255,255,255,0.5); }
.hub-tasks-rail__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hub-tasks-rail__menu-wrap { position: relative; }
.hub-tasks-rail__menu-btn {
  width: 24px; height: 24px; border: none; background: none; font-size: var(--text-ui);
  cursor: pointer; color: var(--rim-text-muted); border-radius: 4px; opacity: 0;
}
.hub-tasks-rail__list-item:hover .hub-tasks-rail__menu-btn { opacity: 1; }
.hub-tasks-rail__menu-btn:hover { background: rgba(0,0,0,0.06); }
.hub-tasks-rail__menu {
  position: absolute; right: 0; top: 24px; z-index: 10;
  background: #fff; border: 1px solid #ddd; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); min-width: 160px;
}
.hub-tasks-rail__menu button {
  display: block; width: 100%; padding: 8px 14px; border: none; background: none;
  text-align: left; font-size: var(--text-xs); cursor: pointer; color: var(--rim-text);
}
.hub-tasks-rail__menu button:hover { background: #f5f5f5; }

/* Templates */
.hub-tasks-rail__templates-toggle {
  border: none; background: none; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--rim-text-muted);
  cursor: pointer; text-align: left; padding: 0;
}
.hub-tasks-rail__template {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 16px; font-size: var(--text-xs); color: var(--rim-text-muted);
}
.hub-tasks-rail__template-icon { font-size: var(--text-xxs); }
.hub-tasks-rail__template-use {
  margin-left: auto; border: 1px solid #ccc; background: none; border-radius: 4px;
  padding: 2px 8px; font-size: var(--text-xxs); cursor: pointer; color: var(--rim-mid);
}
.hub-tasks-rail__template-use:hover { border-color: var(--rim-mid); }

/* New list */
.hub-tasks-rail__new { padding: 4px 12px; }
.hub-tasks-rail__new-input {
  width: 100%; padding: 6px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: var(--text-ui);
}
.hub-tasks-rail__add {
  width: 100%; padding: 8px 16px; border: none; background: none;
  font-size: var(--text-xs); color: var(--rim-text-muted); cursor: pointer; text-align: left;
}
.hub-tasks-rail__add:hover { color: var(--rim-text); }

/* ── Task List column (middle) ── */
.hub-tasks-list-col {
  width: 380px; min-width: 320px; background: #fff;
  border: 0.5px solid #e5e0da; border-radius: 12px;
  padding: 16px 20px; overflow: hidden; display: flex; flex-direction: column;
}
.hub-tasks-list-col__mobile-header { display: none; }
.hub-tasks-list-col__header { margin-bottom: 12px; }
.hub-tasks-list-col__title {
  font-size: 17px; font-weight: 500; color: var(--rim-text); margin: 0;
}
.hub-tasks-list-col__desc { font-size: var(--text-xs); color: var(--rim-text-muted); margin: 2px 0 0; }

/* Section labels */
.hub-tasks-section-label {
  display: flex; align-items: center; gap: 8px; padding: 12px 0 6px;
  font-size: var(--text-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--rim-text-muted);
}
.hub-tasks-section-label__rule { flex: 1; height: 1px; background: #e5e0da; }
.hub-tasks-section-label--done { opacity: 0.6; }

/* Task rows */
.hub-tasks-row {
  display: flex; align-items: flex-start; gap: 0; padding: 0;
  min-height: 48px; border-left: 2.5px solid transparent;
  transition: border-color 0.1s;
}
.hub-tasks-row--selected { border-left-color: #1D9E75; background: rgba(29,158,117,0.03); }
.hub-tasks-row--done { opacity: 0.45; }
.hub-tasks-row__left {
  display: flex; align-items: center; gap: 6px; padding: 10px 8px 10px 10px; flex-shrink: 0;
}
.hub-tasks-row__pip {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.hub-tasks-row__pip--open { background: #bbb; }
.hub-tasks-row__pip--in_progress { background: #185FA5; }
.hub-tasks-row__pip--done { background: #bbb; opacity: 0.4; }
.hub-tasks-row__check {
  width: 18px; height: 18px; min-width: 18px; border: 2px solid #ccc; border-radius: 50%;
  background: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: background 0.1s, border-color 0.1s;
}
.hub-tasks-row__check:hover { border-color: #1D9E75; }
.hub-tasks-row__check--done { background: #1D9E75; border-color: #1D9E75; }
.hub-tasks-row__body {
  flex: 1; border: none; background: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 8px 10px 0;
}
.hub-tasks-row__title { font-size: var(--text-ui); color: var(--rim-text); line-height: 1.3; }
.hub-tasks-row--done .hub-tasks-row__title { text-decoration: line-through; }
.hub-tasks-row__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hub-tasks-row__right { display: flex; align-items: center; padding: 10px 10px 10px 0; }

/* Chips */
.hub-tasks-chip {
  font-size: var(--text-xxs); padding: 1px 6px; border-radius: 3px;
  background: #f0ece8; color: var(--rim-text-muted); white-space: nowrap;
}
.hub-tasks-chip--overdue { background: #FDECEA; color: #993C1D; font-weight: 600; }
.hub-tasks-chip--soon { background: #FEF6E7; color: #854F0B; }
.hub-tasks-chip--sub { background: #E9F5F0; color: #1D9E75; }
.hub-tasks-chip--list { background: #f0ece8; }
.hub-tasks-chip--sm { font-size: 10px; padding: 0 5px; }

/* Avatar */
.hub-tasks-avatar {
  display: inline-flex; width: 24px; height: 24px; border-radius: 50%;
  background: var(--rim-mid); color: #fff; font-size: 10px; font-weight: 700;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.hub-tasks-avatar--sm { width: 20px; height: 20px; font-size: 9px; }

/* Empty state */
.hub-tasks-empty { color: var(--rim-text-muted); font-size: var(--text-ui); padding: 24px 0; }

/* Add task row */
.hub-tasks-add { display: flex; align-items: center; gap: 8px; padding: 6px 0 6px 36px; }
.hub-tasks-add__dash-check {
  width: 18px; height: 18px; min-width: 18px; border: 2px dashed #ccc; border-radius: 50%;
}
.hub-tasks-add__input {
  flex: 1; padding: 6px 0; border: none; font-size: var(--text-ui);
  color: var(--rim-text); background: none; outline: none;
}
.hub-tasks-add__input::placeholder { color: var(--rim-text-muted); }
.hub-tasks-fab { display: none; }

/* ── Detail panel (right) ── */
.hub-tasks-detail-col {
  flex: 1; min-width: 0; background: #fff;
  border: 0.5px solid #e5e0da; border-radius: 12px;
  overflow: hidden; display: none;
}
.hub-tasks-detail-col--visible { display: block; }
.hub-tasks-detail {
  padding: 24px 28px; display: flex; flex-direction: column; gap: 16px;
}
.hub-tasks-detail__mobile-header { display: none; }
.hub-tasks-detail__title {
  font-family: var(--font-serif); font-size: var(--text-h4); font-weight: 400;
  color: var(--rim-text); margin: 0; cursor: pointer; padding-top: 4px;
}
.hub-tasks-detail__title:hover { color: var(--rim-blue); }
.hub-tasks-detail__title-form { display: flex; }
.hub-tasks-detail__title-input {
  width: 100%; font-family: var(--font-serif); font-size: var(--text-h4); font-weight: 400;
  border: 1px solid var(--rim-mid); border-radius: 4px; padding: 4px 8px;
}

/* Status control */
.hub-tasks-detail__status { display: flex; gap: 4px; }
.hub-tasks-status-btn {
  padding: 5px 14px; border: 1px solid #ddd; background: #fff; border-radius: 6px;
  font-size: var(--text-xs); cursor: pointer; color: var(--rim-text-muted);
}
.hub-tasks-status-btn:hover { border-color: #bbb; }
.hub-tasks-status-btn--active.hub-tasks-status-btn--open { background: #f0ece8; color: var(--rim-text); border-color: #d5d0ca; font-weight: 600; }
.hub-tasks-status-btn--active.hub-tasks-status-btn--in_progress { background: #E6F1FB; color: #185FA5; border-color: #B5D4F4; font-weight: 600; }
.hub-tasks-status-btn--active.hub-tasks-status-btn--done { background: #E9F5F0; color: #1D9E75; border-color: #B5E0D0; font-weight: 600; }

.hub-tasks-detail__divider { height: 1px; background: #e5e0da; }

/* Fields grid */
.hub-tasks-detail__fields {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px;
}
.hub-tasks-detail__field { display: flex; flex-direction: column; gap: 4px; position: relative; }
.hub-tasks-detail__label {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--rim-text-muted);
}
.hub-tasks-detail__field-value { font-size: var(--text-ui); color: var(--rim-text); }
.hub-tasks-detail__field-muted { font-size: var(--text-ui); color: var(--rim-text-muted); }
.hub-tasks-detail__assignee-name { display: flex; align-items: center; gap: 6px; font-size: var(--text-ui); }
.hub-tasks-detail__clear {
  border: none; background: none; font-size: 16px; color: var(--rim-text-muted);
  cursor: pointer; padding: 0 4px;
}
.hub-tasks-detail__clear:hover { color: #dc2626; }
.hub-tasks-detail__assign-btn {
  border: 1px dashed #ccc; background: none; border-radius: 4px; padding: 5px 10px;
  font-size: 16px; color: var(--rim-text-muted); cursor: pointer;
}
.hub-tasks-detail__assign-btn:hover { border-color: var(--rim-mid); color: var(--rim-text); }
.hub-tasks-detail__due { display: flex; align-items: center; gap: 6px; }
.hub-tasks-detail__date-input {
  padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px;
  font-size: 16px; font-family: var(--font-sans); max-width: 160px;
}

/* Assignee dropdown */
.hub-tasks-assignee-dropdown {
  position: absolute; top: 100%; left: 0; z-index: 10;
  background: #fff; border: 1px solid #ddd; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); min-width: 220px; max-height: 200px;
  overflow-y: auto; margin-top: 4px;
}
.hub-tasks-assignee-dropdown__search {
  width: 100%; padding: 8px 10px; border: none; border-bottom: 1px solid #eee;
  font-size: 16px; outline: none;
}
.hub-tasks-assignee-dropdown__item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  border: none; background: none; cursor: pointer; font-size: var(--text-xs); text-align: left;
}
.hub-tasks-assignee-dropdown__item:hover { background: #f5f5f5; }

/* Section labels in detail */
.hub-tasks-detail__section { display: flex; flex-direction: column; gap: 8px; }
.hub-tasks-detail__section-label {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--rim-text-muted);
}
.hub-tasks-detail__body { min-height: 120px; padding: 24px; }
/* Task body editor — panel provides the visual container, editor is borderless */
.hub-tasks-detail__body .rim-prose-editor {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hub-tasks-detail__body .bn-container,
.hub-tasks-detail__body .bn-editor,
.hub-tasks-detail__body [class*="bnEditor"],
.hub-tasks-detail__body .rte-editor { border: none !important; box-shadow: none !important; background: transparent !important; }

/* Bottom two-column */
.hub-tasks-detail__bottom { display: flex; gap: 24px; }
.hub-tasks-detail__subtasks-col { flex: 1; min-width: 0; }
.hub-tasks-detail__activity-col { width: 220px; flex-shrink: 0; }

/* Subtasks */
.hub-tasks-subtasks__header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;
}
.hub-tasks-subtasks__count { font-weight: 400; color: var(--rim-text-muted); }
.hub-tasks-progress { height: 3px; background: #e5e0da; border-radius: 2px; margin-bottom: 8px; }
.hub-tasks-progress__fill { height: 100%; background: #1D9E75; border-radius: 2px; transition: width 0.3s; }
.hub-tasks-subtask { border-bottom: 1px solid #f0ece8; }
.hub-tasks-subtask__row { display: flex; align-items: center; gap: 6px; padding: 5px 0; }
.hub-tasks-subtask__check {
  width: 16px; height: 16px; min-width: 16px; border: 2px solid #ccc; border-radius: 3px;
  background: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: background 0.1s, border-color 0.1s;
}
.hub-tasks-subtask__check:hover { border-color: #1D9E75; }
.hub-tasks-subtask__check--done { background: #1D9E75; border-color: #1D9E75; }
.hub-tasks-subtask__title {
  flex: 1; border: none; background: none; cursor: pointer; text-align: left;
  font-size: var(--text-xs); color: var(--rim-text); padding: 2px 0;
}
.hub-tasks-subtask__title--done { text-decoration: line-through; opacity: 0.5; }
.hub-tasks-subtask__meta { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.hub-tasks-subtask__detail { padding: 6px 0 10px 24px; display: flex; flex-direction: column; gap: 6px; }
.hub-tasks-subtask__field { display: flex; align-items: center; gap: 8px; }
.hub-tasks-subtask__assignee { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); }
.hub-tasks-subtask__add-details {
  border: none; background: none; font-size: var(--text-label); color: var(--rim-text-muted); cursor: pointer;
}
.hub-tasks-subtask__add-details:hover { color: var(--rim-text); text-decoration: underline; }
.hub-tasks-subtask__add-inline { display: flex; }
.hub-tasks-subtask__add-input {
  padding: 3px 6px; border: none; border-bottom: 1px solid transparent;
  font-size: var(--text-label); background: none; outline: none; width: 80px;
  color: var(--rim-text-muted);
}
.hub-tasks-subtask__add-input:focus { border-bottom-color: var(--rim-mid); width: 140px; color: var(--rim-text); }
.hub-tasks-subtask__add-input::placeholder { color: var(--rim-text-muted); }
.hub-tasks-subtasks__all-done { padding: 8px 0; font-size: var(--text-xs); color: var(--rim-text); }
.hub-tasks-subtasks__done-btn {
  margin-left: 6px; padding: 3px 10px; background: #1D9E75; color: #fff;
  border: none; border-radius: 4px; font-size: var(--text-label); cursor: pointer;
}
.hub-tasks-subtasks__done-btn:hover { opacity: 0.9; }

/* Activity log */
.hub-tasks-detail__activity-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.hub-tasks-activity__item { display: flex; align-items: flex-start; gap: 8px; }
.hub-tasks-activity__text { font-size: var(--text-label); color: var(--rim-text-muted); flex: 1; line-height: 1.4; }
.hub-tasks-activity__time { font-size: var(--text-xxs); color: var(--rim-text-muted); opacity: 0.6; white-space: nowrap; }

/* Footer */
.hub-tasks-detail__footer {
  border-top: 1px solid #e5e0da; padding-top: 16px; margin-top: 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.hub-tasks-detail__footer-meta { font-size: var(--text-label); color: var(--rim-text-muted); }
.hub-tasks-detail__delete-btn {
  border: none; background: none; font-size: var(--text-xs); color: #993C1D; cursor: pointer;
}
.hub-tasks-detail__delete-btn:hover { text-decoration: underline; }
.hub-tasks-detail__delete-confirm {
  display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: #993C1D;
}
.hub-tasks-detail__delete-yes {
  padding: 4px 12px; background: #993C1D; color: #fff; border: none; border-radius: 4px;
  font-size: var(--text-xs); cursor: pointer;
}
.hub-tasks-detail__delete-no {
  border: none; background: none; font-size: var(--text-xs); color: var(--rim-text-muted); cursor: pointer;
}

/* ── Mobile (<900px) — three-screen flow ── */
@media (max-width: 899px) {
  .hub-tasks { display: block; min-height: auto; padding: 0; gap: 0; }
  .hub-tasks-rail,
  .hub-tasks-list-col,
  .hub-tasks-detail-col { display: none !important; width: 100%; min-width: unset; border: none; border-radius: 0; }

  .hub-tasks-rail--mobile-visible { display: flex !important; padding: 16px; }
  .hub-tasks-rail__heading { display: block; }
  .hub-tasks-list-col--mobile-visible { display: flex !important; padding: 16px; }
  .hub-tasks-detail-col--mobile-visible { display: block !important; }

  /* Mobile list header */
  .hub-tasks-list-col__mobile-header {
    display: flex; align-items: center; gap: 8px; padding: 0 0 12px; border-bottom: 1px solid #e5e0da; margin-bottom: 8px;
  }
  .hub-tasks-list-col__back {
    border: none; background: none; font-size: var(--text-small); color: var(--rim-mid); cursor: pointer; padding: 0;
  }
  .hub-tasks-list-col__name { font-size: 16px; font-weight: 500; color: var(--rim-text); }
  .hub-tasks-list-col__header { display: none; }

  /* Mobile detail header */
  .hub-tasks-detail__mobile-header {
    display: flex; padding: 0 0 12px; border-bottom: 1px solid #e5e0da; margin-bottom: 8px;
  }
  .hub-tasks-detail__back-mobile {
    border: none; background: none; font-size: var(--text-small); color: var(--rim-mid); cursor: pointer; padding: 0;
  }
  .hub-tasks-detail { padding: 16px; }
  .hub-tasks-detail__title { font-size: 17px; }
  .hub-tasks-detail__fields { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hub-tasks-detail__bottom { flex-direction: column; }
  .hub-tasks-detail__activity-col { width: 100%; }

  /* FAB */
  .hub-tasks-fab {
    display: flex; position: fixed; bottom: 72px; right: 20px; z-index: 50;
    width: 40px; height: 40px; border-radius: 50%; background: #1D9E75;
    color: #fff; font-size: 22px; font-weight: 300; border: none; cursor: pointer;
    align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }

  /* Touch targets */
  .hub-tasks-row { min-height: 48px; }
  .hub-tasks-row__check { width: 44px; height: 44px; min-width: 44px; padding: 13px; }
  .hub-tasks-subtask__check { width: 44px; height: 44px; min-width: 44px; padding: 14px; }
  .hub-tasks-subtask__add-input,
  .hub-tasks-add__input { font-size: 16px; }

  /* Status buttons full width on mobile */
  .hub-tasks-detail__status { width: 100%; }
  .hub-tasks-status-btn { flex: 1; text-align: center; }
}

/* ── Buttons ── */
.hub-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--rim-blue);
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: var(--text-ui);
  font-weight: 600;
  font-family: var(--font-sans);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}
.hub-btn:hover { opacity: 0.88; }
.hub-btn:disabled { opacity: 0.5; cursor: default; }
.hub-btn--outline {
  background: transparent;
  color: var(--rim-blue);
  border: 1.5px solid var(--rim-blue);
}
.hub-btn--outline:hover { background: rgba(19,82,116,0.06); opacity: 1; }
.hub-btn--ghost {
  background: transparent;
  color: var(--rim-text-muted);
  border: 1px solid var(--rim-rule);
}
.hub-btn--ghost:hover { background: var(--rim-bg-accent); opacity: 1; }
.hub-btn--sm { padding: 6px 14px; font-size: var(--text-xs); }

/* ── Form utilities ── */
.hub-form-field { margin-bottom: 16px; }
.hub-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.hub-form-row .hub-form-field { flex: 1; min-width: 160px; }
.hub-form-label {
  display: block;
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin-bottom: 6px;
  font-family: var(--font-sans);
}
.hub-form-input,
.hub-form-select,
.hub-form-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: var(--text-small);
  font-family: var(--font-sans);
  color: var(--rim-text);
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  outline: none;
}
.hub-form-input:focus,
.hub-form-select:focus,
.hub-form-textarea:focus { border-color: var(--rim-mid); }
.hub-form-textarea { resize: vertical; }
.hub-form-select--sm { width: auto; padding: 6px 10px; font-size: var(--text-ui); }
.hub-form-hint { font-size: var(--text-label); color: var(--rim-text-muted); margin: 5px 0 0; }
.hub-form-error { font-size: var(--text-xs); color: #c44; margin: 8px 0 0; }
.hub-form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }

/* ── Schedule page ── */
.hub-schedule { display: flex; flex-direction: column; gap: 16px; }
/* Manager view — grouped programs */
.hub-schedule__program {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  overflow: hidden;
}
.hub-schedule__prog-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--rim-rule);
}
.hub-schedule__prog-name { font-size: var(--text-small); font-weight: 600; margin: 0 0 2px; color: var(--rim-text); }
.hub-schedule__prog-date { font-size: var(--text-xs); color: var(--rim-text-muted); margin: 0; }
.hub-schedule__assignment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-top: 1px solid var(--rim-rule);
  flex-wrap: wrap;
}
.hub-schedule__assignment:first-of-type { border-top: none; }
.hub-schedule__host-name { font-size: var(--text-ui); font-weight: 500; color: var(--rim-text); }
.hub-schedule__session-date,
.hub-schedule__standing,
.hub-schedule__notes {
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  background: var(--rim-bg-accent);
  padding: 2px 8px;
  border-radius: 10px;
}
.hub-schedule__standing { color: var(--rim-mid); background: #e4eff5; }
/* HOST view — program cards */
.hub-schedule__card {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  padding: 18px 20px;
}
.hub-schedule__card-name { font-size: 16px; font-weight: 600; color: var(--rim-text); margin-bottom: 4px; }
.hub-schedule__card-date { font-size: var(--text-ui); color: var(--rim-text-muted); margin-bottom: 8px; }
.hub-schedule__card-account { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.hub-schedule__card-account-label { font-size: var(--text-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rim-text-muted); }
.hub-schedule__card-account-value { font-size: var(--text-ui); font-family: var(--font-mono); color: var(--rim-mid); background: #e4eff5; padding: 3px 10px; border-radius: 3px; }
.hub-schedule__join-link {
  display: inline-block;
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--rim-blue);
  text-decoration: none;
  border: 1.5px solid var(--rim-blue);
  padding: 6px 14px;
  border-radius: 3px;
  margin-top: 4px;
}
.hub-schedule__join-link:hover { background: rgba(19,82,116,0.06); }
.hub-schedule__card-notes { font-size: var(--text-xs); color: var(--rim-text-muted); margin-top: 8px; }

/* ── How to host ── */
.hub-how-to {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--rim-rule);
}
.hub-how-to__title { font-size: 16px; font-weight: 400; font-family: var(--font-serif); margin-bottom: 16px; color: var(--rim-text); }
.hub-steps { padding-left: 22px; margin: 0 0 16px; }
.hub-steps li { font-size: var(--text-small); line-height: 1.7; margin-bottom: 10px; color: var(--rim-text); }
.hub-how-to__note { font-size: var(--text-xs); color: var(--rim-text-muted); line-height: 1.6; }

/* ── Sub board ── */
.hub-intro { font-size: var(--text-small); color: var(--rim-text-muted); margin: 0 0 28px; line-height: 1.6; }
.hub-subboard__header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.hub-subboard__title { font-size: var(--text-h4); font-weight: 400; font-family: var(--font-serif); color: var(--rim-text); margin: 0 0 4px; }
.hub-subboard__desc { font-size: var(--text-ui); color: var(--rim-text-muted); margin: 0; line-height: 1.5; }
.hub-sub-req-trigger { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hub-sub-req__success { font-size: var(--text-xs); color: #2d6a2d; }
.hub-subboard__empty { color: var(--rim-text-muted); font-size: var(--text-small); }
.hub-subboard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hub-subboard__item {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  padding: 16px 18px;
}
.hub-subboard__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.hub-subboard__program { font-size: var(--text-small); font-weight: 600; color: var(--rim-text); }
.hub-subboard__date { font-size: var(--text-xs); color: var(--rim-text-muted); background: var(--rim-bg-accent); padding: 2px 8px; border-radius: 10px; }
.hub-subboard__requester { font-size: var(--text-ui); color: var(--rim-text); margin: 0 0 6px; }
.hub-subboard__posted { font-size: var(--text-xs); color: var(--rim-text-muted); }
.hub-subboard__message { font-size: var(--text-ui); color: var(--rim-text-muted); font-style: italic; margin: 4px 0 10px; }
.hub-subboard__claim-form { margin-top: 12px; }
.hub-subboard__own-badge { font-size: var(--text-label); color: var(--rim-text-muted); background: var(--rim-bg-accent); padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 8px; }
/* Sub request form */
.hub-sub-req-form,
.hub-thread-form,
.hub-assign-form {
  background: var(--rim-bg-accent);
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 24px;
}
.hub-sub-req-form__title,
.hub-thread-form__title,
.hub-assign-form__title {
  font-size: var(--text-ui);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rim-mid);
  margin: 0 0 16px;
}

/* ── Thread list ── */
.hub-threads { }
.hub-threads__controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.hub-threads__filters { display: flex; gap: 6px; flex-wrap: wrap; }
.hub-filter-btn {
  padding: 5px 12px;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  color: var(--rim-text-muted);
  background: transparent;
  border: 1px solid var(--rim-rule);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.hub-filter-btn:hover { border-color: var(--rim-mid); color: var(--rim-text); }
.hub-filter-btn--active { background: var(--rim-blue); border-color: var(--rim-blue); color: #fff; }
.hub-threads__legend { font-size: var(--text-xs); color: var(--rim-text-muted); margin: 12px 0 20px; line-height: 1.6; }
.hub-threads__empty { color: var(--rim-text-muted); font-size: var(--text-small); }
.hub-threads__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.hub-thread-card {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  padding: 14px 18px;
}
.hub-thread-card + .hub-thread-card { border-top: none; border-radius: 0; }
.hub-thread-card:first-child { border-radius: 4px 4px 0 0; }
.hub-thread-card:last-child { border-radius: 0 0 4px 4px; }
.hub-thread-card:only-child { border-radius: 4px; }
.hub-thread-card__top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.hub-thread-card__cat {
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
}
.hub-thread-card__cat--operational { background: #e8f0f5; color: var(--rim-mid); }
.hub-thread-card__cat--contemplation { background: #f0ede8; color: #7a5c3a; }
.hub-thread-card__status { font-size: var(--text-xxs); color: var(--rim-text-muted); background: var(--rim-bg-accent); padding: 2px 8px; border-radius: 10px; }
.hub-thread-card__title {
  display: block;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--font-serif);
  color: var(--rim-text);
  text-decoration: none;
  margin-bottom: 4px;
  line-height: 1.4;
}
.hub-thread-card__title:hover { color: var(--rim-blue); }
.hub-thread-card__meta { font-size: var(--text-xs); color: var(--rim-text-muted); margin: 0; }

/* ── Thread detail ── */
.hub-thread-detail { }
.hub-thread-detail__header { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--rim-rule); }
.hub-thread-detail__labels { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.hub-thread-detail__closed { font-size: var(--text-label); color: var(--rim-text-muted); background: var(--rim-bg-accent); padding: 2px 8px; border-radius: 10px; }
.hub-thread-detail__title { font-size: var(--text-h3); font-weight: 400; font-family: var(--font-serif); color: var(--rim-text); margin: 0 0 8px; line-height: 1.3; }
.hub-thread-detail__meta { font-size: var(--text-xs); color: var(--rim-text-muted); margin: 0; }
.hub-thread-detail__you { font-size: var(--text-label); color: var(--rim-text-muted); font-weight: 400; font-style: italic; }
.hub-thread-detail__body { font-size: 16px; line-height: 1.75; color: var(--rim-text); margin-bottom: 32px; }
.hub-thread-detail__body p { margin: 0 0 12px; }
.hub-thread-detail__replies { margin-bottom: 32px; }
.hub-thread-detail__reply-count { font-size: var(--text-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rim-text-muted); margin: 0 0 12px; }
.hub-reply {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  margin-bottom: 8px;
}
.hub-reply--own { background: #f4f7fa; border-color: #c4d9e8; }
.hub-reply__meta { font-size: var(--text-xs); color: var(--rim-text-muted); margin: 0 0 8px; }
.hub-reply__body { font-size: var(--text-small); line-height: 1.7; color: var(--rim-text); }
.hub-reply__body p { margin: 0 0 8px; }
.hub-thread-detail__reply-form { margin-top: 8px; }
.hub-thread-detail__reply-label { font-size: var(--text-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rim-text-muted); margin: 0 0 8px; }
.hub-thread-detail__closed-note { font-size: var(--text-ui); color: var(--rim-text-muted); font-style: italic; margin-top: 24px; padding: 12px 16px; background: var(--rim-bg-accent); border-radius: 4px; }
.hub-thread-detail__manager-controls { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rim-rule); }
.hub-thread-detail__manager-label { font-size: var(--text-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rim-text-muted); margin: 0 0 12px; }

/* ── Assignment manager ── */
.hub-assign-mgr { }
.hub-assign-mgr__controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.hub-assign-mgr__filters { display: flex; gap: 8px; align-items: center; }
.hub-assign-mgr__empty { color: var(--rim-text-muted); font-size: var(--text-small); margin-top: 16px; }
.hub-assign-group { margin-bottom: 20px; }
.hub-assign-group__name { font-size: var(--text-small); font-weight: 600; color: var(--rim-text); margin: 0 0 8px; }
.hub-assign-group__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.hub-assign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
}
.hub-assign-row + .hub-assign-row { border-top: none; border-radius: 0; }
.hub-assign-row:first-child { border-radius: 4px 4px 0 0; }
.hub-assign-row:last-child { border-radius: 0 0 4px 4px; }
.hub-assign-row:only-child { border-radius: 4px; }
.hub-assign-row__info { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hub-assign-row__host { font-size: var(--text-ui); font-weight: 500; color: var(--rim-text); }
.hub-assign-row__date { font-size: var(--text-label); color: var(--rim-text-muted); background: var(--rim-bg-accent); padding: 2px 8px; border-radius: 10px; }
.hub-assign-row__standing { font-size: var(--text-label); color: var(--rim-mid); background: #e4eff5; padding: 2px 8px; border-radius: 10px; }
.hub-assign-row__notes { font-size: var(--text-label); color: var(--rim-text-muted); font-style: italic; }
.hub-assign-row__remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #aaa;
  font-size: var(--text-ui);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  font-family: var(--font-sans);
}
.hub-assign-row__remove:hover { background: #fdf0f0; color: #c44; }

/* ── Program cards (Schedule tab) ── */
.hub-program-cards { display: flex; flex-direction: column; gap: 8px; }
.hub-program-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.hub-program-card:hover { border-color: var(--rim-mid); background: #fafaf9; }
.hub-program-card__main { display: flex; flex-direction: column; gap: 4px; }
.hub-program-card__name { font-size: 17px; font-weight: 400; font-family: var(--font-serif); color: var(--rim-text); margin: 0; line-height: 1.3; }
.hub-program-card__meta { font-size: var(--text-xs); color: var(--rim-text-muted); margin: 0; }
.hub-program-card__arrow { font-size: 16px; color: var(--rim-text-muted); flex-shrink: 0; }

/* ── Program detail page ── */
.hub-back-link { display: inline-block; font-size: var(--text-xs); color: var(--rim-text-muted); text-decoration: none; margin-bottom: 20px; }
.hub-back-link:hover { color: var(--rim-blue); }
.hub-program-detail { }
.hub-program-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rim-rule);
}
.hub-program-detail__name { font-size: var(--text-h3); font-weight: 400; font-family: var(--font-serif); color: var(--rim-text); margin: 0 0 6px; line-height: 1.3; }
.hub-program-detail__date { font-size: var(--text-small); color: var(--rim-text-muted); margin: 0; }
.hub-program-detail__account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--rim-bg-accent);
  border-radius: 4px;
  margin-bottom: 24px;
  font-size: var(--text-ui);
}
.hub-program-detail__account-label { color: var(--rim-text-muted); }
.hub-program-detail__account-value { font-weight: 500; color: var(--rim-text); font-family: var(--font-mono); font-size: var(--text-xs); }
.hub-program-detail__section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hub-program-detail__section-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rim-text-muted); margin: 0; }

/* ── Program sessions (HOST view on detail page) ── */
.hub-program-actions { margin-top: 24px; }
.hub-program-actions__success { font-size: var(--text-ui); color: #2d6a2d; background: #f0f7f0; border: 1px solid #c3dfc3; border-radius: 4px; padding: 10px 14px; margin-bottom: 16px; }
.hub-program-sessions { display: flex; flex-direction: column; gap: 1px; margin-bottom: 32px; }
.hub-program-session {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hub-program-session__info { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hub-program-session__date { font-size: var(--text-ui); font-weight: 500; color: var(--rim-text); }
.hub-program-session__standing { font-size: var(--text-xs); color: var(--rim-mid); background: #e4eff5; padding: 2px 10px; border-radius: 10px; }
.hub-program-session__notes { font-size: var(--text-xs); color: var(--rim-text-muted); font-style: italic; }
.hub-program-session__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Inline expand forms within a session */
.hub-program-inline-form { padding: 12px 14px; background: var(--rim-bg-accent); border-radius: 4px; }
.hub-program-inline-form--warn { background: #fff8ec; border: 1px solid #e8d9b8; }
.hub-program-inline-form__label { font-size: var(--text-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rim-text-muted); margin: 0 0 8px; }
.hub-program-inline-form__warn-text { font-size: var(--text-ui); color: var(--rim-text); margin: 0 0 12px; }

/* Danger button variant */
.hub-btn--danger { background: #b33; border-color: #b33; color: #fff; }
.hub-btn--danger:hover { background: #922; border-color: #922; }

/* ── Assign manager — two-stage program-first layout ── */
.hub-assign-program-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.hub-assign-program-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.hub-assign-program-row:hover { border-color: var(--rim-mid); background: #fafaf9; }
.hub-assign-program-row--active { border-color: var(--rim-blue); background: #f4f8fb; }
.hub-assign-program-row__name { font-size: var(--text-small); font-weight: 500; color: var(--rim-text); }
.hub-assign-program-row__count { font-size: var(--text-label); color: var(--rim-text-muted); background: var(--rim-bg-accent); padding: 2px 10px; border-radius: 10px; }
.hub-assign-program-panel {
  border: 1px solid var(--rim-blue);
  border-radius: 4px;
  padding: 20px;
  margin-top: 4px;
  background: #f4f8fb;
}
.hub-assign-program-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hub-assign-program-panel__name { font-size: 16px; font-weight: 600; color: var(--rim-text); margin: 0; }
.hub-assign-conflict { font-size: var(--text-xs); color: #7a4f00; background: #fff8ec; border: 1px solid #e8d9b8; border-radius: 4px; padding: 8px 12px; margin-bottom: 14px; }
.hub-assign-conflict--inline { font-size: var(--text-xs); color: #2d6a2d; background: #f0f7f0; border: 1px solid #c3dfc3; border-radius: 4px; padding: 6px 12px; margin-bottom: 14px; }

/* ─── Hub card unread indicator ─── */
.db2-hub-card { position: relative; }
.db2-hub-card__unread {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--rim-teal, #3d7a66);
  color: #fff;
  font-size: var(--text-xxs);
  font-family: var(--font-sans);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

/* ─── Site banner strip ─── */
.sb-strip {
  background: var(--color-alert-bg, #FDF6EC);
  border-bottom: 1px solid var(--color-alert-border, #F0C98A);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-ui);
  font-family: var(--font-sans);
  color: var(--rim-text);
  margin-bottom: 16px;
  border-radius: 8px;
}
.sb-strip__body { flex: 1; }
.sb-strip__dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rim-text-muted);
  font-size: var(--text-body);
  line-height: 1;
  padding: 4px;
  flex-shrink: 0;
}
.sb-strip__dismiss:hover { color: var(--rim-text); }

/* ── Responsive ── */
@media (max-width: 600px) {
  .hub-main__content { padding: 16px; }
  .hub-form-row { flex-direction: column; }
  .hub-section-header { flex-direction: column; align-items: flex-start; }
  .hub-subboard__header { flex-direction: column; align-items: flex-start; }
  .hub-threads__controls { flex-direction: column; align-items: flex-start; }
  .hub-assign-mgr__controls { flex-direction: column; align-items: flex-start; }
  .hub-thread-detail__title { font-size: var(--text-h4); }
  .hub-program-detail__header { flex-direction: column; align-items: flex-start; }
  .hub-program-detail__name { font-size: var(--text-h4); }
  .hub-program-session__actions { flex-direction: column; align-items: flex-start; }
}

/* ══ Hub shared modal/toast (kept from session-centric redesign) ══ */

/* Claim modal */
.hub-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.hub-modal { background: #fff; border-radius: 8px; padding: 28px 32px; max-width: 420px; width: 100%; }
.hub-modal__title { font-size: var(--text-body); font-weight: 400; font-family: var(--font-serif); color: var(--rim-text); margin: 0 0 8px; }
.hub-modal__body { font-size: var(--text-small); color: var(--rim-text); line-height: 1.6; margin: 0 0 20px; }
.hub-modal__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Toast */
.hub-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1B3A5C;
  color: #fff;
  font-size: var(--text-ui);
  padding: 10px 20px;
  border-radius: 20px;
  z-index: 300;
  pointer-events: none;
  white-space: nowrap;
}
.hub-toast--error { background: #B84040; }

/* ── Schedule space — hub-cal- ── */
.hub-schedule-space { }
.hub-schedule-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.hub-schedule-nav__month { font-size: var(--text-body); font-weight: 400; font-family: var(--font-serif); color: var(--rim-text); margin: 0; min-width: 160px; }
.hub-schedule-nav__btn {
  background: none;
  border: 1px solid var(--rim-rule);
  color: var(--rim-text);
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: var(--text-ui);
  font-family: var(--font-sans);
  line-height: 1;
}
.hub-schedule-nav__btn:hover { border-color: var(--rim-mid); }
.hub-schedule-nav__view-toggle { margin-left: auto; display: flex; gap: 0; border: 1px solid var(--rim-rule); border-radius: 4px; overflow: hidden; }
.hub-schedule-nav__view-btn { background: none; border: none; padding: 5px 12px; font-size: var(--text-xs); color: var(--rim-text-muted); cursor: pointer; font-family: var(--font-sans); }
.hub-schedule-nav__view-btn--active { background: var(--rim-blue); color: #fff; }

/* (superseded by hub-cal block further down in file) */
.hub-cal__date--today { color: var(--rim-blue); font-weight: 700; }

/* Calendar event pill */
.hub-cal__event {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xxs);
  padding: 2px 5px;
  border-radius: 3px;
  margin-bottom: 2px;
  cursor: pointer;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #e4eff5;
  color: var(--rim-mid);
  border: none;
  font-family: var(--font-sans);
  width: 100%;
  text-align: left;
}
.hub-cal__event--unclaimed { background: #fff8ec; color: #7a4f00; }
.hub-cal__event--sub-needed { background: #fdf0f0; color: #B84040; }
.hub-cal__event--claimed { background: #f0f7f0; color: #2d6a2d; }
.hub-cal__checkbox { flex-shrink: 0; width: 12px; height: 12px; accent-color: var(--rim-blue); }

/* List view */
.hub-list { display: flex; flex-direction: column; gap: 4px; }
.hub-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-left: 3px solid #2d6a2d;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.12s;
}
.hub-list-item--unclaimed { border-left-color: #777; }
.hub-list-item--sub-needed { border-left-color: #B84040; }
.hub-list-item:hover { border-color: var(--rim-mid); border-left-color: inherit; }
.hub-list-item__check { flex-shrink: 0; margin-top: 3px; }
.hub-list-item__main { flex: 1; }
.hub-list-item__date { font-size: var(--text-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rim-text-muted); margin: 0 0 2px; }
.hub-list-item__name { font-size: var(--text-small); font-weight: 600; color: var(--rim-text); margin: 0 0 2px; }
.hub-list-item__host { font-size: var(--text-xs); color: var(--rim-text-muted); margin: 0; }

/* Status pill */
.hub-pill { display: inline-block; font-size: var(--text-xxs); font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.hub-pill--mine    { background: #dbe8f2; color: #1e4460; }
.hub-pill--covered { background: #dceede; color: #1e4a26; }
.hub-pill--needs   { background: #fbe0d6; color: #6e2410; border: 1px solid #e8c0b0; }
/* legacy aliases */
.hub-pill--unclaimed { background: #fdf0d4; color: #b07a18; border: 1px solid #edd899; }
.hub-pill--claimed { background: #d4e6cc; color: #3a6b2a; }
.hub-pill--sub-needed { background: #fdf0d4; color: #b07a18; }

/* Session panel (right slide-in) */
.hub-panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 100; }
.hub-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 95vw;
  background: #fff;
  z-index: 101;
  overflow-y: auto;
  padding: 28px 24px 48px;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}
.hub-panel__close {
  background: none;
  border: none;
  font-size: var(--text-body);
  color: var(--rim-text-muted);
  cursor: pointer;
  float: right;
  padding: 0;
  line-height: 1;
  margin-top: -2px;
  font-family: var(--font-sans);
}
.hub-panel__close:hover { color: var(--rim-text); }
/* (slide-in panel detail overrides removed — detail is now always inline) */
.hub-panel__program { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rim-text-muted); margin: 0 0 6px; }
.hub-panel__date { font-size: var(--text-h4); font-weight: 400; font-family: var(--font-serif); color: var(--rim-text); margin: 0 0 16px; }
.hub-panel__status { margin-bottom: 16px; }
.hub-panel__host-card { display: flex; align-items: center; gap: 10px; background: var(--rim-bg-accent); border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; }
.hub-panel__host-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--rim-mid); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--text-ui); font-weight: 600; flex-shrink: 0; }
.hub-panel__host-name { font-size: var(--text-small); font-weight: 600; color: var(--rim-text); margin: 0 0 2px; }
.hub-panel__host-label { font-size: var(--text-label); color: var(--rim-text-muted); margin: 0; }
.hub-panel__meet { display: flex; align-items: center; gap: 10px; font-size: var(--text-ui); margin-bottom: 16px; flex-wrap: wrap; }
.hub-panel__meet-label { color: var(--rim-text-muted); font-size: var(--text-xs); }
.hub-panel__divider { border: none; border-top: 1px solid var(--rim-rule); margin: 20px 0; }
.hub-panel__actions-label { font-size: var(--text-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rim-text-muted); margin: 0 0 12px; }
.hub-panel__actions { display: flex; flex-direction: column; gap: 8px; }
.hub-panel__inline-form { background: var(--rim-bg-accent); border-radius: 6px; padding: 14px; margin-top: 8px; }
.hub-panel__inline-form-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rim-text-muted); margin: 0 0 10px; }

/* Multi-select footer */
.hub-multi-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1B3A5C;
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 50;
  flex-wrap: wrap;
}
.hub-multi-footer__count { font-size: var(--text-small); font-weight: 600; }
.hub-multi-footer__actions { display: flex; gap: 10px; }
.hub-multi-footer__btn {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 7px 16px;
  border-radius: 4px;
  font-size: var(--text-ui);
  cursor: pointer;
  font-family: var(--font-sans);
}
.hub-multi-footer__btn:hover { background: rgba(255,255,255,0.3); }
.hub-multi-footer__btn--primary { background: rgba(255,255,255,0.9); color: #1B3A5C; }
.hub-multi-footer__btn--primary:hover { background: #fff; }
.hub-multi-footer__clear { background: none; border: none; color: rgba(255,255,255,0.6); font-size: var(--text-xs); cursor: pointer; font-family: var(--font-sans); padding: 0; }

/* Planning nudge banner */
.hub-nudge { background: #f0f7f0; border: 1px solid #c3dfc3; border-radius: 6px; padding: 14px 18px; margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hub-nudge__text { font-size: var(--text-ui); color: #2d6a2d; }
.hub-nudge__dismiss { background: none; border: none; font-size: var(--text-label); color: #2d6a2d; cursor: pointer; text-decoration: underline; font-family: var(--font-sans); }

/* (dead conversation rooms CSS removed — session 76) */

/* ── Reply reactions ── */
.hub-reply__footer { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.hub-reply__edited { font-size: var(--text-xxs); color: var(--rim-text-muted); }
.hub-reply__edit-btn { background: none; border: none; font-size: var(--text-label); color: var(--rim-text-muted); cursor: pointer; padding: 0; font-family: var(--font-sans); text-decoration: underline; }
.hub-reply__edit-btn:hover { color: var(--rim-text); }
.hub-reply-reactions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hub-reply-reactions__existing { display: flex; gap: 4px; flex-wrap: wrap; }
.hub-reply-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--rim-bg-accent);
  border: 1px solid var(--rim-rule);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: var(--text-xs);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color 0.12s, background 0.12s;
}
.hub-reply-reaction-pill:hover { border-color: var(--rim-mid); background: #eee; }
.hub-reply-reactions__add { position: relative; }
.hub-reply-reactions__add-btn {
  background: none;
  border: 1px solid var(--rim-rule);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  cursor: pointer;
  font-family: var(--font-sans);
}
.hub-reply-reactions__add-btn:hover { border-color: var(--rim-mid); color: var(--rim-text); }
.hub-reply-reactions__picker {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 10;
}
.hub-reply-reactions__picker-btn {
  background: none;
  border: none;
  font-size: var(--text-h4);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: background 0.1s;
}
.hub-reply-reactions__picker-btn:hover { background: var(--rim-bg-accent); }

/* ── Manage space ── */
.hub-manage { }
.hub-manage__toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.hub-manage-add-form { background: var(--rim-bg-accent); border: 1px solid var(--rim-rule); border-radius: 6px; padding: 20px; margin-bottom: 8px; }
.hub-manage-add-form__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hub-manage-add-form__title { font-size: var(--text-ui); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rim-text-muted); }

/* (dead responsive rules for removed classes cleaned up — session 76) */

/* ═══════════════════════════════════════════════════════════════════════════
   HUB — CORRECT CLASS NAMES (matches HubScheduleClient, HubConversationsClient, etc.)
   Added to reconcile component class names with CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Button variants used by hub components ── */
.hub-btn--primary { background: #6a8fa0; color: #fff; border-color: #6a8fa0; }
.hub-btn--primary:hover { background: #4d7285; border-color: #4d7285; opacity: 1; }
.hub-btn--claim { background: #c0472a; color: #fff; border-color: #c0472a; }
.hub-btn--claim:hover { background: #a83a20; border-color: #a83a20; opacity: 1; }
.hub-btn--full { width: 100%; justify-content: center; }
.hub-btn--secondary { background: transparent; color: var(--rim-text); border: 1.5px solid var(--rim-rule); }
.hub-btn--secondary:hover { background: var(--rim-bg-accent); opacity: 1; }

/* ── Dot status indicators ── */
.hub-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hub-dot--claimed    { background: #3d8a4d; }
.hub-dot--unclaimed  { background: #c44a20; }
.hub-dot--sub_needed { background: #c44a20; }

/* ── Status pills (underscore variant) ── */
.hub-pill--sub_needed { background: #fdf0d4; color: #b07a18; border: 1px solid #edd899; }

/* ── Schedule: Row 1 — filter pills + view toggle ── */
.hub-schedule__filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

/* ── Schedule: Month navigation ── */
.hub-schedule__month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 12px;
}
.hub-schedule__nav-btn {
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: var(--text-h4);
  color: var(--rim-text-muted);
  cursor: pointer;
  line-height: 1;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.hub-schedule__nav-btn:hover { background: #eeece8; color: var(--rim-text); }
/* Center: month label + optional Today pill */
.hub-schedule__month-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hub-schedule__month {
  font-size: var(--text-h4);
  font-weight: 400;
  font-family: var(--font-serif);
  color: #2d3f47;
  margin: 0;
  text-align: center;
}
/* "Today" pill — only visible when not on current month */
.hub-schedule__today-btn {
  background: transparent;
  border: 1px solid var(--rim-rule);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--text-xxs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color 0.12s, color 0.12s;
}
.hub-schedule__today-btn:hover { border-color: var(--rim-mid); color: var(--rim-blue); }

/* ── Legend (below calendar) ── */
.hub-schedule__legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--text-label);
  margin-top: 10px;
  margin-bottom: 22px;
  padding: 0;
}
.hub-schedule__legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-label);
  color: #8a8680;
}
.hub-schedule__view-toggle {
  display: flex;
  gap: 3px;
  background: #eceae5;
  border-radius: 6px;
  padding: 3px;
  border: 1px solid #ddd;
}
.hub-schedule__view-btn {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #8a8680;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  line-height: 1;
}
.hub-schedule__view-btn--active {
  background: #fff;
  color: #1e2220;
}

/* Filter pills */
.hub-schedule__filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hub-schedule__filter-btn {
  background: transparent;
  border: 1.5px solid #ddd;
  border-radius: 20px;
  padding: 7px 16px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #8a8680;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: all 0.12s;
  white-space: nowrap;
}
.hub-schedule__filter-btn:hover {
  border-color: #6a8fa0;
  color: #4a4740;
}
.hub-schedule__filter-btn--active {
  background: #2d3f47;
  border-color: #2d3f47;
  color: #fff;
}

/* ── Planning nudge banner ── */
.hub-schedule__nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #eef4fa;
  border: 1.5px solid #90b8d8;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: var(--text-ui);
  color: var(--rim-text);
  flex-wrap: wrap;
}
.hub-schedule__nudge-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.hub-schedule__nudge-dismiss {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--rim-text-muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.hub-schedule__loading {
  color: var(--rim-text-muted);
  font-size: var(--text-ui);
  padding: 24px 0;
}

/* ── Calendar grid (matching HubScheduleClient class names) ── */

/* Calendar — single-card layout matching spec */
.hub-cal-wrap { overflow-x: auto; }
.hub-cal-wrap > * { min-width: 560px; }

/* The card wrapper */
.hub-cal {
  display: block;
  width: 100%;
  min-width: 520px;
  background: #fff;
  border: 1px solid #e8e5e0;
  border-radius: 12px;
  overflow: hidden;
}

/* Unified grid — headers + cells in one grid for guaranteed alignment */
.hub-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.hub-cal__day-label {
  padding: 10px 9px;
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #a09a94;
  text-align: left;
  border-bottom: 1px solid #e8e5e0;
}
.hub-cal__cell {
  min-height: 88px;
  background: #fff;
  border: 1px solid #f0ede8;
  padding: 8px 9px;
  vertical-align: top;
}
.hub-cal__cell--empty { background: #fdfcfb; }
.hub-cal__cell--today { background: rgba(19, 82, 116, 0.035); }

/* Day number */
.hub-cal__day-num {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #a09a94;
  margin-bottom: 5px;
  display: block;
}
/* Today: filled circle in brand blue */
.hub-cal__day-num--today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--rim-blue);
  color: #fff;
  border-radius: 50%;
  font-size: var(--text-label);
  font-weight: 700;
  margin-bottom: 5px;
}

/* Event chips — left-stripe style (compact for secondary calendar view) */
.hub-cal__event {
  position: relative;
  border-radius: 5px;
  padding: 3px 7px 3px 9px;
  margin-bottom: 3px;
  cursor: pointer;
  border: none;
  border-left: 3.5px solid;
  font-size: var(--text-xxs);
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  transition: background 0.12s;
}
.hub-cal__event:hover { filter: brightness(0.96); }
.hub-cal__event--mine     { background: #dbe8f2; border-color: #4a7d96; color: #1e4460; }
.hub-cal__event--covered  { background: #dceede; border-color: #3d8a4d; color: #1e4a26; }
.hub-cal__event--needs    { background: #fbe0d6; border-color: #c44a20; color: #6e2410; }
.hub-cal__event--selected { background: #2d3f47 !important; border-left-color: #2d3f47 !important; color: #fff !important; }

/* Checkbox: hidden by default, visible on hover */
.hub-cal__check {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 10px;
  height: 10px;
  cursor: pointer;
  accent-color: #2d3f47;
  opacity: 0;
}
.hub-cal__event:hover .hub-cal__check { opacity: 1; }

/* Event label: single-line clamp on desktop */
.hub-cal__event-label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 14px;
}

/* "+N more" overflow chip */
.hub-cal__more {
  font-size: var(--text-xxs);
  font-weight: 600;
  color: #a09a94;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  transition: background 0.1s, color 0.1s;
}
.hub-cal__more:hover { background: #f0ede8; color: var(--rim-text); }

/* ── List view (matching HubScheduleClient class names) ── */
.hub-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hub-list__row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-left: 4px solid var(--rim-rule);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.hub-list__row:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.hub-list__row--claimed    { border-left-color: #3d8a4d; }
.hub-list__row--unclaimed  { border-left-color: #c44a20; }
.hub-list__row--sub_needed { border-left-color: #c44a20; }
.hub-list__date-block {
  min-width: 38px;
  text-align: center;
  flex-shrink: 0;
}
.hub-list__month {
  font-size: 10px;
  color: var(--rim-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hub-list__day {
  font-size: var(--text-h4);
  font-weight: 700;
  color: #1B3A5C;
  line-height: 1;
}
.hub-list__standing {
  font-size: 16px;
  color: var(--rim-text-muted);
}
.hub-list__info { flex: 1; min-width: 0; }
.hub-list__name { font-size: var(--text-ui); font-weight: 600; color: var(--rim-text); margin-bottom: 2px; }
.hub-list__host { font-size: var(--text-label); color: var(--rim-text-muted); }

/* ── Session panel (matching HubScheduleClient class names) ── */
.hub-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 98;
}
.hub-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.hub-panel__heading {
  font-family: var(--font-serif);
  font-size: var(--text-small);
  color: #1B3A5C;
  font-weight: 700;
  margin: 0;
}
.hub-panel__title {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  color: #1B3A5C;
  font-weight: 700;
  margin: 10px 0 3px;
}
.hub-panel-info {
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: var(--text-xs);
}
.hub-panel-info--teal { background: #E0F0ED; }
.hub-panel-info--amber { background: #FDF3E3; }
.hub-panel-info--red { background: #F5E0E0; }
.hub-panel-info__label { font-weight: 700; color: var(--rim-text-muted); margin-bottom: 3px; font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.08em; }
.hub-panel-info__value { color: var(--rim-text); }
.hub-panel-info__msg { color: #7a2020; font-style: italic; margin-bottom: 10px; }
.hub-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}
.hub-panel__remove-link {
  background: none;
  border: none;
  color: var(--rim-text-muted);
  font-size: var(--text-label);
  cursor: pointer;
  text-decoration: underline;
  text-align: center;
  font-family: var(--font-sans);
  padding: 0;
}
.hub-panel__remove-link:hover { color: var(--rim-text); }
.hub-panel__form { margin-top: 8px; }
.hub-panel__form-label { font-size: var(--text-label); font-weight: 600; color: var(--rim-text); margin-bottom: 6px; }
.hub-panel__warn {
  background: #F5E0E0;
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 8px;
}
.hub-panel__warn-title { font-size: var(--text-xs); color: #B84040; font-weight: 700; margin-bottom: 6px; }
.hub-panel__warn-body { font-size: var(--text-label); color: #7a2020; margin-bottom: 12px; }
.hub-panel__meet {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rim-rule);
}
.hub-panel__meet-label {
  font-size: var(--text-xxs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rim-text-muted);
  margin-bottom: 5px;
}
.hub-panel__meet-link {
  font-size: var(--text-xs);
  color: #2A7B6F;
  font-weight: 600;
  text-decoration: none;
}
.hub-panel__meet-link:hover { text-decoration: underline; }
.hub-panel__meet-account {
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  margin-top: 5px;
}

/* ── Multi-select footer (matching component class names) ── */
.hub-multi-footer__claim-btn {
  background: #2A7B6F;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 18px;
  font-weight: 700;
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  white-space: nowrap;
}
.hub-multi-footer__clear-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
  border-radius: 20px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: var(--text-label);
  font-family: var(--font-sans);
  white-space: nowrap;
}

/* ── Claim confirmation modal (matching component class names) ── */
.hub-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.hub-modal__session-list {
  margin-bottom: 20px;
  border-top: 1px solid var(--rim-rule);
}
.hub-modal__session-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rim-rule);
}
.hub-modal__session-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--rim-text);
}
.hub-modal__session-date {
  font-size: var(--text-label);
  color: var(--rim-text-muted);
}
.hub-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Empty state ── */
.hub-empty {
  color: var(--rim-text-muted);
  font-size: var(--text-small);
  padding: 24px 0;
}

/* ── Conversations space (corrected) ── */
.hub-conversations__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 5px;
}
.hub-conversations__sub {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 0 0 22px;
}

/* (dead conversation rooms/thread card/avatar/empty state CSS removed — session 76) */

/* ── Responsive additions for new classes ── */
/* (old 640px responsive block removed — breakpoint now 560px, defined below mini-cal) */

/* (hub-cal override removed — display:block set in main definition above) */

/* ── Add Session Form (manager inline form on Schedule) ───────────────────── */
.hub-add-session-form {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.hub-add-session-form__title {
  font-family: var(--font-serif);
  font-size: var(--text-small);
  color: var(--rim-text);
  margin-bottom: 14px;
}
.hub-add-session-form__row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.hub-add-session-form__row .hub-form-field {
  flex: 1;
}
.hub-add-session-form__fields .hub-form-actions {
  margin-top: 14px;
}
@media (max-width: 600px) {
  .hub-add-session-form__row { flex-direction: column; gap: 10px; }
}

/* ============================================================
   HUB SYSTEM — Generic Hubs (/account/hub/[slug]/*)
   Prefixes: hub-hdr, ann-, doc-, cv-, mem-, db2-, today-
   ============================================================ */

/* ── Hub content wrapper (legacy — kept for sub-page compatibility) ── */
.hub-content--wide { margin-top: 0; }

/* ── Generic .btn (used across hub pages where hub-btn isn't applied) ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #6a8fa0;
  color: #fff;
  border: 1.5px solid #6a8fa0;
  padding: 9px 18px;
  font-size: var(--text-ui);
  font-weight: 600;
  font-family: var(--font-sans);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: opacity 0.15s;
}
.btn:hover { opacity: 0.88; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn--sm { padding: 6px 14px; font-size: var(--text-xs); }
.btn--xs { padding: 4px 8px; font-size: var(--text-label); }
.btn--ghost {
  background: transparent;
  color: #777;
  border: 1px solid #ddd;
}
.btn--ghost:hover { background: var(--rim-bg-accent); opacity: 1; }

/* ── Shared hub action buttons ────────────────────────────────── */
.hub-action-btn { padding: 5px 12px; border: 1.5px solid var(--rim-rule); border-radius: 5px; background: #fff; font-size: var(--text-xs); font-weight: 500; color: var(--rim-text); cursor: pointer; white-space: nowrap; }
.hub-action-btn:hover { border-color: var(--rim-mid); color: var(--rim-mid); }
.hub-action-btn--del { border-color: #e0b4b4; color: #c44; }
.hub-action-btn--del:hover { background: #fff0f0; }

/* ── Documents (hub-doc-) ─────────────────────────────────────── */
.hub-doc-container { max-width: 680px; margin: 0 auto; }
.hub-doc-category { margin-bottom: 28px; }
.hub-doc-category__header { margin-bottom: 10px; }
.hub-doc-category__title { font-size: var(--text-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rim-text-muted); }
.hub-doc-list { border: 1px solid var(--rim-rule); border-radius: 8px; overflow: hidden; }
.hub-doc-item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--rim-rule); cursor: pointer; background: #fff; transition: background 0.1s; }
.hub-doc-item:last-child { border-bottom: none; }
.hub-doc-item:hover { background: #fafaf9; }
.hub-doc-type-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; background: var(--rim-bg-accent); color: var(--rim-text-muted); flex-shrink: 0; }
.hub-doc-item__text { flex: 1; min-width: 0; }
.hub-doc-item__title { font-size: var(--text-small); font-weight: 500; color: var(--rim-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-doc-item__desc { font-size: var(--text-label); color: var(--rim-text-muted); margin-top: 2px; }
.hub-doc-item__meta { font-size: var(--text-label); color: var(--rim-text-muted); flex-shrink: 0; white-space: nowrap; }
.hub-doc-item__arrow { font-size: 16px; color: var(--rim-mid); flex-shrink: 0; }
.hub-doc-add-form { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 24px; margin-bottom: 20px; }
.add-doc-form__title { font-family: var(--font-serif); font-size: var(--text-body); font-weight: 400; color: #2d3f47; margin: 0 0 20px; }

/* ── Conversations (hub-conv-) ─────────────────────────────────────────────
   Thoughtful, breathing-space design for volunteer discussions.
   Shared by list view (HubConvClient) and thread detail (HubConvThreadClient).
   ── */

/* ── Page shell ── */
.hub-conv {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
  padding: 8px 0 64px;
}
.hub-conv__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hub-conv__title {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 400;
  color: var(--rim-text);
  margin: 0;
}
.hub-conv__head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Segment control (Open / Closed) ── */
.hub-conv-segment {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 999px;
  padding: 3px;
}
.hub-conv-segment__btn {
  padding: 6px 16px;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--rim-text-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.hub-conv-segment__btn:hover { color: var(--rim-text); }
.hub-conv-segment__btn--active {
  background: var(--rim-blue);
  color: #fff;
}
.hub-conv-segment__btn--active:hover { color: #fff; }

/* ── New topic button ── */
.hub-conv-newbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--rim-blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.15s;
}
.hub-conv-newbtn:hover { filter: brightness(1.08); }

/* ── Category filter chips ── */
.hub-conv__filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hub-conv-chip {
  padding: 5px 12px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--rim-text-muted);
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}
.hub-conv-chip:hover {
  color: var(--rim-text);
  border-color: var(--rim-mid);
}
.hub-conv-chip--active {
  background: var(--rim-text);
  color: #fff;
  border-color: var(--rim-text);
}
.hub-conv-chip--active:hover { color: #fff; }

/* ── Compose card (inline "new topic") ── */
.hub-conv-compose {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 12px;
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hub-conv-compose__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hub-conv-compose__label {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rim-text-muted);
}
.hub-conv-compose__close {
  background: none;
  border: none;
  color: var(--rim-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hub-conv-compose__close:hover { color: var(--rim-text); background: var(--rim-bg); }
.hub-conv-compose__subject {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 400;
  color: var(--rim-text);
  border: none;
  outline: none;
  padding: 0;
  background: transparent;
  width: 100%;
}
.hub-conv-compose__subject::placeholder { color: var(--rim-text-muted); }
.hub-conv-compose__cat {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text);
  background: var(--rim-bg);
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  padding: 6px 10px;
}
.hub-conv-compose__editor {
  border-top: 1px solid var(--rim-rule);
  padding-top: 12px;
}
.hub-conv-compose__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ── List + rows ── */
.hub-conv__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hub-conv-row {
  position: relative;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.hub-conv-row + .hub-conv-row { margin-top: 8px; }
.hub-conv-row:hover { border-color: var(--rim-mid); }
.hub-conv-row--pinned {
  border-left: 3px solid var(--rim-blue);
}
.hub-conv-row--unread {
  background: linear-gradient(180deg, #fff 0%, #f7faff 100%);
}
.hub-conv-row__link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.hub-conv-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hub-conv-row__title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.hub-conv-row__pin { color: var(--rim-blue); flex-shrink: 0; }
.hub-conv-row__title {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 400;
  color: var(--rim-text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-conv-row--unread .hub-conv-row__title { font-weight: 600; }
.hub-conv-row__excerpt {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hub-conv-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
}
.hub-conv-row__author { font-weight: 500; color: var(--rim-text); }
.hub-conv-row--unread .hub-conv-row__author::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rim-blue);
  margin-right: 6px;
  vertical-align: middle;
}
.hub-conv-row__dot { opacity: 0.5; }
.hub-conv-row__cat {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--rim-bg);
  font-size: var(--text-xxs);
}

/* Hover-reveal coordinator actions */
.hub-conv-row__actions {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.hub-conv-row:hover .hub-conv-row__actions,
.hub-conv-row:focus-within .hub-conv-row__actions { opacity: 1; }

/* ── Avatar ── */
.hub-conv-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rim-mid);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  user-select: none;
}

/* ── Icon button (pin/close in rows, menu trigger) ── */
.hub-conv-iconbtn {
  width: 32px;
  height: 32px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  color: var(--rim-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.hub-conv-iconbtn:hover {
  color: var(--rim-text);
  border-color: var(--rim-mid);
  background: var(--rim-bg);
}
.hub-conv-iconbtn--text {
  width: auto;
  padding: 0 10px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
}

/* ── Empty state ── */
.hub-conv__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 20px 56px;
  text-align: center;
  color: var(--rim-text-muted);
}
.hub-conv__empty svg { color: var(--rim-mid); }
.hub-conv__empty-title {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  color: var(--rim-text);
  margin: 0;
}
.hub-conv__empty-sub {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  margin: 0;
}

/* ═════════════════════════════════════════════════════════════════════════
   Thread detail
   ═════════════════════════════════════════════════════════════════════════ */
.hub-conv-thread {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 64px;
}
.hub-conv-thread__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  text-decoration: none;
  align-self: flex-start;
}
.hub-conv-thread__back:hover { color: var(--rim-text); }

/* Thread header */
.hub-conv-thread__head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 44px;
}
.hub-conv-thread__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  font-weight: 400;
  color: var(--rim-text);
  line-height: 1.25;
  margin: 0;
}
.hub-conv-thread__pin { color: var(--rim-blue); flex-shrink: 0; }
.hub-conv-thread__title-input {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  font-weight: 400;
  color: var(--rim-text);
  line-height: 1.25;
  border: none;
  border-bottom: 2px solid var(--rim-blue);
  outline: none;
  padding: 2px 0;
  background: transparent;
  width: 100%;
}
.hub-conv-thread__head-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
}
.hub-conv-thread__closed {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--rim-bg);
  color: var(--rim-text);
  font-weight: 500;
}

/* "…" menu */
.hub-conv-thread__menu-wrap {
  position: absolute;
  top: 0;
  right: 0;
}
.hub-conv-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 10;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hub-conv-menu__item {
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text);
  text-align: left;
  cursor: pointer;
}
.hub-conv-menu__item:hover { background: var(--rim-bg); }

/* Post (OP + each reply) — flat, with hairline rhythm on replies */
.hub-conv-post {
  display: flex;
  gap: 14px;
  padding: 24px 0;
  border-top: 1px solid var(--rim-rule);
}

/* Original post — subtle white card, flat, no shadow */
.hub-conv-post--op {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 10px;
}
.hub-conv-post--op::before {
  content: "Original post";
  position: absolute;
  left: 24px;
  top: -9px;
  padding: 0 8px;
  background: var(--rim-bg);
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
}
.hub-conv-post--op {
  position: relative;
  margin-top: 8px;
}
.hub-conv-post__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rim-mid);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  user-select: none;
}
.hub-conv-post__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hub-conv-post__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
}
.hub-conv-post__author {
  color: var(--rim-text);
  font-weight: 600;
}
.hub-conv-post__you {
  padding: 1px 8px;
  border-radius: 999px;
  background: #e8eef1;
  font-size: var(--text-xxs);
  color: var(--rim-blue);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hub-conv-post__dot { opacity: 0.5; }
.hub-conv-post__edited { font-style: italic; }

.hub-conv-post__edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}
.hub-conv-post:hover .hub-conv-post__edit,
.hub-conv-post:focus-within .hub-conv-post__edit { opacity: 1; }
.hub-conv-post__edit:hover {
  color: var(--rim-text);
  background: var(--rim-bg);
  border-color: var(--rim-rule);
}

.hub-conv-post__body {
  /* Compact team-chat scale — overrides .rim-content editorial default */
}
.hub-conv-thread .rim-content,
.hub-conv-post__body,
.hub-conv-post__body.rim-content {
  font-size: 15px;
  line-height: 1.55;
}
.hub-conv-thread .rim-content p,
.hub-conv-post__body p { margin: 0 0 0.7em; }
.hub-conv-thread .rim-content p:last-child,
.hub-conv-post__body p:last-child { margin-bottom: 0; }
.hub-conv-thread .rim-content h2,
.hub-conv-post__body h2 { font-size: 18px; line-height: 1.35; }
.hub-conv-thread .rim-content h3,
.hub-conv-post__body h3 { font-size: 16px; line-height: 1.4; }
.hub-conv-post__edit-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  padding: 14px;
}
.hub-conv-post__edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Footer: reactions + add-reaction */
.hub-conv-post__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hub-conv-post__reactions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hub-conv-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--rim-rule);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.hub-conv-reaction:hover {
  border-color: var(--rim-blue);
  background: #f0f7fa;
}
.hub-conv-reaction__count {
  font-size: var(--text-xxs);
  color: var(--rim-text-muted);
  font-weight: 500;
}

.hub-conv-post__react-wrap { position: relative; }
.hub-conv-post__react-btn {
  width: 30px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px dashed var(--rim-rule);
  border-radius: 999px;
  color: var(--rim-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.hub-conv-post:hover .hub-conv-post__react-btn,
.hub-conv-post:focus-within .hub-conv-post__react-btn { opacity: 1; }
.hub-conv-post__reactions + .hub-conv-post__react-wrap .hub-conv-post__react-btn { opacity: 1; }
.hub-conv-post__react-btn:hover {
  color: var(--rim-text);
  border-color: var(--rim-mid);
  border-style: solid;
}
.hub-conv-react-pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  z-index: 10;
  display: flex;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 999px;
  padding: 4px 6px;
}
.hub-conv-react-pop__btn {
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hub-conv-react-pop__btn:hover { background: var(--rim-bg); }

/* Replies container — hairlines do the rhythm, no gap between posts */
.hub-conv-thread__replies {
  display: flex;
  flex-direction: column;
}
.hub-conv-thread__replies .hub-conv-post:first-child { border-top: none; }

/* Reply composer — flat, matches the post stream */
.hub-conv-replybox {
  display: flex;
  gap: 14px;
  padding-top: 20px;
  border-top: 2px solid var(--rim-rule);
}
.hub-conv-replybox__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rim-mid);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  opacity: 0.9;
}
.hub-conv-replybox__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hub-conv-replybox__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  font-weight: 500;
  margin-top: 10px;
}
.hub-conv-replybox__actions {
  display: flex;
  justify-content: flex-end;
}

/* Make the embedded editor feel at home in the stream (not a big white form) */
.hub-conv-replybox .rim-prose-editor {
  border: 1px solid var(--rim-rule);
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s;
}
.hub-conv-replybox .rim-prose-editor:focus-within {
  border-color: var(--rim-mid);
}

.hub-conv-thread__closed-note {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  font-style: italic;
  text-align: center;
  padding: 20px;
  border: 1px dashed var(--rim-rule);
  border-radius: 10px;
  margin: 0;
}

/* Mobile */
@media (max-width: 640px) {
  .hub-conv__head { align-items: flex-start; }
  .hub-conv-row__link { padding: 14px 16px; gap: 12px; }
  .hub-conv-avatar,
  .hub-conv-post__avatar,
  .hub-conv-replybox__avatar { width: 36px; height: 36px; }
  .hub-conv-thread__head { padding-right: 40px; }
  .hub-conv-thread__title { font-size: var(--text-h2); }
  .hub-conv-row__actions {
    opacity: 1;
    top: auto;
    bottom: 10px;
    right: 10px;
    background: rgba(255,255,255,0.9);
    border-radius: 8px;
    padding: 2px;
  }
  .hub-conv-post__edit,
  .hub-conv-post__react-btn { opacity: 1; }
}
.hub-doc-url-row { display: flex; align-items: center; gap: 8px; }
.hub-doc-url-row .fi { flex: 1; }
.hub-doc-cat-new-row { display: flex; gap: 8px; align-items: center; }
.hub-doc-cat-new-row .fi { flex: 1; }
.hub-doc-edit-inline { border-radius: 0; border-left: 0; border-right: 0; }
.hub-doc-edit-footer { display: flex; justify-content: space-between; }
.hub-doc-edit-footer__right { display: flex; gap: 8px; }
.hub-doc-item__edit { flex-shrink: 0; }

/* ── LiveKit Video Room (vr- prefix) ──────────────────────────── */
.vr-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
}
.vr-container [data-lk-theme="default"] {
  --lk-bg: #1a1a1a;
  --lk-control-bg: #2d2d2d;
  --lk-border-color: #3a3a3a;
}

/* ── Video Session Page (/session/[slug]) — vs- prefix ────────── */
.vs-page {
  min-height: 100vh;
  background: var(--rim-bg);
  display: flex;
  flex-direction: column;
}
.vs-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: #1a1a1a;
  border-bottom: 1px solid #2a2a2a;
}
.vs-header__back {
  background: none;
  border: none;
  font-size: var(--text-ui);
  color: #888;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-sans);
  transition: background 0.1s;
}
.vs-header__back:hover { background: #333; color: #ccc; }
.vs-header__name {
  font-family: var(--font-serif);
  font-size: 17px;
  color: #ccc;
  font-weight: 400;
  flex: 1;
}
.vs-header__stepin {
  background: #2A7B6F;
  color: #fff;
  border: none;
  font-size: var(--text-label);
  font-weight: 600;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 5px;
  font-family: var(--font-sans);
  transition: opacity 0.12s;
}
.vs-header__stepin:hover { opacity: 0.85; }
.vs-header__stepin:disabled { opacity: 0.5; cursor: default; }
.vs-header__mute {
  background: #4A6FA5;
  color: #fff;
  border: none;
  font-size: var(--text-label);
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-sans);
  transition: opacity 0.12s;
  white-space: nowrap;
  min-width: 72px;
}
.vs-header__mute:hover { opacity: 0.85; }
.vs-header__mute:disabled { opacity: 0.5; cursor: default; }
.vs-header__end {
  background: #B84040;
  color: #fff;
  border: none;
  font-size: var(--text-label);
  font-weight: 600;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 5px;
  font-family: var(--font-sans);
  transition: opacity 0.12s;
}
.vs-header__end:hover { opacity: 0.85; }
.vs-header__end:disabled { opacity: 0.5; cursor: default; }
.vs-page:fullscreen .vs-header__end { background: #c44; }
.vs-header__fullscreen {
  background: none;
  border: 1px solid #444;
  font-size: var(--text-label);
  color: #777;
  cursor: pointer;
  padding: 5px 12px;
  border-radius: 5px;
  font-family: var(--font-sans);
  transition: background 0.1s, color 0.1s;
}
.vs-header__fullscreen:hover { background: #333; color: #ccc; }
.vs-page:fullscreen .vs-header { background: #111; border-bottom-color: #222; }
.vs-page:fullscreen .vs-header__end { background: #c44; }
.vs-page:fullscreen { background: #000; }
.vs-room {
  flex: 1;
  min-height: 0;
  position: relative;
}
.vs-room .vr-container {
  position: absolute;
  inset: 0;
  border-radius: 0;
  min-height: auto;
}
.vs-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small);
  color: var(--rim-text-muted);
}
.vs-message {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px;
}
.vs-message__title {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--rim-text);
  margin: 0;
}
.vs-message__text {
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  margin: 0;
}
/* Guest entry form */
.vs-guest-entry {
  max-width: 380px;
  margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
}
.vs-guest-entry__title {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 500;
  color: var(--rim-text);
  margin: 0 0 8px;
}
.vs-guest-entry__subtitle {
  font-size: var(--text-small);
  color: var(--rim-text-muted, #888);
  margin: 0 0 24px;
}
.vs-guest-entry__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vs-guest-entry__input {
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  text-align: center;
  background: #fff;
}
.vs-guest-entry__input:focus {
  outline: none;
  border-color: #135274;
}
.vs-guest-entry__btn {
  font-size: 16px;
  padding: 12px;
  background: #135274;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
.vs-guest-entry__btn:hover { opacity: 0.9; }
.vs-guest-entry__btn:disabled { opacity: 0.5; cursor: default; }
.vs-guest-entry__error {
  font-size: var(--text-ui);
  color: #c44;
  margin: 12px 0 0;
}

@media (max-width: 640px) {
  .vs-header { padding: 10px 16px; }
  .vs-room { padding: 8px; }
}

/* ─── RIMConference layout ────────────────────────────────────── */
.rim-conference {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #111;
  position: relative;
}
/* Main area: video grid + optional chat sidebar side-by-side */
.rim-conference__main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
}
.rim-conference__video {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
/* Chat sidebar */
.rim-conference__chat {
  width: 300px;
  flex-shrink: 0;
  background: #1a1a1a;
  border-left: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Our own chat header with a working close button */
.rim-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.rim-chat-header__title {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  color: #eee;
}
.rim-chat-header__close {
  background: none;
  border: none;
  color: #888;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.rim-chat-header__close:hover { color: #fff; background: rgba(255,255,255,0.1); }
/* Override LiveKit's fixed width and hide its built-in header (close button doesn't work with our state) */
.rim-conference__chat .lk-chat {
  width: 100% !important;
  height: 100%;
  min-height: 0;
  background: #1a1a1a;
  align-items: stretch;
  grid-template-rows: 0 1fr var(--lk-control-bar-height); /* 0 hides LK's header row */
}
.rim-conference__chat .lk-chat-header { display: none; }
/* Ensure messages area scrolls within available space */
.rim-conference__chat .lk-chat-messages {
  overflow-y: auto;
  align-self: stretch;
  min-height: 0;
}
/* Focus layout: remove the default bottom-bar height deduction
   since our ControlBar is outside the video container */
.rim-conference__video .lk-focus-layout-wrapper,
.rim-conference__video .lk-grid-layout-wrapper {
  height: 100%;
}
@media (max-width: 640px) {
  .rim-conference__chat { width: 100%; position: absolute; inset: 0; z-index: 20; }
}
/* Raised-hand banner — floats above the video area */
.rim-hand-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: rgba(0,0,0,0.75);
  color: #fbbf24;
  font-size: var(--text-ui);
  font-family: var(--font-sans);
  border-bottom: 1px solid rgba(251,191,36,0.2);
}
.rim-hand-banner__open {
  background: rgba(251,191,36,0.15);
  border: 1px solid rgba(251,191,36,0.3);
  color: #fbbf24;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
}
.rim-hand-banner__open:hover { background: rgba(251,191,36,0.25); }
.rim-conference__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
/* Toolbar buttons (Participants, Settings) */
.rim-conf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: rgba(255,255,255,0.1);
  color: #eee;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px;
  font-size: var(--text-label);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
}
.rim-conf-btn:hover { background: rgba(255,255,255,0.18); }
.rim-conf-btn--active { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.3); }
.rim-conf-btn__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #c44;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  margin-left: 2px;
}

/* ─── RIMParticipantTile wrapper ─────────────────────────────── */
.rim-tile-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
/* Ensure LiveKit's tile fills our wrapper so name bar stays visible */
.rim-tile-wrapper .lk-participant-tile {
  width: 100%;
  height: 100%;
}
/* Avatar — centered rounded square like Zoom */
.rim-tile-avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  height: 50%;
  min-height: 80px;
  max-height: 280px;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  z-index: 2;
  pointer-events: none;
}
/* Name bar — always visible, above avatar overlay */
.rim-tile-wrapper .lk-participant-metadata {
  z-index: 3;
  opacity: 1 !important;
  display: flex !important;
}
.rim-tile-wrapper .lk-participant-metadata-item {
  background: rgba(0,0,0,0.6);
  padding: 5px 10px;
  font-size: 16px;
}
.rim-tile-wrapper .lk-participant-name {
  font-size: 16px;
  font-weight: 500;
}
/* Hide LiveKit's grey silhouette when our avatar is showing */
.rim-tile-wrapper--avatar .lk-participant-placeholder {
  display: none !important;
}
/* Signal badge — top-left of tile, large */
.rim-tile-signal {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 44px;
  line-height: 1;
  z-index: 4;
  pointer-events: none;
  background: rgba(0,0,0,0.5);
  border-radius: 10px;
  padding: 6px 8px;
  animation: rim-signal-pop 0.25s ease-out;
}
@keyframes rim-signal-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
/* Make LiveKit's built-in pin button larger and more visible on hover */
/* Hide LiveKit's default Start Audio button — we have our own prompt */
.rim-conference .lk-start-audio-button { display: none !important; }

/* Audio playback prompt — shown when browser blocks audio (Safari) */
.rim-audio-prompt {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0,0,0,0.7);
  z-index: 30;
}
.rim-audio-prompt__btn {
  font-size: 18px;
  font-family: var(--font-sans);
  font-weight: 600;
  padding: 14px 32px;
  background: #135274;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.rim-audio-prompt__btn:hover { background: #1d6fa0; }
.rim-audio-prompt__hint {
  font-size: var(--text-small);
  color: #aaa;
  font-family: var(--font-sans);
  margin: 0;
}

.rim-tile-wrapper .lk-focus-toggle-button {
  padding: 6px 10px;
  font-size: 16px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  z-index: 5;
}
.rim-tile-wrapper .lk-focus-toggle-button:hover {
  background: rgba(0,0,0,0.8);
}

/* ─── Nonverbal signal toolbar ───────────────────────────────── */
.rim-signals {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.rim-signals__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  background: rgba(255,255,255,0.08);
  color: #eee;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
  min-width: 40px;
  justify-content: center;
}
.rim-signals__btn:hover { background: rgba(255,255,255,0.16); }
.rim-signals__btn--active {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}
.rim-signals__label {
  font-size: 11px;
  font-family: var(--font-sans);
  opacity: 0.8;
}

/* ─── Participants panel ─────────────────────────────────────── */
.rim-pp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
}
.rim-pp {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: #1a1a1a;
  border-left: 1px solid rgba(255,255,255,0.1);
  z-index: 50;
  display: flex;
  flex-direction: column;
  color: #eee;
}
.rim-pp__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.rim-pp__title {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
}
.rim-pp__hands { color: #fbbf24; }
.rim-pp__close {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
}
.rim-pp__close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.rim-pp__list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.rim-pp__empty {
  padding: 16px;
  font-size: var(--text-ui);
  color: #888;
  text-align: center;
}
.rim-pp__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.rim-pp__signal { width: 20px; text-align: center; font-size: 16px; }
.rim-pp__name { flex: 1; font-size: var(--text-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rim-pp__mic { font-size: 14px; }
.rim-pp__mic--muted { opacity: 0.4; }
.rim-pp__mute-btn {
  padding: 3px 9px;
  background: rgba(255,255,255,0.1);
  color: #eee;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--font-sans);
  cursor: pointer;
}
.rim-pp__mute-btn:hover { background: rgba(255,255,255,0.2); }
.rim-pp__mute-btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 430px) {
  .rim-pp { width: 100%; }
}

/* ─── Video settings panel ───────────────────────────────────── */
.rim-settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
}
.rim-settings {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  background: #1a1a1a;
  border-left: 1px solid rgba(255,255,255,0.1);
  z-index: 50;
  display: flex;
  flex-direction: column;
  color: #eee;
  overflow-y: auto;
}
.rim-settings__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: sticky;
  top: 0;
  background: #1a1a1a;
  z-index: 1;
}
.rim-settings__title {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
}
.rim-settings__close {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
}
.rim-settings__close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.rim-settings__body { padding: 0 16px 24px; }
.rim-settings__section {
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rim-settings__section:last-child { border-bottom: none; }
.rim-settings__label {
  font-size: var(--text-ui);
  font-weight: 600;
  font-family: var(--font-sans);
  margin-bottom: 4px;
}
.rim-settings__hint {
  font-size: var(--text-xs);
  color: #999;
  font-family: var(--font-sans);
  line-height: 1.4;
  margin-bottom: 10px;
}
.rim-settings__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.rim-settings__toggle {
  flex-shrink: 0;
  padding: 5px 14px;
  background: rgba(255,255,255,0.1);
  color: #eee;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.12s;
  min-width: 52px;
}
.rim-settings__toggle:hover { background: rgba(255,255,255,0.18); }
.rim-settings__toggle--on {
  background: #135274;
  border-color: #1d6fa0;
  color: #fff;
}
.rim-settings__toggle:disabled { opacity: 0.4; cursor: default; }
.rim-settings__slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.rim-settings__slider-label {
  font-size: var(--text-xs);
  color: #bbb;
  font-family: var(--font-sans);
  width: 66px;
  flex-shrink: 0;
}
.rim-settings__slider {
  flex: 1;
  accent-color: #1d6fa0;
}
.rim-settings__slider-val {
  font-size: var(--text-xs);
  color: #bbb;
  font-family: var(--font-mono);
  width: 38px;
  text-align: right;
  flex-shrink: 0;
}
.rim-settings__reset {
  margin-top: 8px;
  background: none;
  border: none;
  color: #888;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.rim-settings__reset:hover { color: #bbb; }
/* Avatar */
.rim-settings__avatar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.rim-settings__avatar-preview {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.2);
}
.rim-settings__avatar-empty {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 2px dashed rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: #777;
  flex-shrink: 0;
  text-align: center;
  line-height: 1.3;
}
.rim-settings__avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rim-settings__avatar-btn {
  padding: 6px 12px;
  background: rgba(255,255,255,0.1);
  color: #eee;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  cursor: pointer;
}
.rim-settings__avatar-btn:hover { background: rgba(255,255,255,0.18); }
.rim-settings__avatar-btn:disabled { opacity: 0.4; cursor: default; }
.rim-settings__avatar-remove {
  background: none;
  border: none;
  color: #c44;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.rim-settings__avatar-remove:hover { color: #e55; }
.rim-settings__file-input { display: none; }
.rim-settings__error {
  font-size: var(--text-xs);
  color: #f87;
  margin: 8px 0 0;
  font-family: var(--font-sans);
}
@media (max-width: 430px) {
  .rim-settings { width: 100%; }
}

/* Embedded room on dashboard */
.vre-room {
  margin-top: 16px;
  height: 500px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ddd;
}
@media (max-width: 640px) {
  .vre-room { height: 360px; }
}

/* ── Members (hub-mem-) ───────────────────────────────────────── */
.hub-mem-container { max-width: 680px; margin: 0 auto; }
.hub-mem-section { margin-bottom: 28px; }
.hub-mem-section__label { font-size: var(--text-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rim-text-muted); margin-bottom: 12px; }
.hub-mem-list { border: 1px solid var(--rim-rule); border-radius: 8px; overflow: visible; }
.hub-mem-item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--rim-rule); background: #fff; }
.hub-mem-item:first-child { border-radius: 8px 8px 0 0; }
.hub-mem-item:last-child { border-bottom: none; border-radius: 0 0 8px 8px; }
.hub-mem-item:only-child { border-radius: 8px; }
.hub-mem-av { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-ui); font-weight: 700; color: #fff; flex-shrink: 0; font-family: var(--font-sans); }
.av--a { background: #39607a; }   /* steel */
.av--b { background: #5c7a8c; }   /* slate */
.av--c { background: #4a7c6f; }   /* sage */
.av--d { background: #7a5c46; }   /* brown */
.hub-mem-item__info { flex: 1; min-width: 0; }
.hub-mem-item__name { font-size: var(--text-small); font-weight: 500; color: var(--rim-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hub-mem-item__role { font-size: var(--text-xs); color: var(--rim-text-muted); margin-top: 2px; }
.hub-mem-item__join { font-size: var(--text-label); color: var(--rim-text-muted); flex-shrink: 0; }
.coord-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: var(--text-xxs); font-weight: 600; background: #edf3f7; color: var(--rim-mid); }
/* hub-mem-toolbar removed — actions now in shared hub-section-header */
.hub-mem-add-form { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 24px; margin-bottom: 20px; }
.hub-mem-add-form__hint { font-size: var(--text-xs); color: var(--rim-text-muted); margin: 8px 0 0; }
.hub-mem-search-results { margin-top: 8px; border: 1px solid var(--rim-rule); border-radius: 6px; overflow: hidden; max-height: 240px; overflow-y: auto; }
.hub-mem-search-result { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 14px; border: none; border-bottom: 1px solid var(--rim-rule); background: #fff; cursor: pointer; font-size: var(--text-ui); font-family: var(--font-sans); color: var(--rim-text); text-align: left; }
.hub-mem-search-result:last-child { border-bottom: none; }
.hub-mem-search-result:hover { background: #f5f5f5; }
.hub-mem-search-result__email { font-size: var(--text-label); color: var(--rim-text-muted); }
.hub-mem-item { position: relative; }
.hub-mem-item__menu-wrap { position: relative; flex-shrink: 0; }
.hub-mem-item__menu-btn { border: none; background: none; font-size: var(--text-body); color: var(--rim-text-muted); cursor: pointer; padding: 4px 8px; border-radius: 4px; opacity: 0; transition: opacity 0.15s; }
.hub-mem-item:hover .hub-mem-item__menu-btn { opacity: 1; }
.hub-mem-item__menu-btn:hover { background: #f5f5f5; }
.hub-mem-menu { position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid var(--rim-rule); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 20; min-width: 180px; overflow: hidden; }
.hub-mem-menu button { display: block; width: 100%; padding: 10px 16px; border: none; background: none; text-align: left; font-size: var(--text-ui); font-family: var(--font-sans); color: var(--rim-text); cursor: pointer; }
.hub-mem-menu button:hover { background: #f5f5f5; }
.hub-mem-menu__danger { color: #c44 !important; }
.hub-mem-menu__danger:hover { background: #fff0f0 !important; }
.hub-mem-confirm { position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid #e0b4b4; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 20; padding: 16px; min-width: 220px; }
.hub-mem-confirm p { margin: 0 0 12px; font-size: var(--text-ui); color: var(--rim-text); }
.hub-mem-confirm__actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Phase 3 — coordinator controls + status badges */
.hub-mem-av--img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.hub-mem-item.hub-mem-status--paused { opacity: 0.85; background: #fafaf7; }
.hub-mem-item.hub-mem-status--inactive { opacity: 0.55; }
.hub-mem-badge { display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 3px; font-size: var(--text-xxs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.hub-mem-badge--paused { background: var(--color-warning-bg); color: var(--color-warning); }
.hub-mem-badge--inactive { background: #eee; color: #777; }
.hub-mem-item__flag { font-size: var(--text-xs); color: var(--rim-text-muted); margin-top: 3px; }
.hub-mem-item__note { font-size: var(--text-xs); color: var(--rim-text-muted); margin-top: 3px; font-style: italic; }
.hub-mem-item__actions { display: flex; gap: 6px; margin-left: 8px; }
.hub-mem-item__edit-btn { background: none; border: 1px solid var(--rim-rule); padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: var(--text-xs); color: var(--rim-text); }
.hub-mem-item__edit-btn:hover { background: var(--rim-mid); }

.hub-mem-editor { grid-column: 1 / -1; padding: 16px; margin-top: 8px; background: #fafafa; border-radius: 8px; border: 1px solid var(--rim-rule); display: flex; flex-direction: column; gap: 12px; }
.hub-mem-editor__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.hub-mem-editor__field { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); color: var(--rim-text); }
.hub-mem-editor__field > span { font-weight: 600; font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--rim-text-muted); }
.hub-mem-editor__check { display: flex; align-items: center; gap: 8px; font-size: var(--text-ui); color: var(--rim-text); }
.hub-mem-editor__check input { width: 16px; height: 16px; }
.hub-mem-editor__actions { display: flex; gap: 8px; justify-content: flex-end; }

.hub-mem-dialog { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.hub-mem-dialog__panel { background: #fff; border-radius: 10px; padding: 24px; max-width: 520px; width: 100%; max-height: 80vh; overflow-y: auto; }
.hub-mem-dialog__panel h3 { margin: 0 0 8px; font-size: var(--text-h4); }
.hub-mem-dialog__lede { font-size: var(--text-ui); color: var(--rim-text); margin-bottom: 12px; }
.hub-mem-dialog__list { margin: 8px 0 16px; padding-left: 20px; font-size: var(--text-ui); }
.hub-mem-dialog__list li { margin-bottom: 4px; }
.hub-mem-dialog__actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ── Hub tabs — tablet responsive ──────────────────────────── */
@media (max-width: 768px) {
  .hub-conv-compose, .hub-doc-add-form { padding: 20px; }
  .hub-conv-item { padding: 14px 16px; }
  .hub-conv-post { padding: 14px 16px; }
  .hub-doc-item { padding: 12px 14px; }
  .hub-mem-item { padding: 12px 14px; gap: 10px; }
  .hub-reply { padding: 12px 14px; }
  .hub-thread-detail__title { font-size: var(--text-h4); }
}

/* ── Hub tabs — phone responsive ───────────────────────────── */
@media (max-width: 430px) {
  /* Shared form fields: prevent iOS auto-zoom */
  .fi, .ft, .fs { font-size: 16px; }

  /* Shared buttons: 44px minimum touch targets */
  .btn { padding: 12px 18px; min-height: 44px; font-size: var(--text-ui); box-sizing: border-box; }
  .btn--sm { padding: 10px 14px; font-size: var(--text-xs); min-height: 44px; }
  .btn--ghost { padding: 12px 18px; min-height: 44px; }
  .hub-action-btn { padding: 10px 14px; min-height: 44px; font-size: var(--text-ui); box-sizing: border-box; }

  /* Compose forms: tighter padding on narrow viewports */
  .hub-conv-compose, .hub-doc-add-form { padding: 16px; }
  .hub-conv-compose__title, .add-doc-form__title { font-size: 16px; }

  /* Form actions: stack on phone */
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn,
  .form-actions .btn--ghost { width: 100%; justify-content: center; text-align: center; }

  /* Conversations — pills */
  .hub-conv-pill { padding: 12px 16px; min-height: 44px; font-size: var(--text-ui); }

  /* Conversations — toolbar */
  .hub-conv-toolbar { flex-wrap: wrap; gap: 10px; }

  /* Conversations — thread list */
  .hub-conv-item { flex-direction: column; gap: 8px; padding: 14px; }
  .hub-conv-item__actions { align-self: flex-end; }
  .hub-conv-item__title { font-size: var(--text-small); }

  /* Conversations — thread detail */
  .hub-conv-thread-hdr__title { font-size: var(--text-body); }
  .hub-conv-post { padding: 14px; }
  .hub-conv-back__link { padding: 8px 0; min-height: 44px; display: inline-flex; align-items: center; }

  /* Documents */
  .hub-doc-item { flex-wrap: wrap; gap: 8px; padding: 14px; }
  .hub-doc-item__title { white-space: normal; }
  .hub-doc-item__meta { display: none; }
  .hub-doc-item__text { min-width: 0; flex-basis: calc(100% - 52px); }

  /* Members */
  .hub-mem-item { padding: 12px 14px; gap: 10px; min-height: 44px; }
  .hub-mem-item__join { display: none; }
  .hub-mem-av { width: 36px; height: 36px; font-size: var(--text-xs); }
  .hub-mem-item__name { font-size: var(--text-ui); }

  /* Host team thread detail */
  .hub-thread-detail__title { font-size: var(--text-body); }
  .hub-thread-detail__header { padding-bottom: 16px; }
  .hub-reply { padding: 12px; }
  .hub-reply__edit-btn { padding: 8px 0; min-height: 44px; display: inline-flex; align-items: center; }
  .hub-reply-reaction-pill { padding: 6px 10px; min-height: 36px; }
  .hub-reply-reactions__add-btn { padding: 6px 10px; min-height: 36px; }
  .hub-reply-reactions__picker-btn { padding: 8px; font-size: 22px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .hub-reply-reactions__picker { gap: 2px; padding: 6px; }

  /* Hub main container */
  .hub-main__content { padding: 14px 14px 48px; }
}


/* ── Dashboard v2 (db2-) ─────────────────────────────────────── */
.db2-wrap { max-width: 720px; margin: 0 auto; } /* narrower than ac-inner — keeps dashboard content compact */
.db2-greeting { margin-bottom: 32px; }
.db2-greeting__name { font-size: var(--text-h2); font-weight: 400; font-family: var(--font-serif); color: #2d3f47; margin: 0 0 4px; }
.db2-greeting__date { font-size: var(--text-xs); color: #7a7068; margin: 0; }
.db2-empty-card { background: #fff; border: 1px solid var(--rim-rule); border-radius: 8px; padding: 20px 24px; }
.db2-empty-card__text { font-size: var(--text-small); color: var(--rim-text-muted); margin: 0 0 8px; }
.db2-empty-card__link { font-size: var(--text-ui); color: var(--rim-mid); text-decoration: none; }
.db2-empty-card__link:hover { text-decoration: underline; }
.db2-upcoming { border: 1px solid var(--rim-rule); border-radius: 8px; overflow: hidden; }
.db2-upcoming__item { display: flex; align-items: stretch; padding: 0; border-bottom: 1px solid var(--rim-rule); background: #fff; text-decoration: none; color: var(--rim-text); transition: background 0.1s; }
.db2-upcoming__item:last-child { border-bottom: none; }
.db2-upcoming__item:hover { background: #fafaf9; }
.db2-upcoming__date-block { flex-shrink: 0; width: 60px; background: #dce9ef; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 12px 0; }
.db2-upcoming__date-month { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #6a8fa0; }
.db2-upcoming__date-day { font-size: var(--text-h4); font-weight: 700; line-height: 1; color: #6a8fa0; }
.db2-upcoming__title { flex: 1; padding: 13px 18px; align-self: center; font-size: var(--text-small); font-weight: 400; font-family: var(--font-serif); color: #2d3f47; }
.db2-upcoming__date-block + .db2-upcoming__title { padding-left: 14px; }
.db2-upcoming__date { font-size: var(--text-xs); color: var(--rim-text-muted); flex-shrink: 0; }
.db2-quicklinks { display: flex; gap: 10px; flex-wrap: wrap; }
.db2-quicklink { padding: 9px 18px; background: #fff; border: 1.5px solid var(--rim-rule); border-radius: 6px; font-size: var(--text-ui); font-weight: 500; color: var(--rim-text); text-decoration: none; }
.db2-quicklink:hover { border-color: var(--rim-mid); color: var(--rim-mid); }
.db2-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.db2-hub-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: #fff; border: 1.5px solid var(--rim-rule); border-radius: 8px; text-decoration: none; transition: border-color 0.15s; cursor: pointer; }
.db2-hub-card:hover { border-color: #6a8fa0; }
.db2-hub-card__name { font-size: 17px; font-weight: 400; color: #2d3f47; font-family: var(--font-serif); }
.db2-hub-card__type { font-size: 10px; color: #7a7068; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; }

/* ── Today's Virtual Sessions ─────────────────────────────────── */
.today-card { border: 1px solid var(--rim-rule); border-radius: 8px; overflow: hidden; background: #fff; }
.today-card__header { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 20px 10px; background: var(--rim-bg); border-bottom: 1px solid var(--rim-rule); flex-wrap: wrap; gap: 6px; }
.today-card__heading { font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rim-text-muted); }
.today-card__date { font-size: var(--text-label); color: var(--rim-text-muted); }
.today-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--rim-rule); }
.today-row:last-child { border-bottom: none; }
.today-row--live { background: #edf3f7; border-left: 3px solid var(--rim-mid); }
.today-row--later { background: #fff; }
.today-row__left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.today-row__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.today-row__time { font-size: var(--text-xs); font-weight: 600; color: var(--rim-text-muted); min-width: 52px; flex-shrink: 0; }
.today-row__title { font-size: 16px; font-weight: 400; font-family: var(--font-serif); color: var(--rim-mid); }
.today-row__title--muted { color: var(--rim-text-muted); }
.today-live-badge { padding: 2px 8px; border-radius: 10px; font-size: var(--text-xxs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--rim-mid); color: #fff; flex-shrink: 0; }
.today-registered { padding: 2px 8px; border-radius: 10px; font-size: var(--text-xxs); font-weight: 600; background: #edf7f2; color: #2d6a4a; flex-shrink: 0; }
.join-btn { padding: 7px 18px; background: var(--rim-mid); color: #fff; border: none; border-radius: 5px; font-size: var(--text-xs); font-weight: 600; cursor: pointer; text-decoration: none; flex-shrink: 0; }
.join-btn:hover { background: var(--rim-blue); }
.today-later-hdr { display: flex; align-items: baseline; gap: 10px; padding: 8px 20px; background: var(--rim-bg); border-top: 1px solid var(--rim-rule); border-bottom: 1px solid var(--rim-rule); flex-wrap: wrap; }
.today-later-hdr__label { font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rim-text-muted); }
.today-later-hdr__note { font-size: var(--text-label); color: var(--rim-text-muted); font-style: italic; }

/* Countdown text on later-today sessions */
.today-row__countdown { font-size: var(--text-label); color: var(--rim-text-muted); font-style: italic; white-space: nowrap; }

/* Status chips (inline in program cards) */
.db2-chip {
  display: inline-block; font-size: var(--text-xxs); font-weight: 600; padding: 2px 10px;
  border-radius: 10px; white-space: nowrap;
}
.db2-chip--registered { background: #edf7f2; color: #2d6a4a; }

/* Program card status column */
.db2-upcoming__status {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 0 18px;
}

/* Dana invitation icon */
.db2-dana-icon { color: #b45309; display: block; }

/* ── Schedule list view — card-based rows (mobile-friendly) ── */
.hub-lv { display: flex; flex-direction: column; gap: 0; }
.hub-lv__list { display: flex; flex-direction: column; gap: 8px; }

.hub-lv__card {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-left: 3px solid var(--rim-rule);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.hub-lv__card:hover { border-color: var(--rim-mid); }

/* Whole-card border picks up a light tint of the state color so the left
   stripe feels part of the card, not a sticker. The stripe carries the
   saturated accent; the other three sides carry a washed version of it. */
.hub-lv__card--needs-host {
  border-color: #ecd9a6;
  border-left-color: #d9840f;
}
.hub-lv__card--needs-host:hover { border-color: #d9840f; }

.hub-lv__card--needs-sub {
  border-color: #f0c8b8;
  border-left-color: #c44a20;
}
.hub-lv__card--needs-sub:hover { border-color: #c44a20; }

.hub-lv__card--covered {
  border-color: #c7ddc9;
  border-left-color: #5a9960;
}
.hub-lv__card--covered:hover { border-color: #5a9960; }

.hub-lv__card--mine {
  border-color: #c9d8e0;
  border-left-color: var(--rim-blue);
}
.hub-lv__card--mine:hover { border-color: var(--rim-blue); }

/* mine-sub — blue stripe (still yours), red tint everywhere else (urgent). */
.hub-lv__card--mine-sub {
  border-color: #f0c8b8;
  border-left-color: var(--rim-blue);
  background: #fdf0ec;
}
.hub-lv__card--mine-sub:hover { border-color: #c44a20; }

.hub-lv__card--expanded { border-color: var(--rim-blue); }

/* List spacing: 8px between cards within a date group, 20px between groups.
   Header spacing lives on the group-header (padding-top) so the gap between
   a card and the next group's header is consistent with the rest. */
.hub-lv__list { display: flex; flex-direction: column; gap: 8px; }
.hub-lv__group { display: flex; flex-direction: column; gap: 8px; }
.hub-lv__group-header {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rim-text-muted);
  padding: 12px 2px 2px;
}
.hub-lv__group:first-child .hub-lv__group-header { padding-top: 2px; }

.hub-lv__card-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.1s;
}
.hub-lv__card-main:hover { background: #fdfcfb; }

.hub-lv__check {
  width: 16px;
  height: 16px;
  accent-color: #2d3f47;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}
.hub-lv__card--selected { border-color: #6a8fa0; background: #f5f8fa; }
.hub-lv__left { flex: 1; min-width: 0; }
/* Card title — conforms to Messages Hub pattern (hub-conv-row__title):
   serif, h4 size, 400 weight, 1.3 line-height. */
.hub-lv__title {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 400;
  color: var(--rim-text);
  line-height: 1.3;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
  overflow-wrap: anywhere;
}
.hub-lv__chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap;
}
.hub-lv__chip--sub {
  background: #fbe9e3;
  color: #7a2e10;
  border: 1px solid #f0c8b8;
}
.hub-lv__meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.hub-lv__sep { margin: 0 6px; color: #d0cdc8; }
.hub-lv__host { color: var(--rim-text-muted); }
.hub-lv__host--unassigned { color: #a09a94; font-style: italic; }
.hub-lv__host--needs-host { color: #7a4a08; font-weight: 600; }
.hub-lv__host--needs-sub  { color: #7a2e10; font-weight: 600; }
.hub-lv__host--mine { font-weight: 600; color: var(--rim-blue); }

.hub-lv__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.hub-lv__yours {
  font-size: var(--text-label);
  font-weight: 600;
  color: #4a7d96;
  padding: 4px 10px;
  background: #dbe8f2;
  border-radius: 12px;
}
.hub-lv__covered {
  font-size: var(--text-label);
  font-weight: 600;
  color: #3d8a4d;
  padding: 4px 10px;
  background: #dceede;
  border-radius: 12px;
}

.hub-lv__action-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: var(--text-ui);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: opacity 0.12s;
  min-height: 36px;
}
.hub-lv__action-btn:hover { opacity: 1; }
/* 'I'll host' — orange, matches the unclaimed state color. */
.hub-lv__action-btn--primary {
  background: #d9840f;
  color: #fff;
  transition: background 0.12s;
}
.hub-lv__action-btn--primary:hover { background: #b56b05; }
/* 'I can cover' — red, matches the sub-needed urgent state. */
.hub-lv__action-btn--sub {
  background: #c44a20;
  color: #fff;
  transition: background 0.12s;
}
.hub-lv__action-btn--sub:hover { background: #a13c18; }
/* Armed-confirm state — darker base color, subtle pulse, a visible
   countdown bar at the top of the button. The pulse + the bar together
   make the armed state obvious on any screen size. Dual indicators
   are intentional: the bar reads as elapsed/remaining time, the pulse
   reads as 'something is happening right now.' */
.hub-lv__action-btn--confirming {
  background: #8a5208;
  color: #fff;
  position: relative;
  overflow: hidden;
  animation: hub-lv-confirm-pulse 1.2s ease-in-out infinite;
}
.hub-lv__action-btn--confirming-sub {
  background: #7a2e10;
  color: #fff;
  position: relative;
  overflow: hidden;
  animation: hub-lv-confirm-pulse 1.2s ease-in-out infinite;
}
.hub-lv__action-btn--confirming::after,
.hub-lv__action-btn--confirming-sub::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 5px;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  transform-origin: left center;
  animation: hub-lv-confirm-countdown 4s linear forwards;
  pointer-events: none;
}
@keyframes hub-lv-confirm-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@keyframes hub-lv-confirm-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.15); }
}
.hub-lv__confirm {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}
.hub-lv__confirm-cancel {
  background: none;
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  cursor: pointer;
  padding: 8px 12px;
  min-height: 40px;
  text-align: center;
  border-radius: 6px;
}
.hub-lv__confirm-cancel:hover {
  color: var(--rim-text);
  background: var(--rim-bg-accent);
}

@media (max-width: 768px) {
  .hub-lv__confirm-cancel {
    min-height: 44px;
    padding: 10px 14px;
  }
}
/* Legacy — retained so stored variants still render, but unused by new layout */
.hub-lv__action-btn--claim { background: #d9840f; color: #fff; }
.hub-lv__action-btn--claim:hover { background: #b56b05; }
.hub-lv__action-btn--ghost { background: transparent; color: var(--rim-text-muted); border: 1.5px solid var(--rim-rule); }
.hub-lv__action-btn--ghost:hover { background: var(--rim-bg-accent); color: var(--rim-text); opacity: 1; }

/* Expanded detail inside card */
.hub-lv__detail {
  border-top: 1px solid #f0ede8;
  padding: 16px 18px 18px;
  background: #fdfcfb;
}

/* Mobile: stack action below content; full-width button = bigger tap target. */
@media (max-width: 480px) {
  .hub-lv__card-main { flex-direction: column; align-items: stretch; gap: 10px; }
  .hub-lv__right { align-self: stretch; justify-content: stretch; }
  .hub-lv__action-btn { width: 100%; text-align: center; }
  .hub-lv__detail .hub-detail { padding: 20px 14px; }
  .hub-lv__detail .hub-detail__cols { gap: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — Host Schedule + shared hub chrome at <768px
   - 44px touch-target minimum on every interactive control (per design rule
     for users under cognitive load)
   - 16px form-input font to prevent iOS auto-zoom on focus
   - Compressed chrome so the content isn't buried below headers on short
     viewports (iPhone SE et al.)
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Shell chrome — less vertical real estate at the top */
  .hub-ws-toolhead {
    padding: 14px 20px 0;
  }
  .hub-ws-toolhead__name {
    font-size: 18px;
    margin: 0 0 10px;
  }
  .hub-ws-content {
    padding: 16px 16px 48px;
  }
  .hub-ws-mobilebar__btn {
    width: 44px;
    height: 44px;
  }

  /* Status sentence — bigger inline pill tap area */
  .hub-sched-status {
    margin-bottom: 14px;
  }
  .hub-sched-status__pill {
    padding: 6px 14px;
    border-radius: 22px;
  }

  /* Month nav — 44px square buttons */
  .hub-schedule__month-nav {
    margin-top: 8px;
    margin-bottom: 10px;
  }
  .hub-schedule__nav-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hub-schedule__month {
    font-size: var(--text-h4);
  }
  .hub-schedule__today-btn {
    padding: 8px 14px;
    font-size: var(--text-xs);
    min-height: 36px;
  }

  /* Calendar — slightly thicker bars for legibility */
  .hub-cal2__bar {
    width: 14px;
    height: 4px;
    border-radius: 2px;
  }

  /* Day filter banner — tappable escape link */
  .hub-sched-dayfilter__clear {
    min-height: 44px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
  }

  /* List action buttons — full 44px minimum height */
  .hub-lv__action-btn {
    min-height: 44px;
    padding: 12px 20px;
    font-size: var(--text-ui);
  }

  /* Detail panel actions — 44px everywhere */
  .hub-detail__primary-btn {
    min-height: 44px;
    padding: 12px 22px;
  }
  .hub-detail__link-btn {
    min-height: 44px;
    padding: 12px 14px;
    font-size: var(--text-ui);
  }
  .hub-detail__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .hub-detail__primary-btn,
  .hub-detail__primary-btn--host,
  .hub-detail__primary-btn--sub,
  .hub-detail__primary-btn--danger {
    width: 100%;
  }
  .hub-detail__secondary-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 6px;
  }

  /* Form inputs — 16px minimum to prevent iOS zoom-on-focus */
  .fi, .ft, .fs {
    font-size: 16px;
  }
}

@media (max-width: 430px) {
  .hub-ws-content { padding: 14px 14px 48px; }
  .hub-schedule__month { font-size: 20px; }
  .hub-cal2__cell { padding: 4px 3px 6px; }
  /* Legend wraps more tightly on narrow phones */
  .hub-sched-legend { gap: 6px 14px; }
}

/* ── Inline list panel (HubScheduleClient list view) ───────── */
.hub-list__row--expanded { background: #f5f8fa; }
.hub-list__inline-panel { border-top: 1px solid var(--rim-rule); padding: 0; }
.hub-list__inline-panel .hub-panel { border-radius: 0; border: none; border-bottom: 1px solid var(--rim-rule); background: #f5f8fa; }

/* ── Shared form utilities (used across hub pages) ───────────── */
.fg { margin-bottom: 16px; }
.fl { display: block; font-size: var(--text-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #7a7068; margin-bottom: 6px; }
.fi { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: var(--text-small); font-family: var(--font-sans); color: var(--rim-text); background: #f5f5f5; box-sizing: border-box; }
.fi:focus { outline: none; border-color: #6a8fa0; }
.ft { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: var(--text-small); font-family: var(--font-sans); color: var(--rim-text); background: #f5f5f5; box-sizing: border-box; min-height: 120px; resize: vertical; }
.ft:focus { outline: none; border-color: #6a8fa0; }
.fs { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: var(--text-small); font-family: var(--font-sans); color: var(--rim-text); background: #f5f5f5; box-sizing: border-box; }
.fs:focus { outline: none; border-color: #6a8fa0; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; align-items: center; justify-content: flex-end; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .db2-hub-grid { grid-template-columns: 1fr; }
  .db2-quicklinks { flex-direction: column; }
  .today-card__header { flex-direction: column; }
  .today-row { flex-wrap: wrap; }
}

/* ── Hub Schedule — inline detail (continuation of card, not a separate card) ── */
.hub-detail {
  padding: 4px 0 0;
}

/* Info line — compact label:value pairs separated by dots */
.hub-detail__info {
  font-size: var(--text-xs);
  color: var(--rim-text);
  line-height: 1.6;
  margin-bottom: 12px;
}
.hub-detail__info-item { white-space: nowrap; }
.hub-detail__info-label { color: #a09a94; font-weight: 600; }
.hub-detail__info-sep { color: #d0cdc8; margin: 0 8px; }

/* Meet link — styled as a teal pill button */
.hub-detail__meet {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.hub-detail__meet-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: #e0f0ed;
  color: #1a6b5a;
  border: 1px solid #b8ddd4;
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.hub-detail__meet-btn:hover { background: #d0e8e3; border-color: #8cc8bb; }
.hub-detail__meet-account { font-size: var(--text-label); color: var(--rim-text-muted); }

/* Sub note */
.hub-detail__sub-msg {
  font-size: var(--text-xs);
  color: #7a2020;
  font-style: italic;
  background: #f5e0e0;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 14px;
}

/* Actions — clear hierarchy */
.hub-detail__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hub-detail__primary-btn {
  padding: 8px 20px;
  background: #d9840f;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: var(--text-ui);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.12s;
}
.hub-detail__primary-btn:hover { background: #b56b05; }
/* Modifiers — keep visual cohesion with the state color */
.hub-detail__primary-btn--host { background: #d9840f; }
.hub-detail__primary-btn--host:hover { background: #b56b05; }
.hub-detail__primary-btn--sub { background: #c44a20; }
.hub-detail__primary-btn--sub:hover { background: #a13c18; }
/* Confirming state — dark base, pulse, thick top bar for the 4s countdown.
   Mirrors the card-level confirming button exactly; consistency matters. */
.hub-detail__primary-btn--confirming {
  position: relative;
  overflow: hidden;
  animation: hub-lv-confirm-pulse 1.2s ease-in-out infinite;
}
.hub-detail__primary-btn--host.hub-detail__primary-btn--confirming { background: #8a5208; }
.hub-detail__primary-btn--sub.hub-detail__primary-btn--confirming  { background: #7a2e10; }
.hub-detail__primary-btn--confirming::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 5px;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  transform-origin: left center;
  animation: hub-lv-confirm-countdown 4s linear forwards;
  pointer-events: none;
}
.hub-detail__confirm {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}
.hub-detail__primary-btn:disabled { opacity: 0.5; cursor: default; }
.hub-detail__primary-btn--danger { background: #B84040; }
.hub-detail__secondary-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hub-detail__link-btn {
  background: none;
  border: none;
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  cursor: pointer;
  padding: 6px 10px;
  font-family: var(--font-sans);
  border-radius: 4px;
  transition: color 0.1s, background 0.1s;
}
.hub-detail__link-btn:hover { color: var(--rim-text); background: #f0ede8; }

/* Sub request form + remove warning */
.hub-detail__form { margin-top: 4px; }
.hub-detail__form-label { font-size: var(--text-xs); font-weight: 600; color: var(--rim-text); margin-bottom: 8px; }
.hub-detail__form-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.hub-detail__warn {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hub-detail__warn-text { font-size: var(--text-xs); color: #7a2020; }

.hub-detail__link-btn--manager {
  color: var(--rim-blue);
}
.hub-detail__link-btn--manager:hover {
  color: var(--rim-blue);
  background: #e8edf2;
}

/* ── Program diagnostics panel (HOST_MANAGER/ADMIN only) ── */
.hub-diag {
  margin: 10px 0 6px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #f5f5f5;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--rim-text);
}
.hub-diag--ok { background: var(--color-success-bg); }
.hub-diag--warn { background: var(--color-warning-bg); }
.hub-diag--error { background: var(--color-error-bg); }
.hub-diag__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.hub-diag__label {
  font-size: var(--text-xxs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rim-text-muted);
}
.hub-diag__link {
  font-size: var(--text-xs);
  color: var(--rim-blue);
  text-decoration: none;
}
.hub-diag__link:hover { text-decoration: underline; }
.hub-diag__ok {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-success);
}
.hub-diag__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hub-diag__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.hub-diag__item--error .hub-diag__bullet { color: var(--color-error); }
.hub-diag__item--warning .hub-diag__bullet { color: var(--color-warning); }
.hub-diag__bullet {
  font-weight: 700;
  width: 14px;
  flex-shrink: 0;
  text-align: center;
}
.hub-diag__msg { flex: 1; }
.hub-diag__hint {
  margin: 8px 0 0;
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
}
.hub-diag__inline-link {
  color: var(--rim-blue);
  text-decoration: none;
}
.hub-diag__inline-link:hover { text-decoration: underline; }

/* ── Legend swatches — left-stripe bars matching event chip style ── */
.hub-legend-swatch {
  display: inline-block;
  width: 3.5px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}
.hub-legend-swatch--mine    { background: #4a7d96; }
.hub-legend-swatch--covered { background: #3d8a4d; }
.hub-legend-swatch--needs   { background: #c44a20; }

/* ── Mobile mini-calendar + agenda view ─────────────────────────── */

/* Mini-cal is always visible (primary navigation). Full grid calendar is opt-in. */
@media (max-width: 560px) {
  .hub-cal-wrap { display: none !important; } /* hide full grid on small screens */
  .hub-schedule__view-toggle { display: none; }
  .hub-schedule__filter-row { flex-direction: column; align-items: flex-start; }
}

/* Mini-calendar grid (always visible — primary date navigation) */
.hub-mini-cal {
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}
.hub-mini-cal__header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f7f5f2;
  border-bottom: 1px solid #ddd;
}
.hub-mini-cal__day-label {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8a8680;
  padding: 8px 2px;
}
.hub-mini-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.hub-mini-cal__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  padding: 6px 2px;
  cursor: pointer;
  border: 1px solid #f0ede8;
  transition: background 0.1s;
}
.hub-mini-cal__cell--empty { background: #faf9f7; cursor: default; }
.hub-mini-cal__cell:not(.hub-mini-cal__cell--empty):hover { background: #f0ede8; }
.hub-mini-cal__cell--today:not(.hub-mini-cal__cell--selected) { background: rgba(19, 82, 116, 0.05); }
.hub-mini-cal__cell--selected { background: var(--rim-blue); }
.hub-mini-cal__num {
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--rim-text);
  line-height: 1;
}
.hub-mini-cal__cell--today:not(.hub-mini-cal__cell--selected) .hub-mini-cal__num { font-weight: 700; color: var(--rim-blue); }
.hub-mini-cal__cell--selected .hub-mini-cal__num { color: #fff; font-weight: 700; }
.hub-mini-cal__dots {
  display: flex;
  gap: 4px;
  min-height: 6px;
  align-items: center;
}
.hub-mini-cal__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hub-mini-cal__dot--mine    { background: var(--rim-blue); }
.hub-mini-cal__dot--covered { background: #b8b3ad; }
.hub-mini-cal__dot--needs   { background: #2a8f79; }
.hub-mini-cal__cell--selected .hub-mini-cal__dot { background: rgba(255,255,255,0.7); }

/* ═══════════════════════════════════════════════════════════════════════════
   Host Schedule — redesigned calendar and list (hub-cal2, hub-sched-*)
   Calmer palette, bigger cells, event pills showing program names.
   Three status colors:
     needs host  → muted teal   (#edf5f3 bg / #2a8f79 accent)
     mine        → soft blue    (rgba(19,82,116,0.10) bg / var(--rim-blue) accent)
     covered     → neutral grey (#f4f2ef bg / #b8b3ad accent)
═══════════════════════════════════════════════════════════════════════════ */

/* ── Status sentence (replaces the 3-way filter pill row) ── */
.hub-sched-status {
  margin-bottom: 20px;
}
.hub-sched-status__line {
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--rim-text);
  margin: 0;
}
.hub-sched-status__pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  border: 1.5px solid transparent;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
/* Orange — 'needs a host' (includes both unclaimed and sub-needed totals). */
.hub-sched-status__pill--needs { background: #fbf1dc; color: #7a4a08; border-color: #ecd9a6; }
.hub-sched-status__pill--needs:hover,
.hub-sched-status__pill--needs.hub-sched-status__pill--active { background: #f5e5c2; border-color: #d9840f; }
/* Blue — your commitments. */
.hub-sched-status__pill--mine { background: rgba(19, 82, 116, 0.10); color: var(--rim-blue); border-color: rgba(19, 82, 116, 0.18); }
.hub-sched-status__pill--mine:hover,
.hub-sched-status__pill--mine.hub-sched-status__pill--active { background: rgba(19, 82, 116, 0.18); border-color: var(--rim-blue); }
.hub-sched-status__clear {
  background: none;
  border: none;
  font: inherit;
  color: var(--rim-text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.hub-sched-status__clear:hover { color: var(--rim-text); }

/* ── Calendar (hub-cal2) ── */
.hub-cal2 {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
.hub-cal2__header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #faf9f7;
  border-bottom: 1px solid var(--rim-rule);
}
.hub-cal2__day-label {
  text-align: center;
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rim-text-muted);
  padding: 10px 4px;
}
.hub-cal2__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(96px, auto);
}
.hub-cal2__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 6px 6px 8px;
  cursor: pointer;
  border-right: 1px solid #f0ede8;
  border-bottom: 1px solid #f0ede8;
  background: #fff;
  transition: background 0.1s;
  min-width: 0;
}
.hub-cal2__cell:nth-child(7n) { border-right: none; }
.hub-cal2__cell--empty {
  background: #faf9f7;
  cursor: default;
}
.hub-cal2__cell:not(.hub-cal2__cell--empty):hover { background: #faf9f7; }
.hub-cal2__cell--selected {
  background: rgba(19, 82, 116, 0.08);
  box-shadow: inset 0 0 0 2px var(--rim-blue);
}
.hub-cal2__num {
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--rim-text);
  line-height: 1;
  padding: 2px 2px 0;
}
/* Today: filled blue circle around the day number (Google Calendar pattern).
   Reads instantly at a glance, even from across the room. */
.hub-cal2__cell--today .hub-cal2__num {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 2px 0 0 2px;
  background: var(--rim-blue);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
}
.hub-cal2__cell--selected:not(.hub-cal2__cell--today) .hub-cal2__num { font-weight: 700; color: var(--rim-blue); }
.hub-cal2__events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hub-cal2__event {
  display: flex;
  align-items: center;
  padding: 4px 7px;
  border-radius: 3px;
  font-size: var(--text-label);
  line-height: 1.3;
  color: var(--rim-text);
  background: #f4f2ef;
  border-left: 3px solid #b8b3ad;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.hub-cal2__event-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* Orange — unclaimed, no host yet. Standing need, not urgent. */
.hub-cal2__event--needs-host {
  background: #fbf1dc;
  border-left-color: #d9840f;
  color: #7a4a08;
}
/* Red — sub needed. Someone stepping back; urgent. */
.hub-cal2__event--needs-sub {
  background: #fbe9e3;
  border-left-color: #c44a20;
  color: #7a2e10;
}
/* Blue — your commitment. */
.hub-cal2__event--mine {
  background: rgba(19, 82, 116, 0.10);
  border-left-color: var(--rim-blue);
  color: var(--rim-blue);
  font-weight: 600;
}
/* Red bg + blue border — your commitment, sub requested. Yours AND urgent. */
.hub-cal2__event--mine-sub {
  background: #fbe9e3;
  border-left-color: var(--rim-blue);
  color: #7a2e10;
  font-weight: 600;
}
/* Green — covered, settled. Soft cue; nothing to do. */
.hub-cal2__event--covered {
  background: #ebf3ec;
  border-left-color: #5a9960;
  color: #3d6746;
}
.hub-cal2__event-more {
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  padding: 0 6px;
}
/* Mobile/tablet fallback: small bars instead of name pills */
.hub-cal2__bars { display: none; }
.hub-cal2__bar {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}
.hub-cal2__bar--needs-host { background: #d9840f; }
.hub-cal2__bar--needs-sub  { background: #c44a20; }
.hub-cal2__bar--mine       { background: var(--rim-blue); }
.hub-cal2__bar--mine-sub   { background: linear-gradient(90deg, var(--rim-blue) 40%, #c44a20 40%); }
.hub-cal2__bar--covered    { background: #5a9960; }

@media (max-width: 768px) {
  .hub-cal2__grid { grid-auto-rows: minmax(64px, auto); }
  .hub-cal2__cell { padding: 4px; }
  .hub-cal2__events { display: none; }
  .hub-cal2__bars {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    justify-content: center;
    margin-top: auto;
  }
  .hub-cal2__num { text-align: center; padding: 0; }
}
@media (max-width: 430px) {
  .hub-cal2__grid { grid-auto-rows: minmax(52px, auto); }
  .hub-cal2__bar { width: 12px; }
}

/* ── Legend (color key for the calendar + list) ── */
.hub-sched-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  padding: 4px 0 16px;
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
}
.hub-sched-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.hub-sched-legend__swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  border-left: 3px solid transparent;
}
.hub-sched-legend__swatch--needs-host { background: #fbf1dc; border-left-color: #d9840f; }
.hub-sched-legend__swatch--needs-sub  { background: #fbe9e3; border-left-color: #c44a20; }
.hub-sched-legend__swatch--mine       { background: rgba(19, 82, 116, 0.12); border-left-color: var(--rim-blue); }
.hub-sched-legend__swatch--mine-sub   { background: #fbe9e3; border-left-color: var(--rim-blue); }
.hub-sched-legend__swatch--covered    { background: #ebf3ec; border-left-color: #5a9960; }

/* ── Day filter banner ── */
.hub-sched-dayfilter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(19, 82, 116, 0.06);
  border: 1px solid rgba(19, 82, 116, 0.18);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: var(--text-ui);
  color: var(--rim-text);
  flex-wrap: wrap;
}
.hub-sched-dayfilter__text { flex: 1; min-width: 0; }
.hub-sched-dayfilter__clear {
  background: none;
  border: none;
  color: var(--rim-blue);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.hub-sched-dayfilter__clear:hover { background: rgba(19, 82, 116, 0.10); }

/* Agenda list (mobile) */
.hub-agenda {
  margin-top: 20px;
}
.hub-agenda__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rim-text);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rim-rule);
  margin-bottom: 4px;
}
.hub-agenda__empty {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  padding: 20px 0;
  text-align: center;
}
.hub-agenda__item {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #f0ede8;
  cursor: pointer;
  transition: background 0.1s;
  border-radius: 4px;
}
.hub-agenda__item:hover { background: #faf9f7; }
.hub-agenda__item:last-child { border-bottom: none; }
.hub-agenda__stripe {
  width: 3px;
  border-radius: 2px;
  flex-shrink: 0;
  min-height: 36px;
}
.hub-agenda__stripe--mine    { background: #4a7d96; }
.hub-agenda__stripe--covered { background: #3d8a4d; }
.hub-agenda__stripe--needs   { background: #c44a20; }
.hub-agenda__body { flex: 1; min-width: 0; }
.hub-agenda__name {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--rim-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-agenda__meta {
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  margin-top: 2px;
}
.hub-agenda__detail-wrap { margin-top: 16px; }


/* (sv- / ps- / sh- CSS removed — Live Session + Journal features removed in session 76) */

/* ═══════════════════════════════════════════════════
   MEMBER AREA TYPOGRAPHY — Source Sans 3
   Replaces --font-serif (Libre Baskerville) across all
   member-area pages and components. Cascade override:
   same specificity, declared last → wins.

   Exception: .db2-greeting__name (dashboard "Welcome
   back, [name]") intentionally keeps --font-serif.
═══════════════════════════════════════════════════ */

/* ── Weight 700 — primary headings ── */
.co-title,
.wl-title,
.db-nav__title,
.db-welcome__greeting,
.db-heading-2, .db-heading-3,
.mr-heading,
.ml-heading,
.mp-heading,
.mc-heading, .mc-agreement__title,
.vol-heading-2,
.adm-header__title,
.adm-section__title,
.adm-import__title,
.adm-sm-title, .adm-sm-section__title,
.adm-fi-title, .adm-fi-area__title,
.adm-fi-sys-section__title,
.adm-fi-detail-header__title,
.man-chapter__title, .man-section__title, .man-future__title,
.bl-header__title,
.hs-header__title, .hs-how-to__title,
.hub-sb-name,
.hub-page__title,
.hub-modal__title,
.hub-how-to__title,
.hub-thread-detail__title,
.hub-conversations__title,
.hub-add-session-form__title,
.add-doc-form__title,
.ps-form__title, .ps-section__title, .ps-done__title,
.sh-title {
  font-family: var(--font-source-sans);
  font-weight: 700;
}

/* ── Weight 600 — sub-headings, card titles, labels ── */
.mr-card__title,
.adm-fi-sys-section__subtitle,
.adm-member-name, .adm-member-field-label,
.adm-list-text,
.vol-program-card__name,
.hs-program__name,
.hub-subboard__title,
.hub-program-card__name, .hub-program-detail__name,
.hub-schedule__month, .hub-schedule-nav__month,
.hub-panel__date, .hub-panel__heading, .hub-panel__title,
.hub-detail__name,
.hub-thread-card__title,
.hub-alert-item__title,
.db2-upcoming__title,
.db2-hub-card__name,
.hub-sched-row__title,
.sv-program__name,
.sh-detail__name,
.today-row__title,
.bl-stat__num {
  font-family: var(--font-source-sans);
  font-weight: 600;
}

/* ── Weight 400 — prose/body using serif in member area ── */
.wl-welcome-intro,
.mc-intro, .mc-list-item, .mc-confirm-text {
  font-family: var(--font-source-sans);
  font-weight: 400;
}

/* db2-wrap h2 — dashboard rich-text headings */
.db2-wrap h2 {
  font-family: var(--font-source-sans);
  font-weight: 700;
}

/* ── Post-session draft notice ── */
.ps-draft-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eef4f8;
  border: 1px solid #c8ddf0;
  border-radius: 4px;
  padding: 8px 14px;
  font-size: var(--text-xs);
  color: #4a6080;
  margin-bottom: 20px;
}
.ps-draft-notice__clear {
  background: none;
  border: none;
  font-size: var(--text-xs);
  color: #6a8fa0;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: var(--font-sans);
}

/* ── Session history: complete report link (team view) ── */
.sh-journal__complete-link {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--text-ui);
  font-weight: 600;
  color: #6a8fa0;
  text-decoration: none;
}
.sh-journal__complete-link:hover { text-decoration: underline; }

/* ── Session history: file report link (coordinator detail) ── */
.sh-detail__file-link {
  font-size: var(--text-ui);
  font-weight: 600;
  color: #6a8fa0;
  text-decoration: none;
  white-space: nowrap;
}
.sh-detail__file-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   RimEditor — shared rich text editor (re- prefix)
   Used everywhere a <textarea> would appear in the member area.
   ═══════════════════════════════════════════════════════════════════════════ */

.re-editor {
  display: flex;
  flex-direction: column;
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  font-family: var(--font-source-sans, var(--font-sans));
  /* Vertically resizable — drag the bottom-right corner */
  resize: vertical;
}

.re-editor:focus-within {
  border-color: #6a8fa0;
  outline: 2px solid rgba(106,143,160,0.25);
  outline-offset: 0;
}

/* ── Toolbar ── */
.re-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid #e8e4e0;
  background: #faf9f7;
  flex-shrink: 0;
}

.re-toolbar__sep {
  width: 1px;
  height: 18px;
  background: #d8d2cc;
  margin: 0 4px;
}

.re-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: #666;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  flex-shrink: 0;
}

.re-btn svg {
  display: block;
  pointer-events: none;
}

.re-btn:hover {
  background: #eee;
  color: #222;
}

.re-btn--active {
  background: #dde8ef;
  color: #135274;
}

/* ── Link popover ── */
.re-link-wrap { position: relative; display: inline-flex; }
.re-link-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #d8d2cc;
  border-radius: 6px;
  padding: 6px 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  white-space: nowrap;
  min-width: 260px;
}
.re-link-popover__input {
  flex: 1;
  border: 1px solid #d8d2cc;
  border-radius: 4px;
  padding: 5px 9px;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  color: var(--rim-text);
  outline: none;
}
.re-link-popover__input:focus { border-color: #93a2aa; }
.re-link-popover__apply {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 4px;
  background: var(--rim-blue);
  color: #fff;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.re-link-popover__apply:hover { background: var(--rim-mid); }

/* ── Editor content area ── */
.re-content {
  flex: 1;
  min-height: 0;   /* allow flex child to shrink/scroll */
  padding: 10px 14px;
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--rim-text, #333);
  font-family: var(--font-source-sans, var(--font-sans));
  cursor: text;
  overflow-y: auto;
}

/* Tiptap renders a .tiptap div inside EditorContent */
.re-content .tiptap {
  outline: none;
  min-height: inherit;
}

/* Placeholder */
.re-content .tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: #9e9590;
  pointer-events: none;
  float: left;
  height: 0;
}

/* Prose styles inside editor */
.re-content .tiptap p { margin: 0 0 0.5em; }
.re-content .tiptap p:last-child { margin-bottom: 0; }
.re-content .tiptap h2 { font-size: var(--text-body); font-weight: 700; margin: 0.8em 0 0.3em; }
.re-content .tiptap h3 { font-size: 16px; font-weight: 700; margin: 0.6em 0 0.2em; }
.re-content .tiptap ul,
.re-content .tiptap ol { margin: 0.4em 0 0.4em 1.4em; padding: 0; }
.re-content .tiptap li { margin: 0.1em 0; }
.re-content .tiptap blockquote {
  border-left: 3px solid #d5d5d5;
  margin: 0.6em 0;
  padding-left: 12px;
  color: var(--rim-text-muted, #666);
  font-style: italic;
}
.re-content .tiptap strong { font-weight: 700; }
.re-content .tiptap em { font-style: italic; }


/* ── Email Template Manager (em- prefix) ─────────────────────────────────── */

/* List page */
.em-list { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
.em-list__hdr { margin-bottom: 32px; }
.em-list__title { font-size: var(--text-h3); font-weight: 400; font-family: var(--font-serif); color: var(--rim-blue); margin: 0 0 8px; }
.em-list__sub { font-size: var(--text-small); color: var(--rim-text-muted); margin: 0; }
.em-list__group { margin-bottom: 40px; }
.em-list__group-label { font-size: var(--text-xxs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rim-text-muted); margin-bottom: 10px; }

.em-list__table { width: 100%; border-collapse: collapse; font-size: var(--text-ui); }
.em-list__table th {
  text-align: left;
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  border-bottom: 1px solid var(--rim-rule);
  padding: 8px 16px 8px 0;
}
.em-list__table td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid #ece8e3;
  vertical-align: middle;
}
.em-list__name { font-weight: 600; color: var(--rim-text); margin-bottom: 2px; }
.em-list__desc { font-size: var(--text-xs); color: var(--rim-text-muted); }
.em-list__date { font-size: var(--text-xs); color: var(--rim-text-muted); white-space: nowrap; }
.em-list__badge {
  display: inline-block;
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}
.em-list__badge--on  { background: #d4edda; color: #276a3a; }
.em-list__badge--off { background: #f0ede9; color: #7a6f68; }
.em-list__edit-link { font-size: var(--text-xs); color: var(--rim-mid); text-decoration: none; white-space: nowrap; }
.em-list__edit-link:hover { color: var(--rim-blue); text-decoration: underline; }

/* Editor page */
.em-editor { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
.em-editor__hdr { margin-bottom: 36px; }
.em-editor__back { font-size: var(--text-xs); color: var(--rim-mid); text-decoration: none; display: inline-block; margin-bottom: 12px; }
.em-editor__back:hover { color: var(--rim-blue); text-decoration: underline; }
.em-editor__title { font-size: var(--text-h3); font-weight: 400; font-family: var(--font-serif); color: var(--rim-blue); margin: 0 0 6px; }
.em-editor__desc { font-size: var(--text-small); color: var(--rim-text-muted); margin: 0 0 8px; }
.em-editor__meta { font-size: var(--text-label); color: #a39a93; margin: 0; }

.em-editor__field { margin-bottom: 28px; }
.em-editor__label {
  display: block;
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin-bottom: 8px;
}
.em-editor__hint { font-size: var(--text-xs); color: var(--rim-text-muted); margin: 0 0 10px; }

/* Email chrome bands — non-editable header/footer cues flanking the body editor */
.em-chrome-band {
  padding: 10px 16px;
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}
.em-chrome-band--header {
  background: var(--rim-blue);
  color: rgba(255,255,255,0.75);
  border-radius: 6px 6px 0 0;
}
.em-chrome-band--footer {
  background: #f0ede9;
  color: var(--rim-text-muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 0 0 6px 6px;
  border-top: 1px solid var(--rim-rule);
}

/* Help text + Sanity-origin callout */
.em-editor__help {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.em-editor__help-text {
  margin: 0;
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  line-height: 1.6;
}
.em-editor__sanity-callout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  background: #eef4f8;
  border-left: 3px solid var(--rim-mid);
  border-radius: 0 6px 6px 0;
  font-size: var(--text-xs);
  color: var(--rim-mid);
  line-height: 1.5;
}
.em-editor__sanity-callout-label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-blue);
  background: rgba(19,82,116,0.08);
  padding: 2px 6px;
  border-radius: 3px;
}

.em-editor__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: var(--text-small);
  font-family: var(--font-sans);
  color: var(--rim-text);
  border: 1px solid #d5d5d5;
  border-radius: 5px;
  background: #fff;
  outline: none;
}
.em-editor__input:focus { border-color: var(--rim-mid); }

/* Variables reference */
.em-editor__vars { margin-bottom: 24px; padding: 16px 20px; background: #f5f5f5; border-radius: 6px; }
.em-editor__vars-label {
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.em-editor__vars-hint { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: var(--text-label); }
.em-editor__vars-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Clickable variable chip buttons in the vars reference panel */
.em-editor__var-btn {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  background: #fef3c7;
  color: #92400e;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  font-weight: 500;
  border: 1px solid #fcd34d;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.1s;
}
.em-editor__var-btn:hover { background: #fde68a; }

/* VariableNode pill — rendered inside Tiptap editor content */
.ri-var-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 100px;
  background: #fef3c7;
  color: #92400e;
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  font-weight: 500;
  border: 1px solid #fcd34d;
  cursor: default;
  user-select: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
  vertical-align: baseline;
}

/* Enabled toggle */
.em-editor__toggle-row { margin-bottom: 32px; }
.em-editor__toggle-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--text-small); color: var(--rim-text); }
.em-editor__checkbox { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--rim-blue); cursor: pointer; flex-shrink: 0; }

/* Action buttons */
.em-editor__actions { display: flex; gap: 12px; align-items: center; }
.em-editor__btn {
  padding: 11px 24px;
  font-size: var(--text-small);
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.em-editor__btn:disabled { opacity: 0.6; cursor: default; }
.em-editor__btn--primary { background: var(--rim-blue); color: #fff; }
.em-editor__btn--primary:hover:not(:disabled) { opacity: 0.88; }
.em-editor__btn--secondary { background: #fff; color: var(--rim-mid); border: 1.5px solid var(--rim-mid); }
.em-editor__btn--secondary:hover { background: #f5f5f5; }

/* Preview modal */
.em-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.em-preview-modal {
  background: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.em-preview-modal__hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rim-rule);
  flex-shrink: 0;
}
.em-preview-modal__title { font-weight: 700; font-size: var(--text-small); color: var(--rim-text); }
.em-preview-modal__hint { font-size: var(--text-label); color: var(--rim-text-muted); flex: 1; }
.em-preview-modal__close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--rim-text-muted);
  padding: 4px 8px;
  border-radius: 4px;
}
.em-preview-modal__close:hover { background: #f0ede9; }
.em-preview-modal__body { flex: 1; overflow: hidden; }
.em-preview-modal__loading { padding: 48px; text-align: center; color: var(--rim-text-muted); font-size: var(--text-ui); }
.em-preview-modal__iframe { width: 100%; height: 100%; border: none; min-height: 500px; }

/* ─── TEACHER HUB (th-) ─────────────────────────────────────────────────────── */

/* List pages */
.th-list { padding: 0; }
.th-list__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.th-list__title { font-family: var(--font-serif); font-size: var(--text-h3); font-weight: 400; margin: 0; }
.th-list__search { margin-bottom: 16px; max-width: 360px; }
.th-empty { color: var(--rim-text-muted); font-size: var(--text-small); padding: 24px 0; }

/* Table */
.th-table { width: 100%; border-collapse: collapse; font-size: var(--text-ui); }
.th-table th { text-align: left; font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rim-text-muted); padding: 8px 12px; border-bottom: 1px solid var(--rim-rule); }
.th-table td { padding: 10px 12px; border-bottom: 1px solid #eee; vertical-align: middle; }
.th-table__muted { color: var(--rim-text-muted); font-size: var(--text-xs); }

/* Links */
.th-link { color: var(--rim-blue); text-decoration: none; }
.th-link:hover { text-decoration: underline; }

/* Badges */
.th-badge { display: inline-block; font-size: var(--text-xxs); font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.th-badge--green { background: #e6f4ea; color: #1a7f37; }
.th-badge--blue { background: #e8f0fe; color: #1a56db; }
.th-badge--muted { background: #f0ede9; color: var(--rim-text-muted); }

/* Buttons */
.th-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 8px; border: 1px solid #e0dbd6; background: transparent; color: var(--rim-text-muted); font-size: var(--text-ui); font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.15s; }
.th-btn:hover { background: #f5f2ee; border-color: #d0cac3; color: var(--rim-text); }
.th-btn--primary { background: var(--rim-blue); color: white; border: none; font-weight: 600; padding: 10px 28px; box-shadow: 0 1px 3px rgba(19,82,116,0.3); transition: all 0.2s ease; }
.th-btn--primary:hover { background: #0e4463; box-shadow: 0 2px 8px rgba(19,82,116,0.4); transform: translateY(-1px); }
.th-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.th-btn--danger { color: #991b1b; border-color: #f5cac5; }
.th-btn--danger:hover { background: #fef2f2; border-color: #e8a8a0; }
.th-btn--small { padding: 5px 12px; font-size: var(--text-label); }

/* Editor */
.th-editor { max-width: 740px; }
.th-editor__header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.th-editor__title { font-family: var(--font-serif); font-size: var(--text-h3); font-weight: 400; margin: 0; }

/* Card — warm paper with soft layered shadow */
.th-card {
  background: linear-gradient(180deg, #ffffff 0%, #faf8f5 100%);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  padding: 32px;
  border: none;
  margin-bottom: 16px;
}

/* Section break — breath line between logical groups */
.th-section-break {
  margin: 28px 0;
  border: none;
  border-top: 1px solid #f0ebe5;
}
.th-link--view { font-size: var(--text-ui); color: var(--rim-blue); white-space: nowrap; }
.th-link--sm { font-size: var(--text-xs); font-weight: 400; color: var(--rim-blue); white-space: nowrap; }

/* Sections */
.th-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid #f0ebe5; }

/* Rich text editors — subtle inset on the outer wrapper, transparent inner */
.th-card .rim-prose-editor,
.th-card .rim-block-editor {
  background: #faf8f5;
  border: 1px solid #eae5df;
  border-radius: 8px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
  overflow: hidden;
}
.th-card .bn-container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.th-section__title { font-family: var(--font-serif); font-size: var(--text-body); font-weight: 400; margin: 0 0 16px; }
.th-section__help { color: var(--rim-text-muted); font-size: var(--text-xs); margin: -8px 0 16px; }

/* Form fields */
.th-form { display: flex; flex-direction: column; gap: 16px; }
.th-field { display: flex; flex-direction: column; gap: 5px; }
.th-field__label { font-size: var(--text-xs); font-weight: 600; color: #4a4540; }
.th-field__help { font-size: var(--text-label); color: var(--rim-text-muted); }
.th-input { padding: 10px 14px; border: 1px solid #e0dbd6; border-radius: 8px; font-size: var(--text-ui); font-family: var(--font-sans); background: white; color: var(--rim-text); transition: border-color 0.15s, box-shadow 0.15s; }
.th-input:disabled { background: #f5f3f0; color: var(--rim-text-muted); cursor: default; }
.th-input:focus { outline: none; border-color: var(--rim-mid); box-shadow: 0 0 0 3px rgba(57,96,122,0.1); }
.th-input--narrow { max-width: 120px; }
.th-textarea { padding: 10px 14px; border: 1px solid #e0dbd6; border-radius: 8px; font-size: var(--text-ui); font-family: var(--font-sans); resize: vertical; background: white; color: var(--rim-text); line-height: 1.6; transition: border-color 0.15s, box-shadow 0.15s; }
.th-textarea:focus { outline: none; border-color: var(--rim-mid); box-shadow: 0 0 0 3px rgba(57,96,122,0.1); }
.th-textarea--tall { min-height: 300px; }
.th-select { padding: 10px 14px; border: 1px solid #e0dbd6; border-radius: 8px; font-size: var(--text-xs); background: white; }
.th-radio { display: flex; align-items: center; gap: 6px; font-size: var(--text-ui); cursor: pointer; }
.th-checkbox { display: flex; align-items: center; gap: 6px; font-size: var(--text-ui); cursor: pointer; }
.th-checkbox--sm { font-size: var(--text-xs); }
.th-roles-select { margin-top: 10px; padding: 12px 14px; background: #f9f7f5; border-radius: 6px; display: flex; flex-direction: column; gap: 8px; }
.th-field__hint { font-size: var(--text-ui); color: var(--rim-text-muted); margin: 0 0 4px; line-height: 1.5; }
.th-file-input { font-size: var(--text-xs); }
.th-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Messages */
.th-msg { padding: 10px 14px; border-radius: 6px; font-size: var(--text-ui); margin-bottom: 16px; }
.th-msg--error { background: var(--color-error-bg); color: var(--color-error); border: 1px solid #fecaca; }
.th-msg--success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid #bbf7d0; }
.th-muted { color: var(--rim-text-muted); font-size: var(--text-xs); }

/* Actions bar */
.th-actions {
  display: flex; gap: 12px; align-items: center;
  position: sticky; bottom: 24px; z-index: 50;
  background: linear-gradient(180deg, #ffffff 0%, #faf8f5 100%);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
  padding: 16px 28px;
  margin-top: 20px;
  border: none;
}

/* Lesson manager (inside course editor) */
.th-lessons { margin-top: 32px; padding-top: 24px; border-top: 1px solid #eee; }
.th-lessons__title { font-family: var(--font-serif); font-size: var(--text-body); font-weight: 400; margin: 0 0 8px; }
.th-lessons__help { color: var(--rim-text-muted); font-size: var(--text-xs); margin: 0 0 16px; }
.th-lessons__list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.th-lessons__item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fafafa; border: 1px solid #eee; border-radius: 6px; cursor: grab; }
.th-lessons__item--dragging { opacity: 0.5; }
.th-lessons__handle { color: var(--rim-text-muted); font-size: var(--text-ui); cursor: grab; user-select: none; }
.th-lessons__name { flex: 1; font-size: var(--text-ui); }
.th-lessons__add { margin-top: 12px; position: relative; }
.th-lessons__add-label { font-size: var(--text-xs); color: var(--rim-text-muted); margin: 0 0 6px; }
.th-lessons__add-section { margin-bottom: 8px; }
.th-lessons__new { margin-bottom: 12px; }
.th-lessons__new-form { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #f7f5f2; border-radius: 6px; border: 1px solid #eee; }
.th-lessons__new-actions { display: flex; gap: 8px; }
.th-lessons__results { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: white; border: 1px solid var(--rim-rule); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-height: 240px; overflow-y: auto; }
.th-lessons__result { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: none; font-size: var(--text-ui); cursor: pointer; color: var(--rim-text); }
.th-lessons__result:hover { background: #f7f5f2; }
/* Section divider row */
.th-section-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: #edf2f0; border: 1px dashed #b8cfc8; border-radius: 6px; cursor: grab; margin-top: 4px; }
.th-section-row__tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #5a8a7a; white-space: nowrap; }
.th-section-row__input { flex: 1; border: none; background: transparent; font-size: var(--text-xs); font-weight: 600; color: var(--rim-text); padding: 0; outline: none; }
.th-section-row__input::placeholder { font-weight: 400; color: #9db4ae; }
.th-section-row__remove { background: none; border: none; color: #9db4ae; cursor: pointer; font-size: var(--text-ui); line-height: 1; padding: 0 2px; }
.th-section-row__remove:hover { color: #c00; }
.th-btn--ghost { background: transparent; border: 1px solid var(--rim-rule); color: var(--rim-text-muted); }
.th-btn--ghost:hover { background: #f2eeea; color: var(--rim-text); }

/* Media preview */
.th-media-preview { display: flex; align-items: flex-start; gap: 16px; }
.th-media-preview__img { width: 160px; height: auto; border-radius: 6px; object-fit: cover; }
.th-media-preview__actions { display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* Resource rows */
.th-resource-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.th-resource-row .th-input { flex: 1; min-width: 120px; }
.th-resource-row__url { display: flex; gap: 6px; align-items: center; flex: 2; min-width: 200px; }
.th-resource-row__url .th-input { flex: 1; }
.th-resource-row__upload { cursor: pointer; }
.th-resource-row .th-select { min-width: 100px; }

/* (rte- block removed — old FormattedEditor/ContentEditor; replaced by RimBlockEditor + RimProseEditor) */

/* Responsive */
@media (max-width: 768px) {
  .th-table { font-size: var(--text-xs); }
  .th-table th, .th-table td { padding: 8px 6px; }
  .th-resource-row { flex-direction: column; align-items: stretch; }
  .th-resource-row__url { flex-direction: column; }
  .th-media-preview { flex-direction: column; }
  .th-media-preview__img { width: 100%; max-width: 240px; }
}

/* ── Callout Block (Markdown [callout] — distinct from lp-callout practice box) ── */
.lp-body .lp-callout-block {
  font-family: var(--font-serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.6;
  color: var(--rim-text);
  padding: 8px 0 8px 24px;
  margin: 24px 0;
  border-left: 2px solid var(--rim-rule);
}
.lp-body .lp-callout-block p {
  margin: 0;
  font-size: 19px;
  font-family: var(--font-serif);
  font-style: italic;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   pe- — Program Editor (Registrar Hub)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout ── */
.pe-editor { max-width: 740px; }
.pe-editor__header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.pe-editor__title { font-size: var(--text-h3); font-family: var(--font-serif); font-weight: 400; margin: 0; }
.pe-link--view { font-size: var(--text-ui); color: var(--rim-mid); text-decoration: none; }
.pe-link--view:hover { color: var(--rim-blue); text-decoration: underline; }

/* ── Messages ── */
.pe-msg { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: var(--text-ui); }
.pe-msg--error { background: var(--color-error-bg); color: #991b1b; }
.pe-msg--success { background: #f0fdf4; color: #166534; }

/* ── Tab bar — warm paper top, connects to card below ── */
.pe-tabs {
  display: flex; gap: 0; overflow-x: auto;
  background: linear-gradient(180deg, #f7f4f0 0%, #fdfcfa 100%);
  border-radius: 10px 10px 0 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.03);
  padding: 0 8px;
  margin-bottom: 0;
  border: none;
}
.pe-tabs__tab {
  padding: 12px 20px;
  min-height: 44px;
  background: none; border: none;
  font-size: var(--text-small); font-family: var(--font-sans);
  color: var(--rim-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
  border-radius: 8px 8px 0 0;
}
.pe-tabs__tab:hover { color: var(--rim-text); background: rgba(255,255,255,0.5); }
.pe-tabs__tab--active {
  color: var(--rim-blue); font-weight: 600;
  background: #fff;
  border-bottom-color: transparent;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.04);
}

/* ── Card — warm paper with soft layered shadow ── */
.pe-card {
  background: linear-gradient(180deg, #ffffff 0%, #faf8f5 100%);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  padding: 32px;
  border: none;
  margin-bottom: 8px;
}
.pe-card__section + .pe-card__section {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid #f0ebe5;
}
.pe-card__section-title {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--rim-text-muted);
  margin: 0 0 16px;
}

/* ── Tab intro — contextual description for sparse tabs ── */
.pe-tab-intro {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 24px;
}

/* ── Form ── */
.pe-form { display: flex; flex-direction: column; gap: 20px; }

/* ── Fields ── */
.pe-field { display: flex; flex-direction: column; gap: 6px; }
.pe-field__label {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--rim-text);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
}
.pe-field__help { font-size: var(--text-xs); font-weight: 400; color: var(--rim-text-muted); line-height: 1.5; margin-bottom: 0; }
.pe-field__help--warn { color: #b45309; }

/* ── Inputs ── */
.pe-input {
  padding: 10px 12px;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  font-size: 16px; font-family: var(--font-sans);
  background: #fff;
  width: 100%; box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pe-input:focus { outline: none; border-color: var(--rim-mid); box-shadow: 0 0 0 3px rgba(57,96,122,0.1); }
.pe-input:disabled { background: #f5f3f0; color: var(--rim-text-muted); }
.pe-input--narrow { max-width: 160px; }

.pe-textarea {
  padding: 10px 12px;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  font-size: 16px; font-family: var(--font-sans);
  background: #fff;
  width: 100%; box-sizing: border-box;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pe-textarea:focus { outline: none; border-color: var(--rim-mid); box-shadow: 0 0 0 3px rgba(57,96,122,0.1); }

.pe-select {
  padding: 10px 12px;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  font-size: 16px; font-family: var(--font-sans);
  background: #fff;
  max-width: 320px;
}
.pe-select--narrow { max-width: 160px; }

.pe-file-input { font-size: var(--text-ui); margin-top: 4px; }
.pe-muted { font-size: var(--text-xs); color: var(--rim-text-muted); }

/* ── Rich text editors in ProgramEditor form context ────────────────────────
   Both RimBlockEditor and RimProseEditor render:
     div.rim-[block|prose]-editor  (our wrapper)
       div.bn-container            (BlockNote root — must NOT have its own border)
         div.bn-editor             (actual edit area)

   The broken old rule styled .bn-container, creating a nested double-box.
   Fix: give each *wrapper* proper form-field treatment, make bn-container transparent.
   ── */

/* Give rim-block-editor a form-field border (rim-prose-editor already has one globally) */
.pe-card .rim-block-editor {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pe-card .rim-block-editor:focus-within {
  border-color: var(--rim-mid);
  box-shadow: 0 0 0 3px rgba(57,96,122,0.1);
}
.pe-card .rim-prose-editor:focus-within {
  border-color: var(--rim-mid);
  box-shadow: 0 0 0 3px rgba(57,96,122,0.1);
}

/* Kill inner bn-container box — it created the nested double-box */
.pe-card .bn-container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Form-field font size and line height for all editors inside pe-card */
.pe-card .rim-prose-editor .bn-editor,
.pe-card .rim-prose-editor .bn-default-styles,
.pe-card .rim-prose-editor .bn-block-content,
.pe-card .rim-prose-editor .bn-inline-content,
.pe-card .rim-prose-editor .ProseMirror,
.pe-card .rim-block-editor .bn-editor,
.pe-card .rim-block-editor .bn-default-styles,
.pe-card .rim-block-editor .bn-block-content,
.pe-card .rim-block-editor .bn-inline-content,
.pe-card .rim-block-editor .ProseMirror {
  font-size: var(--text-small) !important;
  line-height: 1.65 !important;
}

/* Padding inside both editors — matches pe-textarea */
.pe-card .rim-prose-editor .bn-editor,
.pe-card .rim-block-editor .bn-editor {
  padding: 10px 12px !important;
}

/* Tighter block-level spacing in form context */
.pe-card .rim-block-editor .bn-block-outer,
.pe-card .rim-prose-editor .bn-block-outer {
  line-height: 1.65 !important;
}

/* ── Slug row ── */
.pe-slug-row { display: flex; gap: 8px; align-items: center; }
.pe-slug-row .pe-input { flex: 1; }

/* ── Radio + checkbox ── */
.pe-radio-group { display: flex; gap: 16px; flex-wrap: wrap; }
.pe-radio { display: flex; align-items: center; gap: 6px; font-size: var(--text-small); cursor: pointer; }
.pe-checkbox { display: flex; align-items: center; gap: 8px; font-size: var(--text-small); cursor: pointer; }
.pe-checkbox--inline { font-size: var(--text-xs); }

/* ── Option cards — styled radio group for important exclusive choices ── */
.pe-option-cards { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.pe-option-card {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: #faf9f7;
  border: 1.5px solid var(--rim-rule);
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--text-ui); font-weight: 500;
  color: var(--rim-text-muted);
  user-select: none;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.pe-option-card:hover { border-color: #adb8bf; background: #f4f2ef; color: var(--rim-text); }
.pe-option-card--active { border-color: #39607a; background: #eef3f7; color: #1d3d52; font-weight: 600; }
.pe-option-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.pe-option-card__mark {
  width: 13px; height: 13px;
  border: 2px solid #c5cfd6;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.pe-option-card--active .pe-option-card__mark { border-color: #39607a; }
.pe-option-card--active .pe-option-card__mark::after {
  content: ''; position: absolute;
  inset: 2px; border-radius: 50%;
  background: #39607a;
}

/* ── Day grid ── */
.pe-day-grid { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-day-toggle {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 12px;
  border: 1px solid #e0dbd6;
  border-radius: 8px;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pe-day-toggle:hover { background: #f5f2ee; border-color: #d0cac3; }

/* ── Dana template bar ── */
.pe-template-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: #f8f8f8;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  margin-bottom: 8px;
}
.pe-template-bar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pe-template-bar__label {
  font-size: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
}
.pe-template-bar__save-btn {
  background: none;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--rim-text);
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.pe-template-bar__save-btn:hover:not(:disabled) { background: #efefef; border-color: #c0c0c0; }
.pe-template-bar__save-btn:disabled { opacity: 0.4; cursor: default; }
.pe-template-bar__save-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pe-template-bar__name-input {
  font-size: var(--text-ui);
  padding: 7px 10px;
  flex: 1;
  min-width: 140px;
  max-width: 220px;
}
.pe-template-bar__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pe-template-chip {
  display: inline-flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.pe-template-chip:hover { border-color: #b0b0b0; }
.pe-template-chip--builtin { background: #eef3f7; border-color: #c8d8e4; }
.pe-template-chip--builtin:hover { border-color: #9ab8cc; }
.pe-template-chip__name {
  background: none;
  border: none;
  border-right: 1px solid #d8d8d8;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text);
  padding: 5px 10px;
  line-height: 1.3;
  text-align: left;
}
.pe-template-chip--builtin .pe-template-chip__name { border-color: #c8d8e4; color: #2e4e63; }
.pe-template-chip__name:hover { background: rgba(0,0,0,0.04); }
.pe-template-chip__delete {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-ui);
  line-height: 1;
  color: #aaa;
  padding: 5px 9px;
  transition: color 0.15s, background 0.15s;
}
.pe-template-chip__delete:hover { color: #555; background: rgba(0,0,0,0.05); }
.pe-btn--ghost { background: transparent; border: 1px solid var(--rim-rule); color: var(--rim-text); }
.pe-btn--ghost:hover { background: #f5f5f5; }
.pe-template-bar__restore {
  background: none; border: none;
  font-size: var(--text-label); color: var(--rim-blue);
  cursor: pointer; text-decoration: underline; padding: 0;
  font-family: var(--font-sans);
}

/* ── Date + time picker ── */
.pe-datetime {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pe-datetime__date {
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  color: var(--rim-text);
  background: #fff;
  min-width: 0;
}
.pe-datetime__time {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pe-datetime__select {
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 10px 8px;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  color: var(--rim-text);
  background: #fff;
  cursor: pointer;
  appearance: auto;
}
.pe-datetime__select--ampm { min-width: 70px; }
.pe-datetime__colon { font-size: var(--text-body); font-weight: 600; color: var(--rim-text); line-height: 1; }
@media (max-width: 430px) {
  .pe-datetime { flex-direction: column; align-items: flex-start; }
}

/* ── Inline row ── */
.pe-inline-row { display: flex; align-items: center; gap: 8px; }

/* ── Image preview ── */
.pe-image-preview { margin-bottom: 8px; }
.pe-image-preview__img { max-width: 240px; max-height: 160px; border-radius: 8px; display: block; margin-bottom: 8px; }

/* ── Registration field builder ── */
.pe-reg-field {
  padding: 16px;
  background: #faf8f5;
  border-radius: 10px;
  margin-bottom: 10px;
}
.pe-reg-field__row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.pe-reg-field__row .pe-input { flex: 1; }
.pe-reg-field__actions { display: flex; gap: 6px; margin-top: 8px; }

/* ── Meet section ── */
.pe-meet-section { margin-top: 8px; padding-top: 16px; border-top: 1px solid #f0ebe5; }

/* ── Buttons ── */
.pe-btn {
  padding: 10px 20px;
  border: 1px solid #e0dbd6;
  border-radius: 8px;
  font-size: var(--text-ui); font-family: var(--font-sans);
  background: transparent;
  cursor: pointer;
  color: var(--rim-text-muted);
  transition: all 0.15s;
}
.pe-btn:hover { background: #f5f2ee; border-color: #d0cac3; color: var(--rim-text); }
.pe-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pe-btn--primary {
  background: var(--rim-blue); color: #fff; border: none;
  border-radius: 8px; padding: 10px 28px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(19,82,116,0.3);
  transition: all 0.2s ease;
}
.pe-btn--primary:hover {
  background: #0e4463;
  box-shadow: 0 2px 8px rgba(19,82,116,0.4);
  transform: translateY(-1px);
}
.pe-btn--danger { color: #991b1b; border-color: #f5cac5; }
.pe-btn--danger:hover { background: #fef2f2; border-color: #e8a8a0; }
.pe-btn--small { padding: 5px 12px; font-size: var(--text-label); }

/* ── Section divider (within tab, between conceptual groups) ── */
.pe-section-divider {
  margin: 24px 0 0;
  border-top: 1px solid var(--rim-rule);
}

/* ── Visibility tab options ── */
.pe-visibility-option {
  padding: 16px;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pe-visibility-option + .pe-visibility-option { margin-top: 0; }
.pe-checkbox__label { font-size: var(--text-small); font-weight: 600; color: var(--rim-text); }
.pe-visibility-option .pe-field__help { margin: 0; }
.pe-visibility-option .pe-checkbox { align-items: flex-start; gap: 10px; }

/* ── Dashboard schedule reveal ── */
.pe-visibility-schedule {
  margin-top: 16px;
  padding: 14px 16px;
  background: #f4f7fa;
  border-left: 3px solid var(--rim-blue);
  border-radius: 0 6px 6px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pe-visibility-schedule .pe-field__label { font-size: var(--text-xs); }
.pe-visibility-schedule .pe-field__help { margin: 0; }
.pe-visibility-schedule__clear {
  background: none; border: none; padding: 0;
  font-family: var(--font-sans); font-size: var(--text-label);
  color: #888; cursor: pointer; text-decoration: underline;
  text-align: left; margin-top: 4px;
}
.pe-visibility-schedule__clear:hover { color: var(--rim-text); }

/* ── Sticky save bar ── */
.pe-actions {
  display: flex; gap: 12px; align-items: center;
  position: sticky; bottom: 24px; z-index: 50;
  background: linear-gradient(180deg, #ffffff 0%, #faf8f5 100%);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
  padding: 16px 28px;
  margin-top: 20px;
  border: none;
}

/* ── Dialogs ── */
.pe-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.pe-dialog { background: #fff; border-radius: 12px; padding: 28px 32px; max-width: 440px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
.pe-dialog__text { font-size: var(--text-small); line-height: 1.6; margin: 0 0 20px; color: var(--rim-text); }
.pe-dialog__actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Program card wrapper + edit link */
.vol-card-wrap { position: relative; }
.vol-card__edit-link {
  position: absolute; top: 12px; right: 12px;
  font-size: var(--text-label);
  color: var(--rim-mid);
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid var(--rim-rule);
  border-radius: 3px;
  white-space: nowrap;
  z-index: 1;
}
.vol-card__edit-link:hover { background: var(--rim-bg-accent); color: var(--rim-blue); }

/* ── vol- programs table ── */
.vol-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.vol-table-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.vol-pill {
  font-family: 'Open Sans', sans-serif;
  font-size: var(--text-label);
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--rim-rule);
  background: #fff;
  color: var(--rim-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.vol-pill:hover { border-color: var(--rim-mid); color: var(--rim-mid); }
.vol-pill--active {
  background: var(--rim-mid);
  border-color: var(--rim-mid);
  color: #fff;
  font-weight: 600;
}
.vol-table-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vol-table-search {
  font-family: 'Open Sans', sans-serif;
  font-size: var(--text-xs);
  padding: 6px 12px;
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  width: 200px;
  background: #fff;
  color: var(--rim-text);
}
.vol-table-search:focus { outline: none; border-color: var(--rim-mid); }
.vol-table-search::placeholder { color: var(--rim-rule); }
.vol-add-btn { font-size: var(--text-xs) !important; padding: 6px 14px !important; white-space: nowrap; }

.vol-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Open Sans', sans-serif;
}
.vol-table__th {
  font-size: var(--text-xxs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rim-text-muted);
  padding: 8px 12px;
  text-align: left;
  border-bottom: 2px solid var(--rim-rule);
  white-space: nowrap;
}
.vol-table__th--right { text-align: right; }
.vol-table__row {
  transition: background 0.1s;
}
.vol-table__row:hover { background: var(--rim-bg-accent); }
.vol-table__row--archived { opacity: 0.55; }
.vol-table__td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rim-bg-accent);
  vertical-align: middle;
  font-size: var(--text-xs);
  color: var(--rim-text);
}
.vol-table__td--right { text-align: right; }
.vol-table__name {
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--rim-text);
  text-decoration: none;
  display: block;
  line-height: 1.3;
}
a.vol-table__name:hover { color: var(--rim-mid); }
.vol-table__tag {
  display: block;
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  line-height: 1.3;
  margin-top: 2px;
}

/* Format + registration badges */
.vol-badge {
  display: inline-block;
  font-size: var(--text-xxs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
.vol-badge--inperson { background: #d4edda; color: #155724; }
.vol-badge--virtual { background: #cce5ff; color: #004085; }
.vol-badge--hybrid { background: #fff3cd; color: #856404; }
.vol-badge--open { background: #d4edda; color: #155724; }
.vol-badge--closed { background: var(--rim-bg-accent); color: var(--rim-text-muted); }
.vol-badge--disabled { background: var(--rim-bg-accent); color: var(--rim-rule); }

/* Capacity mini bar */
.vol-cap { display: flex; align-items: center; gap: 8px; }
.vol-cap__bar {
  width: 60px;
  height: 4px;
  background: var(--rim-bg-accent);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.vol-cap__fill {
  height: 100%;
  background: var(--rim-mid);
  border-radius: 2px;
  transition: width 0.3s;
}
.vol-cap__fill--warn { background: #856404; }
.vol-cap__fill--full { background: #a83232; }
.vol-cap__text {
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  white-space: nowrap;
}

/* Flag pills */
.vol-flag {
  display: inline-block;
  font-size: var(--text-xxs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  margin-right: 4px;
}
.vol-flag--amber { background: #fff3cd; color: #856404; }
.vol-flag--spot { background: #d4edda; color: #155724; }

/* Row actions */
.vol-table__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.vol-table__action {
  font-family: 'Open Sans', sans-serif;
  font-size: var(--text-label);
  color: var(--rim-mid);
  text-decoration: none;
  padding: 3px 8px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 3px;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.vol-table__action:hover { background: var(--rim-bg-accent); color: var(--rim-blue); }
.vol-table__action--muted { color: var(--rim-text-muted); }
.vol-table__action--muted:hover { color: var(--rim-mid); }
.vol-table__action--danger { color: #a83232; }
.vol-table__action--danger:hover { background: #fdf0f0; }
.vol-table__action--disabled {
  color: var(--rim-rule);
  cursor: not-allowed;
  font-size: var(--text-label);
}

/* Confirmation overlay + dialog */
.vol-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.vol-dialog {
  background: #fff;
  border-radius: 8px;
  padding: 28px 32px 24px;
  max-width: 420px;
  width: 90%;
}
.vol-dialog__title {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--rim-text);
  margin: 0 0 8px;
}
.vol-dialog__body {
  font-family: 'Open Sans', sans-serif;
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}
.vol-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.vol-confirm-btn {
  font-family: 'Open Sans', sans-serif;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 4px;
  border: 1px solid var(--rim-rule);
  background: #fff;
  color: var(--rim-text);
  cursor: pointer;
  transition: background 0.1s;
}
.vol-confirm-btn:hover { background: var(--rim-bg-accent); }
.vol-confirm-btn--warn {
  background: #856404;
  border-color: #856404;
  color: #fff;
}
.vol-confirm-btn--warn:hover { background: #6d5303; }
.vol-confirm-btn--primary {
  background: var(--rim-mid);
  border-color: var(--rim-mid);
  color: #fff;
}
.vol-confirm-btn--primary:hover { background: var(--rim-blue); }
.vol-confirm-btn--danger {
  background: #a83232;
  border-color: #a83232;
  color: #fff;
}
.vol-confirm-btn--danger:hover { background: #8b2929; }

/* ── Programs table + ProgramEditor — tablet (768px) ── */
@media (max-width: 768px) {
  /* Programs list toolbar */
  .vol-table-toolbar { flex-direction: column; align-items: stretch; }
  .vol-table-right { width: 100%; }
  .vol-table-search { flex: 1; width: auto; }

  /* Programs list table: compact */
  .vol-table { font-size: var(--text-label); }
  .vol-table__th, .vol-table__td { padding: 8px 6px; }
  .vol-cap__bar { width: 40px; }

/* PE Open Access guest link */
/* Guest link uses inline styles — see ProgramEditor.tsx */

/* PE Teacher selector */
.pe-teacher-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.pe-teacher-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f5f3f0; padding: 4px 10px; border-radius: 6px;
  border: 1px solid #e0dcd6;
  font-size: var(--text-xs); color: var(--rim-text);
}
.pe-teacher-tag__remove {
  background: none; border: none; cursor: pointer;
  font-size: var(--text-ui); color: var(--rim-text-muted); padding: 0; line-height: 1;
}
.pe-teacher-tag__remove:hover { color: #991b1b; }
.pe-teacher-results {
  border: 1px solid #e0dcd6; border-radius: 8px;
  background: #fff; overflow: hidden; margin-top: 4px;
}
.pe-teacher-result {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border: none; background: none;
  font-size: var(--text-xs); cursor: pointer; color: var(--rim-text);
}
.pe-teacher-result:hover { background: #f5f3f0; }
.pe-teacher-result + .pe-teacher-result { border-top: 1px solid #f0ebe5; }

  /* ProgramEditor */
  .pe-tabs { gap: 0; -webkit-overflow-scrolling: touch; }
  .pe-tabs__tab { padding: 8px 10px; font-size: var(--text-xs); white-space: nowrap; flex-shrink: 0; }
  .pe-radio-group { flex-direction: column; gap: 8px; }
  .pe-option-cards { flex-direction: column; gap: 6px; }
  .pe-option-card { width: 100%; }
  .pe-reg-field__row { flex-direction: column; }
  .pe-reg-field__row .pe-select { max-width: 100%; }
  .pe-inline-row { flex-wrap: wrap; }
  .pe-slug-row { flex-wrap: wrap; }
  .pe-slug-row .pe-input { min-width: 0; }
  .pe-input--narrow { max-width: 100%; }
  .pe-select { max-width: 100%; }
  .pe-select--narrow { max-width: 100%; }

  /* VolunteerTable — stat bar flex-wrap at tablet */
  .vol-stat-bar { flex-wrap: wrap; }
  .vol-reminder-section { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ── Category ordering (catord-) ── */

.catord__title {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 6px;
}
.catord__desc {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 0 0 24px;
}
.catord__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.catord__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
}
.catord__row--hidden { opacity: 0.5; }
.catord__arrows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.catord__arrow {
  font-size: var(--text-ui);
  width: 28px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rim-bg);
  border: 1px solid var(--rim-rule);
  border-radius: 4px;
  cursor: pointer;
  color: var(--rim-text-muted);
  transition: background 0.1s;
}
.catord__arrow:hover:not(:disabled) { background: #e0e0e0; color: var(--rim-text); }
.catord__arrow:disabled { opacity: 0.3; cursor: default; }
.catord__info { display: flex; flex-direction: column; gap: 2px; }
.catord__name {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--rim-text);
}
.catord__count {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
}
.catord__delete {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 16px;
  color: var(--rim-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.1s, background 0.1s;
}
.catord__delete:hover { color: #c23b3b; background: #fef2f2; }
.catord__delete:disabled { opacity: 0.3; cursor: default; }

.catord__add {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.catord__add-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text);
  background: #fff;
}
.catord__add-input:focus { border-color: var(--rim-mid); outline: none; }
.catord__add-btn {
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--rim-blue);
  background: none;
  border: 1px solid var(--rim-blue);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s;
}
.catord__add-btn:hover:not(:disabled) { background: #f0f4f7; }
.catord__add-btn:disabled { opacity: 0.4; cursor: default; }

.catord__saving {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin-top: 8px;
}

/* ── Programs table — phone card layout (430px) ── */
@media (max-width: 430px) {
  /* ── ProgramsTableClient: table → cards ── */
  .vol-table,
  .vol-table thead,
  .vol-table tbody,
  .vol-table tr,
  .vol-table th,
  .vol-table td { display: block; }
  .vol-table thead { display: none; }

  .vol-table__row {
    padding: 14px 16px;
    border-bottom: 1px solid var(--rim-rule);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .vol-table__row--archived { opacity: 0.55; }

  .vol-table__td { padding: 0; border: none; vertical-align: unset; }
  .vol-table__td--right { text-align: left; }

  /* Program name + tagline stacked */
  .vol-table__name { font-size: var(--text-small); }
  .vol-table__tag { display: block; margin-top: 2px; }

  /* Badges + capacity inline row */
  .vol-table__row .vol-badge { font-size: var(--text-xxs); }
  .vol-cap { gap: 6px; }
  .vol-cap__bar { width: 50px; }

  /* Flags: wrap */
  .vol-flag { font-size: var(--text-xxs); }

  /* Actions: inline, 44px touch targets */
  .vol-table__actions { gap: 4px; }
  .vol-table__action {
    padding: 10px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: var(--text-ui);
    box-sizing: border-box;
  }

  /* Filter pills: horizontal scroll */
  .vol-table-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .vol-pill {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 14px;
    min-height: 44px;
    font-size: var(--text-xs);
    box-sizing: border-box;
  }

  /* Search + Add: full-width stacked */
  .vol-table-right { flex-direction: column; }
  .vol-table-search { width: 100%; font-size: 16px; padding: 12px 14px; }
  .vol-add-btn { width: 100%; text-align: center; padding: 12px 14px !important; min-height: 44px; box-sizing: border-box; }

  /* Confirmation dialog */
  .vol-dialog { padding: 20px; }
  .vol-dialog__actions { flex-direction: column; }
  .vol-confirm-btn { width: 100%; min-height: 44px; text-align: center; }

  /* ── VolunteerTable — phone enhancements ── */
  /* Action buttons: 44px min */
  .vol-action-btn { padding: 12px 16px; min-height: 44px; font-size: var(--text-ui); }
  .vol-save-btn { padding: 12px 16px; min-height: 44px; font-size: var(--text-ui); }
  .vol-csv-btn { padding: 12px 16px; min-height: 44px; font-size: var(--text-ui); }

  /* Filter pills: 44px */
  .vol-filter { padding: 10px 14px; min-height: 44px; font-size: var(--text-xs); }

  /* Promote inline: bigger touch target */
  .vol-promote-inline { padding: 8px 12px; min-height: 36px; font-size: var(--text-xs); }

  /* Inputs: 16px for iOS zoom prevention */
  .vol-notes { font-size: 16px; }
  .vol-search { font-size: 16px; padding: 12px 14px; }
  .vol-field-edit__input,
  .vol-field-edit__select { font-size: 16px; padding: 8px 10px; }
  .vol-field-edit__textarea { font-size: 16px; }

  /* Stat bar: wrap + reduce */
  .vol-stat-bar { gap: 12px; flex-wrap: wrap; }
  .vol-stat-bar__item { min-width: 60px; }
  .vol-stat-bar__capacity { width: 100%; margin-left: 0; }

  /* Reminder section: stack */
  .vol-reminder-section { flex-direction: column; align-items: flex-start; gap: 10px; }
  .vol-reminder-bulk-btn { min-height: 44px; padding: 10px 16px; }
  .vol-reminder-meta { gap: 8px; }

  /* Spot opened alert */
  .vol-spot-opened { padding: 12px 14px; font-size: var(--text-ui); }

  /* ── ProgramEditor — phone ── */
  .pe-editor { padding: 0 4px; }
  .pe-editor__header { flex-direction: column; gap: 6px; }
  .pe-editor__title { font-size: var(--text-h4); }

  /* Inputs: 16px for iOS */
  .pe-input { font-size: 16px; }
  .pe-textarea { font-size: 16px; }
  .pe-select { font-size: 16px; max-width: 100%; }

  /* Buttons: full-width, 48px */
  .pe-actions { flex-direction: column; }
  .pe-actions .pe-btn { width: 100%; min-height: 48px; justify-content: center; text-align: center; font-size: var(--text-small); }
  .pe-btn { min-height: 44px; }

  /* Day toggles: bigger touch targets */
  .pe-day-toggle { padding: 8px 10px; min-height: 44px; min-width: 44px; }

  /* Dialog */
  .pe-dialog { padding: 20px; }
  .pe-dialog__actions { flex-direction: column; }
  .pe-dialog__actions .pe-btn { width: 100%; text-align: center; justify-content: center; }

}


/* ═══════════════════════════════════════════════════
   SUPPORT INBOX (si-)
   Three-column email client for support@rootedinmindfulness.org
   List (300px) | Messages + Composer | Sidebar (280px, collapsible)
═══════════════════════════════════════════════════ */

/* ── Break out of hub-main container for inbox ── */
.hub-main__content:has(.si-layout) {
  padding: 0;
}

/* ── Root layout — full height below hub tabs ── */
.si-layout {
  display: flex;
  height: calc(100vh - 164px);
  background: var(--rim-bg);
  position: relative;
  gap: 1px;
}

/* ── Left: thread list ── */
.si-list {
  width: clamp(320px, 25vw, 400px);
  min-width: 320px;
  border-right: none;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px 0 0 8px;
  position: relative;
  transition: width 0.2s, min-width 0.2s;
  margin: 8px 0 8px 8px;
}

/* Collapsed list */
.si-layout--list-collapsed .si-list {
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  margin-left: 0;
  padding: 0;
}
.si-layout--list-collapsed .si-main {
  border-radius: 8px;
  margin-left: 0;
}

/* List collapse/expand toggle */
.si-list-toggle {
  display: none; /* shown via media query on desktop */
  align-items: center;
  justify-content: center;
  width: 16px;
  flex-shrink: 0;
  background: var(--rim-bg);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s;
  z-index: 6;
  margin: 8px 0;
  border-radius: 4px;
}
.si-list-toggle:hover {
  background: #e0dbd4;
  width: 20px;
}
.si-list-toggle__icon {
  font-size: 9px;
  color: var(--rim-text-muted);
  line-height: 1;
  transition: color 0.15s;
}
.si-list-toggle:hover .si-list-toggle__icon {
  color: var(--rim-text);
}
/* When collapsed — more prominent so it's findable */
.si-list-toggle--collapsed {
  width: 28px;
  background: #e8e2d8;
  border-radius: 0 6px 6px 0;
}
.si-list-toggle--collapsed:hover {
  width: 32px;
  background: #d8d0c5;
}
.si-list-toggle--collapsed .si-list-toggle__icon {
  font-size: var(--text-xxs);
}

/* Drag handle between list and center */
.si-drag-handle {
  width: 5px;
  flex-shrink: 0;
  cursor: col-resize;
  background: var(--rim-bg);
  position: relative;
  z-index: 3;
  transition: background 0.15s;
  margin: 8px 0;
}
.si-drag-handle:hover {
  background: #d0ccc5;
}
.si-drag-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 1px;
  width: 3px;
  height: 24px;
  transform: translateY(-50%);
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  opacity: 0;
  transition: opacity 0.15s;
}
.si-drag-handle:hover::after { opacity: 1; }

@media (min-width: 769px) {
  .si-list-toggle { display: flex; }
}

/* New Email button */
.si-compose-row {
  padding: 10px 12px 0;
}
.si-compose-row .si-btn--compose {
  width: 100%;
  padding: 7px 12px;
  font-size: var(--text-xs);
}

.si-toolbar {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #f0ede8;
}

.si-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 4px;
}
.si-filters__primary {
  display: flex;
  gap: 3px;
}
.si-filters__utils {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

/* Filter buttons */
.si-filter-btn {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid #e8e4de;
  background: transparent;
  color: var(--rim-text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.si-filter-btn:hover { background: var(--rim-bg-accent); }
.si-filter-btn--active {
  background: #2e3d35;
  color: #fff;
  border-color: #2e3d35;
}

/* Utility buttons (trash, sync) */
.si-util-btn {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  width: 28px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8e4de;
  border-radius: 6px;
  background: transparent;
  color: var(--rim-text-muted);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
.si-util-btn:hover { background: var(--rim-bg-accent); color: var(--rim-text); }
.si-util-btn:disabled { opacity: 0.5; cursor: default; }
.si-util-btn--active {
  background: #2e3d35;
  color: #fff;
  border-color: #2e3d35;
}

.si-search { padding: 6px 12px; border-bottom: 1px solid #f0ede8; }
.si-search__input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  padding: 6px 10px;
  border: 1px solid #e8e4de;
  border-radius: 4px;
  background: #f9f7f4;
  color: var(--rim-text);
  outline: none;
}
.si-search__input:hover { background: #fff; }
.si-search__input:focus { border-color: var(--rim-mid); }
.si-search__input::placeholder { color: var(--rim-text-muted); }

/* Thread list — scrolls independently */
.si-thread-list {
  flex: 1;
  overflow-y: auto;
}

.si-loading,
.si-empty-list {
  padding: 32px 16px;
  text-align: center;
  color: var(--rim-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}

/* ── Thread rows (redesigned) ── */
.si-thread-row {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid #f0ede8;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.1s;
}
.si-thread-row:hover { background: #f0f0f0; }
.si-thread-row--active { background: #f0ede8; }

.si-thread-row__indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.si-thread-row__body {
  flex: 1;
  min-width: 0;
}
.si-thread-row__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}
.si-thread-row__sender {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rim-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.si-thread-row__time {
  font-size: var(--text-xxs);
  color: var(--rim-text-muted);
  flex-shrink: 0;
  margin-left: 8px;
}
.si-thread-row__subject {
  font-size: 0.825rem;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}
.si-thread-row__snippet {
  font-size: 0.775rem;
  color: #777;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}
.si-thread-row__chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Chips */
.si-chip {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.si-chip--unassigned {
  color: #8a7a6d;
  background: #ece8e2;
}
.si-chip--assignee {
  color: #4a7fa5;
  background: rgba(74, 127, 165, 0.1);
}
.si-chip--member {
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.1);
}
.si-chip--count {
  color: var(--rim-text-muted);
  background: var(--rim-bg-accent);
}

/* Status dot (used in contact history) */
.si-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Center: main panel ── */
.si-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border-radius: 0 8px 8px 0;
  margin: 8px 8px 8px 0;
}

.si-main__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--rim-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
}

/* ── Thread header — consolidated status + actions ── */
.si-thread-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #e8e4de;
  flex-shrink: 0;
}
.si-thread-header__meta {
  min-width: 0;
}
.si-thread-header__subject {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 2px;
  line-height: 1.3;
}
.si-thread-header__sender {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: #666;
}
.si-thread-header__email {
  color: #999;
}
.si-thread-header__time {
  color: #999;
}
.si-thread-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Status chip */
.si-status-chip {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.si-status-chip[data-status="OPEN"] { background: #b85c44; color: #fff; }
.si-status-chip[data-status="CLAIMED"] { background: #4a7fa5; color: #fff; }
.si-status-chip[data-status="WAITING"] { background: #c8882a; color: #fff; }
.si-status-chip[data-status="CLOSED"] { background: #7f8c8d; color: #fff; }
.si-status-chip[data-status="DELETED"] { background: #95a5a6; color: #fff; }

/* Action buttons */
.si-action-btn {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #fff;
  color: var(--rim-text);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.si-action-btn:hover { background: var(--rim-bg-accent); }
.si-action-btn--primary {
  background: #3d6b8a;
  color: #fff;
  border-color: #3d6b8a;
}
.si-action-btn--primary:hover {
  background: var(--rim-blue);
  border-color: var(--rim-blue);
}
.si-action-btn--more {
  font-size: var(--text-ui);
  letter-spacing: 2px;
  padding: 5px 8px;
}
.si-action-btn--note {
  background: #fef9eb;
  border-color: #e8d48b;
  color: #8b6914;
}
.si-action-btn--note:hover {
  background: #fdf3d7;
}
.si-action-btn--note-active {
  background: #fdf3d7;
  border-color: #c89220;
  color: #7a5a10;
}

/* More menu dropdown */
.si-more-wrap {
  position: relative;
}
.si-more-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 6px;
  z-index: 30;
  margin-top: 4px;
  overflow: hidden;
}
.si-more-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.1s;
}
.si-more-menu__item:hover { background: var(--rim-bg-accent); }
.si-more-menu__item--danger {
  color: #b85c44;
}
.si-more-menu__item--danger:hover { background: #fdf2f2; }
.si-more-menu__section {
  padding: 8px 14px;
}
.si-more-menu__label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rim-text-muted);
  margin-bottom: 4px;
  display: block;
}
.si-more-menu__select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  padding: 4px 6px;
  border: 1px solid #e8e4de;
  border-radius: 4px;
  background: #fff;
  color: var(--rim-text);
}
.si-more-menu__divider {
  border: none;
  border-top: 1px solid #e8e4de;
  margin: 0;
}

/* Sidebar toggle */
.si-sidebar-toggle {
  font-size: var(--text-ui);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8e4de;
  border-radius: 4px;
  background: transparent;
  color: var(--rim-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
  line-height: 1;
}
.si-sidebar-toggle:hover { background: var(--rim-bg-accent); color: var(--rim-text); }

/* Empty state (no Gmail connected) */
.si-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--rim-text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: 1.6;
}
.si-link { color: var(--rim-mid); text-decoration: underline; }

/* ── Timeline — scrolls independently ── */
.si-timeline {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Messages */
.si-message {
  background: #f9f7f4;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.si-message--outbound {
  background: #f0f4f8;
}
.si-message__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 16px;
}
.si-message--outbound .si-message__header {
  /* inherits from parent background */
}
.si-message__from {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--rim-text);
}
.si-message__date {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  color: var(--rim-text-muted);
}
.si-message__body {
  padding: 0 16px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: 1.6;
  color: var(--rim-text);
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Force all email HTML descendants to inherit our font */
.si-message__body * {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
.si-message__body h1,
.si-message__body h2,
.si-message__body h3,
.si-message__body h4 {
  font-size: var(--text-ui) !important;
  font-weight: 600;
  margin: 12px 0 4px;
}
.si-message__body img { max-width: 100%; height: auto; }
.si-message__body blockquote {
  margin: 8px 0;
  padding-left: 12px;
  border-left: 3px solid #ddd;
  color: var(--rim-text-muted);
  font-size: var(--text-xs) !important;
}
.si-message__body blockquote * {
  font-size: var(--text-xs) !important;
  color: var(--rim-text-muted);
}
.si-message__body table { max-width: 100%; table-layout: fixed; }
.si-message__body pre { white-space: pre-wrap; overflow-wrap: break-word; }

/* Quote toggle */
.si-quote-toggle {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  background: var(--rim-bg-accent);
  border: none;
  border-radius: 4px;
  padding: 2px 12px;
  cursor: pointer;
  margin-top: 4px;
  letter-spacing: 2px;
  transition: background 0.15s;
}
.si-quote-toggle:hover { background: #ddd7d0; }

/* Internal notes */
.si-note {
  border: 1px dashed var(--color-alert-border);
  border-radius: 6px;
  background: var(--color-alert-bg);
  overflow: hidden;
  flex-shrink: 0;
}
.si-note__header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px dashed var(--color-alert-border);
}
.si-note__label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-alert);
}
.si-note__author {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--rim-text);
}
.si-note__date {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  color: var(--rim-text-muted);
  margin-left: auto;
}
.si-note__body {
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: 1.6;
  color: var(--rim-text);
}
.si-note__body * {
  font-family: inherit !important;
  font-size: inherit !important;
}

/* ── Composer — anchored to bottom ── */
.si-composer {
  flex-shrink: 0;
  margin: 0 16px 16px;
  background: #f9f7f4;
  border-radius: 8px;
  border: 1px solid #e8e4de;
}

/* Collapsed prompt */
.si-composer__prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-mid);
  padding: 14px 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
  border-radius: 8px;
}
.si-composer__prompt::before {
  content: "↩";
  font-size: 16px;
  color: var(--rim-mid);
  opacity: 0.5;
}
.si-composer__prompt:hover {
  background: #f0ede8;
  color: var(--rim-text);
}
.si-composer__prompt:hover::before {
  opacity: 1;
}

/* Expanded reply composer */
.si-composer__editor {
  padding: 12px 14px 8px;
  border-bottom: 1px solid #eae6e0;
}
.si-composer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
}
.si-composer__actions-left { display: flex; gap: 6px; align-items: center; }
.si-composer__actions-right { display: flex; gap: 10px; align-items: center; }

/* ── Note composer — appears above timeline, amber throughout ── */
.si-note-composer {
  flex-shrink: 0;
  background: #fef9eb;
  border-bottom: 2px solid #c89220;
}
.si-note-composer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid #e8d48b;
}
.si-note-composer__label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 600;
  color: #7a5a10;
}
.si-note-composer__close {
  font-size: var(--text-body);
  line-height: 1;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #7a5a10;
  cursor: pointer;
}
.si-note-composer__close:hover { background: #f5e6b8; }
.si-note-composer__editor {
  padding: 8px 14px;
}
.si-note-composer__editor .ProseMirror {
  background: #fffdf5;
}
.si-note-composer__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 14px 8px;
}

/* Buttons */
.si-btn {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #fff;
  color: var(--rim-text);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.si-btn:hover { background: var(--rim-bg-accent); }
.si-btn:disabled { opacity: 0.5; cursor: default; }
.si-btn--send {
  background: #3d6b8a;
  color: #fff;
  border-color: #3d6b8a;
  padding: 6px 16px;
  font-size: var(--text-label);
  border-radius: 6px;
}
.si-btn--send:hover { background: var(--rim-blue); border-color: var(--rim-blue); }
.si-btn--note { background: var(--color-alert); color: #fff; border-color: var(--color-alert); }
.si-btn--note:hover { background: #b07316; border-color: #b07316; }

/* ── Right: sidebar (overlay) ── */
.si-sidebar-backdrop {
  display: none;
}
.si-sidebar {
  width: 260px;
  min-width: 260px;
  background: #fff;
  overflow-y: auto;
  padding: 12px 14px;
  font-family: var(--font-sans);
  flex-shrink: 0;
  border-left: 1px solid #e8e4de;
  border-radius: 0 8px 8px 0;
  margin: 8px 8px 8px 0;
  position: relative;
}
.si-sidebar__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--rim-text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
}
.si-sidebar__close:hover {
  background: #f0ede8;
  color: var(--rim-text);
}

/* On screens < 1400px, sidebar overlays */
@media (max-width: 1399px) {
  .si-sidebar {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
    margin: 0;
    border-radius: 0;
    border-left: 1px solid #e8e4de;
  }
  .si-sidebar-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    z-index: 19;
    border-radius: 8px;
  }
}

/* When sidebar is open on wide screens, center panel loses right radius */
@media (min-width: 1400px) {
  .si-layout--sidebar-open .si-main {
    border-radius: 0;
    margin-right: 0;
  }
  .si-layout--sidebar-open .si-sidebar {
    margin-left: 0;
  }
}

/* On wide screens, sidebar is persistent (no backdrop needed) */
@media (min-width: 1400px) {
  .si-sidebar-backdrop {
    display: none;
  }
}

.si-sidebar__section {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eae6e0;
}
.si-sidebar__section:last-child { border-bottom: none; margin-bottom: 0; }
.si-sidebar__section--muted {
  opacity: 0.7;
}

.si-sidebar__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rim-text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.si-sidebar__value {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--rim-text);
}
.si-sidebar__meta {
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  margin-top: 2px;
}

.si-sidebar .si-select {
  width: 100%;
  font-size: var(--text-label);
  padding: 5px 8px;
  border: 1px solid #e0dbd4;
  border-radius: 4px;
  background: #fff;
  font-family: var(--font-sans);
  color: var(--rim-text);
}

.si-member-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rim-mid);
  background: rgba(19, 82, 116, 0.1);
  padding: 1px 6px;
  border-radius: 8px;
  margin-top: 4px;
}

/* Registration list in sidebar */
.si-sidebar__regs { margin-top: 8px; }
.si-sidebar__reg {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  gap: 8px;
}
.si-sidebar__reg-title {
  font-size: var(--text-label);
  color: var(--rim-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.si-sidebar__reg-status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}
.si-sidebar__reg-status[data-status="CONFIRMED"] { color: var(--color-success); }
.si-sidebar__reg-status[data-status="CANCELLED"] { color: #7f8c8d; }
.si-sidebar__reg-status[data-status="WAITLISTED"] { color: var(--color-alert); }
.si-sidebar__reg-status[data-status="PENDING"] { color: var(--rim-mid); }

.si-sidebar__show-more {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--rim-mid);
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  text-decoration: underline;
}
.si-sidebar__show-more:hover { color: var(--rim-blue); }

/* Sidebar notes section */
.si-sidebar__note-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-alert);
  background: var(--color-alert-bg);
  padding: 0 5px;
  border-radius: 8px;
  line-height: 1.6;
}
.si-sidebar__notes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.si-sidebar__note-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 8px;
  background: none;
  border: 1px solid #e8d48b;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.1s;
  width: 100%;
  text-align: left;
}
.si-sidebar__note-row:hover { background: #fef9eb; }
.si-sidebar__note-author {
  font-size: var(--text-label);
  font-weight: 600;
  color: #7a5a10;
}
.si-sidebar__note-date {
  font-size: var(--text-xxs);
  color: var(--rim-text-muted);
}

/* Note flash animation (click-to-scroll highlight) */
.si-note--flash {
  animation: si-flash 1.5s ease-out;
}
@keyframes si-flash {
  0% { outline: 2px solid var(--color-alert); outline-offset: 2px; }
  100% { outline: 2px solid transparent; outline-offset: 2px; }
}

/* Sidebar danger zone */
.si-sidebar__danger {
  border-bottom: none;
}
.si-sidebar__danger-link {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: #b85c44;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.si-sidebar__danger-link:hover { color: #8b3a28; }

/* ── Tablet: single-column list↔detail toggle ── */
@media (max-width: 768px) {
  .si-layout { flex-direction: column; height: auto; min-height: 100vh; gap: 0; }
  .si-list {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid #e8e4de;
    margin: 0;
    border-radius: 0;
  }
  .si-main { margin: 0; border-radius: 0; }
  .si-sidebar { display: none; }
  .si-sidebar-backdrop { display: none; }
  .si-drag-handle { display: none; }
  .si-list-toggle { display: none !important; }
  .si-list { width: 100% !important; min-width: 0 !important; }
  .si-thread-header { padding: 12px 14px; }
  .si-timeline { padding: 12px 14px; }

  /* Mobile back button */
  .si-back-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    color: var(--rim-mid);
    background: transparent;
    border: none;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #e8e4de;
  }
  .si-back-btn:hover { background: var(--rim-bg-accent); }

  .si-layout--detail-open .si-list { display: none; }
  .si-layout--detail-open .si-main { min-height: 100vh; }
  .si-layout:not(.si-layout--detail-open) .si-main { display: none; }
}

/* Hide back button on desktop */
@media (min-width: 769px) {
  .si-back-btn { display: none; }
}

@media (max-width: 430px) {
  .si-search__input { font-size: 16px; }
  .si-select { font-size: 16px; }
  .si-btn { min-height: 44px; }
  .si-filter-btn { min-height: 36px; display: flex; align-items: center; }
  .si-action-btn { min-height: 44px; }
  .si-settings__input { font-size: 16px; }
}

/* ── Settings page ── */
.si-settings { max-width: 640px; padding: 24px 0; }
.si-settings__section { margin-bottom: 40px; }
.si-settings__heading {
  font-family: var(--font-serif);
  font-size: var(--text-h4);
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 8px;
}
.si-settings__desc {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.si-settings__value {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text);
}
.si-settings__meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin-top: 4px;
}
.si-settings__success {
  background: var(--color-success-bg);
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  color: var(--color-success);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
}
.si-settings__form { display: flex; flex-direction: column; gap: 16px; }
.si-settings__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--rim-text);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.si-settings__optional { font-weight: 400; color: var(--rim-text-muted); }
.si-settings__input {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  padding: 8px 12px;
  border: 1px solid #e8e4de;
  border-radius: 6px;
  background: #fff;
  color: var(--rim-text);
}
.si-settings__input:focus { border-color: var(--rim-mid); outline: none; }
.si-settings__preview {
  border: 1px solid #e8e4de;
  border-radius: 6px;
  overflow: hidden;
}
.si-settings__preview-label {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rim-text-muted);
  padding: 8px 12px;
  background: var(--rim-bg);
  border-bottom: 1px solid #e8e4de;
}
.si-settings__preview-body {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: 1.6;
  color: #666;
  padding: 12px;
}
.si-settings__actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.si-settings__saved {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-success);
  font-weight: 600;
}
.si-settings__toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text);
  cursor: pointer;
}
.si-settings__toggle-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--rim-mid);
  cursor: pointer;
}

/* ── Attachment chips ── */
.si-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 16px;
}
.si-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--rim-bg-accent);
  border: 1px solid #e8e4de;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.si-attachment-chip:hover {
  background: #ddd7d0;
}
.si-attachment-chip__icon {
  font-size: var(--text-ui);
  flex-shrink: 0;
}
.si-attachment-chip__name {
  font-weight: 600;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.si-attachment-chip__size {
  color: var(--rim-text-muted);
  white-space: nowrap;
}

/* ── Staged file attachments (composer) ── */
.si-staged-files {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 16px;
  background: var(--rim-bg);
  border-top: 1px solid #e8e4de;
}
.si-staged-file {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text);
  padding: 4px 8px;
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 4px;
}
.si-staged-file--error {
  border-color: #c0392b;
  background: #fdf2f2;
}
.si-staged-file__icon { font-size: var(--text-ui); flex-shrink: 0; }
.si-staged-file__name {
  font-weight: 600;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.si-staged-file__size { color: var(--rim-text-muted); white-space: nowrap; }
.si-staged-file__status { color: var(--rim-mid); font-style: italic; }
.si-staged-file__status--error { color: var(--color-error); }
.si-staged-file__remove {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 16px;
  color: var(--rim-text-muted);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.si-staged-file__remove:hover { color: #c0392b; }

.si-composer__error {
  padding: 6px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-error);
  background: var(--color-error-bg);
}

.si-btn--attach {
  background: none;
  border: 1px solid #e8e4de;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.si-btn--attach:hover { background: var(--rim-bg-accent); }

/* ── Compose button ── */
.si-btn--compose {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 5px 12px;
  background: #3d6b8a;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.si-btn--compose:hover { background: var(--rim-blue); }

.si-btn--template {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  padding: 5px 12px;
  background: none;
  border: 1px solid #e8e4de;
  border-radius: 4px;
  color: var(--rim-text-muted);
  cursor: pointer;
  transition: background 0.15s;
}
.si-btn--template:hover { background: var(--rim-bg-accent); }

/* ── Compose modal ── */
.si-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.si-modal {
  background: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.si-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e8e4de;
}
.si-modal__title {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 600;
  margin: 0;
  color: var(--rim-text);
}
.si-modal__close {
  background: none;
  border: none;
  font-size: var(--text-h3);
  color: var(--rim-text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.si-modal__close:hover { color: var(--rim-text); }

.si-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.si-modal__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.si-modal__field--editor {
  flex: 1;
  min-height: 0;
}
.si-modal__label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rim-text-muted);
}
.si-modal__static {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  padding: 6px 0;
}
.si-modal__input {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  padding: 8px 12px;
  border: 1px solid #e8e4de;
  border-radius: 4px;
  color: var(--rim-text);
  outline: none;
}
.si-modal__input:focus {
  border-color: var(--rim-mid);
}

/* Multi-recipient chip input */
.si-modal__to-wrap {
  position: relative;
}
.si-modal__to-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid #e8e4de;
  border-radius: 4px;
  background: #fff;
  min-height: 38px;
  align-items: center;
  cursor: text;
}
.si-modal__to-chips:focus-within {
  border-color: var(--rim-mid);
}
.si-modal__to-input {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  border: none;
  outline: none;
  background: transparent;
  color: var(--rim-text);
  flex: 1;
  min-width: 120px;
  padding: 2px 4px;
}
.si-modal__to-input::placeholder { color: var(--rim-text-muted); }
.si-recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--rim-text);
  background: var(--rim-bg-accent);
  padding: 2px 4px 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
}
.si-recipient-chip__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--rim-text-muted);
  font-size: var(--text-ui);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: all 0.1s;
}
.si-recipient-chip__remove:hover {
  background: rgba(0,0,0,0.08);
  color: var(--rim-text);
}

/* Typeahead dropdown */
.si-modal__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e8e4de;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}
.si-modal__dropdown-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rim-bg-accent);
  cursor: pointer;
  font-family: var(--font-sans);
}
.si-modal__dropdown-item:hover {
  background: var(--rim-bg-accent);
}
.si-modal__dropdown-item:last-child {
  border-bottom: none;
}
.si-modal__dropdown-name {
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--rim-text);
}
.si-modal__dropdown-email {
  font-size: var(--text-label);
  color: var(--rim-text-muted);
}

.si-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid #e8e4de;
  gap: 10px;
}

/* ── Template list (settings) ── */
.si-tpl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.si-tpl-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 6px;
}
.si-tpl-item__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.si-tpl-item__name {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--rim-text);
}
.si-tpl-item__subject {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.si-tpl-item__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.si-btn--small {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  padding: 4px 10px;
  border: 1px solid #e8e4de;
  border-radius: 4px;
  background: none;
  color: var(--rim-text-muted);
  cursor: pointer;
  transition: background 0.15s;
}
.si-btn--small:hover { background: var(--rim-bg-accent); }
.si-btn--danger { color: #b85c44; border-color: #e0c4c4; }
.si-btn--danger:hover { background: #fdf2f2; }

.si-tpl-editor {
  border: 1px solid #e8e4de;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}
.si-tpl-editor__header {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rim-text-muted);
  padding: 10px 14px;
  background: var(--rim-bg);
  border-bottom: 1px solid #e8e4de;
}
.si-tpl-editor .si-settings__form {
  padding: 14px;
}

/* ── Template picker dropdown (inbox) ── */
.si-tpl-picker {
  position: relative;
  display: inline-block;
}
.si-tpl-picker__dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  min-width: 240px;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e8e4de;
  border-radius: 6px;
  margin-bottom: 4px;
  z-index: 20;
}
.si-tpl-picker__dropdown--up {
  bottom: 100%;
  top: auto;
}
.si-tpl-picker__empty {
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  text-align: center;
}
.si-tpl-picker__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 14px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--rim-bg-accent);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 0.1s;
}
.si-tpl-picker__item:last-child { border-bottom: none; }
.si-tpl-picker__item:hover { background: var(--rim-bg-accent); }
.si-tpl-picker__name {
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--rim-text);
}
.si-tpl-picker__subject {
  font-size: var(--text-label);
  color: var(--rim-text-muted);
}

/* ── Contact history (sidebar) ── */
.si-contact-history {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.si-contact-history__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: none;
  border: 1px solid #e0dbd4;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition: background 0.1s;
}
.si-contact-history__item:hover { background: var(--rim-bg-accent); }
.si-contact-history__subject {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--rim-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.si-contact-history__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-label);
  color: var(--rim-text-muted);
}

/* Mobile: full-screen modal */
@media (max-width: 600px) {
  .si-modal-overlay { padding: 0; }
  .si-modal {
    max-width: none;
    max-height: none;
    height: 100vh;
    border-radius: 0;
  }
}

/* Coordinator section — sv-coordinator-section */
/* Coordinator section — only renders for HOST_MANAGER / ADMIN.
   De-emphasized: smaller, muted, below a clear divider. Not competing with live content. */
.sv-coordinator-divider {
  border: none;
  border-top: 1px solid #e4e0da;
  margin: 36px 0 20px;
}

.sv-coordinator-section {
  /* no padding-top — divider above handles separation */
}

.sv-coordinator-label {
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b0a89e;
  margin: 0 0 10px;
}

.sv-coordinator-missing {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}

.sv-coordinator-link {
  font-size: var(--text-ui);
  color: var(--rim-mid);
  text-decoration: none;
}
.sv-coordinator-link:hover { text-decoration: underline; }
.sv-meet-account {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 6px 0 0;
}
.sv-meet-account-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 4px 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   crs- — Series (Course) public page  /course/[slug]
   Follows the lp- (lesson page) design language: warm bg, centered serif
   header, 640px reading column, editorial feel — no dark hero bar.
   ──────────────────────────────────────────────────────────────────────────── */

.crs-page {
  background: var(--rim-bg);
  min-height: 60vh;
}

/* ── Header — mirrors lp-header ── */
.crs-header {
  padding: 80px 24px 56px;
  text-align: center;
}
.crs-header__inner {
  max-width: var(--reading-width);
  margin: 0 auto;
}
.crs-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 16px;
}
.crs-title {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--rim-text);
  margin: 0 0 10px;
}
.crs-teacher-byline {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 0 0 20px;
  letter-spacing: 0.01em;
}
.crs-desc {
  font-family: var(--font-sans);
  font-size: 17px;
  color: var(--rim-text-muted);
  line-height: 1.7;
  text-align: left;
  max-width: 520px;
  margin: 0 auto;
}
.crs-desc p { margin: 0 0 12px; }
.crs-desc p:last-child { margin-bottom: 0; }

/* ── Divider between header and lesson list ── */
.crs-rule {
  max-width: var(--reading-width);
  margin: 0 auto;
  border: none;
  border-top: 1px solid #ddd8d2;
}

/* ── Lessons column ── */
.crs-lessons {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 8px 24px 96px;
}

/* ── Table of contents ── */
.crs-toc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 28px;
}

/* Section heading — floats above its group of cards */
.crs-toc__section {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 16px 0 4px;
  padding-top: 20px;
  border-top: 1px solid #ddd8d2;
}
.crs-toc > div:first-child .crs-toc__section {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Lesson card */
.crs-toc__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid #ebe6e1;
  border-radius: 10px;
  text-decoration: none;
  color: var(--rim-text);
  transition: border-color 0.15s;
}
.crs-toc__item:hover {
  border-color: #c4bcb4;
}
.crs-toc__item:hover .crs-toc__title {
  color: var(--rim-blue);
}
.crs-toc__num {
  font-family: var(--font-serif);
  font-size: var(--text-ui);
  font-weight: 400;
  color: var(--rim-text-muted);
  min-width: 18px;
  text-align: right;
  flex-shrink: 0;
}
.crs-toc__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  color: var(--rim-text);
  flex: 1;
  line-height: 1.45;
  transition: color 0.15s;
}

/* Media-type icon container — tinted square, color-coded by type */
.crs-toc__icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.crs-toc__icon-wrap--audio {
  background: #e4eeea;
  color: #3d7a66;
}
.crs-toc__icon-wrap--video {
  background: #e4ecf2;
  color: #3a607c;
}
.crs-toc__icon-wrap--text {
  background: #eee;
  color: #8a7d74;
}

/* ── Access gate ── */
.crs-gate {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 40px 24px 80px;
}
.crs-gate__msg {
  font-family: var(--font-sans);
  font-size: 17px;
  color: var(--rim-text);
  margin: 0 0 20px;
  line-height: 1.7;
}
.crs-gate__link {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--rim-blue);
  text-decoration: none;
}
.crs-gate__link:hover { text-decoration: underline; }

/* ── Empty ── */
.crs-empty {
  font-family: var(--font-sans);
  font-size: 17px;
  color: var(--rim-text-muted);
  padding-top: 32px;
  line-height: 1.6;
}
.crs-pending {
  font-family: var(--font-serif);
  font-size: var(--text-body);
  color: var(--rim-text-muted);
  text-align: center;
  padding: 56px 24px 72px;
  line-height: 1.7;
  font-style: italic;
  max-width: var(--reading-width);
  margin: 0 auto;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  .crs-header { padding: 56px 20px 40px; }
  .crs-title { font-size: 30px; }
  .crs-lessons { padding-left: 16px; padding-right: 16px; }
  .crs-toc__item { padding: 14px 16px; gap: 12px; }
  .crs-toc__icon-wrap { width: 30px; height: 30px; border-radius: 6px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   LEARNING SYSTEM — Series page additions (session 60)
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Completed lesson card state ── */
.crs-toc__item--complete {
  border-color: #c8ddd6;
  background: #f4faf7;
}
.crs-toc__item--complete .crs-toc__title {
  color: var(--rim-text-muted);
}
.crs-toc__num--complete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #3d7a66;
}

/* ── Meta bar: enroll + progress + continue ── */
.crs-meta-bar {
  max-width: var(--reading-width);
  margin: 0 auto 32px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Enroll button ── */
.crs-enroll-btn {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 9px 20px;
  border-radius: 6px;
  border: 1.5px solid var(--rim-mid);
  background: transparent;
  color: var(--rim-mid);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.crs-enroll-btn:hover {
  background: var(--rim-mid);
  color: #fff;
}
.crs-enroll-btn--enrolled {
  background: var(--rim-mid);
  color: #fff;
}
.crs-enroll-btn--enrolled:hover {
  background: #2e4e62;
  border-color: #2e4e62;
}

/* ── Progress bar ── */
.crs-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}
.crs-progress__bar-wrap {
  flex: 1;
  height: 6px;
  background: #e4deda;
  border-radius: 3px;
  overflow: hidden;
}
.crs-progress__bar {
  height: 100%;
  background: #3d7a66;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.crs-progress__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.crs-progress__unlock-note {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  font-style: italic;
  flex-basis: 100%;
  margin: 2px 0 0;
}
.crs-unlock-note {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  font-style: italic;
  margin: 0 0 16px;
  padding: 0 var(--crs-pad, 24px);
}

/* ── Continue button ── */
.crs-continue-btn {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--rim-blue);
  text-decoration: none;
  padding: 10px 0;
  transition: opacity 0.15s;
}
.crs-continue-btn:hover { opacity: 0.75; }

/* ─────────────────────────────────────────────────────────────────────────────
   LEARNING SYSTEM — Lesson page additions (session 60)
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Mark complete button ── */
.lp-complete-wrap {
  max-width: var(--reading-width);
  margin: 32px auto 0;
  padding: 0;
}
.lp-complete-btn {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 10px 22px;
  border-radius: 6px;
  border: 1.5px solid #c4bcb4;
  background: transparent;
  color: var(--rim-text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.lp-complete-btn:hover {
  border-color: #3d7a66;
  color: #3d7a66;
}
.lp-complete-btn--done {
  border-color: #3d7a66;
  background: #f4faf7;
  color: #3d7a66;
}
.lp-complete-btn--done:hover {
  background: #e4eeea;
}
.lp-series-complete {
  max-width: var(--reading-width);
  margin: 32px auto 0;
  padding: 20px 24px;
  background: #f4faf7;
  border-radius: 8px;
}
.lp-series-complete__msg {
  font-family: var(--font-serif);
  font-size: 17px;
  font-style: italic;
  color: #3d7a66;
  margin: 0;
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LEARNING SYSTEM — Dashboard active series (session 60)
   ───────────────────────────────────────────────────────────────────────────── */

.db2-series {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.db2-series-card {
  display: block;
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid #ebe6e1;
  border-radius: 10px;
  text-decoration: none;
  color: var(--rim-text);
  transition: border-color 0.15s;
}
.db2-series-card:hover {
  border-color: #c4bcb4;
}
.db2-series-card__title {
  display: block;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--rim-text);
  margin-bottom: 12px;
  line-height: 1.35;
}
.db2-series-card__progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.db2-series-card__bar-wrap {
  flex: 1;
  height: 5px;
  background: #e4deda;
  border-radius: 3px;
  overflow: hidden;
}
.db2-series-card__bar {
  height: 100%;
  background: #3d7a66;
  border-radius: 3px;
}
.db2-series-card__label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}


/* ── Hub Access Section (admin member detail) ───────────────────────────────── */
.adm-hub-access__list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.adm-hub-access__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rim-rule);
}
.adm-hub-access__item:last-child { border-bottom: none; }
.adm-hub-access__name {
  font-weight: 600;
  font-size: var(--text-ui);
  min-width: 140px;
}
.adm-hub-access__since {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  flex: 1;
}
.adm-hub-access__confirm {
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.adm-hub-access__grant {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.adm-hub-access__select {
  flex: 1;
  max-width: 240px;
}
.adm-hub-access__empty {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  margin: 0;
}
.adm-hub-access__message {
  font-size: var(--text-xs);
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.adm-hub-access__message--success {
  background: #edf7f0;
  color: #2d6a4f;
}
.adm-hub-access__message--error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* ── Teacher Public Pages (tpr-) ──────────────────────────────────── */
.tpr-listing-page { max-width: 960px; margin: 0 auto; padding: 48px 24px 80px; }
.tpr-listing-title { font-family: var(--font-serif); font-size: 32px; color: var(--rim-blue); margin-bottom: 32px; }
.tpr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.tpr-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px; background: white; border-radius: 8px; text-decoration: none; color: inherit; transition: box-shadow 0.15s; }
.tpr-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.tpr-card__photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.tpr-card__photo-placeholder { width: 80px; height: 80px; border-radius: 50%; background: #e8e2dc; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; color: var(--rim-text-muted); font-size: var(--text-h2); font-family: var(--font-serif); }
.tpr-card__name { font-family: var(--font-serif); font-size: 17px; color: var(--rim-blue); margin-bottom: 8px; font-weight: 600; }
.tpr-card__bio { font-size: var(--text-xs); color: var(--rim-text-muted); line-height: 1.5; }

/* Teacher profile page */
.tpr-page { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
.tpr-header { margin-bottom: 48px; }
.tpr-photo { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; display: block; }
.tpr-name { font-family: var(--font-serif); font-size: 36px; color: var(--rim-blue); margin-bottom: 16px; font-weight: normal; line-height: 1.2; }
.tpr-bio { font-size: 17px; line-height: 1.75; color: var(--rim-text); margin-bottom: 16px; }
.tpr-inactive-note { font-size: var(--text-ui); color: var(--rim-text-muted); font-style: italic; margin-top: 12px; }
.tpr-teachings { margin-top: 48px; }
.tpr-teachings__title { font-family: var(--font-serif); font-size: 22px; color: var(--rim-blue); margin-bottom: 20px; }
.tpr-teachings__list { display: flex; flex-direction: column; gap: 12px; }
.tpr-course-card { display: block; padding: 16px 20px; background: white; border-radius: 8px; text-decoration: none; color: inherit; }
.tpr-course-card:hover { background: #f0ebe6; }
.tpr-course-card__title { font-family: var(--font-serif); font-size: 17px; color: var(--rim-blue); font-weight: 600; margin-bottom: 4px; }
.tpr-course-card__sub { font-size: var(--text-ui); color: var(--rim-text-muted); margin-bottom: 6px; }
.tpr-course-card__meta { font-size: var(--text-xs); color: var(--rim-text-muted); display: flex; gap: 12px; align-items: center; }
.tpr-course-card__access { background: #f0ebe6; padding: 2px 8px; border-radius: 4px; font-size: var(--text-xxs); text-transform: uppercase; letter-spacing: 0.06em; }
.lp-teacher-link { color: var(--rim-blue); text-decoration: underline; text-underline-offset: 2px; }
.lp-teacher-link:hover { color: var(--rim-mid); }

/* Teacher admin */
.adm-teacher-table { width: 100%; border-collapse: collapse; font-size: var(--text-ui); margin-top: 16px; }
.adm-teacher-table th { text-align: left; padding: 8px 12px; border-bottom: 2px solid #eee; font-weight: 600; color: var(--rim-text-muted); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.06em; }
.adm-teacher-table td { padding: 10px 12px; border-bottom: 1px solid #f0ece8; vertical-align: middle; }
.adm-teacher-table tr:last-child td { border-bottom: none; }
.adm-teacher-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: var(--text-xxs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.adm-teacher-badge--active { background: #d1fae5; color: #065f46; }
.adm-teacher-badge--inactive { background: #f3f4f6; color: #6b7280; }
.adm-teacher-add { margin-top: 24px; padding-top: 24px; border-top: 1px solid #eee; display: flex; gap: 10px; align-items: flex-end; }
.adm-teacher-add__field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.adm-teacher-add__label { font-size: var(--text-label); font-weight: 600; color: var(--rim-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Admin Hub Management (adm-hubs-) ── */
.adm-hubs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.adm-hubs-title { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: 400; color: var(--rim-text); margin: 0; }
.adm-hubs-btn-create {
  display: inline-block; padding: 8px 18px; background: var(--rim-blue); color: #fff;
  border-radius: 6px; font-size: var(--text-ui); font-weight: 600; text-decoration: none;
}
.adm-hubs-btn-create:hover { opacity: 0.9; }

/* Table */
.adm-hubs-table { width: 100%; border-collapse: collapse; font-size: var(--text-ui); }
.adm-hubs-table th {
  text-align: left; padding: 10px 12px; font-size: var(--text-xxs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--rim-text-muted);
  border-bottom: 2px solid #eee;
}
.adm-hubs-table td { padding: 10px 12px; border-bottom: 1px solid #eee; vertical-align: middle; }
.adm-hubs-table tbody tr:last-child td { border-bottom: none; }
.adm-hubs-row--archived td { opacity: 0.55; }
.adm-hubs-name-link { color: var(--rim-blue); text-decoration: none; font-weight: 600; }
.adm-hubs-name-link:hover { text-decoration: underline; }
.adm-hubs-slug { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--rim-text-muted); }
.adm-hubs-count { text-align: center; }
.adm-hubs-status {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.adm-hubs-status--active { background: #e8f4f0; color: #2a6a54; }
.adm-hubs-status--archived { background: #f3f4f6; color: #6b7280; }
.adm-hubs-row-actions { display: flex; gap: 8px; align-items: center; }
.adm-hubs-btn-edit {
  font-size: var(--text-xs); color: var(--rim-mid); text-decoration: none; font-weight: 600;
}
.adm-hubs-btn-edit:hover { text-decoration: underline; }
.adm-hubs-btn-toggle {
  font-size: var(--text-label); padding: 3px 10px; border: 1px solid #ccc; border-radius: 4px;
  background: #fff; cursor: pointer; color: var(--rim-text-muted);
}
.adm-hubs-btn-toggle:hover { border-color: var(--rim-mid); color: var(--rim-text); }
.adm-hubs-divider-row td { border-bottom: none; }
.adm-hubs-divider-cell {
  padding: 18px 12px 6px; font-size: var(--text-xxs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--rim-text-muted);
}
.adm-hubs-empty { text-align: center; color: var(--rim-text-muted); padding: 40px 0; }

/* Success / Error */
.adm-hubs-success {
  padding: 10px 16px; background: #e8f4f0; color: #2a6a54;
  border-radius: 6px; font-size: var(--text-ui); margin-bottom: 16px;
}
.adm-hubs-error {
  padding: 10px 16px; background: var(--color-error-bg); color: #991b1b;
  border-radius: 6px; font-size: var(--text-ui); margin-bottom: 16px;
}

/* Form */
.adm-hubs-form { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.adm-hubs-field { display: flex; flex-direction: column; gap: 6px; }
.adm-hubs-label {
  font-size: var(--text-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--rim-text-muted);
}
.adm-hubs-input {
  padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;
  font-size: var(--text-small); font-family: var(--font-sans); width: 100%;
}
.adm-hubs-input:focus { border-color: var(--rim-mid); outline: none; }
.adm-hubs-input--half { flex: 1; }
.adm-hubs-textarea {
  padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;
  font-size: var(--text-small); font-family: var(--font-sans); width: 100%; resize: vertical;
}
.adm-hubs-textarea:focus { border-color: var(--rim-mid); outline: none; }
.adm-hubs-select {
  padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px;
  font-size: var(--text-small); font-family: var(--font-sans); background: #fff;
}
.adm-hubs-select:focus { border-color: var(--rim-mid); outline: none; }
.adm-hubs-hint { font-size: var(--text-xs); color: var(--rim-text-muted); }

/* Coordinator (read-only) */
.adm-hubs-coordinator { display: flex; flex-direction: column; gap: 4px; }
.adm-hubs-coordinator__name { font-size: var(--text-small); font-weight: 600; }
.adm-hubs-coordinator__none { font-size: var(--text-ui); color: var(--rim-text-muted); font-style: italic; }
.adm-hubs-coordinator__link { font-size: var(--text-xs); color: var(--rim-mid); }

/* App Links */
.adm-hubs-applink {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid #f0ece8;
}
.adm-hubs-applink__fields { display: flex; gap: 8px; flex: 1; flex-direction: column; }
.adm-hubs-applink__tool-name { font-size: var(--text-ui); font-weight: 600; color: var(--rim-text); }
.adm-hubs-applink__tool-desc { font-size: var(--text-label); color: var(--rim-text-muted); }
.adm-hubs-applink__actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.adm-hubs-applink__toggle { display: flex; align-items: center; gap: 4px; font-size: var(--text-label); color: var(--rim-text-muted); cursor: pointer; }
.adm-hubs-applink__add-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.adm-hubs-select--inline { max-width: 200px; font-size: var(--text-xs); }
.adm-hubs-btn-icon {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #ddd; border-radius: 4px; background: #fff; cursor: pointer;
  font-size: var(--text-ui); color: var(--rim-text-muted);
}
.adm-hubs-btn-icon:hover { border-color: var(--rim-mid); color: var(--rim-text); }
.adm-hubs-btn-icon:disabled { opacity: 0.3; cursor: default; }
.adm-hubs-btn-icon--danger:hover { border-color: #dc2626; color: #dc2626; }
.adm-hubs-btn-add {
  background: none; border: 1px dashed #ccc; border-radius: 6px; padding: 8px 16px;
  font-size: var(--text-xs); color: var(--rim-text-muted); cursor: pointer; margin-top: 4px;
}
.adm-hubs-btn-add:hover { border-color: var(--rim-mid); color: var(--rim-text); }

/* Form actions */
.adm-hubs-actions { display: flex; gap: 12px; align-items: center; padding-top: 8px; }
.adm-hubs-btn-save {
  padding: 10px 24px; background: var(--rim-blue); color: #fff; border: none;
  border-radius: 6px; font-size: var(--text-small); font-weight: 600; cursor: pointer;
}
.adm-hubs-btn-save:hover { opacity: 0.9; }
.adm-hubs-btn-save:disabled { opacity: 0.5; cursor: default; }
.adm-hubs-btn-cancel {
  font-size: var(--text-ui); color: var(--rim-text-muted); text-decoration: none;
}
.adm-hubs-btn-cancel:hover { text-decoration: underline; }

/* Mobile: stack app link rows */
@media (max-width: 767px) {
  .adm-hubs-applink { flex-direction: column; align-items: stretch; }
  .adm-hubs-applink__fields { flex-direction: column; }
  .adm-hubs-applink__actions { justify-content: flex-end; }
  .adm-hubs-table { font-size: var(--text-xs); }
  .adm-hubs-table th, .adm-hubs-table td { padding: 8px 6px; }
}

/* Teacher search tags (lesson editor) */
.th-teacher-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.th-teacher-tag { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: #e8f4f0; border-radius: 20px; font-size: var(--text-xs); color: var(--rim-mid); }
.th-teacher-tag--inactive { background: #f3f4f6; color: var(--rim-text-muted); }
.th-teacher-tag__remove { background: none; border: none; cursor: pointer; color: currentColor; font-size: var(--text-small); padding: 0; line-height: 1; }
.th-teacher-results { border: 1px solid #ddd; border-radius: 6px; background: white; max-height: 160px; overflow-y: auto; margin-top: 4px; }
.th-teacher-result { display: block; width: 100%; text-align: left; padding: 8px 12px; background: none; border: none; cursor: pointer; font-size: var(--text-ui); border-bottom: 1px solid #f5f5f5; }
.th-teacher-result:last-child { border-bottom: none; }
.th-teacher-result:hover { background: #f5f5f5; }

/* ── Course Listing (cls-) ─────────────────────────────────────────── */
.cls-page { max-width: 960px; margin: 0 auto; padding: 48px 24px 80px; }
.cls-header { margin-bottom: 32px; }
.cls-title { font-family: var(--font-serif); font-size: 36px; color: var(--rim-blue); margin-bottom: 8px; font-weight: normal; }
.cls-subtitle { font-size: 16px; color: var(--rim-text-muted); }
.cls-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #eee; overflow-x: auto; }
.cls-filter-pill { padding: 6px 16px; border-radius: 20px; border: 1px solid #ddd; background: white; font-size: var(--text-xs); cursor: pointer; color: var(--rim-text-muted); transition: all 0.15s; white-space: nowrap; }
.cls-filter-pill--active { background: var(--rim-blue); color: white; border-color: var(--rim-blue); }
.cls-filter-pill:hover:not(.cls-filter-pill--active) { border-color: var(--rim-mid); color: var(--rim-mid); }
.cls-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.cls-empty { color: var(--rim-text-muted); font-style: italic; padding: 32px 0; }
.cls-card { display: flex; flex-direction: column; padding: 20px 24px; background: white; border-radius: 10px; text-decoration: none; color: inherit; transition: box-shadow 0.15s; }
.cls-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.cls-card__category { font-size: var(--text-xxs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rim-text-muted); margin-bottom: 8px; }
.cls-card__title { font-family: var(--font-serif); font-size: var(--text-body); color: var(--rim-blue); margin-bottom: 6px; font-weight: 600; line-height: 1.3; }
.cls-card__sub { font-size: var(--text-ui); color: var(--rim-text-muted); margin-bottom: 8px; line-height: 1.5; }
.cls-card__teachers { font-size: var(--text-xs); color: var(--rim-mid); margin-bottom: 10px; }
.cls-card__meta { display: flex; gap: 10px; align-items: center; font-size: var(--text-label); color: var(--rim-text-muted); margin-top: auto; padding-top: 10px; flex-wrap: wrap; }
.cls-card__access-label { background: #fef3c7; color: #92400e; padding: 2px 8px; border-radius: 4px; font-size: var(--text-xxs); font-weight: 600; }
.cls-card__enroll-state { margin-top: 8px; }
.cls-card__badge { display: inline-block; font-size: var(--text-label); padding: 3px 10px; border-radius: 4px; font-weight: 600; }
.cls-card__badge--complete { background: #d1fae5; color: #065f46; }
.cls-card__badge--progress { background: #dbeafe; color: #1e40af; }
.cls-card__badge--enrolled { background: #f3f4f6; color: #374151; }

/* Enroll button updates */
.crs-enroll-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.crs-enrolled-badge { font-size: var(--text-ui); color: #065f46; font-weight: 600; }
.crs-leave-link { background: none; border: none; padding: 0; font-size: var(--text-label); color: var(--rim-text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.crs-leave-link:hover { color: #b91c1c; }
.crs-leave-confirm { font-size: var(--text-xs); color: var(--rim-text-muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crs-leave-confirm__yes { background: #fee2e2; color: #b91c1c; border: none; padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: var(--text-xs); }
.crs-leave-confirm__cancel { background: none; border: none; color: var(--rim-text-muted); cursor: pointer; font-size: var(--text-xs); text-decoration: underline; }

/* Series completion note */
.lp-series-complete__note { font-style: italic; color: var(--rim-text-muted); font-size: var(--text-small); margin-top: 8px; line-height: 1.6; }

/* ── Member Course Library (mcl-) ──────────────────────────────────── */
.mcl-page { max-width: 720px; }
.mcl-title { font-family: var(--font-serif); font-size: var(--text-h2); color: var(--rim-blue); margin-bottom: 32px; font-weight: normal; }
.mcl-section { margin-bottom: 40px; }
.mcl-section__title { font-size: var(--text-xxs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rim-text-muted); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #eee; }
.mcl-card { background: white; border-radius: 8px; padding: 16px 20px; display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.mcl-card__body { flex: 1; }
.mcl-card__title { font-family: var(--font-serif); font-size: 16px; color: var(--rim-blue); font-weight: 600; text-decoration: none; display: block; margin-bottom: 6px; }
.mcl-card__title:hover { color: var(--rim-mid); }
.mcl-card__progress-wrap { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mcl-card__bar-bg { flex: 1; height: 4px; background: #e8e2dc; border-radius: 2px; max-width: 120px; }
.mcl-card__bar { height: 4px; background: var(--rim-mid); border-radius: 2px; }
.mcl-card__progress-label { font-size: var(--text-label); color: var(--rim-text-muted); white-space: nowrap; }
.mcl-card__source { font-size: var(--text-label); color: var(--rim-text-muted); font-style: italic; margin-top: 4px; }
.mcl-card__completed-date { font-size: var(--text-label); color: var(--rim-text-muted); margin-top: 4px; }
.mcl-card__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.mcl-continue-btn { display: inline-block; padding: 6px 16px; background: var(--rim-blue); color: white; border-radius: 6px; text-decoration: none; font-size: var(--text-xs); white-space: nowrap; }
.mcl-continue-btn:hover { background: var(--rim-mid); }
.mcl-leave-link { background: none; border: none; padding: 0; font-size: var(--text-label); color: var(--rim-text-muted); cursor: pointer; text-decoration: underline; }
.mcl-leave-link:hover { color: #b91c1c; }
.mcl-leave-confirm { font-size: var(--text-label); color: var(--rim-text-muted); display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.mcl-leave-confirm__text { text-align: right; max-width: 160px; line-height: 1.4; }
.mcl-leave-confirm__actions { display: flex; gap: 8px; }
.mcl-leave-confirm__yes { background: #fee2e2; color: #b91c1c; border: none; padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: var(--text-label); }
.mcl-leave-confirm__cancel { background: none; border: none; color: var(--rim-text-muted); cursor: pointer; font-size: var(--text-label); text-decoration: underline; }
.mcl-empty { text-align: center; padding: 48px 24px; color: var(--rim-text-muted); }
.mcl-empty a { color: var(--rim-blue); }

/* Dashboard course updates (db2-) */
.db2-welcome-prompt { background: #f0ebe6; border-radius: 8px; padding: 20px 24px; }
.db2-welcome-prompt__heading { font-family: var(--font-serif); font-size: 16px; color: var(--rim-blue); margin-bottom: 12px; }
.db2-welcome-prompt__list { display: flex; flex-direction: column; gap: 8px; }
.db2-welcome-prompt__item { display: flex; justify-content: space-between; font-size: var(--text-ui); color: var(--rim-mid); text-decoration: none; padding: 6px 0; }
.db2-welcome-prompt__item:hover { color: var(--rim-blue); }
.db2-courses-line { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: white; border-radius: 8px; }
.db2-courses-line__label { font-family: var(--font-serif); font-size: var(--text-small); color: var(--rim-blue); font-weight: 600; }
.db2-courses-line__count { font-size: var(--text-xs); color: var(--rim-text-muted); }
.db2-courses-line__link { margin-left: auto; font-size: var(--text-xs); color: var(--rim-blue); text-decoration: none; }
.db2-courses-line__link:hover { text-decoration: underline; }

/* ── Drip / Scheduled Release ─────────────────────────────────────────────── */
/* Series page — locked lesson cards */
.crs-toc__item--locked { opacity: 0.55; cursor: default; pointer-events: none; }
.crs-toc__num--locked { color: var(--rim-text-muted); font-size: var(--text-xs); }
.crs-toc__title--locked { color: var(--rim-text-muted); }
.crs-toc__available-date { margin-left: auto; font-size: var(--text-xxs); color: var(--rim-text-muted); font-style: italic; white-space: nowrap; }

/* Lesson page — drip locked state */
.lp-drip-locked { padding: 32px 0; }
.lp-drip-locked__msg { font-size: var(--text-body); font-family: var(--font-serif); color: var(--rim-blue); margin-bottom: 8px; }
.lp-drip-locked__date { font-size: var(--text-small); color: var(--rim-text-muted); margin-bottom: 20px; }
.lp-drip-locked__back { color: var(--rim-blue); text-decoration: none; font-size: var(--text-ui); }
.lp-drip-locked__back:hover { text-decoration: underline; }

/* CourseEditor drip controls */
.th-drip-options { margin-top: 12px; padding: 12px 14px; background: #f9f7f5; border-radius: 6px; display: flex; flex-direction: column; gap: 10px; }
.th-drip-options__divider { border: none; border-top: 1px solid #e0dbd6; margin: 2px 0; }
.th-drip-preview { margin-top: 16px; padding: 12px 16px; background: #f9f7f5; border-radius: 6px; }
.th-drip-preview__row { font-size: var(--text-xs); color: var(--rim-text-muted); margin: 0; padding: 3px 0; }
.th-input--inline { width: 60px !important; display: inline-block; margin: 0 6px; vertical-align: middle; }
.th-input--date { width: 150px; font-size: var(--text-xs); }
.th-input--readonly { background: #f3f0ed; color: var(--rim-text-muted); cursor: default; }
.th-slug-row { display: flex; gap: 8px; align-items: center; }
.th-slug-row .th-input { flex: 1; }
.th-field__hint--warn { color: #b45309; }
.th-drip-delay-label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-label); color: var(--rim-text-muted); margin-right: 8px; }
.th-drip-delay-label__text { white-space: nowrap; }
.th-drip-preview__custom { color: var(--rim-mid); font-size: var(--text-xxs); margin-left: 4px; }

/* ── Manual Help Icon ──────────────────────────────────────────────────────── */
.mh-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--rim-mid);
  color: var(--rim-mid);
  background: transparent;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.15s;
  z-index: 10;
}
.mh-icon:hover { opacity: 1; }

/* ── Admin Manual (man2- prefix) ───────────────────────────────────────────── */
.man2-page { max-width: 820px; margin: 0 auto; padding: 40px 24px 80px; }
.man2-header { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.man2-header h1 { font-family: var(--font-serif); font-size: var(--text-h2); color: var(--rim-text); margin: 0; }
.man2-new-btn { margin-left: auto; }
.man2-section { border: 1px solid #e8e4de; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.man2-section__header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; background: #faf8f5; }
.man2-section__header:hover { background: #f5f2ee; }
.man2-section__title { font-family: var(--font-sans); font-size: var(--text-small); font-weight: 600; color: var(--rim-text); flex: 1; }
.man2-section__slug { font-family: var(--font-sans); font-size: var(--text-label); color: var(--rim-text-muted); }
.man2-section__body { padding: 0 18px 18px; }
.man2-section__actions { display: flex; gap: 8px; padding: 8px 18px; border-top: 1px solid #e8e4de; background: #faf8f5; }
.man2-detail { max-width: 720px; margin: 0 auto; padding: 40px 24px 80px; }
.man2-detail__title { font-family: var(--font-serif); font-size: 32px; color: var(--rim-text); margin-bottom: 8px; } /* editorial exception — reading content */
.man2-detail__meta { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-text-muted); margin-bottom: 32px; }
.man2-related { margin-top: 48px; padding-top: 24px; border-top: 1px solid #e8e4de; }
.man2-related__title { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rim-text-muted); margin-bottom: 12px; }
.man2-related__list { display: flex; flex-wrap: wrap; gap: 8px; }
.man2-related__link { font-family: var(--font-sans); font-size: var(--text-ui); color: var(--rim-blue); text-decoration: none; padding: 4px 10px; border: 1px solid #d4cfc9; border-radius: 20px; }
.man2-related__link:hover { background: #f5f2ee; }
.man2-edit { max-width: 720px; margin: 0 auto; padding: 40px 24px 80px; }
.man2-edit__form { display: flex; flex-direction: column; gap: 24px; }
.man2-edit__field { display: flex; flex-direction: column; gap: 6px; }
.man2-edit__label { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; color: var(--rim-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.man2-edit__input { font-family: var(--font-sans); font-size: var(--text-small); padding: 8px 12px; border: 1px solid #d4cfc9; border-radius: 6px; background: white; color: var(--rim-text); }
.man2-edit__input:focus { outline: none; border-color: var(--rim-mid); }

/* ── Manual Index (man-idx-) ─────────────────────────────────────────────── */
.man-idx { max-width: 700px; margin: 0 auto; padding: 48px 24px 80px; }
.man-idx__header { margin-bottom: 40px; }
.man-idx__title { font-family: var(--font-serif); font-size: 36px; color: var(--rim-text); margin-bottom: 8px; }
.man-idx__subtitle { font-family: var(--font-sans); font-size: 16px; color: var(--rim-text-muted); margin-bottom: 16px; }
.man-idx__editor-link { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-blue); text-decoration: none; }
.man-idx__editor-link:hover { text-decoration: underline; }
.man-idx__list { display: flex; flex-direction: column; gap: 2px; }
.man-idx__entry { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 8px; text-decoration: none; background: white; border: 1px solid #e8e4de; transition: background 0.1s; }
.man-idx__entry:hover { background: #f8f5f2; }
.man-idx__entry-main { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.man-idx__entry-title { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--rim-text); }
.man-idx__entry-desc { font-family: var(--font-sans); font-size: var(--text-ui); color: var(--rim-text-muted); }
.man-idx__hub-badge { font-family: var(--font-sans); font-size: var(--text-xxs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rim-mid); background: #eef2f5; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }

/* ── Manual Section Page (man-sec-page-) ──────────────────────────────────── */
.man-sec-page { max-width: 800px; margin: 0 auto; padding: 40px 24px 80px; }
.man-sec-page__back { margin-bottom: 24px; }
.man-sec-page__back-link { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-text-muted); text-decoration: none; }
.man-sec-page__back-link:hover { color: var(--rim-blue); text-decoration: underline; }
.man-sec-page__header { margin-bottom: 32px; }
.man-sec-page__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.man-sec-page__title { font-family: var(--font-serif); font-size: 36px; color: var(--rim-text); margin: 0; }
.man-sec-page__edit-link { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-blue); text-decoration: none; white-space: nowrap; margin-top: 8px; }
.man-sec-page__edit-link:hover { text-decoration: underline; }
.man-sec-page__meta { display: flex; align-items: center; gap: 12px; }
.man-sec-page__hub-badge { font-family: var(--font-sans); font-size: var(--text-xxs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rim-mid); background: #eef2f5; padding: 3px 8px; border-radius: 4px; }
.man-sec-page__updated { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-text-muted); }
.man-sec-page__body { line-height: 1.7; }
.man-sec-page__empty { font-family: var(--font-sans); font-size: var(--text-ui); color: var(--rim-text-muted); font-style: italic; }
.man-sec-page__rule { border: none; border-top: 1px solid #e8e4de; margin: 40px 0 24px; }
.man-sec-page__related { margin-top: 8px; }
.man-sec-page__related-label { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rim-text-muted); margin-bottom: 12px; }
.man-sec-page__related-list { display: flex; flex-wrap: wrap; gap: 8px; }
.man-sec-page__related-link { font-family: var(--font-sans); font-size: var(--text-ui); color: var(--rim-blue); text-decoration: none; padding: 4px 12px; border: 1px solid #d4cfc9; border-radius: 20px; }
.man-sec-page__related-link:hover { background: #f5f2ee; }
.man-sec-page__footer { margin-top: 16px; }
/* ── Content Output: manual (man-body) ───────────────────────────────────── */
/* Structured reference docs. Tables with styled headers, clear heading hierarchy. */
.man-body { font-family: var(--font-sans); font-size: var(--text-small); color: var(--rim-text); line-height: 1.7; }
.man-body p { margin: 0 0 1em; }
.man-body p:last-child { margin-bottom: 0; }
.man-body h2 { font-family: var(--font-sans); font-size: 22px; font-weight: 700; color: var(--rim-text); line-height: 1.3; margin: 40px 0 14px; }
.man-body h3 { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 700; color: var(--rim-text); line-height: 1.3; margin: 32px 0 10px; }
.man-body h4 { font-family: var(--font-sans); font-size: var(--text-small); font-weight: 700; color: var(--rim-text); line-height: 1.4; margin: 24px 0 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.man-body ul, .man-body ol { margin: 0 0 1em; } /* no margin-left — rim-content handles bullet indent */
.man-body li { margin-bottom: 0.3em; }
.man-body blockquote { border-left: 3px solid var(--rim-mid); padding: 8px 0 8px 16px; margin: 1em 0; color: var(--rim-text); font-style: italic; }
.man-body table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: var(--text-ui); }
.man-body table th { background: #f0ece7; font-weight: 600; text-align: left; padding: 8px 12px; border: 1px solid #ddd8d2; font-size: var(--text-xs); }
.man-body table td { padding: 8px 12px; border: 1px solid #ddd8d2; vertical-align: top; }
.man-body code { font-size: var(--text-xs); background: #f5f2ee; padding: 2px 5px; border-radius: 3px; }
.man-body hr { border: none; border-top: 1px solid #e8e4de; margin: 32px 0; }
.man-body a { color: var(--rim-blue); text-decoration: none; }
.man-body a:hover { text-decoration: underline; }
.man-body strong { font-weight: 700; }

/* ── Content Output: hub-document (hdoc-body) ────────────────────────────── */
/* Notion-like: clean, spacious, block-based, typeset working documents. */
.hdoc-body { font-family: var(--font-sans); font-size: var(--text-small); color: var(--rim-text); line-height: 1.65; }
.hdoc-body p { margin: 0 0 0.9em; }
.hdoc-body p:last-child { margin-bottom: 0; }
.hdoc-body h1 { font-family: var(--font-sans); font-size: 28px; font-weight: 700; color: var(--rim-text); line-height: 1.2; margin: 40px 0 14px; letter-spacing: -0.01em; }
.hdoc-body h2 { font-family: var(--font-sans); font-size: 22px; font-weight: 600; color: var(--rim-text); line-height: 1.25; margin: 36px 0 12px; }
.hdoc-body h3 { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 600; color: var(--rim-text); line-height: 1.3; margin: 28px 0 8px; }
.hdoc-body h4 { font-family: var(--font-sans); font-size: var(--text-small); font-weight: 600; color: var(--rim-text); line-height: 1.4; margin: 20px 0 6px; }
.hdoc-body ul, .hdoc-body ol { margin: 0 0 0.9em; } /* no margin-left — rim-content handles bullet indent */
.hdoc-body li { margin-bottom: 0.25em; }
.hdoc-body blockquote { border-left: 3px solid #d5d5d5; padding: 6px 0 6px 20px; margin: 0.9em 0; color: var(--rim-text-muted); font-style: italic; }
.hdoc-body table { width: 100%; border-collapse: collapse; margin: 0.9em 0; font-size: var(--text-ui); }
.hdoc-body table th { font-weight: 600; text-align: left; padding: 8px 12px; border-bottom: 2px solid #d4cfc9; font-size: var(--text-xs); }
.hdoc-body table td { padding: 8px 12px; border-bottom: 1px solid #e8e4de; vertical-align: top; }
.hdoc-body code { font-size: var(--text-xs); background: #f5f2ee; padding: 2px 5px; border-radius: 3px; }
.hdoc-body hr { border: none; border-top: 1px solid #e8e4de; margin: 28px 0; }
.hdoc-body a { color: var(--rim-blue); text-decoration: none; }
.hdoc-body a:hover { text-decoration: underline; }

/* ── Content Output: program-description (prog-description) ──────────────── */
/* Rich program info. Warm, readable, callout support. Separate from lp-body. */
.prog-description { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; line-height: 1.7; color: var(--rim-text); margin-bottom: 50px; }
.prog-description p { margin: 0 0 1.6em; }
.prog-description p:last-child { margin-bottom: 0; }
.prog-description p:empty { display: none; }
.prog-description h2 { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: 400; color: var(--rim-text); line-height: var(--lh-heading); margin: 40px 0 15px; }
.prog-description h2:first-child { margin-top: 0; }
.prog-description h3 { font-family: var(--font-serif); font-size: var(--text-h3); font-weight: 400; color: var(--rim-text); line-height: var(--lh-heading); margin: 30px 0 12px; }
.prog-description h3:first-child { margin-top: 0; }
.prog-description ul, .prog-description ol { margin: 0 0 1.6em; } /* no margin-left — rim-content handles bullet indent */
.prog-description li { margin-bottom: 0.3em; }
.prog-description blockquote { font-family: var(--font-serif); font-size: var(--text-h4); font-weight: 400; font-style: italic; line-height: 1.5; color: var(--rim-text); border-left: 3px solid var(--rim-mid); padding: 8px 0 8px 20px; margin: 1.6em 0; }
.prog-description strong { font-weight: 600; }
.prog-description a { color: var(--rim-blue); text-decoration: none; }
.prog-description a:hover { text-decoration: underline; }
/* Callout block support in program descriptions */
.prog-description [data-callout] { background: #f8f8f8; border-left: 3px solid #c8a060; padding: 16px 20px; margin: 1.6em 0; border-radius: 4px; font-size: 16px; }

/* Conversation post body inherits from .rim-content (shared editor output). */

/* ── Rendered checklist (check-list) — used across all content output contexts ── */
ul.check-list { list-style: none; margin: 0 0 0.9em 0; padding: 0; }
.check-list__item { display: flex; align-items: flex-start; gap: 8px; margin: 0.25em 0; }
.check-list__item--checked { text-decoration: line-through; color: var(--rim-text-muted); }
.check-list__box {
  display: inline-block; flex-shrink: 0;
  width: 16px; height: 16px; margin-top: 3px;
  border: 2px solid var(--rim-rule, #d4cfc9); border-radius: 3px;
  background: #fff; position: relative;
}
.check-list__box--checked {
  background: var(--rim-teal, #3d7a66); border-color: var(--rim-teal, #3d7a66);
}
.check-list__box--checked::after {
  content: ''; position: absolute;
  left: 3px; top: 0; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Content Output: lesson-notes (ls-notes-body) ────────────────────────── */
/* Personal and private. Member's own reflection space. Warm, inviting. */
.ls-notes-body { font-family: var(--font-sans); font-size: var(--text-small); color: var(--rim-text); line-height: 1.6; }
.ls-notes-body p { margin: 0 0 0.6em; }
.ls-notes-body p:last-child { margin-bottom: 0; }
.ls-notes-body ul, .ls-notes-body ol { margin: 0 0 0.6em 1.4em; padding: 0; }
.ls-notes-body li { margin: 0.15em 0; }
.ls-notes-body a { color: var(--rim-blue); text-decoration: none; }
.ls-notes-body strong { font-weight: 600; }
.ls-notes-body em { font-style: italic; }

/* ── Learning System (ls-) ────────────────────────────────────────────────── */

/* Progress bar on series page */
.ls-progress { display: flex; flex-direction: column; gap: 6px; margin: 0 0 4px; }
.ls-progress__bar-wrap { height: 6px; background: #e4dfd9; border-radius: 3px; overflow: hidden; }
.ls-progress__bar { height: 100%; background: var(--rim-mid); border-radius: 3px; transition: width 0.3s ease; }
.ls-progress__label { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-text-muted); }

/* Enroll button */
.ls-enroll-btn { display: inline-block; font-family: var(--font-sans); font-size: var(--text-small); font-weight: 600; color: #fff; background: var(--rim-blue); padding: 10px 24px; border-radius: 4px; text-decoration: none; cursor: pointer; border: none; }
.ls-enroll-btn:hover { background: var(--rim-mid); }
@media (max-width: 480px) { .ls-enroll-btn { width: 100%; text-align: center; } }

/* Unenroll link */
.ls-unenroll-link { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-text-muted); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; margin-top: 8px; }
.ls-unenroll-link:hover { color: var(--rim-text); }

/* Series completion acknowledgment */
.ls-completion-note { font-family: var(--font-sans); font-size: var(--text-small); color: var(--rim-text-muted); padding: 12px 0; }

/* ── Lesson footer (reflection + notes + complete) ── */
.ls-lesson-footer { margin-top: 64px; padding-top: 40px; border-top: 2px solid #ddd8d2; display: flex; flex-direction: column; gap: 36px; }

/* Reflection prompt */
.ls-reflection-rule { border: none; border-top: 1px solid #e4dfd9; margin: 0; }
.ls-reflection { font-family: var(--font-serif); font-size: var(--text-body); font-style: italic; color: var(--rim-text-muted); line-height: 1.65; margin: 0; }

/* Personal notes */
.ls-notes-wrap { display: flex; flex-direction: column; gap: 8px; }
.ls-notes-label { font-family: var(--font-sans); font-size: var(--text-label); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rim-text-muted); margin: 0; }
.ls-note-status { font-family: var(--font-sans); font-size: var(--text-label); color: var(--rim-text-muted); margin: 0; transition: opacity 0.4s; }
.ls-note-status--saved { color: var(--rim-mid); }

/* Mark complete button (reusing lp- namespace that already exists) */
/* lp-complete-btn and lp-series-complete are already defined in the lp- block */
/* These ls- aliases are for any future standalone use */
.ls-complete-btn { display: inline-block; font-family: var(--font-sans); font-size: var(--text-small); font-weight: 600; padding: 10px 24px; border-radius: 4px; cursor: pointer; border: none; }
.ls-completed-state { display: flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-size: var(--text-small); }

/* ── Dashboard series cards ── */
.ls-dash-list { display: flex; flex-direction: column; gap: 12px; }
.ls-dash-card { background: #fff; border-radius: 6px; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.ls-dash-card__title { font-family: var(--font-sans); font-size: var(--text-small); font-weight: 600; color: var(--rim-blue); text-decoration: none; }
.ls-dash-card__title:hover { text-decoration: underline; }
.ls-dash-card__progress { display: flex; align-items: center; gap: 10px; }
.ls-dash-card__bar-wrap { flex: 1; height: 5px; background: #e4dfd9; border-radius: 3px; overflow: hidden; }
.ls-dash-card__bar { height: 100%; background: var(--rim-mid); border-radius: 3px; }
.ls-dash-card__count { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-text-muted); white-space: nowrap; }
.ls-dash-card__continue { font-family: var(--font-sans); font-size: var(--text-ui); color: var(--rim-blue); text-decoration: none; font-weight: 600; }
.ls-dash-card__continue:hover { text-decoration: underline; }
.ls-dash-card__complete { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rim-mid); }

/* ── Reflection Questions (member UI) ── */
.ls-questions { display: flex; flex-direction: column; gap: 0; }
.ls-questions__header { margin-bottom: 20px; }
.ls-questions__title { font-family: var(--font-serif); font-size: var(--text-h4); margin: 0 0 6px; color: var(--rim-text); }
.ls-questions__privacy { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-text-muted); margin: 0 0 8px; }
.ls-questions__gate-note { font-family: var(--font-sans); font-size: var(--text-ui); color: var(--rim-text-muted); margin: 4px 0 0; font-style: italic; }
.ls-questions__gate-done { font-family: var(--font-sans); font-size: var(--text-ui); color: #3a7a5a; font-weight: 600; margin: 4px 0 0; }
.ls-questions__gentle-note { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-text-muted); font-style: italic; margin: 16px 0 0; }
.ls-questions__list { display: flex; flex-direction: column; gap: 24px; }

/* Individual question */
.ls-question { background: #fff; border: 1px solid #ebe6e1; border-radius: 10px; padding: 20px 24px; }
.ls-question--correct { background: #f0f7f3; border-color: #b8dcca; }
.ls-question--incorrect { background: #fdf4f3; border-color: #f0c4be; }
.ls-question__text { font-family: var(--font-sans); font-size: 16px; color: var(--rim-text); line-height: 1.55; margin: 0 0 14px; }
.ls-question__text p { display: inline; margin: 0; }
.ls-question__num { color: var(--rim-text-muted); margin-right: 6px; }

/* Options — selectable */
.ls-option { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); font-size: var(--text-small); color: var(--rim-text); line-height: 1.45; }
.ls-option--selectable { cursor: pointer; padding: 8px 12px; border-radius: 4px; }
.ls-option--selectable:hover { background: #ede8e2; }
.ls-option--active { background: #dde6ec; }
.ls-option__radio { margin-top: 2px; flex-shrink: 0; appearance: auto; -webkit-appearance: radio; width: 16px; height: 16px; cursor: pointer; accent-color: var(--rim-mid); }
.ls-question__options { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }

/* Options — result */
.ls-option--result { padding: 8px 12px; border-radius: 4px; background: transparent; margin-bottom: 4px; }
.ls-option--correct-ans { background: #e8f5ee; color: #1f6b45; font-weight: 600; }
.ls-option--wrong-ans { background: #fae9e7; color: #a83222; }
.ls-option__badge { font-size: var(--text-xxs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; margin-left: 10px; vertical-align: middle; }
.ls-option__badge--correct { background: #c9edda; color: #1a5e3a; }
.ls-option__badge--yours { background: #f7d9d4; color: #8c2a1f; }

/* Feedback + retake */
.ls-question__feedback { font-family: var(--font-sans); font-size: var(--text-small); font-weight: 700; margin: 0 0 10px; }
.ls-question__feedback--correct { color: #1f6b45; }
.ls-question__feedback--incorrect { color: #a83222; }
.ls-question__answered-options { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.ls-question__error { color: #a83222; font-size: var(--text-xs); margin: 0 0 8px; font-family: var(--font-sans); }

/* Submit + retake buttons */
.ls-btn--submit-answer { font-family: var(--font-sans); font-size: var(--text-ui); font-weight: 600; padding: 8px 20px; background: var(--rim-mid); color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.ls-btn--submit-answer:disabled { opacity: 0.55; cursor: not-allowed; }
.ls-btn--retake { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-text-muted); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }
.ls-btn--retake:hover { color: var(--rim-text); }
.ls-questions__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 24px; }
.ls-btn--submit-all { font-family: var(--font-sans); font-size: var(--text-small); font-weight: 600; padding: 11px 32px; background: var(--rim-blue); color: #fff; border: none; border-radius: 6px; cursor: pointer; letter-spacing: 0.02em; transition: background 0.15s; width: fit-content; min-width: 180px; }
.ls-btn--submit-all:hover { background: var(--rim-mid); }
.ls-btn--submit-all:disabled { opacity: 0.45; cursor: not-allowed; background: var(--rim-blue); }
@media (max-width: 430px) { .ls-btn--submit-all { width: 100%; min-width: 0; } }
.ls-btn--retake-all { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-text-muted); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; }
.ls-btn--retake-all:hover { color: var(--rim-text); }
.ls-btn--retake-all:disabled { opacity: 0.55; cursor: not-allowed; }

/* Locked complete state */
.ls-complete-locked { display: flex; flex-direction: column; gap: 8px; }
.ls-complete-locked__hint { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--rim-text-muted); margin: 0; font-style: italic; }
.lp-complete-btn--locked { opacity: 0.45; cursor: not-allowed; background: var(--rim-mid); color: #fff; font-size: var(--text-small); font-weight: 600; padding: 10px 24px; border-radius: 4px; border: none; }

/* Mark as complete — prominent primary in lesson footer context */
.ls-lesson-footer .lp-complete-btn { display: block; width: 100%; font-size: 16px; font-weight: 600; letter-spacing: 0.03em; padding: 14px 24px; border-radius: 8px; border: none; background: var(--rim-mid); color: #fff; text-align: center; transition: background 0.15s; }
.ls-lesson-footer .lp-complete-btn:hover { background: #2e4e62; }
.ls-lesson-footer .lp-complete-btn--done { background: #f4faf7; color: #3d7a66; border: 1.5px solid #b0d4c1; }
.ls-lesson-footer .lp-complete-btn--done:hover { background: #e4eeea; }
.ls-lesson-footer .lp-complete-btn--locked { display: block; width: 100%; font-size: 16px; font-weight: 600; letter-spacing: 0.03em; padding: 14px 24px; border-radius: 8px; }
@media (min-width: 600px) { .ls-lesson-footer .lp-complete-btn { width: auto; min-width: 240px; } .ls-lesson-footer .lp-complete-btn--locked { width: auto; min-width: 240px; } }

/* Series page — required questions indicator */
.crs-toc__badges { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.ls-q-indicator { font-family: var(--font-sans); font-size: var(--text-xxs); font-weight: 700; letter-spacing: 0.06em; background: #e8f0f5; color: var(--rim-mid); padding: 2px 7px; border-radius: 10px; white-space: nowrap; }

/* Teacher editor — question block */
.th-question-block { background: #f5f5f5; border-radius: 8px; padding: 20px 24px; margin-bottom: 20px; }
.th-option-input { font-size: var(--text-small) !important; padding: 9px 12px !important; min-height: 40px; }
.th-question-block__header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.th-question-block__num { font-family: var(--font-sans); font-size: var(--text-ui); font-weight: 700; color: var(--rim-text-muted); min-width: 24px; }
.th-question-block__reorder { display: flex; gap: 4px; }
.th-question-block__options { margin-top: 12px; }
.th-option-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.th-option-row input[type="radio"] { flex-shrink: 0; accent-color: var(--rim-mid); width: 16px; height: 16px; cursor: pointer; }
.th-option-row .th-input { flex: 1; }
.th-btn--icon { background: none; border: 1px solid #ccc; border-radius: 3px; padding: 2px 7px; cursor: pointer; font-size: var(--text-xs); color: var(--rim-text-muted); }
.th-btn--icon:hover { background: #eee; }
.th-btn--icon:disabled { opacity: 0.35; cursor: not-allowed; }
.th-btn--icon-danger { color: #a83222; border-color: #e8b8b4; }
.th-btn--icon-danger:hover { background: #fae9e7; }
.th-checkbox { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); font-size: var(--text-ui); line-height: 1.5; color: var(--rim-text); cursor: pointer; }
.th-checkbox input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--rim-mid); width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════
   ADMIN MEMBER PROFILE — REDESIGN
   Design intention: clear seeing, wise and compassionate response.
   Display-first. Separation through breath, not boxes.
   Adaptive layout: desktop primary, solid on modern phones
   (iPhone 12+ / 390px, modern Android / 360px+).
   adm2- prefix — coexists with legacy adm- styles.
═══════════════════════════════════════════════════ */

/* ── Page shell ── */

.adm2-page {
  background: var(--rim-bg);
  min-height: 100vh;
  padding-bottom: 80px;
}

.adm2-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Back link ── */

.adm2-back {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  text-decoration: none;
  padding: 28px 0 0;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}

.adm2-back:hover { color: var(--rim-mid); }

/* ── Member header ── */

.adm2-header {
  padding: 32px 0 40px;
  border-bottom: 1px solid var(--rim-rule);
  margin-bottom: 48px;
}

.adm2-header__top {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.adm2-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--rim-mid) 0%, var(--rim-dark) 100%);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  margin-top: 4px;
}

.adm2-header__info {
  flex: 1;
  min-width: 0;
}

.adm2-header__name {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--rim-text);
  line-height: 1.2;
  margin: 0 0 6px;
}

.adm2-header__meta {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  line-height: 1.7;
  margin: 0;
}

.adm2-header__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

/* ── Badges ── */

.adm2-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  line-height: 1.4;
}

.adm2-badge--active    { background: #e3f0ea; color: #2d6b4a; }
.adm2-badge--visitor   { background: #e8f0f6; color: #2c5a7a; }
.adm2-badge--student   { background: #f0ece3; color: #6b5a2d; }
.adm2-badge--volunteer { background: #ede3f0; color: #5a2d6b; }
.adm2-badge--inactive  { background: #f0e8e8; color: #7a2c2c; }
.adm2-badge--archived  { background: #f0e8e8; color: #7a2c2c; }
.adm2-badge--tag       { background: var(--rim-bg-accent); color: var(--rim-text-muted); }
.adm2-badge--role      { background: var(--rim-dark); color: #fff; font-size: 10px; }

/* ── Archived banner ── */

.adm2-archived-banner {
  background: #fdf3f3;
  border-left: 3px solid #c0392b;
  color: #7a2c2c;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  line-height: 1.6;
  padding: 12px 16px;
  margin-bottom: 32px;
  border-radius: 0 4px 4px 0;
}

/* ── Sections ── */

.adm2-section {
  margin-bottom: 36px;
}

/*
  Zone separator — 64px top margin on the first section of each
  zone. Zones are separated by breath, not borders or backgrounds.
*/
.adm2-section--zone-start {
  margin-top: 56px;
  padding-top: 8px;
}

.adm2-section--zone-start::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--rim-rule);
  margin: 0 0 40px;
}

.adm2-section__title {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  opacity: 0.8;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rim-rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.adm2-section__hint {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  line-height: 1.6;
  margin: -8px 0 16px;
}

/* ── Display mode (default — read view) ── */

.adm2-display {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 20px;
  align-items: baseline;
}

.adm2-display__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  line-height: 1.6;
}

.adm2-display__value {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text);
  line-height: 1.6;
}

.adm2-display__value--empty {
  color: var(--rim-rule);
  font-style: italic;
}

/* Edit toggle — sits in the section title flex row */
.adm2-edit-toggle {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--rim-mid);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  letter-spacing: 0.03em;
  text-transform: none;
  transition: color 0.15s;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.adm2-edit-toggle:hover { color: var(--rim-blue); }

/* ── Form fields (edit mode) ── */

.adm2-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adm2-form__row {
  display: flex;
  gap: 12px;
}

.adm2-form__row > * { flex: 1; min-width: 0; }

.adm2-form__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.adm2-form__label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--rim-text-muted);
  letter-spacing: 0.03em;
}

.adm2-form__input, .adm2-form__select {
  font-family: var(--font-sans);
  font-size: 16px; /* 16px prevents iOS auto-zoom */
  color: var(--rim-text);
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 5px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}

.adm2-form__input:focus, .adm2-form__select:focus {
  border-color: var(--rim-mid);
  box-shadow: 0 0 0 3px rgba(57, 96, 122, 0.08);
}

.adm2-form__input--error { border-color: #c0392b; }

.adm2-form__hint {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  line-height: 1.5;
}

.adm2-form__hint--warn   { color: #b85c00; }
.adm2-form__email-error  { font-family: var(--font-sans); font-size: var(--text-label); color: var(--color-error); margin-top: 4px; }
.adm2-form__email-checking { font-family: var(--font-sans); font-size: var(--text-label); color: var(--rim-text-muted); margin-top: 4px; }
.adm2-form__email-warning  { font-family: var(--font-sans); font-size: var(--text-label); color: #b85c00; margin-top: 4px; line-height: 1.5; }

/* ── Save bar ── */

.adm2-save {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.adm2-save__btn {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  color: #fff;
  background: var(--rim-blue);
  border: none;
  border-radius: 5px;
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 44px;
  white-space: nowrap;
}

.adm2-save__btn:hover:not(:disabled) { background: var(--rim-dark); }
.adm2-save__btn:disabled { opacity: 0.6; cursor: default; }

.adm2-save__cancel {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
  min-height: 44px;
}

.adm2-save__cancel:hover { color: var(--rim-text); }
.adm2-save__success { font-family: var(--font-sans); font-size: var(--text-ui); color: #2d6b4a; }
.adm2-save__error   { font-family: var(--font-sans); font-size: var(--text-ui); color: var(--color-error); width: 100%; }

/* ── Email confirm flow ── */

.adm2-email-confirm {
  background: var(--rim-bg-accent);
  border-radius: 6px;
  padding: 16px;
  width: 100%;
}

.adm2-email-confirm__text {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text);
  line-height: 1.6;
  margin: 0 0 14px;
}

.adm2-email-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ── Tags ── */

.adm2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.adm2-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  background: var(--rim-bg-accent);
  border-radius: 20px;
  padding: 4px 10px;
}

.adm2-tag__remove {
  background: none;
  border: none;
  color: var(--rim-text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 0 0 2px;
  min-height: 24px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.adm2-tag__remove:hover { color: var(--rim-text); }

.adm2-tags__input {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--rim-rule);
  outline: none;
  padding: 4px 4px;
  min-width: 120px;
  min-height: 32px;
}

.adm2-tags__input::placeholder { color: var(--rim-rule); }

/* ── Roles — grouped grid ── */

.adm2-roles-group {
  margin-bottom: 24px;
}

.adm2-roles-group:last-child { margin-bottom: 0; }

.adm2-roles-group__label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rim-rule);
  margin: 0 0 10px;
}

.adm2-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px;
}

.adm2-role-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s;
}

.adm2-role-item:hover     { background: var(--rim-bg-accent); }
.adm2-role-item--active   { background: var(--rim-bg-accent); }

.adm2-role-item input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--rim-blue);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.adm2-role-item__text { display: flex; flex-direction: column; gap: 1px; }

.adm2-role-item__name {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--rim-text);
  line-height: 1.3;
}

.adm2-role-item__desc {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  line-height: 1.4;
}

/* ── Registration history ── */

.adm2-reg-list {
  display: flex;
  flex-direction: column;
}

.adm2-reg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rim-bg-accent);
}

.adm2-reg:last-child { border-bottom: none; }

.adm2-reg__title {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-mid);
  text-decoration: none;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s;
}

.adm2-reg__title:hover { color: var(--rim-blue); text-decoration: underline; }

.adm2-reg__date {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.adm2-reg__status {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.adm2-reg__status--registered { background: #e3f0ea; color: #2d6b4a; }
.adm2-reg__status--waitlisted { background: #fdf6ec; color: #8a5c00; }
.adm2-reg__status--approved   { background: #e8f0f6; color: #2c5a7a; }
.adm2-reg__status--cancelled  { background: #f0e8e8; color: #7a2c2c; }

.adm2-show-more {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-mid);
  background: none;
  border: none;
  padding: 10px 0 0;
  cursor: pointer;
  transition: color 0.15s;
  min-height: 44px;
}

.adm2-show-more:hover { color: var(--rim-blue); }

.adm2-empty {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  font-style: italic;
  padding: 8px 0;
}

/* ── Buttons (shared) ── */

.adm2-btn--danger {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: #c0392b;
  background: none;
  border: 1px solid #e8c4c4;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-height: 44px;
}

.adm2-btn--danger:hover:not(:disabled) { background: #fdf3f3; border-color: #c0392b; }
.adm2-btn--danger:disabled { opacity: 0.6; cursor: default; }

.adm2-btn--neutral {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  background: none;
  border: 1px solid var(--rim-rule);
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 44px;
}

.adm2-btn--neutral:hover { background: var(--rim-bg-accent); }

.adm2-btn--sm {
  font-size: var(--text-xs);
  padding: 6px 14px;
  min-height: 36px;
}

/* ── Danger zone ── */

.adm2-danger-zone {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid #f0e8e8;
}

.adm2-danger-zone__title {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #c0392b;
  opacity: 0.7;
  margin: 0 0 8px;
}

.adm2-danger-confirm {
  background: #fdf3f3;
  border-radius: 6px;
  padding: 14px 16px;
}

.adm2-danger-confirm__msg {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text);
  margin: 0 0 12px;
  line-height: 1.6;
}

.adm2-danger-confirm__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ══════════════════════════════════════════════════
   ADAPTIVE LAYOUT
   Desktop: full layout as designed above.
   Tablet (≤768px): tighter padding, narrower roles grid.
   Phone (≤480px): single-column everything.
   Target: iPhone 12+ (390px), modern Android (360px+).
   Not designed for sub-360px or pre-2020 devices.
══════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 768px) {
  .adm2-content {
    padding: 0 24px;
  }

  .adm2-roles-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* Phone */
@media (max-width: 480px) {
  .adm2-content {
    padding: 0 16px;
  }

  .adm2-header {
    padding: 24px 0 32px;
    margin-bottom: 36px;
  }

  .adm2-header__top {
    gap: 14px;
  }

  .adm2-avatar {
    width: 44px;
    height: 44px;
    font-size: 17px;
    margin-top: 2px;
  }

  .adm2-header__name {
    font-size: var(--text-h3);
  }

  .adm2-header__meta {
    font-size: var(--text-xs);
  }

  /* Display grid: stack label above value */
  .adm2-display {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .adm2-display__label {
    font-size: var(--text-xxs);
    margin-top: 12px;
    margin-bottom: 1px;
  }

  .adm2-display__value {
    font-size: var(--text-small);
  }

  /* Form rows always stack on phone */
  .adm2-form__row {
    flex-direction: column;
  }

  /* Roles: single column on phone */
  .adm2-roles-grid {
    grid-template-columns: 1fr;
  }

  /* Registration rows: wrap on very narrow screens */
  .adm2-reg {
    flex-wrap: wrap;
    gap: 6px;
  }

  .adm2-reg__date {
    font-size: var(--text-label);
  }

  .adm2-section--zone-start {
    margin-top: 48px;
  }
}

/* ─── adm2: third-party section flattening ──────────────────────────────── */
/*
  HouseholdSection (hh-) and CourseAccessSection (ca-) were built before
  the adm2- design system. When rendered inside .adm2-page, we flatten their
  legacy card styles so they read as native adm2- sections.
*/

.adm2-page .hh-section,
.adm2-page .ca-section {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

.adm2-page .hh-section__title,
.adm2-page .ca-section__title {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  opacity: 0.8;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rim-rule);
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOCKNOTE EDITOR — SHELL + CUSTOM BLOCK EDITOR STYLES (bn- prefix)
   These style the editor shells and custom blocks INSIDE the editor.
   Rendered HTML output uses the existing lp- classes.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Design token ──
   Editor and document-tier output both use Open Sans (RIM Sans).
   --font-doc is kept as an alias for --font-sans so the many editor-chrome
   rules below don't need to be rewritten individually. */
:root {
  --font-doc: 'Open Sans', sans-serif;
}

/* ── Editor shells ── */
.rim-block-editor {
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--font-doc);
  position: relative;        /* anchor for bottom bar */
}

/* Force Inter into BlockNote's internal content area.
   The chain: .bn-editor → .bn-default-styles → .bn-block-outer → .bn-block-content → .bn-inline-content → .ProseMirror
   We target multiple levels to beat any specificity from BlockNote's bundled CSS. */
.rim-block-editor .bn-editor,
.rim-block-editor .bn-default-styles,
.rim-block-editor .bn-block-content,
.rim-block-editor .bn-inline-content,
.rim-block-editor .ProseMirror,
.rim-block-editor [class*="bn-editor"] {
  font-family: var(--font-doc) !important;
  font-size: var(--text-body) !important;
  line-height: var(--lh-body) !important;
  color: var(--rim-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Editor container: no horizontal padding (the card provides it).
   A small padding-bottom preserves a click zone at the end of the
   document even when the trailing empty paragraph is collapsed — see
   the "Smart trailing-line collapse" rule further down. */
.rim-block-editor .bn-editor {
  padding: 0 0 32px !important;
}
/* Block-level spacing — generous like Bear */
.rim-block-editor .bn-block-outer {
  line-height: 1.75 !important;
  margin: 0 !important;
}
/* Headings inside editor — match .doc-body view-mode spacing */
.rim-block-editor [data-content-type="heading"] .bn-inline-content {
  font-family: var(--font-doc) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
/* ── Heading size overrides ──
   BlockNote's CSS loads AFTER ours (component import vs <link> in layout).
   CSS variable overrides (--level) don't work reliably with !important.
   Solution: inject a <style> tag from JS so it always loads last.
   The CSS below is a fallback — the real override is in RimBlockEditor.tsx. */

/* First block shouldn't have giant top margin */
.rim-block-editor .bn-block-outer:first-child {
  margin-top: 0 !important;
}
/* Bold — Inter's 700 can feel light; bump to 800 for stronger contrast */
.rim-block-editor .bn-editor strong,
.rim-block-editor .bn-editor b {
  font-weight: 800 !important;
}

/* Placeholder text */
.rim-block-editor .bn-editor [data-is-empty-and-focused] [data-placeholder]::before,
.rim-block-editor .bn-editor .bn-block-content [data-placeholder]::before {
  font-family: var(--font-doc) !important;
  color: #d5d5d5 !important;
  font-style: normal !important;
}

/* ── Table visibility — warm border style ── */
.rim-block-editor [data-content-type="table"] {
  overflow-x: auto !important;
  display: block !important;
  position: relative;
}
.rim-block-editor [data-content-type="table"] .tableWrapper {
  display: block !important;
  overflow: visible !important;
}
.rim-block-editor [data-content-type="table"] table {
  border-collapse: collapse !important;
  display: table !important;
  visibility: visible !important;
}
.rim-block-editor [data-content-type="table"] td,
.rim-block-editor [data-content-type="table"] th {
  border: 1px solid #e0dcd8 !important;
  padding: 8px 12px !important;
  font-family: var(--font-doc) !important;
  font-size: var(--text-small) !important;
  min-width: 80px !important;
  vertical-align: top;
  display: table-cell !important;
  visibility: visible !important;
}
.rim-block-editor [data-content-type="table"] th {
  background: #f8f6f4 !important;
  font-weight: 600 !important;
}
.rim-block-editor [data-content-type="table"] td > p,
.rim-block-editor [data-content-type="table"] th > p {
  min-height: 1.5rem;
  margin: 0;
}
/* Table delete button — injected via DOM */
.table-delete-btn {
  position: absolute;
  top: -14px;
  left: -14px;
  z-index: 200;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  color: #999;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: color 0.15s, border-color 0.15s;
  opacity: 0;
  pointer-events: none;
}
[data-content-type="table"]:hover .table-delete-btn,
[data-content-type="table"]:focus-within .table-delete-btn {
  opacity: 1;
  pointer-events: auto;
}
.table-delete-btn:hover {
  color: #d44;
  border-color: #d44;
}

/* ── Image blocks ── */
.rim-block-editor [data-content-type="image"] {
  margin: 12px 0 !important;
}
.rim-block-editor [data-content-type="image"] img {
  max-width: 100%;
  border-radius: 4px;
}

/* ── Image alignment overlay — L/C/R buttons injected into image block ── */
.img-align-overlay {
  display: inline-flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e0dcd8;
  border-radius: 8px;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  animation: bear-fade-in-below 0.1s ease;
  pointer-events: auto;
}
.img-align-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: var(--rim-text-muted);
  transition: background 0.1s, color 0.1s;
}
.img-align-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--rim-text);
}
.img-align-btn--active {
  background: rgba(0, 0, 0, 0.08);
  color: var(--rim-mid);
}

.rim-prose-editor {
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  overflow: hidden;
}
/* Font, size, and line-height for all prose editor contexts */
.rim-prose-editor .bn-editor,
.rim-prose-editor .bn-default-styles,
.rim-prose-editor .bn-block-content,
.rim-prose-editor .bn-inline-content,
.rim-prose-editor .ProseMirror {
  font-family: var(--font-doc) !important;
  font-size: var(--text-small) !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
}
/* Padding for document variant (compact overrides this below) */
.rim-prose-editor:not(.rim-prose-editor--compact) .bn-editor {
  padding: 10px 12px !important;
}

/* ── Compact variant — message-sized fields, tighter padding ── */
.rim-prose-editor--compact .bn-editor {
  padding: 6px 4px !important;
}
.rim-prose-editor--compact .bn-block-group > [data-node-type="blockContainer"] {
  padding: 0 !important;
  margin: 0 !important;
}
.rim-prose-editor--compact .bn-block-content {
  padding: 2px 0 !important;
}
.rim-prose-editor--compact .bn-toolbar .mantine-ActionIcon-root,
.rim-prose-editor--compact .bn-toolbar .mantine-Button-root {
  min-width: 28px !important;
  min-height: 28px !important;
}
.rim-prose-editor--compact .bn-toolbar {
  padding: 3px 6px !important;
}
/* Hide the slash command hint in compact — replace with neutral placeholder */
.rim-prose-editor--compact .bn-block-default[data-is-empty-and-focused] .bn-inline-content::before {
  content: "Type here…" !important;
}

/* ── Borderless embedded contexts ────────────────────────────────────────────
   Editors that live inside an already-styled panel — the panel provides the
   visual container, so the editor removes its own border + background.
   Also clears bn-container (inner BlockNote div) to prevent double-box.
   ── */
.si-composer__editor .rim-prose-editor,
.si-note-composer__editor .rim-prose-editor,
.hub-conv-compose__editor .rim-prose-editor,
.hub-conv-post__edit-form .rim-prose-editor,
.hub-detail__form .rim-prose-editor {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.si-composer__editor .bn-container,
.si-note-composer__editor .bn-container,
.hub-conv-compose__editor .bn-container,
.hub-conv-post__edit-form .bn-container,
.hub-detail__form .bn-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Compact toolbar — custom block-type toggle buttons */
.rte-compact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--rim-text-muted);
  transition: background 0.12s, color 0.12s;
}
.rte-compact-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--rim-text);
}
.rte-compact-btn--active {
  background: rgba(0, 0, 0, 0.08);
  color: var(--rim-blue);
}
.rte-compact-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: #e0dcd8;
  margin: 0 4px;
  flex-shrink: 0;
  align-self: center;
}

/* ── Bear-style pill toolbar (appears on text selection) ── */
.rim-block-editor .bn-toolbar,
.rim-prose-editor .bn-toolbar {
  border-radius: 24px !important;
  padding: 4px 8px !important;
  gap: 2px !important;
  border: 1px solid #e0dcd8 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  background: #fff !important;
  overflow: visible !important;
}

/* Portal-based toolbar dropdowns — rendered at document.body via createPortal */
.bear-more-dropdown--portal {
  position: fixed !important;
  z-index: 10000 !important;
}

/* Toolbar buttons — clean, round */
.rim-block-editor .bn-toolbar .mantine-ActionIcon-root,
.rim-block-editor .bn-toolbar .mantine-Button-root,
.rim-prose-editor .bn-toolbar .mantine-ActionIcon-root,
.rim-prose-editor .bn-toolbar .mantine-Button-root {
  border-radius: 8px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  font-family: var(--font-doc) !important;
}

/* ── Bear toolbar — shared dropdown + button components ─────────────── */

/* Wrapper for any dropdown button (H▾, ≡▾, ⋯) */
.bear-more-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* ⋯ button inside the native FormattingToolbar */
.bear-more-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-body);
  letter-spacing: 2px;
  color: var(--rim-text-muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.12s, color 0.12s;
}
.bear-more-btn:hover,
.bear-more-btn--open {
  background: rgba(0, 0, 0, 0.06);
  color: var(--rim-text);
}

/* Dropdown button inside the native FormattingToolbar (bn-toolbar) */
.bear-dd-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  height: 32px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 8px;
  transition: background 0.12s, color 0.12s;
  font-family: var(--font-doc);
}
.bear-dd-btn:hover,
.bear-dd-btn--open {
  background: rgba(0, 0, 0, 0.06);
  color: var(--rim-text);
}
.bear-dd-btn--active {
  color: var(--rim-mid);
}

/* Dropdown panel (used by H▾, ≡▾, and ⋯ context menu) */
.bear-more-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid #e0dcd8;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 4px;
  min-width: 170px;
  z-index: 400;
  display: flex;
  flex-direction: column;
}
/* Flip upward when near the bottom of the viewport */
.bear-more-dropdown--up {
  top: auto;
  bottom: calc(100% + 6px);
}

/* Dropdown items */
.bear-more-item {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-doc);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--rim-text);
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.bear-more-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.bear-more-item--active {
  color: var(--rim-mid);
  font-weight: 600;
}

.bear-more-icon {
  display: flex;
  align-items: center;
  color: var(--rim-text-muted);
}

.bear-more-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 8px;
}

/* Section labels inside pill dropdowns. Classic "eyebrow" treatment:
   small uppercase, muted color, medium weight. The --with-rule modifier
   adds a thin divider line above the label so sections separate cleanly
   (used for every label except the first in a menu). The same style is
   mirrored to the slash menu's Mantine label class below so both menus
   look identical. */
.bear-more-label {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rim-text-muted);
  padding: 10px 12px 4px;
  user-select: none;
  cursor: default;
}
.bear-more-label--with-rule {
  border-top: 1px solid var(--rim-rule);
  margin-top: 4px;
  padding-top: 10px;
}

/* ── Slash menu (BlockNote SuggestionMenuController via Mantine) ────────
   Overrides BlockNote's default Mantine slash menu styling so group
   headers match the pill menu's eyebrow labels exactly: small uppercase
   muted text, with a divider line above each section after the first. */
html body .bn-mantine .bn-suggestion-menu-label {
  font-family: var(--font-sans) !important;
  font-size: var(--text-xxs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--rim-text-muted) !important;
  padding: 10px 12px 4px !important;
}
/* Divider line above each section label, but NOT above the first one */
html body .bn-mantine .bn-suggestion-menu-item + .bn-suggestion-menu-label {
  border-top: 1px solid var(--rim-rule) !important;
  margin-top: 4px !important;
  padding-top: 10px !important;
}
/* Menu items — more compact, our sans font, matched to pill dropdown feel */
html body .bn-mantine .bn-suggestion-menu-item {
  font-family: var(--font-sans) !important;
  font-size: var(--text-ui) !important;
  font-weight: 500 !important;
  color: var(--rim-text) !important;
  height: auto !important;
  padding: 8px 12px !important;
}
/* Hide the built-in icon/section slot — our items are text-only */
html body .bn-mantine .bn-suggestion-menu-item .bn-mt-suggestion-menu-item-section {
  display: none !important;
}
/* Title / subtitle typography inside each item */
html body .bn-mantine .bn-mt-suggestion-menu-item-title {
  font-family: var(--font-sans) !important;
  font-size: var(--text-ui) !important;
  font-weight: 500 !important;
  color: var(--rim-text) !important;
  line-height: 1.4 !important;
}
html body .bn-mantine .bn-mt-suggestion-menu-item-subtitle {
  display: none !important;
}

/* ── Empty-line floating pill ──────────────────────────────────────── */
.bear-float {
  animation: bear-fade-in-below 0.12s ease;
}
/* Flipped above cursor when near bottom of viewport */
.bear-float--above {
  animation: bear-fade-in-above 0.12s ease;
}

@keyframes bear-fade-in-below {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bear-fade-in-above {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The pill container — matches bn-toolbar pill styling */
.bear-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 1px solid #e0dcd8;
  border-radius: 24px;
  padding: 4px 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Pill buttons — inline formatting (B, I, U, link, table) */
.bear-pill__btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-doc);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.12s, color 0.12s;
  padding: 0;
  line-height: 1;
}
/* Dropdown variant — slightly wider to fit caret */
.bear-pill__btn--dd {
  width: auto;
  padding: 0 6px;
  gap: 2px;
}

.bear-pill__btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--rim-text);
}

.bear-pill__btn--active {
  background: rgba(0, 0, 0, 0.06);
  color: var(--rim-mid);
}

/* Thin vertical separator between button groups */
.bear-pill__sep {
  width: 1px;
  height: 18px;
  background: #e0dcd8;
  margin: 0 4px;
  flex-shrink: 0;
}

/* ── FormatPill — the single formatting surface (all editor tiers) ──────────
   See RIM_Editor_Design.md → "Editor Chrome — One Consistent Surface" and
   components/editor/FormatPill.tsx. One design everywhere; what varies per
   surface is which controls are present, not how they look.
   ──────────────────────────────────────────────────────────────────────── */
.fmt-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 1px solid #e0dcd8;
  border-radius: 24px;
  padding: 4px 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  animation: fmt-pill-fade-in-above 0.12s ease;
  font-family: var(--font-sans);
}
.fmt-pill--flipped {
  animation: fmt-pill-fade-in-below 0.12s ease;
}

@keyframes fmt-pill-fade-in-above {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fmt-pill-fade-in-below {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fmt-pill__btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  height: 32px;
  min-width: 32px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 8px;
  transition: background 0.12s, color 0.12s;
  line-height: 1;
}
.fmt-pill__btn--dd {
  min-width: auto;
  padding: 0 8px;
}
.fmt-pill__btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--rim-text);
}
.fmt-pill__btn--active,
.fmt-pill__btn--open {
  background: rgba(0, 0, 0, 0.06);
  color: var(--rim-mid);
}

.fmt-pill__label {
  font-size: var(--text-ui);
  font-weight: 500;
  line-height: 1;
}

.fmt-pill__sep {
  width: 1px;
  height: 18px;
  background: #e0dcd8;
  margin: 0 4px;
  flex-shrink: 0;
}

/* Dropdown wrapper — relative so the menu anchors under its button */
.fmt-pill__dd {
  position: relative;
  display: inline-flex;
}

/* Dropdown menu */
.fmt-pill__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #e0dcd8;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  z-index: 1;
  animation: fmt-pill-menu-in 0.1s ease;
}
@keyframes fmt-pill-menu-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fmt-pill__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text);
  padding: 7px 10px;
  border-radius: 6px;
  line-height: 1.3;
}
.fmt-pill__item:hover {
  background: rgba(0, 0, 0, 0.05);
}
.fmt-pill__item--active {
  color: var(--rim-mid);
  font-weight: 500;
}

.fmt-pill__menu-divider {
  height: 1px;
  background: #eee;
  margin: 4px 2px;
}

.fmt-pill__menu-group-label {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rim-text-muted);
  padding: 6px 10px 2px;
}

/* Color palette swatches */
.fmt-pill__swatches {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  padding: 4px 6px 6px;
}
.fmt-pill__swatch {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--rim-text);
  padding: 0;
}
.fmt-pill__swatch:hover { background: #f3f3f1; }
.fmt-pill__swatch--active { border-color: var(--rim-blue); }

/* Link popover */
.fmt-pill__menu--link {
  min-width: 280px;
  padding: 8px;
}
.fmt-pill__link-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  background: #fff;
  color: var(--rim-text);
  outline: none;
}
.fmt-pill__link-input:focus { border-color: var(--rim-blue); }
.fmt-pill__link-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* ── File attachment (rendered output) ───────────────────────────────────── */
.rim-file {
  display: inline-block;
  margin: 8px 0;
}
.rim-file__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  background: #fafafa;
  color: var(--rim-text) !important;
  text-decoration: none !important;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
}
.rim-file__link:hover { background: #f0f0f0; border-color: var(--rim-mid); }
.rim-file__icon { font-size: 16px; }
.rim-file__name { font-weight: 500; }
.rim-file__caption {
  margin-top: 4px;
  font-size: var(--text-small);
  color: var(--rim-text-muted);
}

/* ── Code block (rendered output) ────────────────────────────────────────── */
.hdoc-body pre,
.rim-content pre {
  background: #f3f3f1;
  color: var(--rim-text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0.9em 0;
}
.hdoc-body code,
.rim-content code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: #f3f3f1;
  padding: 1px 4px;
  border-radius: 3px;
}
.hdoc-body pre code,
.rim-content pre code { background: transparent; padding: 0; }

/* ── Callout block variants (editor + rendered) ──────────────────────────── */
/* Path B: container block. In the editor, each callout lives inside a
   .bn-block wrapper whose child .bn-block-group holds the body blocks. We
   style the wrapper so header + body share one visual box. In rendered
   output, lp-callout-block wraps header + body together. */

/* Variant colors — shared via custom properties so editor wrapper + rendered
   box can pull from the same source. */
.bn-block:has(> .bn-block-content[data-content-type="callout"]),
.lp-callout-block {
  --callout-bg: #f5f5f3;
  --callout-border: var(--rim-mid);
  background: var(--callout-bg);
  border-left: 3px solid var(--callout-border);
  border-radius: 4px;
  padding: 10px 16px;
  margin: 8px 0;
}
.bn-block:has(> .bn-block-content[data-content-type="callout"][data-variant="note"]),
.lp-callout-block--note     { --callout-bg: #fbf6e6; --callout-border: #c9a227; }
.bn-block:has(> .bn-block-content[data-content-type="callout"][data-variant="decision"]),
.lp-callout-block--decision { --callout-bg: #ebf4ef; --callout-border: #2e7a57; }
.bn-block:has(> .bn-block-content[data-content-type="callout"][data-variant="practice"]),
.lp-callout-block--practice { --callout-bg: #e6f2ef; --callout-border: #2a8f79; }
.bn-block:has(> .bn-block-content[data-content-type="callout"][data-variant="reflection"]),
.lp-callout-block--reflection { --callout-bg: #f0ebf6; --callout-border: #7052a8; }
.bn-block:has(> .bn-block-content[data-content-type="callout"][data-variant="question"]),
.lp-callout-block--question { --callout-bg: #e6f0f6; --callout-border: #2c5a7a; }
.bn-block:has(> .bn-block-content[data-content-type="callout"][data-variant="warning"]),
.lp-callout-block--warning  { --callout-bg: #fcf3e8; --callout-border: #d9730d; }
.bn-block:has(> .bn-block-content[data-content-type="callout"][data-variant="info"]),
.lp-callout-block--info     { --callout-bg: #eef5fa; --callout-border: #0b6e99; }

/* The callout block's own content area — just the header. Strip BlockNote's
   default padding so the header sits flush inside the wrapper. */
.bn-block-content[data-content-type="callout"] {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Header row — icon + title */
.bn-callout__header,
.lp-callout-block__header {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.lp-callout-block__header { margin-bottom: 6px; }

.bn-callout__icon,
.lp-callout-block__icon {
  font-size: 16px;
  line-height: 1;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bn-callout__icon {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 3px;
}
.bn-callout__icon:hover { background: rgba(0, 0, 0, 0.05); }

.bn-callout__title,
.lp-callout-block__title {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--rim-text);
  line-height: 1.3;
  margin: 0;
}
.bn-callout__title {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
}
.bn-callout__title::placeholder { color: var(--rim-text-muted); font-weight: 500; }

/* Variant picker popover */
.bn-callout__picker {
  position: absolute;
  top: 28px;
  left: 0;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 4px;
  z-index: 50;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bn-callout__picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text);
  text-align: left;
  width: 100%;
}
.bn-callout__picker-item:hover { background: var(--rim-bg-accent); }
.bn-callout__picker-item--active { background: var(--rim-bg-accent); font-weight: 600; }
.bn-callout__picker-icon { font-size: 14px; width: 18px; text-align: center; }

/* Body — children render in .bn-block-group inside the callout wrapper.
   Tighten spacing so nested paragraphs/lists don't push the box taller than
   needed, and pull lists back into the inner padding. */
.bn-block:has(> .bn-block-content[data-content-type="callout"]) > .bn-block-group {
  padding-left: 32px;
  margin-top: 4px;
}
.bn-block:has(> .bn-block-content[data-content-type="callout"]) > .bn-block-group > .bn-block:last-child {
  padding-bottom: 0;
}
.lp-callout-block__body > p:last-child,
.lp-callout-block__body > ul:last-child,
.lp-callout-block__body > ol:last-child { margin-bottom: 0; }
.lp-callout-block__body > p:first-child,
.lp-callout-block__body > ul:first-child,
.lp-callout-block__body > ol:first-child { margin-top: 0; }

/* ── Aside variant — editor view ────────────────────────────────────────── */
/* Target the .bn-block ancestor via :has() on our rendered .bn-callout--aside
   class. This gives us the same specificity as the generic callout rule
   above, so our !important declarations are decisive. Background is a
   neutral gray by default; context-specific overrides can live in scope
   rules for program / lesson / document editors. */

.bn-block:has(> .bn-block-content > .bn-callout--aside) {
  border-left: none !important;
  background: #eeeeee !important;
  border-radius: 6px !important;
  padding: 0 !important;
  margin: 12px 0 !important;
}
.bn-callout--aside {
  /* No controls anymore — just a zero-height marker. Children render as a
     sibling block-group and pick up the gray background via the :has rule
     above. */
  padding: 0;
  min-height: 0;
}
.bn-block:has(> .bn-block-content > .bn-callout--aside) > .bn-block-group {
  padding: 16px 20px !important;
  margin-top: 0 !important;
}
.bn-block:has(> .bn-block-content > .bn-callout--aside) > .bn-block-group > .bn-block:last-child {
  padding-bottom: 0 !important;
}

/* ── Smart trailing-line collapse ───────────────────────────────────────
   BlockNote always appends an empty paragraph at the end of the document
   so users can keep typing after the last block. That's good UX for text
   flow, but it visually breaks the "finished" look of design blocks
   (aside, callout, image, table) when they're the last content.

   Rule: when the last .bn-block-outer is preceded by a visual container
   block, collapse that last empty paragraph's height to zero. The
   paragraph still exists in the DOM (cursor can still land in it), and
   the editor's padding-bottom keeps a click zone below the container so
   the user can click to add content after.

   Trade-off: fewer visual cues that "you can keep typing." The editor's
   bottom padding + the still-clickable collapsed paragraph together
   preserve functionality; only the visible blank line goes away. */
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="callout"])
  + .bn-block-outer:last-child,
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="image"])
  + .bn-block-outer:last-child,
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="table"])
  + .bn-block-outer:last-child,
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="practiceSuggestion"])
  + .bn-block-outer:last-child,
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="reflection"])
  + .bn-block-outer:last-child {
  min-height: 0 !important;
  margin: 0 !important;
}
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="callout"])
  + .bn-block-outer:last-child
  > .bn-block,
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="image"])
  + .bn-block-outer:last-child
  > .bn-block,
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="table"])
  + .bn-block-outer:last-child
  > .bn-block,
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="practiceSuggestion"])
  + .bn-block-outer:last-child
  > .bn-block,
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="reflection"])
  + .bn-block-outer:last-child
  > .bn-block {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="callout"])
  + .bn-block-outer:last-child
  > .bn-block
  > .bn-block-content[data-content-type="paragraph"],
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="image"])
  + .bn-block-outer:last-child
  > .bn-block
  > .bn-block-content[data-content-type="paragraph"],
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="table"])
  + .bn-block-outer:last-child
  > .bn-block
  > .bn-block-content[data-content-type="paragraph"],
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="practiceSuggestion"])
  + .bn-block-outer:last-child
  > .bn-block
  > .bn-block-content[data-content-type="paragraph"],
.rim-block-editor
  .bn-block-outer:has(> .bn-block > .bn-block-content[data-content-type="reflection"])
  + .bn-block-outer:last-child
  > .bn-block
  > .bn-block-content[data-content-type="paragraph"] {
  min-height: 0 !important;
  height: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible; /* keep cursor visible when focused */
}
/* When the user clicks/focuses into the collapsed paragraph, restore
   normal line height so the cursor has vertical space. */
.rim-block-editor
  .bn-block-outer:last-child
  > .bn-block
  > .bn-block-content[data-content-type="paragraph"]:focus-within {
  min-height: 1.5em !important;
  height: auto;
}
/* Children inside an aside inherit the editor body size. BlockNote's
   default nested-block CSS can shrink font-size inside a .bn-block-group;
   we want the aside's content to read the same as the main document. */
.bn-block:has(> .bn-block-content > .bn-callout--aside) > .bn-block-group .bn-block-content,
.bn-block:has(> .bn-block-content > .bn-callout--aside) > .bn-block-group .bn-inline-content {
  font-size: var(--text-body) !important;
  line-height: var(--lh-body) !important;
}



/* ═══════════════════════════════════════════════════════════════════════════
   EDITORIAL ELEMENTS — Pull Quote, Practice Suggestion, Reflection, Verse
   Each element has its own visual identity. Styling is scoped so that
   documents get a utilitarian treatment (Open Sans, no decorative marks)
   while lessons and programs get full editorial treatment (Quincy CF,
   teal accents, generous whitespace). The BlockNote editor view mirrors
   the document tier so editing is calm and predictable regardless of
   where the document will publish.
═══════════════════════════════════════════════════════════════════════════ */


/* ──── Pull Quote ────────────────────────────────────────────────────────── */
/* Inline-content block. Oversized centered quote with optional attribution.
   "Moment of pause" — no box, just typography and whitespace.          */

/* Editor view — calm / utilitarian (matches document tier) */
.bn-pull-quote {
  display: block;
  padding: 12px 0;
  text-align: center;
}
.bn-pull-quote__mark {
  display: block;
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1;
  color: var(--rim-blue);
  margin-bottom: -4px;
}
.bn-pull-quote__text {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.5;
  color: var(--rim-text);
  min-height: 1.5em;
  outline: none;
}
.bn-pull-quote__text:empty::before {
  content: "A line worth pausing on…";
  color: var(--rim-text-muted);
  font-style: italic;
}
.bn-pull-quote__attribution {
  display: block;
  margin: 8px auto 0;
  width: 60%;
  max-width: 320px;
  border: none;
  background: transparent;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--rim-text-muted);
  font-style: italic;
  outline: none;
}
.bn-pull-quote__attribution::placeholder { color: var(--rim-text-muted); }

/* Rendered base — shared defaults */
.rim-el-pull-quote {
  margin: 32px auto;
  text-align: center;
  max-width: 620px;
}
.rim-el-pull-quote__mark { display: none; }
.rim-el-pull-quote__text {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.5;
  color: var(--rim-text);
}
.rim-el-pull-quote__text p { margin: 0; }
.rim-el-pull-quote__attribution {
  display: block;
  margin-top: 10px;
  font-style: italic;
  font-size: var(--text-small);
  color: var(--rim-text-muted);
}

/* Document scope — utilitarian */
.rim-content--document .rim-el-pull-quote {
  margin: 20px 0;
  text-align: left;
  padding-left: 16px;
  border-left: 2px solid var(--rim-rule);
  max-width: none;
}
.rim-content--document .rim-el-pull-quote__text { font-size: 17px; }

/* Lesson + Program scope — full editorial */
.rim-content--lesson .rim-el-pull-quote,
.rim-content--program .rim-el-pull-quote {
  margin: 48px auto;
  padding: 16px 0;
}
.rim-content--lesson .rim-el-pull-quote__mark,
.rim-content--program .rim-el-pull-quote__mark {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 0.6;
  color: var(--rim-blue);
  margin-bottom: 12px;
}
.rim-content--lesson .rim-el-pull-quote__text,
.rim-content--program .rim-el-pull-quote__text {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--rim-text);
}
.rim-content--program .rim-el-pull-quote { margin: 36px auto; max-width: 560px; }
.rim-content--program .rim-el-pull-quote__text { font-size: 26px; }


/* ──── Practice Suggestion ───────────────────────────────────────────────── */
/* Container block. "PRACTICE" eyebrow + title + block-level body.         */

/* Editor view — uses :has() to style .bn-block wrapper around the practice
   element so header + body share one visual container. */
.bn-block:has(> .bn-block-content[data-content-type="practiceSuggestion"]) {
  background: #edf5f3;
  border-left: 3px solid #2a8f79;
  border-radius: 4px;
  padding: 12px 16px;
  margin: 12px 0;
}
.bn-block-content[data-content-type="practiceSuggestion"] {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.bn-practice__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.bn-practice__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #2a8f79;
  flex-shrink: 0;
}
.bn-practice__title {
  flex: 1;
  min-width: 200px;
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--rim-text);
  line-height: 1.3;
}
.bn-practice__title::placeholder { color: var(--rim-text-muted); font-weight: 500; }

/* Body — children render in .bn-block-group */
.bn-block:has(> .bn-block-content[data-content-type="practiceSuggestion"]) > .bn-block-group {
  padding-left: 0;
  margin-top: 8px;
}
.bn-block:has(> .bn-block-content[data-content-type="practiceSuggestion"]) > .bn-block-group > .bn-block:last-child {
  padding-bottom: 0;
}

/* Rendered base */
.rim-el-practice {
  background: #edf5f3;
  border-left: 3px solid #2a8f79;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 20px 0;
}
.rim-el-practice__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.rim-el-practice__eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #2a8f79;
  flex-shrink: 0;
}
.rim-el-practice__title {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--rim-text);
}
.rim-el-practice__body > *:first-child { margin-top: 0; }
.rim-el-practice__body > *:last-child  { margin-bottom: 0; }

/* Lesson + Program scope — full editorial (Quincy CF title, more room) */
.rim-content--lesson .rim-el-practice,
.rim-content--program .rim-el-practice {
  padding: 18px 22px;
  margin: 28px 0;
}
.rim-content--lesson .rim-el-practice__title,
.rim-content--program .rim-el-practice__title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
}


/* ──── Reflection ────────────────────────────────────────────────────────── */
/* Container block. Italic question lead-in + block-level body.            */
/* No box — just hairline rules above and below.                           */

/* Editor view */
.bn-block:has(> .bn-block-content[data-content-type="reflection"]) {
  border-top: 1px solid var(--rim-rule);
  border-bottom: 1px solid var(--rim-rule);
  padding: 14px 0;
  margin: 16px 0;
}
.bn-block-content[data-content-type="reflection"] {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.bn-reflection__question {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  font-family: var(--font-sans);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  color: var(--rim-text);
  line-height: 1.4;
}
.bn-reflection__question::placeholder {
  color: var(--rim-text-muted);
  font-style: italic;
}
.bn-block:has(> .bn-block-content[data-content-type="reflection"]) > .bn-block-group {
  padding-left: 0;
  margin-top: 8px;
}
.bn-block:has(> .bn-block-content[data-content-type="reflection"]) > .bn-block-group > .bn-block:last-child {
  padding-bottom: 0;
}

/* Rendered base */
.rim-el-reflection {
  border-top: 1px solid var(--rim-rule);
  border-bottom: 1px solid var(--rim-rule);
  padding: 18px 0;
  margin: 28px 0;
}
.rim-el-reflection__question {
  font-family: var(--font-sans);
  font-size: 18px;
  font-style: italic;
  line-height: 1.4;
  color: var(--rim-text);
  margin-bottom: 10px;
}
.rim-el-reflection__body > *:first-child { margin-top: 0; }
.rim-el-reflection__body > *:last-child  { margin-bottom: 0; }

/* Lesson + Program scope — full editorial */
.rim-content--lesson .rim-el-reflection,
.rim-content--program .rim-el-reflection {
  padding: 28px 0;
  margin: 40px 0;
}
.rim-content--lesson .rim-el-reflection__question,
.rim-content--program .rim-el-reflection__question {
  font-family: var(--font-serif);
  font-size: 24px;
  font-style: italic;
  line-height: 1.4;
  color: var(--rim-text);
  margin-bottom: 14px;
}
.rim-content--program .rim-el-reflection__question { font-size: 21px; }


/* ──── Verse Quote (refined) ─────────────────────────────────────────────── */
/* Inline single-line content + optional attribution. Reverent / external. */
/* The existing .lp-verse-quote base stays; .rim-el-verse layers on top.   */

.rim-el-verse {
  margin: 24px auto;
  text-align: center;
  max-width: 560px;
}
.rim-el-verse__text {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  color: var(--rim-text);
}
.rim-el-verse__text p { margin: 0; }
.rim-el-verse__attribution {
  display: block;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  font-style: normal;
}

/* Document scope — utilitarian */
.rim-content--document .rim-el-verse {
  margin: 16px 0;
  text-align: left;
  padding-left: 16px;
  border-left: 2px solid var(--rim-rule);
  max-width: none;
}

/* Lesson + Program scope — full editorial */
.rim-content--lesson .rim-el-verse,
.rim-content--program .rim-el-verse {
  margin: 36px auto;
}
.rim-content--lesson .rim-el-verse__text,
.rim-content--program .rim-el-verse__text {
  font-family: var(--font-serif);
  font-size: 22px;
  font-style: italic;
  line-height: 1.5;
  color: var(--rim-text);
}
.rim-content--program .rim-el-verse__text { font-size: 20px; }


/* ──── Note (rim-el-note — new class on existing callout) ────────────────── */
/* Document scope — tighten the callout so it reads as internal annotation. */

.rim-content--document .rim-el-note {
  margin: 12px 0;
  padding: 8px 12px;
  font-size: var(--text-ui);
  line-height: 1.5;
}
.rim-content--document .rim-el-note .lp-callout-block__title {
  font-size: var(--text-ui);
}

/* Lesson + Program scope — editorial title treatment */
.rim-content--lesson .rim-el-note .lp-callout-block__title,
.rim-content--program .rim-el-note .lp-callout-block__title {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 600;
}


/* ──── Aside (rim-el-note--aside) ───────────────────────────────────────── */
/* Universal shaded container. Default is neutral gray. Context scopes
   (.rim-content--lesson, .rim-content--program, etc.) can override the
   background to match their own palette. Title is a heading block nested
   inside — picks up the scope's own heading styles, no special class. */

.rim-el-note--aside {
  background: #eeeeee;
  border-radius: 6px;
  padding: 24px 20px;
  margin: 1.5em 0;
}
.rim-el-note--aside > *:first-child { margin-top: 0; }
.rim-el-note--aside > *:last-child  { margin-bottom: 0; }

/* Document scope — slightly tighter */
.rim-content--document .rim-el-note--aside {
  padding: 16px 20px;
  margin: 0.75em 0;
}

/* ── Document page wrapper — clean white card on warm bg ── */
.doc-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.doc-page__card {
  background: #ffffff;
  border-radius: 0;
  padding: 80px 64px 100px;
  margin: 40px 0 80px;
  min-height: 60vh;
}

.doc-page__card h1 {
  font-family: var(--font-doc);
  font-size: 32px;
  font-weight: 700;
  color: var(--rim-text);
  line-height: 1.25;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.doc-page__card .doc-page__subtitle {
  font-family: var(--font-doc);
  font-size: var(--text-small);
  font-style: italic;
  color: var(--rim-text-muted);
  margin: 0 0 32px;
}

.doc-page__card hr {
  border: none;
  border-top: 1px solid #e0dcd8;
  margin: 0 0 40px;
}

/* Document body typography — Inter, generous spacing */
.doc-body {
  font-family: var(--font-doc);
  font-size: 16px;
  line-height: 1.8;
  color: var(--rim-text);
}
.doc-body p                     { margin: 0 0 20px; }
.doc-body h1                    { font-family: var(--font-doc); font-size: 32px; font-weight: 700; margin: 56px 0 20px; letter-spacing: -0.01em; line-height: 1.2; }
.doc-body > h1:first-child,
.doc-body > h2:first-child,
.doc-body > h3:first-child      { margin-top: 0; }
.doc-body h2                    { font-family: var(--font-doc); font-size: var(--text-h3); font-weight: 700; margin: 48px 0 16px; letter-spacing: -0.01em; line-height: 1.25; }
.doc-body h3                    { font-family: var(--font-doc); font-size: var(--text-h4); font-weight: 600; margin: 36px 0 12px; line-height: 1.3; }
.doc-body ul, .doc-body ol      { padding-left: 28px; margin: 0 0 20px; }
.doc-body ul                    { list-style-type: disc; }
.doc-body ol                    { list-style-type: decimal; }
.doc-body li                    { margin-bottom: 6px; }
/* doc-body keeps browser disc bullets — suppress the rim-content custom bullet */
.doc-body ul > li::before       { display: none; }
.doc-body blockquote            { border-left: 3px solid #d5d5d5; padding-left: 20px; margin: 24px 0; color: var(--rim-text-muted); font-style: italic; }
.doc-body a                     { color: var(--rim-mid); text-decoration: underline; text-underline-offset: 2px; }
.doc-body a:hover               { color: var(--rim-blue); }
.doc-body strong                { font-weight: 800; }
.doc-body table                 { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: var(--text-small); }
.doc-body th, .doc-body td      { border: 1px solid #d5d0cb; padding: 12px 16px; text-align: left; vertical-align: top; }
.doc-body th                    { font-weight: 600; background: #f5f2ef; }
.doc-body tr:nth-child(even) td { background: #faf8f6; }

/* Document navigation — above the card */
.doc-page__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 0;
}

.doc-page__back,
.doc-page__edit-link {
  font-family: var(--font-doc);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.doc-page__back:hover,
.doc-page__edit-link:hover { color: var(--rim-mid); }

.doc-page__meta {
  font-family: var(--font-doc);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 0;
}

/* Title input in edit mode */
.doc-page__title-input {
  font-family: var(--font-doc);
  font-size: 32px;
  font-weight: 700;
  color: var(--rim-text);
  letter-spacing: -0.02em;
  line-height: 1.25;
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  padding: 0;
  margin: 0 0 8px;
}
.doc-page__title-input::placeholder { color: #d5d5d5; }

.doc-page__footer {
  padding: 0 64px 40px;
}
.doc-page__footer a {
  font-family: var(--font-doc);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.doc-page__footer a:hover { color: var(--rim-mid); }

/* ── Editor inside document page (no border, just the typing surface) ── */
.doc-page .rim-block-editor {
  background: transparent;
  border: none;
}

@media (max-width: 768px) {
  .doc-page__card {
    padding: 48px 32px 64px;
    margin: 24px 0 60px;
  }
  .doc-page__footer { padding: 0 32px 32px; }
}
@media (max-width: 430px) {
  .doc-page { padding: 0 16px; }
  .doc-page__card {
    padding: 32px 20px 48px;
    margin: 16px 0 40px;
  }
  .doc-page__card h1 { font-size: 26px; }
  .doc-page__footer { padding: 0 20px 24px; }
}

/* ── Document banners (author attribution, presence warning) ── */
.doc-banner {
  font-family: var(--font-doc);
  font-size: var(--text-ui);
  line-height: 1.5;
  padding: 10px 20px;
  border-radius: 8px;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.doc-banner--info {
  background: #f0f0f0;
  color: var(--rim-text-muted);
}
.doc-banner--warning {
  background: #fef3e2;
  color: #8b6914;
  border: 1px solid #f0d68a;
}
.doc-banner__dismiss {
  background: none;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 4px 12px;
  font-family: var(--font-doc);
  font-size: var(--text-xs);
  font-weight: 500;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.doc-banner__dismiss:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Lock toggle button */
.doc-lock-btn {
  background: none;
  border: 1px solid #e0dcd8;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--text-ui);
  transition: background 0.12s, border-color 0.12s;
}
.doc-lock-btn:hover {
  background: #f0f0f0;
}
.doc-lock-btn--locked {
  background: #fef3e2;
  border-color: #f0d68a;
}

/* Verse Quote — editor view */
.bn-verse-quote {
  border-left: 3px solid var(--rim-rule);
  padding: 12px 16px;
  margin: 8px 0;
  background: var(--rim-bg-accent);
  border-radius: 0 4px 4px 0;
}

.bn-verse-quote__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--rim-text);
  line-height: 1.7;
  margin-bottom: 8px;
}

.bn-verse-quote__attribution {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  color: var(--rim-text-muted);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--rim-rule);
  outline: none;
  width: 100%;
  padding: 2px 0;
}

/* Practice Suggestion is now a container block; editor-view CSS lives with
   the other editorial elements above (.bn-practice / .rim-el-practice). */

/* Callout — variant styles live with the shared block above (bn-callout /
   lp-callout-block). Legacy duplicate rules removed. */


/* ═══════════════════════════════════════════════════
   HUB DOCUMENT EDITOR (hdoc-editor-)
   Document creation/editing surface.
═══════════════════════════════════════════════════ */

.hdoc-editor {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.hdoc-editor__nav { padding: 24px 0 16px; }

.hdoc-editor__back {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.hdoc-editor__back:hover { color: var(--rim-mid); }

.hdoc-editor__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rim-rule);
}

.hdoc-editor__title-input {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--rim-text);
  background: transparent;
  border: none;
  outline: none;
  min-height: 44px;
  padding: 0;
}
.hdoc-editor__title-input::placeholder { color: var(--rim-rule); }

.hdoc-editor__category {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  background: var(--rim-bg-accent);
  border: 1px solid var(--rim-rule);
  border-radius: 20px;
  padding: 4px 12px;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
}

.hdoc-editor__category-input {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text);
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 20px;
  padding: 4px 12px;
  outline: none;
  width: 180px;
}
.hdoc-editor__category-input:focus {
  border-color: var(--rim-mid);
}

.hdoc-editor__body { margin-bottom: 32px; }

.hdoc-editor__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--rim-bg-accent);
}

.hdoc-editor__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hdoc-editor__error {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-error);
  flex: 1;
}

.hdoc-editor__save {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  color: #fff;
  background: var(--rim-blue);
  border: none;
  border-radius: 5px;
  padding: 10px 24px;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s;
}
.hdoc-editor__save:hover:not(:disabled) { background: var(--rim-dark); }
.hdoc-editor__save:disabled { opacity: 0.6; cursor: default; }

.hdoc-editor__delete {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-right: auto;
  transition: color 0.15s;
}
.hdoc-editor__delete:hover { color: #c0392b; }

/* ── Document view page (hdoc-view-) ── */

.hdoc-view {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.hdoc-view__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 16px;
}

.hdoc-view__back {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.hdoc-view__back:hover { color: var(--rim-mid); }

.hdoc-view__edit-link {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-mid);
  text-decoration: none;
  transition: color 0.15s;
}
.hdoc-view__edit-link:hover { color: var(--rim-blue); }

.hdoc-view__header {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rim-rule);
  margin-bottom: 40px;
}

.hdoc-view__title {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 8px;
  line-height: 1.2;
}

.hdoc-view__meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  margin: 0;
}

.hdoc-view__empty {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  font-style: italic;
}

.hdoc-view__footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rim-bg-accent);
}

.hdoc-view__export {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.hdoc-view__export:hover { color: var(--rim-mid); }

/* Native document link in doc list */
.hub-doc-item__native-link {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--rim-mid);
  text-decoration: none;
  transition: color 0.15s;
}
.hub-doc-item__native-link:hover { color: var(--rim-blue); text-decoration: underline; }

.hub-doc-item__link {
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 600;
  color: var(--rim-mid);
  text-decoration: none;
  transition: color 0.15s;
}
.hub-doc-item__link:hover { color: var(--rim-blue); text-decoration: underline; }

@media (max-width: 480px) {
  .hdoc-editor { padding: 0 16px 60px; }
  .hdoc-view   { padding: 0 16px 60px; }
  .hdoc-editor__title-input { font-size: 22px; }
  .hdoc-editor__header { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════
   TOOLS LAYOUT (tools-nav-, tools-)
   ═══════════════════════════════════════════════════ */

/* Shell */
.tools-shell { display: flex; flex-direction: column; }
.tools-content { flex: 1; padding: 32px 36px 72px; max-width: 1200px; margin: 0 auto; width: 100%; }

/* Nav bar */
.tools-nav {
  background: var(--rim-bg);
  border-bottom: 1px solid #eee;
}
.tools-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 36px;
  height: 56px;
}
.tools-nav__left { display: flex; align-items: center; }
.tools-nav__name {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--rim-text-muted);
  letter-spacing: 0.03em;
}
.tools-nav__center { flex: 1; display: flex; justify-content: center; }
.tools-nav__right { display: flex; align-items: center; }
.tools-nav__back {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  text-decoration: none;
}
.tools-nav__back:hover { color: var(--rim-text); }

/* Placeholder + unauthorized */
.tools-placeholder { padding: 40px 0; }
.tools-placeholder h1 { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: 400; margin: 0 0 8px; }
.tools-placeholder p { color: var(--rim-text-muted); }
.tools-unauthorized { padding: 40px 36px; color: var(--rim-text-muted); font-size: var(--text-small); }

@media (max-width: 767px) {
  .tools-nav__inner { padding: 0 16px; height: 48px; }
  .tools-nav__name { font-size: 16px; }
  .tools-content { padding: 20px 16px 48px; }
}

/* Tools sub-nav */
.tools-nav__subnav { display: flex; gap: 4px; }
.tools-nav__subnav-link {
  font-size: var(--text-xs);
  padding: 4px 12px;
  border-radius: 16px;
  color: var(--rim-text-muted);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.tools-nav__subnav-link:hover { background: var(--rim-bg-accent); color: var(--rim-text); }
.tools-nav__subnav-link--active {
  background: var(--rim-bg-accent);
  color: var(--rim-text);
  font-weight: 600;
}

@media (max-width: 767px) {
  .tools-nav__subnav { gap: 2px; overflow-x: auto; }
  .tools-nav__subnav-link { font-size: var(--text-label); padding: 4px 8px; white-space: nowrap; }
}

/* ── 404 Page (nf- prefix) ── */
.nf-page {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60vh; text-align: center; padding: 48px 24px;
}
.nf-heading {
  font-family: var(--font-serif); font-size: 36px; font-weight: 400;
  color: var(--rim-blue, #135274); margin: 0 0 12px;
}
.nf-text {
  font-size: 16px; color: var(--rim-text-muted, #777);
  margin: 0 0 32px; max-width: 400px; line-height: 1.5;
}
.nf-link { font-size: var(--text-small); color: var(--rim-mid, #39607a); text-decoration: underline; }
.nf-link:hover { color: var(--rim-blue, #135274); }

/* ── Shared empty state (rim-empty) ── */
.rim-empty { text-align: center; padding: 40px 24px; color: var(--rim-text-muted, #777); font-size: var(--text-small); }
.rim-empty__text { margin: 0 0 12px; }
.rim-empty__link { color: var(--rim-mid, #39607a); text-decoration: underline; font-size: var(--text-ui); }
.rim-empty__link:hover { color: var(--rim-blue, #135274); }


/* ═══════════════════════════════════════════════════
   MASTER STYLE GUIDE — /admin/style-guide
   CSS prefix: sg-
═══════════════════════════════════════════════════ */

.sg-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 32px 80px;
  font-family: var(--font-sans);
}

/* Header */
.sg-page-title {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  color: var(--rim-text);
  margin: 0 0 10px;
}
.sg-page-subtitle {
  font-size: 16px;
  color: var(--rim-text-muted);
  margin: 0 0 36px;
  line-height: 1.6;
}

/* Tab nav */
.sg-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--rim-rule);
  margin-bottom: 40px;
}
.sg-tab {
  background: none;
  border: none;
  padding: 10px 18px 12px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--rim-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s;
}
.sg-tab:hover { color: var(--rim-text); }
.sg-tab--active { color: var(--rim-blue); border-bottom-color: var(--rim-blue); font-weight: 600; }

/* Sections */
.sg-section {
  padding-bottom: 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--rim-rule);
}
.sg-section:last-child { border-bottom: none; }
.sg-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 16px;
}
.sg-note {
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  line-height: 1.6;
  margin: 0 0 24px;
}
.sg-note code { background: var(--rim-bg-accent); padding: 1px 5px; border-radius: 3px; font-size: var(--text-xs); color: var(--rim-text); }
.sg-note strong { font-weight: 600; color: var(--rim-text); }

/* Typography scale */
.sg-type-scale { display: flex; flex-direction: column; gap: 20px; }
.sg-type-row { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: #fff; border-radius: 6px; border: 1px solid var(--rim-rule); }
.sg-type-example { padding: 8px 0; }
.sg-example-block { padding: 24px; background: #fff; border-radius: 6px; border: 1px solid var(--rim-rule); margin-bottom: 8px; }

/* p vs li comparison */
.sg-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 16px;
}
.sg-compare-col { padding: 20px; background: #fff; border-radius: 6px; border: 1px solid var(--rim-rule); }
.sg-compare-label { font-size: var(--text-xxs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rim-text-muted); margin-bottom: 12px; }
@media (max-width: 600px) { .sg-compare { grid-template-columns: 1fr; } }

/* Code label */
.sg-code {
  display: block;
  font-size: var(--text-label);
  font-family: var(--font-mono);
  color: var(--rim-text-muted);
  background: var(--rim-bg-accent);
  padding: 6px 10px;
  border-radius: 4px;
  white-space: pre-wrap;
}

/* Color swatches */
.sg-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.sg-swatch { border: 1px solid var(--rim-rule); border-radius: 6px; overflow: hidden; background: #fff; }
.sg-swatch-color { height: 64px; }
.sg-swatch-info { padding: 10px 12px; }
.sg-swatch-label { font-size: var(--text-xs); font-weight: 600; color: var(--rim-text); margin-bottom: 2px; }
.sg-swatch-token { font-size: var(--text-xxs); font-family: var(--font-mono); color: var(--rim-mid); display: block; margin-bottom: 2px; }
.sg-swatch-hex { font-size: var(--text-label); color: var(--rim-text-muted); margin-bottom: 2px; }
.sg-swatch-use { font-size: var(--text-xxs); color: var(--rim-text-muted); line-height: 1.4; }

/* Font list */
.sg-font-list { display: flex; flex-direction: column; gap: 16px; }
.sg-font-row { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: #fff; border-radius: 6px; border: 1px solid var(--rim-rule); }

/* Buttons grid */
.sg-btn-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.sg-btn-item { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sg-btn-note { font-size: var(--text-label); color: var(--rim-text-muted); }

/* Forms */
.sg-form-examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.sg-form-group { display: flex; flex-direction: column; gap: 6px; }
.sg-form-note { font-size: var(--text-label); color: var(--rim-text-muted); }
.sg-checkbox-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: var(--text-body); color: var(--rim-text); cursor: pointer; }

/* Editor preview */
.sg-editor-preview { padding: 32px; background: #fff; border-radius: 6px; border: 1px solid var(--rim-rule); max-width: 700px; }

/* Context class list */
.sg-context-list { display: flex; flex-direction: column; gap: 10px; }
.sg-context-row { display: flex; align-items: baseline; gap: 16px; padding: 10px 14px; background: #fff; border-radius: 6px; border: 1px solid var(--rim-rule); flex-wrap: wrap; }
.sg-context-cls { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--rim-mid); white-space: nowrap; }
.sg-context-surface { font-size: var(--text-ui); color: var(--rim-text-muted); }

/* Token table rows */
.sg-token-row { display: flex; align-items: baseline; gap: 16px; padding: 12px 14px; background: #fff; border-radius: 6px; border: 1px solid var(--rim-rule); flex-wrap: wrap; }
.sg-token-name { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--rim-mid); font-weight: 600; min-width: 140px; }
.sg-token-value { font-size: var(--text-xs); font-family: var(--font-mono); color: var(--rim-text); min-width: 100px; }
.sg-token-use { font-size: var(--text-xs); color: var(--rim-text-muted); }

@media (max-width: 430px) {
  .sg-page { padding: 24px 16px 60px; }
  .sg-tabs { overflow-x: auto; }
  .sg-tab { white-space: nowrap; padding: 10px 12px 12px; font-size: var(--text-xs); }
  .sg-swatch-grid { grid-template-columns: 1fr 1fr; }
  .sg-form-examples { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY SHIM — Webflow CSS replacement
   ─────────────────────────────────────────────────────────────────────────
   webflow.css and rim.webflow.css have been removed. These rules recreate
   the Webflow utility + site classes that unredesigned pages still reference.

   When a page is redesigned with our token system, it stops using these
   classes. When all pages are redesigned, delete this entire block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Webflow utility classes ─────────────────────────────────────────────── */
.w-block       { display: block; }
.w-inline-block { max-width: 100%; display: inline-block; }
.w-hidden      { display: none; }
.w-list-unstyled { padding-left: 0; list-style: none; }

.w-clearfix:before, .w-clearfix:after { content: " "; display: table; }
.w-clearfix:after { clear: both; }

/* w-richtext: legacy pages only — new pages use .rim-content */
.w-richtext:before, .w-richtext:after { content: " "; display: table; }
.w-richtext:after  { clear: both; }
.w-richtext ol, .w-richtext ul { overflow: hidden; }

/* Background video (homepage hero) */
.w-background-video {
  position: relative;
  overflow: hidden;
  height: 500px;
  color: #fff;
}
.w-background-video > video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}
.w-background-video-atom { pointer-events: none; }

/* Grid layout */
.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

/* ── Form classes ────────────────────────────────────────────────────────── */
.w-form { margin: 0 0 15px; }

.w-input,
.w-select {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.42857143;
  color: var(--rim-text);
  background-color: #fff;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.w-input::placeholder, .w-select::placeholder { color: #999; }

.w-button {
  display: inline-block;
  padding: 9px 15px;
  background-color: var(--rim-blue);
  color: #fff;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-sans);
}
input.w-button { -webkit-appearance: button; }

/* ── Layout containers ───────────────────────────────────────────────────── */
.section {
  padding-top: 120px;
  padding-bottom: 120px;
  display: block;
}

.content-container {
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.button-2 {
  color: #fff;
  letter-spacing: 0.5px;
  background-color: var(--rim-mid);
  border-radius: 25px;
  height: 45px;
  margin-top: 30px;
  padding: 14px 30px 0;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1em;
  text-decoration: none;
  display: inline-block;
}
.button-2.no-top-margin { margin-top: 0; }
._20px-from-top { margin-top: 20px; }
.donate-red { background-color: #c23b3b; }

.button-2-white {
  color: #232323;
  letter-spacing: 0.5px;
  background-color: #fff;
  border-radius: 25px;
  height: 45px;
  margin-top: 2em;
  padding: 15px 30px 0;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1em;
  display: inline-block;
  text-decoration: none;
}
.button-2-copy {
  color: #fff;
  letter-spacing: 0.5px;
  background-color: var(--rim-blue);
  border-radius: 6px;
  height: 45px;
  padding: 15px 20px 0;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1em;
  display: inline-block;
  text-decoration: none;
}
.button-4,
.button-5 {
  color: #fff;
  text-align: center;
  background-color: var(--rim-mid);
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  max-height: 52px;
  padding: 12px 21px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 28px;
  text-decoration: none;
  display: flex;
}
.button-5.bordered {
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.adjacent-to-button { margin-left: 12px; }

.button-primary {
  color: #fff;
  background-color: var(--rim-blue);
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
}
.link-block-3 {
  color: #fff;
  background-color: #16192c;
  border-radius: 38px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 60px;
  padding-left: 30px;
  padding-right: 30px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 24px;
  text-decoration: none;
  display: flex;
}
.cta-btn {
  color: var(--rim-text);
  background-color: #fff;
  border-radius: 30px;
  margin-top: 28px;
  padding: 13px 40px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 22px;
  text-decoration: none;
  display: inline-block;
}
.button-menu {
  color: #fff;
  letter-spacing: 1px;
  white-space: nowrap;
  background-color: #db1d40;
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding-left: 35px;
  padding-right: 35px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
  display: flex;
}

/* ── Component classes ───────────────────────────────────────────────────── */
.programlistblock {
  grid-column-gap: 0;
  background-color: #fff;
  border-radius: 6px;
  grid-template-rows: auto;
  grid-template-columns: 802px 1fr;
  place-items: center end;
  margin-bottom: 25px;
  padding: 20px;
}
.teacher-container {
  align-items: center;
  width: auto;
  margin: 30px auto;
  display: flex;
}
.breadcrumb-link {
  background-color: #f4eeeb;
  border-radius: 24px;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px 15px 9px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  color: var(--rim-text);
  display: inline-block;
}
.signed-out-instuctions {
  margin-top: 15px;
  margin-bottom: 0;
  display: block;
}
.article ul {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 20px;
  list-style-type: disc;
}
.article ol {
  padding-left: 25px;
  list-style-type: decimal;
}

/* ═══════════════════════════════════════════════════
   EDITOR LAB  (/admin/editor-lab)
   Admin-only development workspace for rich text editors — el- prefix.
═══════════════════════════════════════════════════ */

.el-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 28px 80px;
  font-family: var(--font-sans);
  color: var(--rim-text);
}

.el-header {
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rim-rule);
}
.el-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--rim-text);
}
.el-subtitle {
  margin: 0;
  max-width: 780px;
  font-size: var(--text-ui);
  line-height: 1.55;
  color: var(--rim-text-muted);
}

.el-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rim-rule);
}
.el-tab {
  padding: 10px 16px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.el-tab:hover { color: var(--rim-text); }
.el-tab--active {
  color: var(--rim-blue);
  border-bottom-color: var(--rim-blue);
  font-weight: 600;
}

.el-blurb {
  padding: 12px 0 0;
  margin-bottom: 20px;
}
.el-blurb p {
  margin: 0;
  font-size: var(--text-ui);
  color: var(--rim-text-muted);
  max-width: 780px;
}

.el-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.el-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 900px) {
  .el-split { grid-template-columns: 1fr; }
}

.el-pane {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  background: #fff;
  border: 1px solid var(--rim-rule);
  border-radius: 10px;
  overflow: hidden;
}
.el-pane__label {
  padding: 10px 14px;
  background: var(--rim-bg);
  border-bottom: 1px solid var(--rim-rule);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rim-text-muted);
}
.el-pane__label code {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: 400;
  color: var(--rim-blue);
  margin-left: 4px;
}
.el-pane__body {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.el-placeholder {
  color: var(--rim-text-muted);
  font-size: var(--text-ui);
  line-height: 1.55;
}
.el-placeholder p { margin: 0 0 10px; }
.el-placeholder p:last-child { margin-bottom: 0; }

.el-spec {
  padding: 24px;
  background: var(--rim-bg);
  border: 1px solid var(--rim-rule);
  border-radius: 10px;
}
.el-spec__title {
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--rim-text);
}
.el-spec__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 14px;
}
@media (max-width: 700px) {
  .el-spec__grid { grid-template-columns: 1fr; gap: 18px; }
}
.el-spec__heading {
  font-family: var(--font-sans);
  font-size: var(--text-xxs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rim-text-muted);
  margin: 0 0 8px;
}
.el-spec__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.el-spec__col li {
  padding: 4px 0;
  font-size: var(--text-ui);
  line-height: 1.5;
  color: var(--rim-text);
  border-bottom: 1px dotted var(--rim-rule);
}
.el-spec__col li:last-child { border-bottom: 0; }
.el-spec__note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  line-height: 1.5;
}
.el-spec__note code {
  font-family: var(--font-mono);
  font-size: var(--text-label);
}

/* ═══════════════════════════════════════════════════
   TipTap prototype (editor lab)
   tt- prefix = TipTap editor chrome (toolbar, bubble menu, editor area)
   ═══════════════════════════════════════════════════ */

.tt-wrap {
  border: 1px solid var(--rim-rule, #d5d5d5);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.tt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: #fafafa;
  border-bottom: 1px solid var(--rim-rule, #d5d5d5);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
}

.tt-sep {
  width: 1px;
  align-self: stretch;
  background: var(--rim-rule, #d5d5d5);
  margin: 2px 6px;
}

.tt-group-label {
  font-size: var(--text-xs);
  color: var(--rim-text-muted);
  padding: 0 6px 0 2px;
}

.tt-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--rim-text);
  padding: 5px 9px;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-ui);
  line-height: 1;
  transition: background 120ms ease, border-color 120ms ease;
}

.tt-btn:hover {
  background: #eee;
}

.tt-btn.is-active {
  background: var(--rim-blue, #135274);
  color: #fff;
  border-color: var(--rim-blue, #135274);
}

.tt-btn--ghost {
  color: var(--rim-text-muted);
}

.tt-select {
  appearance: none;
  border: 1px solid var(--rim-rule, #d5d5d5);
  background: #fff;
  color: var(--rim-text);
  padding: 5px 26px 5px 9px;
  border-radius: 4px;
  font: inherit;
  font-size: var(--text-ui);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23777' d='M6 8.5L2 4.5h8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
}

.tt-bubble {
  display: flex;
  gap: 2px;
  padding: 4px;
  background: #1a1a1a;
  border-radius: 5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.tt-bubble .tt-btn {
  color: rgba(255, 255, 255, 0.85);
  padding: 4px 8px;
}

.tt-bubble .tt-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.tt-bubble .tt-btn.is-active {
  background: #fff;
  color: #1a1a1a;
  border-color: #fff;
}

.tt-editor {
  padding: 20px 24px;
  min-height: 360px;
  outline: none;
}

.tt-editor p {
  margin: 0 0 1em;
  min-height: 1lh;
}

.tt-editor p:has(br.ProseMirror-trailingBreak:only-child)::before {
  content: "\00a0";
  display: inline-block;
}

.rim-content p:empty::before {
  content: "\00a0";
}

.tt-editor.ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--rim-text-muted);
  float: left;
  height: 0;
  pointer-events: none;
}

.tt-loading {
  padding: 30px;
  color: var(--rim-text-muted);
  text-align: center;
}

.el-raw {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  background: #1a1a1a;
  color: #e0e0e0;
  padding: 14px 16px;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  line-height: 1.5;
  margin: 0;
}

/* ── TipTap variant defaults ──
   Lightweight block-level variants applied as classes on p/blockquote/
   heading. These match Webflow's "apply class" model — same underlying
   tag, different visual treatment. Prototype styles; real project styles
   will refine and merge with existing .rim-el-* families. */

.rim-content [data-variant="aside"] {
  background: #f3ede3;
  border-left: 3px solid var(--rim-blue, #135274);
  padding: 18px 22px;
  border-radius: 4px;
  margin: 1.2em 0;
}

.rim-content [data-variant="practice"] {
  background: #eaf2f6;
  border-left: 3px solid var(--rim-blue, #135274);
  padding: 18px 22px;
  border-radius: 4px;
  margin: 1.2em 0;
  font-style: italic;
}

.rim-content [data-variant="body-quote"] {
  border-left: 2px solid var(--rim-blue, #135274);
  padding: 6px 0 6px 22px;
  margin: 1.4em 0;
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--rim-text);
  background: transparent;
}

.rim-content [data-variant="body-quote"] p { margin: 0.4em 0; }

.rim-content [data-variant="verse"] {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.7;
  color: var(--rim-text);
  margin: 1.6em auto;
  max-width: 520px;
  padding: 12px 0;
}

.rim-content [data-variant="pull"] {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.3;
  color: var(--rim-blue, #135274);
  text-align: center;
  margin: 1.6em auto;
  max-width: 640px;
  padding: 18px 0;
  border-top: 1px solid var(--rim-rule, #d5d5d5);
  border-bottom: 1px solid var(--rim-rule, #d5d5d5);
}