/* ==========================================================================
   Journey Tracker Style Guide — Patterns
   App chrome (top bar / sidebar), JT-specific patterns: challenge card,
   badge plan, SMART goal, donut, peer review, leaderboard, etc.
   ========================================================================== */

/* ---------------------------------------------------------------
   APP CHROME — sticky top bar + sidebar
   --------------------------------------------------------------- */
.appshell {
  background: var(--bg-app);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 60px 1fr;
}
/* Variant for the JT-style 128px gradient header */
.appshell.hdr-shell {
  grid-template-rows: 128px 1fr;
}
.appshell.hdr-shell .hdr-nav {
  grid-column: 1 / -1;
}
.appshell.hdr-shell .sidenav {
  border-top: 0;
}
/* Tighter hdr-nav inside the appshell so it doesn't dwarf the demo */
.appshell.hdr-shell .hdr-nav .hdr-row { padding: 0 18px; gap: 12px; }
.appshell.hdr-shell .hdr-nav .hdr-center { gap: 14px; }
.appshell.hdr-shell .hdr-nav .hdr-center .nav-link { font-size: 10.5px; }

/* Sidebar demo: tighter spacing so nav fits at demo widths */
.demo .hdr-nav .hdr-row { padding: 0 16px; gap: 10px; }
.demo .hdr-nav .hdr-center { gap: 10px; }
.demo .hdr-nav .hdr-center .nav-link { font-size: 10px; }
.demo .hdr-nav .hdr-center .nav-link .nav-ic { width: 36px; height: 36px; }
.demo .hdr-nav .hdr-left { gap: 12px; }
.demo .hdr-nav .hdr-right { gap: 12px; }
.demo .hdr-nav .float-icon .ic-label { font-size: 10px; }

/* Sticky modern app bar — calm white surface, content scrolls under it.
   The status-color-as-whole-bar pattern is gone. Status now lives in pills
   and on challenge strips — chrome stays neutral. */
.topbar {
  grid-column: 1 / -1;
  height: 60px;
  background: var(--bg-surface);
  color: var(--fg-1);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 18px;
  gap: 18px;
  border-bottom: 1px solid var(--border-1);
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.topbar .brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.topbar .brand-mark {
  width: 28px; height: 28px;
  background: var(--accent);
  color: var(--fg-on-accent);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-xs);
}
.topbar .crumbs {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--fg-3);
}
.topbar .crumbs a, .topbar .crumbs span { color: var(--fg-3); }
.topbar .crumbs .current { color: var(--fg-1); font-weight: 600; }
.topbar .crumbs .sep { opacity: 0.5; }
.topbar .actions {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto;
}
/* Header icon button (bell, settings, etc.) — circular */
.topbar .icon-btn {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 9999px;
  border: 0;
  background: transparent;
  color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.topbar .icon-btn:hover { background: var(--bg-subtle); color: var(--fg-1); }
.topbar .icon-btn [data-lucide] { width: 18px; height: 18px; stroke-width: 2; }
.topbar .icon-btn .indicator {
  position: absolute; top: 7px; right: 8px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: var(--st-overdue);
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-surface);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.topbar .me {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-1);
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.topbar .me:hover { border-color: var(--border-2); background: var(--bg-subtle); }
.topbar .me .nm { font-size: 12.5px; font-weight: 600; color: var(--fg-1); }
.topbar .me .role { font-size: 11px; color: var(--fg-3); margin-left: 2px; }

/* Sidebar — slimmer, grouped, role-aware */
.sidenav {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-1);
  padding: 14px 10px;
  overflow-y: auto;
}
.sidenav .group {
  font-size: 10px; font-weight: 600; color: var(--fg-3);
  letter-spacing: 0.6px; text-transform: uppercase;
  padding: 14px 8px 4px;
}
.sidenav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.sidenav a:hover { background: var(--bg-subtle); color: var(--fg-1); }
.sidenav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidenav a [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 2; }
.sidenav a .num {
  margin-left: auto;
  font-size: 10.5px;
  background: var(--bg-offset);
  color: var(--fg-3);
  padding: 1px 6px;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.sidenav a.active .num { background: var(--accent); color: var(--fg-on-accent); }
.sidenav a .alert-num {
  margin-left: auto;
  font-size: 10.5px;
  background: var(--st-overdue);
  color: #fff;
  padding: 1px 6px;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.appshell .canvas {
  padding: 18px;
  background: var(--bg-app);
  overflow-y: auto;
}

/* ---------------------------------------------------------------
   CHALLENGE CARD
   Mirrors the Rails partial _challenge_card.html.erb. Status drives the
   left strip and the matching pill on the right. Points are prominent.
   Status classes the partial emits: pending(=is-info), in-review,
   completed(=is-success), late, overdue, draft, opted-out, archived,
   not-on-badge-plan, optional, launch-card, next-up-self-scheduled.
   --------------------------------------------------------------- */
.challenge {
  display: grid;
  grid-template-columns: 4px 1fr auto auto;
  gap: 16px;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 14px 16px 14px 14px;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  position: relative;
}
.challenge:hover {
  background: var(--bg-surface);
  border-color: var(--border-2);
  box-shadow: var(--shadow-sm);
}
.challenge .strip {
  width: 4px;
  align-self: stretch;
  border-radius: 4px;
  background: var(--st-info);
}
.challenge.is-info       .strip { background: var(--st-info); }
.challenge.is-success    .strip { background: var(--st-success); }
.challenge.is-review     .strip { background: var(--st-review); }
.challenge.is-late       .strip { background: var(--st-late); }
.challenge.is-overdue    .strip { background: var(--st-overdue); }
.challenge.is-draft      .strip { background: var(--st-draft); }
.challenge.is-archive    .strip { background: var(--st-archive); }
.challenge.is-opted-out  .strip { background: var(--fg-3); }

/* Optional / not on plan / opted out — softened card body */
.challenge.is-optional        { background: var(--bg-subtle); }
.challenge.is-not-on-plan     { background: var(--bg-subtle); border-style: dashed; }
.challenge.is-opted-out .body .title { color: var(--fg-3); text-decoration: line-through; }

.challenge .body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.challenge .title {
  font-size: 14.5px; font-weight: 600;
  color: var(--fg-1); margin: 0;
  line-height: 1.3;
}
.challenge .meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--fg-3);
  flex-wrap: wrap;
}
.challenge .meta .dot { width: 3px; height: 3px; border-radius: 9999px; background: var(--border-3); }
.challenge .meta a, .challenge .meta .meta-link {
  color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 500;
}
.challenge .meta [data-lucide] { width: 12px; height: 12px; stroke-width: 2; opacity: 0.85; }

/* Card pills row — mirrors the .card-pills wrapper in the partial */
.challenge .card-pills {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}

/* Points — real format from the partial: "X/Ypts". Tabular, prominent. */
.challenge .points {
  display: inline-flex; align-items: baseline; gap: 1px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-offset);
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.challenge .points .got { color: var(--fg-1); }
.challenge .points .sep { color: var(--fg-3); margin: 0 1px; }
.challenge .points .of  { color: var(--fg-3); }
.challenge .points .unit{ color: var(--fg-3); margin-left: 2px; font-weight: 600; }
.challenge.is-success .points {
  background: var(--st-success-soft);
  color: var(--st-success);
}
.challenge.is-success .points .got,
.challenge.is-success .points .sep,
.challenge.is-success .points .of,
.challenge.is-success .points .unit { color: var(--st-success); }

.challenge .right { display: flex; align-items: center; gap: 10px; }

/* Due-date timestamp at top of card (small, mono, like the partial) */
.challenge .due {
  position: absolute;
  top: 8px; right: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fg-3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Launch / Close treatment — emphasized blue card */
.challenge.is-launch {
  background: linear-gradient(135deg, var(--st-info-soft), transparent 60%);
  border-color: var(--st-info-ring);
}
.challenge.is-launch .strip { background: var(--st-info); }

/* Compact variant for column / week layouts */
.challenge.compact {
  grid-template-columns: 4px 1fr auto;
  padding: 10px 12px;
  gap: 10px;
}
.challenge.compact .title { font-size: 13px; }
.challenge.compact .points { padding: 2px 8px; font-size: 11.5px; }

/* ---------------------------------------------------------------
   BADGE CARD & PLAN
   --------------------------------------------------------------- */
.badge-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: 18px;
  transition: all 0.15s ease;
  cursor: pointer;
}
.badge-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.badge-card .icon {
  width: 56px; height: 56px;
  border-radius: 9999px;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.badge-card .icon [data-lucide] { width: 26px; height: 26px; stroke-width: 1.6; }
.badge-card .icon--moss     { background: rgba(79,122,79,0.16);   color: #3e6240; }
.badge-card .icon--terra    { background: rgba(180,106,61,0.16);  color: #94522d; }
.badge-card .icon--ocean    { background: rgba(58,122,156,0.16);  color: #2c6184; }
.badge-card .icon--amber    { background: rgba(213,147,17,0.16);  color: #8c6111; }
.badge-card .body { min-width: 0; }
.badge-card .ttl { font-size: 15px; font-weight: 600; color: var(--fg-1); margin: 0 0 2px; }
.badge-card .cat { font-size: 11.5px; color: var(--fg-3); letter-spacing: 0.2px; }
.badge-card .desc { font-size: 12.5px; color: var(--fg-2); line-height: 1.5; margin: 8px 0 12px; }

/* Badge plan (multi-task) */
.plan-task {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-1);
  font-size: 13px;
}
.plan-task:last-child { border-bottom: 0; }
.plan-task .num {
  width: 22px; height: 22px;
  border-radius: 9999px;
  border: 1.5px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--fg-3);
  background: var(--bg-surface);
}
.plan-task.is-done .num {
  background: var(--st-success); color: #fff; border-color: var(--st-success);
}
.plan-task.is-now .num {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent);
}
.plan-task .lbl { color: var(--fg-1); font-weight: 500; }
.plan-task.is-done .lbl { color: var(--fg-3); text-decoration: line-through; }

/* Badge plan — milestone progress strip */
.steps {
  display: flex; gap: 6px;
  align-items: center;
}
.steps .step {
  flex: 1;
  height: 6px;
  border-radius: 9999px;
  background: var(--bg-offset);
  position: relative;
}
.steps .step.done { background: var(--st-success); }
.steps .step.now {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.steps .step.now::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 50%, var(--bg-offset) 50%, var(--bg-offset) 100%);
}

/* ---------------------------------------------------------------
   SMART GOAL
   Pulled from the Rails model: SMART goals are TEXT GOALS with structured
   fields (S/M/A/R/T) and optional metrics — not a checkbox list.
   Status comes from the meta line (in-progress / met / missed / overdue).
   --------------------------------------------------------------- */
.smart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-left: 4px solid var(--st-info);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.smart-card + .smart-card { margin-top: 10px; }
.smart-card.is-met       { border-left-color: var(--st-success); }
.smart-card.is-missed    { border-left-color: var(--st-overdue); }
.smart-card.is-progress  { border-left-color: var(--st-info); }
.smart-card.is-overdue   { border-left-color: var(--st-overdue); }
.smart-card .head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.smart-card .ttl {
  font-size: 14.5px; font-weight: 600; color: var(--fg-1);
  line-height: 1.4; margin: 0;
}
.smart-card .why {
  font-size: 13px; color: var(--fg-2); line-height: 1.5;
  margin: 0;
}
.smart-card .smart-fields {
  display: grid; gap: 6px 12px;
  grid-template-columns: 88px 1fr;
  font-size: 12.5px;
  margin-top: 2px;
}
.smart-card .smart-fields dt {
  color: var(--fg-3);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 10.5px;
  padding-top: 2px;
}
.smart-card .smart-fields dd { margin: 0; color: var(--fg-1); line-height: 1.4; }
.smart-card .progress-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  align-items: center;
}
.smart-card .progress-row .progress { flex: 1; }
.smart-card .meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--fg-3);
  margin-top: 2px;
}
.smart-card .meta .dot { width: 3px; height: 3px; border-radius: 9999px; background: var(--border-3); }
.smart-card .meta [data-lucide] { width: 12px; height: 12px; }

/* ---------------------------------------------------------------
   HERO BUCKS
   --------------------------------------------------------------- */
.bucks {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px;
  background: linear-gradient(135deg, rgba(213,147,17,0.10), rgba(217,110,63,0.06));
  border: 1px solid var(--st-late-ring);
  border-radius: 9999px;
  color: var(--st-late);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.bucks .coin {
  width: 22px; height: 22px;
  border-radius: 9999px;
  background: var(--st-late);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}

/* ---------------------------------------------------------------
   DONUT — Comfort / Challenge / Panic zones
   The signature JT visualization. Real shape from the codebase:
   THREE CONCENTRIC RINGS, not a single ring with three colored slices.
   Each "challenge" appears as a dot placed INSIDE the appropriate ring,
   with a position the learner can drag (zone + left% + top%).

       outer ring   = comfort  (green)   "too easy"
       middle ring  = challenge (amber)  "growth lives here"
       innermost    = panic    (red)     "freeze / quit"

   The .donut-points layer holds absolutely-positioned .donut-point dots
   over the SVG. Coordinates use percentages (left/top), 0,0 = top-left.
   --------------------------------------------------------------- */
.donut-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
}
.donut-card.donut-card--lg { grid-template-columns: 320px 1fr; gap: 32px; padding: 28px; }

/* The donut itself — relative wrapper so points absolutely place inside */
.donut-rings {
  position: relative;
  width: 240px;
  height: 240px;
  flex-shrink: 0;
}
.donut-card--lg .donut-rings { width: 320px; height: 320px; }
.donut-rings svg {
  width: 100%; height: 100%;
  display: block;
}
.donut-rings .ring {
  fill: none;
  stroke-width: 0; /* base. We use filled circles instead, layered. */
}
/* layered solid circles for the zone bands */
.donut-rings .zone {
  fill: none;
  stroke-width: 0;
}
.donut-rings .zone-comfort   { fill: var(--donut-comfort); }
.donut-rings .zone-challenge { fill: var(--donut-challenge); }
.donut-rings .zone-panic     { fill: var(--donut-panic); }
.donut-rings .zone-divider   { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.5; fill: none; }
.donut-rings .center-label {
  font-family: var(--font-display);
  font-weight: 700;
  fill: var(--fg-1);
  font-size: 13px;
  text-anchor: middle;
}

/* Points — absolutely positioned dots over the donut.
   Each dot uses --x and --y custom properties (percentages) for placement. */
.donut-points {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.donut-point {
  position: absolute;
  left: var(--x, 50%);
  top:  var(--y, 50%);
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  border-radius: 9999px;
  background: var(--bg-surface);
  border: 2px solid var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--fg-1);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18), 0 0 0 2px rgba(255,255,255,0.6);
  pointer-events: auto;
  cursor: grab;
  font-variant-numeric: tabular-nums;
}
.donut-point.is-comfort   { border-color: var(--donut-comfort); }
.donut-point.is-challenge { border-color: var(--donut-challenge); }
.donut-point.is-panic     { border-color: var(--donut-panic); }

/* Legend (right side) */
.donut-legend {
  display: flex; flex-direction: column; gap: 12px;
}
.donut-legend .row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.donut-legend .row .dot {
  width: 14px; height: 14px;
  border-radius: 9999px;
}
.donut-legend .row .name {
  color: var(--fg-1);
  font-weight: 600;
}
.donut-legend .row .desc {
  color: var(--fg-3);
  font-size: 11.5px;
  font-weight: 400;
  margin-top: 1px;
  display: block;
}
.donut-legend .row .num {
  color: var(--fg-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--bg-offset);
  padding: 2px 9px;
  border-radius: 9999px;
  font-size: 12px;
}

/* ---------------------------------------------------------------
   PEER REVIEW REQUEST
   --------------------------------------------------------------- */
.peer-req {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}
.peer-req + .peer-req { margin-top: 8px; }
.peer-req .ttl { font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.peer-req .sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }

/* ---------------------------------------------------------------
   360 SURVEY QUESTION
   --------------------------------------------------------------- */
.survey-q {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: 22px;
}
.survey-q .qnum {
  font-size: 11px; font-weight: 600; color: var(--fg-3);
  letter-spacing: 0.6px; text-transform: uppercase;
  margin-bottom: 6px;
}
.survey-q .qtxt {
  font-size: 17px;
  font-weight: 500;
  color: var(--fg-1);
  line-height: 1.4;
  margin-bottom: 16px;
}
.survey-q .scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.survey-q .scale button {
  appearance: none; border: 1px solid var(--border-2);
  background: var(--bg-surface);
  height: 44px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-2);
  transition: all 0.12s ease;
}
.survey-q .scale button:hover { border-color: var(--accent); color: var(--accent); }
.survey-q .scale button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fg-on-accent);
  box-shadow: var(--shadow-xs);
}
.survey-q .scale-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--fg-3);
}

/* ---------------------------------------------------------------
   COUNCIL VOTING
   --------------------------------------------------------------- */
.council-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.council-item + .council-item { margin-top: 8px; }
.council-item .ttl { font-size: 14px; font-weight: 600; color: var(--fg-1); }
.council-item .sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.vote-bar {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  gap: 8px;
  align-items: center;
  width: 220px;
}
.vote-bar .yes { color: var(--st-success); font-weight: 700; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.vote-bar .no  { color: var(--st-overdue); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.vote-bar .track {
  height: 6px; background: var(--bg-offset); border-radius: 9999px;
  position: relative; overflow: hidden;
}
.vote-bar .track .yes-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: var(--st-success);
  border-radius: 9999px;
}

/* ---------------------------------------------------------------
   LEADERBOARD
   --------------------------------------------------------------- */
.leaderboard {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: 8px 0;
}
.lb-row {
  display: grid;
  grid-template-columns: 32px auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 18px;
}
.lb-row + .lb-row { border-top: 1px solid var(--border-1); }
.lb-row .rank {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  width: 26px;
  text-align: center;
}
.lb-row.is-top .rank { color: var(--st-late); }
.lb-row.is-top:nth-child(1) .rank { font-size: 16px; }
.lb-row .nm { font-size: 13.5px; font-weight: 500; color: var(--fg-1); }
.lb-row .stu { font-size: 11.5px; color: var(--fg-3); }
.lb-row .pts {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
}
.lb-row .delta {
  font-size: 11px; color: var(--fg-3);
  display: inline-flex; align-items: center; gap: 2px;
}
.lb-row .delta.up   { color: var(--st-success); }
.lb-row .delta.down { color: var(--st-overdue); }

/* ---------------------------------------------------------------
   LAUNCH CARD (AM/PM session)
   Two surfaces: (1) dense listing row inside a badge / tracker page,
   (2) richer card in the Launch Library.
   The Rails model has a Launch challenge type — these mirror that.
   --------------------------------------------------------------- */
.launch {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.launch + .launch { margin-top: 6px; }
.launch .when {
  text-align: center;
  padding: 6px 4px;
  border-radius: var(--radius-md);
  background: var(--st-info-soft);
  color: var(--st-info);
}
.launch .when .d {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.8;
}
.launch .when .h {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--st-info);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.launch.is-am .when { background: var(--st-info-soft); color: var(--st-info); }
.launch.is-am .when .h { color: var(--st-info); }
.launch.is-pm .when { background: var(--st-review-soft); color: var(--st-review); }
.launch.is-pm .when .h { color: var(--st-review); }
.launch .ttl { font-size: 13.5px; font-weight: 600; color: var(--fg-1); margin: 0 0 2px; }
.launch .meta { font-size: 12px; color: var(--fg-3); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.launch .meta [data-lucide] { width: 12px; height: 12px; }
.launch .meta .dot { width: 3px; height: 3px; border-radius: 9999px; background: var(--border-3); }

/* ===============================================================
   LAUNCHES — schedule list (page-level, grouped by day)
   --------------------------------------------------------------- */
.lnch-page {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.lnch-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-surface);
}
.lnch-page-ttl { font-size: 17px; font-weight: 700; margin: 0; color: var(--fg-1); }
.lnch-page-sub { font-size: 12.5px; color: var(--fg-3); margin-top: 3px; }
.lnch-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.lnch-day { border-bottom: 1px solid var(--border-1); }
.lnch-day:last-child { border-bottom: 0; }
.lnch-day-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-1);
}
.lnch-day-num {
  width: 32px; height: 32px;
  border-radius: 9999px;
  background: var(--bg-surface);
  border: 1px solid var(--border-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 13.5px;
  color: var(--fg-2);
  flex-shrink: 0;
}
.lnch-day-num.is-today {
  background: var(--accent);
  color: var(--fg-on-accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.lnch-day-name {
  font-size: 13px; font-weight: 700; color: var(--fg-1);
  display: inline-flex; align-items: center; gap: 8px;
}
.lnch-day-tag {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--accent); color: var(--fg-on-accent);
  padding: 2px 7px;
  border-radius: 9999px;
}
.lnch-day-meta { margin-left: auto; font-size: 11.5px; color: var(--fg-3); }

.lnch-row {
  display: grid;
  grid-template-columns: 80px 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-1);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}
.lnch-row:last-child { border-bottom: 0; }
.lnch-row:hover { background: var(--bg-subtle); }
.lnch-row--past { opacity: 0.78; }
.lnch-row--next { background: color-mix(in srgb, var(--st-info, #2196F3) 6%, var(--bg-surface)); }
.lnch-row--next:hover { background: color-mix(in srgb, var(--st-info, #2196F3) 10%, var(--bg-surface)); }

.lnch-time {
  text-align: center;
  display: flex; flex-direction: column; gap: 1px;
}
.lnch-time-h {
  font-family: var(--font-display);
  font-weight: 700; font-size: 16px;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.lnch-time-d {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.lnch-type {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800; font-size: 12px;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}
.lnch-type--am { background: color-mix(in srgb, var(--st-info, #2196F3) 14%, var(--bg-surface)); color: var(--st-info, #2196F3); border: 1px solid color-mix(in srgb, var(--st-info, #2196F3) 28%, transparent); }
.lnch-type--pm { background: color-mix(in srgb, #8E44AD 14%, var(--bg-surface)); color: #8E44AD; border: 1px solid color-mix(in srgb, #8E44AD 28%, transparent); }
.lnch-type--special { background: color-mix(in srgb, var(--accent) 14%, var(--bg-surface)); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }

.lnch-body { min-width: 0; }
.lnch-ttl { font-size: 14px; font-weight: 700; color: var(--fg-1); margin: 0 0 4px; }
.lnch-meta {
  font-size: 11.5px; color: var(--fg-3);
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.lnch-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.lnch-meta [data-lucide] { width: 11px; height: 11px; }
.lnch-meta .dot { width: 2.5px; height: 2.5px; border-radius: 9999px; background: var(--border-3); }

.lnch-badges { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.lnch-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  font-size: 10.5px; font-weight: 600;
  color: var(--fg-2);
  background: var(--bg-subtle);
  border: 1px solid var(--border-1);
  border-radius: 9999px;
}
.lnch-badge .dot { width: 7px; height: 7px; border-radius: 9999px; }

@media (max-width: 720px) {
  .lnch-row {
    grid-template-columns: 60px 36px 1fr;
  }
  .lnch-row > .pill { grid-column: 1 / -1; justify-self: flex-start; }
  .lnch-page-head { padding: 14px; }
  .lnch-day-head, .lnch-row { padding-left: 14px; padding-right: 14px; }
}

/* Library card — bigger, includes prep + leader. */
.launch-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.launch-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.launch-card .top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.launch-card .ttl {
  font-size: 15px; font-weight: 600; color: var(--fg-1);
  margin: 4px 0 0; line-height: 1.3;
}
.launch-card .desc {
  font-size: 12.5px; color: var(--fg-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.launch-card .foot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--fg-3);
  border-top: 1px solid var(--border-1);
  padding-top: 10px;
}
.launch-card .foot .who { display: inline-flex; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------
   APPROVAL QUEUE ROW (guide view)
   --------------------------------------------------------------- */
.queue-row {
  display: grid;
  grid-template-columns: auto 1fr 200px auto auto;
  gap: 14px;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.queue-row + .queue-row { margin-top: 6px; }
.queue-row .ttl { font-size: 13.5px; font-weight: 600; color: var(--fg-1); }
.queue-row .sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.queue-row .actions { display: flex; gap: 6px; }

/* ---------------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------------- */
.empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  padding: 36px 24px;
  text-align: center;
  background: var(--bg-surface);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-lg);
}
.empty .icon {
  width: 48px; height: 48px;
  border-radius: 9999px;
  background: var(--bg-offset);
  color: var(--fg-3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.empty .icon [data-lucide],
.empty .icon [data-feather] { width: 22px; height: 22px; }
.empty h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg-1); }
.empty p { font-size: 13px; color: var(--fg-3); margin: 4px 0 14px; max-width: 36ch; }

/* ---------------------------------------------------------------
   MODAL
   --------------------------------------------------------------- */
.modal-frame {
  position: relative;
  background: var(--bg-app);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
  overflow: hidden;
}
.modal-frame::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(2px);
}
/* Scoped under `.modal-frame` so it only applies to the style-guide
   modal demo and never collides with Bootstrap 4's `.modal { position: fixed }`
   used by every modal in the live app. Both selectors would otherwise share
   specificity (0,1,0); since the design-system bundle loads after
   `application.scss` (which imports Bootstrap), an unscoped rule wins
   source-order and turns Bootstrap modals into in-flow blocks. */
.modal-frame .modal {
  position: relative; z-index: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  width: 100%;
  max-width: 440px;
}
.modal-frame .modal h3 { margin: 0 0 6px; font-size: 17px; }
.modal-frame .modal .body { font-size: 13.5px; color: var(--fg-2); line-height: 1.55; }
.modal-frame .modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* ---------------------------------------------------------------
   TABLE
   --------------------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table thead th {
  text-align: left;
  font-size: 11px; font-weight: 600; color: var(--fg-3);
  letter-spacing: 0.4px; text-transform: uppercase;
  padding: 10px 12px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-1);
}
.table thead th:first-child { border-top-left-radius: var(--radius-md); }
.table thead th:last-child  { border-top-right-radius: var(--radius-md); }
.table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border-1);
  color: var(--fg-1);
  vertical-align: middle;
}
.table tbody tr:hover td { background: var(--bg-subtle); }
.table tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------
   ACTIVITY FEED ITEM
   --------------------------------------------------------------- */
.activity {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-1);
}
.activity:last-child { border-bottom: 0; }
.activity .icon {
  width: 32px; height: 32px;
  border-radius: 9999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.activity .icon [data-lucide] { width: 14px; height: 14px; }
.activity .icon--success { background: var(--st-success-soft); color: var(--st-success); }
.activity .icon--review  { background: var(--st-review-soft);  color: var(--st-review); }
.activity .icon--late    { background: var(--st-late-soft);    color: var(--st-late); }
.activity .ttl { font-size: 13px; color: var(--fg-1); font-weight: 500; }
.activity .sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.activity .when { font-size: 11.5px; color: var(--fg-3); }

/* ---------------------------------------------------------------
   EDITOR TOOLBAR
   --------------------------------------------------------------- */
.editor {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: hidden;
}
.editor-bar {
  display: flex; align-items: center; gap: 2px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-subtle);
}
.editor-bar button {
  appearance: none; border: 0; background: transparent;
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  color: var(--fg-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.12s ease;
}
.editor-bar button:hover { background: var(--bg-surface); color: var(--fg-1); }
.editor-bar button.active { background: var(--accent-soft); color: var(--accent); }
.editor-bar button [data-lucide] { width: 14px; height: 14px; }
.editor-bar .sep { width: 1px; align-self: stretch; background: var(--border-1); margin: 4px 4px; }
.editor-area {
  padding: 14px;
  font-size: 14px;
  color: var(--fg-1);
  line-height: 1.55;
  min-height: 100px;
}

/* ---------------------------------------------------------------
   FILE UPLOAD / DROPZONE
   --------------------------------------------------------------- */
.dropzone {
  border: 1.5px dashed var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  padding: 28px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: all 0.15s ease;
}
.dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone [data-lucide] { width: 22px; height: 22px; color: var(--fg-3); }
.dropzone .ttl { font-size: 13px; font-weight: 600; color: var(--fg-1); margin-top: 4px; }
.dropzone .sub { font-size: 12px; color: var(--fg-3); }

/* ---------------------------------------------------------------
   CALENDAR / WEEK VIEW
   --------------------------------------------------------------- */
.cal {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.cal-head {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-1);
}
.cal-head .day {
  padding: 10px 12px;
  font-size: 11px; font-weight: 600; color: var(--fg-3);
  letter-spacing: 0.4px; text-transform: uppercase;
}
.cal-head .day .num {
  display: block;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; color: var(--fg-1);
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.cal-head .day.today .num { color: var(--accent); }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  min-height: 200px;
}
.cal-grid .col {
  border-right: 1px solid var(--border-1);
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.cal-grid .col:last-child { border-right: 0; }
.cal-event {
  display: block;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--st-info-soft, var(--accent-soft));
  color: var(--st-info, var(--accent));
  border-left: 3px solid var(--st-info, var(--accent));
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}
.cal-event-ttl { display: block; font-weight: 700; }
.cal-event.is-success { background: var(--st-success-soft); color: var(--st-success); border-color: var(--st-success); }
.cal-event.is-late    { background: var(--st-late-soft); color: var(--st-late); border-color: var(--st-late); }
.cal-event.is-review  { background: var(--st-review-soft); color: var(--st-review); border-color: var(--st-review); }
.cal-event.is-launch  { background: var(--st-launch-soft, color-mix(in srgb, #8E44AD 14%, var(--bg-surface))); color: #8E44AD; border-color: #8E44AD; }
.cal-event .when { display: block; opacity: 0.75; font-weight: 500; font-size: 10.5px; margin-top: 1px; }

.cal-head .day .day-pts-mini {
  display: block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--fg-3);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 4px;
}

/* ---------------------------------------------------------------
   WEEK VIEW — RICH variant (41)
   --------------------------------------------------------------- */
.wk-points {
  display: grid;
  grid-template-columns: auto auto auto auto;
  align-items: baseline;
  column-gap: 4px;
  row-gap: 0;
  padding: 8px 14px 10px;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  background: var(--bg-surface);
  position: relative;
  min-width: 200px;
}
.wk-points-num {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 800; line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.wk-points-sep { color: var(--fg-3); font-weight: 500; font-size: 18px; }
.wk-points-goal { color: var(--fg-2); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.wk-points-lbl {
  font-size: 9.5px; font-weight: 700; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.6px;
  line-height: 1.1;
  margin-left: 6px;
  align-self: center;
}
.wk-points-bar {
  grid-column: 1 / -1;
  height: 4px; border-radius: 999px;
  background: var(--bg-offset);
  margin-top: 6px;
  overflow: hidden;
}
.wk-points-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--st-success)));
  border-radius: 999px;
}

.cal--rich .cal-head {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-1);
  grid-template-columns: repeat(5, 1fr);
}
.cal--rich .cal-grid {
  grid-template-columns: repeat(5, 1fr);
  background: var(--bg-app);
}
.cal--rich .cal-head .day {
  padding: 10px 10px 12px;
  border-right: 1px solid var(--border-1);
  display: flex; flex-direction: column; gap: 8px;
}
.cal--rich .cal-head .day:last-child { border-right: 0; }
.cal--rich .cal-head .day .day-row {
  display: flex; align-items: baseline; justify-content: space-between;
}
.cal--rich .cal-head .day .day-name {
  font-size: 11px; font-weight: 700; color: var(--fg-3);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.cal--rich .cal-head .day .num {
  display: inline; margin: 0;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800; line-height: 1;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.cal--rich .cal-head .day.today .num {
  color: #fff;
  background: var(--accent);
  width: 28px; height: 28px;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.day-pts {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 8px;
  background: var(--bg-app);
  border-radius: 8px;
  border: 1px solid var(--border-1);
}
.day-pts.is-today {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-1));
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-surface));
}
.day-pts.is-done {
  border-color: color-mix(in srgb, var(--st-success) 30%, var(--border-1));
  background: color-mix(in srgb, var(--st-success) 6%, var(--bg-surface));
}
.day-pts--empty {
  border-style: dashed;
  color: var(--fg-3);
  text-align: center;
  font-size: 14px;
  padding: 10px 8px;
}
.day-pts-vals {
  display: flex; align-items: baseline; gap: 3px;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.day-pts-vals .earned {
  font-size: 16px; font-weight: 800; color: var(--fg-1);
  line-height: 1;
}
.day-pts.is-done .day-pts-vals .earned { color: var(--st-success); }
.day-pts.is-today:not(.is-done) .day-pts-vals .earned { color: var(--accent); }
.day-pts-vals .goal {
  font-size: 12px; font-weight: 600; color: var(--fg-3);
}
.day-pts-vals .unit {
  font-size: 10px; font-weight: 700; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-left: 2px;
}
.day-pts-check {
  width: 12px; height: 12px;
  color: var(--st-success);
  margin-left: auto;
}
.day-pts-track {
  height: 3px; border-radius: 999px;
  background: var(--border-1);
  overflow: hidden;
}
.day-pts-track > span {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 240ms ease;
}
.day-pts.is-done .day-pts-track > span { background: var(--st-success); }

/* Rich event card layout */
.cal--rich .cal-grid .col {
  padding: 12px 10px;
  gap: 10px;
  border-right: 1px solid var(--border-1);
  background: var(--bg-app);
}
.cal--rich .cal-grid .col:last-child { border-right: 0; }
.cal--rich .cal-event {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 0;
  padding: 0;
  border: 1px solid var(--border-1);
  background: var(--bg-surface);
  border-radius: 10px;
  overflow: hidden;
  font-size: 12px;
  color: var(--fg-1);
  align-items: stretch;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cal--rich .cal-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}
.cal--rich .cal-event .cal-event-cat {
  background: var(--accent);
}
.cal--rich .cal-event .cal-event-body {
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
}
.cal--rich .cal-event .cal-event-ttl {
  font-weight: 700; font-size: 12.5px; color: var(--fg-1);
  line-height: 1.25;
  display: flex; align-items: center; gap: 5px;
}
.cal--rich .cal-event .cal-event-ttl [data-lucide] { width: 12px; height: 12px; flex-shrink: 0; }
.cal--rich .cal-event .cal-event-meta {
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  font-size: 10.5px;
  color: var(--fg-3);
  align-items: center;
}
.cal--rich .cal-event .cal-event-tag {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 9.5px;
  color: var(--fg-2);
  background: var(--bg-offset);
  padding: 1px 6px;
  border-radius: 999px;
}
.cal--rich .cal-event .cal-event-time,
.cal--rich .cal-event .cal-event-status {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 600;
}
.cal--rich .cal-event .cal-event-time [data-lucide],
.cal--rich .cal-event .cal-event-status [data-lucide] { width: 10px; height: 10px; }

.cal--rich .cal-event .cal-event-pts {
  align-self: stretch;
  padding: 6px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  background: var(--bg-app);
  border-left: 1px solid var(--border-1);
  min-width: 44px;
  font-family: var(--font-display);
}
.cal--rich .cal-event .cal-event-pts .n {
  font-size: 14px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.cal--rich .cal-event .cal-event-pts .u {
  font-size: 8.5px; font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--fg-3);
  margin-top: 3px;
}
.cal--rich .cal-event .cal-event-pts--launch [data-lucide] {
  width: 16px; height: 16px;
  color: var(--fg-2);
}

/* Status colorings */
.cal--rich .cal-event.is-success .cal-event-cat { background: var(--st-success); }
.cal--rich .cal-event.is-success .cal-event-pts { background: color-mix(in srgb, var(--st-success) 10%, var(--bg-surface)); }
.cal--rich .cal-event.is-success .cal-event-pts .n { color: var(--st-success); }
.cal--rich .cal-event.is-success .cal-event-status { color: var(--st-success); }

.cal--rich .cal-event.is-review .cal-event-cat { background: var(--st-review, var(--st-info, #2196F3)); }
.cal--rich .cal-event.is-review .cal-event-status { color: var(--st-review, var(--st-info, #2196F3)); }

.cal--rich .cal-event.is-late .cal-event-cat { background: var(--st-warning); }
.cal--rich .cal-event.is-late .cal-event-status { color: var(--st-warning); }

.cal--rich .cal-event.is-launch {
  background: color-mix(in srgb, #8E44AD 5%, var(--bg-surface));
  border-color: color-mix(in srgb, #8E44AD 25%, var(--border-1));
}
.cal--rich .cal-event.is-launch .cal-event-cat { background: #8E44AD; }
.cal--rich .cal-event.is-launch .cal-event-tag { color: #8E44AD; background: color-mix(in srgb, #8E44AD 14%, var(--bg-surface)); }
.cal--rich .cal-event.is-launch .cal-event-pts { background: color-mix(in srgb, #8E44AD 8%, var(--bg-surface)); }

/* ---------------------------------------------------------------
   CHARTS — bar / line / donut (CSS only, illustrative)
   --------------------------------------------------------------- */
.chart-bar {
  display: flex; align-items: flex-end; gap: 8px;
  height: 120px;
  padding: 8px 0;
}
.chart-bar .bar {
  flex: 1;
  background: var(--chart-1);
  border-radius: 4px 4px 0 0;
  min-height: 6px;
  position: relative;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.chart-bar .bar:hover { opacity: 1; }
.chart-bar .bar.muted { background: var(--bg-offset); }
.chart-bar .bar .lbl {
  position: absolute; bottom: -22px; left: 0; right: 0;
  text-align: center; font-size: 10px; color: var(--fg-3);
  font-family: var(--font-mono);
}

/* ---------------------------------------------------------------
   GLOSSARY
   --------------------------------------------------------------- */
.glossary {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 8px 16px;
  padding: 8px 0;
}
.glossary dt {
  font-size: 13px; font-weight: 600; color: var(--fg-1);
  padding-top: 10px;
}
.glossary dd {
  margin: 0;
  font-size: 13px; color: var(--fg-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--border-1);
  line-height: 1.5;
}
.glossary dt + dd { border-top: 1px solid var(--border-1); }


/* ==========================================================================
   ADDED: badge plan, week view, person picker, notifications, date selectors
   ========================================================================== */

/* ---- Badge plan: matrix (Level × Category) ---- */
.bp-matrix {
  --level-count: 4;
  display: grid;
  grid-template-columns: 160px repeat(var(--level-count), minmax(140px, 1fr));
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
}
.bp-matrix .bp-cell {
  padding: 10px 12px;
  border-right: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  min-height: 60px;
  display: flex; align-items: center;
  flex-wrap: wrap; gap: 6px;
}
.bp-matrix .bp-cell:nth-child(n) { } /* spacer */
.bp-matrix .bp-cell.head {
  background: var(--bg-subtle);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg-3);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  min-height: 40px;
}
.bp-matrix .bp-cell.row-head {
  background: var(--bg-subtle);
  font-weight: 600;
  color: var(--fg-1);
  font-size: 13px;
}
/* note: per-row last-cell border removal would need a real var; skipped */

/* Badge assignment chip — small clickable thing inside a matrix cell */
.bp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-1);
  cursor: pointer;
  transition: all 0.12s ease;
}
.bp-chip .ic {
  width: 22px; height: 22px;
  border-radius: 9999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.bp-chip .ic [data-lucide] { width: 12px; height: 12px; stroke-width: 2.4; }
.bp-chip:hover { border-color: var(--border-3); background: var(--bg-subtle); }
.bp-chip.is-earned {
  background: var(--st-success-soft);
  border-color: var(--st-success-ring);
  color: var(--st-success);
}
.bp-chip.is-earned .ic { background: var(--st-success); color: #fff; }
.bp-chip.is-progress { border-color: var(--st-info-ring); color: var(--st-info); }
.bp-chip.is-progress .ic { background: var(--st-info-soft); color: var(--st-info); }
.bp-chip.is-locked   { color: var(--fg-3); border-style: dashed; opacity: 0.7; }
.bp-chip.is-locked .ic { background: var(--bg-offset); color: var(--fg-3); }

/* Category card (cards view of badge plan) */
.cat-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  gap: 10px;
}
.cat-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.cat-card .cat-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.cat-card .cat-icon [data-lucide] { width: 22px; height: 22px; stroke-width: 1.8; }
.cat-card .cat-name { font-size: 14px; font-weight: 700; color: var(--fg-1); }
.cat-card .cat-pct {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.cat-card .progress { width: 100%; }

/* Modern progress (replicates the "modern-progress" used in matrix) */
.modern-progress {
  height: 6px;
  width: 100%;
  background: var(--bg-offset);
  border-radius: 9999px;
  overflow: hidden;
}
.modern-progress .modern-progress__bar {
  height: 100%;
  background: var(--st-success);
  border-radius: 9999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cat-pill — small pill used in matrix row headers */
.cat-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  background: var(--bg-offset);
  color: var(--fg-1);
  font-size: 12px; font-weight: 600;
  border-radius: 9999px;
  letter-spacing: 0.1px;
}

/* ---- Week view (5-day learner tracker) ---- */
.weekview {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: 18px;
}
.weekview-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.weekview-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.weekview-day {
  background: var(--bg-subtle);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 10px 10px 12px;
  display: flex; flex-direction: column;
  gap: 8px;
  min-height: 280px;
}
.weekview-day.is-today {
  background: var(--bg-surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-tint);
}
.weekview-day .day-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--border-1);
  padding-bottom: 6px;
}
.weekview-day .day-head .d {
  font-size: 11px; font-weight: 700; color: var(--fg-3);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.weekview-day.is-today .day-head .d { color: var(--accent); }
.weekview-day .day-head .n {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--fg-1);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.weekview-day.is-today .day-head .n { color: var(--accent); }
.weekview-day .day-pts {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.weekview-day .challenge.compact { background: var(--bg-surface); }

/* ---- Person picker (learner switcher) ---- */
.person-picker {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px 3px 3px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: 9999px;
  cursor: pointer;
  transition: border-color 0.12s ease;
}
.person-picker:hover { border-color: var(--border-2); }
.person-picker .nav-arrow {
  width: 26px; height: 26px;
  border-radius: 9999px;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.person-picker .nav-arrow:hover { background: var(--bg-subtle); color: var(--fg-1); }
.person-picker .nav-arrow [data-lucide] { width: 14px; height: 14px; }
.person-picker .person {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 4px;
}
.person-picker .person .nm { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.person-picker .lock {
  width: 22px; height: 22px;
  border-radius: 9999px;
  border: 1px solid var(--border-1);
  background: var(--bg-surface);
  color: var(--fg-3);
  display: inline-flex; align-items: center; justify-content: center;
}
.person-picker .lock [data-lucide] { width: 11px; height: 11px; }
.person-picker .lock.is-locked { color: var(--st-overdue); }

/* ---- Guide-view toggle (segmented, two-state) ---- */
.guide-toggle {
  display: inline-flex; padding: 3px;
  background: var(--bg-offset);
  border-radius: 9999px;
  gap: 2px;
}
.guide-toggle button {
  appearance: none; border: 0; background: transparent;
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--fg-2);
  padding: 6px 14px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.guide-toggle button [data-lucide] { width: 14px; height: 14px; }
.guide-toggle button:hover { color: var(--fg-1); }
.guide-toggle button.active {
  background: var(--bg-surface);
  color: var(--fg-1);
  box-shadow: var(--shadow-xs);
}
.guide-toggle button.active.is-guide { color: var(--accent); }

/* ---- Date / range selector ---- */
.date-selector {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: 9999px;
  padding: 3px;
}
.date-selector .step {
  width: 28px; height: 28px;
  border: 0; background: transparent;
  border-radius: 9999px;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.date-selector .step:hover { background: var(--bg-subtle); color: var(--fg-1); }
.date-selector .step [data-lucide] { width: 14px; height: 14px; }
.date-selector .label {
  padding: 0 12px;
  font-size: 12.5px; font-weight: 600;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.date-selector .label .sub {
  display: block;
  font-size: 10.5px; font-weight: 500;
  color: var(--fg-3);
  margin-top: 1px;
}
.date-selector .today-btn {
  margin-right: 2px;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 0;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px; font-weight: 700;
  cursor: pointer;
}

/* ---- Notifications: bell with dot, panel, banner ---- */
.notif-panel {
  width: 380px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.notif-panel .head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-1);
}
.notif-panel .head h4 { margin: 0; font-size: 14px; }
.notif-panel .head .mark {
  font-size: 11.5px; font-weight: 600;
  color: var(--accent); background: transparent; border: 0; cursor: pointer;
}
.notif-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-1);
  cursor: pointer;
  transition: background 0.12s ease;
  align-items: flex-start;
}
.notif-row:hover { background: var(--bg-subtle); }
.notif-row:last-child { border-bottom: 0; }
.notif-row.is-unread { background: var(--accent-soft); }
.notif-row.is-unread:hover { background: var(--accent-soft); filter: brightness(0.97); }
.notif-row .ic {
  width: 32px; height: 32px;
  border-radius: 9999px;
  background: var(--bg-offset);
  color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.notif-row .ic [data-lucide] { width: 14px; height: 14px; }
.notif-row.is-success .ic { background: var(--st-success-soft); color: var(--st-success); }
.notif-row.is-review .ic  { background: var(--st-review-soft);  color: var(--st-review); }
.notif-row.is-late .ic    { background: var(--st-late-soft);    color: var(--st-late); }
.notif-row.is-overdue .ic { background: var(--st-overdue-soft); color: var(--st-overdue); }
.notif-row .ttl { font-size: 13px; font-weight: 500; color: var(--fg-1); line-height: 1.4; }
.notif-row .ttl strong { font-weight: 700; }
.notif-row .when { font-size: 11px; color: var(--fg-3); white-space: nowrap; padding-top: 1px; }

/* In-app banner — shown at top of canvas for big system messages */
.notif-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--st-info-soft);
  border: 1px solid var(--st-info-ring);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--st-info);
}
.notif-banner.is-success { background: var(--st-success-soft); border-color: var(--st-success-ring); color: var(--st-success); }
.notif-banner.is-late    { background: var(--st-late-soft);    border-color: var(--st-late-ring);    color: var(--st-late); }
.notif-banner.is-overdue { background: var(--st-overdue-soft); border-color: var(--st-overdue-ring); color: var(--st-overdue); }
.notif-banner [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; }
.notif-banner .grow { flex: 1; color: var(--fg-1); }
.notif-banner .grow strong { color: inherit; }
.notif-banner .dismiss {
  background: transparent; border: 0; color: inherit;
  cursor: pointer; opacity: 0.6;
  display: inline-flex; align-items: center;
}
.notif-banner .dismiss:hover { opacity: 1; }


/* ==========================================================================
   BULLETIN BOARD
   ========================================================================== */

.bb-shell {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  padding: 18px;
}

.bb-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.bb-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }

.bb-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-1);
  border-radius: 9999px;
  padding: 6px 10px 6px 14px;
  margin-bottom: 14px;
  transition: border-color 0.12s ease;
}
.bb-search:focus-within { border-color: var(--accent); box-shadow: var(--ring-focus); background: var(--bg-surface); }
.bb-search [data-lucide].search-ic { width: 14px; height: 14px; color: var(--fg-3); flex-shrink: 0; }
.bb-search input {
  flex: 1; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 13.5px; color: var(--fg-1);
  padding: 4px 0;
}
.bb-search input::placeholder { color: var(--fg-3); }
.bb-search .clear-x, .bb-search .tips-q {
  background: transparent; border: 0; cursor: pointer;
  width: 24px; height: 24px; border-radius: 9999px;
  color: var(--fg-3); display: inline-flex; align-items: center; justify-content: center;
}
.bb-search .clear-x:hover, .bb-search .tips-q:hover { background: var(--bg-offset); color: var(--fg-1); }
.bb-search .clear-x [data-lucide], .bb-search .tips-q [data-lucide] { width: 13px; height: 13px; }

/* Search tips popover (just the styled card; not interactive) */
.bb-tips {
  margin-top: -8px; margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: 12.5px;
}
.bb-tips h5 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-3); }
.bb-tips dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
.bb-tips dt { font-family: var(--font-mono); color: var(--accent); font-size: 12px; }
.bb-tips dd { margin: 0; color: var(--fg-2); }

/* School/studio selector v2 — small inner circles, codebase style */
.bb-selector-v2 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 18px;
  padding: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}
.ss-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: transparent;
  border: 0;
  border-radius: 9999px;
  font: inherit;
  cursor: pointer;
  transition: background 0.12s ease;
}
.ss-pill:hover { background: var(--bg-subtle); }
.ss-pill.is-active { background: var(--bg-offset); }
.ss-mark {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 9999px;
  flex-shrink: 0;
}
.ss-mark-inner {
  width: 18px; height: 18px;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.2px;
}
.ss-name {
  font-size: 13px; font-weight: 600; color: var(--fg-1);
  display: inline-flex; align-items: baseline; gap: 6px;
}
.ss-sub { font-size: 11.5px; font-weight: 500; color: var(--fg-3); }
.ss-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  background: var(--accent); color: #fff;
  border-radius: 9999px;
  font-size: 10px; font-weight: 700;
  margin-left: 2px;
}
.ss-divider {
  width: 1px; height: 18px; background: var(--border-1);
  margin: 0 4px;
}
.ss-pill--more {
  padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: var(--fg-3);
}

/* School/studio selector — expanded panel */
.bb-selector-expanded {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}
.bb-se-group {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.bb-se-school {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-offset);
  border-bottom: 1px solid var(--border-1);
}
.bb-se-mark {
  width: 32px; height: 32px;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.3px;
  flex-shrink: 0;
}
.bb-se-school-meta { flex: 1; min-width: 0; }
.bb-se-school-nm { font-size: 14px; font-weight: 700; color: var(--fg-1); }
.bb-se-school-sub { font-size: 11.5px; color: var(--fg-3); }
.bb-se-all {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11.5px; font-weight: 700;
  background: transparent;
  color: var(--fg-3);
  border: 1px solid var(--border-1);
  cursor: pointer;
  transition: all 0.12s ease;
}
.bb-se-all:hover { border-color: var(--border-2); color: var(--fg-2); }
.bb-se-all.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.bb-se-studios {
  display: flex; flex-direction: column; gap: 0;
  padding: 4px 0;
}
.bb-se-studio {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: transparent;
  border: 0; border-left: 3px solid transparent;
  font-size: 13px; font-weight: 600; color: var(--fg-2);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  text-align: left;
}
.bb-se-studio:hover { background: var(--bg-subtle); color: var(--fg-1); }
.bb-se-studio.is-active { color: var(--fg-1); border-left-color: var(--accent); background: var(--accent-soft); }
.bb-se-dot {
  width: 10px; height: 10px; border-radius: 9999px;
  flex-shrink: 0;
}
.bb-se-cnt {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--bg-offset);
  color: var(--fg-3);
  font-size: 10.5px; font-weight: 700;
}
.bb-se-studio.is-active .bb-se-cnt { background: var(--accent); color: #fff; }
.bb-se-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px;
  background: transparent;
  border: 1.5px dashed var(--border-2);
  border-radius: var(--radius-md);
  color: var(--fg-3);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}
.bb-se-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.bb-se-add [data-lucide] { width: 14px; height: 14px; }

/* School & studio segmented selector — from journey-tracker repo
   (post_boards/show.html+modern.erb · used for school_admin/guide/student) */
.segmented-selector-container {
  margin: 4px 0 8px;
}
.segmented-selector-row {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Collapsed school bubble */
.school-bubble {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px;
  padding: 0 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: 9999px;
  font-size: 13px; font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  transition: all 0.15s ease;
  outline: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.school-bubble:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-2));
  color: var(--fg-1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.school-bubble.has {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}
.school-bubble-name { line-height: 1; }
.school-bubble-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  background: var(--accent);
  color: #fff;
  border-radius: 9999px;
  font-size: 11px; font-weight: 700;
  line-height: 1;
}
.school-bubble:not(.has) .school-bubble-count {
  background: var(--bg-offset);
  color: var(--fg-3);
}

/* Expanded segmented pill */
.segmented-pill {
  display: inline-flex; align-items: stretch;
  background: var(--bg-surface);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border-1));
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.segmented-pill-school-name {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px 0 14px;
  background: var(--accent);
  color: #fff;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.segmented-pill-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.22);
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.segmented-pill-close::before {
  content: "×";
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  color: #fff;
}
.segmented-pill-close:hover { background: rgba(255,255,255,0.35); }
.segmented-pill-studio {
  display: inline-flex; align-items: center;
  height: 36px;
  padding: 0 14px;
  font-size: 13px; font-weight: 600;
  color: var(--fg-2);
  background: transparent;
  border-left: 1px solid var(--border-1);
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}
.segmented-pill-studio:hover { background: var(--bg-subtle); color: var(--fg-1); }
.segmented-pill-studio.sel {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

/* Studio filter dropdown (super-admin variant) */
.studio-filter-dropdown .modern-button-border {
  display: inline-flex; align-items: center; gap: 6px;
}
.studio-filter-dropdown .modern-button-border [data-selected-count] {
  font-size: 11px;
  color: var(--fg-3);
  background: var(--bg-offset);
  padding: 2px 7px;
  border-radius: 9999px;
  margin-left: 2px;
  font-weight: 600;
}
.studio-filter-menu {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 25px rgba(0,0,0,0.12), 0 4px 6px rgba(0,0,0,0.06);
  padding: 0;
  overflow: hidden;
}
.studio-filter-menu .dropdown-search {
  padding: 12px 14px;
  background: var(--bg-subtle);
}
.studio-filter-menu .dropdown-search .form-control {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-2);
  border-radius: 9999px;
  font-size: 13px;
  background: var(--bg-surface);
  outline: none;
}
.studio-filter-menu .dropdown-search .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.studio-filter-menu .dropdown-content {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 0;
}
.studio-filter-menu .select-all-option { padding: 0; margin-bottom: 4px; }
.studio-filter-menu .select-all-label,
.studio-filter-menu .filter-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg-1);
  transition: background 0.1s ease;
}
.studio-filter-menu .select-all-label { font-weight: 600; background: var(--bg-subtle); }
.studio-filter-menu .select-all-label:hover,
.studio-filter-menu .filter-option:hover { background: var(--bg-offset); }
.studio-filter-menu .select-all-label input[type="checkbox"],
.studio-filter-menu .filter-option input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}
.studio-filter-menu .filter-option input[disabled] { opacity: 0.5; cursor: not-allowed; }
.studio-filter-menu .filter-option span { flex: 1; }
.studio-filter-menu .filter-option small {
  font-size: 11px;
  color: var(--fg-3);
}
.studio-filter-menu .filter-group-header {
  padding: 10px 16px 6px;
  font-size: 11px; font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg-subtle);
}

/* Post cards grid */
/* Post cards grid (legacy) */
.bb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* Post listing — rows */
.bb-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
}
.bb-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-1);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.12s ease;
}
.bb-row:last-child { border-bottom: 0; }
.bb-row:hover { background: var(--bg-subtle); }
.bb-row-thumb {
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  flex-shrink: 0;
}
.bb-row-thumb [data-lucide] { width: 22px; height: 22px; }
.bb-row-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bb-row-ttl {
  margin: 0;
  font-size: 15px; font-weight: 700; line-height: 1.3;
  color: var(--fg-1);
}
.bb-row-ttl mark, .bb-match-body mark {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: inherit;
  padding: 0 2px; border-radius: 3px;
}
.bb-row-meta-line {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; color: var(--fg-3);
}
.bb-row-meta-line .av--xs {
  width: 18px; height: 18px; border-radius: 9999px;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  margin-right: 2px;
}
.bb-row-meta-line .bb-row-nm { font-size: 12px; font-weight: 700; color: var(--fg-2); }
.bb-row-meta-line .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--fg-3); opacity: 0.5;
}
.bb-cnt { display: inline-flex; align-items: center; gap: 4px; }
.bb-cnt [data-lucide] { width: 12px; height: 12px; }
.bb-tag {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 9999px;
  font-size: 10.5px; font-weight: 700;
  background: var(--bg-offset); color: var(--fg-2);
  border: 1px solid var(--border-1);
}
.bb-tag--success { background: color-mix(in srgb, var(--st-success) 12%, var(--bg-surface)); color: var(--st-success); border-color: transparent; }
.bb-tag--late { background: color-mix(in srgb, var(--st-late) 14%, var(--bg-surface)); color: var(--st-late); border-color: transparent; }
.bb-row-match {
  margin-top: 4px;
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--fg-2);
  padding: 6px 10px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.bb-row-match [data-lucide] { width: 13px; height: 13px; color: var(--fg-3); flex-shrink: 0; margin-top: 2px; }
.bb-match-author { font-weight: 700; color: var(--fg-1); flex-shrink: 0; }
.bb-match-body {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ==========================================================================
   SCHOOL/STUDIO SELECTOR — v3 (single circle per school + studio chips)
   ========================================================================== */
.ss-v3 {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--bg-app);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
}
/* Each row is ONE big pill-shaped ring that wraps the school avatar
   AND the studio chips together — visually grouping them as one unit.
   Click the school = toggle "all studios" for that school. */
.ss-v3-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-2);
  border-radius: 9999px;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.ss-v3-row:hover { border-color: color-mix(in srgb, var(--fg-3) 50%, var(--border-2)); }
.ss-v3-row.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.ss-v3-school {
  display: flex; align-items: center; gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
}
.ss-v3-mark {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700; font-size: 14px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.ss-v3-school:hover .ss-v3-mark {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg-3) 25%, transparent);
}
.ss-v3-petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ss-v3-petal {
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 9999px;
  border: 2px solid var(--bg-surface);
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
/* Place 1–4 petals around the perimeter (clockwise from top-right) */
.ss-v3-petals .ss-v3-petal:nth-child(1) { top: -1px; right: -1px; }
.ss-v3-petals .ss-v3-petal:nth-child(2) { bottom: -1px; right: -1px; }
.ss-v3-petals .ss-v3-petal:nth-child(3) { bottom: -1px; left: -1px; }
.ss-v3-petals .ss-v3-petal:nth-child(4) { top: -1px; left: -1px; }
.ss-v3-meta {
  display: flex; flex-direction: column; gap: 0;
  min-width: 0;
}
.ss-v3-nm {
  font-size: 14px; font-weight: 700; color: var(--fg-1);
  line-height: 1.15;
}
.ss-v3-sub {
  font-size: 10.5px; font-weight: 600; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.ss-v3-divider {
  width: 1px; align-self: stretch;
  background: var(--border-1);
  margin: 4px 4px 4px 6px;
  flex-shrink: 0;
}
.ss-v3-studios {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  flex: 1; min-width: 0;
}
.ss-v3-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--bg-app);
  border: 1px solid var(--border-1);
  border-radius: 9999px;
  font-size: 12.5px; font-weight: 600; color: var(--fg-2);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ss-v3-chip:hover { background: var(--bg-subtle); color: var(--fg-1); border-color: var(--border-2); }
.ss-v3-chip.is-active {
  background: var(--fg-1);
  color: var(--bg-surface);
  border-color: var(--fg-1);
}
.ss-v3-chip.is-active .ss-v3-cnt { background: rgba(255,255,255,0.2); color: #fff; }
.ss-v3-dot {
  width: 8px; height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.ss-v3-cnt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--bg-offset);
  color: var(--fg-3);
  font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ss-v3-add {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed var(--border-2);
  border-radius: 9999px;
  font-size: 12.5px; font-weight: 600; color: var(--fg-3);
  cursor: pointer;
  transition: all 0.12s ease;
}
.ss-v3-add:hover { border-color: var(--accent); color: var(--accent); border-style: solid; background: var(--accent-soft); }
.ss-v3-add [data-lucide] { width: 13px; height: 13px; }

@media (max-width: 720px) {
  .ss-v3-row { border-radius: var(--radius-lg); flex-wrap: wrap; padding: 8px 10px; }
  .ss-v3-divider { display: none; }
}

/* ==========================================================================
   BB POST LISTING v2 — avatar-led + media stripe
   ========================================================================== */
.bb-list--v2 {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
}
.bbv2-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-1);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  align-items: flex-start;
  transition: background 0.12s ease;
}
.bbv2-row:last-child { border-bottom: 0; }
.bbv2-row:hover { background: var(--bg-subtle); }
.bbv2-av {
  width: 38px; height: 38px;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}
.bbv2-av.av--moss { background: #16A085; }
.bbv2-av.av--terra { background: #E67E22; }
.bbv2-av.av--violet { background: #8E44AD; }
.bbv2-main {
  min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.bbv2-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px;
}
.bbv2-nm {
  font-size: 13px; font-weight: 700; color: var(--fg-1);
}
.bbv2-role {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 7px;
  border-radius: 9999px;
}
.bbv2-when { color: var(--fg-3); }
.bbv2-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--fg-3); opacity: 0.5;
}
.bbv2-tag {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--fg-2);
  background: var(--bg-offset);
  padding: 1px 7px;
  border-radius: 9999px;
  border: 1px solid var(--border-1);
}
.bbv2-tag--success { background: color-mix(in srgb, var(--st-success) 12%, var(--bg-surface)); color: var(--st-success); border-color: transparent; }
.bbv2-tag--late { background: color-mix(in srgb, var(--st-late) 14%, var(--bg-surface)); color: var(--st-late); border-color: transparent; }
.bbv2-ttl {
  margin: 0;
  font-size: 16px; font-weight: 700; line-height: 1.3;
  color: var(--fg-1);
  letter-spacing: -0.005em;
}
.bbv2-snippet {
  margin: 0;
  font-size: 13px; line-height: 1.5;
  color: var(--fg-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bbv2-actions {
  display: flex; align-items: center; gap: 14px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--fg-3);
}
.bbv2-act {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600;
}
.bbv2-act [data-lucide] { width: 13px; height: 13px; }
.bbv2-media {
  display: flex; gap: 4px;
  flex-shrink: 0;
}
.bbv2-thumb {
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  background: var(--bg-offset);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85);
  flex-shrink: 0;
  overflow: hidden;
}
.bbv2-thumb [data-lucide] { width: 18px; height: 18px; }
.bbv2-thumb--icon { background: var(--bg-offset); color: var(--fg-3); }
.bbv2-thumb--icon [data-lucide] { width: 22px; height: 22px; }
.bbv2-thumb--more {
  background: var(--bg-app);
  border: 1px solid var(--border-1);
  color: var(--fg-2);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 800;
}

@media (max-width: 720px) {
  .bbv2-row { grid-template-columns: auto 1fr; }
  .bbv2-media {
    grid-column: 1 / -1;
    margin-left: 52px;
  }
}


/* ==========================================================================
   POST DETAIL
   ========================================================================== */
.post-detail { max-width: 760px; }
.post-hero {
  aspect-ratio: 16/7;
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-offset));
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  margin-bottom: 18px;
}
.post-hero [data-lucide] { width: 36px; height: 36px; }
.post-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--fg-3); margin-bottom: 10px;
}
.post-meta .author { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); font-weight: 600; }
.post-meta .author .av {
  width: 26px; height: 26px; border-radius: 9999px;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.post-meta .dot { width: 3px; height: 3px; border-radius: 9999px; background: var(--border-2); }
.post-pills { display: flex; gap: 6px; margin-bottom: 14px; }
.post-title {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.15; margin: 0 0 14px;
}
.post-body {
  font-size: 15px; line-height: 1.7; color: var(--fg-1);
}
.post-body p { margin: 0 0 14px; }
.post-body h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 22px 0 8px; }
.post-body blockquote {
  margin: 14px 0; padding: 10px 16px;
  border-left: 3px solid var(--accent);
  color: var(--fg-2); font-style: italic;
}
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.post-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 0; margin-top: 14px;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.post-actions .grow { flex: 1; }

.subscribe-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  margin-top: 18px;
  font-size: 13px;
}
.subscribe-row .ic {
  width: 32px; height: 32px; border-radius: 9999px;
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.subscribe-row .ic [data-lucide] { width: 16px; height: 16px; }


/* ==========================================================================
   COMMENTS
   ========================================================================== */
.comments-list { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.comment {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 12px 0;
}
.comment .av {
  width: 36px; height: 36px; border-radius: 9999px;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  align-self: start;
}
.comment .av.av--guide { background: #a855f7; }
.comment .av.av--learner-2 { background: #10b981; }
.comment .body { min-width: 0; }
.comment .head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; margin-bottom: 4px;
}
.comment .head .name { font-weight: 700; color: var(--fg-1); }
.comment .head .role-pill {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.3px; text-transform: uppercase;
  background: #a855f71a; color: #a855f7;
  border-radius: 9999px;
}
.comment .head .when { color: var(--fg-3); font-size: 12px; }
.comment .head .dot { width: 3px; height: 3px; border-radius: 9999px; background: var(--border-2); }
.comment .text { font-size: 14px; line-height: 1.6; color: var(--fg-1); }
.comment .text p { margin: 0 0 6px; }
.comment .actions {
  display: flex; gap: 14px; margin-top: 6px;
  font-size: 12px; color: var(--fg-3);
}
.comment .actions button {
  background: transparent; border: 0; padding: 0;
  color: inherit; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.comment .actions button:hover { color: var(--accent); }
.comment .actions [data-lucide] { width: 12px; height: 12px; }
.comment.is-pinned {
  background: var(--accent-soft);
  margin: 0 -12px; padding: 12px;
  border-radius: var(--radius-md);
}
.comment.is-pinned .pin-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.3px; text-transform: uppercase;
  margin-bottom: 6px;
}
.comment.is-pinned .pin-tag [data-lucide] { width: 11px; height: 11px; }

.comment .replies {
  margin-top: 10px; padding-left: 14px;
  border-left: 2px solid var(--border-1);
  display: flex; flex-direction: column; gap: 12px;
}

/* Composer */
.comment-composer {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  margin-top: 8px;
}
.comment-composer .av {
  width: 36px; height: 36px; border-radius: 9999px;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  align-self: start;
}
.comment-composer .box {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.comment-composer .box:focus-within { border-color: var(--accent); box-shadow: var(--ring-focus); }
.comment-composer .box .editor { border: 0; border-radius: 0; }
.comment-composer .box .editor-bar { border-top: 0; border-bottom: 1px solid var(--border-1); }
.comment-composer .composer-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-top: 1px solid var(--border-1);
  background: var(--bg-subtle);
}
.comment-composer textarea {
  display: block; width: 100%;
  border: 0; outline: none; background: transparent;
  resize: vertical; min-height: 64px;
  padding: 10px 12px;
  font: inherit; font-size: 14px; line-height: 1.5; color: var(--fg-1);
}
.comment-composer textarea::placeholder { color: var(--fg-3); }
.comment-composer .toolbar {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px;
  border-top: 1px solid var(--border-1);
}
.comment-composer .toolbar .grow { flex: 1; }
.comment-composer .toolbar .ic-btn {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg-3);
  display: inline-flex; align-items: center; justify-content: center;
}
.comment-composer .toolbar .ic-btn:hover { background: var(--bg-subtle); color: var(--fg-1); }
.comment-composer .toolbar .ic-btn [data-lucide] { width: 14px; height: 14px; }


/* ==========================================================================
   MODERN EDITOR (extends .editor base)
   ========================================================================== */
.editor.editor--modern {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.editor--modern .editor-bar {
  padding: 6px 8px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-1);
  flex-wrap: wrap;
}
.editor--modern .editor-bar .group {
  display: inline-flex; gap: 1px; align-items: center;
  padding: 0 2px;
}
.editor--modern .editor-bar .style-select {
  appearance: none; border: 1px solid var(--border-1);
  background: var(--bg-surface); color: var(--fg-1);
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 4px 22px 4px 8px;
  border-radius: var(--radius-sm); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.editor--modern .editor-title {
  display: block; width: 100%;
  border: 0; outline: none; background: transparent;
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; letter-spacing: -0.015em;
  color: var(--fg-1);
  padding: 16px 18px 4px;
}
.editor--modern .editor-title::placeholder { color: var(--fg-3); }
.editor--modern .editor-area {
  padding: 4px 18px 16px;
  font-size: 15px; line-height: 1.65;
}
.editor--modern .editor-area p { margin: 0 0 12px; }
.editor--modern .editor-area h2 {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  margin: 16px 0 6px; letter-spacing: -0.01em;
}
.editor--modern .editor-area blockquote {
  margin: 12px 0; padding: 6px 14px;
  border-left: 3px solid var(--accent);
  color: var(--fg-2); font-style: italic;
}
.editor--modern .editor-area ul { margin: 0 0 12px 20px; padding: 0; }
.editor--modern .editor-area ul li { margin-bottom: 4px; }

.editor--modern .editor-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-1);
  background: var(--bg-subtle);
  font-size: 12px; color: var(--fg-3);
}
.editor--modern .editor-foot .save-state {
  display: inline-flex; align-items: center; gap: 6px;
}
.editor--modern .editor-foot .save-state .dot {
  width: 6px; height: 6px; border-radius: 9999px; background: var(--st-success);
}
.editor--modern .editor-foot .grow { flex: 1; }
.editor--modern .editor-foot .word-count { font-variant-numeric: tabular-nums; }

/* Slash menu mock */
.slash-menu {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  width: 280px;
}
.slash-menu .group-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--fg-3); padding: 6px 10px 4px;
}
.slash-menu .item {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  cursor: pointer;
}
.slash-menu .item:hover, .slash-menu .item.sel { background: var(--bg-subtle); }
.slash-menu .item.sel { background: var(--accent-soft); }
.slash-menu .item .ic {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--bg-subtle); color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.slash-menu .item .ic [data-lucide] { width: 14px; height: 14px; }
.slash-menu .item .ttl { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.slash-menu .item .sub { font-size: 11.5px; color: var(--fg-3); }
.slash-menu .item .kbd {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3);
  padding: 2px 5px; background: var(--bg-subtle);
  border: 1px solid var(--border-1); border-radius: 4px;
}


/* ==========================================================================
   EMBED SLOTS
   ========================================================================== */
.embed-slot {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
}
.embed-slot .frame {
  aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  color: var(--fg-3);
}
.embed-slot.is-doc .frame    { background: linear-gradient(135deg, #dbeafe, #eff6ff); color: #1d4ed8; }
.embed-slot.is-slides .frame { background: linear-gradient(135deg, #fef3c7, #fffbeb); color: #b45309; }
.embed-slot.is-pdf .frame    { background: linear-gradient(135deg, #fee2e2, #fef2f2); color: #b91c1c; }
.embed-slot.is-video .frame  { background: #0f172a; color: #f8fafc; }
.embed-slot.is-image .frame  { background: linear-gradient(135deg, var(--accent-soft), var(--bg-offset)); color: var(--fg-3); }
.embed-slot.is-audio .frame  { background: linear-gradient(135deg, #ede9fe, #f5f3ff); color: #6d28d9; aspect-ratio: auto; padding: 20px 22px; }
.embed-slot.is-code .frame   { background: #0b1220; color: #93c5fd; aspect-ratio: auto; padding: 0; align-items: stretch; }
.embed-slot.is-html .frame   { background: var(--bg-subtle); aspect-ratio: auto; padding: 0; }
.embed-slot.is-link .frame   { background: var(--bg-subtle); aspect-ratio: auto; align-items: stretch; }

.embed-slot .frame .big-ic { width: 44px; height: 44px; opacity: 0.85; }
.embed-slot .frame .play {
  width: 56px; height: 56px; border-radius: 9999px;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.3);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.embed-slot .frame .play [data-lucide] { width: 22px; height: 22px; margin-left: 3px; }

.embed-slot .meta {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-1);
  font-size: 12.5px;
}
.embed-slot .meta .ic {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.embed-slot .meta .ic [data-lucide] { width: 14px; height: 14px; }
.embed-slot.is-doc .meta .ic    { background: #dbeafe; color: #1d4ed8; }
.embed-slot.is-slides .meta .ic { background: #fef3c7; color: #b45309; }
.embed-slot.is-pdf .meta .ic    { background: #fee2e2; color: #b91c1c; }
.embed-slot.is-video .meta .ic  { background: #fee2e2; color: #b91c1c; }
.embed-slot.is-image .meta .ic  { background: var(--accent-soft); color: var(--accent); }
.embed-slot.is-audio .meta .ic  { background: #ede9fe; color: #6d28d9; }
.embed-slot.is-code .meta .ic   { background: var(--bg-subtle); color: var(--fg-2); }
.embed-slot.is-html .meta .ic   { background: var(--bg-subtle); color: var(--fg-2); }
.embed-slot.is-link .meta .ic   { background: var(--bg-subtle); color: var(--fg-2); }
.embed-slot .meta .name { font-weight: 600; color: var(--fg-1); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embed-slot .meta .sub  { color: var(--fg-3); font-size: 11.5px; }
.embed-slot .meta .open {
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg-3); padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.embed-slot .meta .open:hover { color: var(--accent); }
.embed-slot .meta .open [data-lucide] { width: 14px; height: 14px; }

/* Audio waveform mock */
.audio-mock {
  display: flex; align-items: center; gap: 12px; width: 100%;
}
.audio-mock .play-btn {
  width: 36px; height: 36px; border-radius: 9999px;
  background: #6d28d9; color: #fff; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.audio-mock .play-btn [data-lucide] { width: 14px; height: 14px; margin-left: 2px; }
.audio-mock .wave {
  flex: 1; height: 28px;
  background-image: repeating-linear-gradient(to right, #6d28d9 0 2px, transparent 2px 6px);
  mask-image: linear-gradient(to right, #000 0%, #000 60%, #c4b5fd 60%, #c4b5fd 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 60%, #c4b5fd 60%, #c4b5fd 100%);
  border-radius: 4px;
}
.audio-mock .time { font-family: var(--font-mono); font-size: 11.5px; color: #6d28d9; }

/* Code mock */
.code-mock {
  width: 100%; padding: 14px 16px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  color: #cbd5e1; overflow: hidden;
}
.code-mock .kw { color: #c084fc; }
.code-mock .str { color: #86efac; }
.code-mock .fn { color: #93c5fd; }
.code-mock .com { color: #64748b; font-style: italic; }
.code-mock .num { color: #fbbf24; }

/* Link card */
.link-card {
  display: grid; grid-template-columns: 96px 1fr;
  gap: 14px; padding: 12px 14px; align-items: center; width: 100%;
}
.link-card .thumb {
  aspect-ratio: 1; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-offset));
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3);
}
.link-card .thumb [data-lucide] { width: 24px; height: 24px; }
.link-card .ttl { font-weight: 700; font-size: 13.5px; color: var(--fg-1); margin-bottom: 2px; }
.link-card .desc { font-size: 12px; color: var(--fg-2); line-height: 1.4; margin-bottom: 4px; }
.link-card .url { font-size: 11.5px; color: var(--fg-3); display: inline-flex; align-items: center; gap: 4px; }
.link-card .url [data-lucide] { width: 11px; height: 11px; }

/* HTML iframe mock */
.html-mock {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; width: 100%;
  font-size: 12.5px; color: var(--fg-2);
  font-family: var(--font-mono);
}
.html-mock .pulse {
  width: 8px; height: 8px; border-radius: 9999px; background: var(--st-success);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--st-success) 25%, transparent);
}


/* ==========================================================================
   CASH LEDGER
   ========================================================================== */
.ledger-shell {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.ledger-summary {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--border-1);
}
.ledger-summary .cell { padding: 14px 16px; border-right: 1px solid var(--border-1); }
.ledger-summary .cell:last-child { border-right: 0; }
.ledger-summary .cell .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-3); margin-bottom: 4px; }
.ledger-summary .cell .val {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px;
}
.ledger-summary .cell .val .sym { font-size: 13px; color: var(--fg-3); font-weight: 600; }
.ledger-summary .cell .delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 600; margin-top: 2px;
}
.ledger-summary .cell .delta.up   { color: var(--st-success); }
.ledger-summary .cell .delta.down { color: var(--st-overdue); }
.ledger-summary .cell .delta [data-lucide] { width: 11px; height: 11px; }

.ledger-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-1);
}
.ledger-toolbar .grow { flex: 1; }

.ledger-table { width: 100%; border-collapse: collapse; }
.ledger-table th, .ledger-table td {
  text-align: left; padding: 10px 14px;
  font-size: 13px; border-bottom: 1px solid var(--border-1);
  vertical-align: middle;
}
.ledger-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--fg-3); font-weight: 600; background: var(--bg-subtle);
}
.ledger-table tr:hover td { background: var(--bg-subtle); }
.ledger-table .when { color: var(--fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-table .who {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--fg-1);
}
.ledger-table .who .av {
  width: 24px; height: 24px; border-radius: 9999px;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700;
}
.ledger-table .reason { color: var(--fg-2); }
.ledger-table .reason .small { display: block; font-size: 11.5px; color: var(--fg-3); }
.ledger-table .amt { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; }
.ledger-table .amt.up   { color: var(--st-success); }
.ledger-table .amt.down { color: var(--st-overdue); }
.ledger-table .balance { font-variant-numeric: tabular-nums; color: var(--fg-2); text-align: right; white-space: nowrap; }
.ledger-table .type-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px; font-weight: 600;
  background: var(--bg-subtle); color: var(--fg-2);
}
.ledger-table .type-pill [data-lucide] { width: 11px; height: 11px; }
.ledger-table .type-pill.is-earn { background: var(--st-success-soft); color: var(--st-success); }
.ledger-table .type-pill.is-spend { background: #fee2e2; color: #b91c1c; }
.ledger-table .type-pill.is-transfer { background: var(--accent-soft); color: var(--accent); }
.ledger-table .type-pill.is-bonus { background: #fef3c7; color: #b45309; }


/* ==========================================================================
   PROFILE
   ========================================================================== */
.profile-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.profile-cover {
  height: 88px;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 50%, var(--bg-offset)));
}
.profile-head {
  padding: 0 22px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: end;
  margin-top: -32px;
}
.profile-head .avatar-xl {
  width: 88px; height: 88px; border-radius: 9999px;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700;
  border: 4px solid var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.profile-head .ident { padding-bottom: 6px; }
.profile-head .ident h2 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 2px;
}
.profile-head .ident .sub {
  font-size: 13px; color: var(--fg-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.profile-head .ident .sub .dot { width: 3px; height: 3px; border-radius: 9999px; background: var(--border-2); }
.profile-head .actions { padding-bottom: 6px; display: flex; gap: 6px; }

.profile-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-1);
}
.profile-stats .stat { padding: 14px 16px; border-right: 1px solid var(--border-1); text-align: left; }
.profile-stats .stat:last-child { border-right: 0; }
.profile-stats .stat .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-3); margin-bottom: 4px; }
.profile-stats .stat .val {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg-1); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px;
}
.profile-stats .stat .val .sym { font-size: 13px; color: var(--fg-3); font-weight: 600; }
.profile-stats .stat .meta { font-size: 11.5px; color: var(--fg-3); margin-top: 2px; }

.profile-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  border-top: 1px solid var(--border-1);
}
.profile-body .main { padding: 18px 20px; }
.profile-body .side { padding: 18px 20px; border-left: 1px solid var(--border-1); background: var(--bg-subtle); }

.profile-body .main h3 {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--fg-3); margin: 0 0 8px;
}
.profile-body .main p { font-size: 14px; line-height: 1.6; color: var(--fg-1); margin: 0 0 12px; }
.profile-body .main p:last-child { margin-bottom: 0; }

.kv-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13px; }
.kv-list dt { color: var(--fg-3); }
.kv-list dd { margin: 0; color: var(--fg-1); font-weight: 600; }


/* ==========================================================================
   DIRECTORY (school/affiliate listing)
   ========================================================================== */
.dir-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.dir-toolbar .grow { flex: 1; }

.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.dir-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 14px;
  transition: all 0.15s ease;
}
.dir-card:hover { border-color: var(--accent-ring); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.dir-card .head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.dir-card .crest {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-soft); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  flex-shrink: 0;
}
.dir-card .ident { min-width: 0; flex: 1; }
.dir-card .name {
  font-size: 14.5px; font-weight: 700; color: var(--fg-1);
  margin: 0; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dir-card .where {
  font-size: 12px; color: var(--fg-3);
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
}
.dir-card .where [data-lucide] { width: 11px; height: 11px; }

.dir-card .body { font-size: 12.5px; color: var(--fg-2); line-height: 1.5; }
.dir-card .meta-row {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px;
}
.dir-card .meta-row .stat {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--fg-3);
}
.dir-card .meta-row .stat [data-lucide] { width: 11px; height: 11px; }

.dir-card .stage {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.3px; text-transform: uppercase;
}
.dir-card .stage.is-open    { background: var(--st-success-soft); color: var(--st-success); }
.dir-card .stage.is-open [data-lucide],
.dir-card .stage.is-soon [data-lucide],
.dir-card .stage.is-planning [data-lucide] { width: 9px; height: 9px; }
.dir-card .stage.is-soon    { background: #fef3c7; color: #b45309; }
.dir-card .stage.is-planning{ background: var(--bg-subtle); color: var(--fg-3); }


/* ==========================================================================
   CRITIQUE PANEL
   ========================================================================== */
.critique-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  overflow: hidden;
  max-width: 720px;
}
.critique-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-1);
}
.critique-head .for-av {
  width: 38px; height: 38px; border-radius: 9999px;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.critique-head .ident { flex: 1; min-width: 0; }
.critique-head .ident .for-name { font-weight: 700; font-size: 14px; color: var(--fg-1); }
.critique-head .ident .for-what { font-size: 12.5px; color: var(--fg-3); margin-top: 1px; }
.critique-head .stage-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 9999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent);
}

.critique-progress {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-subtle);
  font-size: 12px; color: var(--fg-3);
}
.critique-progress .step {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
}
.critique-progress .step.is-current { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.critique-progress .step.is-done    { color: var(--st-success); }
.critique-progress .step .num {
  width: 16px; height: 16px; border-radius: 9999px;
  background: var(--bg-surface); border: 1px solid var(--border-1);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.critique-progress .step.is-current .num { background: var(--accent); color: #fff; border-color: var(--accent); }
.critique-progress .step.is-done .num { background: var(--st-success); color: #fff; border-color: var(--st-success); }
.critique-progress .sep-line { flex: 0 0 18px; height: 1px; background: var(--border-2); }

.critique-body { padding: 18px; }
.critique-body h4 {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--fg-3); margin: 0 0 10px;
}
.critique-body h4:not(:first-child) { margin-top: 18px; }

.rubric {
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px 14px; align-items: center;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.rubric .crit { font-size: 13.5px; color: var(--fg-1); font-weight: 600; }
.rubric .crit .desc { display: block; font-size: 12px; color: var(--fg-3); font-weight: 400; margin-top: 2px; }
.rubric .stars { display: inline-flex; gap: 2px; }
.rubric .stars button {
  background: transparent; border: 0; cursor: pointer;
  width: 22px; height: 22px;
  color: var(--border-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.rubric .stars button.on { color: #f59e0b; }
.rubric .stars button [data-lucide] { width: 18px; height: 18px; fill: currentColor; }

.iw-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.iw-grid .pad {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex; flex-direction: column;
}
.iw-grid .pad .lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  font-weight: 700; margin-bottom: 6px;
  display: inline-flex; align-items: center; gap: 5px;
}
.iw-grid .pad .lbl [data-lucide] { width: 12px; height: 12px; }
.iw-grid .pad.ilk-like   .lbl { color: var(--st-success); }
.iw-grid .pad.ilk-wish   .lbl { color: var(--accent); }
.iw-grid .pad.ilk-whatif .lbl { color: #a855f7; }
.iw-grid .pad textarea {
  flex: 1;
  border: 0; outline: none; background: transparent;
  resize: vertical; min-height: 70px;
  font: inherit; font-size: 13px; line-height: 1.5; color: var(--fg-1);
}
.iw-grid .pad textarea::placeholder { color: var(--fg-3); }

.critique-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--border-1);
  background: var(--bg-subtle);
}
.critique-foot .grow { flex: 1; }
.critique-foot .anon-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--fg-2); cursor: pointer;
}
.critique-foot .anon-toggle input { accent-color: var(--accent); }


/* ---------------------------------------------------------------
   TOPBAR — extras for modern layout
   --------------------------------------------------------------- */
.topbar .ctx {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.topbar .ctx .vsep {
  width: 1px; height: 22px;
  background: var(--border-1);
}
.topbar .ctx .page {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.topbar .ctx .page .crumb {
  font-size: 11px; color: var(--fg-3); letter-spacing: 0.2px;
  display: inline-flex; align-items: center; gap: 4px;
}
.topbar .ctx .page .crumb [data-lucide] { width: 10px; height: 10px; }
.topbar .ctx .page .h {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--fg-1);
  letter-spacing: -0.01em; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar .top-search {
  display: flex; align-items: center; gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-1);
  border-radius: 9999px;
  min-width: 280px; max-width: 480px;
  flex: 1;
  cursor: text;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.topbar .top-search:hover { border-color: var(--border-2); background: var(--bg-surface); }
.topbar .top-search [data-lucide].si { width: 14px; height: 14px; color: var(--fg-3); flex-shrink: 0; }
.topbar .top-search input {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font: inherit; font-size: 13px; color: var(--fg-1);
}
.topbar .top-search input::placeholder { color: var(--fg-3); }
.topbar .top-search .kbd {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--fg-3);
  padding: 2px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: 4px;
}

/* Sidebar header (search + brand cluster) */
.sidenav .side-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-1);
}
.sidenav .side-head .studio-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-1);
  border-radius: 9999px;
  font-size: 12px; font-weight: 600; color: var(--fg-2);
  cursor: pointer;
}
.sidenav .side-head .studio-pill .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--accent); }
.sidenav .side-head .studio-pill [data-lucide] { width: 12px; height: 12px; color: var(--fg-3); margin-left: 2px; }

/* ===============================================================
   HEADER NAV — matches journey-tracker app/views/layouts/_header_nav
   Blue gradient bar (~128px), three zones: floating circle icons +
   labels (left), centered nav with circle icons (middle), bell +
   profile pill (right). Floating content card overlaps below.
   --------------------------------------------------------------- */
.hdr-nav {
  position: relative;
  height: 128px;
  background: linear-gradient(135deg, #4a8fc7, #3a7eb6);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  overflow: visible;
}
.hdr-nav .hdr-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; padding: 0 32px;
  gap: 16px;
}
.hdr-nav .hdr-left {
  display: flex; align-items: center; gap: 20px; flex: 0 0 auto;
}
.hdr-nav .hdr-right {
  display: flex; align-items: center; gap: 20px; flex: 0 0 auto;
}
.hdr-nav .hdr-center {
  display: flex; align-items: center; gap: 20px;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

/* Circular floating icon (school/studio toggles) */
.hdr-nav .float-icon {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}

/* Hamburger button (visible at narrower widths in production; shown
   here for parity with the journey-tracker layout) */
.hdr-nav .hdr-burger-desktop {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hdr-nav .hdr-burger-desktop:hover {
  background: rgba(255,255,255,0.2);
  transform: scale(1.05);
}
.hdr-nav .hdr-burger-desktop [data-lucide] { width: 20px; height: 20px; stroke-width: 2; }
.hdr-nav .float-icon .ic-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.3);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.hdr-nav .float-icon .ic-btn:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.5);
}
.hdr-nav .float-icon .ic-btn.is-active {
  background: #fff;
  color: #3a7eb6;
  border-color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.hdr-nav .float-icon .ic-btn [data-lucide] { width: 22px; height: 22px; stroke-width: 2; }
.hdr-nav .float-icon .ic-label {
  font-size: 11px; font-weight: 600;
  color: #fff;
  opacity: 0.9;
  max-width: 90px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}

/* Center nav: circle icon + label below */
.hdr-nav .hdr-center .nav-link {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: rgba(255,255,255,0.8);
  font-size: 12px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  background: none; border: 0; padding: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}
.hdr-nav .hdr-center .nav-link:hover { color: #fff; }
.hdr-nav .hdr-center .nav-link:hover .nav-ic { background: rgba(255,255,255,0.1); }
.hdr-nav .hdr-center .nav-link .nav-ic {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  display: grid; place-items: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hdr-nav .hdr-center .nav-link .nav-ic [data-lucide] { width: 20px; height: 20px; stroke-width: 2; }
.hdr-nav .hdr-center .nav-link.is-active { color: #fff; transform: scale(1.05); }
.hdr-nav .hdr-center .nav-link.is-active .nav-ic {
  background: #fff;
  color: #3a7eb6;
  border-color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.hdr-nav .hdr-center .nav-link .badge-dot {
  position: absolute; top: 2px; right: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--st-overdue, #ff4757);
  border: 2px solid #3a7eb6;
}

/* Bell icon (right side) */
.hdr-nav .bell-btn {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hdr-nav .bell-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.05); }
.hdr-nav .bell-btn [data-lucide] { width: 20px; height: 20px; stroke-width: 2; }
.hdr-nav .bell-btn .notif-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 5px;
  background: #ff4757;
  border-radius: 9px;
  color: #fff;
  font-size: 11px; font-weight: 700;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
}

/* Profile dropdown pill */
.hdr-nav .profile-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 20px;
  background: rgba(255,255,255,0.1);
  border: 0;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.hdr-nav .profile-pill:hover { background: rgba(255,255,255,0.2); }
.hdr-nav .profile-pill .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(255,255,255,0.2);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.hdr-nav .profile-pill [data-lucide] { width: 12px; height: 12px; stroke-width: 2; }

/* Floating content card that overlaps the header */
.hdr-card {
  position: relative;
  margin: -40px 24px 0;
  background: var(--bg-surface);
  border-radius: 24px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.10);
  border: 1px solid rgba(223,231,242,0.5);
  padding: 24px;
}

/* Old .topbar.modern still kept for sidebar demo compatibility */
.topbar.modern { grid-template-columns: auto 1fr auto; }
.topbar.modern .ctx { flex: 0 0 auto; }


/* ===============================================================
   CHALLENGE CARD (28) — modeled on app/views/progress/tracker/weeklies/_challenge_card
   --------------------------------------------------------------- */
.ch-card {
  position: relative;
  display: grid;
  grid-template-columns: 4px 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "strip head"
    "strip body"
    "strip foot";
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ch-card:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm); }

.ch-card .ch-strip {
  grid-area: strip;
  background: var(--border-2);
  align-self: stretch;
}

.ch-card .ch-head {
  grid-area: head;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 6px;
  font-size: 12px; color: var(--fg-3);
}
.ch-card .ch-head .ch-due {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500;
}
.ch-card .ch-head .ch-due [data-lucide] { width: 13px; height: 13px; stroke-width: 2.25; }

.ch-card .ch-head .ch-schedule {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 0;
  padding: 4px 10px;
  border-radius: 9999px;
  cursor: pointer;
}
.ch-card .ch-head .ch-schedule [data-lucide] { width: 12px; height: 12px; }
.ch-card .ch-head .ch-schedule:hover { background: color-mix(in srgb, var(--accent) 18%, white); }

/* Points — the loud thing. */
.ch-card .ch-points {
  display: inline-flex; align-items: baseline; gap: 1px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--bg-offset);
  border: 1px solid var(--border-1);
  font-family: var(--font-mono, var(--font-display));
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--fg-1);
  font-size: 12.5px;
  line-height: 1;
}
.ch-card .ch-points .num { font-size: 13px; }
.ch-card .ch-points .sep { color: var(--fg-3); font-weight: 500; padding: 0 1px; }
.ch-card .ch-points .unit { font-size: 10px; font-weight: 600; color: var(--fg-3); margin-left: 3px; letter-spacing: 0.4px; text-transform: uppercase; }

.ch-card .ch-points--completed { background: var(--bg-success-soft, #ecfdf5); border-color: color-mix(in srgb, var(--st-success) 30%, transparent); color: var(--st-success); }
.ch-card .ch-points--completed .sep, .ch-card .ch-points--completed .unit { color: color-mix(in srgb, var(--st-success) 70%, var(--fg-3)); }
.ch-card .ch-points--review { background: color-mix(in srgb, var(--st-warning) 14%, var(--bg-surface)); border-color: color-mix(in srgb, var(--st-warning) 30%, transparent); color: color-mix(in srgb, var(--st-warning) 70%, var(--fg-1)); }
.ch-card .ch-points--late { background: color-mix(in srgb, var(--st-warning) 14%, var(--bg-surface)); border-color: color-mix(in srgb, var(--st-warning) 30%, transparent); color: color-mix(in srgb, var(--st-warning) 70%, var(--fg-1)); }
.ch-card .ch-points--overdue { background: color-mix(in srgb, var(--st-danger) 12%, var(--bg-surface)); border-color: color-mix(in srgb, var(--st-danger) 30%, transparent); color: var(--st-danger); }

.ch-card .ch-body {
  grid-area: body;
  padding: 0 14px 10px;
}
.ch-card .ch-body .ch-name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--fg-1);
  line-height: 1.3;
  margin-bottom: 8px;
  text-wrap: pretty;
}
.ch-card .ch-body .ch-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}

.ch-card .ch-foot {
  grid-area: foot;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--border-1);
  background: var(--bg-app);
}
.ch-card .ch-foot .ch-bit {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--fg-3);
  text-decoration: none;
}
.ch-card .ch-foot a.ch-bit:hover { color: var(--accent); }
.ch-card .ch-foot .ch-bit [data-lucide] { width: 12px; height: 12px; stroke-width: 2.25; color: var(--fg-3); }
.ch-card .ch-foot a.ch-bit:hover [data-lucide] { color: var(--accent); }

/* Status strip */
.ch-card.ch-not_started .ch-strip { background: var(--border-2); }
.ch-card.ch-in_review   .ch-strip { background: var(--st-warning); }
.ch-card.ch-completed   .ch-strip { background: var(--st-success); }
.ch-card.ch-late        .ch-strip { background: var(--st-warning); }
.ch-card.ch-overdue     .ch-strip { background: var(--st-danger); }
.ch-card.ch-opted_out   .ch-strip { background: var(--border-2); opacity: 0.6; }

/* Variants */
.ch-card.ch-not-on-plan { background: repeating-linear-gradient(135deg, var(--bg-surface) 0 8px, var(--bg-app) 8px 16px); }
.ch-card.ch-launch .ch-strip { background: var(--st-launch, #7c3aed); }
.ch-card.ch-launch .ch-name::before {
  content: ""; display: inline-block;
  width: 4px; height: 4px;
  border-radius: 9999px;
  background: var(--st-launch, #7c3aed);
  vertical-align: middle;
  margin-right: 6px;
}
.ch-card.ch-optional { opacity: 0.92; }
.ch-card.ch-next-up .ch-strip { background: var(--accent); }

/* Pill modifiers used in challenge card */
.pill.pill--launch { background: color-mix(in srgb, var(--st-launch, #7c3aed) 14%, var(--bg-surface)); color: var(--st-launch, #7c3aed); border: 1px solid color-mix(in srgb, var(--st-launch, #7c3aed) 25%, transparent); }
.pill.pill--purple { background: color-mix(in srgb, #7c3aed 14%, var(--bg-surface)); color: #7c3aed; border: 1px solid color-mix(in srgb, #7c3aed 25%, transparent); }
.pill.pill--warn { background: color-mix(in srgb, var(--st-warning) 14%, var(--bg-surface)); color: color-mix(in srgb, var(--st-warning) 75%, var(--fg-1)); border: 1px solid color-mix(in srgb, var(--st-warning) 25%, transparent); }
.pill.pill--ghost { background: var(--bg-surface); color: var(--fg-2); border: 1px solid var(--border-1); }
.pill.pill--ghost [data-lucide] { color: var(--fg-3); }
.pill.pill--neutral { background: var(--bg-offset); color: var(--fg-2); border: 1px solid var(--border-1); }

/* Compact dashboard variant (.simple-challenge-card) */
.cc-simple {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-1);
  background: var(--bg-surface);
  border-radius: 9999px;
  font-size: 13px; color: var(--fg-1);
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cc-simple:hover { background: var(--bg-subtle); border-color: var(--border-2); }
.cc-simple .ic {
  width: 22px; height: 22px;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-offset); color: var(--fg-3);
  flex-shrink: 0;
}
.cc-simple .ic [data-lucide] { width: 12px; height: 12px; stroke-width: 2.5; }
.cc-simple.is-completed .ic { background: var(--st-success); color: #fff; }
.cc-simple.is-in_review .ic { background: var(--st-warning); color: #fff; }
.cc-simple.is-overdue .ic { background: var(--st-danger); color: #fff; }
.cc-simple.is-late .ic { background: color-mix(in srgb, var(--st-danger) 80%, #000); color: #fff; }
.cc-simple.is-not_started .ic { background: var(--bg-offset); color: var(--fg-3); }
.cc-simple.is-skipped .ic { background: var(--fg-3); color: #fff; }
.cc-simple.is-draft .ic { background: var(--accent); color: #fff; }


/* ===============================================================
   SMART GOAL (32) — modeled on app/views/progress/smart_goals/_smart_goal
   Mad-lib goal with circle on left, two ui-cards on right.
   --------------------------------------------------------------- */
.sg-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
  padding: 18px;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
}
.sg-row.sg-overdue {
  background: linear-gradient(180deg, color-mix(in srgb, var(--st-danger) 6%, var(--bg-surface)), var(--bg-surface));
  border-color: color-mix(in srgb, var(--st-danger) 25%, var(--border-1));
}

.sg-circle {
  border-right: 1px dashed var(--border-1);
  padding-right: 16px;
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start;
  text-align: left;
}
.sg-circle-value {
  display: flex; flex-direction: column;
  font-family: var(--font-display);
  line-height: 1;
}
.sg-circle-value .num {
  font-size: 44px; font-weight: 800; color: var(--fg-1);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.sg-circle-value .unit {
  font-size: 13px; font-weight: 600; color: var(--fg-2);
  margin-top: 2px;
}
.sg-circle-meta {
  font-size: 12.5px; color: var(--fg-2);
}
.sg-circle-meta .bold { font-weight: 700; color: var(--fg-1); }
.sg-circle-saved {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--st-success);
  margin-top: auto;
}
.sg-circle-saved [data-lucide] { width: 11px; height: 11px; }
.sg-circle-saved--late { color: var(--st-danger); }

.sg-cards { display: grid; gap: 12px; }
.sg-card {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  background: var(--bg-app);
  overflow: hidden;
}
.sg-card-h {
  padding: 8px 14px;
  background: var(--bg-offset);
  border-bottom: 1px solid var(--border-1);
}
.sg-card-h h2 {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}
.sg-card-b {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}

.sg-method {
  display: flex; align-items: center; gap: 8px;
}
.sg-method input[type="text"][disabled] {
  flex: 1;
  border: 1px solid var(--border-1);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--fg-1);
  padding: 6px 14px;
  cursor: default;
}
.sg-q {
  width: 22px; height: 22px;
  border-radius: 9999px;
  background: var(--bg-offset); border: 1px solid var(--border-1);
  color: var(--fg-3);
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help;
}

.sg-mad {
  font-size: 14px; line-height: 1.7;
  color: var(--fg-1);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px;
}
.sg-mad strong { font-variant-numeric: tabular-nums; color: var(--fg-1); font-weight: 700; }
.sg-mad label {
  display: block; width: 100%;
  font-size: 12.5px; color: var(--fg-2); font-weight: 600;
  margin-bottom: 2px;
}
.sg-fill {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 4px 12px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--fg-1);
  min-width: 56px;
  text-align: center;
  outline-offset: 2px;
}
.sg-fill:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-color: var(--accent);
}
.sg-fill--wide { width: 100%; text-align: left; border-radius: var(--radius-md); padding: 8px 14px; }
textarea.sg-fill { min-height: 60px; resize: vertical; border-radius: var(--radius-md); padding: 8px 14px; text-align: left; }

.sg-progress {
  height: 6px;
  background: var(--bg-offset);
  border-radius: 9999px;
  overflow: hidden;
}
.sg-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 9999px;
}


/* ===============================================================
   BADGE PLAN (31) — schedule grid (years × sessions × categories)
   Modeled on app/views/progress/badge_plans/schedule/_badge_plan
   --------------------------------------------------------------- */
.bp-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.bp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 900px;
}
.bp-table th,
.bp-table td {
  border-right: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
  padding: 8px;
  vertical-align: top;
}
.bp-table thead th {
  background: var(--bg-offset);
  position: sticky; top: 0;
  z-index: 1;
  font-weight: 600;
  color: var(--fg-2);
  font-size: 11.5px;
}
.bp-table tfoot th {
  background: color-mix(in srgb, var(--bg-offset) 60%, var(--bg-surface));
  font-weight: 500;
  color: var(--fg-2);
  font-size: 11.5px;
}
.bp-cat {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-1);
  background: var(--bg-offset);
  position: sticky; left: 0; z-index: 1;
  min-width: 110px;
}

.bp-year { min-width: 240px; padding: 0 !important; }
.bp-year-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-1);
  font-size: 13px;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border-1);
}
.bp-year-h a { color: inherit; text-decoration: none; }
.bp-year-h a:hover { color: var(--accent); }
.bp-rm {
  background: transparent; border: 0;
  width: 18px; height: 18px;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  cursor: pointer;
}
.bp-rm:hover { background: color-mix(in srgb, var(--st-danger) 15%, transparent); color: var(--st-danger); }
.bp-rm [data-lucide] { width: 12px; height: 12px; }

.bp-sessions {
  display: grid; grid-template-columns: repeat(3, 1fr);
  font-size: 10.5px; font-weight: 600;
  color: var(--fg-3);
  text-align: center;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.bp-sessions .bp-s {
  padding: 4px 0;
  border-right: 1px solid var(--border-1);
}
.bp-sessions .bp-s:last-child { border-right: 0; }

.bp-year-cell { padding: 0 !important; }
.bp-sessions-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  min-height: 56px;
}
.bp-cell {
  padding: 6px;
  border-right: 1px dashed var(--border-1);
  display: flex; align-items: center; justify-content: center;
}
.bp-cell:last-child { border-right: 0; }
.bp-cell--empty { background: repeating-linear-gradient(45deg, transparent, transparent 6px, color-mix(in srgb, var(--bg-offset) 50%, transparent) 6px, color-mix(in srgb, var(--bg-offset) 50%, transparent) 7px); }
.bp-empty-mark { color: var(--fg-3); opacity: 0.4; font-size: 14px; }

.bp-add { width: 40px; padding: 0 !important; background: var(--bg-offset); }
.bp-add-btn {
  width: 32px; height: 32px;
  margin: 8px auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface);
  border: 1px dashed var(--border-1);
  border-radius: var(--radius-xs);
  color: var(--fg-3);
  cursor: pointer;
}
.bp-add-btn:hover { color: var(--accent); border-color: var(--accent); border-style: solid; }
.bp-add-btn [data-lucide] { width: 14px; height: 14px; }

.bp-buf { min-width: 110px; background: color-mix(in srgb, var(--accent) 4%, var(--bg-surface)); }
.bp-num { width: 60px; text-align: center; }
.bp-tnum { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.bp-foot-num { font-family: var(--font-display); font-weight: 700; color: var(--fg-1); font-variant-numeric: tabular-nums; margin-left: 4px; }
.bp-buf .bp-asg { width: 100%; }

.vw { font-size: 10.5px; color: var(--fg-3); font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }

/* assignment chips */
.bp-asg {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  font-size: 10.5px; font-weight: 600;
  border: 1px solid;
  width: 100%;
  justify-content: flex-start;
  cursor: grab;
  line-height: 1.2;
  background: var(--bg-surface);
  color: var(--fg-1);
}
.bp-asg-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.bp-asg-ic [data-lucide] { width: 10px; height: 10px; }
.bp-asg-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bp-asg--approved { background: color-mix(in srgb, var(--st-success) 10%, var(--bg-surface)); border-color: color-mix(in srgb, var(--st-success) 35%, var(--border-1)); color: color-mix(in srgb, var(--st-success) 70%, var(--fg-1)); }
.bp-asg--approved .bp-asg-ic { background: var(--st-success); color: white; }

.bp-asg--in_progress { background: color-mix(in srgb, var(--st-info) 8%, var(--bg-surface)); border-color: color-mix(in srgb, var(--st-info) 35%, var(--border-1)); color: color-mix(in srgb, var(--st-info) 80%, var(--fg-1)); }
.bp-asg--in_progress .bp-asg-ic { background: var(--st-info); color: white; }

.bp-asg--in_review { background: color-mix(in srgb, var(--st-pending) 10%, var(--bg-surface)); border-color: color-mix(in srgb, var(--st-pending) 35%, var(--border-1)); color: color-mix(in srgb, var(--st-pending) 80%, var(--fg-1)); }
.bp-asg--in_review .bp-asg-ic { background: var(--st-pending); color: white; }

.bp-asg--overdue { background: color-mix(in srgb, var(--st-danger) 10%, var(--bg-surface)); border-color: color-mix(in srgb, var(--st-danger) 35%, var(--border-1)); color: color-mix(in srgb, var(--st-danger) 70%, var(--fg-1)); }
.bp-asg--overdue .bp-asg-ic { background: var(--st-danger); color: white; }

.bp-asg--not_yet_started { background: var(--bg-surface); border-color: var(--border-1); border-style: dashed; color: var(--fg-2); }
.bp-asg--not_yet_started .bp-asg-ic { background: var(--bg-offset); color: var(--fg-3); border: 1px dashed var(--border-1); }

.bp-asg--transfer { background: color-mix(in srgb, var(--st-late) 10%, var(--bg-surface)); border-color: color-mix(in srgb, var(--st-late) 35%, var(--border-1)); color: color-mix(in srgb, var(--st-late) 70%, var(--fg-1)); }
.bp-asg--transfer .bp-asg-ic { background: var(--st-late); color: white; }

.bp-asg--sm { padding: 2px 5px; font-size: 10px; }
.bp-asg--legend { width: auto; cursor: default; padding: 2px; border: 0; background: transparent; }
.bp-asg--legend .bp-asg-ic { width: 14px; height: 14px; }

.bp-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 12px 16px;
  font-size: 11.5px; color: var(--fg-2);
  border-top: 1px solid var(--border-1);
  background: var(--bg-app);
}
.bp-legend-item { display: inline-flex; align-items: center; gap: 4px; }

/* ===============================================================
   PLAN TEMPLATE MILESTONES (inside badge plan)
   --------------------------------------------------------------- */
.bp-milestones {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0 6px;
}
.bp-milestone {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--bg-app);
}
.bp-milestone.bp-m-done { background: color-mix(in srgb, var(--st-success) 6%, var(--bg-app)); border-color: color-mix(in srgb, var(--st-success) 25%, var(--border-1)); }
.bp-milestone.bp-m-now  { background: color-mix(in srgb, var(--accent) 5%, var(--bg-app)); border-color: color-mix(in srgb, var(--accent) 25%, var(--border-1)); }

.bp-m-h {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.bp-m-num {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  background: var(--bg-offset);
  color: var(--fg-2);
  padding: 2px 6px; border-radius: var(--radius-xs);
  letter-spacing: 0.3px;
}
.bp-m-done .bp-m-num { background: var(--st-success); color: white; }
.bp-m-now .bp-m-num { background: var(--accent); color: white; }
.bp-m-lbl { font-weight: 600; color: var(--fg-1); font-size: 13px; }
.bp-m-stat {
  font-size: 11px; color: var(--fg-3); display: inline-flex; align-items: center; gap: 4px;
}
.bp-m-done .bp-m-stat { color: var(--st-success); font-weight: 600; }
.bp-m-now  .bp-m-stat { color: var(--accent); font-weight: 600; }
.bp-m-stat [data-lucide] { width: 12px; height: 12px; }

.bp-m-bar {
  height: 4px; background: var(--bg-offset); border-radius: 9999px; overflow: hidden;
}
.bp-m-fill {
  height: 100%;
  background: var(--fg-3);
  border-radius: 9999px;
}
.bp-m-done .bp-m-fill { background: var(--st-success); }
.bp-m-now  .bp-m-fill { background: var(--accent); }


/* ===============================================================
   PLAN TEMPLATE (31) — badge-style template
   header → milestones → challenge listing
   --------------------------------------------------------------- */
.badge-tpl {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.badge-tpl-head {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  padding: 24px;
  border-bottom: 1px solid var(--border-1);
}
.badge-tpl-img .badge-icon {
  width: 96px; height: 96px;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.badge-tpl-img .badge-icon [data-lucide] {
  width: 40px; height: 40px;
  stroke-width: 1.8;
}
.badge-tpl-title h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0 0 10px;
}
.badge-tpl-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.badge-tpl-desc {
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.55;
  margin: 0;
  max-width: 70ch;
}

.badge-tpl-milestones { display: flex; flex-direction: column; }
.bm-block {
  border-bottom: 1px solid var(--border-1);
}
.bm-block:last-child { border-bottom: 0; }

.bm-head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  padding: 18px 24px 14px;
}
.bm-img {
  width: 56px; height: 56px;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cat-writing);
}
.bm-img [data-lucide] { width: 22px; height: 22px; stroke-width: 2; }
.bm-content h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--fg-1);
  margin: 0 0 4px;
}
.bm-desc {
  font-size: 13.5px;
  color: var(--fg-2);
  line-height: 1.55;
  margin: 0;
  max-width: 70ch;
}

.bm-challenges {
  padding: 0 24px 18px 94px;
  display: flex; flex-direction: column;
  gap: 0;
}

/* ===============================================================
   CHALLENGE LISTING (31a) — reusable row-based challenge list
   .cl-list, .cl-row · used inside milestones, weekly views, feeds
   --------------------------------------------------------------- */
.cl-list {
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.bm-challenges .cl-row,
.cl-list .cl-row { border-bottom: 1px solid var(--border-1); }
.cl-list .cl-row:last-child { border-bottom: 0; }

.bm-challenges .cl-row {
  background: transparent;
  border-radius: 0;
}
.bm-challenges .cl-row:last-child { border-bottom: 0; }

.cl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-surface);
  text-decoration: none;
  color: var(--fg-1);
  cursor: pointer;
  transition: background 0.12s ease;
  flex-wrap: wrap;
}
.cl-row:hover { background: var(--bg-subtle); }

.cl-cat-ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.cl-cat-ic [data-lucide] { width: 14px; height: 14px; stroke-width: 2.2; }

.cl-name {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 50%;
  min-width: 0;
}
.cl-title {
  font-size: 14px;
  color: var(--fg-1);
  line-height: 1.4;
}

.cl-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.cl-pill--challenge {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-surface));
  color: var(--accent);
}
.cl-pill--launch {
  background: color-mix(in srgb, var(--st-info, #2196F3) 14%, var(--bg-surface));
  color: var(--st-info, #2196F3);
}
.cl-pill--close {
  background: color-mix(in srgb, var(--cat-civilization, #8E44AD) 14%, var(--bg-surface));
  color: var(--cat-civilization, #8E44AD);
}
.cl-pill--smart {
  background: color-mix(in srgb, var(--cat-self, #16A085) 14%, var(--bg-surface));
  color: var(--cat-self, #16A085);
}

.cl-meta {
  display: flex; align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* base modern-info-pill (mirrors Badge Detail.html source) */
.modern-info-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px; font-weight: 600;
  background: var(--bg-offset);
  color: var(--fg-2);
  border: 1px solid var(--border-1);
  white-space: nowrap;
}
.modern-info-pill [data-lucide],
.modern-info-pill svg { width: 12px; height: 12px; stroke-width: 2.25; flex-shrink: 0; }

/* extended modern-info-pill variants used in challenge listing */
.modern-info-pill--optional {
  background: color-mix(in srgb, var(--st-warning) 14%, var(--bg-surface));
  color: var(--st-warning);
  border-color: transparent;
}
.modern-info-pill--draft {
  background: color-mix(in srgb, var(--fg-3) 18%, var(--bg-surface));
  color: var(--fg-2);
  border-color: transparent;
}
.modern-info-pill--self {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-surface));
  color: var(--accent);
  border-color: transparent;
}
.modern-info-pill--unscheduled {
  background: var(--bg-offset);
  color: var(--fg-3);
  border-color: transparent;
}
.modern-info-pill--completed {
  background: color-mix(in srgb, var(--st-success) 14%, var(--bg-surface));
  color: var(--st-success);
  border-color: transparent;
}
.modern-info-pill--review {
  background: color-mix(in srgb, var(--st-info, #2196F3) 14%, var(--bg-surface));
  color: var(--st-info, #2196F3);
  border-color: transparent;
}
.modern-info-pill--late {
  background: color-mix(in srgb, var(--st-warning) 16%, var(--bg-surface));
  color: var(--st-warning);
  border-color: transparent;
}
.modern-info-pill--overdue {
  background: color-mix(in srgb, var(--st-danger) 14%, var(--bg-surface));
  color: var(--st-danger);
  border-color: transparent;
}

/* ============================================================
   Challenge listing row — submission status variants (31a)
   Optional left strip + status glyph before the type pill.
   ============================================================ */
.cl-row { position: relative; }
.cl-row .cl-strip {
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
}
.cl-row--completed  .cl-strip { background: var(--st-success); }
.cl-row--review     .cl-strip { background: var(--st-info, #2196F3); }
.cl-row--inprogress .cl-strip { background: var(--accent); }
.cl-row--late       .cl-strip { background: var(--st-warning); }
.cl-row--overdue    .cl-strip { background: var(--st-danger); }
.cl-row--upcoming   .cl-strip { background: var(--border-1); }

.cl-glyph {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-offset);
  color: var(--fg-3);
}
.cl-glyph [data-lucide],
.cl-glyph svg { width: 11px; height: 11px; stroke-width: 2.5; }
.cl-glyph--completed  { background: color-mix(in srgb, var(--st-success) 18%, var(--bg-surface)); color: var(--st-success); }
.cl-glyph--review     { background: color-mix(in srgb, var(--st-info, #2196F3) 18%, var(--bg-surface)); color: var(--st-info, #2196F3); }
.cl-glyph--inprogress { background: color-mix(in srgb, var(--accent) 18%, var(--bg-surface)); color: var(--accent); }
.cl-glyph--late       { background: color-mix(in srgb, var(--st-warning) 22%, var(--bg-surface)); color: var(--st-warning); }
.cl-glyph--overdue    { background: color-mix(in srgb, var(--st-danger) 18%, var(--bg-surface)); color: var(--st-danger); }
.cl-glyph--upcoming   { background: var(--bg-surface); color: var(--fg-3); border: 1px dashed var(--border-1); }

@media (max-width: 720px) {
  .cl-row { align-items: flex-start; flex-direction: column; }
  .cl-meta { width: 100%; }
  .bm-challenges { padding-left: 24px; }
  .badge-tpl-head { grid-template-columns: 64px 1fr; }
  .badge-tpl-img .badge-icon { width: 64px; height: 64px; }
}


/* ===============================================================
   SIDEBAR DEMO MAIN CONTENT (21) — realistic JT content
   --------------------------------------------------------------- */
.sb-main {
  display: flex; flex-direction: column;
  gap: 18px;
  padding: 22px;
}
.sb-h1-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.sb-h1 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
}
.sb-h1-actions { display: flex; gap: 8px; align-items: center; }

.sb-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sb-stat {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.sb-stat-k {
  font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.sb-stat-v {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
.sb-stat-v--accent { color: var(--accent); }
.sb-stat-sub { font-size: 11.5px; color: var(--fg-2); }

.sb-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.sb-card-h {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-1);
}
.sb-card-ttl {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--fg-1);
}
.sb-card-meta { font-size: 11.5px; color: var(--fg-3); }
.sb-card .cl-row { background: transparent; border-bottom: 1px solid var(--border-1); }
.sb-card .cl-row:last-child { border-bottom: 0; }


/* ===============================================================
   DATE SELECTOR (43) — clickable label + calendar popup
   --------------------------------------------------------------- */
.date-selector .label-btn {
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--fg-1);
  cursor: pointer;
  transition: background 0.12s ease;
  min-height: 30px;
  font-variant-numeric: tabular-nums;
}
.date-selector .label-btn:hover { background: var(--bg-subtle); }
.date-selector .label-btn [data-lucide] { width: 13px; height: 13px; color: var(--fg-3); }
.date-selector .label-btn .sub {
  font-size: 11px; color: var(--fg-3); font-weight: 500; margin-left: 6px;
}

/* Variant: caption (week/session) sits OUTSIDE the pill, below it */
.date-selector-pair {
  display: inline-flex; flex-direction: column; gap: 4px;
}
.date-selector-pair .meta {
  font-size: 11px; color: var(--fg-3); font-weight: 600;
  padding: 0 14px;
  letter-spacing: 0.04em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.date-selector-pair .meta strong { color: var(--fg-2); font-weight: 700; text-transform: none; letter-spacing: 0; }

.cal-popup {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 14px;
  width: 320px;
}
.cal-popup-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.cal-popup-mo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-1);
}
.cal-popup-h .step {
  width: 28px; height: 28px;
  border-radius: 9999px;
  border: 1px solid var(--border-1);
  background: var(--bg-surface);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--fg-2);
}
.cal-popup-h .step:hover { background: var(--bg-subtle); }
.cal-popup-h .step [data-lucide] { width: 14px; height: 14px; }

.cal-popup-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-popup-dh {
  font-size: 10.5px;
  color: var(--fg-3);
  font-weight: 600;
  text-align: center;
  padding: 6px 0;
  letter-spacing: 0.04em;
}
.cal-popup-d {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-1);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s ease;
  font-variant-numeric: tabular-nums;
}
.cal-popup-d:hover { background: var(--bg-subtle); }
.cal-popup-d.is-other { color: var(--fg-3); pointer-events: none; }
.cal-popup-d.is-today { font-weight: 700; color: var(--accent); }
.cal-popup-d.is-selected {
  background: var(--accent);
  color: #fff;
}
.cal-popup-d.is-selected:hover { background: var(--accent); }
.cal-popup-dot {
  position: absolute;
  bottom: 4px;
  width: 4px; height: 4px;
  border-radius: 9999px;
  background: var(--st-success);
}
.cal-popup-d.is-selected .cal-popup-dot { background: #fff; }

.cal-popup-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-1);
}


/* ---------------------------------------------------------------
   SIDEBAR DEMO — JT-style floating content card
   --------------------------------------------------------------- */
.hdr-shell-body {
  margin-top: -80px;
  padding: 0 24px 24px;
  background: var(--bg-app);
}
.hdr-shell-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  min-height: 480px;
}
.jt-sidenav {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-1);
  padding: 14px 10px;
  overflow-y: auto;
}
.jt-sidenav .side-head {
  padding: 4px 4px 12px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 8px;
}
.jt-sidenav .studio-pill {
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: 12.5px; font-weight: 600;
  color: var(--fg-1);
  cursor: pointer;
}
.jt-sidenav .studio-pill .dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--accent);
}
.jt-sidenav .studio-pill [data-lucide] { width: 14px; height: 14px; margin-left: auto; color: var(--fg-3); }
.jt-sidenav .group {
  font-size: 10px; font-weight: 600; color: var(--fg-3);
  letter-spacing: 0.6px; text-transform: uppercase;
  padding: 14px 10px 4px;
}
.jt-sidenav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.jt-sidenav a:hover { background: var(--bg-subtle); color: var(--fg-1); }
.jt-sidenav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.jt-sidenav a [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 2; }
.jt-sidenav a .num {
  margin-left: auto;
  font-size: 10.5px;
  background: var(--bg-offset);
  color: var(--fg-3);
  padding: 1px 6px;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.jt-sidenav a.active .num { background: var(--accent); color: var(--fg-on-accent); }
.jt-sidenav a .alert-num {
  margin-left: auto;
  font-size: 10.5px;
  background: var(--st-overdue);
  color: #fff;
  padding: 1px 6px;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.hdr-shell-main {
  padding: 24px;
  overflow-y: auto;
  background: var(--bg-surface);
}

/* Mobile phone frame for demos */
.phone-frame {
  width: 320px;
  background: #1a1a1a;
  padding: 8px;
  border-radius: 32px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 540px;
  background: var(--bg-app);
  border-radius: 24px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.mob-caption {
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  text-align: center;
  font-size: 11px; color: rgba(255,255,255,0.6);
  pointer-events: none;
}
.hdr-nav-mobile {
  height: 56px;
  background: linear-gradient(135deg, #4a8fc7, #3a7eb6);
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  color: #fff;
  flex-shrink: 0;
}
.hdr-burger {
  width: 36px; height: 36px;
  border-radius: 9999px;
  border: 0;
  background: rgba(255,255,255,0.15);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.hdr-burger:hover { background: rgba(255,255,255,0.25); }
.hdr-burger.is-open { background: #fff; color: #3a7eb6; }
.hdr-burger [data-lucide] { width: 18px; height: 18px; }
.hdr-burger .dot {
  position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 9999px;
  background: var(--st-overdue);
  border: 1.5px solid #3a7eb6;
}
.hdr-mobile-title {
  flex: 1;
  display: flex; flex-direction: column;
  line-height: 1.2;
}
.hdr-mobile-title .ttl { font-size: 15px; font-weight: 700; }
.hdr-mobile-title .sub { font-size: 11.5px; opacity: 0.85; }

/* JT-style mobile header — matches the desktop blue chrome:
   hamburger + school/studio circle toggles + bell + avatar */
.hdr-nav-mobile.jt-mobile {
  height: 64px;
  padding: 0 10px;
  gap: 8px;
}
.jt-mob-burger {
  width: 36px; height: 36px;
  border-radius: 9999px;
  border: 0;
  background: rgba(255,255,255,0.15);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.jt-mob-burger:hover { background: rgba(255,255,255,0.25); }
.jt-mob-burger.is-open { background: #fff; color: #3a7eb6; }
.jt-mob-burger [data-lucide] { width: 18px; height: 18px; stroke-width: 2; }
.jt-mob-toggles {
  flex: 1;
  display: flex; align-items: center; gap: 12px;
  justify-content: center;
  min-width: 0;
}
.jt-mob-tog {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 0;
}
.jt-mob-tog .ic {
  width: 30px; height: 30px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.35);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.jt-mob-tog .ic [data-lucide] { width: 16px; height: 16px; stroke-width: 2; }
.jt-mob-tog.is-active .ic {
  background: #fff;
  color: #3a7eb6;
  border-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.jt-mob-tog .lb {
  font-size: 9.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 64px;
}
.jt-mob-bell {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 9999px;
  border: 0;
  background: rgba(255,255,255,0.15);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.jt-mob-bell:hover { background: rgba(255,255,255,0.25); }
.jt-mob-bell [data-lucide] { width: 18px; height: 18px; stroke-width: 2; }
.jt-mob-bell .notif-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: var(--st-overdue, #d4361c);
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #4a8fc7;
}
.jt-mob-avatar {
  width: 34px; height: 34px;
  border-radius: 9999px;
  border: 2px solid #fff;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.phone-body { flex: 1; overflow: hidden; position: relative; }
.mob-scrim {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: 1;
}
.mob-drawer {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 240px;
  background: var(--bg-surface);
  z-index: 2;
  padding: 12px 10px;
  overflow-y: auto;
  box-shadow: 4px 0 20px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
}
.mob-drawer .group {
  font-size: 10px; font-weight: 600; color: var(--fg-3);
  letter-spacing: 0.6px; text-transform: uppercase;
  padding: 14px 10px 4px;
}
.mob-drawer a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
}
.mob-drawer a:hover { background: var(--bg-subtle); color: var(--fg-1); }
.mob-drawer a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mob-drawer a [data-lucide] { width: 16px; height: 16px; }
.mob-drawer a .num {
  margin-left: auto;
  font-size: 10.5px;
  background: var(--bg-offset);
  color: var(--fg-3);
  padding: 1px 6px;
  border-radius: 9999px;
  font-weight: 600;
}
.mob-drawer a .alert-num {
  margin-left: auto;
  font-size: 10.5px;
  background: var(--st-overdue);
  color: #fff;
  padding: 1px 6px;
  border-radius: 9999px;
  font-weight: 700;
}
.mob-drawer-head {
  padding: 6px 6px 12px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 8px;
}
.mob-drawer-head .studio-pill {
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: 12.5px; font-weight: 600;
  color: var(--fg-1);
}
.mob-drawer-head .studio-pill .dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--accent);
}
.mob-drawer-head .studio-pill [data-lucide] { width: 14px; height: 14px; margin-left: auto; color: var(--fg-3); }
.mob-account {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.mob-account .avatar {
  width: 36px; height: 36px; border-radius: 9999px;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.mob-account .nm { font-size: 13.5px; font-weight: 700; color: var(--fg-1); }
.mob-account .rl { font-size: 11.5px; color: var(--fg-3); }


/* ---------------------------------------------------------------
   BELL V2 — neutral chrome bell with unread indicator
   --------------------------------------------------------------- */
.bell-v2 {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--border-1);
  background: var(--bg-surface);
  color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.bell-v2:hover { background: var(--bg-subtle); color: var(--fg-1); border-color: var(--border-2); }
.bell-v2 [data-lucide] { width: 18px; height: 18px; stroke-width: 2; }
.bell-v2-dot {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: var(--st-overdue);
  border: 2px solid var(--bg-surface);
}
.bell-v2-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--st-overdue);
  color: #fff;
  font-size: 10.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-surface);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bell-v2--ringing { color: var(--accent); border-color: var(--accent); }
.bell-v2--ringing [data-lucide] { animation: bell-shake 1.2s ease-in-out infinite; transform-origin: top center; }
@keyframes bell-shake {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-8deg); }
  20%, 40% { transform: rotate(8deg); }
  50% { transform: rotate(0); }
}


/* ===============================================================
   JT-STYLE MOBILE HEADER (from app/views/layouts/_header_nav.html.erb)
   Hamburger left · school+studio names center · bell right
   --------------------------------------------------------------- */
.jt-mob-hdr {
  height: 64px;
  display: flex; align-items: center;
  padding: 0 12px;
  gap: 10px;
  background: linear-gradient(135deg, #4a8fc7, #3a7eb6);
  color: #fff;
  flex-shrink: 0;
}
.jt-mob-hdr .jt-mob-burger {
  width: 40px; height: 40px;
  border-radius: 9999px;
  border: 0;
  background: rgba(255,255,255,0.18);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.jt-mob-hdr .jt-mob-burger:hover { background: rgba(255,255,255,0.28); }
.jt-mob-hdr .jt-mob-burger.is-open { background: #fff; color: #3a7eb6; }
.jt-mob-hdr .jt-mob-burger [data-lucide] { width: 18px; height: 18px; stroke-width: 2; }
.jt-mob-center {
  flex: 1; min-width: 0;
  text-align: center;
  display: flex; flex-direction: column; gap: 2px;
}
.jt-mob-center-primary {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.15;
}
.jt-mob-center-secondary {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.15;
}
.jt-mob-hdr .jt-mob-bell {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 9999px;
  border: 0;
  background: rgba(255,255,255,0.18);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.jt-mob-hdr .jt-mob-bell:hover { background: rgba(255,255,255,0.28); }
.jt-mob-hdr .jt-mob-bell [data-lucide] { width: 18px; height: 18px; stroke-width: 2; }
.jt-mob-hdr .jt-mob-bell .notif-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: var(--st-overdue, #E53935);
  color: #fff;
  font-size: 9.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid #4a8fc7;
}

/* ===============================================================
   HAMBURGER DROPDOWN — mobile drawer panel from the repo
   --------------------------------------------------------------- */
.ham-drop {
  position: absolute;
  inset: 0;
  background: var(--bg-surface);
  z-index: 2;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.ham-sect {
  border-bottom: 1px solid var(--border-1);
  padding: 14px 18px;
  background: var(--bg-surface);
}
.ham-sect:last-child { border-bottom: 0; }

/* Display-only school/studio rows for learners */
.ham-display-row {
  display: flex; align-items: center; gap: 12px;
}
.ham-display-ic {
  width: 36px; height: 36px;
  border-radius: 9999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ham-display-ic [data-lucide] { width: 16px; height: 16px; }
.ham-display-ttl {
  font-size: 14px; font-weight: 700; color: var(--fg-1);
}

/* Profile toggle (collapsed) */
.ham-profile-tog {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--fg-1);
}
.ham-profile-l { display: inline-flex; align-items: center; gap: 12px; }
.ham-profile-ic {
  width: 36px; height: 36px;
  border-radius: 9999px;
  background: var(--bg-subtle);
  color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ham-profile-ic [data-lucide] { width: 16px; height: 16px; }
.ham-profile-lbl { font-size: 14px; font-weight: 600; color: var(--fg-1); }
.ham-chev { width: 16px; height: 16px; color: var(--fg-3); }

/* Nav items */
.ham-nav { padding: 14px 14px; }
.ham-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500;
  color: var(--fg-1);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ham-nav-item:hover { background: var(--bg-subtle); }
.ham-nav-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ham-nav-ic {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ham-nav-ic [data-lucide] { width: 14px; height: 14px; }
.ham-nav-item.is-active .ham-nav-ic {
  background: var(--accent);
  color: var(--fg-on-accent);
}


/* ==========================================================================
   LAUNCH LIBRARY (LL) — section 39
   Mirrors app/views/libraries/launches/ — the real Launch Library shapes:
   header chrome, _launch_item_local, _launch_item_global, schedule modal,
   sharing leaderboard.
   ========================================================================== */
.ll-page {
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  gap: 14px;
}
.ll-header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.ll-header-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ll-title { font-size: 18px; font-weight: 700; color: var(--fg-1); margin: 0; }
.ll-header-actions { display: flex; align-items: center; gap: 10px; }

/* Toggle group (Local/Global, Active/Archived) — matches modern-toggle-group */
.modern-toggle-group {
  display: inline-flex;
  background: var(--bg-app);
  border: 1px solid var(--border-1);
  border-radius: 9999px;
  padding: 3px;
}
.modern-toggle-btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 9999px;
  font-size: 12.5px; font-weight: 600;
  color: var(--fg-3);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.modern-toggle-btn:hover { color: var(--fg-1); }
.modern-toggle-btn-active {
  background: var(--bg-surface);
  color: var(--fg-1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.ll-add-btn {
  width: 36px; height: 36px;
  border-radius: 9999px;
  background: var(--accent);
  color: #fff;
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease;
}
.ll-add-btn:hover { background: color-mix(in srgb, var(--accent) 85%, black); }
.ll-add-btn [data-lucide] { width: 16px; height: 16px; }

/* Filters bar */
.ll-filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border-1);
}
.ll-search {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 240px; min-width: 200px;
  padding: 8px 14px;
  background: var(--bg-app);
  border: 1px solid var(--border-1);
  border-radius: 9999px;
}
.ll-search [data-lucide] { width: 14px; height: 14px; color: var(--fg-3); flex-shrink: 0; }
.ll-search-input {
  flex: 1; min-width: 0;
  border: none; background: transparent; outline: none;
  font-size: 13px; color: var(--fg-1);
}
.ll-my-launches {
  padding: 7px 14px;
  background: var(--bg-app);
  border: 1px solid var(--border-1);
  border-radius: 9999px;
  font-size: 12.5px; font-weight: 600; color: var(--fg-2);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ll-my-launches:hover { color: var(--fg-1); }
.ll-my-launches.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.ll-filter-select {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--bg-app);
  border: 1px solid var(--border-1);
  border-radius: 9999px;
  font-size: 12.5px; font-weight: 600; color: var(--fg-2);
  cursor: pointer;
}
.ll-filter-select [data-lucide] { width: 12px; height: 12px; }
.ll-sort {
  padding: 7px 12px;
  background: var(--bg-app);
  border: 1px solid var(--border-1);
  border-radius: 9999px;
  font-size: 12.5px; font-weight: 600; color: var(--fg-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.ll-sort-arrow { color: var(--fg-3); }

/* List + items */
.ll-list { display: flex; flex-direction: column; gap: 12px; }
.ll-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  cursor: pointer;
}
.ll-item:hover {
  border-color: var(--border-2);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ll-item-row-first {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}
.ll-cat { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ll-title-section { min-width: 0; }
.ll-item-title {
  font-size: 15px; font-weight: 700; color: var(--fg-1);
  margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.ll-shareability {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--accent);
}
.ll-shareability [data-lucide] { width: 14px; height: 14px; }
.ll-right-first {
  display: inline-flex; align-items: center; gap: 8px;
}
.ll-rating-card {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: color-mix(in srgb, #F39C12 12%, var(--bg-surface));
  border: 1px solid color-mix(in srgb, #F39C12 30%, transparent);
  border-radius: 9999px;
  font-size: 12px; font-weight: 700;
  color: #B8731B;
}
.ll-rating-card [data-lucide] { width: 12px; height: 12px; fill: #F39C12; color: #F39C12; }
.ll-peer-pill { font-size: 11.5px; }

/* ICEE + Purpose pills */
.icee-pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 9999px;
}
.icee-intentionality { background: color-mix(in srgb, #2980B9 14%, transparent); color: #1B5E8C; }
.icee-civility       { background: color-mix(in srgb, #16A085 14%, transparent); color: #0E6E5C; }
.icee-energy         { background: color-mix(in srgb, #F39C12 18%, transparent); color: #B8731B; }
.icee-excellence     { background: color-mix(in srgb, #8E44AD 14%, transparent); color: #6B2E87; }

.purpose-pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 9999px;
  border: 1px solid var(--border-1);
  background: var(--bg-app);
  color: var(--fg-2);
}
.purpose-inspire { color: #B8731B; border-color: color-mix(in srgb, #F39C12 30%, transparent); background: color-mix(in srgb, #F39C12 6%, var(--bg-surface)); }
.purpose-equip   { color: #1B5E8C; border-color: color-mix(in srgb, #2980B9 30%, transparent); background: color-mix(in srgb, #2980B9 6%, var(--bg-surface)); }
.purpose-connect { color: #6B2E87; border-color: color-mix(in srgb, #8E44AD 30%, transparent); background: color-mix(in srgb, #8E44AD 6%, var(--bg-surface)); }

.draft-pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 9999px;
  background: var(--bg-offset);
  color: var(--fg-3);
  border: 1px dashed var(--border-2);
}
.adoption-pill {
  font-size: 11px; font-weight: 700;
  padding: 3px 9px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Second row */
.ll-item-row-second {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px dashed var(--border-1);
}
.ll-actions { display: inline-flex; gap: 4px; align-items: center; }
.action-icon {
  width: 30px; height: 30px;
  border-radius: 9999px;
  border: 1px solid var(--border-1);
  background: var(--bg-surface);
  color: var(--fg-2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.action-icon [data-lucide] { width: 14px; height: 14px; }
.action-icon:hover { background: var(--bg-subtle); color: var(--fg-1); border-color: var(--border-2); }
.action-icon.is-scheduled {
  background: color-mix(in srgb, #16A085 14%, transparent);
  color: #0E6E5C;
  border-color: color-mix(in srgb, #16A085 30%, transparent);
}
.action-icon.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.action-icon.danger:hover {
  color: #C0392B;
  border-color: color-mix(in srgb, #C0392B 40%, transparent);
  background: color-mix(in srgb, #C0392B 8%, transparent);
}
.ll-row-second-content {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.ll-scheduled-meta { flex-shrink: 0; }
.ll-scheduled-text {
  font-size: 12px; font-weight: 600; color: var(--fg-2);
}
.ll-scheduled-text.text-muted { color: var(--fg-3); font-style: italic; }
.ll-adopted-flag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700;
  color: #0E6E5C;
}
.ll-adopted-flag [data-lucide] { width: 14px; height: 14px; }
.ll-meta-spacer { flex: 1; }
.ll-contributor {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.ll-contributor-text {
  font-size: 12px; color: var(--fg-3);
}
.ll-contributor-role { color: var(--fg-3); font-style: italic; }
.ll-contributor-avatar {
  width: 24px; height: 24px;
  border-radius: 9999px;
  background: var(--accent);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .ll-item-row-first { grid-template-columns: 1fr; }
  .ll-item-row-second { grid-template-columns: 1fr; }
  .ll-row-second-content { flex-wrap: wrap; }
}

/* Schedule modal */
.ll-modal {
  width: 460px; max-width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  overflow: hidden;
}
.ll-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-1);
}
.ll-modal-title { font-size: 15px; font-weight: 700; color: var(--fg-1); margin: 0; }
.ll-modal-close {
  width: 28px; height: 28px;
  border-radius: 9999px;
  border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3); cursor: pointer;
}
.ll-modal-close:hover { background: var(--bg-subtle); color: var(--fg-1); }
.ll-modal-close [data-lucide] { width: 14px; height: 14px; }
.ll-modal-body { padding: 18px; }
.ll-modal-row { display: flex; gap: 12px; }
.ll-modal-field { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ll-modal-field--time { flex: 0 0 140px; }
.ll-modal-label { font-size: 11px; font-weight: 700; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.4px; }
.ll-modal-input {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--bg-app);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  font-size: 13px; color: var(--fg-1); font-weight: 600;
}
.ll-modal-input [data-lucide] { width: 14px; height: 14px; color: var(--fg-3); }
.ll-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 12px 18px;
  border-top: 1px solid var(--border-1);
  background: var(--bg-app);
}
.modern-button, .modern-button-border {
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.modern-button {
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent);
}
.modern-button:hover { background: color-mix(in srgb, var(--accent) 85%, black); }
.modern-button-border {
  background: transparent;
  color: var(--fg-1);
  border: 1px solid var(--border-2);
}
.modern-button-border:hover { background: var(--bg-subtle); }

/* Sharing leaderboard */
.ll-leaderboard {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.ll-leaderboard-title {
  font-size: 14px; font-weight: 700; color: var(--fg-1);
  margin: 0 0 14px 0;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.ll-leaderboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ll-lb-cat {
  background: var(--bg-app);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.ll-lb-cat-head { display: flex; flex-direction: column; gap: 2px; }
.ll-lb-cat-title { font-size: 13px; font-weight: 700; color: var(--fg-1); }
.ll-lb-cat-desc { font-size: 11.5px; color: var(--fg-3); }
.ll-lb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-lb-list li {
  display: grid;
  grid-template-columns: 18px 24px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.ll-lb-rank {
  font-weight: 700; color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.ll-lb-av {
  width: 24px; height: 24px;
  border-radius: 9999px;
  background: var(--accent);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.3px;
}
.ll-lb-name { font-weight: 600; color: var(--fg-1); }
.ll-lb-stat {
  font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 4px;
}
.ll-lb-stat [data-lucide] { width: 12px; height: 12px; color: #F39C12; fill: #F39C12; }

@media (max-width: 720px) {
  .ll-leaderboard-grid { grid-template-columns: 1fr; }
}