/* =============================================================================
 * Binder — Design System (source of truth)
 * =============================================================================
 *
 * This comment block is the canonical design doc. If something isn't in here
 * or in the token blocks immediately below, it isn't part of the system.
 *
 * ── Brand ────────────────────────────────────────────────────────────────────
 *   Pastel violet (#706CFC) on a flat bone-white canvas (#f8f7fa). Primary
 *   actions lean dark/pill-shaped while violet anchors selected states; warmth
 *   comes from pastel lesson tiles and friendly surfaces, not sharp orange.
 *   Vivid pastel accents (butter, sky, mint, rose, lilac, coral) carry the dashboard tile system. Brown/mauve heritage
 *   tokens are retired from the canvas; they survive only as palette
 *   anchors (`--brand-brown`, `--brand-mauve`) for the rare component
 *   that needs them. "Pillowy dashboard" shell — full-height workspace
 *   with sidebar + toolbar, friendly rounded cards floating on bone-white.
 *
 * ── Themes ───────────────────────────────────────────────────────────────────
 *   Exactly two: `light` (default, tokens on :root) and `dark` (body gains
 *   class `theme-dark`, tokens override :root). `User.theme` enum accepts
 *   only these two values. No Meadow, Chalk Dust, Midnight Garden, or
 *   "calm-notebook" sage palette — all retired.
 *
 * ── Typography ───────────────────────────────────────────────────────────────
 *   --font-sans    Native system UI stack — body, UI, buttons, labels,
 *                  headings. San Francisco on Apple, Segoe UI on Windows,
 *                  and platform-native fallbacks elsewhere.
 *   --font-display alias of --font-sans. Use it where you want a "page-title
 *                  voice" but expect to differentiate via weight (800/900)
 *                  and tracking (-0.03em+), not via family. Retained as a
 *                  token so existing call sites keep resolving; do not
 *                  reintroduce a serif here without team agreement.
 *   --font-mono    system mono stack — code and numerics only.
 *
 *   Rules:
 *     • Always reference --font-sans (not a literal system stack). Keeps
 *       future font swaps to one line.
 *     • Weights: use 400/500/600/700/800. Weight and scale create "display
 *       feel" without a separate face.
 *     • Tracking scales with size: tighter as type grows. Body: -0.005em.
 *       Display: -0.02em to -0.04em. Uppercase labels widen to +0.06em.
 *
 * ── Color ────────────────────────────────────────────────────────────────────
 *   Surfaces step from --surface (page) through --surface-container* tints
 *   up to --surface-lowest (floating cards). Dark theme inverts the stack.
 *   Accent swatches (--terracotta/--gold/--sky/--rose/--lilac/--mint/--butter)
 *   each ship with a `*-pale` companion for pill/badge backgrounds.
 *   Never hardcode brand hex in component CSS or ERB views — pull from tokens.
 *
 * ── Shape ────────────────────────────────────────────────────────────────────
 *   Radius scale is the only legal source of rounding. No raw px/rem values.
 *     --radius-sm 0.375rem · --radius-md 0.625rem · --radius-lg 0.875rem
 *     --radius-xl 1.25rem  · --radius-2xl 1.5rem  · --radius-3xl 1.75rem
 *     --radius-4xl 2rem    · --radius-full 9999px
 *   Cards default to --radius-3xl/4xl for the soft, "pillowy" surface look.
 *   Buttons and inputs use --radius-lg/xl. Nested components step one level
 *   down the scale from their parent.
 *
 * ── Elevation ────────────────────────────────────────────────────────────────
 *   Neutral-tinted, low-opacity shadows. Cards rest on --shadow-sm and lift
 *   to --shadow-md on hover. Dropdowns/popovers: --shadow-md on a solid
 *   --surface-lowest. Modals: --shadow-xl. Reserve backdrop-filter (glass)
 *   for chrome over content — topnav, jump-to dialog — NOT interior cards.
 *
 * ── Motion ───────────────────────────────────────────────────────────────────
 *   Tokens (defined below): --duration-fast/base/slow and
 *   --ease-standard/emphasized. Use them — do not write raw durations or
 *   rely on the browser default `ease`.
 *
 * ── Utilities ────────────────────────────────────────────────────────────────
 *   Prefer utility classes over inline style="". See the UTILITIES block
 *   below for the full set:
 *     .u-flex, .u-flex-col, .u-flex-1, .u-items-*, .u-justify-*, .u-relative
 *     .u-gap-{1..7}, .u-mt-{1..9}, .u-mb-{1..9}, .u-p-{1..8}
 *     .u-text-{xs..3xl} (size + paired tracking)
 *     .icon-{xs,sm,md,lg,xl,2xl} for inline material-symbols icons
 *   Inline style="" is legitimate only for dynamic values (user's chosen
 *   color from the DB, computed dimensions, etc.). Static spacing, sizing,
 *   colors, and radii should always resolve to a token via a class.
 *
 * ── Language ─────────────────────────────────────────────────────────────────
 *   The surface concept is "records." A record's type is a "template."
 *   Top-level nav: Records. Four tabs: Daily, Plan, Library, Portfolio.
 *   "Schoolwork / Tools" terminology is retired.
 *
 * ── Where things live ────────────────────────────────────────────────────────
 *   app/assets/stylesheets/application.css  Tokens + every component style
 *   app/views/layouts/application.html.erb  Google Fonts import
 *   app/views/layouts/_workspace_sidebar.html.erb + _workspace_toolbar.html.erb
 *   app/models/user.rb                      THEMES enum
 * ========================================================================= */

/* ─── DESIGN TOKENS — LIGHT (default) ─── */
:root {
  /* Surfaces — bone-white canvas (UX-Pilot rebrand). Cool, near-neutral
     ramp; lifts step toward pure white. Warmth comes from the ember
     accents, not from the canvas itself. */
  --surface:               #f8f7fa;
  --surface-container-low: #f1f0f4;
  --surface-container:     #e8e7ed;
  --surface-container-high:#dddce3;
  --surface-lowest:        #ffffff;
  --surface-variant:       #c4c3cc;

  /* Brand — pastel violet + friendly accent anchors */
  --brand-violet:            #706cfc;
  --brand-coral:             #fc7f7f;
  --brand-aqua:              #54dee9;
  --brand-teal:              #72c4cf;
  --brand-ember:             var(--brand-coral);
  --brand-brown:             #402220;
  --brand-mauve:             #bdacba;
  --brand-dust:              #c79b94;

  --primary:               var(--brand-violet);
  --primary-hover:         #5f5aea;
  --primary-dim:           #4f49d1;
  --primary-container:     #ebe9ff;
  --primary-fixed:         #c4bcfc;
  --on-primary:            #ffffff;
  --primary-soft:          rgba(112, 108, 252, 0.11);

  --secondary:             #191b1c;
  --secondary-container:   #ebe9ff;
  --tertiary:              #9b8597;
  --tertiary-container:    #ddd6dc;
  --tertiary-light:        var(--brand-dust);

  /* Accents — secondary UI (badges, hints, decorative borders) */
  --accent-rose-tint:      #dec7c3;
  --accent-mauve-muted:    #c79b94;

  /* On-surface — slate type scale (row 5) */
  --on-surface:            #191b1c;
  --on-surface-mid:        #595f61;
  --on-surface-subtle:     #9ba3a8;

  /* Outline — neutral slate (UX-Pilot rebrand walked back the brown tint
     that fought the bone-white canvas). */
  --outline-variant:       rgba(25, 27, 28, 0.09);
  --outline:               rgba(25, 27, 28, 0.16);

  /* Ambient shadow — neutral slate */
  --shadow:                rgba(25, 27, 28, 0.06);

  /* Data / badge colors — UX-Pilot vivid pastels (each has a saturated
     foreground for icons/text and a pale fill for tiles/chips/cards).
     Pales are intentionally punchy: lesson cards, status chips, and
     dashboard tiles all draw from this set. */
  --terracotta:            #d86c62;
  --terra-pale:            #ffd1c7;
  --gold:                  #d4a21a;
  --gold-pale:             #fde4a9;
  --sky:                   #3f82d8;
  --sky-pale:              #a4c8ff;
  --rose:                  #d65b78;
  --rose-pale:             #ffced8;
  --lilac:                 #706cfc;
  --lilac-pale:            #dedaff;
  --mint:                  #39a77e;
  --mint-pale:             #8eefa4;
  --butter:                #d4a21a;
  --butter-pale:           #ffe89f;
  --sage-pale:             #c5e8b8;

  /* Error */
  --error:                 #c53a3a;
  --error-container:       #fbe3e3;

  /* Focus ring — keyboard accessibility. Glow pattern (box-shadow) works
     inside clipped containers where outline gets cut off; ring pattern
     (outline) is cleaner for standalone buttons/links.
     All focus styling must go through these tokens — no hardcoded rgba. */
  --focus-ring-color:  color-mix(in srgb, var(--primary) 45%, transparent);
  --focus-ring-glow:   color-mix(in srgb, var(--primary) 18%, transparent);
  --focus-ring-border: color-mix(in srgb, var(--primary) 42%, var(--outline));

  /* Child / subject identity colors — user-assigned category hues.
     Distinct from accent swatches (--mint, --sky, etc.), which are tied
     to record templates. Dark-theme values are lifted for contrast on
     dark surfaces — see body.theme-dark override. */
  --child-blue:            #0049e6;
  --child-lavender:        #7c5ce0;
  --child-teal:            #0e7c6b;
  --child-sage:            #2d8a4e;
  --child-coral:           #e05c3c;
  --child-gold:            #c49000;
  --child-sunset:          #d4620a;
  --child-berry:           #9b2d86;
  --child-slate:           #5a6078;

  /* Nature / community module aliases */
  --nc-surface:            var(--surface-lowest);
  --nc-bg:                 var(--surface);
  --nc-border:             var(--outline-variant);
  --nc-surface-hover:      var(--surface-container-low);
  --nc-text:               var(--on-surface);
  --nc-text-secondary:     var(--on-surface-mid);
  --nc-text-muted:         var(--on-surface-subtle);
  --nc-forest:             var(--primary);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;

  /* Type scale — rounded to whole pixels at a 16px root, ~1.125–1.25 ratio */
  --text-xs:     0.75rem;    /* 12 */
  --text-sm:     0.8125rem;  /* 13 */
  --text-base:   0.875rem;   /* 14 — app body default */
  --text-md:     1rem;       /* 16 */
  --text-lg:     1.125rem;   /* 18 */
  --text-xl:     1.375rem;   /* 22 */
  --text-2xl:    1.75rem;    /* 28 */
  --text-3xl:    2.25rem;    /* 36 — page titles */

  /* Tracking curve — tighter as type grows. Use var(--tracking-*) alongside
     font-size on token-carrying classes. Body default: -0.01em (see body rule). */
  --tracking-xs:    0.005em;
  --tracking-sm:    0;
  --tracking-base: -0.005em;
  --tracking-md:   -0.01em;
  --tracking-lg:   -0.015em;
  --tracking-xl:   -0.02em;
  --tracking-2xl:  -0.03em;
  --tracking-3xl:  -0.035em;

  /* Font families — native app stack for crisp rendering across platforms.
     --font-display remains an alias for existing call sites. */
  --font-sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Radius scale — soft, "pillowy" progression. Cards live at 2xl/3xl/4xl. */
  --radius-xs:   0.25rem;   /*  4px */
  --radius-sm:   0.375rem;  /*  6px */
  --radius-md:   0.625rem;  /* 10px — form inputs, small chips */
  --radius-lg:   0.875rem;  /* 14px — buttons, badges */
  --radius-xl:   1.25rem;   /* 20px — pills, large inputs */
  --radius-2xl:  1.5rem;    /* 24px — content tiles, lesson cards */
  --radius-3xl:  1.75rem;   /* 28px — primary cards */
  --radius-4xl:  2rem;      /* 32px — hero / dashboard cards */
  --radius-full: 9999px;

  /* Shadow scale — low, soft, neutral */
  --shadow-sm: 0 1px 1px rgba(25, 27, 28, 0.04);
  --shadow-md: 0 1px 3px rgba(25, 27, 28, 0.08);
  --shadow-lg: 0 4px 14px rgba(25, 27, 28, 0.10);
  --shadow-xl: 0 10px 28px rgba(25, 27, 28, 0.12);

  /* Soft + floating recipes — UX-Pilot style, for the active/featured surfaces.
     `--shadow-soft` rests cards on the canvas with barely-there depth.
     `--shadow-floating` lifts the *one* card you want a user looking at
     (today's active lesson, the in-progress task) above the rest. */
  --shadow-soft:     0 1px 2px rgba(25, 27, 28, 0.05), 0 6px 16px -12px rgba(25, 27, 28, 0.12);
  --shadow-floating: 0 2px 4px rgba(25, 27, 28, 0.08), 0 12px 24px -18px rgba(25, 27, 28, 0.18);

  /* Layered "lifted card" recipes — used by the bubble surfaces.
     Two-stop: close-sharp for definition + far-soft for depth. Neutral
     slate tint to sit cleanly on the bone-white canvas. */
  --shadow-card:       0 1px 2px rgba(25, 27, 28, 0.05), 0 8px 18px rgba(25, 27, 28, 0.06);
  --shadow-card-hover: 0 1px 3px rgba(25, 27, 28, 0.08), 0 12px 24px rgba(25, 27, 28, 0.09);
  --shadow-overlay:    0 3px 10px rgba(25, 27, 28, 0.10), 0 18px 42px rgba(25, 27, 28, 0.14);

  /* Flat bone-white page background — UX-Pilot rebrand. The orange aurora
     wash is retired; warmth comes from the ember primary on cards/CTAs,
     not from the canvas. Keeping the `--page-ambient` token so app/CSS
     that paints `background-image: var(--page-ambient)` still resolves. */
  --page-bg:           #f8f7fa;
  --page-ambient:      none;

  /* Glass surfaces — for temporary overlays only (dropdowns, modals). */
  --glass-bg:          rgba(255, 255, 255, 0.86);
  --glass-blur:        blur(12px) saturate(160%);
  --glass-border:      1px solid rgba(25, 27, 28, 0.10);
  --glass-shadow:      0 8px 24px rgba(25, 27, 28, 0.14), 0 1px 0 rgba(255, 255, 255, 0.72) inset;

  /* Motion — durations tuned for app UI, not marketing pages */
  --duration-fast: 80ms;   /* hovers, small state flips */
  --duration-base: 120ms;  /* most transitions */
  --duration-slow: 180ms;  /* layout shifts, panels opening */

  /* Easing — Material 3 "standard" curve (fast out, slow in).
     Use --ease-emphasized for high-signal moments (modal open, confirm). */
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);    /* entering */
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);  /* leaving */
}

/* Planner reskin scaffold
   Scoped to `.planner-reskin` so the legacy `.gcal-*` rules can be retired
   incrementally after drag/drop and responsive behavior are fully verified.
   Unified with the main design system — uses standard surface colors and
   the primary accent instead of the old warm parchment palette. */
.planner-reskin {
  --planner-ink: var(--on-surface);
  --planner-muted: var(--on-surface-mid);
  --planner-line: var(--outline-variant);
  --planner-surface: var(--surface-lowest);
  --planner-panel: var(--surface-container-low);
  --planner-wash: var(--surface-container);
  --planner-subtle: color-mix(in srgb, var(--surface-container-low) 76%, transparent);
  --planner-control: var(--surface-lowest);
  --planner-control-hover: var(--surface-container-low);
  --planner-cell: color-mix(in srgb, var(--surface-lowest) 82%, var(--surface-container-low));
  --planner-cell-hover: color-mix(in srgb, var(--surface-lowest) 72%, var(--surface-container));
  --planner-accent: var(--primary);
  --planner-accent-strong: var(--primary-hover);
  --planner-gold: var(--primary);
  --planner-rose: var(--primary);
  --planner-shadow: var(--shadow-sm);
  --surface-subtle: var(--planner-subtle);
  --border-subtle: var(--planner-line);
  gap: 0;
  background: var(--surface);
}

.planner-reskin .planner-sidebar {
  background: var(--planner-panel);
  border-right: 1px solid var(--planner-line);
}

.planner-reskin .planner-sidebar-title {
  color: var(--planner-muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.planner-reskin .planner-child-item,
.planner-reskin .planner-subject-item {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
}

.planner-reskin .planner-child-item:hover,
.planner-reskin .planner-subject-item:hover {
  background: var(--planner-control-hover);
  border-color: var(--planner-line);
}

.planner-reskin .planner-main {
  background: transparent;
}

.planner-toolbar {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0.25rem 0 1rem;
  padding: 0;
}

.planner-title {
  color: var(--planner-ink);
  font-size: 1.18rem;
  font-weight: 760;
  letter-spacing: 0;
}

.planner-today-btn,
.planner-nav-arrow,
.planner-action-btn,
.planner-view-btn {
  border-radius: var(--radius-full);
  font-weight: 700;
}

.planner-today-btn,
.planner-nav-arrow,
.planner-action-btn {
  border: 1px solid var(--planner-line);
  background: var(--planner-control);
  color: var(--planner-ink);
}

.planner-today-btn:hover,
.planner-nav-arrow:hover,
.planner-action-btn:hover {
  border-color: rgba(47, 111, 115, 0.35);
  color: var(--planner-accent-strong);
  transform: translateY(-1px);
}

.planner-action-btn--primary {
  background: var(--planner-accent);
  border-color: var(--planner-accent);
  color: #ffffff;
}

.planner-action-btn--primary:hover {
  background: var(--planner-accent-strong);
  border-color: var(--planner-accent-strong);
  color: #ffffff;
}

.planner-view-switcher {
  background: var(--planner-wash);
  border: 1px solid var(--planner-line);
  border-radius: var(--radius-full);
  padding: 0.18rem;
}

.planner-view-btn {
  color: var(--planner-muted);
  border-radius: var(--radius-full);
}

.planner-view-btn--active {
  background: var(--planner-control);
  color: var(--planner-ink);
  box-shadow: 0 1px 3px rgba(54, 42, 26, 0.08);
}

.planner-week,
.planner-month,
.planner-day-view {
  background: var(--planner-surface);
  border: 1px solid var(--planner-line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--planner-shadow);
  margin: 0 1rem 1rem;
  overflow: hidden;
}

.planner-week__head,
.planner-month__head {
  background: var(--planner-subtle);
  border-bottom: 1px solid var(--planner-line);
}

.planner-week__col-head,
.planner-month__day-label,
.planner-day-view__header {
  color: var(--planner-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.planner-week__col-head--today,
.planner-week__col--today,
.planner-month-cell--today {
  background: rgba(47, 111, 115, 0.07);
}

.planner-day-num {
  align-items: center;
  border-radius: 999px;
  color: var(--planner-ink);
  display: inline-flex;
  font-size: 1rem;
  height: 2rem;
  justify-content: center;
  margin-top: 0.15rem;
  width: 2rem;
}

.planner-day-num--today {
  background: transparent;
  color: var(--planner-accent-strong);
  font-weight: 700;
}

.planner-week__body,
.planner-month-grid,
.planner-day-columns {
  background: var(--planner-panel);
}

.planner-week__col,
.planner-month-cell,
.planner-day-column {
  border-color: var(--planner-line);
}

.planner-week-cell,
.planner-day-lessons {
  background: var(--planner-cell);
  border-color: var(--planner-line);
  border-radius: var(--radius-sm);
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.planner-week-cell:hover,
.planner-day-lessons:hover,
.planner-month-cell:hover {
  background: var(--planner-cell-hover);
  box-shadow: inset 0 0 0 1px rgba(47, 111, 115, 0.16);
}

.planner-week-cell__person,
.planner-day-column__head {
  color: var(--planner-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.planner-person-dot {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.planner-lesson-card {
  border: 1px solid rgba(47, 42, 34, 0.08);
  border-left: 4px solid rgba(47, 111, 115, 0.38);
  border-radius: var(--radius-full);
  box-shadow: 0 6px 16px rgba(54, 42, 26, 0.08);
  color: var(--planner-ink);
  gap: 0.25rem;
  padding: 0.48rem 0.55rem;
}

.planner-lesson-card:hover {
  box-shadow: 0 10px 22px rgba(54, 42, 26, 0.13);
  transform: translateY(-1px);
}

.planner-lesson-card--done {
  background: color-mix(in srgb, var(--success, #4f8b5b) 12%, var(--planner-control));
  border-left-color: var(--success, #4f8b5b);
  color: var(--planner-muted);
}

.planner-lesson-card__title {
  font-weight: 750;
  line-height: 1.25;
}

.planner-lesson-card__meta {
  color: var(--planner-muted);
  font-size: 0.72rem;
}

.planner-add-btn,
.planner-month-add {
  border-radius: var(--radius-full);
  color: var(--planner-muted);
  font-weight: 600;
}

/* No more always-visible dashed pill on empty cells.
   The cell-level hover rule below reveals the add button when needed. */
.planner-add-btn--empty {
  border: 0;
  color: var(--planner-muted);
}

.planner-week-cell .planner-add-btn,
.planner-day-lessons .planner-add-btn {
  opacity: 0;
  transition: opacity 0.14s ease, color 0.14s ease;
}

/* Per-child per-day empty state treatment in Week view */
.planner-week-cell__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  min-height: 42px;
  border: 1px dashed var(--planner-line);
  border-radius: 4px;
  background: var(--planner-subtle);
  text-align: center;
}

.planner-week-cell__empty-text {
  font-size: 0.68rem;
  color: var(--on-surface-subtle);
  margin-bottom: 1px;
}

.planner-week-cell__add-link {
  font-size: 0.72rem;
  color: var(--planner-muted);
  text-decoration: none;
  font-weight: 500;
}

.planner-week-cell__add-link:hover {
  color: var(--planner-accent-strong);
  text-decoration: underline;
}

.planner-month-cell__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  min-height: 22px;
  border: 1px dashed var(--planner-line);
  border-radius: 4px;
  background: var(--planner-subtle);
}

.planner-month-cell__empty-text {
  font-size: 0.65rem;
  color: var(--on-surface-subtle);
  text-align: center;
}

/* Consistent empty cell treatment in the classic plan grid */
.plan-grid__cell-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  min-height: 28px;
  border: 1px dashed var(--planner-line);
  border-radius: 4px;
  background: var(--planner-subtle);
  text-align: center;
}

.plan-grid__cell-empty-text {
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
}

/* Child-level "no lessons this month" summary */
.planner-month-child-summaries {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.planner-month-child-empty-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--planner-subtle);
  border: 1px solid var(--planner-line);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--planner-muted);
}

.planner-month-child-empty-action {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--planner-accent-strong);
  text-decoration: none;
}

.planner-month-child-empty-action:hover {
  text-decoration: underline;
}

/* =========================================
   Trust Density: Loading / Saving / Error States
   ========================================= */

.loading-state {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #555;
}

.loading-state--small {
  font-size: 0.85rem;
}

.loading-state--large {
  font-size: 1.1rem;
  gap: 1rem;
}

.loading-state__spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-state--large .loading-state__spinner {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-state__text {
  display: flex;
  flex-direction: column;
}

.loading-state__message {
  font-weight: 500;
}

.loading-state__subtext {
  font-size: 0.8em;
  color: #888;
}

.loading-state--saving .loading-state__spinner {
  border-top-color: #10b981;
}

/* Error State */
.error-state {
  padding: 1rem 1.25rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #7f1d1d;
}

.error-state__icon {
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
}

.error-state__title {
  font-size: 1rem;
  margin: 0 0 0.35rem;
  font-weight: 600;
}

.error-state__message {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.35;
}

.error-state__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.error-state__footnote {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: #854d0e;
}

/* Child-level "no lessons this week" summary */
.planner-week-child-summaries {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.planner-week-child-empty-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--planner-subtle);
  border: 1px solid var(--planner-line);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--planner-muted);
}

.planner-week-child-empty-action {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--planner-accent-strong);
  text-decoration: none;
}

.planner-week-child-empty-action:hover {
  text-decoration: underline;
}

.planner-week-cell:hover .planner-add-btn,
.planner-week-cell:focus-within .planner-add-btn,
.planner-day-lessons:hover .planner-add-btn,
.planner-day-lessons:focus-within .planner-add-btn {
  opacity: 1;
}

.planner-add-btn:hover,
.planner-add-btn:focus-visible {
  color: var(--planner-accent-strong);
}

.planner-month-event {
  border-radius: 6px;
  box-shadow: none;
}

.planner-month-more {
  color: var(--planner-accent-strong);
  font-weight: 750;
}

@media (max-width: 900px) {
  .planner-reskin {
    background: var(--surface);
  }

  .planner-toolbar {
    align-items: stretch;
    flex-direction: column;
    margin: 0.75rem;
  }

  .planner-toolbar__left,
  .planner-toolbar__right {
    flex-wrap: wrap;
    width: 100%;
  }

  .planner-title {
    order: -1;
    width: 100%;
  }

  .planner-week,
  .planner-month,
  .planner-day-view {
    margin: 0 0.75rem 0.75rem;
  }
}

/* ─── DESIGN TOKENS — DARK ─── */
body.theme-dark {
  /* Page canvas = slate ramp darkest; cards ramp lighter (same metaphor as light) */
  --surface:               #191b1c;
  --surface-container-low: #1f2225;
  --surface-container:     #25282c;
  --surface-container-high:#2c3035;
  --surface-lowest:        #32363c;
  --surface-variant:       #7b8285;

  --brand-violet:            #a99cff;
  --brand-coral:             #ff9f9f;
  --brand-aqua:              #77e7ef;
  --brand-teal:              #8fd1da;
  --brand-ember:             var(--brand-coral);
  --brand-brown:             #c27973;
  --brand-mauve:             #bdacba;
  --brand-dust:              #c79b94;

  --primary:               #a99cff;
  --primary-hover:         #c4bcfc;
  --primary-dim:           #8d7dff;
  --primary-container:     #2e2861;
  --primary-fixed:         #dedaff;
  --on-primary:            #16122f;
  --primary-soft:          rgba(169, 156, 255, 0.16);

  --secondary:             #dec7c3;
  --secondary-container:   #402220;
  --tertiary:              #9b8597;
  --tertiary-container:    #2e272d;
  --tertiary-light:        #c79b94;

  --accent-rose-tint:      #84544d;
  --accent-mauve-muted:    #776775;

  --on-surface:            #f8f3f3;
  --on-surface-mid:        #bdacba;
  --on-surface-subtle:     #9ba3a8;

  --outline-variant:       rgba(248, 243, 243, 0.08);
  --outline:               rgba(248, 243, 243, 0.16);
  --shadow:                rgba(0, 0, 0, 0.55);
  --shadow-xl:             0 16px 48px rgba(0, 0, 0, 0.55);

  --terracotta:            #e0785f;
  --terra-pale:            #3a2019;
  --gold:                  #d9b15a;
  --gold-pale:             #3a2e15;
  --sky:                   #76a8e8;
  --sky-pale:              #1a2a40;
  --rose:                  #d96a8c;
  --rose-pale:             #3a1c28;
  --lilac:                 #a990e3;
  --lilac-pale:            #29204a;
  --mint:                  #6fc0a5;
  --mint-pale:             #1a3630;
  --butter:                #e0c25a;
  --butter-pale:           #342b10;
  --sage-pale:             #2e272d;

  --error:                 #eb6d6d;
  --error-container:       #4a1c1c;

  /* Child / subject identity colors — lifted for dark surfaces */
  --child-blue:            #6aa7ff;
  --child-lavender:        #b39cf5;
  --child-teal:            #4dbfa8;
  --child-sage:            #68c282;
  --child-coral:           #ff907a;
  --child-gold:            #e0b73c;
  --child-sunset:          #ec9052;
  --child-berry:           #d072b8;
  --child-slate:           #98a0b8;
}

body.theme-dark {
  color: var(--on-surface);
  color-scheme: dark;
}

body.theme-dark ::selection {
  background: rgba(169, 156, 255, 0.35);
  color: var(--on-surface);
}

/* ─── Launch Screen ───────────────────────────────────────────── */
.app-launch-screen {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: #111315;
  opacity: 1;
  visibility: visible;
  transition: opacity 140ms var(--ease-standard), visibility 140ms var(--ease-standard);
}

body.theme-dark .app-launch-screen {
  background: #111315;
  color: #f8f7fa;
}

.app-launch-screen.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-launch-logo {
  position: relative;
  width: min(54vw, 19rem);
  height: 5rem;
  font-family: var(--font-sans);
  font-size: clamp(3rem, 11vw, 5rem);
  font-weight: 850;
  letter-spacing: -0.055em;
  line-height: 1;
}

.app-launch-word {
  position: absolute;
  left: 0;
  bottom: 0;
}

.app-launch-dot {
  position: absolute;
  left: 95%;
  bottom: 0.14em;
  width: 0.16em;
  height: 0.16em;
  border-radius: var(--radius-full);
  background: var(--primary, #706cfc);
  transform-origin: 50% 50%;
  animation: binder-launch-dot 1500ms cubic-bezier(0.18, 0.82, 0.28, 1) both;
}

@keyframes binder-launch-dot {
  0%   { left: 7%;  bottom: 1.05em; transform: scaleY(0.76) scaleX(1.16); }
  12%  { left: 7%;  bottom: 0.72em; transform: scaleY(1.16) scaleX(0.86); }
  28%  { left: 45%; bottom: 1.18em; transform: scale(1); }
  42%  { left: 45%; bottom: 0.75em; transform: scaleY(1.12) scaleX(0.9); }
  58%  { left: 79%; bottom: 1.02em; transform: scale(1); }
  70%  { left: 79%; bottom: 0.62em; transform: scaleY(1.1) scaleX(0.92); }
  88%  { left: 95%; bottom: 0.42em; transform: scale(1); }
  100% { left: 95%; bottom: 0.14em; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .app-launch-dot {
    animation: none;
  }
}

/* ─── THEME PICKER (settings) — Light / Dark only ─── */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 520px;
}

@media (max-width: 460px) {
  .theme-picker { gap: 0.75rem; }
}

.theme-option {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  cursor: pointer;
  position: relative;
}

.theme-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-preview {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  box-shadow: inset 0 0 0 1.5px var(--outline-variant), var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.theme-option--active .theme-preview,
.theme-radio:checked ~ .theme-preview {
  box-shadow: inset 0 0 0 2.5px var(--primary), var(--shadow-md);
  transform: translateY(-1px);
}

.theme-preview-bar {
  height: 10px;
  border-radius: var(--radius-full);
  width: 55%;
}

.theme-preview-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  justify-content: flex-end;
}

.theme-preview-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.theme-preview-line {
  height: 6px;
  border-radius: var(--radius-full);
  width: 80%;
}

.theme-preview-line--short { width: 55%; }

/* Light preview — bone canvas + pastel violet */
.theme-preview--light {
  background: #f8f3f3;
}
.theme-preview--light .theme-preview-bar  { background: #706cfc; }
.theme-preview--light .theme-preview-dot  { background: #706cfc; }
.theme-preview--light .theme-preview-line { background: #ddd6dc; }

/* Dark preview — #191B1C canvas + soft violet */
.theme-preview--dark {
  background: #191b1c;
}
.theme-preview--dark .theme-preview-bar  { background: #a99cff; }
.theme-preview--dark .theme-preview-dot  { background: #a99cff; }
.theme-preview--dark .theme-preview-line { background: #32363c; }

.theme-name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
  letter-spacing: -0.01em;
}

.theme-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
}


/* ─── RESET ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── SCROLLBARS ───
   Subtle, surface-matching scrollbars that stay out of the way. Placed
   early in the stylesheet so component-specific scrollbar rules
   (`.X::-webkit-scrollbar { display: none }`) override by source order.

   Firefox: scrollbar-width + scrollbar-color (shorthand).
   WebKit/Blink: pseudo-elements below. The transparent border on the
   thumb creates padding around it so the scrollbar reads as a slim
   pill, not a chunky block. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-container-high) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--surface-container-high);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background var(--duration-base) var(--ease-standard);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--surface-variant);
  background-clip: content-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  background-color: var(--page-bg);
  background-image: var(--page-ambient);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  font-variant-ligatures: common-ligatures contextual;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

body.theme-dark {
  background: var(--surface);
}

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

::selection {
  background: rgba(112, 108, 252, 0.18);
  color: var(--on-surface);
}

/* Craft-style display type — reserved for celebratory moments */
h1, .h-display,
.page-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* ─── UTILITY CLASSES ─── */

.hidden {
  display: none !important;
}

/* ─── LAYOUT UTILITIES ───
   Prefer these over inline style="" for anything the design system has a
   token for. Anything that resolves to a --space-* / --text-* / --radius-*
   token should be a utility class, not an inline style. Dynamic values
   pulled from the DB (a user's chosen color, etc.) are the only legitimate
   inline-style use. */

/* Flex layouts */
.u-flex            { display: flex; }
.u-flex-col        { display: flex; flex-direction: column; }
.u-flex-wrap       { flex-wrap: wrap; }
.u-flex-1          { flex: 1; }
.u-items-center    { align-items: center; }
.u-items-start     { align-items: flex-start; }
.u-justify-between { justify-content: space-between; }
.u-justify-center  { justify-content: center; }
.u-relative        { position: relative; }

/* Gaps */
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-5 { gap: var(--space-5); }
.u-gap-6 { gap: var(--space-6); }
.u-gap-7 { gap: var(--space-7); }

/* Margin-top */
.u-mt-1 { margin-top: var(--space-1); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-7 { margin-top: var(--space-7); }
.u-mt-8 { margin-top: var(--space-8); }
.u-mt-9 { margin-top: var(--space-9); }

/* Margin-bottom */
.u-mb-1 { margin-bottom: var(--space-1); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-7 { margin-bottom: var(--space-7); }
.u-mb-8 { margin-bottom: var(--space-8); }
.u-mb-9 { margin-bottom: var(--space-9); }

/* Margin shorthand (all sides) + horizontal auto-center */
.u-m-auto          { margin: auto; }
.u-mx-auto         { margin-left: auto; margin-right: auto; }
.u-ml-auto         { margin-left: auto; }
.u-mr-auto         { margin-right: auto; }

/* Padding shorthand (all sides) */
.u-p-1 { padding: var(--space-1); }
.u-p-2 { padding: var(--space-2); }
.u-p-3 { padding: var(--space-3); }
.u-p-4 { padding: var(--space-4); }
.u-p-5 { padding: var(--space-5); }
.u-p-6 { padding: var(--space-6); }
.u-p-7 { padding: var(--space-7); }
.u-p-8 { padding: var(--space-8); }

/* Icon sizes — apply to .material-symbols-outlined for consistent inline
   icons. Defaults include vertical-align:middle so icons sit with text. */
.icon-xs { font-size: var(--text-xs); vertical-align: middle; }
.icon-sm { font-size: var(--text-sm); vertical-align: middle; }
.icon-md { font-size: var(--text-md); vertical-align: middle; }
.icon-lg { font-size: var(--text-lg); vertical-align: middle; }
.icon-xl { font-size: var(--text-xl); vertical-align: middle; }
.icon-2xl { font-size: var(--text-2xl); vertical-align: middle; }

/* Text sizes — paired with tracking curve so type tightens as it grows */
.u-text-xs   { font-size: var(--text-xs);   letter-spacing: var(--tracking-xs); }
.u-text-sm   { font-size: var(--text-sm);   letter-spacing: var(--tracking-sm); }
.u-text-base { font-size: var(--text-base); letter-spacing: var(--tracking-base); }
.u-text-md   { font-size: var(--text-md);   letter-spacing: var(--tracking-md); }
.u-text-lg   { font-size: var(--text-lg);   letter-spacing: var(--tracking-lg); }
.u-text-xl   { font-size: var(--text-xl);   letter-spacing: var(--tracking-xl); }
.u-text-2xl  { font-size: var(--text-2xl);  letter-spacing: var(--tracking-2xl); }
.u-text-3xl  { font-size: var(--text-3xl);  letter-spacing: var(--tracking-3xl); }

/* Common label pattern */
.u-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

/* Page action button groups */
.page-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

/* Empty state button spacing */
.empty-state .btn,
.empty-state .btn-ghost { margin-top: var(--space-4); }

.empty-state__why,
.empty-state__will-appear {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0.35rem 0;
}

.empty-state__reassurance {
  font-size: 0.85rem;
  color: #777;
  margin-top: 0.75rem;
}

.empty-state a.btn,
.empty-state a.btn:visited,
.empty-state a.btn:hover,
.empty-state a.btn:focus-visible {
  color: var(--on-primary);
  text-decoration: none;
}

/* ─── COLOR CLASSES (child/subject dots) ─── */
.color-blue        { background: var(--child-blue);     color: white; }
.color-lavender    { background: var(--child-lavender); color: white; }
.color-teal        { background: var(--child-teal);     color: white; }
.color-sage        { background: var(--child-sage);     color: white; }
.color-coral       { background: var(--child-coral);    color: white; }
.color-rose        { background: var(--rose);           color: white; }
.color-gold        { background: var(--child-gold);     color: white; }
.color-sunset      { background: var(--child-sunset);   color: white; }
.color-berry       { background: var(--child-berry);    color: white; }
.color-slate       { background: var(--child-slate);    color: white; }
/* legacy */
.color-forest      { background: var(--secondary);      color: white; }
.color-terracotta  { background: var(--terracotta);     color: white; }
.color-sky         { background: var(--sky);            color: white; }

.color-dot-blue       { background: var(--child-blue); }
.color-dot-lavender   { background: var(--child-lavender); }
.color-dot-teal       { background: var(--child-teal); }
.color-dot-sage       { background: var(--child-sage); }
.color-dot-coral      { background: var(--child-coral); }
.color-dot-rose       { background: var(--rose); }
.color-dot-gold       { background: var(--child-gold); }
.color-dot-sunset     { background: var(--child-sunset); }
.color-dot-berry      { background: var(--child-berry); }
.color-dot-slate      { background: var(--child-slate); }
/* legacy */
.color-dot-forest     { background: var(--secondary); }
.color-dot-terracotta { background: var(--terracotta); }
.color-dot-sky        { background: var(--sky); }

.color-fill-forest     { background: var(--secondary); }
.color-fill-terracotta { background: var(--terracotta); }
.color-fill-sky        { background: var(--sky); }
.color-fill-rose       { background: var(--rose); }
.color-fill-gold       { background: var(--gold); }

.color-nc-forest     { color: var(--secondary); }
.color-nc-terracotta { color: var(--terracotta); }
.color-nc-sky        { color: var(--sky); }
.color-nc-rose       { color: var(--rose); }
.color-nc-gold       { color: var(--gold); }

/* ─── MATERIAL SYMBOLS ─── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── APP SHELL (legacy — kept for backward compat) ─── */
.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════
   BASECAMP-STYLE SHELL — top nav, full-width content
   ═══════════════════════════════════════════════════════ */

.bc-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Top Navigation Bar — Craft-style floating pill ── */
.bc-topnav {
  position: sticky;
  top: 1rem;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 1rem 1.25rem 0;
  pointer-events: none;   /* empty sides let page clicks through */
  background: transparent;
}

.bc-topnav-inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-lowest);
  border-radius: var(--radius-full);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 0 0 1px var(--outline-variant),
    0 8px 32px rgba(28, 29, 26, 0.08);
  padding: 0.35rem 0.45rem 0.35rem 1.15rem;
  min-height: 52px;
  max-width: calc(100% - 2rem);
  margin: 0;
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

body.theme-dark .bc-topnav-inner {
  background: var(--surface-lowest);
  box-shadow:
    0 0 0 1px var(--outline-variant),
    0 10px 36px rgba(0, 0, 0, 0.5);
}

.bc-topnav-left,
.bc-topnav-center,
.bc-topnav-right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.bc-topnav-left {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding-right: 0.3rem;
}

.bc-topnav-right {
  gap: 0.3rem;
  margin-left: auto;
}

.bc-logo {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  text-decoration: none;
  flex-shrink: 0;
  padding: 0 0.4rem;
}

.bc-logo-wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  color: var(--primary);
  line-height: 1;
  font-optical-sizing: auto;
}

.bc-logo:hover .bc-logo-wordmark {
  color: var(--primary-hover);
}

/* Legacy: still used in the sidebar + marketing. Kept here so pre-pill
   surfaces (login gate, onboarding) don't break. */
.bc-logo .bc-logo-img {
  display: flex;
  align-items: center;
  color: var(--primary);
}

.bc-logo .bc-logo-img .binder-wordmark,
.bc-logo .bc-logo-img img,
.bc-logo .bc-logo-img svg {
  height: 22px;
  width: auto;
  display: block;
}

/* Dark theme overrides for surrounding components — intentionally keep
   the pill on its own (handled above); these cover dropdowns, cards,
   search input, etc. */
body.theme-dark .bc-user-dropdown,
body.theme-dark .bc-user-dropdown {
  background: var(--surface-container);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--outline-variant);
}

body.theme-dark .hq-card,
body.theme-dark .hq-card {
  background: var(--surface-container-low);
  border-color: var(--outline-variant);
}

body.theme-dark .hq-card-head,
body.theme-dark .hq-card-head {
  background: var(--surface-container);
}

body.theme-dark .hq-link:hover,
body.theme-dark .hq-link:hover {
  background: var(--surface-container);
}

/* ── Nav Items (the 5 top-level items) ── */
.bc-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0 0.35rem;
}

.bc-nav-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--on-surface-mid);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.bc-nav-item .material-symbols-outlined {
  font-size: var(--text-lg);
}

.bc-nav-item:hover {
  color: var(--on-surface);
  background: var(--surface-container-low);
}

.bc-nav-item--active {
  color: var(--on-primary);
  background: var(--primary);
  font-weight: 600;
}

.bc-nav-item--active:hover {
  color: var(--on-primary);
  background: var(--primary-hover);
}

.bc-nav-item--active .material-symbols-outlined {
  color: var(--on-primary);
}

/* ── Quick-add button ── */
.bc-quick-add {
  position: relative;
}

.bc-quick-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 30%, transparent);
}

.bc-quick-add-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent);
}

.bc-quick-add-btn .material-symbols-outlined {
  font-size: var(--text-xl);
  font-variation-settings: 'wght' 600;
}

.bc-quick-add-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 280px;
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  box-shadow: 0 16px 48px rgba(28, 29, 26, 0.14), 0 0 0 1px var(--outline-variant);
  padding: 0.5rem;
  z-index: 300;
  max-height: 28rem;
  overflow-y: auto;
}

.bc-quick-add-header {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  padding: 0.5rem 0.75rem 0.25rem;
}

.bc-quick-add-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--duration-fast) var(--ease-standard);
}

.bc-quick-add-item:hover {
  background: var(--surface-container-low);
}

.bc-quick-add-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  margin-top: 0.35rem;
}

.bc-quick-add-label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.2;
}

.bc-quick-add-desc {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  line-height: 1.3;
  margin-top: 1px;
}

body.theme-dark .bc-quick-add-dropdown,
body.theme-dark .bc-quick-add-dropdown {
  background: var(--surface-container);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--outline-variant);
}

/* ── Right side: week badge, notifications, user ── */
.bc-week-badge {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-subtle);
  padding: 0.2rem 0.55rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-full);
}

.bc-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: none;
  background: none;
  color: var(--on-surface-mid);
  cursor: pointer;
  position: relative;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.bc-icon-btn .material-symbols-outlined {
  font-size: 1.25rem;
}

.bc-icon-btn:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

/* ── Jump to (⌘K) ── */
.jump-to-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(20, 18, 14, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.jump-to-dialog {
  position: fixed;
  inset: 0;
  z-index: 401;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1rem 2rem;
  pointer-events: none;
}

.jump-to-dialog[hidden] {
  display: none;
}

.jump-to-panel {
  pointer-events: auto;
  width: 100%;
  max-width: 32rem;
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--outline-variant);
  overflow: hidden;
}

.jump-to-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--outline-variant);
}

.jump-to-search-icon {
  font-size: var(--text-xl);
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.jump-to-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--on-surface);
  min-width: 0;
}

.jump-to-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
}

.jump-to-kbd {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-family: ui-monospace, monospace;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
  color: var(--on-surface-subtle);
}

.jump-to-list {
  max-height: min(50vh, 22rem);
  overflow-y: auto;
  padding: 0.35rem;
}

.jump-to-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--duration-fast) var(--ease-standard);
}

.jump-to-row:hover {
  background: var(--surface-container-low);
}

.jump-to-row-label {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--on-surface);
}

.jump-to-row-cat {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.jump-to-empty {
  padding: 1.25rem 0.75rem;
  text-align: center;
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  margin: 0;
}

.jump-to-foot {
  margin: 0;
  padding: 0.5rem 0.85rem;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  border-top: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
}

@media (max-width: 640px) {
  .jump-to-dialog {
    align-items: flex-start;
    padding: max(0.75rem, var(--safe-top)) max(0.75rem, var(--safe-right)) max(0.75rem, var(--safe-bottom)) max(0.75rem, var(--safe-left));
  }

  .jump-to-panel {
    max-width: 100%;
    border-radius: var(--radius-2xl);
  }

  .jump-to-head {
    padding: 0.75rem 0.85rem;
  }

  .jump-to-head .jump-to-kbd,
  .jump-to-foot {
    display: none;
  }

  .jump-to-row {
    min-height: var(--mobile-tap-min);
    padding: 0.75rem 0.8rem;
  }

  .jump-to-row-cat {
    max-width: 42%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

body.theme-dark .jump-to-panel,
body.theme-dark .jump-to-panel {
  background: var(--surface-container);
}

/* ── App launcher (grid / “waffle”) ── */
.bc-app-launcher {
  position: relative;
  flex-shrink: 0;
}

.bc-app-launcher-trigger .material-symbols-outlined {
  font-size: var(--text-xl);
}

.bc-app-launcher-trigger {
  width: auto;
  min-width: 2.75rem;
  padding: 0 0.8rem 0 0.75rem;
  gap: 0.45rem;
  border-radius: var(--radius-full);
}

.bc-app-launcher-trigger-label {
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}

.bc-app-launcher-panel {
  position: fixed;
  z-index: 320;
  top: 5.25rem;
  left: max(0.75rem, env(safe-area-inset-left));
  width: min(26.5rem, calc(100vw - 1.5rem));
  max-height: min(32rem, calc(100vh - 6rem));
  display: flex;
  flex-direction: column;
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  box-shadow:
    0 24px 56px rgba(28, 29, 26, 0.16),
    0 0 0 1px var(--outline-variant);
  overflow: hidden;
}

.bc-app-launcher-panel[hidden] {
  display: none !important;
}

.bc-app-launcher-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--outline-variant);
  flex-shrink: 0;
}

.bc-app-launcher-search-icon {
  font-size: var(--text-xl);
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.bc-app-launcher-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--on-surface);
  min-width: 0;
}

.bc-app-launcher-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
}

.bc-app-launcher-helper {
  margin: 0;
  padding: 0.65rem 0.95rem 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--on-surface-subtle);
}

.bc-app-launcher-scroll {
  overflow-y: auto;
  padding: 0.65rem 0.85rem 0.5rem;
  flex: 1;
  min-height: 0;
}

.bc-app-launcher-section {
  margin-bottom: 0.85rem;
}

.bc-app-launcher-section:last-child {
  margin-bottom: 0;
}

.bc-app-launcher-section--empty {
  display: none;
}

.bc-app-launcher-cat {
  margin: 0 0 0.45rem;
  padding: 0 0.15rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.bc-app-launcher-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem 0.5rem;
}

@media (min-width: 400px) {
  .bc-app-launcher-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.bc-app-launcher-tile-cell {
  position: relative;
  min-width: 0;
}

.bc-app-launcher-tile-pin {
  position: absolute;
  top: 0.15rem;
  right: 0.1rem;
  z-index: 2;
}

.bc-app-launcher-fav-form {
  margin: 0;
  display: block;
}

.bc-app-launcher-fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--binder-launcher-panel-bg, var(--surface-lowest));
  color: var(--on-surface-mid);
  box-shadow: 0 0 0 1px var(--outline-variant);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.bc-app-launcher-fav-btn:hover {
  background: var(--surface-container-low);
  color: var(--primary);
}

.bc-app-launcher-fav-btn--on {
  color: var(--primary);
}

.bc-app-launcher-fav-btn .material-symbols-outlined {
  font-size: var(--text-md);
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.bc-app-launcher-fav-btn--on .material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.bc-app-launcher-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.35rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: background var(--duration-fast) var(--ease-standard);
  min-width: 0;
}

.bc-app-launcher-tile:hover {
  background: var(--surface-container-low);
}

.bc-app-launcher-tile--hidden {
  display: none !important;
}

.bc-app-launcher-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.bc-app-launcher-tile-icon .material-symbols-outlined {
  font-size: var(--text-xl);
  font-variation-settings: 'wght' 500;
}

.bc-app-launcher-tile-icon--gold {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--gold);
}

.bc-app-launcher-tile-icon--terracotta {
  background: color-mix(in srgb, var(--terracotta) 16%, transparent);
  color: var(--terracotta);
}

.bc-app-launcher-tile-icon--sky {
  background: color-mix(in srgb, var(--sky) 18%, transparent);
  color: var(--sky);
}

.bc-app-launcher-tile-icon--rose {
  background: color-mix(in srgb, var(--rose) 18%, transparent);
  color: var(--rose);
}

.bc-app-launcher-tile-icon--forest {
  background: color-mix(in srgb, var(--secondary) 16%, transparent);
  color: var(--secondary);
}

.bc-app-launcher-tile-icon--lilac {
  background: color-mix(in srgb, var(--lilac) 16%, transparent);
  color: var(--lilac);
}

.bc-app-launcher-tile-icon--mint {
  background: color-mix(in srgb, var(--mint) 16%, transparent);
  color: var(--mint);
}

.bc-app-launcher-tile-icon--butter {
  background: color-mix(in srgb, var(--butter) 16%, transparent);
  color: var(--butter);
}

.bc-app-launcher-tile-label {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  color: var(--on-surface);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  hyphens: auto;
}

.bc-app-launcher-footer {
  flex-shrink: 0;
  padding: 0.55rem 0.85rem 0.65rem;
  border-top: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
}

.bc-app-launcher-footer-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.4rem;
}

.bc-app-launcher-footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.bc-app-launcher-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-lowest));
}

.bc-app-launcher-footer-link:hover {
  text-decoration: none;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-lowest));
}

.bc-app-launcher-footer-link .material-symbols-outlined {
  font-size: var(--text-lg);
}

body.theme-dark .bc-app-launcher-panel {
  background: var(--surface-container);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.45),
    0 0 0 1px var(--outline-variant);
}

body.theme-dark .bc-app-launcher-footer {
  background: var(--surface-container-low);
}

@media (max-width: 768px) {
  .bc-app-launcher-panel {
    top: 4.75rem;
    width: min(22rem, calc(100vw - 1rem));
    max-height: min(28rem, calc(100vh - 5rem));
  }

  .bc-app-launcher-trigger-label {
    display: none;
  }
}

/* ── Avatar / User Menu ── */
.bc-user-menu {
  position: relative;
}

.bc-avatar-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.bc-avatar-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--primary) 30%, transparent);
}

.bc-avatar-letter {
  line-height: 1;
}

.bc-user-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 240px;
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  padding: 0.5rem;
  z-index: 300;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.bc-user-dropdown--wide {
  width: min(300px, calc(100vw - 1.5rem));
}

.bc-user-dropdown-header {
  padding: 0.75rem 0.75rem 0.5rem;
  border-bottom: 1px solid var(--outline-variant);
  margin-bottom: 0.25rem;
}

.bc-user-dropdown-name {
  display: block;
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--on-surface);
}

.bc-user-dropdown-email {
  display: block;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  margin-top: 0.1rem;
}

.bc-user-dropdown-section {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  padding: 0.5rem 0.75rem 0.15rem;
}

.bc-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--on-surface);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background var(--duration-fast) var(--ease-standard);
}

.bc-user-dropdown-item:hover {
  background: var(--surface-container-low);
}

.bc-user-dropdown-item .material-symbols-outlined {
  font-size: var(--text-lg);
  color: var(--on-surface-subtle);
}

.bc-user-dropdown-item--danger {
  color: var(--error);
}

.bc-user-dropdown-item--danger .material-symbols-outlined {
  color: var(--error);
}

.bc-user-dropdown-divider {
  height: 1px;
  background: var(--outline-variant);
  margin: 0.25rem 0;
}

.bc-user-dropdown-student {
  margin-bottom: 0.15rem;
}

.bc-user-dropdown-item--child {
  font-weight: 650;
  padding-top: 0.45rem;
  padding-bottom: 0.2rem;
}

.bc-user-dropdown-item--nest {
  padding-top: 0.25rem;
  padding-bottom: 0.45rem;
  padding-left: 2.25rem;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

.bc-user-dropdown-item--nest .material-symbols-outlined {
  font-size: var(--text-md);
  opacity: 0.85;
}

/* ── Main Content Area ── */
.bc-main {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 2rem 3rem;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
  .bc-topnav {
    padding: 0.6rem 0.75rem 0;
    top: 0.6rem;
  }

  .bc-topnav-inner {
    padding: 0.3rem 0.4rem 0.3rem 0.85rem;
    min-height: 48px;
    gap: 0.35rem;
    max-width: calc(100% - 0.5rem);
  }

  .bc-logo {
    padding: 0 0.25rem;
  }

  .bc-logo-wordmark {
    font-size: var(--text-lg);
  }

  .bc-logo .bc-logo-img .binder-wordmark,
  .bc-logo .bc-logo-img img,
  .bc-logo .bc-logo-img svg {
    height: 20px;
  }

  .bc-nav {
    padding: 0 0.15rem;
    gap: 0.1rem;
  }

  .bc-nav-item span:not(.material-symbols-outlined) {
    display: none;
  }

  .bc-nav-item {
    padding: 0.4rem 0.5rem;
  }

  .bc-nav-item .material-symbols-outlined {
    font-size: var(--text-xl);
  }

  .bc-week-badge {
    display: none;
  }

  .bc-main {
    padding: 1rem 1rem 2rem;
  }
}

@media (max-width: 480px) {
  .bc-nav-item {
    padding: 0.35rem 0.45rem;
  }

  .bc-nav {
    gap: 0.1rem;
  }
}

/* ═══ UI Lab Shell — sidebar + waffle launcher ═══ */

body[class*="nav-ui-"] {
  --binder-sidebar-width: 248px;
  --app-page-gutter: clamp(1rem, 2vw, 2rem);
  --app-page-top-space: 1.25rem;
  --app-page-bottom-space: 3rem;
  --app-page-section-gap: 1.5rem;
  --app-page-max-width: none;
  --app-page-wide-max-width: none;
  --binder-sidebar-radius: 8px;
  --binder-sidebar-bg: var(--surface-container-low);
  --binder-sidebar-border: var(--outline);
  --binder-sidebar-shadow: none;
  --binder-sidebar-overlay: none;
  --binder-spotlight-bg: var(--surface-lowest);
  --binder-spotlight-border: var(--surface-container-high);
  --binder-spotlight-text: var(--on-surface);
  --binder-spotlight-muted: var(--on-surface-mid);
  --binder-spotlight-shadow: 0 1px 1px rgba(25, 27, 28, 0.05);
  --binder-card-bg: var(--surface-lowest);
  --binder-card-border: var(--outline);
  --binder-nav-bg: transparent;
  --binder-nav-border: transparent;
  --binder-nav-hover: color-mix(in srgb, var(--primary) 7%, transparent);
  --binder-nav-active-bg: color-mix(in srgb, var(--primary) 9%, transparent);
  --binder-nav-active-text: var(--primary);
  --binder-nav-active-icon: var(--primary);
  --binder-chip-bg: var(--surface-container-low);
  --binder-chip-border: var(--surface-container-high);
  --binder-chip-text: var(--on-surface);
  --binder-toolbar-bg: var(--surface-lowest);
  --binder-toolbar-border: var(--outline);
  --binder-toolbar-shadow: 0 1px 1px rgba(25, 27, 28, 0.04);
  --binder-icon-bg: var(--surface-lowest);
  --binder-icon-border: var(--outline);
  --binder-lab-bg: var(--surface-container-low);
  --binder-lab-border: var(--surface-container-high);
  --binder-launcher-trigger-bg: var(--surface-lowest);
  --binder-launcher-trigger-border: var(--outline);
  --binder-launcher-trigger-text: var(--on-surface);
  --binder-launcher-panel-bg: var(--surface-lowest);
  --binder-launcher-panel-border: var(--outline);
  --binder-launcher-panel-shadow: 0 8px 24px rgba(25, 27, 28, 0.12), 0 0 0 1px var(--outline-variant);
  --binder-ambient-a: transparent;
  --binder-ambient-b: transparent;
  background-color: var(--surface);
  background-image: none;
}

/* Default pastel accents; lab variants only nudge data colors + ambient wash */
body.nav-ui-mint {
  --terracotta: #d86c62;
  --terra-pale: #ffd1c7;
  --gold: #b17369;
  --gold-pale: #f8f3f3;
  --sky: #776775;
  --sky-pale: #ddd6dc;
  --rose: #b17369;
  --rose-pale: #f8f3f3;
  --lilac: #9b8597;
  --lilac-pale: #ddd6dc;
  --mint: #84544d;
  --mint-pale: #dec7c3;
  --butter: #c79b94;
  --butter-pale: #f8f3f3;
}

body.nav-ui-prism {
  --sky: #4f7bff;
  --sky-pale: #e3edfa;
  --lilac: #805cff;
  --lilac-pale: #ebe6fa;
  --binder-ambient-a: rgba(79, 123, 255, 0.07);
  --binder-ambient-b: rgba(128, 92, 255, 0.08);
}

body.nav-ui-orchard {
  --mint: #6e3e3b;
  --mint-pale: #ead6d4;
  --gold: #c27973;
  --gold-pale: #f8f3f3;
  --binder-ambient-a: rgba(112, 108, 252, 0.05);
  --binder-ambient-b: rgba(199, 155, 148, 0.1);
}

body.nav-ui-lagoon {
  --sky: #2f6ec2;
  --sky-pale: #e3edfa;
  --mint: #2f9276;
  --mint-pale: #dcf0e9;
  --binder-sidebar-width: 272px;
  --binder-ambient-a: rgba(47, 110, 194, 0.06);
  --binder-ambient-b: rgba(47, 146, 118, 0.07);
}

body.nav-ui-afterglow {
  --rose: #b17369;
  --rose-pale: #f8f3f3;
  --lilac: #9b8597;
  --lilac-pale: #ddd6dc;
  --binder-sidebar-width: 280px;
  --binder-ambient-a: rgba(199, 155, 148, 0.1);
  --binder-ambient-b: rgba(112, 108, 252, 0.05);
}

body.theme-dark[class*="nav-ui-"] {
  /* Lab variants above (nav-ui-mint / -prism / -orchard / -lagoon / -afterglow)
     override the accent palette with light-mode-only colors. Re-restore the
     dark accent palette here so dark mode stays consistent across all flavors. */
  --terracotta: #e0785f;
  --terra-pale: #3a2019;
  --gold: #d9b15a;
  --gold-pale: #3a2e15;
  --sky: #76a8e8;
  --sky-pale: #1a2a40;
  --rose: #d96a8c;
  --rose-pale: #3a1c28;
  --lilac: #a990e3;
  --lilac-pale: #29204a;
  --mint: #6fc0a5;
  --mint-pale: #1a3630;
  --butter: #e0c25a;
  --butter-pale: #342b10;

  --binder-sidebar-bg: var(--surface-container-low);
  --binder-sidebar-border: var(--outline-variant);
  --binder-sidebar-shadow: none;
  --binder-spotlight-bg: var(--surface);
  --binder-spotlight-border: var(--outline-variant);
  --binder-spotlight-text: var(--on-surface);
  --binder-spotlight-muted: var(--on-surface-mid);
  --binder-card-bg: var(--surface-container);
  --binder-card-border: var(--outline-variant);
  --binder-nav-bg: transparent;
  --binder-nav-border: transparent;
  --binder-nav-hover: color-mix(in srgb, var(--primary) 11%, transparent);
  --binder-nav-active-bg: color-mix(in srgb, var(--primary) 13%, transparent);
  --binder-nav-active-text: var(--primary);
  --binder-nav-active-icon: var(--primary);
  --binder-toolbar-bg: var(--surface-container-low);
  --binder-toolbar-border: var(--outline-variant);
  --binder-toolbar-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  --binder-icon-bg: var(--surface-container);
  --binder-icon-border: var(--outline);
  --binder-chip-bg: var(--surface-container-high);
  --binder-chip-border: var(--outline-variant);
  --binder-chip-text: var(--on-surface);
  --binder-lab-bg: var(--surface-container);
  --binder-lab-border: var(--outline-variant);
  --binder-launcher-trigger-bg: var(--surface-container);
  --binder-launcher-trigger-border: var(--outline);
  --binder-launcher-trigger-text: var(--on-surface);
  --binder-launcher-panel-bg: var(--surface-container-high);
  --binder-launcher-panel-border: var(--outline);
  --binder-launcher-panel-shadow: 0 8px 24px rgba(0, 0, 0, 0.30), 0 0 0 1px var(--outline-variant);
  background-image: none;
}

body.theme-dark[class*="nav-ui-"] .binder-sidebar__quick-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--on-surface-mid);
}

body.theme-dark[class*="nav-ui-"] .binder-sidebar__quick-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-surface);
}

body.theme-dark[class*="nav-ui-"] .binder-sidebar .sidebar-nav-item--active:hover {
  background: rgba(255, 152, 125, 0.12);
}

body.theme-dark[class*="nav-ui-"] .binder-sidebar__lab {
  background: rgba(255, 255, 255, 0.03);
}

/* Dark theme: sidebar wordmark follows body.theme-dark, including live theme preview. */
body.theme-dark[class*="nav-ui-"] .binder-sidebar__logo-img {
  color: var(--on-surface);
}

.binder-workspace {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  min-height: 100vh;
  padding: 1rem;
}

.binder-stage {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.binder-stage .bc-main {
  margin-inline: auto;
  max-width: min(1180px, 100%);
  width: 100%;
  padding-top: 0.65rem;
}

.binder-sidebar.sidebar-shell {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: var(--binder-sidebar-width);
  min-width: var(--binder-sidebar-width);
  height: calc(100vh - 2rem);
  padding: 0.65rem 0.55rem;
  border-radius: var(--binder-sidebar-radius);
  border: 1px solid var(--binder-sidebar-border);
  background: var(--binder-sidebar-bg);
  box-shadow: var(--binder-sidebar-shadow);
  /* overflow visible so the app launcher panel is not clipped */
  overflow: visible;
}

.binder-sidebar__chrome {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--binder-sidebar-overlay);
  pointer-events: none;
}

.binder-sidebar__scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.binder-sidebar__brand {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.binder-sidebar__brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.binder-sidebar__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  min-width: 0;
}

.binder-sidebar__logo-img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
  /* Subtle scale on hover — keeps the gesture playful without
     shifting layout (transform doesn't reflow surrounding text). */
  transition: transform var(--duration-base) var(--ease-standard);
  transform-origin: center;
  will-change: transform;
}

.binder-sidebar__logo-mark {
  display: block;
}

.binder-sidebar__logo-mark--light {
  display: none;
}

body.theme-dark .binder-sidebar__logo-mark--default,
body.theme-dark[class*="nav-ui-"] .binder-sidebar__logo-mark--default {
  display: none;
}

body.theme-dark .binder-sidebar__logo-mark--light,
body.theme-dark[class*="nav-ui-"] .binder-sidebar__logo-mark--light {
  display: block;
}

.binder-sidebar__logo:hover .binder-sidebar__logo-img,
.binder-sidebar__logo:focus-visible .binder-sidebar__logo-img {
  transform: scale(1.08);
}

.binder-sidebar__logo:active .binder-sidebar__logo-img {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .binder-sidebar__logo-img,
  .binder-sidebar__logo:hover .binder-sidebar__logo-img,
  .binder-sidebar__logo:focus-visible .binder-sidebar__logo-img,
  .binder-sidebar__logo:active .binder-sidebar__logo-img {
    transform: none;
    transition: none;
  }
}

.binder-sidebar__logo-img .binder-wordmark,
.binder-sidebar__logo-mark .binder-wordmark,
.binder-sidebar__logo-img img,
.binder-sidebar__logo-img svg {
  width: auto;
  height: 2.55rem;
  display: block;
  image-rendering: auto;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.binder-sidebar__term-line {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--on-surface-subtle);
  letter-spacing: 0.01em;
}

.binder-sidebar__quick-row {
  display: flex;
  gap: 0.35rem;
}

.binder-sidebar__quick-new {
  position: relative;
  flex: 1;
  min-width: 0;
}

.binder-sidebar__quick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.binder-sidebar__quick-btn .material-symbols-outlined {
  font-size: var(--text-md);
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
}

.binder-sidebar__quick-btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.binder-sidebar__quick-btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.binder-sidebar__quick-btn--ghost {
  flex: 1;
  min-width: 0;
  background: #ffffff;
  color: var(--on-surface-mid);
  border-color: var(--binder-sidebar-border);
}

.binder-sidebar__quick-btn--ghost:hover {
  background: var(--surface-lowest);
  color: var(--on-surface);
  border-color: #d0d4d8;
}

.binder-sidebar__quick-btn--record {
  flex: 1;
  min-width: 0;
}

.binder-sidebar__quick-new {
  flex: 1;
  min-width: 0;
}

.binder-sidebar__quick-btn--menu {
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
}

.binder-sidebar__create-menu.sidebar-new-entry-menu {
  left: 0;
  right: auto;
  top: calc(100% + 0.35rem);
  bottom: auto;
  width: min(18.5rem, calc(100vw - 2.5rem));
}

.binder-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  overflow: visible;
}

.binder-sidebar__nav > .binder-sidebar__section-label:first-of-type {
  margin-top: 0.15rem;
}

.binder-sidebar__section-label {
  padding: 0 0.45rem;
  margin: 1rem 0 0.3rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.binder-sidebar .sidebar-nav-item {
  opacity: 1;
  margin: 0;
}

.binder-sidebar .sidebar-nav-item--active {
  background: var(--binder-nav-active-bg);
  color: var(--binder-nav-active-text);
  box-shadow: none;
}

.binder-sidebar .sidebar-nav-item--active:hover {
  background: rgba(112, 108, 252, 0.06);
  color: var(--binder-nav-active-text);
}

.binder-sidebar__nav-item.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.4rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--binder-nav-border);
  background: var(--binder-nav-bg);
  color: var(--on-surface);
  opacity: 1;
  box-shadow: none;
  text-decoration: none;
}

.binder-sidebar__nav-item.sidebar-nav-item:hover {
  background: var(--binder-nav-hover);
  transform: none;
}

.binder-sidebar__nav-item--active.sidebar-nav-item--active {
  background: var(--binder-nav-active-bg);
  color: var(--binder-nav-active-text);
  border-color: transparent;
  box-shadow: none;
}

.binder-sidebar__nav-item--active .binder-sidebar__nav-label {
  color: var(--binder-nav-active-text);
}

.binder-sidebar__nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0;
  flex-shrink: 0;
  background: transparent;
  color: var(--on-surface-mid);
}

.binder-sidebar__nav-item--active .binder-sidebar__nav-icon {
  background: transparent;
  color: var(--binder-nav-active-icon);
}

.binder-sidebar__nav-icon .material-symbols-outlined {
  font-size: var(--text-lg);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  color: inherit;
}

.binder-sidebar__nav-emoji {
  display: grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  font-size: 1rem;
  line-height: 1;
}

.binder-sidebar__nav-item--active .binder-sidebar__nav-icon .material-symbols-outlined {
  color: var(--binder-nav-active-icon);
}

.binder-sidebar__nav-item.sidebar-nav-item .material-symbols-outlined {
  color: inherit;
}

.binder-sidebar__nav-item.sidebar-nav-item:not(.binder-sidebar__nav-item--active) .binder-sidebar__nav-icon .material-symbols-outlined {
  color: var(--on-surface-mid);
}

.binder-sidebar__nav-disclosure {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.binder-sidebar__nav-disclosure-summary {
  cursor: pointer;
  list-style: none;
}

.binder-sidebar__nav-disclosure-summary::-webkit-details-marker {
  display: none;
}

.binder-sidebar__nav-chevron {
  margin-left: auto;
  font-size: 1.1rem;
  color: var(--on-surface-subtle);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.binder-sidebar__nav-disclosure[open] .binder-sidebar__nav-chevron {
  transform: rotate(180deg);
}

.binder-sidebar__nav-disclosure:not([open]) .binder-sidebar__subnav {
  display: none;
}

.binder-sidebar__nav-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0;
}

.binder-sidebar__nav-label {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.25;
  color: inherit;
}

.binder-sidebar__nav-item--active .binder-sidebar__nav-label {
  font-weight: 600;
}

.binder-sidebar__nav-note {
  display: none;
}

.binder-sidebar__nav-item--utility {
  align-items: center;
}

.binder-sidebar__nav-item--utility .binder-sidebar__nav-label {
  font-size: var(--text-base);
}

.binder-sidebar__students.sidebar-children {
  padding: 0;
  margin-top: 0.25rem;
}

.binder-sidebar__students {
  padding: 0.15rem 0;
}

.binder-sidebar__student-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.binder-sidebar__student-chip.sidebar-child-avatar {
  gap: 0.45rem;
  min-width: 0;
  padding: 0.4rem 0.45rem 0.4rem 0.4rem;
  border: 1px solid var(--binder-card-border);
  background: var(--binder-card-bg);
}

.binder-sidebar__student-name {
  font-size: var(--text-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.binder-sidebar__subnav {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.binder-sidebar__nav-item--sub.sidebar-nav-item {
  margin-top: 0;
}

.binder-sidebar__shortcuts {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--binder-sidebar-border);
}

.binder-sidebar__storage {
  display: block;
  margin: 0.85rem 0 0.25rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--binder-card-bg);
  border: 1px solid var(--binder-card-border);
  text-decoration: none;
  color: inherit;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.binder-sidebar__storage:hover {
  background: var(--surface-container-low, var(--binder-card-bg));
  border-color: var(--outline, var(--binder-card-border));
}

.binder-sidebar__storage-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: var(--text-xs);
}

.binder-sidebar__storage-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
}

.binder-sidebar__storage-used {
  font-variant-numeric: tabular-nums;
  color: var(--on-surface);
}

.binder-sidebar__storage-limit {
  color: var(--on-surface-subtle);
  font-weight: 500;
}

.binder-sidebar__storage-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--surface-container, rgba(0, 0, 0, 0.08));
  overflow: hidden;
}

.binder-sidebar__storage-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
  transition: width var(--duration-base) var(--ease-standard);
}

.binder-sidebar__storage-fill--warn {
  background: #dc2626;
}

.binder-sidebar__shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.binder-sidebar__shortcut-row {
  display: flex;
  align-items: stretch;
  gap: 0.2rem;
  min-width: 0;
}

.binder-sidebar__shortcut-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--binder-nav-border);
  background: var(--binder-nav-bg);
  text-decoration: none;
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  transition: background var(--duration-fast) var(--ease-standard);
}

.binder-sidebar__shortcut-link:hover {
  background: var(--binder-nav-hover);
}

.binder-sidebar__shortcut-link--active {
  border-color: transparent;
  background: rgba(112, 108, 252, 0.06);
  color: var(--binder-nav-active-text);
  font-weight: 600;
}

.binder-sidebar__shortcut-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--on-surface-mid);
}

.binder-sidebar__shortcut-link--active .binder-sidebar__shortcut-icon {
  color: var(--binder-nav-active-icon);
}

.binder-sidebar__shortcut-icon .material-symbols-outlined {
  font-size: var(--text-md);
}

.binder-sidebar__shortcut-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.binder-sidebar__shortcut-unpin-form {
  margin: 0;
  flex-shrink: 0;
  display: flex;
}

.binder-sidebar__shortcut-unpin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  padding: 0;
  border: 1px solid var(--binder-sidebar-border);
  border-radius: var(--radius-sm);
  background: var(--binder-card-bg);
  color: var(--on-surface-subtle);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.binder-sidebar__shortcut-unpin:hover {
  background: var(--binder-nav-hover);
  color: var(--on-surface);
}

.binder-sidebar__shortcut-unpin .material-symbols-outlined {
  font-size: var(--text-md);
}

.binder-sidebar__lab {
  margin-top: auto;
  padding: 0.65rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--binder-lab-border);
  background: var(--binder-lab-bg);
}

.binder-sidebar__lab-head {
  margin-bottom: 0.7rem;
}

.binder-sidebar__lab-copy {
  margin: 0.25rem 0 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--on-surface-mid);
}

.binder-sidebar__lab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.binder-sidebar__lab-chip {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.5rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--binder-card-border);
  background: var(--binder-card-bg);
  color: inherit;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.binder-sidebar__lab-chip:hover {
  transform: none;
  background: var(--surface-container-low);
}

.binder-sidebar__lab-chip--active {
  border-color: color-mix(in srgb, var(--primary) 36%, rgba(255, 255, 255, 0.26));
  background: color-mix(in srgb, var(--primary) 14%, rgba(255, 255, 255, 0.76));
}

body.theme-dark .binder-sidebar__lab-chip--active {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--outline));
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-container-high));
}

.binder-sidebar__lab-name {
  font-size: var(--text-sm);
  font-weight: 700;
}

.binder-sidebar__lab-desc {
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--on-surface-mid);
}

/* Slim workspace chrome: icons upper-right; no spotlight card */
.binder-toolbar {
  position: sticky;
  top: 1rem;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.2rem 0;
  margin-bottom: 0.35rem;
  border: none;
  background: transparent;
  box-shadow: none;
}

.binder-toolbar__start {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.binder-toolbar__menu-btn {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  border: 1px solid var(--binder-icon-border);
  background: var(--binder-icon-bg);
  box-shadow: var(--binder-toolbar-shadow);
}

.binder-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.binder-toolbar__search {
  flex: 0 1 24rem;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem 0.4rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--binder-icon-border, var(--outline-variant));
  background: var(--binder-icon-bg, var(--surface-container-low));
  box-shadow: var(--binder-toolbar-shadow);
  color: var(--on-surface-subtle);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-base);
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.binder-toolbar__search:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.binder-toolbar__search:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.binder-toolbar__search-icon {
  font-size: var(--text-lg);
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.binder-toolbar__search-placeholder {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.binder-toolbar__search-kbd {
  display: inline-flex;
  gap: 0.2rem;
  flex-shrink: 0;
}

.binder-toolbar__search-kbd kbd {
  font-family: ui-monospace, monospace;
  font-size: var(--text-xs);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  color: var(--on-surface-subtle);
}

@media (max-width: 720px) {
  .binder-toolbar__search {
    flex: 0 0 auto;
    padding: 0.4rem;
  }
  .binder-toolbar__search-placeholder,
  .binder-toolbar__search-kbd {
    display: none;
  }
}

.jump-to-scope {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.35rem 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 500;
  flex-shrink: 0;
}

.jump-to-scope[hidden] {
  display: none;
}

.jump-to-scope-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: inherit;
  padding: 0.1rem;
  transition: background var(--duration-base) var(--ease-standard);
}

.jump-to-scope-clear:hover {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
}

.jump-to-scope-clear .material-symbols-outlined {
  font-size: var(--text-base);
}

.binder-toolbar__icon.bc-icon-btn {
  border: 1px solid var(--binder-icon-border);
  background: var(--binder-icon-bg);
  color: var(--on-surface);
  box-shadow: var(--binder-toolbar-shadow);
}

.binder-toolbar__icon.bc-icon-btn:hover {
  background: var(--surface-container-low);
}

body.theme-dark .binder-toolbar__icon.bc-icon-btn:hover {
  background: var(--surface-container-high);
}

.binder-toolbar__user .bc-avatar-btn {
  box-shadow: var(--binder-toolbar-shadow);
}

.binder-sidebar .bc-app-launcher-trigger {
  border: 1px solid var(--binder-launcher-trigger-border);
  background: var(--binder-launcher-trigger-bg);
  color: var(--binder-launcher-trigger-text);
  box-shadow: 0 10px 24px rgba(31, 35, 44, 0.08);
}

.binder-sidebar .bc-app-launcher-trigger:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* top/left for desktop rail: set in app_launcher_controller (viewport rects; avoids backdrop-filter fixed CB bugs) */
.binder-sidebar .bc-app-launcher-panel {
  background: var(--binder-launcher-panel-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--binder-launcher-panel-shadow);
  border: 1px solid var(--binder-launcher-panel-border);
}

.binder-sidebar .bc-app-launcher-search,
.binder-sidebar .bc-app-launcher-footer {
  background: var(--surface-container-low);
}

body.theme-dark[class*="nav-ui-"] .binder-sidebar .bc-app-launcher-search,
body.theme-dark[class*="nav-ui-"] .binder-sidebar .bc-app-launcher-footer {
  background: rgba(255, 255, 255, 0.03);
}

.nav-ui-lagoon .binder-sidebar__nav-item.sidebar-nav-item {
  border-radius: var(--radius-md);
}

.nav-ui-afterglow .binder-sidebar__nav-item.sidebar-nav-item {
  border-radius: var(--radius-md);
}

.nav-ui-prism .binder-sidebar__lab-chip--active {
  background: color-mix(in srgb, var(--primary) 14%, var(--binder-lab-bg));
  border-color: color-mix(in srgb, var(--primary) 28%, var(--binder-lab-border));
}

.binder-sidebar-overlay.sidebar-overlay {
  display: none;
}

@media (max-width: 980px) {
  .binder-workspace {
    padding: 0.85rem;
  }

  .binder-sidebar.sidebar-shell {
    position: fixed;
    top: 0.85rem;
    left: 0.85rem;
    bottom: 0.85rem;
    height: auto;
    width: min(var(--binder-sidebar-width), calc(100vw - 1.7rem));
    min-width: 0;
    max-width: calc(100vw - 1.7rem);
    transform: translateX(calc(-100% - 1rem));
    transition: transform var(--duration-slow) var(--ease-standard);
    z-index: 260;
  }

  .sidebar-open .binder-sidebar.sidebar-shell {
    transform: translateX(0);
  }

  .binder-sidebar-overlay.sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(17, 23, 33, 0.42);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-standard);
    z-index: 240;
  }

  .sidebar-open .binder-sidebar-overlay.sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .binder-toolbar__menu-btn {
    display: inline-flex;
  }

  .binder-sidebar .bc-app-launcher-panel {
    top: 5rem;
    left: 1rem;
    width: min(22rem, calc(100vw - 2rem));
    max-height: min(28rem, calc(100vh - 6rem));
  }
}

@media (max-width: 720px) {
  .binder-workspace {
    padding: 0.6rem;
  }

  .binder-toolbar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .binder-toolbar__actions {
    justify-content: flex-end;
    width: 100%;
  }

  .binder-sidebar__spotlight-actions {
    flex-direction: column;
  }

  .binder-sidebar__ghost-action {
    width: 100%;
  }

  .binder-sidebar__lab-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══ Records HQ — card grid for sub-sections ═══ */

.hq-header {
  text-align: center;
  margin-bottom: 2rem;
}

.hq-title {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--on-surface);
  letter-spacing: -0.02em;
}

.hq-subtitle {
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  margin-top: 0.3rem;
}

.hq-sections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 640px) {
  .hq-sections {
    grid-template-columns: 1fr;
  }
}

.hq-card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.hq-card:hover {
  box-shadow: var(--shadow-md);
}

.hq-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--outline-variant);
  background: rgba(255, 255, 255, 0.4);
}

.hq-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
}

.hq-card-icon .material-symbols-outlined {
  font-size: var(--text-xl);
}

.hq-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--on-surface);
}

.hq-card-desc {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin-top: 0.1rem;
}

.hq-card-body {
  padding: 0.5rem 0.5rem;
}

.hq-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--on-surface);
  font-size: var(--text-base);
  font-weight: 500;
  transition: background var(--duration-fast) var(--ease-standard);
}

.hq-link:hover {
  background: var(--surface-container-low);
}

.hq-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.hq-link-icon svg {
  width: 16px;
  height: 16px;
}

.hq-link-label {
  flex: 1;
}

.hq-link-meta {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  font-weight: 400;
}

.hq-link-arrow {
  color: var(--on-surface-subtle);
  font-size: var(--text-md);
  transition: transform var(--duration-base) var(--ease-standard);
}

.hq-link:hover .hq-link-arrow {
  transform: translateX(2px);
  color: var(--primary);
}

/* ═══ HOME (simplified dashboard) ═══ */

.home-greeting {
  margin-bottom: 2rem;
}

.home-greeting-title {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--on-surface);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.home-greeting-date {
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  margin-top: 0.25rem;
}

.home-motto {
  font-style: italic;
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  margin-top: 0.5rem;
  max-width: 50ch;
}

.home-schoolwork-strip {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: -0.5rem 0 1.75rem;
  padding: 0.85rem 1.1rem;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-lowest));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--outline-variant));
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.home-schoolwork-strip:hover {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 12%, transparent);
  transform: translateY(-1px);
}

.home-schoolwork-strip-icon {
  font-size: var(--text-xl);
  color: var(--primary);
  flex-shrink: 0;
}

.home-schoolwork-strip-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  font-size: var(--text-base);
  color: var(--on-surface-mid);
}

.home-schoolwork-strip-text strong {
  font-size: var(--text-md);
  color: var(--on-surface);
}

.home-schoolwork-strip-sub {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  line-height: 1.35;
}

.home-schoolwork-kbd {
  display: inline-block;
  padding: 0.08rem 0.35rem;
  font-size: var(--text-xs);
  font-family: ui-monospace, monospace;
  background: var(--surface-container-low);
  border-radius: var(--radius-sm);
  border: 1px solid var(--outline-variant);
}

.home-schoolwork-kbd-alt {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.home-schoolwork-strip-arrow {
  margin-left: auto;
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.home-routine-strip {
  margin: 0 0 1.75rem;
  padding: 1rem 1.15rem 1.15rem;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
}

.home-routine-strip__head {
  margin-bottom: 0.85rem;
}

.home-routine-strip__title {
  margin: 0 0 0.25rem;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--on-surface);
}

.home-routine-strip__sub {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--on-surface-subtle);
  max-width: 52ch;
}

.home-routine-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.65rem;
  align-items: stretch;
}

.home-routine-strip__card {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  min-height: 100%;
}

a.home-routine-strip__card:hover {
  border-color: color-mix(in srgb, var(--primary) 25%, var(--outline-variant));
  box-shadow: var(--shadow-sm);
}

.home-routine-strip__card--form {
  flex-wrap: wrap;
}

.home-routine-strip__card--muted {
  opacity: 0.85;
}

.home-routine-strip__card-icon {
  font-size: var(--text-xl);
  color: var(--secondary);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.home-routine-strip__card-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

.home-routine-strip__card-body--grow {
  flex: 1;
  min-width: 0;
}

.home-routine-strip__card-label {
  font-size: var(--text-base);
  font-weight: 650;
  color: var(--on-surface);
}

.home-routine-strip__card-desc {
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--on-surface-mid);
}

.home-routine-strip__card-chev {
  font-size: var(--text-lg);
  opacity: 0.35;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.home-routine-outside-form {
  margin-top: 0.5rem;
  width: 100%;
}

.home-routine-outside-form__row {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  flex-wrap: wrap;
}

.home-routine-outside-input {
  flex: 1;
  min-width: 5rem;
  padding: 0.45rem 0.55rem;
  font-size: var(--text-sm);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.home-routine-outside-btn {
  padding: 0.45rem 0.85rem;
  font-size: var(--text-sm);
  font-weight: 700;
  border: none;
  border-radius: var(--radius-md);
  background: var(--secondary);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.home-routine-outside-btn:hover {
  opacity: 0.92;
}

/* ── Student Cards ── */
.home-students {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.home-student-card {
  display: block;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.home-student-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.home-student-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.home-student-name {
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--on-surface);
}

.home-student-grade {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.home-student-pct {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--primary);
}

.home-progress-track {
  height: 4px;
  background: var(--surface-container);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.home-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-standard);
}

.home-student-bottom {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

/* ── Home Sections ── */
.home-section {
  margin-bottom: 2rem;
}

.home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.home-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--on-surface);
}

/* ── Activity Row (stats) ── */
.home-activity-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.home-activity-card {
  flex: 1;
  min-width: 100px;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  text-align: center;
}

.home-activity-num {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.home-activity-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Activity Grid (mini cards) ── */
.home-activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.home-mini-card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1rem;
}

.home-mini-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--outline-variant);
}

.home-mini-card-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--on-surface);
}

.home-mini-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: var(--text-base);
  color: var(--on-surface);
  text-decoration: none;
}

.home-mini-card-row:hover {
  color: var(--primary);
}

/* ── Daily Tip ── */
.home-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  line-height: 1.5;
}

.home-tip-icon {
  color: var(--method-accent, var(--primary));
  font-size: var(--text-lg);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* ─── SIDEBAR NAVIGATION ─── */
.sidebar-shell {
  display: flex;
  flex-direction: column;
  width: 288px;
  min-width: 288px;
  height: 100vh;
  padding: 2rem 1rem;
  background: var(--surface-container-low);
  border-radius: 0 3rem 3rem 0;
  box-shadow: 24px 0 32px rgba(28, 29, 26, 0.06);
  z-index: 20;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Mobile sidebar */
.sidebar-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--on-surface);
  cursor: pointer;
  padding: 0.25rem;
}

.sidebar-overlay {
  display: none;
}

@media (max-width: 768px) {
  .sidebar-mobile-toggle { display: flex; }

  .sidebar-shell {
    position: fixed;
    left: -300px;
    top: 0;
    bottom: 0;
    transition: left var(--duration-slow) var(--ease-standard);
    z-index: 100;
  }

  .sidebar-open .sidebar-shell {
    left: 0;
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-standard);
  }

  .sidebar-open .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .main-content {
    width: 100% !important;
  }
}

.sidebar-logo {
  display: flex;
  justify-content: center;
  padding: 1rem 1rem 0;
  margin-bottom: 1.5rem;
  text-decoration: none;
}

.sidebar-logo-img {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: opacity var(--duration-base) var(--ease-standard);
}

.sidebar-logo:hover .sidebar-logo-img {
  opacity: 0.75;
}

.sidebar-logo-img .binder-wordmark,
.sidebar-logo-img img,
.sidebar-logo-img svg {
  /* Wordmark sizing — render the outlined SVG large enough to stay crisp. */
  height: 40px;
  width: auto;
  display: block;
  image-rendering: auto;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.sidebar-logo-text h1 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sidebar-logo-text p {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  font-weight: 500;
  opacity: 0.6;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-section-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  padding: 0.75rem 1.5rem 0.15rem;
  margin-top: 0.25rem;
}

.sidebar-section-divider {
  height: 1px;
  background: var(--outline-variant);
  margin: 0.5rem 1.5rem;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
  text-decoration: none;
  opacity: 0.7;
  transition: all var(--duration-base) var(--ease-standard);
  margin: 0 0.5rem;
}

.sidebar-nav-item:hover {
  opacity: 1;
  background: var(--surface);
}

.sidebar-nav-item--active {
  opacity: 1;
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: white;
  box-shadow: var(--shadow-md);
}

.sidebar-nav-item--active:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: white;
}

.sidebar-nav-item--active .material-symbols-outlined {
  color: white;
}

.sidebar-children {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0.5rem;
  margin-top: 1rem;
}

.sidebar-children-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  padding: 0 1rem;
  margin-bottom: 0.15rem;
}

.sidebar-child-avatar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard);
}

.sidebar-child-avatar:hover {
  background: var(--surface);
}

.sidebar-child-avatar .avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-child-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
}

.sidebar-bottom {
  margin-top: auto;
  padding: 1.5rem 1rem 0;
}

.sidebar-new-entry-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(28, 29, 26, 0.25);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
  text-decoration: none;
}

.sidebar-new-entry-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(28, 29, 26, 0.3);
}

.sidebar-new-entry-btn:active {
  transform: scale(0.95);
}

.sidebar-signout-link {
  display: block;
  text-align: center;
  padding: 0.75rem 0 0;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--on-surface-subtle);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}

.sidebar-signout-link:hover {
  color: var(--on-surface);
}

/* ─── NEW ENTRY POPOVER ─── */
.sidebar-new-entry {
  position: relative;
}

.sidebar-new-entry-menu {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: 0.5rem;
  max-height: 24rem;
  overflow-y: auto;
  z-index: 100;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

body.theme-dark .sidebar-new-entry-menu {
  background: var(--surface-container);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--outline-variant);
}

.sidebar-new-entry-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background var(--duration-fast) var(--ease-standard);
}

.sidebar-new-entry-option:hover {
  background: var(--surface);
}

.sidebar-new-entry-option--secondary {
  padding-left: 1.95rem;
}

.sidebar-new-entry-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.35rem;
}

.sidebar-new-entry-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.2;
}

.sidebar-new-entry-desc {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  line-height: 1.3;
  margin-top: 1px;
}

.sidebar-new-entry-more {
  margin-top: 0.25rem;
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 72%, transparent);
  padding-top: 0.35rem;
}

.sidebar-new-entry-more__summary {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: inherit;
  cursor: pointer;
  list-style: none;
  transition: background var(--duration-fast) var(--ease-standard);
}

.sidebar-new-entry-more__summary::-webkit-details-marker {
  display: none;
}

.sidebar-new-entry-more__summary:hover {
  background: var(--surface);
}

.sidebar-new-entry-more__icon {
  flex: 0 0 auto;
  width: 1rem;
  margin-top: 0.05rem;
  color: var(--on-surface-subtle);
  font-size: 1rem;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.sidebar-new-entry-more[open] .sidebar-new-entry-more__icon {
  transform: rotate(180deg);
}

.sidebar-new-entry-more__items {
  padding-top: 0.15rem;
}

/* ─── CONTENT HEADER ─── */
.content-header {
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0;
}

.content-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.content-header-search {
  position: relative;
  width: 100%;
  max-width: 28rem;
}

.content-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--on-surface-subtle);
  opacity: 0.4;
  font-size: var(--text-lg);
}

.content-search-input {
  width: 100%;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 0.625rem 1rem 0.625rem 3rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--on-surface);
  outline: none;
  transition: box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
  box-shadow: var(--shadow-sm);
}

.content-search-input:focus {
  border-color: var(--focus-ring-border);
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
}

.content-search-input::placeholder {
  color: var(--on-surface-subtle);
  opacity: 0.5;
}

.content-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.content-week-badge {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-subtle);
  padding: 0.25rem 0.6rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-full);
}

.content-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--on-surface-subtle);
  opacity: 0.6;
  transition: all var(--duration-base) var(--ease-standard);
  text-decoration: none;
}

.content-header-icon:hover {
  opacity: 1;
  background: var(--surface-container-low);
}

.content-user-name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
}

/* Legacy topbar classes kept for backward compatibility */
.nav-bar {
  display: none;
}

.avatar {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.avatar:hover {
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ─── LAYOUT ─── */
.app-body {
  display: flex;
  flex: 1;
}

/* ─── SIDEBAR ─── */
.sidebar-wrapper {
  width: 240px;
  min-width: 240px;
  position: sticky;
  top: 0.75rem;
  height: calc(100vh - 64px - 1.5rem);
  margin: 0.75rem 0 0.75rem 0.75rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.sidebar {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 0 32px rgba(42, 43, 81, 0.1);
  flex: 1;
  min-height: 0;
}

/* Sidebar category tabs */
.sidebar-category-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.35rem;
  background: var(--surface);
  border-radius: var(--radius-full);
  margin-bottom: 0.5rem;
  box-shadow: 0 0 32px rgba(42, 43, 81, 0.1);
}

.sidebar-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.25rem;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--on-surface-subtle);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--duration-base) var(--ease-standard);
}

.sidebar-tab span {
  line-height: 1;
}

.sidebar-tab:hover {
  color: var(--on-surface);
  background: var(--surface-container-low);
}

.sidebar-tab--active {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 2px 8px rgba(28, 29, 26, 0.03);
}

.sidebar-tab--active:hover {
  background: var(--primary);
  color: var(--on-primary);
}

.sidebar-signout {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 0;
}

.sidebar-signout-btn {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--on-surface-subtle);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}

.sidebar-signout-btn:hover {
  color: var(--on-surface);
  background: var(--surface-container);
}

.sidebar-section {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ─── NAV ITEMS ─── */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--on-surface);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--duration-slow) var(--ease-standard);
}

.nav-item:hover {
  background: var(--surface-variant);
  transform: translateX(2px);
}

.nav-item.active {
  background: var(--primary);
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(28, 29, 26, 0.3);
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Override SVG icon colors for active state */
.nav-item.active .nav-icon { color: white; }
.nav-item.active .nav-icon svg { stroke: white; }

.nav-text {
  white-space: nowrap;
  overflow: hidden;
}

/* ─── SIDEBAR LABEL ─── */
.sidebar-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  padding: 0 1rem;
  margin-bottom: 0.15rem;
  margin-top: 0.5rem;
}

/* ─── BADGES ─── */
.nav-badge {
  margin-left: auto;
  background: var(--tertiary-container);
  color: #601400;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
}

/* ─── METHOD-AWARE WEIGHTS ─── */
.nav-item--core::before {
  display: none;
}


/* Week ring */
.week-ring {
  margin: 0;
  background: var(--surface-container-low);
  border-radius: var(--radius-xl);
  padding: 1rem;
  margin-top: auto;
  white-space: nowrap;
}

.ring-title {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.7rem;
  font-weight: 700;
}

.ring-bars { display: flex; flex-direction: column; gap: 0.5rem; }
.ring-row { display: flex; align-items: center; gap: 0.6rem; }

.ring-name {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  width: 55px;
  flex-shrink: 0;
  font-weight: 500;
}

.ring-track {
  flex: 1;
  height: 6px;
  background: var(--surface-container);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.ring-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-standard);
  width: 0;
}

.ring-pct {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  width: 28px;
  text-align: right;
  font-weight: 600;
}

/* ─── MAIN CONTENT ─── */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.main-canvas {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 2rem 3rem;
  max-width: none;
  width: 100%;
  margin: 0;
}

/* Legacy .main class for views not yet migrated */
.main {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 2rem 3rem;
  max-width: none;
  width: 100%;
  margin: 0;
}
.main--hub {
  max-width: none;
  padding-top: 2rem;
}

/* ─── HUB TABS ─── */
.hub-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: var(--surface, rgb(247, 244, 238));
  position: sticky;
  top: 56px;
  z-index: 150;
}

.hub-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
  border: 1px solid rgba(28, 29, 26, 0.10);
}
.hub-tab svg {
  flex-shrink: 0;
}
.hub-tab:hover {
  color: var(--on-surface);
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(28, 29, 26, 0.14);
}
.hub-tab--active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(28, 29, 26, 0.14);
}
.hub-tab--active:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--on-primary);
  transform: none;
}
.hub-tab--active svg {
  stroke: var(--on-primary);
}

@media (max-width: 640px) {
  .hub-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: -0.75rem;
    padding: 0.6rem 0.75rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .hub-tabs::-webkit-scrollbar {
    display: none;
  }

  .hub-tab {
    flex: 0 0 auto;
    min-height: var(--mobile-tap-min);
    padding: 0.55rem 0.95rem;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

.records-hub-panels {
  margin: 0 0 1.5rem;
}

.records-hub-panels__title {
  margin: 0 0 0.35rem;
  font-size: var(--text-md);
  font-weight: 750;
  color: var(--on-surface);
  letter-spacing: -0.02em;
}

.records-hub-panels__lede {
  margin: 0 0 1rem;
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--on-surface-mid);
  max-width: 42rem;
}

.records-hub-panels__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (max-width: 960px) {
  .records-hub-panels__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.records-hub-panel {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1rem;
  min-height: 5.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
  background: linear-gradient(165deg, color-mix(in srgb, var(--primary) 9%, var(--surface-lowest)) 0%, var(--surface-lowest) 55%);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 14px rgba(15, 20, 30, 0.06);
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

a.records-hub-panel:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--outline-variant));
  box-shadow: 0 8px 22px rgba(15, 20, 30, 0.1);
  transform: translateY(-2px);
}

.records-hub-panel--current {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--outline-variant));
  background: linear-gradient(165deg, color-mix(in srgb, var(--primary) 16%, var(--surface-lowest)) 0%, var(--surface-lowest) 50%);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 14%, transparent);
  cursor: default;
}

.records-hub-panel__icon {
  font-size: var(--text-2xl);
  color: var(--primary);
  flex-shrink: 0;
  line-height: 1;
}

.records-hub-panel--current .records-hub-panel__icon {
  color: var(--primary);
  opacity: 0.95;
}

.records-hub-panel__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
}

.records-hub-panel__label {
  font-size: var(--text-md);
  font-weight: 750;
  color: var(--on-surface);
  letter-spacing: -0.02em;
}

.records-hub-panel__hint {
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--on-surface-mid);
}

.records-hub-panel__badge {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.22rem 0.55rem;
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: var(--radius-full);
  width: fit-content;
}

.records-hub-panel__chev {
  font-size: var(--text-xl);
  color: var(--primary);
  opacity: 0.55;
  flex-shrink: 0;
  align-self: center;
}

.records-hub-panel__chev--faded {
  opacity: 0.18;
  pointer-events: none;
}

a.records-hub-panel:hover .records-hub-panel__chev:not(.records-hub-panel__chev--faded) {
  opacity: 0.9;
}

@media (max-width: 520px) {
  .records-hub-panels__grid {
    grid-template-columns: 1fr;
  }
}

body.theme-dark .records-hub-panel {
  background: linear-gradient(165deg, color-mix(in srgb, var(--primary) 12%, var(--surface-container-low)) 0%, var(--surface-container-low) 55%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

body.theme-dark a.records-hub-panel:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

body.theme-dark .records-hub-panel--current {
  background: linear-gradient(165deg, color-mix(in srgb, var(--primary) 22%, var(--surface-container)) 0%, var(--surface-container-low) 50%);
  border-color: rgba(255, 255, 255, 0.18);
}

body.theme-dark .records-hub-panel__badge {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: color-mix(in srgb, var(--on-surface) 92%, var(--primary));
}

/* ─── HUB SUMMARY BAR ─── */
.hub-summary-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hub-summary-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 1rem 1.15rem;
  background: rgba(255, 255, 255, 0.84);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(28, 29, 26, 0.04);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.hub-summary-card:hover {
  box-shadow: 0 4px 16px rgba(28, 29, 26, 0.08);
}
.hub-summary-card--action {
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 0.5rem;
  background: var(--primary);
  color: #fff;
}
.hub-summary-card--action:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 30%, rgba(28, 29, 26, 0.12));
}
.hub-summary-card--action .material-symbols-outlined {
  font-size: 18px;
}

.hub-summary-card__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hub-summary-card--action .hub-summary-card__label {
  display: none;
}

.hub-summary-card__value {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.1;
}
.hub-summary-card--action .hub-summary-card__value {
  display: none;
}

.hub-summary-card__hint {
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
}
.hub-summary-card--action .hub-summary-card__hint {
  display: none;
}

.hub-subject-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.hub-subject-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  background: var(--surface-container);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.hub-subject-chip:hover {
  background: var(--surface-container-high);
}
.hub-subject-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hub-subject-chip__count {
  font-weight: 500;
  color: var(--on-surface-subtle);
}

/* ─── HUB GRID ─── */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.hub-section-kicker {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin: 0 0 0.65rem;
}

.hub-section-kicker--secondary {
  margin-top: 1.75rem;
}

.hub-section-kicker-hint {
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--on-surface-mid);
}

.hub-section-kicker-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.hub-section-kicker-link:hover {
  text-decoration: underline;
}

.hub-grid--picks {
  margin-bottom: 0.25rem;
}

.hub-grid--picks .hub-card {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 8%, rgba(28, 29, 26, 0.06));
  border: 1px solid color-mix(in srgb, var(--primary) 15%, var(--outline-variant));
}

/* ─── HUB CARDS ─── */
.hub-card {
  display: block;
  background: rgba(255, 255, 255, 0.84);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: none;
  box-shadow: 0 6px 20px rgba(28, 29, 26, 0.05);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
  text-decoration: none;
  color: inherit;
}
.hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(28, 29, 26, 0.08);
}
.hub-card:active {
  transform: translateY(-1px);
}

.hub-card-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  user-select: none;
}

.hub-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: rgba(37, 57, 212, 0.06);
  flex-shrink: 0;
}
.hub-card-icon svg {
  width: 20px;
  height: 20px;
}

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

.hub-card-title {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1.2;
}

.hub-card-summary {
  display: block;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin-top: 0.2rem;
}

.hub-card-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--on-surface-subtle);
  transition: transform var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.hub-card:hover .hub-card-chevron {
  transform: translateX(3px);
  color: var(--primary);
}

/* ─── PORTFOLIO (unified Records tab) ─── */
.page-header--records-hub,
.page-header--portfolio {
  align-items: flex-start;
}

.page-header__actions {
  flex-shrink: 0;
  position: relative;
}

.portfolio-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-full);
  border: none;
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--text-base);
  font-weight: 650;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  text-decoration: none;
}

.portfolio-new-btn:hover {
  background: var(--primary-hover);
}

.portfolio-new-btn:active {
  transform: scale(0.98);
}

.portfolio-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  color: var(--on-surface);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.portfolio-export-btn:hover {
  background: var(--surface-container-low);
  border-color: color-mix(in srgb, var(--outline) 35%, var(--outline-variant));
}

.portfolio-export-btn--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: auto;
}

.portfolio-export-btn--disabled:hover {
  background: var(--surface-lowest);
  border-color: var(--outline-variant);
}

.portfolio-new-btn__icon {
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1;
  opacity: 0.95;
}

.portfolio-new-overlay .portfolio-new-modal {
  max-width: 520px;
  width: calc(100% - 2rem);
}

.portfolio-new-modal__header h3 {
  margin: 0;
}

.portfolio-new-modal__hint {
  margin: 0 0 1rem;
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  line-height: 1.5;
}

.portfolio-new-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: min(60vh, 28rem);
  overflow-y: auto;
}

.portfolio-new-picker__card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.portfolio-new-picker__card:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--outline-variant));
  background: var(--surface-container-low);
  box-shadow: var(--shadow-sm);
}

.portfolio-new-picker__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.portfolio-new-picker__icon svg {
  width: 22px;
  height: 22px;
}

.portfolio-new-picker__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.portfolio-new-picker__label {
  font-weight: 650;
  font-size: var(--text-base);
  color: var(--on-surface);
}

.portfolio-new-picker__blurb {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  line-height: 1.45;
  margin: 0;
}

.portfolio-new-picker__cta {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--primary);
  margin-top: 0.25rem;
  letter-spacing: 0.02em;
}

a.portfolio-new-btn:hover {
  color: var(--on-primary);
}

.portfolio-template-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.portfolio-template-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.portfolio-template-row:hover {
  border-color: color-mix(in srgb, var(--on-surface) 12%, var(--outline-variant));
  box-shadow: var(--shadow-sm);
}

.portfolio-template-row__primary {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.portfolio-template-row__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.portfolio-template-row__icon svg {
  width: 22px;
  height: 22px;
}

.portfolio-template-row__copy {
  flex: 1;
  min-width: 0;
}

.portfolio-template-row__title {
  display: block;
  font-weight: 650;
  font-size: var(--text-md);
  color: var(--on-surface);
  letter-spacing: -0.02em;
}

.portfolio-template-row__blurb {
  margin: 0.35rem 0 0.4rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--on-surface-mid);
}

.portfolio-template-row__meta {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

.portfolio-template-row__meta .hub-card-summary,
.portfolio-template-row__meta .hub-summary-line {
  font-size: inherit;
  color: inherit;
}

.portfolio-template-row__chev {
  flex-shrink: 0;
  align-self: center;
  color: var(--on-surface-subtle);
  margin-right: 0.25rem;
}

.portfolio-template-row__quick {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--primary);
  text-decoration: none;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border-left: 1px solid var(--outline-variant);
  white-space: nowrap;
  transition: background var(--duration-base) var(--ease-standard);
}

.portfolio-template-row__quick:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

@media (max-width: 640px) {
  .page-header--records-hub,
  .page-header--portfolio {
    flex-direction: column;
    align-items: stretch;
  }

  .page-header__actions {
    width: 100%;
  }

  .portfolio-new-btn {
    width: 100%;
    justify-content: center;
  }

  .portfolio-template-row {
    flex-direction: column;
  }

  .portfolio-template-row__quick {
    border-left: none;
    border-top: 1px solid var(--outline-variant);
    justify-content: center;
    padding: 0.65rem 1rem;
  }
}

/* Topbar sign-out button */
.topbar-signout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  color: var(--on-surface-subtle);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.topbar-signout-btn:hover {
  color: var(--on-surface);
  background: var(--surface-container);
}

/* ─── RECORD LIST (shared tool-view styles) ─── */
.record-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.record-date-group {
  margin-bottom: 1.5rem;
}

.record-date-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on-surface-subtle);
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--outline-variant);
}

.record-list .record-item {
  text-align: left;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1.15rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.record-list .record-item:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--outline) 35%, var(--outline-variant));
}

.record-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.record-item-title {
  font-weight: 600;
  font-size: var(--text-base);
}

a.record-item-title--link {
  color: var(--on-surface);
  text-decoration: none;
}
a.record-item-title--link:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.record-item-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--surface-variant);
  color: var(--on-surface-mid);
}

.record-item-actions {
  margin-left: auto;
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.record-list .record-item:hover .record-item-actions {
  opacity: 1;
}

@media (max-width: 640px) {
  .record-list .record-item {
    padding: 0.9rem;
  }

  .record-item-actions {
    width: 100%;
    margin-left: 0;
    opacity: 1;
    flex-wrap: wrap;
  }

  .record-item-actions :where(a, button) {
    min-height: var(--mobile-tap-min);
  }
}

/* Template list */
.tpl-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.tpl-days {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.tpl-status {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
}

.tpl-status--active {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}

.tpl-status--inactive {
  background: var(--surface-variant);
  color: var(--on-surface-subtle);
}

.tpl-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-shrink: 0;
}

.btn-ghost--danger {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.2);
}

.btn-ghost--danger:hover {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.3);
  color: #dc2626;
}

.record-item-body {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ─── CARD GRID (shared) ─── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.card-grid .card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.card-grid .card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.card-grid .card-title {
  font-weight: 700;
  font-size: var(--text-md);
}

.habit-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.15rem;
  border-radius: var(--radius-xs);
  transition: background var(--duration-base) var(--ease-standard);
}
.habit-toggle-btn:hover {
  background: var(--surface-container);
}

/* ─── PAGE HEADER ─── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1.5rem;
}

.page-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: var(--tracking-3xl);
  color: var(--on-surface);
  margin: 0;
}

.page-subtitle {
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  margin-top: 0.45rem;
  letter-spacing: 0em;
  line-height: 1.6;
  max-width: 62ch;
}

.page-subtitle-link {
  color: var(--primary);
  font-style: italic;
}

.lesson-page-kicker {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.35rem;
}

.lesson-ai-card-intro {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.lesson-ai-card-icon {
  font-size: var(--text-2xl);
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.lesson-ai-card-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 650;
  color: var(--on-surface);
  letter-spacing: -0.02em;
}

.lesson-ai-card-desc {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--on-surface-mid);
}

.lesson-ai-card .btn-ghost {
  margin-top: 0.15rem;
}

.page-subtitle strong {
  color: var(--on-surface);
  font-weight: 600;
}

/* ─── BUTTONS ─── */
.btn {
  background: var(--primary);
  color: var(--on-primary);
  border: 1px solid var(--primary);
  padding: 0.72rem 1.3rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
  display: inline-block;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.btn:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn-ghost {
  background: var(--surface-lowest);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  padding: 0.66rem 1.15rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
  display: inline-block;
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  background: var(--surface-lowest);
  border-color: color-mix(in srgb, var(--outline) 35%, var(--outline-variant));
  color: var(--on-surface);
  transform: translateY(-1px);
}
.btn-ghost:active {
  transform: translateY(0);
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  background: var(--surface-lowest);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  padding: 0.45rem 0.9rem;
  margin-right: 0.65rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
  box-shadow: var(--shadow-sm);
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--surface-lowest);
  border-color: color-mix(in srgb, var(--outline) 35%, var(--outline-variant));
}

/* In dark mode .btn-ghost sits on --surface-lowest (a dark gray), so it must use
   --on-surface for legible text. Placed here so this wins over `a { color: inherit }`.
   :not(.btn-danger) protects .btn-ghost.btn-danger which carries its own pink/red
   palette; without the guard the dark override blanks the red ink. */
body.theme-dark .btn-ghost:not(.btn-danger) {
  color: var(--on-surface);
}

body.theme-dark .btn-ghost:not(.btn-danger):hover {
  color: var(--on-surface);
}

.btn-sm {
  padding: 0.4rem 1rem;
  font-size: var(--text-xs);
}

.btn-danger:hover {
  background: var(--error);
  color: white;
}

.btn-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── DASHBOARD WELCOME ─── */
.dash-welcome {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.dash-welcome-left { flex: 1; min-width: 0; }

.dash-greeting {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--on-surface);
}

.dash-greeting-name {
  color: var(--method-accent, var(--primary));
  font-style: normal;
}

.dash-tagline {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  font-style: italic;
  color: var(--method-accent, var(--on-surface-mid));
  margin-top: 0.35rem;
  letter-spacing: 0.01em;
  opacity: 0.85;
}

.dash-subtitle {
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  margin-top: 0.25rem;
}

/* ── Method Motto Banner ── */
.dash-motto-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--method-accent-pale, var(--surface-container-low));
  border-radius: var(--radius-xl);
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.dash-motto-banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--method-accent, var(--primary));
  border-radius: 4px 0 0 4px;
}
.dash-motto-text {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  font-style: italic;
  color: var(--on-surface);
  line-height: 1.5;
  flex: 1;
}
.dash-motto-badge {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--method-accent, var(--primary));
  background: rgba(255,255,255,0.7);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-3xl);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Daily Tip Card ── */
.dash-aside-card--tip {
  background: var(--method-accent-pale, var(--surface-container-low));
  position: relative;
}
.dash-aside-card--tip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--method-accent, var(--primary));
  border-radius: 3px 0 0 3px;
}
.dash-tip-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--method-accent, var(--on-surface-subtle));
  margin-bottom: 0.35rem;
}
.dash-tip-text {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  line-height: 1.55;
}

/* ── Method-Themed Stats ── */
.dash-stat-num--method     { color: var(--method-accent, var(--secondary)); }
.dash-stat-num--method-alt { color: var(--method-accent, var(--primary)); opacity: 0.7; }

/* ── Progress Orbs ── */
.dash-orbs {
  display: flex;
  gap: 1.5rem;
  flex-shrink: 0;
}

.dash-orb {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  position: relative;
  transition: transform var(--duration-base) var(--ease-standard);
}
.dash-orb:hover { transform: scale(1.05); }

.dash-orb-ring {
  width: 72px;
  height: 72px;
}

.dash-orb-pct {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 6px));
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--on-surface);
}

.dash-orb-name {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-mid);
  margin-top: 0.3rem;
}

/* ── Bento Layout ── */
/* ── Dashboard: Date Badge ── */
.dash-date-badge {
  display: inline-block;
  width: fit-content;
  padding: 0.35rem 1rem;
  background: var(--tertiary-container);
  color: var(--tertiary);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Dashboard: Hero Title ── */
.dash-hero-title {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.dash-hero-subtitle {
  font-size: var(--text-md);
  color: var(--on-surface-subtle);
  max-width: 32rem;
  margin-top: var(--space-1);
}

/* ── Dashboard: Bento Grid ── */
.dash-bento-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.dash-bento-col-8 {
  grid-column: span 8;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.dash-bento-col-4 {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.dash-bento-col-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .dash-bento-12 { grid-template-columns: 1fr; }
  .dash-bento-col-8 { grid-column: span 1; grid-template-columns: 1fr; }
  .dash-bento-col-4 { grid-column: span 1; }
}

/* ── Dashboard: Student Progress Card ── */
.dash-student-card {
  background: var(--surface-lowest);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.dash-student-card-deco {
  position: absolute;
  top: 0; right: 0;
  width: 8rem; height: 8rem;
  border-radius: 50%;
  margin-right: -4rem;
  margin-top: -4rem;
  opacity: 0.08;
}
.dash-student-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
}
.dash-student-identity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.dash-student-avatar-ring {
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  border-width: 4px;
  border-style: solid;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash-student-name {
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--on-surface);
}
.dash-student-grade {
  font-size: var(--text-sm);
  opacity: 0.5;
}
.dash-status-pill {
  padding: 0.2rem 0.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dash-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.dash-progress-track {
  height: 0.75rem;
  border-radius: var(--radius-full);
  overflow: hidden;
}
.dash-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-standard);
}
.dash-student-metrics {
  display: flex;
  gap: var(--space-2);
}
.dash-student-metric {
  flex: 1;
  background: var(--surface-container-low);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  text-align: center;
}
.dash-student-metric-label {
  font-size: var(--text-xs);
  opacity: 0.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0;
}
.dash-student-metric-value {
  font-size: var(--text-lg);
  font-weight: 900;
  margin: 0.25rem 0 0;
}
.dash-student-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── Dashboard: What's Next Card ── */
.dash-whats-next {
  background: var(--surface-container-high);
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(28, 29, 26,0.06);
  flex: 1;
}
.dash-whats-next-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: var(--space-5);
}
.dash-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  padding-left: var(--space-6);
}
.dash-timeline-line {
  position: absolute;
  left: 0.35rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: rgba(28, 29, 26,0.15);
}
.dash-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.dash-timeline-dot {
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  margin-top: 0.3rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.dash-timeline-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}
.dash-timeline-meta {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  margin: 0.1rem 0 0;
}
.dash-whats-next-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 2px dashed rgba(28, 29, 26,0.15);
}
.dash-planner-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.65rem var(--space-4);
  background: linear-gradient(135deg, var(--tertiary), #b84dcc);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(145,45,163,0.25);
}
.dash-planner-link:hover { opacity: 0.9; }

/* ── Dashboard: Sidebar Cards ── */
.dash-sidebar-card {
  background: var(--surface-lowest);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.dash-sidebar-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.dash-sidebar-card-title {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--primary);
}
.dash-coop-link {
  display: block;
  padding: 0.6rem 0.75rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--on-surface);
  font-size: var(--text-base);
  font-weight: 600;
}
.dash-coop-link:hover { background: var(--surface-container); }
.dash-coop-count {
  opacity: 0.5;
  font-size: var(--text-sm);
  margin-left: var(--space-2);
}
.dash-sidebar-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.dash-tip-icon {
  color: var(--method-accent);
  font-size: var(--text-lg);
}

.dash-tip-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
}
.dash-tip-body {
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  line-height: 1.5;
}

/* ── Dashboard: Journal Prompt ── */
.dash-journal-prompt {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5) 1.75rem;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.dash-journal-prompt-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--primary);
  margin: 0;
}
.dash-journal-prompt-desc {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin: 0.15rem 0 0;
}
.dash-accent-link {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--tertiary);
  text-decoration: none;
  white-space: nowrap;
}
.dash-accent-link:hover { opacity: 0.7; }

.dash-export-btns {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ── Dashboard: Export Buttons ── */
.dash-export-btn {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary);
  background: var(--surface-container-low);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  text-align: center;
  display: block;
}
.dash-export-btn:hover { background: var(--surface-container); }
.dash-export-btn--disabled {
  color: var(--on-surface-subtle);
  background: var(--surface-container-low);
  border: none;
  cursor: not-allowed;
  opacity: 0.5;
}

/* ── Dashboard: Outside Time ── */
.dash-outside-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.dash-outside-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--surface-container-low);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--surface);
}
.dash-outside-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--secondary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.dash-outside-btn:hover { opacity: 0.9; }

/* ── Dashboard: Feature Card Items ── */
.dash-feature-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--on-surface);
  font-size: var(--text-base);
  font-weight: 600;
}
.dash-feature-link:hover { background: var(--surface-container); }
.dash-lesson-empty {
  text-align: center;
  padding: var(--space-7) 0;
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
}

.dash-bento { margin-bottom: 2.5rem; }

.dash-bento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.dash-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--on-surface);
}

/* ── Quick Links ── */
.dash-quick-links {
  margin-bottom: 2rem;
}

.dash-quick-links-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.dash-customize-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #6b7280;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}
.dash-customize-link:hover {
  color: var(--on-surface);
}

.dash-quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
}

.dash-quick-links-grid--add {
  opacity: 0.6;
}

.quick-link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(26, 26, 46, 0.06);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
  position: relative;
  font-family: var(--font-sans);
  /* reset button styles for button_to */
  width: 100%;
  font-size: inherit;
}
.quick-link-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px var(--method-accent-glow, rgba(37, 57, 212, 0.08));
  border-color: var(--method-accent, rgba(37, 57, 212, 0.15));
  border-color: color-mix(in srgb, var(--method-accent, #2539d4) 20%, transparent);
}

.quick-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.quick-link-icon svg {
  width: 22px;
  height: 22px;
}

.quick-link-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #374151;
  text-align: center;
  line-height: 1.2;
}

/* Edit mode */
.quick-link-card--editing {
  border-style: dashed;
  border-color: rgba(26, 26, 46, 0.15);
}
.quick-link-card--editing:hover {
  border-color: #d50000;
  background: rgba(213, 0, 0, 0.03);
}
.quick-link-card--editing:hover .quick-link-remove {
  color: #d50000;
}

.quick-link-remove {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  font-size: var(--text-lg);
  font-weight: 700;
  color: #9ca3af;
  line-height: 1;
}

/* Add mode */
.quick-link-card--add {
  border-style: dashed;
  border-color: rgba(26, 26, 46, 0.1);
  background: rgba(255, 255, 255, 0.3);
}
.quick-link-card--add:hover {
  border-color: rgba(37, 57, 212, 0.3);
  background: rgba(37, 57, 212, 0.04);
  opacity: 1;
}

.quick-link-add-icon {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  font-size: var(--text-md);
  font-weight: 700;
  color: #9ca3af;
  line-height: 1;
}

.dash-quick-links-add {
  margin-top: 1.25rem;
}

.dash-subsection-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 0.75rem;
}

/* ─── Dashboard home: quieter visual hierarchy (same features) ─── */
.dashboard-home {
  --dash-quiet-radius: var(--radius-xl);
  --dash-quiet-border: 1px solid var(--outline-variant);
  --dash-quiet-shadow: var(--shadow-md);
}

.dashboard-home .dash-welcome {
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

.dashboard-home .dash-date-badge {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-size: var(--text-sm);
  background: color-mix(in srgb, var(--surface-container-high) 75%, var(--surface-lowest));
  color: var(--on-surface-mid);
  border: 1px solid var(--outline-variant);
}

.dashboard-home .dash-date-badge__meta {
  color: var(--on-surface-subtle);
  font-weight: 500;
}

.dashboard-home .dash-hero-title {
  font-weight: 700;
  font-size: clamp(1.45rem, 3.5vw, 1.8rem);
  color: var(--on-surface);
  letter-spacing: -0.02em;
}

.dashboard-home .dash-hero-subtitle {
  font-size: var(--text-md);
  color: var(--on-surface-mid);
  max-width: 36rem;
  line-height: 1.5;
}

.dashboard-home .dash-motto-banner {
  padding: 0.85rem 1.15rem;
  margin-bottom: 1.5rem;
  border-radius: var(--dash-quiet-radius);
  background: color-mix(in srgb, var(--method-accent-pale, var(--surface-container-low)) 65%, var(--surface-lowest));
  border: var(--dash-quiet-border);
  box-shadow: none;
}

.dashboard-home .dash-motto-banner::before {
  width: 3px;
  opacity: 0.55;
}

.dashboard-home .dash-motto-text {
  font-size: var(--text-base);
  font-weight: 400;
  font-style: italic;
  color: var(--on-surface-mid);
}

.dashboard-home .dash-motto-badge {
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: var(--text-xs);
  font-weight: 600;
  background: color-mix(in srgb, var(--surface-lowest) 90%, var(--method-accent, var(--primary)) 10%);
  color: var(--on-surface-mid);
}

.dashboard-home .dash-section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: -0.015em;
}

.dashboard-home .dash-quick-links {
  margin-top: 1.75rem;
  margin-bottom: 1.5rem;
}

.dashboard-home .quick-link-card {
  background: var(--surface-lowest);
  border: var(--dash-quiet-border);
  box-shadow: none;
  padding: 0.85rem 0.45rem;
  border-radius: var(--dash-quiet-radius);
}

.dashboard-home .quick-link-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--dash-quiet-shadow);
  border-color: color-mix(in srgb, var(--method-accent, var(--outline)) 22%, var(--outline-variant));
}

.dashboard-home .quick-link-icon {
  color: color-mix(in srgb, var(--method-accent, var(--on-surface-mid)) 40%, var(--on-surface-mid));
  opacity: 0.95;
}

.dashboard-home .quick-link-label {
  font-weight: 500;
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
}

.dashboard-home .dash-bento-12 {
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.dashboard-home .dash-bento-col-8 {
  gap: 1.25rem;
}

.dashboard-home .dash-bento-col-4 {
  gap: 1.25rem;
}

.dashboard-home .dash-student-card {
  box-shadow: var(--dash-quiet-shadow);
  border: var(--dash-quiet-border);
  padding: 1.35rem 1.2rem;
  border-radius: var(--dash-quiet-radius);
}

.dashboard-home .dash-student-card-deco {
  opacity: 0.035;
}

.dashboard-home .dash-student-name {
  font-weight: 700;
  font-size: var(--text-md);
}

.dashboard-home .dash-status-pill--student {
  background: var(--dash-pill-bg);
  color: var(--dash-pill-fg);
}

.dashboard-home .dash-status-pill {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.28rem 0.65rem;
}

.dashboard-home .dash-progress-label,
.dashboard-home .dash-progress-pct {
  color: var(--on-surface-mid);
  font-weight: 500;
  font-size: var(--text-sm);
}

.dashboard-home .dash-progress-pct {
  font-variant-numeric: tabular-nums;
}

.dashboard-home .dash-progress-track--student {
  background: color-mix(in srgb, var(--dash-student-progress, var(--primary)) 14%, transparent);
}

.dashboard-home .dash-progress-fill--student {
  background: var(--dash-student-progress, var(--primary));
  box-shadow: none !important;
}

/* Remove glow on progress bars inside dashboard feature cards */
.dashboard-home .dash-card .dash-progress-fill {
  box-shadow: none !important;
}

.dashboard-home .dash-student-metric {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 55%, transparent);
  padding: 0.65rem 0.5rem;
}

.dashboard-home .dash-student-metric-label {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-size: var(--text-xs);
  opacity: 0.55;
}

.dashboard-home .dash-student-metric-value {
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--on-surface);
}

.dashboard-home .dash-whats-next {
  background: var(--surface-lowest);
  border: var(--dash-quiet-border);
  box-shadow: var(--dash-quiet-shadow);
  border-radius: var(--dash-quiet-radius);
  padding: 1.3rem 1.1rem;
}

.dashboard-home .dash-whats-next-title {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  margin-bottom: 1rem;
}

.dashboard-home .dash-timeline-line {
  background: color-mix(in srgb, var(--outline-variant) 80%, transparent);
}

.dashboard-home .dash-timeline-title {
  font-weight: 600;
  font-size: var(--text-base);
}

.dashboard-home .dash-whats-next-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--outline-variant) 65%, transparent);
}

.dashboard-home .dash-planner-link {
  background: var(--primary);
  color: var(--on-primary, #fff);
  box-shadow: none;
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-md, 0.5rem);
  padding: 0.55rem 1rem;
}

.dashboard-home .dash-planner-link:hover {
  opacity: 0.94;
  filter: brightness(1.03);
}

.dashboard-home .dash-sidebar-card {
  box-shadow: var(--dash-quiet-shadow);
  border: var(--dash-quiet-border);
  border-radius: var(--dash-quiet-radius);
  padding: 1.1rem 1rem;
}

.dashboard-home .dash-sidebar-card-title {
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--on-surface);
}

.dashboard-home .dash-tip-section-title {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
}

.dashboard-home .dash-tip-body {
  font-size: var(--text-base);
  line-height: 1.55;
}

.dashboard-home .dash-accent-link {
  font-weight: 600;
  color: var(--on-surface-mid);
}

.dashboard-home .dash-accent-link:hover {
  color: var(--primary);
  opacity: 1;
}

.dashboard-home .schedule-grid {
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.dashboard-home .child-col {
  box-shadow: var(--dash-quiet-shadow);
  border: var(--dash-quiet-border);
  border-radius: var(--dash-quiet-radius);
}

.dashboard-home .child-header {
  background: color-mix(in srgb, var(--surface-container-low) 50%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 50%, transparent);
  padding: 0.75rem 1rem;
  border-radius: var(--dash-quiet-radius) var(--dash-quiet-radius) 0 0;
}

.dashboard-home .child-name {
  font-weight: 600;
}

.dashboard-home .child-grade {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: var(--text-xs);
}

.dashboard-home .dash-stats.stats-bar {
  margin-top: 2rem;
  gap: 0.75rem;
}

.dashboard-home .dash-stat-card {
  box-shadow: var(--dash-quiet-shadow);
  border: var(--dash-quiet-border);
  border-radius: var(--dash-quiet-radius);
  padding: 1rem 0.85rem;
}

.dashboard-home .dash-stat-num {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--on-surface) !important;
}

.dashboard-home .dash-stat-label {
  text-transform: none;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.dashboard-home .dash-cards-grid {
  gap: 1.1rem;
}

.dashboard-home .dash-card {
  box-shadow: var(--dash-quiet-shadow);
  border: var(--dash-quiet-border);
  border-radius: var(--dash-quiet-radius);
}

.dashboard-home .dash-card-head {
  background: transparent;
  border-bottom: 1px solid var(--outline-variant);
  padding: 0.85rem 1.1rem;
}

.dashboard-home .dash-card-title {
  text-transform: none;
  letter-spacing: 0.04em;
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
}

.dashboard-home .u-mb-5 {
  margin-bottom: 1rem !important;
}

.dashboard-home .u-mt-8 {
  margin-top: 2rem !important;
}

.dash-bento-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.dash-bento-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.5rem;
  align-items: start;
}

.dash-bento-main { min-width: 0; }

.dash-bento-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dash-aside-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-lg);
}

.dash-aside-card--reading { background: var(--surface-container-low); }
.dash-aside-card--journal { background: var(--surface-container-low); }

.dash-aside-icon {
  font-size: var(--text-xl);
  margin-bottom: 0.5rem;
}

.dash-aside-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
}

.dash-reading-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.dash-reading-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.dash-reading-item:hover { color: var(--primary); }

.dash-aside-link {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.dash-aside-link:hover { opacity: 0.7; }

/* ── Stats Strip ── */
.dash-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.dash-stat-card {
  flex: 1;
  min-width: 120px;
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.dash-stat-card--export {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.dash-stat-num {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}

.dash-stat-num--gold      { color: var(--secondary); }
.dash-stat-num--sky       { color: var(--primary); }
.dash-stat-num--forest    { color: #2d8a4e; }
.dash-stat-num--rose      { color: var(--rose); }
.dash-stat-num--tertiary  { color: var(--tertiary); }

.dash-stat-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

/* ── Bottom Cards Grid ── */
.dash-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.dash-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.dash-card-head {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-container-low);
}

.dash-card-head--spaced {
  justify-content: space-between;
}

.dash-card-emoji {
  font-size: var(--text-lg);
  line-height: 1;
}

.dash-reading-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dash-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  flex: 1;
}

.dash-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

/* ─── TODAY'S SCHEDULE ─── */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

.child-col {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.child-header {
  padding: 0.85rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.child-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.85;
}

.child-name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--on-surface);
}

.child-grade {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  color: var(--on-surface-subtle);
  letter-spacing: 0.08em;
  margin-left: auto;
  font-weight: 500;
}

.add-lesson-btn {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-left: 0.4rem;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
  flex-shrink: 0;
  font-weight: 700;
}
.child-header:hover .add-lesson-btn { opacity: 1; }

.lesson-list { padding: 0; }

.lesson-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1.2rem;
  margin-bottom: 0;
  transition: background var(--duration-fast) var(--ease-standard);
  position: relative;
  user-select: none;
  border-radius: 0;
}
.lesson-item:last-child { border-bottom: none; }
.lesson-item:hover {
  background: var(--surface-container-low);
}

.lesson-check-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
}

.lesson-check {
  width: 19px; height: 19px;
  border: 2px solid var(--surface-container-high);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-fast) var(--ease-standard);
}
.lesson-check-btn:hover .lesson-check {
  border-color: var(--primary);
  transform: scale(1.08);
}
.lesson-check-btn:active .lesson-check {
  transform: scale(0.9);
}

.lesson-item.done .lesson-check {
  background: var(--primary);
  border-color: var(--primary);
}
.lesson-item.done .lesson-check::after {
  content: '✓';
  color: white;
  font-size: 0.55rem;
}
.lesson-item.done .lesson-title {
  text-decoration: line-through;
  color: var(--on-surface-subtle);
}

.lesson-body { flex: 1; }

.lesson-subject {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

/* Subject color tokens */
.subj-grammar   { color: var(--secondary); }
.subj-math      { color: var(--sky); }
.subj-history   { color: var(--terracotta); }
.subj-reading   { color: var(--gold); }
.subj-nature    { color: #2d8a4e; }
.subj-latin     { color: var(--rose); }
.subj-rhetoric  { color: var(--secondary); }
.subj-science   { color: #2d8a4e; }
.subj-composer  { color: #7c5ce0; }
.subj-art       { color: var(--tertiary); }
.subj-literature { color: var(--terracotta); }
.subj-pre-algebra { color: var(--sky); }

.lesson-title {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
  color: var(--on-surface);
}

.lesson-duration {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  color: var(--on-surface-subtle);
  margin-top: 0.15rem;
  font-weight: 500;
}

.lesson-empty {
  padding: 1.75rem 0.7rem;
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  font-style: italic;
  text-align: center;
}

/* ─── RECORD STRIP ─── */
.record-strip {
  background: var(--primary);
  border-radius: var(--radius-xl);
  padding: 1.4rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.record-item { text-align: center; }

.record-num {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
}

.record-label {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(252, 249, 246, 0.55);
  margin-top: 0.25rem;
  font-weight: 600;
}

.record-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.12);
}

.record-export {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.record-export-label {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  color: rgba(252, 249, 246, 0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.export-btns { display: flex; gap: 0.5rem; }

.export-btn {
  background: rgba(255,255,255,0.1);
  color: rgba(252, 249, 246, 0.9);
  border: none;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.export-btn:hover:not(:disabled) { background: rgba(255,255,255,0.18); }
.export-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ─── CARD ─── */
.card {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-sm);
}

.card--stacked {
  margin-bottom: 1.2rem;
}

.card-head {
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--outline-variant);
}

.card-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.card-action {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  border: none;
  background: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.card-action:hover { opacity: 0.7; }

/* ─── MODERN SKELETON LOADER ─── */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-container-high);
  border-radius: var(--radius-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer 1.5s infinite;
}

.skeleton-text { height: 1rem; width: 100%; margin-bottom: 0.5rem; }
.skeleton-text:last-child { margin-bottom: 0; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-card { height: 120px; width: 100%; border-radius: var(--radius-xl); }

.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

/* ─── OUTSIDE TRACKER (CARD VARIANT) ─── */
.outside-progress {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.outside-track {
  flex: 1;
  height: 12px;
  background: var(--surface-container-high);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.outside-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-container));
  border-radius: var(--radius-sm);
  transition: width var(--duration-slow) var(--ease-standard);
}
.outside-stats {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  color: var(--on-surface);
  font-style: italic;
  font-weight: 500;
  width: 90px;
  text-align: right;
}
.outside-form {
  display: flex;
  gap: 0.6rem;
}
.outside-input {
  flex: 1;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  background: var(--surface-container-low);
  color: var(--on-surface);
}
.outside-input:focus {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  border-color: transparent;
}
.outside-btn {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0 1.4rem;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  box-shadow: 0 4px 16px rgba(28, 29, 26, 0.25);
}
.outside-btn:hover {
  background: var(--primary-hover);
}
.outside-btn:active {
  transform: scale(0.95);
}

.card-body { padding: 1rem 1.5rem 1.5rem; }

.preserve-whitespace { white-space: pre-wrap; }

.evidence-subject-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.evidence-subject-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-base);
}

.term-planner-page {
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.45rem);
  width: 100%;
  padding-block: 0.25rem 2.5rem;
}

.term-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(42rem, 100%), 1fr));
  gap: 1rem;
  margin-top: 0;
}

.term-list-heading {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.term-card,
.term-spotlight {
  margin-bottom: 0;
}

.term-planner-header {
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 0;
}

.term-planner-header__actions {
  flex-shrink: 0;
}

.term-year-dashboard,
.term-bulk-editor {
  margin-bottom: 0;
  overflow: hidden;
}

.term-year-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem);
  gap: 1rem;
  align-items: stretch;
}

.term-year-dashboard__main,
.term-current-panel {
  min-width: 0;
  border: 1px solid var(--outline-variant);
  border-radius: 1.35rem;
  background: var(--surface-lowest);
  box-shadow: 0 16px 42px color-mix(in srgb, var(--on-surface) 6%, transparent);
}

.term-year-dashboard__main {
  display: grid;
  gap: 1rem;
  padding: clamp(1.2rem, 2vw, 1.65rem);
}

.term-year-dashboard__main h2,
.term-current-panel h3 {
  margin: 0;
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1.08;
}

.term-year-dashboard__main h2 {
  max-width: 48rem;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
}

.term-section-label {
  color: var(--on-surface-subtle);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.term-year-stats,
.term-current-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.term-year-stats span,
.term-current-metrics span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  min-height: 2.2rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--outline-variant);
  border-radius: 999px;
  background: var(--surface-container-low);
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
  font-weight: 650;
}

.term-year-stats strong,
.term-current-metrics strong {
  color: var(--on-surface);
  font-size: 1rem;
}

.term-current-panel {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.1rem, 1.8vw, 1.45rem);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 12%, transparent), transparent 42%),
    var(--surface-lowest);
}

.term-current-panel__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.term-current-panel h3 {
  margin-top: 0.2rem;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.term-current-panel p {
  margin: 0.35rem 0 0;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
}

.term-current-progress {
  height: 0.65rem;
  border-radius: 999px;
  background: var(--surface-container-low);
  overflow: hidden;
}

.term-current-progress span {
  display: block;
  height: 100%;
  min-width: 0.35rem;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.term-current-actions,
.term-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.term-action-btn .material-symbols-outlined {
  font-size: 1.05rem;
}

.term-current-actions {
  flex-wrap: wrap;
}

.term-icon-btn {
  width: 2.15rem;
  height: 2.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.term-icon-btn .material-symbols-outlined {
  font-size: 1rem;
}

.term-bulk-editor__head {
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1rem, 1.7vw, 1.35rem) clamp(1.1rem, 2vw, 1.55rem);
}

.term-timeline {
  display: flex;
  gap: 0.55rem;
  margin: 0;
  min-height: 4.5rem;
  overflow-x: auto;
  padding: 0.1rem 0 0.35rem;
  scroll-snap-type: x proximity;
}

.term-timeline-item {
  --timeline-accent: var(--primary);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-left: 4px solid var(--timeline-accent);
  border-radius: 0.95rem;
  color: var(--on-surface);
  display: flex;
  flex: 1 0 max(var(--term-width), 12rem);
  flex-direction: column;
  gap: 0.4rem;
  justify-content: center;
  min-width: 12rem;
  padding: 0.85rem 1rem;
  scroll-snap-align: start;
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.term-timeline-item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.term-timeline-item--current { --timeline-accent: var(--secondary); }
.term-timeline-item--upcoming { --timeline-accent: var(--gold); }
.term-timeline-item--past { --timeline-accent: var(--terracotta); }

.term-timeline-item__name {
  font-weight: 700;
  line-height: 1.2;
}

.term-timeline-item__meta {
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
}

.term-bulk-form {
  margin: 0;
}

.term-bulk-table {
  border-top: 1px solid var(--outline-variant);
  border-bottom: 1px solid var(--outline-variant);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  overflow-x: auto;
}

.term-bulk-row {
  display: grid;
  grid-template-columns: minmax(16rem, 1.25fr) minmax(13rem, 1fr) minmax(10rem, 0.7fr) minmax(10rem, 0.7fr) minmax(8rem, 0.5fr) minmax(6rem, 0.35fr);
  min-width: 62rem;
}

.term-bulk-row + .term-bulk-row {
  border-top: 1px solid var(--outline-variant);
}

.term-bulk-row--header {
  background: var(--surface-container-low);
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.term-bulk-row--header > div,
.term-bulk-cell {
  padding: 0.85rem clamp(0.85rem, 1.25vw, 1.15rem);
}

.term-bulk-cell {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  min-width: 0;
}

.term-bulk-cell + .term-bulk-cell {
  border-left: 1px solid var(--outline-variant);
}

.term-bulk-cell--actions {
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}

.term-bulk-row--errored {
  background: color-mix(in srgb, var(--error) 8%, var(--surface));
}

.term-bulk-form__footer {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem clamp(1.1rem, 2vw, 1.55rem);
  margin-top: 0;
}

.term-bulk-form__hint {
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.term-card--current {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--outline-variant));
  box-shadow: inset 4px 0 0 var(--primary), 0 14px 34px color-mix(in srgb, var(--primary) 7%, transparent);
}

.term-card {
  overflow: hidden;
  margin-bottom: 0;
}

.term-card > .card-head {
  padding: clamp(1rem, 1.7vw, 1.35rem) clamp(1.1rem, 2vw, 1.55rem);
  background: var(--surface-container-low);
}

.term-card > .card-body {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 1.7vw, 1.35rem) clamp(1.1rem, 2vw, 1.55rem);
}

.term-spotlight {
  background: var(--surface-container-low);
  box-shadow: inset 4px 0 0 var(--primary);
}

.term-card-curriculum {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 1.25rem;
  font-weight: 600;
}

.term-card-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.term-status-badge {
  border: 1.5px solid currentColor;
  border-radius: var(--radius-full);
  padding: 0.3rem 0.85rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.term-status-badge--current {
  background: var(--sage-pale);
  color: var(--secondary);
  border-color: var(--secondary);
}

.term-status-badge--upcoming {
  background: var(--gold-pale);
  color: var(--gold);
  border-color: var(--gold);
}

.term-status-badge--past {
  background: var(--terra-pale);
  color: var(--terracotta);
  border-color: var(--terracotta);
}

.term-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0;
}

.term-summary-grid--wide {
  margin-bottom: 2rem;
}

.term-summary-stat {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: clamp(0.8rem, 1.3vw, 1rem);
  min-width: 0;
}

.term-summary-value {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}

.term-summary-label {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-top: 0.4rem;
  font-weight: 600;
}

.term-card .card-actions {
  gap: 0.55rem;
  margin-top: 0.1rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--outline-variant);
}

.term-card .card-actions .button_to {
  margin: 0;
}

.term-form-hint {
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
  line-height: 1.5;
  padding-top: 1.8rem;
}

.term-week-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.term-week-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(180px, 1fr) auto;
  gap: 1rem;
  align-items: center;
  border-radius: var(--radius-lg);
  padding: 1rem;
  background: var(--surface-lowest);
  box-shadow: 0 1px 6px var(--shadow);
}

.term-week-row--current {
  background: var(--surface-container-low);
  box-shadow: 0 2px 12px rgba(64, 92, 101, 0.1);
}

.term-week-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.term-week-num {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--on-surface);
}

.term-week-range {
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
  font-style: italic;
}

.term-week-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.term-week-metric {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.term-week-metric-value {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface);
  font-weight: 600;
}

.term-week-metric-label {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

.term-week-progress {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.term-week-progress-track {
  flex: 1;
  height: 6px;
  background: var(--surface-container-high);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.term-week-progress-fill {
  height: 100%;
  background: var(--secondary);
  border-radius: inherit;
}

.term-week-progress-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  min-width: 34px;
  text-align: right;
  font-weight: 600;
}

.term-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 1.2rem;
}

.term-recent-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.term-recent-item {
  display: block;
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  background: var(--surface-lowest);
  box-shadow: 0 1px 6px var(--shadow);
  transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.term-recent-item:hover {
  background: var(--surface-container-low);
  box-shadow: 0 4px 16px var(--shadow);
}

.term-recent-meta {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.45rem;
  font-weight: 600;
}

.term-recent-child {
  font-weight: 700;
}

.term-recent-title {
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--on-surface);
}

.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}

.subject-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.subject-card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1 1 auto;
}

.subject-card-profile {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
}

.subject-card-profile span {
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subject-card-profile strong {
  color: var(--on-surface);
  font-size: var(--text-sm);
  line-height: 1.25;
}

.subject-card-profile small {
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.subject-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.subject-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  align-items: start;
}

.subject-stat {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 0.85rem 0.9rem;
  min-height: 84px;
}

.subject-stat--full {
  grid-column: 1 / -1;
  max-width: calc(50% - 0.35rem);
}

.subject-card-actions {
  margin-top: auto;
  align-items: center;
}

.library-form-panel,
.subject-profile-card {
  padding: 1.05rem 1.1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-sm);
}

.library-form-panel {
  margin: 1rem 0;
}

.library-form-panel__head {
  margin-bottom: 0.95rem;
}

.library-form-panel__head h2,
.subject-profile-card h2 {
  margin: 0;
  color: var(--on-surface);
  font-size: var(--text-md);
  font-weight: 850;
}

.library-form-panel__head p,
.subject-profile-card p {
  margin: 0.25rem 0 0;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.subject-profile-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.subject-profile-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.subject-profile-card__meta dt {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subject-profile-card__meta dd {
  margin: 0.2rem 0 0;
  color: var(--on-surface);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.subject-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.subject-swatch-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.subject-swatch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  position: relative;
}

.subject-swatch-btn:hover {
  background: var(--surface-container);
}

.subject-swatch-btn--active,
.subject-swatch-btn:has(input:checked) {
  background: var(--surface-container);
  box-shadow: 0 0 0 2px var(--on-surface);
}

.subject-swatch-label {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-mid);
}

.subject-inline-note {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  font-weight: 600;
}

.subj-dot-grammar   { background: var(--secondary); }
.subj-dot-math      { background: var(--sky); }
.subj-dot-history   { background: var(--terracotta); }
.subj-dot-reading   { background: var(--gold); }
.subj-dot-nature    { background: #2d8a4e; }
.subj-dot-latin     { background: var(--rose); }
.subj-dot-rhetoric  { background: var(--secondary); }
.subj-dot-science   { background: #2d8a4e; }
.subj-dot-composer  { background: #7c5ce0; }
.subj-dot-art       { background: var(--tertiary); }
.subj-dot-literature { background: var(--terracotta); }
.subj-dot-pre-algebra { background: var(--sky); }

/* ─── NARRATIONS ─── */
.narration-item {
  padding: 1rem 0;
}
.narration-item + .narration-item {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-top: 0.5rem;
}

.narration-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.4rem;
}

.narration-child {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.narration-subject {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--on-surface-subtle);
}

.narration-date {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  margin-left: auto;
}

.narration-delete {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
  margin-left: 0.5rem;
}
.narration-item:hover .narration-delete { opacity: 0.6; }
.narration-delete:hover { opacity: 1 !important; color: var(--terracotta); }

.narration-text {
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  line-height: 1.65;
  font-style: italic;
  font-family: var(--font-sans);
}

/* ─── STATS BAR (unified) ─── */
.stats-bar {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}
.stats-bar--bordered {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.4rem;
}
.stats-bar--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-4);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.stat--card {
  background: var(--surface-container-low);
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  min-width: 130px;
}
.stat-num {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--on-surface);
}
.stat-num--lg {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}
.stat-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-top: 0.15rem;
}
.stat-divider {
  width: 1px;
  height: 2rem;
  background: var(--outline-variant);
  align-self: center;
}

/* ─── DETAIL GRID ─── */
.detail-grid {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.detail-item-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.25rem;
}
.detail-item-value {
  font-size: var(--text-md);
  font-weight: 600;
}

/* ─── CARD ACTIONS (unified) ─── */
.card-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

/* ─── TERM GRID ─── */
.term-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}

.term-week {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 0.6rem 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
}
.term-week:hover { background: var(--surface-container); }
.term-week.current { background: var(--surface-container); outline: 2px solid var(--secondary); }
.term-week.completed { opacity: 0.45; }

.term-week-num {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  font-weight: 600;
}

.term-week-dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 0.3rem;
}

.t-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--secondary);
  opacity: 0.25;
}
.t-dot.on { opacity: 1; }

/* ─── PILLARS ─── */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.pillar {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
}

.pillar-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--on-surface);
}

.pillar-desc {
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  line-height: 1.6;
}

.pillar-features {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pillar-feature {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
}

.pillar-feature::before {
  content: '→';
  color: var(--secondary);
  flex-shrink: 0;
  font-size: var(--text-xs);
  margin-top: 0.05rem;
}

/* ─── FORMS ─── */
.form-page-header {
  max-width: 640px;
  margin: 0 auto 1.5rem;
}

.form-card {
  max-width: 640px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-xl);
  padding: 2rem;
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-sm);
}

.form-callout {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--method-accent, var(--primary)) 22%, var(--outline-variant));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--method-accent-pale, var(--surface-container-low)) 72%, var(--surface-lowest));
  color: var(--on-surface);
  font-size: var(--text-sm);
}

.form-callout span {
  color: var(--on-surface-mid);
  line-height: 1.45;
}

.trust-cue-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.saved-indicator,
.last-updated,
.included-in-export {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.8rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-lowest) 88%, var(--primary) 12%);
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  line-height: 1.25;
  white-space: nowrap;
}

.saved-indicator__icon,
.last-updated__icon,
.included-in-export__icon {
  font-size: 1rem;
}

.saved-indicator--saved,
.included-in-export--yes {
  border-color: color-mix(in srgb, var(--success, #2d8a4e) 28%, var(--outline-variant));
  background: color-mix(in srgb, var(--surface-lowest) 86%, #2d8a4e 14%);
  color: color-mix(in srgb, #2d8a4e 72%, var(--on-surface));
}

.saved-indicator--failed {
  border-color: color-mix(in srgb, var(--error) 35%, var(--outline-variant));
  background: color-mix(in srgb, var(--surface-lowest) 86%, var(--error) 14%);
  color: var(--error);
}

.saved-indicator--saving .saved-indicator__icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.provenance,
.archive-notice {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--method-accent, var(--primary)) 24%, var(--outline-variant));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--method-accent-pale, var(--surface-container-low)) 70%, var(--surface-lowest));
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
}

.provenance__icon,
.archive-notice__icon {
  color: var(--method-accent, var(--primary));
  font-size: 1.25rem;
}

.provenance__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.provenance__source,
.archive-notice strong {
  color: var(--on-surface);
  font-weight: 650;
}

.provenance__note {
  color: var(--on-surface-subtle);
}

.archive-notice {
  margin: 0.75rem 1rem 0;
}

.archive-notice__restore {
  margin-left: 0.5rem;
}

.quick-log-card input[type="file"] {
  min-height: 3rem;
  padding: 0.65rem;
}

.reschedule-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 1rem 0;
}

.reschedule-preview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-lowest);
}

.reschedule-preview-title {
  font-weight: 650;
  color: var(--on-surface);
}

.reschedule-preview-meta {
  margin-top: 0.15rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
}

.reschedule-preview-dates {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.reschedule-preview-dates .material-symbols-outlined {
  font-size: 1rem;
  color: var(--method-accent, var(--primary));
}

@media (max-width: 640px) {
  .reschedule-preview-item,
  .reschedule-preview-dates {
    align-items: flex-start;
    flex-direction: column;
  }
}

.form-card-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--outline-variant);
}

.form-card-header .page-title {
  font-size: var(--text-lg);
}

.form-card-header .page-subtitle {
  margin-top: 0.2rem;
}

.binder-form { display: flex; flex-direction: column; gap: 1.2rem; }

.form-group { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Inline "label on left, action on right" used on form fields that have an
   adjacent secondary action (e.g. the AI title-suggest button on the lesson
   modal). The label keeps its baseline; the action sits as a chip on the right. */
.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* AI lesson title suggestions ---------------------------------------------- */

.lesson-ai-suggest-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--outline-variant));
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-lowest));
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.lesson-ai-suggest-btn:hover:not([disabled]) {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-lowest));
  border-color: color-mix(in srgb, var(--primary) 45%, var(--outline-variant));
}
.lesson-ai-suggest-btn[disabled] { opacity: 0.6; cursor: progress; }
.lesson-ai-suggest-btn .material-symbols-outlined { font-size: 1rem; }

.lesson-ai-suggest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.lesson-ai-suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  color: var(--on-surface);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  line-height: 1.2;
  text-align: left;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.lesson-ai-suggest-chip:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-lowest));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--outline-variant));
}
.lesson-ai-suggest-chip--picked {
  opacity: 0.55;
}
.lesson-ai-suggest-chip .material-symbols-outlined {
  font-size: 0.85rem;
  color: var(--primary);
}

.lesson-ai-suggest-chip--skeleton {
  width: 8rem;
  height: 1.7rem;
  background: linear-gradient(
    90deg,
    var(--surface-container) 0%,
    var(--surface-container-low) 50%,
    var(--surface-container) 100%
  );
  background-size: 200% 100%;
  animation: lessonAiSuggestShimmer 1.4s ease-in-out infinite;
  border-color: transparent;
}

@keyframes lessonAiSuggestShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.lesson-ai-suggest-error {
  margin: 0.4rem 0 0;
  font-size: var(--text-xs);
  color: var(--error, #b91c1c);
}

/* Add-details disclosure inside the Add Lesson modal */
.lesson-modal-details {
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--surface-container) 30%, var(--surface-lowest));
}
.lesson-modal-details > summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface-mid);
  list-style: none;
}
.lesson-modal-details > summary::marker,
.lesson-modal-details > summary::-webkit-details-marker { display: none; }
.lesson-modal-details > summary::before {
  content: "+ ";
  font-weight: 700;
  color: var(--primary);
}
.lesson-modal-details[open] > summary::before { content: "− "; }

@media (prefers-reduced-motion: reduce) {
  .lesson-ai-suggest-chip--skeleton { animation: none; }
}

.form-fieldset {
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-lowest) 72%, var(--surface-container-low));
}

.form-fieldset__legend {
  padding: 0 0.35rem;
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  margin-top: 0.2rem;
  line-height: 1.4;
}

.form-check {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.form-check-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.form-check-row .form-label {
  margin: 0;
  font-weight: 500;
}

.form-check-grid {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.form-check-option {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-base);
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-md);
  transition: background var(--duration-base) var(--ease-standard);
}

.form-check-option:hover {
  background: var(--surface-container-low);
}

.form-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--on-surface);
}

.form-input, .form-select, .form-textarea {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.1rem;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--on-surface);
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
  width: 100%;
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--focus-ring-border);
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
  background: var(--surface-lowest);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: color-mix(in srgb, var(--on-surface) 48%, transparent);
}

.form-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--on-surface-subtle) 50%),
    linear-gradient(135deg, var(--on-surface-subtle) 50%, transparent 50%);
  background-position:
    calc(100% - 1.1rem) 50%,
    calc(100% - 0.75rem) 50%;
  background-size: 0.38rem 0.38rem, 0.38rem 0.38rem;
  background-repeat: no-repeat;
  padding-right: 2.35rem;
}

.form-file-input {
  cursor: pointer;
  color: var(--on-surface-mid);
}

.form-file-input::file-selector-button,
.form-file-input::-webkit-file-upload-button {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-lowest));
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--outline-variant));
  margin-right: 0.85rem;
}

.form-file-input::file-selector-button:hover,
.form-file-input::-webkit-file-upload-button:hover {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-lowest));
  border-color: var(--primary);
}

/* Native date controls: tell the browser to render the inner picker in dark mode
   so its text and spinner buttons match our dark fill. */
body.theme-dark .form-input[type="date"],
body.theme-dark .form-input[type="datetime-local"],
body.theme-dark .form-input[type="month"] {
  color-scheme: dark;
}

/* Slightly higher specificity for onboarding ghost links (e.g. term Back). */
body.onboarding-body.theme-dark .btn-ghost,
body.onboarding-body.theme-dark .btn-ghost {
  color: var(--on-primary);
}

body.onboarding-body.theme-dark .btn-ghost:hover,
body.onboarding-body.theme-dark .btn-ghost:hover {
  color: var(--on-surface);
}

.form-textarea { resize: vertical; min-height: 120px; }

.form-actions {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding-top: 0.75rem;
}

.form-errors {
  background: rgba(172, 44, 0, 0.08);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
}

.form-error-item {
  font-size: var(--text-base);
  color: var(--tertiary);
}

.curriculum-list-items {
  padding: 1.1rem;
}

.curriculum-list-items__rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.curriculum-list-item-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 0.8rem 0.9rem;
}

.curriculum-list-item-row__title {
  min-width: 0;
}

.curriculum-list-item-row__remove,
.curriculum-list-item-row__remove-check {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0 0.7rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--on-surface-mid);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  justify-self: start;
}

.curriculum-list-item-row__remove:hover,
.curriculum-list-item-row__remove-check:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}

.curriculum-list-items__add {
  margin-top: 0.9rem;
  align-self: flex-start;
}

/* Color picker */
.color-picker {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.color-swatch {
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all var(--duration-base) var(--ease-standard);
}

.color-preset-btn {
  background: none;
  border: none;
  padding: 3px;
  cursor: pointer;
  border-radius: 50%;
  transition: transform var(--duration-base) var(--ease-standard);
}
.color-preset-btn:hover { transform: scale(1.15); }
.color-preset-btn--active .color-swatch {
  border-color: var(--on-surface);
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--surface-lowest), 0 0 0 4px var(--on-surface);
}

.color-custom-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  padding: 3px 10px 3px 3px;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
  transition: background var(--duration-fast) var(--ease-standard);
}
.color-custom-btn:hover { background: var(--surface-container); }
.color-custom-btn--active { outline: 2px solid var(--on-surface); outline-offset: 1px; }

.color-native-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.color-custom-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  transition: background var(--duration-fast) var(--ease-standard);
}

.color-custom-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-mid);
  font-weight: 600;
}

.settings-accent-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem;
  border-top: 1px solid var(--outline-variant);
}

.settings-accent-title {
  color: var(--on-surface);
  font-weight: 800;
}

.settings-accent-desc {
  max-width: 38rem;
  margin: 0.25rem 0 0;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.settings-accent-picker {
  justify-content: flex-end;
}

.settings-accent-picker .color-swatch,
.settings-accent-picker .color-custom-swatch {
  width: 30px;
  height: 30px;
}

@media (max-width: 700px) {
  .settings-accent-panel {
    grid-template-columns: 1fr;
  }

  .settings-accent-picker {
    justify-content: flex-start;
  }
}

.color-option input:checked + .color-choice {
  background: var(--surface-container);
  outline: 2px solid var(--on-surface);
}

.color-option input:checked + .color-choice .color-swatch {
  border-color: var(--on-surface);
  transform: scale(1.1);
}

/* ─── EMPTY STATE ─── */
.empty-state {
  text-align: center;
  padding: 5rem 2rem;
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  border: 1px solid var(--outline-variant);
  box-shadow: 0 8px 24px rgba(28, 29, 26, 0.04);
}

.empty-icon { font-size: 2rem; margin-bottom: 1.2rem; opacity: 0.45; }

.empty-title {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
  color: var(--on-surface);
}

.empty-desc {
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  max-width: 340px;
  margin: 0 auto;
  line-height: 1.65;
}

.child-pillar {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.25rem;
  gap: 0.85rem;
}

.child-pillar-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0;
}

.child-card-meta {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  color: var(--on-surface-subtle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Children grid: wider cards so stats can sit in a single row */
.pillars:has(.child-pillar) {
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 1rem;
}

/* Compact 4-up stat row inside the child card */
.child-pillar .term-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin-top: 0;
}
.child-pillar .term-summary-stat {
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-md);
  text-align: center;
}
.child-pillar .term-summary-value {
  font-size: var(--text-xl);
  line-height: 1.1;
}
.child-pillar .term-summary-label {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  margin-top: 0.15rem;
}

.child-pillar .pillar-features {
  margin-top: 0;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
}
.child-pillar .pillar-feature { font-size: var(--text-sm); }

.child-pillar .card-actions {
  margin-top: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ------------------------------------------------------------------------
 * Photo upload + gallery (FieldTrip, OutsideSession)
 * ------------------------------------------------------------------------ */
.photo-upload-existing {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.65rem;
}
.photo-upload-thumb {
  margin: 0;
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid #d4ccb8;
  background: #fff;
}
.photo-upload-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.photo-upload-thumb figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.25rem 0.4rem;
  background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0));
  text-align: right;
}
.photo-upload-remove {
  color: #fff;
  font-size: var(--text-xs);
  text-decoration: none;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.photo-upload-remove:hover { color: #ffd2c2; }

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.photo-gallery--inline {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.35rem;
}
.photo-gallery__tile {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid #d4ccb8;
  background: #fff;
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.photo-gallery__tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(28, 20, 8, 0.1);
}
.photo-gallery__tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.photo-gallery__tile--small img { aspect-ratio: 1 / 1; }

.card-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  margin: 0 0 0.6rem;
}

/* ------------------------------------------------------------------------
 * Dashboard "All tools" bucket grid (replaces the popover app launcher)
 * ------------------------------------------------------------------------ */
.home-tools {
  margin: 0.75rem 0 1.5rem;
}
.home-tools__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.home-tools__title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-surface);
  margin: 0;
}
.home-tools__sub {
  margin: 0.2rem 0 0;
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  line-height: 1.45;
}
.home-tools__kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs);
  background: #fff;
  border: 1px solid #d4ccb8;
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  padding: 0.05rem 0.4rem;
  color: var(--on-surface);
}
.home-tools__buckets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (max-width: 900px) {
  .home-tools__buckets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .home-tools__buckets {
    grid-template-columns: 1fr;
  }
}
.home-tools__bucket {
  background: #fff;
  border: 1px solid #d4ccb8;
  border-radius: var(--radius-lg);
  padding: 0.95rem 1rem 1rem;
  box-shadow: 0 1px 2px rgba(28, 20, 8, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.home-tools__bucket-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.home-tools__bucket-title {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-surface);
  margin: 0;
}
.home-tools__bucket-desc {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin: 0;
  line-height: 1.4;
}
.home-tools__tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.4rem;
}
.home-tools__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.7rem 0.4rem 0.6rem;
  border-radius: var(--radius-md);
  background: var(--surface-container);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--on-surface);
  text-align: center;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.home-tools__tile:hover {
  background: #fff;
  border-color: var(--primary);
  transform: translateY(-1px);
}
.home-tools__tile-icon {
  font-size: var(--text-xl) !important;
  color: var(--primary);
  line-height: 1;
}
.home-tools__tile-label {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
}

/* ------------------------------------------------------------------------
 * Outside Sessions quick-log form
 * ------------------------------------------------------------------------ */
.outside-quicklog {
  background: #fff;
  border: 1px solid #d4ccb8;
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem 0.9rem;
  margin: 0 0 1.25rem;
  box-shadow: 0 1px 2px rgba(28, 20, 8, 0.05);
}
.outside-quicklog__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem;
}
.outside-quicklog__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.outside-quicklog__field--grow { flex: 1 1 220px; }
.outside-quicklog__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  font-weight: 600;
}
.outside-quicklog__hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--on-surface-subtle);
}
.outside-quicklog__input { min-width: 120px; }
.outside-quicklog__submit { display: flex; align-items: flex-end; }
.outside-quicklog__post {
  margin: 0.6rem 0 0;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

/* ------------------------------------------------------------------------
 * File-move custom drag image (replaces the browser's URL link preview)
 * ------------------------------------------------------------------------ */
.fm-drag-ghost {
  position: fixed;
  top: -9999px;
  left: -9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem 0.45rem 0.65rem;
  background: #fff;
  border: 1px solid #d4ccb8;
  border-radius: var(--radius-full);
  box-shadow: 0 6px 18px rgba(28, 20, 8, 0.18);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface, #2c1f0d);
  pointer-events: none;
  white-space: nowrap;
  max-width: 280px;
}
.fm-drag-ghost__icon {
  font-size: var(--text-lg) !important;
  line-height: 1;
  color: var(--primary);
}
.fm-drag-ghost__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtle pulse while a spring-load timer is running so the user has
   visual confirmation that sustained hover is about to do something. */
.drive-row.is-spring-loading,
.drive-crumb.is-spring-loading {
  animation: fmSpringLoadPulse 800ms ease-in-out both;
}

@keyframes fmSpringLoadPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent); }
  100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 0%, transparent); }
}

.fm-drag-ghost__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.4rem;
  margin-left: 0.4rem;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary, #fff);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
}

/* Full-page overlay shown while the user is dragging OS files over the
   window. Matches Dropbox's behavior — one clear "drop here to upload"
   affordance instead of hunting for a small zone. */
.fm-global-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: color-mix(in srgb, var(--primary) 12%, rgba(0, 0, 0, 0.35));
  backdrop-filter: blur(4px);
  animation: fmGlobalDropFadeIn 120ms ease-out both;
}

@keyframes fmGlobalDropFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fm-global-drop-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2.5rem 3rem;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 2px dashed var(--primary);
  box-shadow: var(--shadow-md, 0 12px 32px rgba(0, 0, 0, 0.18));
  color: var(--on-surface);
  max-width: min(480px, 90vw);
  text-align: center;
}

.fm-global-drop-overlay__icon {
  font-size: 56px !important;
  line-height: 1;
  color: var(--primary);
  animation: fmDropIconBounce 1.2s ease-in-out infinite;
}

@keyframes fmDropIconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.fm-global-drop-overlay__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.fm-global-drop-overlay__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  font-weight: 400;
}

.child-profile-page {
  max-width: 76rem;
  margin: 0 auto;
}

.child-profile-hero {
  min-height: 13rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 1rem;
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--outline-variant));
  border-radius: var(--radius-2xl, 1.5rem);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--surface-lowest)), var(--surface-lowest) 52%),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--secondary) 18%, transparent), transparent 32%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.child-profile-hero__copy {
  min-width: 0;
}

.child-profile-hero__eyebrow {
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.child-profile-hero h1 {
  margin: 0.35rem 0 0;
  color: var(--on-surface);
  font-size: clamp(2.7rem, 6vw, 4.9rem);
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.child-profile-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
}

.child-profile-hero__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.78rem;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-lowest) 76%, transparent);
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 750;
}

.child-profile-hero__identity {
  min-width: 15rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--outline-variant) 75%, transparent);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface-lowest) 78%, transparent);
}

.child-profile-hero__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.child-profile-action {
  min-height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding-inline: 0.95rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 800;
}

.child-profile-action .material-symbols-outlined {
  font-size: 1.08rem;
}

.child-profile-action--dark {
  background: var(--on-surface);
  border-color: var(--on-surface);
  color: var(--surface-lowest);
}

.child-profile-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-sm);
}

.child-profile-id {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.child-profile-band__mark {
  width: 2.65rem;
  height: 2.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--secondary) 16%, transparent);
  color: color-mix(in srgb, var(--secondary) 70%, var(--on-surface));
}

.child-profile-band__mark .material-symbols-outlined {
  font-size: 1.35rem;
}

.child-profile-band__title {
  color: var(--on-surface);
  font-size: var(--text-md);
  font-weight: 850;
  letter-spacing: -0.01em;
}

.child-profile-avatar {
  width: 4.1rem;
  height: 4.1rem;
  font-size: var(--text-xl);
  border: none;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary) 16%, transparent);
}

.child-profile-name {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 850;
  color: var(--on-surface);
}

.child-profile-page .stats-bar--grid {
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.child-profile-page .stat--card {
  position: relative;
  min-width: 0;
  padding: 1rem;
  border-color: var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.child-profile-page .stat--card:first-child {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-lowest));
  border-color: color-mix(in srgb, var(--primary) 28%, var(--outline-variant));
}

.child-profile-page .stat-icon {
  width: 2.45rem;
  height: 2.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 1.25rem;
}

.child-profile-page .stat--card:nth-child(2) .stat-icon {
  background: color-mix(in srgb, var(--warning, #d97706) 12%, transparent);
  color: var(--warning, #b45309);
}

.child-profile-page .stat--card:nth-child(3) .stat-icon {
  background: color-mix(in srgb, var(--success, #15803d) 12%, transparent);
  color: var(--success, #15803d);
}

.child-profile-page .stat--card:nth-child(4) .stat-icon {
  background: color-mix(in srgb, var(--secondary) 16%, transparent);
  color: color-mix(in srgb, var(--secondary) 68%, var(--on-surface));
}

.child-profile-page .stat-num--lg {
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  font-weight: 850;
  letter-spacing: -0.04em;
}

.child-profile-page .stat-label,
.child-profile-page .card-title {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.08em;
}

.child-profile-page .card {
  border-color: var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.child-profile-page .card-head {
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--surface-container-low) 78%, var(--primary) 4%);
}

.child-profile-page .card-action {
  font-weight: 800;
}

.child-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
  gap: 1.2rem;
}

.child-record-item {
  display: block;
  padding: 0.8rem 0;
}

.child-record-item--compact {
  padding: 0.4rem 0;
}

.child-record-item + .child-record-item {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 0.8rem;
  margin-top: 0.4rem;
}

.child-record-link:hover .child-record-title {
  text-decoration: underline;
}

.child-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.child-record-title {
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--on-surface);
  font-weight: 700;
}

/* ─── FLASH MESSAGES ─── */
.flash {
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  box-shadow: var(--shadow-md);
}

.flash-notice {
  background: rgba(219, 234, 254, 0.78);
  color: #1e40af;
  border: 1px solid rgba(29, 78, 216, 0.16);
}

.flash-alert {
  background: rgba(248, 220, 206, 0.68);
  color: var(--tertiary);
  border: 1px solid rgba(160, 75, 33, 0.14);
}

/* ─── FILTER PILLS ─── */
.filter-pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.filter-pill {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.6);
  border: 1.5px solid rgba(28, 29, 26, 0.08);
  color: var(--on-surface-mid);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.filter-pill:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(28, 29, 26, 0.15);
  color: var(--on-surface);
}

.filter-pill--active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.filter-pill--active:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--on-primary);
}

/* ─── FILE MANAGER ─── */
.fm-storage-bar {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-sm);
}

.fm-storage-info {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin-bottom: 0.4rem;
}

.fm-storage-percent {
  font-weight: 700;
}

.fm-storage-track {
  height: 6px;
  background: var(--surface-container);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.fm-storage-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-xs);
  transition: width var(--duration-slow) var(--ease-standard);
}

.fm-storage-fill[style*="width: 9"],
.fm-storage-fill[style*="width: 100"] {
  background: var(--error, #d32f2f);
}

.fm-search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fm-search-icon {
  position: absolute;
  left: 0.85rem;
  font-size: var(--text-lg);
  color: var(--on-surface-subtle);
  pointer-events: none;
}

.fm-search-input {
  padding-left: 2.5rem !important;
  width: 100%;
}

.fm-upload-card {
  padding: 0;
  overflow: hidden;
}

.uppy-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem;
  border: 2px dashed rgba(28, 29, 26, 0.12);
  border-radius: var(--radius-xl);
  margin: 0.75rem;
  text-align: center;
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}

.uppy-drop-zone:hover,
.uppy-DragDrop--is-dragover .uppy-drop-zone,
.uppy-drop-zone.is-dragover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.uppy-drop-zone--hero {
  margin-top: 2rem;
  padding: 3rem 2rem;
  border-radius: var(--radius-xl);
}

.uppy-drop-zone--hero .uppy-drop-zone__icon {
  font-size: 2.5rem;
  opacity: 0.3;
}

.uppy-drop-zone--compact {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.85rem;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.6rem;
  border-radius: var(--radius-md);
  border-width: 1px;
  border-color: color-mix(in srgb, var(--on-surface) 10%, transparent);
  background: transparent;
  font-size: var(--text-sm);
}

.uppy-drop-zone--compact:hover,
.uppy-drop-zone--compact.is-dragover {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.uppy-drop-zone--compact .uppy-drop-zone__icon {
  font-size: var(--text-lg);
  opacity: 0.4;
}

.uppy-drop-zone__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
}

.uppy-drop-zone--compact .uppy-drop-zone__title {
  font-size: var(--text-base);
}

.uppy-drop-zone__hint {
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  width: 100%;
  text-align: center;
}

.uppy-drop-zone--compact .uppy-drop-zone__hint {
  font-size: var(--text-xs);
  width: auto;
  flex: 1 1 100%;
  text-align: center;
}

.fm-sort-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin-top: 1rem;
  font-size: var(--text-sm);
}

.fm-sort-label {
  color: var(--on-surface-subtle);
  font-weight: 600;
  margin-right: 0.25rem;
}

.fm-sort-link {
  color: var(--on-surface-subtle);
  text-decoration: none;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-3xl);
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.fm-sort-link:hover {
  color: var(--on-surface);
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
}

.fm-sort-link--active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-weight: 600;
}

.fm-sort-chevron {
  margin-left: 0.15rem;
  opacity: 0.85;
}

.fm-file-details {
  margin-top: 1.75rem;
  max-width: 32rem;
  padding: 1.5rem;
}

.fm-file-details .form-group {
  margin-bottom: 0.75rem;
}

.fm-file-details .form-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
}

/* Hide Uppy's default DragDrop button — we use our own UI */
.uppy-DragDrop-container {
  display: contents !important;
}

.uppy-DragDrop-inner {
  display: none !important;
}

.uppy-StatusBar,
[class*="uppy-StatusBar"] {
  background: var(--surface-container-low) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  color: var(--on-surface-mid) !important;
  border: none !important;
  margin-top: 0.5rem;
}

.uppy-StatusBar-progress {
  background: var(--primary) !important;
  border-radius: var(--radius-xs) !important;
}

.uppy-StatusBar-actionBtn--retry {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  padding: 0.35rem 1rem !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  cursor: pointer;
}

.uppy-StatusBar-actionBtn--dismissError {
  background: none !important;
  border: none !important;
  color: var(--on-surface-subtle) !important;
  cursor: pointer;
  font-size: var(--text-md) !important;
}

.uppy-StatusBar.is-error {
  background: color-mix(in srgb, var(--error, #d32f2f) 8%, transparent) !important;
  color: var(--error, #d32f2f) !important;
}

.uppy-StatusBar-statusPrimary {
  color: inherit !important;
  font-weight: 600 !important;
}

.uppy-StatusBar-statusSecondary {
  color: var(--on-surface-subtle) !important;
}

.uppy-StatusBar-actionBtn--close,
.uppy-StatusBar-close {
  color: var(--on-surface-subtle) !important;
}

.uppy-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.75rem;
}

.uppy-file-list:empty {
  display: none;
}

.uppy-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  border-radius: var(--radius-3xl);
  padding: 0.25rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: 600;
}

.direct-upload-status {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.direct-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto auto;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--text-sm);
  padding: 0.35rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--on-surface) 8%, transparent);
}

.direct-upload-row:last-child {
  border-bottom: none;
}

.direct-upload-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--on-surface);
}

.direct-upload-row__track {
  height: 6px;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--on-surface) 10%, transparent);
  overflow: hidden;
}

.direct-upload-row__fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius-xs);
  background: var(--primary);
  transition: width 0.12s ease-out;
}

.direct-upload-row__status {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  text-align: right;
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.direct-upload-row--done .direct-upload-row__status {
  color: var(--primary);
}

.direct-upload-row--error .direct-upload-row__status {
  color: var(--danger, #c62828);
  max-width: none;
  white-space: normal;
  text-align: left;
  grid-column: 1 / -1;
}

.direct-upload-row--error {
  grid-template-columns: minmax(0, 1fr);
}

.direct-upload-error {
  font-size: var(--text-sm);
  color: var(--error);
  padding: 0.35rem 0;
}

/* Batch-progress banner shown while a multi-file upload is in flight. */
.direct-upload-batch-banner {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.4rem;
  background: var(--primary-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--outline-variant);
}

/* End-of-batch summary (e.g., "12 uploaded, 1 failed"). */
.direct-upload-summary {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--on-surface-mid);
  padding: 0.5rem 0.75rem;
  margin-top: 0.4rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  animation: modalFadeIn var(--duration-base) var(--ease-standard);
}

/* Completed rows fade out after a delay so the list doesn't grow unbounded. */
.direct-upload-row--leaving {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
  pointer-events: none;
}

/* Cancelled rows fade similarly to done, but status is muted. */
.direct-upload-row--cancelled .direct-upload-row__status {
  color: var(--on-surface-subtle);
  font-style: italic;
}
.direct-upload-row--cancelled .direct-upload-row__fill {
  background: var(--on-surface-subtle);
}

/* Per-file cancel button. Subtle until hovered so it doesn't fight the
   progress bar for attention. */
.direct-upload-row__cancel {
  background: transparent;
  border: none;
  color: var(--on-surface-subtle);
  padding: 0.3rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.direct-upload-row__cancel .material-symbols-outlined {
  font-size: var(--text-lg);
}
.direct-upload-row__cancel:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}
.direct-upload-row__cancel:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.direct-upload-row__cancel:disabled {
  opacity: 0.5;
  cursor: default;
}
.direct-upload-row__cancel[hidden] {
  display: none;
}

.direct-upload-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.75rem;
}

.direct-upload-file-list:empty {
  display: none;
}

.direct-upload-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  border-radius: var(--radius-3xl);
  padding: 0.25rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: 600;
}

.fm-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
}

.fm-item-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--on-surface);
  flex: 1;
  min-width: 0;
}

a.fm-item-link:hover .fm-item-name {
  color: var(--primary);
}

.fm-item-icon {
  font-size: var(--text-xl);
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.fm-item-icon--folder {
  color: var(--primary);
}

.fm-item-name {
  font-size: var(--text-base);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--duration-base) var(--ease-standard);
}

.fm-item-meta {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  margin-top: 0.1rem;
}

.fm-item-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* ─── FILES (Drive-inspired list UI) ─── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.drive-files-page {
  max-width: none;
  width: 100%;
  margin: 0 auto;
}

.drive-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}

.drive-top__title-block {
  min-width: 0;
  flex: 1 1 auto;
}

.drive-top__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.drive-page-title {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--on-surface);
  margin: 0;
}

.drive-page-tagline {
  margin: 0.45rem 0 0;
  font-size: var(--text-base);
  line-height: 1.6;
  letter-spacing: 0em;
  color: var(--on-surface-subtle);
  max-width: 62ch;
}

.drive-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: var(--space-3);
}

.drive-view-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface-mid);
  text-decoration: none;
  border-radius: var(--radius-full);
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.drive-view-tab:hover {
  color: var(--on-surface);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--outline-variant));
}

.drive-view-tab--active {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--outline-variant));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-lowest));
}

.drive-type-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: var(--space-3);
  align-items: center;
}

.drive-type-chip {
  display: inline-flex;
  padding: 0.3rem 0.65rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-mid);
  text-decoration: none;
  border-radius: var(--radius-full);
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.drive-type-chip:hover {
  color: var(--on-surface);
}

.drive-type-chip--active {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--outline-variant));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-lowest));
}

/* ─── Single-row filter toolbar (Dropbox-aligned) ─── */
.drive-filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.drive-filter-toolbar__right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.drive-filter-toolbar__aux {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-subtle);
  text-decoration: none;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
}

.drive-filter-toolbar__aux:hover {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.drive-filter-toolbar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid var(--outline-variant);
  color: var(--on-surface-mid);
  cursor: pointer;
  padding: 0;
}

.drive-filter-toolbar__icon-btn:hover {
  color: var(--on-surface);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--outline-variant));
}

.drive-filter-toolbar__icon-btn .material-symbols-outlined {
  font-size: 18px;
}

/* ─── Grid layout ─── */
.drive-files-page.is-grid-view .drive-col-header {
  display: none;
}

.drive-files-page.is-grid-view .drive-table-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1rem;
  padding: 0.75rem 0.25rem;
}

.drive-files-page.is-grid-view .drive-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.drive-files-page.is-grid-view .drive-row:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-color: color-mix(in srgb, var(--primary) 25%, var(--outline-variant));
}

.drive-files-page.is-grid-view .drive-cell--check {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
  padding: 0;
}

.drive-files-page.is-grid-view .drive-row {
  position: relative;
}

/* Hide the meta cells in grid mode — dates/size go in the hover tooltip
   via the existing title attributes; the card itself shows thumb + name. */
.drive-files-page.is-grid-view .drive-cell--date,
.drive-files-page.is-grid-view .drive-cell--tagged,
.drive-files-page.is-grid-view .drive-cell--size {
  display: none;
}

.drive-files-page.is-grid-view .drive-cell--name {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 140px;
  text-align: center;
}

.drive-files-page.is-grid-view .drive-file-link {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.drive-files-page.is-grid-view .drive-file-link__thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
}

.drive-files-page.is-grid-view .drive-file-link__icon {
  font-size: 64px !important;
}

.drive-files-page.is-grid-view .drive-file-link__text {
  font-weight: 600;
  font-size: var(--text-sm);
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.drive-files-page.is-grid-view .drive-cell--actions {
  order: 2;
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--outline-variant);
}

.drive-filter-segmented {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--radius-full);
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  padding: 2px;
  gap: 2px;
}

.drive-filter-segmented__tab {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface-mid);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.drive-filter-segmented__tab:hover {
  color: var(--on-surface);
}

.drive-filter-segmented__tab--active {
  color: var(--primary);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.drive-filter-popover {
  position: relative;
}

.drive-filter-popover__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.55rem 0.35rem 0.75rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--on-surface-mid);
  background: transparent;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.drive-filter-popover__trigger:hover {
  color: var(--on-surface);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--outline-variant));
}

.drive-filter-popover__trigger[aria-expanded="true"],
.drive-filter-popover.is-open .drive-filter-popover__trigger {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--outline-variant));
  color: var(--on-surface);
}

.drive-filter-popover__trigger--active {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--outline-variant));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-lowest));
}

.drive-filter-popover__trigger-label strong {
  font-weight: 700;
  color: var(--on-surface);
  margin-left: 0.15rem;
}

.drive-filter-popover__trigger--active .drive-filter-popover__trigger-label strong {
  color: var(--primary);
}

.drive-filter-popover__chev {
  font-size: 18px !important;
  color: currentColor;
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.drive-filter-popover.is-open .drive-filter-popover__chev {
  transform: rotate(180deg);
}

.drive-filter-popover__panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 200px;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: drivePopIn 120ms ease-out both;
}

.drive-filter-popover__panel[hidden] {
  display: none;
}

@keyframes drivePopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.drive-filter-popover__item {
  display: block;
  padding: 0.4rem 0.65rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--on-surface);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.drive-filter-popover__item:hover {
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
}

.drive-filter-popover__item--active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  font-weight: 700;
}

@media (max-width: 700px) {
  .drive-filter-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .drive-filter-segmented {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .drive-filter-segmented::-webkit-scrollbar { display: none; }

  .drive-filter-toolbar__right {
    justify-content: flex-start;
  }
}

.drive-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.65rem 0.85rem;
  margin-bottom: var(--space-3);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-lowest));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--outline-variant));
  border-radius: var(--radius-lg);
}

/* ─── Right-click context menu ─── */
.context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 220px;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: contextPopIn 100ms ease-out both;
}

.context-menu[hidden] {
  display: none;
}

@keyframes contextPopIn {
  from { opacity: 0; transform: translateY(-3px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.context-menu [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.7rem;
  border: none;
  background: transparent;
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
}

.context-menu [role="menuitem"]:hover,
.context-menu [role="menuitem"]:focus-visible {
  background: color-mix(in srgb, var(--on-surface) 7%, transparent);
  outline: none;
}

.context-menu [role="menuitem"] .material-symbols-outlined {
  font-size: 18px;
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.context-menu__label {
  flex: 1;
}

.context-menu__kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

.context-menu__sep {
  height: 1px;
  background: var(--outline-variant);
  margin: 0.25rem 0;
}

.context-menu__sep[hidden] {
  display: none;
}

.context-menu__item--danger {
  color: var(--error, #c0392b) !important;
}

.context-menu__item--danger:hover {
  background: color-mix(in srgb, var(--error, #c0392b) 10%, transparent) !important;
}

.context-menu__item--danger .material-symbols-outlined {
  color: currentColor;
}

/* ─── Inline rename ─── */
.drive-row.is-editing-name .drive-file-link {
  pointer-events: none;
}

.drive-file-link__edit {
  pointer-events: auto;
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.4rem;
  min-width: 0;
  width: 100%;
  max-width: 420px;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.drive-bulk-toolbar[hidden] {
  display: none;
}

.drive-bulk-toolbar__count {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--on-surface);
}

.drive-bulk-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.drive-btn--sm {
  padding: 0.35rem 0.65rem;
  font-size: var(--text-xs);
}

.drive-search-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-left: 0.5rem;
  align-items: center;
}

.drive-search-scope__label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-mid);
  cursor: pointer;
  white-space: nowrap;
}

.drive-move-modal-hint {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  margin: 0 0 1rem;
  line-height: 1.45;
}

.drive-trash-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  margin-bottom: var(--space-4);
  background: color-mix(in srgb, var(--error) 10%, var(--surface-lowest));
  border: 1px solid color-mix(in srgb, var(--error) 25%, var(--outline-variant));
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--on-surface);
  line-height: 1.45;
}

.drive-trash-banner .material-symbols-outlined {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--error);
}

.drive-storage-pill {
  flex-shrink: 0;
  min-width: 11rem;
  padding: 0.5rem 0.85rem;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.drive-storage-pill__text {
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.drive-storage-pill__sep {
  margin: 0 0.15rem;
  color: var(--on-surface-subtle);
  font-weight: 500;
}

.drive-storage-pill__track {
  height: 4px;
  background: var(--surface-container);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.drive-storage-pill__fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-xs);
  transition: width var(--duration-base) var(--ease-standard);
}

.drive-storage-pill__fill[style*="width: 9"],
.drive-storage-pill__fill[style*="width: 100"] {
  background: var(--error);
}

.drive-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.25rem;
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  min-height: 1.5rem;
}

.drive-crumb {
  color: var(--on-surface-mid);
  text-decoration: none;
  font-weight: 500;
  padding: 0.15rem 0.25rem;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.drive-crumb:hover {
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  color: var(--on-surface);
}

.drive-crumb--current {
  color: var(--on-surface);
  font-weight: 600;
  cursor: default;
}

.drive-crumb-sep {
  font-size: var(--text-lg);
  color: var(--on-surface-subtle);
  opacity: 0.65;
  user-select: none;
}

/* Breadcrumb ellipsis for deep paths — collapses middle crumbs into
   a "…" popover so the path stays on one line. */
.drive-crumb-ellipsis {
  position: relative;
  display: inline-flex;
}

.drive-crumb-ellipsis > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.05em;
}

.drive-crumb-ellipsis > summary::-webkit-details-marker {
  display: none;
}

.drive-crumb--ellipsis {
  font-weight: 700;
  color: var(--on-surface-subtle);
}

.drive-crumb-ellipsis[open] > summary {
  color: var(--on-surface);
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
}

.drive-crumb-ellipsis__menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 200px;
  max-width: 360px;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 10;
}

.drive-crumb-ellipsis__item {
  display: block;
  padding: 0.4rem 0.65rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--on-surface);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drive-crumb-ellipsis__item:hover {
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
}

/* ─── Keyboard shortcut help modal ─── */
.drive-shortcut-help {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  animation: drivePopIn 120ms ease-out both;
}

.drive-shortcut-help[hidden] {
  display: none;
}

.drive-shortcut-help__panel {
  max-width: 480px;
  width: calc(100% - 2rem);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.drive-shortcut-help__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--outline-variant);
}

.drive-shortcut-help__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.drive-shortcut-help__close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--on-surface-subtle);
  cursor: pointer;
  padding: 0 0.35rem;
}

.drive-shortcut-help__close:hover {
  color: var(--on-surface);
}

.drive-shortcut-help__list {
  margin: 0;
  padding: 0.75rem 1.25rem 1.25rem;
  display: grid;
  gap: 0.5rem;
}

.drive-shortcut-help__list > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--text-sm);
}

.drive-shortcut-help__list dt {
  display: flex;
  gap: 0.2rem;
  flex-wrap: wrap;
}

.drive-shortcut-help__list dd {
  margin: 0;
  color: var(--on-surface-mid);
}

.drive-shortcut-help__list kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  color: var(--on-surface);
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.drive-search-panel {
  max-width: 720px;
  margin-bottom: var(--space-4);
}

.drive-search-form {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.35rem 0.2rem 0.5rem;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.drive-search-form:focus-within {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--outline-variant));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.drive-search-form__icon {
  font-size: var(--text-xl);
  color: var(--on-surface-subtle);
  margin-left: 0.25rem;
  flex-shrink: 0;
}

.drive-search-form__input {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.5rem 0.35rem !important;
  font-size: var(--text-md) !important;
}

.drive-search-form__input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
}

.drive-search-form__clear {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-full);
}

.drive-search-form__clear:hover {
  background: var(--primary-soft);
}

.drive-results-meta {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  margin: -0.5rem 0 var(--space-4);
}

.drive-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.drive-filter-row__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--on-surface-subtle);
}

.drive-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.drive-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--on-surface-mid);
  text-decoration: none;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.drive-chip:hover {
  background: var(--surface-container-low);
  border-color: var(--outline);
  color: var(--on-surface);
}

.drive-chip--active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--primary);
  font-weight: 600;
}

.drive-inline-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

.drive-inline-sort__link {
  color: var(--on-surface-subtle);
  text-decoration: none;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-full);
  font-weight: 500;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.drive-inline-sort__link:hover {
  color: var(--on-surface);
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
}

.drive-inline-sort__link--active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-weight: 600;
}

.drive-inline-sort__chev {
  margin-left: 0.1rem;
  opacity: 0.85;
}

.drive-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.drive-toolbar__primary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.drive-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.drive-btn .material-symbols-outlined {
  font-size: var(--text-lg);
}

.drive-btn--filled {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
}

.drive-btn--filled:hover {
  background: var(--primary-hover);
}

.drive-btn--outline {
  background: var(--surface-lowest);
  color: var(--on-surface-mid);
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-sm);
}

.drive-btn--outline:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
  border-color: var(--outline);
}

.drive-btn--text {
  background: transparent;
  color: var(--on-surface-mid);
}

.drive-btn--text:hover {
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  color: var(--on-surface);
}

/* Circular icon-only action in the Files toolbar (e.g., Trash). */
.drive-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  color: var(--on-surface-mid);
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.drive-icon-btn:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
  border-color: var(--outline);
}

.drive-icon-btn--active {
  background: var(--primary-container, var(--surface-container));
  color: var(--on-primary-container, var(--on-surface));
  border-color: var(--primary);
}

.drive-icon-btn .material-symbols-outlined {
  font-size: var(--text-lg);
}

.drive-empty__cta {
  margin-top: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.drive-empty__hint--muted {
  margin-top: 0.6rem;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

.drive-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.drive-folder-modal .drive-btn--filled {
  min-width: 5.5rem;
}

.drive-upload-status {
  margin-bottom: var(--space-2);
}

.drive-items-host {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.drive-table-shell {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}

.drive-col-header,
.drive-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(160px, 1fr) 6.5rem 6.5rem 5.5rem 3.5rem minmax(10rem, auto);
  align-items: center;
  column-gap: var(--space-2);
  padding-left: 0.65rem;
  padding-right: 0.65rem;
  min-width: min(100%, 780px);
}

.drive-col-header {
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--outline-variant);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--on-surface-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.drive-col {
  min-width: 0;
}

.drive-col--sortable {
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.3rem;
  margin: -0.2rem -0.3rem;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.drive-col--sortable:hover {
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  color: var(--on-surface);
}

.drive-col--sorted {
  color: var(--primary);
}

.drive-col__chev {
  margin-left: 0.15rem;
  font-weight: 700;
  opacity: 0.8;
}

.drive-table-body.fm-grid {
  flex-direction: column;
  gap: 0;
}

.drive-row {
  border-bottom: 1px solid var(--outline-variant);
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  min-height: 2.85rem;
  background: var(--surface-lowest);
  transition: background var(--duration-fast) var(--ease-standard);
}

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

.drive-row:hover {
  background: color-mix(in srgb, var(--primary) 4%, var(--surface-lowest));
}

.drive-row.fm-item {
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.drive-row.fm-item:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: -2px;
}

/* Newly uploaded file row: starts translated up + transparent, then
   CSS transitions slide it into place once the class is removed. */
.drive-row--just-added {
  opacity: 0;
  transform: translateY(-12px);
}

.drive-row {
  transition: background var(--duration-fast) var(--ease-standard),
              opacity 320ms var(--ease-standard),
              transform 320ms var(--ease-standard);
}

/* Brief highlight after the row lands so the user can spot it. */
@keyframes drive-row-flash {
  0%   { background: color-mix(in srgb, var(--primary) 18%, var(--surface-lowest)); }
  100% { background: var(--surface-lowest); }
}

.drive-row--flash-highlight {
  animation: drive-row-flash 1.5s ease-out;
}

.drive-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

.drive-pager__link {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.drive-pager__link:hover {
  text-decoration: underline;
}

.drive-preview-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--on-surface) 75%, transparent);
  backdrop-filter: blur(4px);
  z-index: 1040;
  animation: drive-preview-fade var(--duration-fast) var(--ease-standard);
}

@keyframes drive-preview-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.drive-preview-backdrop[hidden] {
  display: none;
}

.drive-preview-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100vw - 2rem, 64rem);
  height: min(100vh - 2rem, 48rem);
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: drive-preview-pop var(--duration-fast) var(--ease-spring);
}

@keyframes drive-preview-pop {
  0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.drive-preview-panel[hidden] {
  display: none;
}

.drive-preview-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--outline-variant);
}

.drive-preview-panel__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-preview-panel__close {
  border: none;
  background: transparent;
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  color: var(--on-surface-mid);
  padding: 0.25rem;
}

.drive-preview-panel__body {
  flex: 1;
  overflow: auto;
  padding: 0.75rem;
}

.drive-preview-loading,
.drive-preview-error {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.drive-view-tab--secondary {
  margin-left: auto;
  font-weight: 500;
  border-style: dashed;
}

.group-fm-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.group-fm-item__check {
  flex-shrink: 0;
}

.group-fm-item__main {
  flex: 1;
  min-width: 0;
}

.group-fm-grid .fm-item-actions {
  flex-shrink: 0;
}

.drive-cell {
  min-width: 0;
  font-size: var(--text-sm);
}

.drive-cell--muted {
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
}

.drive-cell--dash {
  color: var(--on-surface-subtle);
}

.drive-tag {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.12rem 0.45rem;
  background: var(--surface-container);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-mid);
}

.drive-file-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  text-decoration: none;
  color: var(--on-surface);
  font-weight: 500;
}

.drive-file-link:hover .drive-file-link__text {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.drive-file-link__icon {
  font-size: var(--text-xl);
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.drive-file-link__icon--folder {
  color: var(--primary);
}

.drive-file-link__emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

/* Folder accent colors. Scoped via .fm-item--color-<name> so the tint
   only applies to rows that opted in; defaults continue to use --primary. */
.fm-item--color-red    .drive-file-link__icon--folder { color: #e53935; }
.fm-item--color-orange .drive-file-link__icon--folder { color: #fb8c00; }
.fm-item--color-amber  .drive-file-link__icon--folder { color: #ffb300; }
.fm-item--color-green  .drive-file-link__icon--folder { color: #43a047; }
.fm-item--color-teal   .drive-file-link__icon--folder { color: #00897b; }
.fm-item--color-blue   .drive-file-link__icon--folder { color: #1e88e5; }
.fm-item--color-purple .drive-file-link__icon--folder { color: #8e24aa; }
.fm-item--color-pink   .drive-file-link__icon--folder { color: #ec407a; }
.fm-item--color-gray   .drive-file-link__icon--folder { color: #6d6d6d; }

/* Same palette on the show-page folder hero. */
.drive-preview-folder--red    .drive-preview-folder__icon { color: #e53935; }
.drive-preview-folder--orange .drive-preview-folder__icon { color: #fb8c00; }
.drive-preview-folder--amber  .drive-preview-folder__icon { color: #ffb300; }
.drive-preview-folder--green  .drive-preview-folder__icon { color: #43a047; }
.drive-preview-folder--teal   .drive-preview-folder__icon { color: #00897b; }
.drive-preview-folder--blue   .drive-preview-folder__icon { color: #1e88e5; }
.drive-preview-folder--purple .drive-preview-folder__icon { color: #8e24aa; }
.drive-preview-folder--pink   .drive-preview-folder__icon { color: #ec407a; }
.drive-preview-folder--gray   .drive-preview-folder__icon { color: #6d6d6d; }

.drive-preview-folder__emoji {
  font-size: 96px;
  line-height: 1;
}

/* Color swatch picker in the Edit rail. */
.folder-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.folder-color-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.folder-color-swatch input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.folder-color-swatch:hover {
  transform: scale(1.08);
}

.folder-color-swatch--active {
  border-color: var(--on-surface);
}

.folder-color-swatch--red    { background: #e53935; }
.folder-color-swatch--orange { background: #fb8c00; }
.folder-color-swatch--amber  { background: #ffb300; }
.folder-color-swatch--green  { background: #43a047; }
.folder-color-swatch--teal   { background: #00897b; }
.folder-color-swatch--blue   { background: #1e88e5; }
.folder-color-swatch--purple { background: #8e24aa; }
.folder-color-swatch--pink   { background: #ec407a; }
.folder-color-swatch--gray   { background: #6d6d6d; }

.folder-color-swatch--none {
  background: var(--surface-lowest);
  border-color: var(--outline-variant);
  color: var(--on-surface-subtle);
}

.folder-color-swatch--none .material-symbols-outlined {
  font-size: 14px;
}

.folder-emoji-input {
  font-size: 1.15rem;
  max-width: 80px;
  text-align: center;
}

.drive-file-link__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  flex-shrink: 0;
}

.drive-file-link__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Background placeholder on the wrapper holds the slot; image fades in
     once pixels are decoded so the grid doesn't pop as thumbs load. */
  animation: drive-thumb-fade 180ms ease-out;
}

@keyframes drive-thumb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Skeleton rows rendered by files_load_more_controller while paginating.
   Intentionally light — the shimmer alone reads as "something is loading"
   without competing with the real rows that will replace them. */
.drive-row--skeleton {
  pointer-events: none;
  user-select: none;
}

.drive-skeleton {
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--on-surface) 6%, transparent) 0%,
    color-mix(in srgb, var(--on-surface) 12%, transparent) 50%,
    color-mix(in srgb, var(--on-surface) 6%, transparent) 100%
  );
  background-size: 200% 100%;
  animation: drive-skeleton-shimmer 1.1s ease-in-out infinite;
}

.drive-skeleton--cb { width: 14px; height: 14px; }
.drive-skeleton--thumb { width: 32px; height: 32px; border-radius: var(--radius-sm); margin-right: 10px; }
.drive-skeleton--text { width: 55%; height: 14px; }
.drive-skeleton--text-sm { width: 48px; height: 12px; }
.drive-skeleton--text-xs { width: 32px; height: 12px; }

@keyframes drive-skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .drive-skeleton { animation: none; }
  .drive-file-link__thumb img { animation: none; }
}

.drive-file-link__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}

.drive-cell--check {
  display: flex;
  align-items: center;
  justify-content: center;
}

.drive-row-check {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary);
  cursor: pointer;
}

.drive-cell--actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1rem;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.drive-row:hover .drive-cell--actions,
.drive-row:focus-within .drive-cell--actions {
  opacity: 1;
}

@media (max-width: 720px) {
  .drive-cell--actions {
    opacity: 1;
  }
}

.drive-row-action-form {
  display: inline;
  margin: 0;
  padding: 0;
}

.drive-row-action-form.button_to {
  display: inline;
}

.drive-row-action,
.drive-row-action-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--on-surface-mid);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.drive-row-action:hover,
.drive-row-action-form button:hover {
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
  color: var(--on-surface);
}

.drive-row-action--danger:hover,
.drive-row-action-form.button_to button.drive-row-action--danger:hover {
  background: var(--error-container);
  color: var(--error);
}

.drive-row-action .material-symbols-outlined,
.drive-row-action-form button .material-symbols-outlined {
  font-size: var(--text-lg);
}

/* ---- drag-and-drop move ---- */
.drive-row.is-dragging {
  opacity: 0.35;
}

.drive-row[data-file-move-id] {
  cursor: grab;
}

.drive-row[data-file-move-id]:active {
  cursor: grabbing;
}

.drive-row.is-drop-target {
  background: var(--primary-container, #e0ecff);
  outline: 2px solid var(--primary, #3b6dd6);
  outline-offset: -2px;
  border-radius: var(--radius-sm, 6px);
}

.drive-crumb.is-drop-target {
  background: var(--primary-container, #e0ecff);
  outline: 2px solid var(--primary, #3b6dd6);
  outline-offset: -1px;
  border-radius: var(--radius-sm, 6px);
}

.file-move-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  background: var(--inverse-surface, #333);
  color: var(--inverse-on-surface, #fff);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-sm, 0.875rem);
  z-index: 9999;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.file-move-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.file-move-toast--error {
  background: var(--error, #c62828);
}

.drive-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: 15rem;
  padding: var(--space-5) var(--space-4) var(--space-4);
  color: var(--on-surface-mid);
}

.drive-empty__icon {
  font-size: 3rem;
  opacity: 0.28;
  margin-bottom: 0.75rem;
}

.drive-empty__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
}

.drive-empty__hint {
  margin: 0.5rem 0 0;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  max-width: 22rem;
  line-height: 1.5;
}

.drive-drop-zone.uppy-drop-zone {
  margin: 0;
  cursor: pointer;
}

.drive-drop-zone.uppy-drop-zone:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* File detail (Drive-aligned header) */
.drive-file-show {
  max-width: 960px;
  margin: 0 auto;
}

.drive-file-show__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.drive-file-show__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.drive-file-show__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.drive-file-show__actions .btn-ghost,
.drive-file-show__actions .btn {
  border-radius: var(--radius-full);
}

/* ─── File preview shell (Dropbox-aligned) ─── */
.bc-main--flush {
  max-width: none;
  padding: 0;
}

.drive-preview-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--workspace-toolbar-height, 0px));
  background: var(--surface);
}

.drive-preview-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 2;
}

.drive-preview-topbar__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}

.drive-preview-topbar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--on-surface);
  text-decoration: none;
  flex-shrink: 0;
}

.drive-preview-topbar__back:hover {
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
}

.drive-preview-topbar__title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.drive-preview-topbar__icon {
  color: var(--on-surface-subtle);
  font-size: 22px;
  flex-shrink: 0;
}

.drive-preview-topbar__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--on-surface);
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drive-preview-topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.drive-preview-topbar__form {
  margin: 0;
}

.drive-preview-topbar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  color: var(--on-surface-mid);
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}

.drive-preview-topbar__icon-btn:hover {
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
  color: var(--on-surface);
}

.drive-preview-topbar__icon-btn--danger:hover {
  background: color-mix(in srgb, var(--error, #c0392b) 12%, transparent);
  color: var(--error, #c0392b);
}

.drive-preview-topbar__rail-toggle {
  margin-left: 0.25rem;
  border-left: 1px solid var(--outline-variant);
  border-radius: 0;
  padding-left: 0.75rem;
  width: auto;
}

.drive-preview-trash-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: color-mix(in srgb, var(--error, #c0392b) 10%, transparent);
  color: var(--on-surface);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--outline-variant);
}

.drive-preview-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.drive-preview-stage {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--on-surface) 4%, var(--surface));
  overflow: auto;
}

.drive-preview-stage > * {
  max-width: min(960px, 100%);
  width: 100%;
}

.drive-preview-stage .file-preview-image img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}

.drive-preview-stage .file-preview-pdf {
  width: 100%;
  height: calc(100vh - 160px);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.drive-preview-stage .file-preview-video {
  width: 100%;
  max-height: calc(100vh - 180px);
  border-radius: var(--radius-md);
  background: #000;
}

.drive-preview-stage .file-preview-text pre {
  max-height: calc(100vh - 180px);
  overflow: auto;
  background: var(--surface);
  padding: 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.drive-preview-folder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

.drive-preview-folder__icon {
  font-size: 96px;
  color: var(--primary);
}

.drive-preview-folder__name {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.drive-preview-unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 4rem 1.5rem;
  color: var(--on-surface-subtle);
  text-align: center;
}

.drive-preview-unavailable .material-symbols-outlined {
  font-size: 64px;
  opacity: 0.4;
}

.drive-preview-rail {
  width: 340px;
  flex-shrink: 0;
  border-left: 1px solid var(--outline-variant);
  background: var(--surface);
  overflow-y: auto;
  padding: 1.25rem 1.25rem 2rem;
}

.drive-preview-rail[hidden] {
  display: none;
}

.drive-preview-rail__section + .drive-preview-rail__section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--outline-variant);
}

.drive-preview-rail__heading {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  margin: 0 0 0.75rem;
}

.drive-preview-info {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.drive-preview-info__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0.75rem;
  align-items: baseline;
  font-size: var(--text-sm);
}

.drive-preview-info__row dt {
  color: var(--on-surface-subtle);
  font-weight: 500;
}

.drive-preview-info__row dd {
  margin: 0;
  color: var(--on-surface);
  word-break: break-word;
}

.drive-preview-form .form-group {
  margin-bottom: 0.75rem;
}

.drive-preview-form .form-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.drive-preview-form .form-input {
  font-size: var(--text-sm);
  padding: 0.5rem 0.65rem;
}

.drive-preview-form .form-actions {
  margin-top: 0.75rem;
}

.drive-preview-form__actions-split {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.drive-preview-form__actions-split form {
  margin: 0;
}

.drive-preview-share-url {
  margin-bottom: 0.75rem;
}

.drive-preview-share-url__input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
}

.drive-preview-rail__hint {
  margin: 0.75rem 0 0;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.drive-preview-rail__link {
  color: var(--primary);
  text-decoration: none;
}

.drive-preview-rail__link:hover {
  text-decoration: underline;
}

.drive-preview-rail__heading-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--on-surface-subtle);
  margin-left: 0.35rem;
}

.drive-versions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.drive-versions__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  background: var(--surface-variant, rgba(0, 0, 0, 0.03));
  font-size: var(--text-sm);
}

.drive-versions__item--current {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}

.drive-versions__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.drive-versions__label {
  font-weight: 600;
}

.drive-versions__date,
.drive-versions__size,
.drive-versions__reason {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.drive-versions__reason {
  font-style: italic;
}

.drive-versions-status--error {
  color: var(--error, #b3261e);
}

@media (max-width: 900px) {
  .drive-preview-rail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    z-index: 5;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  }

  .drive-preview-topbar__title {
    font-size: var(--text-md);
  }
}

/* ─── UPGRADE GATEWAY ─── */
.upgrade-gateway {
  display: flex;
  justify-content: center;
  padding: 3rem 1.5rem;
}

.upgrade-gateway-card {
  max-width: 480px;
  width: 100%;
  text-align: center;
}

.upgrade-gateway-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.upgrade-gateway-icon .material-symbols-outlined {
  font-size: 2rem;
  color: var(--primary);
}

.upgrade-gateway-title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.upgrade-gateway-desc {
  font-size: var(--text-md);
  color: var(--on-surface-subtle);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.upgrade-gateway-plan {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  border: 1px solid var(--outline-variant);
  box-shadow: var(--shadow-sm);
  text-align: left;
  margin-bottom: 2rem;
}

.upgrade-gateway-plan-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--on-surface);
  margin-bottom: 1rem;
}

.upgrade-gateway-plan-name .material-symbols-outlined {
  font-size: var(--text-xl);
}

.upgrade-gateway-features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.upgrade-gateway-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-base);
  color: var(--on-surface-mid);
}

.upgrade-gateway-feature .material-symbols-outlined {
  font-size: var(--text-md);
  color: var(--primary);
}

.upgrade-gateway-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

.upgrade-gateway-actions .btn {
  width: 100%;
  max-width: 280px;
  text-align: center;
}

/* ─── DATA EXPORT PICKER ─── */
.export-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
  max-width: 100%;
  overflow: hidden;
}

.export-section-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(28, 29, 26, 0.06);
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.export-section-item:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(28, 29, 26, 0.12);
}

.export-section-item:has(input:checked) {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border-color: color-mix(in srgb, var(--primary) 25%, transparent);
}

.export-section-item input[type="checkbox"] {
  flex-shrink: 0;
}

.export-section-icon {
  font-size: var(--text-lg);
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.export-section-item:has(input:checked) .export-section-icon {
  color: var(--primary);
}

.export-section-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface);
}

.export-section-desc {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  line-height: 1.3;
}

/* ─── SHARE LINK ─── */
.share-link-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-radius: var(--radius-3xl);
  padding: 0.3rem 0.3rem 0.3rem 0.75rem;
}

.share-link-badge .material-symbols-outlined {
  color: var(--primary);
}

.share-link-input {
  border: none;
  background: transparent;
  font-size: var(--text-xs);
  color: var(--on-surface);
  width: 180px;
  cursor: pointer;
  font-family: inherit;
}

.share-link-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
}

/* ─── CHAT SHARED FILES ─── */
.chatroom-msg-shared-files {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.chatroom-shared-file {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-container);
  text-decoration: none;
  color: var(--on-surface);
  transition: background var(--duration-base) var(--ease-standard);
}

.chatroom-shared-file:hover {
  background: var(--surface-container);
}

.chatroom-shared-file .material-symbols-outlined {
  color: var(--primary);
}

.chatroom-shared-file-name {
  font-size: var(--text-sm);
  font-weight: 600;
}

.chatroom-shared-file-meta {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

/* ─── FILE SHARE PICKER (chat) ─── */
.file-share-panel {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 1000;
  width: 320px;
  max-height: 320px;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 36px rgba(28, 29, 26, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.file-share-header {
  padding: 0.6rem 0.75rem;
  font-size: var(--text-sm);
  font-weight: 700;
  border-bottom: 1px solid var(--surface-container);
  color: var(--on-surface);
}

.file-share-list {
  overflow-y: auto;
  flex: 1;
  padding: 0.35rem;
}

.file-share-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background var(--duration-fast) var(--ease-standard);
}

.file-share-item:hover {
  background: var(--surface-container-low);
}

.file-share-item input[type="checkbox"] {
  flex-shrink: 0;
}

.file-share-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--on-surface);
}

.file-share-size {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

/* ─── LINKED FILES ─── */
.linked-files-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.linked-files-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.linked-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(28, 29, 26, 0.04);
}

.linked-file-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.linked-file-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.linked-file-name:hover {
  color: var(--primary);
}

.linked-file-meta {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.linked-files-picker-list {
  margin-top: 0.5rem;
  max-height: 250px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  border: 1px solid rgba(28, 29, 26, 0.06);
  padding: 0.5rem;
}

.linked-files-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid rgba(28, 29, 26, 0.03);
}

.linked-files-picker-item:last-child {
  border-bottom: none;
}

/* ─── FILE PREVIEW ─── */
.file-preview-pdf {
  width: 100%;
  height: 80vh;
  border: none;
  display: block;
}

.file-preview-image {
  padding: 1.5rem;
  background: var(--surface-container-low);
}

.file-preview-text {
  padding: 1.5rem;
  overflow-x: auto;
}

.file-preview-text pre {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--on-surface);
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}

.file-preview-video {
  width: 100%;
  display: block;
  background: #000;
}

.file-preview-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
}

.file-preview-unsupported {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem;
  text-align: center;
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
}

.file-preview-docx {
  padding: 2rem;
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--on-surface);
}

.file-preview-docx p { margin-bottom: 0.75rem; }
.file-preview-docx h1 { font-size: var(--text-xl); font-weight: 800; margin-bottom: 0.75rem; }
.file-preview-docx h2 { font-size: var(--text-xl); font-weight: 700; margin-bottom: 0.5rem; }
.file-preview-docx h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: 0.5rem; }
.file-preview-docx ul, .file-preview-docx ol { padding-left: 1.5rem; margin-bottom: 0.75rem; }
.file-preview-docx table { border-collapse: collapse; width: 100%; margin-bottom: 1rem; }
.file-preview-docx td, .file-preview-docx th { border: 1px solid var(--surface-container); padding: 0.5rem; }

.file-preview-xlsx {
  padding: 1.5rem;
}

.file-preview-sheet-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
  margin: 1.5rem 0 0.5rem;
}

.file-preview-sheet-name:first-child {
  margin-top: 0;
}

.file-preview-table-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.file-preview-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-sm);
}

.file-preview-table td,
.file-preview-table th {
  border: 1px solid var(--surface-container);
  padding: 0.4rem 0.6rem;
  text-align: left;
  color: var(--on-surface);
}

.file-preview-table th {
  background: var(--surface-container-low);
  font-weight: 600;
}

.file-preview-table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.3);
}

/* ─── JOIN MODAL ─── */
.join-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.join-overlay[hidden] {
  display: none;
}

.join-modal-content {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

.join-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.join-modal-header h3 {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--on-surface);
  margin: 0;
}

.join-modal-close {
  background: none;
  border: none;
  font-size: var(--text-xl);
  color: var(--on-surface-subtle);
  cursor: pointer;
  padding: 0.2rem;
  line-height: 1;
}

.join-modal-close:hover {
  color: var(--on-surface);
}

/* ─── APP TOUR ─── */
.tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9998;
  pointer-events: none;
}

.tour-highlight {
  position: relative;
  z-index: 9999;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px var(--primary), 0 0 0 8px color-mix(in srgb, var(--primary) 25%, transparent);
  pointer-events: auto;
}

.tour-tooltip {
  position: fixed;
  z-index: 10000;
  width: 320px;
  pointer-events: auto;
}

.tour-tooltip--right { }
.tour-tooltip--left { }
.tour-tooltip--bottom { }
.tour-tooltip--top { }

.tour-tooltip-content {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.tour-tooltip-title {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--on-surface);
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}

.tour-tooltip-body {
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.tour-tooltip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tour-tooltip-counter {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-subtle);
  opacity: 0.6;
}

.tour-tooltip-actions {
  display: flex;
  gap: 0.5rem;
}

.tour-tooltip-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-3xl);
  border: none;
  cursor: pointer;
  background: var(--primary);
  color: var(--on-primary);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.tour-tooltip-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}

.tour-tooltip-btn--ghost {
  background: transparent;
  color: var(--on-surface-subtle);
  border: 1.5px solid var(--surface-container);
}

.tour-tooltip-btn--ghost:hover {
  background: var(--surface-container-low);
  box-shadow: none;
  transform: none;
}

/* ─── AI RESPONSES ─── */
.ai-response {
  border-radius: var(--radius-md);
  margin-top: 1rem;
}

.ai-response-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
}

.ai-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  animation: aiPulse 1.4s ease-in-out infinite;
}

@keyframes aiPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.ai-response-content {
  padding: 1.25rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary);
}

.ai-response-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-3xl);
}

.ai-response-meta {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.ai-response-body {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--on-surface);
}

.ai-response-body p {
  margin-bottom: 0.75rem;
}

.ai-response-body p:last-child {
  margin-bottom: 0;
}

.ai-response-error {
  padding: 1.25rem;
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
}

.ai-response-error p {
  margin: 0 0 0.75rem;
}

.ai-response-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--outline-variant);
}

.lesson-plan-ai-panel {
  margin-top: 0.75rem;
}

.lesson-plan-ai-generate {
  width: 100%;
  text-align: center;
}

.lesson-plan-notes-hint,
.lesson-plan-ai-disabled-hint {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--on-surface-mid);
  margin: 0 0 0.5rem;
}

.lesson-plan-textarea {
  min-height: 16rem;
  line-height: 1.55;
}

/* ─── DEVISE AUTH PAGES ─── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.9), rgba(255,255,255,0) 50%),
    linear-gradient(135deg, var(--surface) 0%, var(--surface-container-low) 100%);
}

.auth-split {
  display: flex;
  width: 100%;
  max-width: 820px;
  gap: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(28, 29, 26, 0.1);
}

.auth-brand {
  flex: 1;
  background: var(--primary);
  color: var(--on-primary);
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-brand-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.auth-brand-icon .material-symbols-outlined {
  color: var(--on-primary);
}

.auth-brand-name {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: 800;
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}

.auth-brand-tagline {
  font-size: var(--text-md);
  opacity: 0.8;
  margin: 0 0 2rem;
  line-height: 1.5;
}

.auth-brand-features {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.auth-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-base);
  opacity: 0.85;
}

.auth-feature .material-symbols-outlined {
  font-size: var(--text-lg);
  opacity: 0.7;
}

.auth-card {
  flex: 1;
  background: #ffffff;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-card--centered {
  width: min(100%, 28rem);
  flex: 0 1 auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 60px rgba(28, 29, 26, 0.1);
}

.auth-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--on-surface);
  margin: 0 0 0.25rem;
}

.auth-card-subtitle {
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  margin: 0 0 1.5rem;
}

.auth-flash-stack {
  margin: -0.35rem 0 1.25rem;
}

.auth-flash-stack .flash {
  margin-bottom: 0.75rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-submit-btn {
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
}

.auth-oauth-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--on-surface);
  font: inherit;
  font-weight: 700;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.auth-oauth-btn + .auth-oauth-btn {
  margin-top: 0.75rem;
}

.auth-oauth-btn:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.auth-apple-btn {
  background: #050505;
  border-color: #050505;
  color: #ffffff;
}

.auth-apple-btn:hover {
  border-color: #050505;
  box-shadow: 0 10px 24px rgba(5, 5, 5, 0.18);
}

.auth-google-mark {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.auth-apple-mark {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-size: 1.25rem;
  line-height: 1;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--surface-container);
}

.auth-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: var(--text-base);
}

.auth-alt-link {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.auth-alt-link:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .auth-split {
    flex-direction: column;
  }
  .auth-brand {
    padding: 2rem 2rem 1.5rem;
  }
  .auth-brand-features {
    display: none;
  }
}

:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.auth-logo {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  justify-content: center;
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--primary);
}

.auth-logo .binder-wordmark,
.auth-logo svg,
.auth-logo img {
  width: 9rem;
  height: auto;
  display: block;
}

.auth-tagline {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 600;
}

.auth-signup-prompt {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(37, 57, 212, 0.04);
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(37, 57, 212, 0.1);
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
}

.auth-signup-btn {
  font-weight: 700;
  color: #2539d4;
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}

.auth-signup-btn:hover {
  color: #1a2bb0;
}

.auth-links {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.auth-link {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--primary);
  font-weight: 600;
}
.auth-link:hover { text-decoration: underline; }

.auth-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* ─── RESOURCES ─── */
.resource-item {
  display: flex;
  gap: 0.8rem;
  padding: 0.9rem 0;
  align-items: flex-start;
}
.resource-item + .resource-item {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 0.9rem;
  margin-top: 0.4rem;
}

.resource-icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  flex-shrink: 0;
  background: var(--gold-pale);
}

.resource-title {
  font-size: var(--text-base);
  color: var(--on-surface);
  line-height: 1.3;
}
.resource-title a { color: var(--primary); }
.resource-title a:hover { text-decoration: underline; }

.resource-meta {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  color: var(--on-surface-subtle);
  margin-top: 0.2rem;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.resource-tag {
  display: inline-block;
  background: var(--surface-container);
  color: var(--on-surface-mid);
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
  margin-left: 0.4rem;
}

.resource-filter-card {
  margin-bottom: 1.2rem;
}

.resource-filters {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(180px, 1fr) minmax(150px, 1fr) minmax(220px, auto);
  gap: 1rem;
  align-items: end;
}

.resource-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.resource-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--on-surface-mid);
  font-size: var(--text-base);
}

.resource-free-toggle {
  justify-content: flex-end;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
}

.resource-card {
  height: 100%;
}

.resource-card-title {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}

.resource-description {
  color: var(--on-surface-mid);
  line-height: 1.55;
  margin-bottom: 1rem;
}

.resource-description--empty {
  color: var(--on-surface-subtle);
  font-style: italic;
}

.resource-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.resource-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--radius-full);
  padding: 0.35rem 0.75rem;
  background: var(--surface-container-low);
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-mid);
}

.resource-meta-pill a { color: var(--primary); }
.resource-meta-pill a:hover { text-decoration: underline; }

/* ─── DECORATIVE RULE ─── */
.rule {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.5rem 0;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
}
.rule::before, .rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--outline-variant);
}

/* ─── REPORTS ─── */
.reports-analytics {
  max-width: 76rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.reports-hero {
  min-height: 15rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-2xl, 1.5rem);
  background: linear-gradient(135deg, var(--surface-lowest), color-mix(in srgb, var(--surface-container-low) 82%, var(--primary)));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}

.reports-hero__copy,
.reports-hero__actions {
  position: relative;
  z-index: 1;
}

.reports-hero__copy {
  max-width: 42rem;
}

.reports-hero__eyebrow,
.reports-panel__kicker {
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reports-hero h1 {
  margin: 0.35rem 0 0;
  color: var(--on-surface);
  font-size: clamp(2.5rem, 6vw, 5.1rem);
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.reports-hero p {
  max-width: 36rem;
  margin: 0.85rem 0 0;
  color: var(--on-surface-mid);
  font-size: var(--text-lg);
  line-height: 1.45;
}

.reports-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.2rem;
}

.reports-hero__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-lowest) 76%, transparent);
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 700;
}

.reports-hero__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.reports-term-form {
  min-width: 12rem;
}

.reports-term-select {
  min-height: 2.55rem;
  padding-block: 0.45rem;
  font-size: var(--text-sm);
}

.reports-action {
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0 0.9rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.reports-action .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
}

.reports-action--ghost {
  background: var(--surface-lowest);
  color: var(--on-surface);
}

.reports-action--dark {
  background: var(--on-surface);
  border-color: var(--on-surface);
  color: var(--surface-lowest);
}

.reports-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.reports-kpi-card {
  min-width: 0;
  display: flex;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-sm);
}

.reports-kpi-card--primary {
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-lowest));
  border-color: color-mix(in srgb, var(--primary) 28%, var(--outline-variant));
}

.reports-kpi-card__icon {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  font-size: 1.35rem;
}

.reports-kpi-card:nth-child(2) .reports-kpi-card__icon {
  background: color-mix(in srgb, var(--warning, #d97706) 12%, transparent);
  color: var(--warning, #b45309);
}

.reports-kpi-card:nth-child(3) .reports-kpi-card__icon {
  background: color-mix(in srgb, var(--success, #15803d) 12%, transparent);
  color: var(--success, #15803d);
}

.reports-kpi-card:nth-child(4) .reports-kpi-card__icon {
  background: color-mix(in srgb, var(--secondary) 16%, transparent);
  color: color-mix(in srgb, var(--secondary) 65%, var(--on-surface));
}

.reports-kpi-card div {
  min-width: 0;
}

.reports-kpi-card__label {
  display: block;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reports-kpi-card strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--on-surface);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.03em;
}

.reports-kpi-card span:last-child {
  display: block;
  margin-top: 0.35rem;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.3;
}

.reports-panel {
  min-width: 0;
  padding: 1.1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-sm);
}

.reports-panel--wide {
  padding: 1.2rem;
}

.reports-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.75fr);
  gap: 1rem;
  align-items: start;
}

.reports-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
}

.reports-panel__head h2 {
  margin: 0.15rem 0 0;
  color: var(--on-surface);
  font-size: var(--text-xl);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.reports-panel__note {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 750;
  white-space: nowrap;
}

.reports-week-chart {
  min-height: 12rem;
  display: flex;
  align-items: end;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 0.5rem 0.2rem 0;
}

.reports-week-chart__week {
  min-width: 1.65rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.reports-week-chart__bars {
  height: 9rem;
  width: 1.45rem;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0.18rem;
  padding: 0.25rem;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
}

.reports-week-chart__bar {
  width: 0.42rem;
  min-height: 0;
  border-radius: var(--radius-full);
  transition: height var(--duration-slow) var(--ease-standard);
}

.reports-week-chart__bar--lessons {
  background: var(--primary);
}

.reports-week-chart__bar--outside {
  background: color-mix(in srgb, var(--secondary) 78%, var(--primary));
}

.reports-week-chart__label {
  color: var(--on-surface-subtle);
  font-size: 0.62rem;
  font-weight: 750;
}

.reports-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.8rem;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
}

.reports-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.reports-legend-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

.reports-legend-dot--lessons { background: var(--primary); }
.reports-legend-dot--outside { background: color-mix(in srgb, var(--secondary) 78%, var(--primary)); }

.reports-subject-bars {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
}

.reports-subject-bars__row {
  display: grid;
  grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1fr) 3.5rem;
  align-items: center;
  gap: 0.65rem;
}

.reports-subject-bars__label {
  min-width: 0;
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reports-subject-bars__track {
  height: 0.65rem;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
}

.reports-subject-bars__track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 52%, var(--secondary)));
}

.reports-subject-bars__value {
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  font-weight: 800;
  text-align: right;
}

.reports-attendance-list {
  display: grid;
  gap: 0.55rem;
}

.reports-attendance-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
}

.reports-attendance-list__item span {
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  font-weight: 700;
}

.reports-attendance-list__item strong {
  color: var(--on-surface);
  font-size: var(--text-lg);
  font-weight: 850;
}

.reports-student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.85rem;
}

.reports-student-card {
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-container-low);
}

.reports-student-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.reports-student-card__head h3 {
  margin: 0;
  color: var(--on-surface);
  font-size: var(--text-md);
  font-weight: 850;
}

.reports-student-card__head span {
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
}

.reports-student-card__link {
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--surface-lowest);
  color: var(--on-surface-mid);
  text-decoration: none;
}

.reports-student-card__link .material-symbols-outlined {
  font-size: 1.1rem;
}

.reports-student-card__meter {
  height: 0.5rem;
  margin: 0.9rem 0;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--surface-lowest);
}

.reports-student-card__meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.reports-student-card__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}

.reports-student-card__stats div {
  min-width: 0;
}

.reports-student-card__stats strong,
.reports-student-card__stats span {
  display: block;
}

.reports-student-card__stats strong {
  color: var(--on-surface);
  font-size: var(--text-lg);
  font-weight: 850;
}

.reports-student-card__stats span {
  color: var(--on-surface-subtle);
  font-size: 0.66rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.reports-empty {
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
}

.reports-data-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.8rem;
}

.reports-data-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-container-low);
}

.reports-data-card--ready {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-lowest));
  border-color: color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
}

.reports-data-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.reports-data-card__icon {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 11%, var(--surface-lowest));
}

.reports-data-card__head span:not(.material-symbols-outlined) {
  color: var(--on-surface-subtle);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reports-data-card h3 {
  margin: 0.1rem 0 0;
  color: var(--on-surface);
  font-size: var(--text-md);
  font-weight: 850;
}

.reports-data-card__value {
  color: var(--on-surface);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1;
}

.reports-data-card p {
  margin: 0;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.reports-data-card__rows,
.reports-metric-list {
  display: grid;
  gap: 0.42rem;
  margin: 0;
}

.reports-data-card__rows div,
.reports-metric-list__row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-md);
  background: var(--surface-lowest);
}

.reports-data-card__rows dt,
.reports-metric-list__row span {
  min-width: 0;
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  font-weight: 700;
}

.reports-metric-list__row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reports-data-card__rows dd,
.reports-metric-list__row strong {
  margin: 0;
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 850;
  white-space: nowrap;
}

@media (max-width: 1040px) {
  .reports-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reports-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .reports-hero {
    flex-direction: column;
    min-height: 0;
  }

  .reports-hero__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .reports-term-form,
  .reports-action {
    flex: 1 1 100%;
  }

  .reports-kpi-grid,
  .reports-student-grid,
  .reports-data-catalog {
    grid-template-columns: 1fr;
  }

  .reports-panel__head {
    flex-direction: column;
    gap: 0.35rem;
  }

  .reports-subject-bars__row {
    grid-template-columns: minmax(0, 1fr) 3.5rem;
  }

  .reports-subject-bars__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .reports-subject-bars__value {
    grid-column: 2;
    grid-row: 1;
  }
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 2px 12px var(--shadow);
}

.stat-card-header {
  padding: 0.9rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface-container-low);
}

.stat-card-name {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  flex: 1;
  color: var(--on-surface);
}

.stat-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.stat-item {
  padding: 1rem 1.2rem;
  text-align: center;
  background: var(--surface-lowest);
}
.stat-item:nth-child(even) { background: var(--surface-container-low); }
.stat-item:nth-child(3),
.stat-item:nth-child(4) { }

.stat-num {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--on-surface);
  line-height: 1;
}

.stat-label {
  font-family: var(--font-sans);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-top: 0.25rem;
  font-weight: 600;
}

/* CSS bar chart */
.bar-chart { display: flex; flex-direction: column; gap: 0.55rem; }

.bar-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.bar-label {
  width: 110px;
  flex-shrink: 0;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  text-align: right;
}

.bar-track {
  flex: 1;
  height: 7px;
  background: var(--surface-container-high);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--secondary);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-standard);
}

.bar-value {
  width: 52px;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  color: var(--on-surface-subtle);
  font-weight: 600;
}

/* Week trend — vertical bars */
.week-trend {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 110px;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.wk-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 30px;
  cursor: default;
}

.wk-bar-track {
  width: 18px;
  height: 72px;
  background: var(--surface-container-high);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.wk-bar-fill {
  width: 100%;
  background: var(--secondary);
  border-radius: var(--radius-sm);
  transition: height var(--duration-slow) var(--ease-standard);
  min-height: 0;
}

.wk-label {
  font-family: var(--font-sans);
  font-size: 0.44rem;
  color: var(--on-surface-subtle);
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* School days dots */
.school-days-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.school-day-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: default;
}

.sd-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--secondary);
}

.sd-label {
  font-family: var(--font-sans);
  font-size: 0.44rem;
  color: var(--on-surface-subtle);
  font-weight: 600;
}

/* ─── PLANNER (Google Calendar style) ─── */
.main:has(.gcal-toolbar) {
  max-width: none;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ── Toolbar ── */
.gcal-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
  gap: 1rem;
}

.gcal-toolbar .gcal-toolbar-right,
.gcal-toolbar .planner-toolbar__right {
  margin-left: auto;
}

.gcal-toolbar .gcal-title,
.gcal-toolbar .planner-title {
  margin: 0;
  text-align: left;
}

.gcal-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gcal-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.gcal-today-btn {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid #dadce0;
  background: #fff;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.gcal-today-btn:hover {
  background: #f1f3f4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.gcal-nav-arrows {
  display: flex;
  gap: 0;
}

.gcal-nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #5f6368;
  transition: background var(--duration-base) var(--ease-standard);
}
.gcal-nav-arrow:hover {
  background: #f1f3f4;
}

.gcal-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 500;
  color: #3c4043;
  margin: 0;
  white-space: nowrap;
}

.gcal-action-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #5f6368;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  border: 1px solid #dadce0;
  background: #fff;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  text-decoration: none;
  display: inline-block;
}
.gcal-action-btn:hover {
  background: #f1f3f4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.gcal-action-btn--accent {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(28, 20, 8, 0.12);
  font-weight: 700;
}
.gcal-action-btn--accent:hover {
  background: var(--primary);
  color: #fff;
  opacity: 0.92;
  box-shadow: 0 2px 6px rgba(28, 20, 8, 0.18);
}
.gcal-action-btn__icon {
  font-size: var(--text-md) !important;
  line-height: 1;
}

/* ── Week view (days as columns) ── */
.gcal-week {
  border: 1px solid #dadce0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.gcal-week-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid #dadce0;
  flex-shrink: 0;
}

.gcal-week-col-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.5rem 0.25rem 0.6rem;
  background: #fff;
}
.gcal-week-col-head + .gcal-week-col-head {
  border-left: 1px solid #dadce0;
}
.gcal-week-col-head--today {
  background: transparent;
}

.gcal-week-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.gcal-week-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0.4rem;
  background: #fff;
  position: relative;
  cursor: default;
  text-decoration: none;
  color: inherit;
  transition: background var(--duration-fast) var(--ease-standard);
}
.gcal-week-col:hover {
  background: #f8f9fa;
}
.gcal-week-col + .gcal-week-col {
  border-left: 1px solid #dadce0;
}
.gcal-week-col--today {
  background: #e8f0fe;
}
.gcal-week-col--today:hover {
  background: #d2e3fc;
}

.gcal-child-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  color: #70757a;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.35rem 0 0.1rem;
}
.gcal-child-label:first-child { padding-top: 0; }

.gcal-week-child-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 74px;
  padding: 0.2rem;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}

.gcal-week-child-cell.is-drop-target,
.gcal-day-lessons.is-drop-target,
.gcal-month-cell.is-drop-target {
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 2px var(--focus-ring-border);
}

.gcal-cell-add {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 24px;
  margin-top: 0.15rem;
  padding: 0.25rem 0.55rem;
  border: 1px dashed transparent;
  border-radius: var(--radius-md);
  color: #70757a;
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.gcal-week-child-cell:hover .gcal-cell-add,
.gcal-week-child-cell:focus-within .gcal-cell-add,
.gcal-cell-add:focus-visible {
  opacity: 1;
  border-color: #dadce0;
}

.gcal-cell-add:hover,
.gcal-cell-add:focus-visible {
  background: #f1f3f4;
  color: #1a73e8;
}

.gcal-event.is-dragging {
  opacity: 0.5;
}

.gcal-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.gcal-col-name {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #70757a;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.gcal-day-abbr {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #70757a;
}

.gcal-day-num {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 400;
  color: #3c4043;
  line-height: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.gcal-day-num--today {
  background: transparent;
  color: var(--primary-hover, #b4593c);
  font-weight: 700;
  text-shadow: 0 0 14px rgba(112, 108, 252, 0.35);
}

/* Day view add button */
.gcal-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #5f6368;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
  margin-top: auto;
  align-self: flex-end;
}
.gcal-add-btn:hover {
  background: #e8eaed;
  color: #1a73e8;
}

/* ── Event chips (Google Calendar style) ── */
.gcal-event {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  line-height: 1.3;
  text-decoration: none;
  color: #fff;
  transition: opacity var(--duration-base) var(--ease-standard), filter var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
  overflow: hidden;
  min-height: 24px;
  /* default color if no subject class matches */
  background: #039be5;
}
.gcal-event:hover {
  filter: brightness(0.92);
}

.gcal-event--done {
  opacity: 0.45;
}
.gcal-event--done .gcal-event-title {
  text-decoration: line-through;
}

.gcal-event-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.gcal-event-time {
  font-size: var(--text-xs);
  opacity: 0.85;
  flex-shrink: 0;
}

/* Subject event colors (Google Calendar palette) */
.subj-bg-grammar     { background: #7986cb; }
.subj-bg-math        { background: #4285f4; }
.subj-bg-history     { background: #e67c73; }
.subj-bg-reading     { background: #f4b400; color: #3c4043; }
.subj-bg-nature      { background: #0b8043; }
.subj-bg-latin       { background: #8e24aa; }
.subj-bg-rhetoric    { background: #795548; }
.subj-bg-science     { background: #33b679; }
.subj-bg-composer    { background: #7c5ce0; }
.subj-bg-art         { background: #d50000; }
.subj-bg-literature  { background: #e67c73; }
.subj-bg-pre-algebra { background: #4285f4; }

/* ── View Switcher ── */
.gcal-view-switcher {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid #dadce0;
  border-radius: var(--radius-full);
  background: #fff;
}

.gcal-view-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #5f6368;
  padding: 0.4rem 0.9rem;
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  background: #fff;
}

/* ── Planner Shell ── */
.planner-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 1.5rem;
}

.planner-sidebar {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 0.5rem;
}

.planner-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.planner-sidebar-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #70757a;
  margin: 0;
}

.planner-child-list, .planner-subject-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.planner-child-item, .planner-subject-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: #3c4043;
}

.planner-child-name, .planner-subject-name {
  font-weight: 500;
}

.planner-subject-chip {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.planner-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gcal-view-btn:hover { background: #f1f3f4; }
.gcal-view-btn--active {
  background: #e8f0fe;
  color: #1a73e8;
}
.gcal-view-btn--active:hover {
  background: #d2e3fc;
}

/* ── Day View ── */
.gcal-day-view-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.5rem 0 1rem;
}

.gcal-day-columns {
  display: grid;
  grid-template-columns: repeat(var(--child-count), 1fr);
  gap: 1px;
  border: 1px solid #dadce0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #dadce0;
}

.gcal-day-column {
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.gcal-day-col-head {
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-bottom: 1px solid #dadce0;
  background: #fff;
}

.gcal-day-lessons {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  border-radius: var(--radius-sm);
}

.gcal-day-add-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #5f6368;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-md);
  margin-top: auto;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
  text-decoration: none;
}
.gcal-day-add-btn:hover {
  background: #f1f3f4;
  color: #1a73e8;
}

/* ── Month View ── */
.gcal-month {
  border: 1px solid #dadce0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 130px);
}

.gcal-month-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid #dadce0;
  flex-shrink: 0;
}

.gcal-month-day-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #70757a;
  text-align: center;
  padding: 0.5rem 0;
}

.gcal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
}

.gcal-month-cell {
  border-top: 1px solid #dadce0;
  border-right: 1px solid #dadce0;
  padding: 0.25rem;
  background: #fff;
  transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.gcal-month-cell:nth-child(7n) { border-right: none; }

.gcal-month-cell--other {
  background: #f8f9fa;
}
.gcal-month-cell--other .gcal-month-num {
  color: #b0b0b0;
}

.gcal-month-cell--today {
  background: #e8f0fe;
}

.gcal-month-cell-head {
  padding: 0.2rem 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gcal-month-num {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #3c4043;
  text-decoration: none;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.gcal-month-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-full);
  color: #70757a;
  font-size: var(--text-md);
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.gcal-month-cell:hover .gcal-month-add,
.gcal-month-add:focus-visible {
  opacity: 1;
}

.gcal-month-add:hover,
.gcal-month-add:focus-visible {
  background: #f1f3f4;
  color: #1a73e8;
}

.gcal-month-events {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gcal-month-event {
  display: block;
  padding: 1px 4px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--duration-fast) var(--ease-standard);
  background: #039be5;
}
.gcal-month-event:hover { opacity: 0.85; }

.gcal-month-more {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #70757a;
  padding: 1px 4px;
  border-radius: var(--radius-xs);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.gcal-month-more:hover {
  background: #f1f3f4;
}

/* ─── Dark-mode overrides for GCal-style planner ───
   The .gcal-* and .planner-* rules above hard-code Google Calendar light-mode
   greys (#dadce0 / #5f6368 / #3c4043 / #70757a / #1a73e8). Map them to dark tokens
   so the planner is legible in dark mode. */
body.theme-dark .gcal-today-btn {
  background: var(--surface-lowest);
  border-color: var(--outline);
  color: var(--on-surface);
}
body.theme-dark .gcal-today-btn:hover {
  background: var(--surface-container-high);
}
body.theme-dark .gcal-nav-arrow {
  color: var(--on-surface-mid);
}
body.theme-dark .gcal-nav-arrow:hover {
  background: var(--surface-container);
}
body.theme-dark .gcal-action-btn {
  color: var(--on-surface);
  border-color: var(--outline);
  background: var(--surface-lowest);
}
body.theme-dark .gcal-action-btn:hover {
  background: var(--surface-container-high);
}
body.theme-dark .gcal-action-btn--accent,
body.theme-dark .gcal-action-btn--accent:hover {
  color: var(--on-primary);
}
body.theme-dark .gcal-week,
body.theme-dark .gcal-month {
  border-color: var(--outline-variant);
  background: var(--surface-lowest);
}
body.theme-dark .gcal-week-head,
body.theme-dark .gcal-month-head {
  border-bottom-color: var(--outline-variant);
}
body.theme-dark .gcal-week-col-head,
body.theme-dark .gcal-week-col,
body.theme-dark .gcal-day-column,
body.theme-dark .gcal-day-col-head,
body.theme-dark .gcal-month-cell {
  background: var(--surface-lowest);
}
body.theme-dark .gcal-week-col-head + .gcal-week-col-head,
body.theme-dark .gcal-week-col + .gcal-week-col,
body.theme-dark .gcal-day-col-head,
body.theme-dark .gcal-month-cell {
  border-color: var(--outline-variant);
}
body.theme-dark .gcal-week-col:hover {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-lowest));
}
body.theme-dark .gcal-week-col--today,
body.theme-dark .gcal-month-cell--today {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-lowest));
}
body.theme-dark .gcal-week-col--today:hover {
  background: color-mix(in srgb, var(--primary) 22%, var(--surface-lowest));
}
body.theme-dark .gcal-day-columns {
  border-color: var(--outline-variant);
  background: var(--outline-variant);
}
body.theme-dark .gcal-month-cell--other {
  background: var(--surface-container-low);
}
body.theme-dark .gcal-month-cell--other .gcal-month-num {
  color: var(--on-surface-subtle);
}
body.theme-dark .gcal-child-label,
body.theme-dark .gcal-col-name,
body.theme-dark .gcal-day-abbr,
body.theme-dark .gcal-month-day-label,
body.theme-dark .gcal-month-more {
  color: var(--on-surface-mid);
}
body.theme-dark .gcal-day-num,
body.theme-dark .gcal-month-num {
  color: var(--on-surface);
}
body.theme-dark .gcal-day-num--today {
  background: var(--primary);
  color: var(--on-primary);
}
body.theme-dark .gcal-add-btn,
body.theme-dark .gcal-day-add-btn {
  color: var(--on-surface-mid);
}
body.theme-dark .gcal-add-btn:hover,
body.theme-dark .gcal-day-add-btn:hover {
  background: var(--surface-container);
  color: var(--primary);
}
body.theme-dark .gcal-view-switcher {
  border-color: var(--outline-variant);
}
body.theme-dark .gcal-view-btn {
  background: var(--surface-lowest);
  color: var(--on-surface-mid);
  border-right-color: var(--outline-variant);
}
body.theme-dark .gcal-view-btn:hover {
  background: var(--surface-container-high);
}
body.theme-dark .gcal-view-btn--active {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-lowest));
  color: var(--primary);
}
body.theme-dark .gcal-view-btn--active:hover {
  background: color-mix(in srgb, var(--primary) 28%, var(--surface-lowest));
}
body.theme-dark .planner-sidebar-title {
  color: var(--on-surface-mid);
}
body.theme-dark .planner-child-item,
body.theme-dark .planner-subject-item {
  color: var(--on-surface);
}

/* ─── LESSON NOTES ─── */
.lesson-notes {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  font-style: italic;
  line-height: 1.4;
  margin-top: 0.15rem;
}

/* ─── READING BANNER (dashboard) ─── */
.reading-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--gold-pale);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.5rem;
}

.reading-banner-icon { font-size: var(--text-lg); flex-shrink: 0; }
.reading-banner-body { flex: 1; }

.reading-banner-label {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.25rem;
}

.reading-banner-titles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

.reading-title-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.reading-title {
  font-size: var(--text-base);
  color: var(--on-surface);
  font-style: italic;
}
.reading-title-link:hover .reading-title { text-decoration: underline; }

.reading-banner-link {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
}
.reading-banner-link:hover { text-decoration: underline; }

/* ─── READ-ALOUDS ─── */
.ra-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.3rem;
}
.ra-row + .ra-row {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  margin-top: 0.4rem;
}
.ra-row--dim { opacity: 0.5; }
.ra-row-link { flex: 1; }

.ra-title {
  font-size: var(--text-md);
  color: var(--on-surface);
  margin-bottom: 0.2rem;
  font-style: italic;
}
.ra-row-link:hover .ra-title { text-decoration: underline; }

.ra-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 500;
  color: var(--on-surface-subtle);
  letter-spacing: 0.03em;
}

.ra-sep { color: var(--surface-container-high); }
.ra-child-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.ra-child-name { font-size: 0.55rem; }
.ra-section { font-style: italic; }

.ra-action {
  font-size: var(--text-xs);
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
}

.ra-participants {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.ra-participants-label {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  font-weight: 700;
}

.ra-participant {
  font-size: var(--text-base);
  opacity: 0.3;
}
.ra-participant--active { opacity: 1; font-weight: 600; }

.ra-current-section {
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  font-style: italic;
  margin-bottom: 1rem;
}

.ra-section-label {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-right: 0.4rem;
  font-style: normal;
}

.card-head-meta {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  color: var(--on-surface-subtle);
  letter-spacing: 0.04em;
  font-weight: 500;
}

.ra-session {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.85rem 1.3rem;
}
.ra-session + .ra-session {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  margin-top: 0.4rem;
}

.ra-session-date {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 500;
  color: var(--on-surface-subtle);
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding-top: 0.1rem;
  min-width: 76px;
}

.ra-session-body { flex: 1; }

.ra-session-section {
  font-size: var(--text-base);
  color: var(--on-surface);
  margin-bottom: 0.2rem;
}

.ra-session-notes {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  font-style: italic;
  line-height: 1.5;
}

.ra-session-duration {
  font-family: var(--font-sans);
  font-size: 0.52rem;
  font-weight: 500;
  color: var(--on-surface-subtle);
  margin-top: 0.2rem;
}

.ra-session-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.ra-session:hover .ra-session-actions { opacity: 1; }

.ra-child-checks {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.ra-check-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: var(--text-base);
}

.ra-check-name { font-size: var(--text-base); }

/* ─── PRINT STYLES ─── */
@media print {
  .topbar, .sidebar-wrapper,
  .page-header > div:last-child,
  .btn, .btn-ghost, .card-action { display: none !important; }

  .app-body { display: block; }
  .main { padding: 0; max-width: none; overflow: visible; }

  .report-grid { grid-template-columns: repeat(2, 1fr); }

  .bar-fill, .wk-bar-fill, .ring-fill, .sd-dot {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .card { break-inside: avoid; page-break-inside: avoid; }
  .stat-card { break-inside: avoid; }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .schedule-grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .dash-welcome { flex-direction: column; align-items: flex-start; }
  .dash-greeting { font-size: 2rem; }
  .dash-tagline { font-size: var(--text-base); }
  .dash-motto-banner { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
  .dash-orbs { align-self: flex-start; }
  .dash-bento-grid { grid-template-columns: 1fr; }
  .dash-bento-aside { flex-direction: row; flex-wrap: wrap; }
  .dash-aside-card { flex: 1; min-width: 200px; }
  .dash-stats { gap: 0.75rem; }
  .dash-stat-card { min-width: 80px; padding: 1rem; }
  .dash-stat-num { font-size: var(--text-xl); }
  .dash-bento-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .main {
    padding: 1.2rem;
    width: 100%;
    max-width: none;
  }
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
  .nav-bar { padding: 0 1rem; }
  .nav-avatars { display: none; }
  .nav-week-label { display: none; }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .page-header > div:last-child {
    width: 100%;
  }
  .page-header .term-card-actions,
  .page-header > div:last-child[style] {
    width: 100%;
  }
  .term-card-actions {
    width: 100%;
  }
  .record-strip {
    gap: 1.25rem;
  }
  .record-divider {
    display: none;
  }
  .record-item,
  .record-export {
    width: calc(50% - 0.7rem);
    margin-left: 0;
    align-items: flex-start;
    text-align: left;
  }
  .export-btns {
    flex-wrap: wrap;
  }
  .term-detail-grid,
  .child-detail-grid {
    grid-template-columns: 1fr;
  }
  .child-profile-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .child-profile-hero__identity {
    min-width: 0;
    width: 100%;
  }
  .child-profile-hero__actions {
    flex-direction: column;
  }
  .child-profile-action {
    width: 100%;
  }
  .resource-filters {
    grid-template-columns: 1fr;
  }
  .resource-filter-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .resource-grid {
    grid-template-columns: 1fr;
  }
  .child-profile-band {
    flex-direction: column;
    align-items: flex-start;
  }
  .child-profile-band .card-actions {
    width: 100%;
  }
  .child-profile-band .btn-ghost,
  .child-profile-band form,
  .child-profile-band form .btn-ghost {
    width: 100%;
  }
  .gcal-week-head { grid-template-columns: repeat(7, 1fr); }
  .gcal-week-body {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .gcal-week-head { display: none; }
  .gcal-week-col {
    border-left: none;
    border-top: 1px solid #dadce0;
    min-height: 60px;
    padding: 0.5rem;
  }
  .gcal-week-col + .gcal-week-col { border-left: none; }
  .gcal-week-col::before {
    content: attr(data-day-label);
    font-size: var(--text-xs);
    font-weight: 700;
    color: #70757a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
  }
  .gcal-toolbar { flex-wrap: wrap; }
  .gcal-toolbar-right { flex-wrap: wrap; }
  .gcal-title { font-size: var(--text-lg); }
  .gcal-day-columns { grid-template-columns: 1fr; }
  .gcal-day-column { min-height: 150px; }
  .gcal-month-cell { min-height: 60px; }
  .gcal-month-event { font-size: 0.55rem; }
  .gcal-view-btn { padding: 0.35rem 0.6rem; font-size: var(--text-xs); }
  .term-week-row {
    grid-template-columns: 1fr;
  }
  .term-grid { grid-template-columns: repeat(3, 1fr); }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .main {
    padding: 1rem;
    width: 100%;
  }
  .hub-grid { grid-template-columns: 1fr; }
  .dash-greeting { font-size: var(--text-2xl); }
  .dash-tagline { font-size: var(--text-sm); }
  .dash-motto-banner { padding: 0.85rem 1.25rem; }
  .dash-motto-text { font-size: var(--text-sm); }
  .dash-orbs { gap: 1rem; }
  .dash-orb-ring { width: 56px; height: 56px; }
  .dash-orb-pct { font-size: var(--text-xs); }
  .dash-stats { flex-direction: column; }
  .dash-stat-card { min-width: 0; }
  .dash-cards-grid { grid-template-columns: 1fr; }
  .dash-bento-aside { flex-direction: column; }
  .dash-aside-card { min-width: 0; }
  .record-item,
  .record-export {
    width: 100%;
  }
  .form-card {
    padding: 1.25rem;
  }
  .card-head,
  .card-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .resource-card-title,
  .child-profile-id {
    align-items: flex-start;
  }
}

/* ─── BREADCRUMBS ─── */
.breadcrumb {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--on-surface-subtle);
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--on-surface-subtle);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb-sep { color: var(--surface-container-high); font-weight: 300; }

/* ─── SIGN OUT BUTTON ─── */
.signout-btn {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  background: var(--surface-container-low);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.32rem 0.75rem;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-standard);
  cursor: pointer;
  display: inline-block;
  align-self: center;
}
.signout-btn:hover {
  color: var(--on-surface);
  background: var(--surface-container);
}

/* ─── NARRATION EDIT LINK ─── */
.narration-edit {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--on-surface-subtle);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
  margin-left: 0.5rem;
  text-decoration: none;
}
.narration-item:hover .narration-edit { opacity: 0.6; }
.narration-edit:hover { opacity: 1 !important; color: var(--primary); }

/* ─── ONBOARDING ─── */
/* Light canvas matches marketing / docs bone (#f8f7fa); cards stay on surface-lowest. */
.onboarding-body {
  background: #f8f7fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-feature-settings: "cv11", "ss01", "ss03";
}

body.onboarding-body.theme-dark {
  background: var(--surface);
}

.ob-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1.5rem 3rem;
  gap: 2rem;
  min-height: 0;
}

.ob-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.ob-brand--fixed {
  padding: 2rem 0 0.5rem;
  text-align: center;
}

.ob-brand-logo {
  color: var(--on-surface);
}

.ob-brand-logo .binder-wordmark,
.ob-brand-logo img,
.ob-brand-logo svg {
  /* Onboarding hero wordmark — wide rectangular mark, narrower height
     than the previous 12rem tree mark. */
  height: 3rem;
  width: auto;
  display: block;
  margin: 0 auto;
}

/* Onboarding page content — slide transitions handled by ob-transition controller */
.ob-page-content {
  width: 100%;
}

@keyframes obSlideIn {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes obSlideOut {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateX(-60px);
  }
}

.ob-logo {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-style: italic;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.ob-logo-sub {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.ob-card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-3xl);
  padding: 2.75rem 3rem;
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.ob-shell--quickstart {
  padding-top: 0.75rem;
}

.ob-card--quickstart {
  max-width: 920px;
  padding: 2.25rem;
}

.ob-progress-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-container-low));
  color: var(--primary);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 750;
}

.ob-quickstart-head {
  max-width: 680px;
}

.ob-quickstart-head .ob-title {
  margin-bottom: 0.85rem;
}

.ob-quickstart-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem;
}

.ob-quick-section {
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-container-lowest);
}

.ob-quick-section--compact {
  background: transparent;
}

.ob-quick-section-head {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.ob-quick-number {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 800;
}

.ob-quick-section-head h2 {
  margin: 0 0 0.15rem;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--on-surface);
}

.ob-quick-section-head p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  line-height: 1.45;
}

.ob-quick-method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.ob-quick-choice {
  cursor: pointer;
  min-width: 0;
}

.ob-quick-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ob-quick-choice span {
  display: flex;
  flex-direction: column;
  min-height: 8.25rem;
  gap: 0.4rem;
  padding: 0.85rem;
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.ob-quick-choice input:checked + span {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-lowest));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}

.ob-quick-choice strong {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--on-surface);
}

.ob-quick-choice small {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--on-surface-mid);
}

.ob-quick-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.25rem;
}

.ob-quick-primary {
  min-width: 13rem;
  justify-content: center;
}

.ob-quick-skip {
  color: var(--on-surface-mid);
}

/* ── Siri-style AI halo ── */
@property --halo-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.ob-card--ai-halo {
  --halo-angle: 0deg;
  animation: halo-spin 4s linear infinite;
}

.ob-card--ai-halo::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(1.75rem + 3px);
  padding: 3px;
  background: conic-gradient(
    from var(--halo-angle),
    var(--primary),
    color-mix(in srgb, var(--primary) 78%, white),
    color-mix(in srgb, var(--primary) 48%, white),
    var(--primary-hover),
    color-mix(in srgb, var(--primary) 64%, white),
    color-mix(in srgb, var(--primary) 36%, white),
    var(--primary-dim),
    var(--primary)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  animation: halo-fade-in 0.6s ease forwards;
  filter: blur(1px);
}

.ob-card--ai-halo::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: calc(1.75rem + 12px);
  background: conic-gradient(
    from var(--halo-angle),
    color-mix(in srgb, var(--primary) 35%, transparent),
    color-mix(in srgb, var(--primary) 28%, transparent),
    color-mix(in srgb, var(--primary) 20%, transparent),
    color-mix(in srgb, var(--primary-hover) 35%, transparent),
    color-mix(in srgb, var(--primary) 26%, transparent),
    color-mix(in srgb, var(--primary) 18%, transparent),
    color-mix(in srgb, var(--primary-dim) 35%, transparent),
    color-mix(in srgb, var(--primary) 35%, transparent)
  );
  pointer-events: none;
  opacity: 0;
  animation: halo-fade-in 0.8s ease 0.1s forwards;
  filter: blur(18px);
  z-index: -1;
}

@keyframes halo-spin {
  to { --halo-angle: 360deg; }
}

@keyframes halo-fade-in {
  to { opacity: 1; }
}

.ob-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.ob-step {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.ob-step--active {
  color: var(--primary);
}

.ob-step--done {
  color: var(--primary-dim);
}

.ob-step-sep {
  color: var(--surface-container-high);
  font-size: var(--text-xs);
}

.ob-step-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 1rem;
}

.ob-title {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--on-surface);
  margin-bottom: 1.25rem;
}

.ob-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--primary);
}

.ob-desc {
  font-size: var(--text-md);
  color: var(--on-surface-mid);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.ob-form {
  margin-top: 1.75rem;
}

.ob-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 2rem;
}

.ob-btn-primary {
  font-size: var(--text-base);
  padding: 0.75rem 1.75rem;
}

.ob-skip {
  margin-top: 1.25rem;
  text-align: center;
}

.ob-skip-link {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}
.ob-skip-link:hover { color: var(--on-surface-mid); }

.ob-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  max-width: 360px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--on-surface-subtle);
  line-height: 1.6;
}

.ob-quote-attr {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-style: normal;
}

/* ── Founder letter ── */
.ob-letter {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--on-surface);
}

.ob-letter p {
  margin: 0 0 1rem;
}

.ob-letter p:first-child {
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.ob-letter-closing {
  margin-bottom: 0.25rem !important;
}

.ob-letter-signature {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-style: italic;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 0 !important;
  line-height: 1.2;
}

.ob-signature-protected {
  position: relative;
  display: inline-block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Transparent overlay prevents right-click on the image */
.ob-signature-protected::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ob-letter-signature-img {
  height: 3.5rem;
  width: auto;
  margin: 0.25rem 0;
  pointer-events: none;
  -webkit-user-drag: none;
}

.ob-letter-role {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  letter-spacing: 0.03em;
  margin-top: 0 !important;
}

.ob-letter-contact {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin-top: 1.5rem !important;
  padding-top: 1rem;
  border-top: 1px solid var(--outline-variant);
}

.ob-letter-contact a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.ob-letter-contact a:hover {
  text-decoration: underline;
}

.ob-letter-help-link {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin-top: 0.75rem !important;
}

.ob-letter-help-link a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.ob-letter-help-link a:hover {
  text-decoration: underline;
}

/* ── Quiz result ── */
.ob-quiz-result-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.ob-quiz-result-tagline {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--on-surface-subtle);
  margin-bottom: 1.5rem;
}

.ob-quiz-result-body {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--on-surface);
  margin-bottom: 1.25rem;
}

/* ── Quiz CTA on method step ── */
.ob-quiz-cta {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface-container-low);
  border: 2px dashed var(--primary);
  border-radius: var(--radius-lg);
}

.ob-quiz-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.ob-quiz-cta-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--text-base);
  color: var(--on-surface);
}

.ob-quiz-cta-text strong {
  font-size: var(--text-md);
  color: var(--primary);
}

.btn--outline {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  white-space: nowrap;
}

.btn--outline:hover {
  background: var(--primary);
  color: var(--on-primary, #fff);
}

.ob-quiz-result-good-for {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--on-surface-subtle);
  padding: 1rem 1.25rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
}

/* ─── HABITS PAGE ─── */
.habits-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.habits-nav-label {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  color: #3c4043;
}

.habits-card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.habits-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
}

.habits-card-name {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--on-surface);
}

.habits-card-count {
  margin-left: auto;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #9ca3af;
}

.habits-table-wrap {
  overflow-x: auto;
}

.habits-table {
  width: 100%;
  border-collapse: collapse;
}

.habits-th-name {
  width: 180px;
  padding: 0.6rem 1rem;
  text-align: left;
}

.habits-th-day {
  padding: 0.5rem 0.25rem;
  text-align: center;
  min-width: 56px;
}

.habits-th-day--today {
  background: #e8f0fe;
}

.habits-day-abbr {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
}

.habits-day-num {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 400;
  color: #3c4043;
  margin-top: 1px;
}

.habits-day-num--today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1a73e8;
  color: #fff;
  font-weight: 600;
  font-size: var(--text-sm);
}

.habits-row {
  border-top: 1px solid var(--outline-variant);
}
.habits-row:hover {
  background: #fafafa;
}

.habits-td-name {
  padding: 0.6rem 1rem;
}

.habits-habit-link {
  font-size: var(--text-base);
  font-weight: 500;
  color: #374151;
  text-decoration: none;
}
.habits-habit-link:hover {
  color: #1a73e8;
}

.habits-td-check {
  text-align: center;
  padding: 0.4rem;
}

.habits-td-check--today {
  background: #e8f0fe;
}

.habits-check-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-standard);
}
.habits-check-btn:hover {
  background: #e5e7eb;
}

.habits-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.habits-check--empty {
  border: 2px solid #d1d5db;
  background: #fff;
}
.habits-check-btn:hover .habits-check--empty {
  border-color: #1a73e8;
  background: #e8f0fe;
}

.habits-check--done {
  background: #1a73e8;
  color: #fff;
}

/* Dark-mode overrides for the .habits-* table — Google-Calendar-styled module
   above hard-codes light greys (#9ca3af / #e5e7eb / #1a73e8 / #fafafa). Map them
   to dark tokens. */
body.theme-dark .habits-card-count,
body.theme-dark .habits-day-abbr {
  color: var(--on-surface-subtle);
}
body.theme-dark .habits-th-day--today,
body.theme-dark .habits-td-check--today {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-lowest));
}
body.theme-dark .habits-day-num {
  color: var(--on-surface);
}
body.theme-dark .habits-day-num--today {
  background: var(--primary);
  color: var(--on-primary);
}
body.theme-dark .habits-row:hover {
  background: var(--surface-container);
}
body.theme-dark .habits-habit-link {
  color: var(--on-surface);
}
body.theme-dark .habits-habit-link:hover {
  color: var(--primary);
}
body.theme-dark .habits-check-btn:hover {
  background: var(--surface-container-high);
}
body.theme-dark .habits-check--empty {
  border-color: var(--outline);
  background: var(--surface-container);
}
body.theme-dark .habits-check-btn:hover .habits-check--empty {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-lowest));
}
body.theme-dark .habits-check--done {
  background: var(--primary);
  color: var(--on-primary);
}

/* legacy compat */
.habit-week-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.habit-week-label {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
  min-width: 200px;
  text-align: center;
}

.habit-grid {
  margin-bottom: 0.5rem;
}

.habit-grid-header,
.habit-grid-row {
  display: grid;
  grid-template-columns: 1fr repeat(7, 48px) 64px;
  gap: 2px;
  align-items: center;
}

.habit-grid-header {
  padding: 0.4rem 0;
  margin-bottom: 0.25rem;
}

.habit-grid-name-col {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.habit-grid-row .habit-grid-name-col {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--on-surface);
}

.habit-name-actions {
  margin-left: auto;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.habit-grid-row:hover .habit-name-actions {
  opacity: 1;
}

.habit-cat-emoji {
  font-size: var(--text-base);
}

.habit-grid-day-col {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.habit-grid-day-col--today {
  background: rgba(64, 92, 101, 0.06);
  border-radius: var(--radius-sm);
}

.habit-day-abbr {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.habit-day-num {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
}

.habit-grid-streak-col {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.habit-streak-num {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--secondary);
}

.habit-streak-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.habit-grid-row {
  padding: 0.45rem 0;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-standard);
}

.habit-grid-row:hover {
  background: var(--surface-container-low);
}

.habit-toggle-form {
  display: inline;
}

.habit-check {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-lg);
  padding: 0.15rem;
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.habit-check:hover {
  transform: scale(1.15);
}

.habit-check--future {
  color: var(--surface-container-high);
  cursor: default;
  font-size: var(--text-sm);
}

.habit-check--future:hover {
  transform: none;
}

@media (max-width: 768px) {
  .habit-grid-header,
  .habit-grid-row {
    grid-template-columns: 1fr repeat(7, 36px) 48px;
  }
  .habit-day-abbr { font-size: 0.5rem; }
  .habit-name-actions { opacity: 1; }
}

/* ─── HABIT ENHANCEMENTS ─── */

.habits-name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.habits-move-btns {
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.habits-row:hover .habits-move-btns { opacity: 1; }

.habits-move-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  color: var(--on-surface-subtle);
  border-radius: var(--radius-xs);
  transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.habits-move-btn:hover {
  color: var(--primary);
  background: rgba(37, 57, 212, 0.06);
}

.habits-streak-badge {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--secondary);
  white-space: nowrap;
}

.habits-note-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary);
}

.habits-td-check { position: relative; }

/* Inactive habits section */
.habits-inactive-section {
  margin-bottom: 1.25rem;
}

.habits-inactive-summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface-subtle);
  cursor: pointer;
  padding: 0.5rem 0;
  list-style: none;
}

.habits-inactive-summary::-webkit-details-marker { display: none; }
.habits-inactive-summary::before {
  content: "\25B6";
  font-size: 0.55rem;
  transition: transform var(--duration-base) var(--ease-standard);
}
details[open] > .habits-inactive-summary::before { transform: rotate(90deg); }

.habits-inactive-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem 0 0.5rem 1rem;
}

.habits-inactive-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  opacity: 0.7;
}

.habits-inactive-name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
}

.habits-inactive-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.habits-inactive-actions {
  margin-left: auto;
  display: flex;
  gap: 0.35rem;
}

/* Habit rhythm heatmap */
.habit-heatmap {
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
}
.habit-heatmap--compact {
  padding: 0.85rem 1rem;
}
.habit-heatmap-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.8rem;
}
.habit-heatmap-title {
  color: var(--on-surface);
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.habit-heatmap-subtitle {
  margin-top: 0.15rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}
.habit-heatmap-stats {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}
.habit-heatmap-stats span {
  padding: 0.25rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
}
.habit-heatmap-stats strong {
  color: var(--on-surface);
}
.habit-heatmap-scroll {
  overflow-x: auto;
  padding-bottom: 0.2rem;
}
.habit-heatmap-months {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 13px;
  gap: 3px;
  margin-left: 28px;
  min-width: max-content;
  color: var(--on-surface-subtle);
  font-size: 0.65rem;
  line-height: 1;
  height: 1rem;
}
.habit-heatmap-months span {
  white-space: nowrap;
}
.habit-heatmap-body {
  display: flex;
  gap: 0.45rem;
  min-width: max-content;
}
.habit-heatmap-weekdays {
  display: grid;
  grid-template-rows: repeat(7, 13px);
  gap: 3px;
  min-width: 22px;
  color: var(--on-surface-subtle);
  font-size: 0.6rem;
  line-height: 13px;
}
.habit-heatmap-weeks {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 13px;
  gap: 3px;
}
.habit-heatmap-week {
  display: grid;
  grid-template-rows: repeat(7, 13px);
  gap: 3px;
}
.habit-heatmap-cell {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: var(--surface-container-high);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 70%, transparent);
}
.habit-heatmap-cell--level-1 { background: color-mix(in srgb, var(--mint) 28%, var(--surface-lowest)); }
.habit-heatmap-cell--level-2 { background: color-mix(in srgb, var(--mint) 48%, var(--surface-lowest)); }
.habit-heatmap-cell--level-3 { background: color-mix(in srgb, var(--mint) 70%, var(--surface-lowest)); }
.habit-heatmap-cell--level-4 { background: var(--mint); }
.habit-heatmap-cell--future {
  opacity: 0.35;
}
.habit-heatmap-cell--today {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.habit-heatmap-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.65rem;
  color: var(--on-surface-subtle);
  font-size: 0.68rem;
}
.habit-heatmap-foot .habit-heatmap-cell {
  width: 10px;
  height: 10px;
}
@media (max-width: 720px) {
  .habit-heatmap-head {
    flex-direction: column;
  }
  .habit-heatmap-stats {
    justify-content: flex-start;
  }
}

/* Show page: 30-day calendar */
.habits-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  max-width: 280px;
}

.habits-calendar-cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  background: var(--surface-container-high);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-base) var(--ease-standard);
}

.habits-calendar-cell--done {
  background: #1a73e8;
  color: #fff;
}

.habits-calendar-cell--today {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.habits-calendar-day {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Show page: log history */
.habits-log-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.habits-log-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.habits-log-row:nth-child(even) {
  background: var(--surface-container-low);
}

.habits-log-date {
  color: var(--on-surface-mid);
  min-width: 100px;
}

.habits-log-notes {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}

.habits-log-note-form {
  margin-left: auto;
  display: flex;
}

.habits-log-note-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  width: 180px;
  transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}

.habits-log-note-input:focus {
  border-color: var(--focus-ring-border);
  background: var(--surface-lowest);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
}

@media (max-width: 600px) {
  .habits-move-btns { opacity: 1; }
  .habits-calendar-grid { max-width: 100%; }
  .habits-log-note-input { width: 120px; }
}

/* ─── MEMORY WORK ─── */
.mw-due-section {
  margin-bottom: 2rem;
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: rgba(176, 142, 62, 0.06);
}

.mw-section {
  margin-bottom: 2rem;
}

.mw-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  margin-bottom: 0.85rem;
}

.mw-due-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--gold);
  color: white;
  font-size: var(--text-xs);
  font-weight: 700;
  margin-left: 0.35rem;
  vertical-align: middle;
}

.mw-due-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mw-due-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  background: var(--surface-lowest);
}

.mw-due-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mw-due-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
}

.mw-due-card-rotation {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mw-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  transition: background var(--duration-fast) var(--ease-standard);
}

.mw-row:hover { background: var(--surface-container); }
.mw-row--mastered { opacity: 0.6; }

.mw-row-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.mw-row-emoji { font-size: var(--text-lg); flex-shrink: 0; }

.mw-row-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.mw-row-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mw-row-link {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
  text-decoration: none;
}

.mw-row-link:hover { text-decoration: underline; }

.mw-row-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.mw-row-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Memory work show page */
.mw-body-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  margin-bottom: 1.5rem;
}

.mw-body-text {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--on-surface-mid);
  white-space: pre-wrap;
}

.mw-body-text p { margin: 0 0 0.75rem; }
.mw-body-text p:last-child { margin-bottom: 0; }

.mw-stats-bar {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.mw-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.mw-stat-num {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--on-surface);
}

.mw-stat-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
}

.mw-review-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mw-review-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.mw-review-row:nth-child(even) {
  background: var(--surface-container-low);
}

.mw-review-date {
  color: var(--on-surface-mid);
  min-width: 100px;
}

.mw-review-confidence {
  font-weight: 600;
  color: var(--on-surface);
}

.mw-review-notes {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}

/* Confidence picker (review form) */
.confidence-picker {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}

.confidence-option { cursor: pointer; }
.confidence-option input { display: none; }

.confidence-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  border: 2px solid transparent;
  transition: all var(--duration-fast) var(--ease-standard);
}

.confidence-option input:checked + .confidence-label {
  border-color: var(--primary);
  background: var(--surface-container);
  color: var(--on-surface);
}

.confidence-label:hover {
  background: var(--surface-container);
}

.confidence-emoji { font-size: var(--text-base); }

@media (max-width: 600px) {
  .mw-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .mw-row-actions { margin-top: 0.5rem; }
  .mw-stats-bar { flex-wrap: wrap; gap: 1rem; }
}

/* ─── CONFIDENCE TREND ─── */
.mw-trend {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 100px;
  padding: 0.5rem 0;
}

.mw-trend-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 18px;
  max-width: 32px;
}

.mw-trend-bar-track {
  width: 100%;
  height: 72px;
  background: var(--surface-container-high);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.mw-trend-bar-fill {
  width: 100%;
  border-radius: var(--radius-xs);
  transition: height var(--duration-slow) var(--ease-standard);
}

.mw-trend-label {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  color: var(--on-surface-subtle);
}

/* ─── PRACTICE SESSION ─── */
.mw-practice-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.mw-practice-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface-container-low);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  text-align: center;
  transition: opacity var(--duration-slow) var(--ease-standard);
}

.mw-practice-card--done { opacity: 0.5; }

.mw-practice-prompt {
  margin-bottom: 1.5rem;
}

.mw-practice-emoji { font-size: 2rem; margin-bottom: 0.5rem; }

.mw-practice-title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0 0 0.25rem;
}

.mw-practice-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  margin-bottom: 0;
}

.mw-practice-instruction {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  font-style: italic;
  margin-top: 1rem;
}

.mw-practice-body {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--surface-container);
  border-radius: var(--radius-lg);
  text-align: left;
  animation: mwFadeIn 0.3s ease;
}

.mw-practice-confidence {
  margin-top: 1.5rem;
  animation: mwFadeIn 0.3s ease;
}

.mw-practice-confidence p {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-base);
  margin-bottom: 0.75rem;
}

.mw-practice-confidence .confidence-picker {
  justify-content: center;
}

.mw-practice-summary {
  max-width: 480px;
  margin: 3rem auto;
  text-align: center;
}

.mw-practice-summary h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.mw-practice-summary p {
  font-family: var(--font-sans);
  color: var(--on-surface-mid);
  margin-bottom: 1.5rem;
}

@keyframes mwFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .mw-practice-card { padding: 1.5rem 1rem; }
  .mw-practice-title { font-size: var(--text-lg); }
  .mw-trend { gap: 0.2rem; }
}

/* ─── TRANSCRIPTS ─── */
.transcript-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.transcript-card {
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.transcript-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.transcript-card-info {
  display: flex;
  flex-direction: column;
}

.transcript-card-name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
}

.transcript-card-school {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.transcript-card-stats,
.transcript-summary-bar {
  display: flex;
  gap: 1.5rem;
}

.transcript-summary-bar {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
}

.transcript-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.transcript-stat-num {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.1;
}

.transcript-stat-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
}

.transcript-card-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: auto;
}

/* Course table */
.transcript-course-table {
  margin-bottom: 0.5rem;
}

.transcript-course-header,
.transcript-course-row {
  display: grid;
  grid-template-columns: 1fr 100px 70px 60px 100px;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  align-items: center;
}

.transcript-course-header {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  border-bottom: none;
}

.transcript-course-row {
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

.transcript-course-row:nth-child(even) {
  background: var(--surface-container-low);
}

.tc-course-name {
  font-weight: 600;
  color: var(--on-surface);
  display: block;
}

.tc-course-desc {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  display: block;
  margin-top: 0.15rem;
}

.tc-col--credits,
.tc-col--grade {
  text-align: center;
}

.tc-col--actions {
  display: flex;
  gap: 0.3rem;
  justify-content: flex-end;
}

@media (max-width: 600px) {
  .transcript-course-header,
  .transcript-course-row {
    grid-template-columns: 1fr 60px 50px 50px;
  }
  .tc-col--actions { display: none; }
  .transcript-summary-bar { flex-wrap: wrap; }
}

/* ─── STATE COMPLIANCE ─── */
.compliance-state-picker {
  margin-bottom: 2rem;
}

.compliance-state-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.compliance-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.compliance-state-name {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--on-surface);
}

.compliance-reg-badge {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-3xl);
}

.compliance-reg-badge--low {
  background: rgba(83, 98, 80, 0.12);
  color: var(--secondary);
}

.compliance-reg-badge--moderate {
  background: rgba(176, 142, 62, 0.12);
  color: var(--gold);
}

.compliance-reg-badge--high {
  background: rgba(168, 92, 58, 0.12);
  color: var(--terracotta);
}

.compliance-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  margin-bottom: 1rem;
}

.compliance-progress-section {
  margin-bottom: 2.5rem;
}

.compliance-progress-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.compliance-progress-card {
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
}

.compliance-progress-card--wide {
  grid-column: 1 / -1;
}

.compliance-progress-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-mid);
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.compliance-progress-nums {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}

.compliance-progress-current {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1;
}

.compliance-progress-goal {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.compliance-track {
  height: 6px;
  border-radius: var(--radius-xs);
  background: var(--surface-container-high);
  overflow: hidden;
}

.compliance-fill {
  height: 100%;
  border-radius: var(--radius-xs);
  transition: width var(--duration-slow) var(--ease-standard);
}

.compliance-fill--days { background: var(--gold); }
.compliance-fill--hours { background: var(--sky); }

.compliance-subject-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.compliance-subject {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--surface-container);
}

.compliance-subject--covered {
  color: var(--secondary);
  background: rgba(83, 98, 80, 0.08);
}

.compliance-subject-check {
  font-size: var(--text-xs);
}

.compliance-details {
  margin-bottom: 2rem;
}

.compliance-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.compliance-detail-card {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
}

.compliance-detail-icon {
  font-size: var(--text-lg);
  margin-bottom: 0.4rem;
}

.compliance-detail-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  margin-bottom: 0.35rem;
}

.compliance-detail-text {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  line-height: 1.55;
}

.compliance-notes {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
}

.compliance-disclaimer {
  display: flex;
  gap: 0.75rem;
  padding: 1.25rem;
  margin-top: 2rem;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
}

.compliance-disclaimer-icon {
  flex-shrink: 0;
  color: var(--primary);
}

.compliance-disclaimer-icon .material-symbols-outlined {
  font-size: var(--text-xl);
}

.compliance-disclaimer-body {
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  line-height: 1.6;
}

.compliance-disclaimer-body p {
  margin: 0 0 0.5rem;
}

.compliance-disclaimer-body p:last-child {
  margin-bottom: 0;
}

.compliance-disclaimer-body a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.compliance-disclaimer-body a:hover {
  text-decoration: underline;
}

.compliance-disclaimer-sources {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

.compliance-report-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-sm);
  margin-top: 0.25rem;
}

.compliance-notice {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  margin-bottom: 2rem;
}

.compliance-notice a {
  color: var(--primary);
  font-weight: 600;
}

@media (max-width: 600px) {
  .compliance-progress-grid {
    grid-template-columns: 1fr;
  }
  .compliance-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── ATTENDANCE CALENDAR ─── */
.attendance-stats {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.att-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: var(--surface-container-low);
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  min-width: 170px;
}

.att-stat-num {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
}

.att-stat-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

.att-stat-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.att-stat-track {
  flex: 1;
  height: 8px;
  border-radius: var(--radius-xs);
  background: var(--surface-container-high);
  overflow: hidden;
}

.att-stat-fill {
  height: 100%;
  border-radius: var(--radius-xs);
  background: var(--gold);
  transition: width var(--duration-slow) var(--ease-standard);
}

.att-stat-goal {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  white-space: nowrap;
}

.att-calendar-shell {
  margin-bottom: 1.5rem;
}

.att-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.att-calendar-month {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--on-surface);
  min-width: 170px;
  text-align: center;
}

.att-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.att-cal-head {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  text-align: center;
  padding: 0.5rem 0;
}

.att-cal-cell {
  position: relative;
  min-height: 88px;
  padding: 0.5rem;
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  transition: background var(--duration-base) var(--ease-standard);
  border-left: 3px solid transparent;
}

.att-cal-cell:hover {
  background: var(--surface-container);
}

.att-cal-cell--outside {
  opacity: 0.25;
}

.att-cal-cell--today {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: var(--sky-pale);
}

.att-cal-cell--weekend {
  background: var(--surface-container-high);
  opacity: 0.55;
}

.att-cal-cell--school_day { background: rgba(83, 98, 80, 0.16); border-left-color: #536250; }
.att-cal-cell--field_trip { background: rgba(0, 73, 230, 0.10); border-left-color: #0049e6; }
.att-cal-cell--holiday    { background: rgba(176, 142, 62, 0.18); border-left-color: #b08e3e; }
.att-cal-cell--sick_day   { background: rgba(168, 92, 58, 0.18); border-left-color: #a85c3a; }
.att-cal-cell--off_day    { background: rgba(115, 115, 158, 0.12); border-left-color: #73739e; }
.att-cal-cell--auto       { background: rgba(83, 98, 80, 0.08); }

.att-cal-date {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
}

.att-cal-status {
  font-size: var(--text-xl);
  line-height: 1;
}

.att-cal-status--auto {
  opacity: 0.5;
}

.att-cal-actions {
  margin-top: auto;
  width: 100%;
}

.att-mark-form {
  display: block;
}

.att-mark-select {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-sm);
  background: var(--surface-lowest);
  color: var(--on-surface-mid);
  cursor: pointer;
  width: 100%;
}

.att-mark-select:hover {
  border-color: var(--primary);
  color: var(--on-surface);
}

.att-legend {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 1rem 0;
}

.att-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-3xl);
  padding: 0.3rem 0.75rem;
}

.att-legend-dot {
  font-size: var(--text-base);
}

.att-legend-dot--auto {
  opacity: 0.5;
}

/* ─── Attendance Evidence ─── */
.att-evidence {
  margin-top: 1.5rem;
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid rgba(26, 26, 46, 0.06);
  box-shadow: 0 1px 4px rgba(10, 10, 30, 0.04);
  overflow: hidden;
}

.att-evidence-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(26, 26, 46, 0.06);
}

.att-evidence-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(37, 57, 212, 0.7);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.att-evidence-info {
  display: inline-flex;
  color: rgba(26, 26, 46, 0.3);
  cursor: help;
  position: relative;
  transition: color var(--duration-base) var(--ease-standard);
}

.att-evidence-info:hover {
  color: rgba(37, 57, 212, 0.6);
}

.att-evidence-list {
  padding: 0;
}

.att-evidence-item {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(26, 26, 46, 0.04);
}

.att-evidence-item:last-child {
  border-bottom: none;
}

.att-evidence-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.att-evidence-date {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-base);
}

.att-evidence-emoji {
  font-size: var(--text-md);
}

.att-evidence-status {
  color: var(--on-surface-subtle);
  font-weight: 400;
}

.att-evidence-count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.08);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
}

.att-evidence-form {
  margin: 0;
}

.att-evidence-fields {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.att-evidence-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.att-evidence-field--grow {
  flex: 1;
  min-width: 180px;
}

.att-evidence-field--action {
  justify-content: flex-end;
}

.att-evidence-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
}

.att-evidence-select,
.att-evidence-input {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 0.45rem 0.65rem;
  border: 1.5px solid rgba(26, 26, 46, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.8);
  color: var(--on-surface);
  transition: border-color var(--duration-base) var(--ease-standard);
}

.att-evidence-select:focus,
.att-evidence-input:focus {
  outline: none;
  border-color: var(--focus-ring-border);
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
}

.att-evidence-file {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

.att-evidence-file::file-selector-button {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border: 1.5px solid rgba(26, 26, 46, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.8);
  color: var(--on-surface);
  cursor: pointer;
  margin-right: 0.5rem;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.att-evidence-file::file-selector-button:hover {
  background: rgba(37, 57, 212, 0.06);
  border-color: rgba(37, 57, 212, 0.2);
}

.att-evidence-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: #2539d4;
  color: #fff;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
  white-space: nowrap;
}

.att-evidence-btn:hover {
  background: #3a50e0;
  transform: translateY(-1px);
}

.att-evidence-empty {
  padding: 1.5rem 1.25rem;
}

.att-evidence-empty p {
  margin: 0;
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
}

@media (max-width: 600px) {
  .att-cal-cell {
    min-height: 64px;
    padding: 0.35rem;
  }
  .att-attendance-stats {
    flex-direction: column;
  }
  .attendance-stats {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ─── DAILY JOURNAL ─── */
.journal-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.journal-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-3xl);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-standard);
}

.journal-filter:hover {
  background: var(--surface-container);
}

.journal-filter--active {
  background: var(--primary);
  color: white;
}

.journal-timeline {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.journal-day {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.journal-day-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: none;
}

.journal-day-name {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--on-surface);
}

.journal-day-date {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.journal-entry {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
}

.journal-entry-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.journal-entry-child {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--on-surface);
}

.journal-entry-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.journal-entry-badge {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-xs);
  background: var(--surface-container-high);
  color: var(--on-surface-subtle);
}

.journal-entry-notes {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--on-surface-mid);
  margin-bottom: 0.5rem;
}

.journal-entry-notes p {
  margin: 0 0 0.5rem;
}

.journal-entry-notes p:last-child {
  margin-bottom: 0;
}

.journal-entry-section {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  line-height: 1.55;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--surface-container);
}

.journal-entry-section-label {
  font-weight: 700;
  color: var(--on-surface-subtle);
  margin-right: 0.3rem;
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}

.journal-entry-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--surface-container);
}

/* Journal prompt on dashboard */
.journal-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
}

.journal-prompt-text {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

.journal-prompt-link {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.journal-prompt-link:hover {
  text-decoration: underline;
}

/* ─── LESSON TEMPLATES ─── */
.section-block {
  margin-bottom: 2rem;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: none;
}

.section-head-name {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--on-surface);
}

.section-head-count {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.template-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.template-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  transition: background var(--duration-fast) var(--ease-standard);
}

.template-row:hover {
  background: var(--surface-container);
}

.template-row--paused {
  opacity: 0.55;
}

.template-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.template-row-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
}

.template-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.template-row-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.template-row-subject {
  font-weight: 600;
  color: var(--on-surface-mid);
}

.template-row-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-xs);
}

.template-row-badge--paused {
  background: var(--surface-container-high);
  color: var(--on-surface-subtle);
}

.template-row-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* Weekday picker (template form) */
.weekday-picker {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.weekday-option {
  cursor: pointer;
}

.weekday-option input {
  display: none;
}

.weekday-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 2.4rem;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  border: 2px solid transparent;
  transition: all var(--duration-fast) var(--ease-standard);
}

.weekday-option input:checked + .weekday-label {
  border-color: var(--primary);
  background: var(--surface-container);
  color: var(--on-surface);
}

.weekday-label:hover {
  background: var(--surface-container);
}

@media (max-width: 600px) {
  .template-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .template-row-actions {
    margin-top: 0.5rem;
  }
  .weekday-picker {
    flex-wrap: wrap;
  }
}

/* ─── EXPERIENCE PICKER (onboarding) ─── */
.experience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.experience-card { cursor: pointer; }
.experience-card input { display: none; }

.experience-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  border: 2px solid transparent;
  transition: all var(--duration-base) var(--ease-standard);
}

.experience-card input:checked + .experience-card-inner {
  border-color: var(--primary);
  background: var(--surface-container);
}

.experience-card-inner:hover {
  background: var(--surface-container);
}

.experience-card-icon {
  font-size: var(--text-xl);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.experience-card-name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
  display: block;
  margin-bottom: 0.25rem;
}

.experience-card-desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  line-height: 1.55;
  display: block;
}

/* ─── METHOD PICKER (onboarding) ─── */
.ob-card--wide { max-width: 680px; }

.method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.method-card { cursor: pointer; }
.method-card input { display: none; }

.method-card-inner {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  border: 2px solid transparent;
  transition: all var(--duration-base) var(--ease-standard);
}

.method-card input:checked + .method-card-inner {
  border-color: var(--primary);
  background: var(--surface-container);
}

.method-card-inner:hover {
  background: var(--surface-container);
}

.method-card-name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--on-surface);
}

.method-card-desc {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
  line-height: 1.55;
}

@media (max-width: 600px) {
  .method-grid { grid-template-columns: 1fr; }
  .ob-card--wide { max-width: 100%; }
}

/* ── Onboarding responsive: tablet ── */
@media (max-width: 768px) {
  .ob-shell { padding: 1rem 1rem 2rem; gap: 1.5rem; }
  .ob-card { padding: 2rem 1.75rem; max-width: 100%; border-radius: var(--radius-xl); }
  .ob-card--wide { max-width: 100%; }
  .ob-card--quickstart { padding: 1.5rem; }
  .ob-title { font-size: var(--text-3xl); }
  .ob-steps { gap: 0.35rem; flex-wrap: wrap; justify-content: center; }
  .ob-step { font-size: 0.58rem; }
  .ob-step-sep { font-size: var(--text-xs); }
  .ob-quiz-cta-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .ob-quiz-cta-inner .btn--outline { align-self: stretch; text-align: center; }
  .ob-pref-card-body { flex-direction: column; gap: 1rem; }
  .ob-quick-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Onboarding responsive: mobile ── */
@media (max-width: 480px) {
  .ob-shell { padding: 1.25rem 0.75rem; gap: 1rem; }
  .ob-card { padding: 1.5rem 1.25rem; border-radius: var(--radius-lg); }
  .ob-brand { gap: 0.2rem; }
  .ob-logo { font-size: var(--text-2xl); }
  .ob-logo-sub { font-size: 0.5rem; }
  .ob-title { font-size: var(--text-2xl); }
  .ob-title em { display: inline; }
  .ob-desc { font-size: var(--text-base); }
  .ob-steps { gap: 0.25rem; margin-bottom: 1.25rem; }
  .ob-step { font-size: 0.52rem; letter-spacing: 0.06em; }
  .ob-step-sep { font-size: 0.55rem; margin: 0 0.1rem; }
  .ob-form { margin-top: 1.25rem; }
  .ob-letter { font-size: var(--text-base); line-height: 1.65; }
  .ob-letter-signature { font-size: 2rem; }
  .ob-letter-contact { font-size: var(--text-xs); }
  .ob-quote { max-width: 100%; }
  .ob-quote span { font-size: var(--text-sm); }
  .form-row { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; }
  .form-actions .btn,
  .form-actions .btn-ghost { width: 100%; text-align: center; }
  .ob-quick-method-grid { grid-template-columns: 1fr; }
  .ob-quick-choice span { min-height: 0; }
  .ob-quick-actions { flex-direction: column; align-items: stretch; }
  .ob-quick-primary { width: 100%; }
  .ob-quick-skip { width: 100%; text-align: center; }
  .btn { padding: 0.75rem 1.25rem; font-size: var(--text-base); }
  .btn-ghost { padding: 0.6rem 1rem; font-size: var(--text-sm); }
  .experience-card-inner { padding: 0.9rem; }
  .experience-card-name { font-size: var(--text-sm); }
  .experience-card-desc { font-size: var(--text-xs); }
  .method-card-inner { padding: 0.85rem; }
  .method-guide-card-inner { padding: 1rem 1.15rem; }
  .method-guide-card-name { font-size: var(--text-md); }
  .method-guide-card-body { font-size: var(--text-base); }
  .quiz-question-title { font-size: var(--text-xl); }
  .quiz-option-inner { padding: 0.75rem 1rem; }
  .quiz-option-text { font-size: var(--text-sm); }
  .ob-quiz-cta { padding: 1rem 1.15rem; }
  .ob-quiz-cta-text { font-size: var(--text-sm); }
  .ob-quiz-cta-text strong { font-size: var(--text-base); }
  .ob-quiz-result-body { font-size: var(--text-base); }
  .ob-quiz-result-tagline { font-size: var(--text-md); }
  .ob-quiz-result-good-for { font-size: var(--text-sm); padding: 0.85rem 1rem; }
  .ob-pref-card-body { flex-direction: column; gap: 1rem; padding: 1.15rem; }
  .ob-pref-card-title { font-size: var(--text-base); }
  .ob-pref-card-desc { font-size: var(--text-xs); }
  .color-picker { gap: 0.4rem; }
  .color-preset-btn { width: 2rem; height: 2rem; }
  .ob-method-loader-name { font-size: var(--text-2xl); }
  .ob-method-loader-message { font-size: var(--text-xs); }
  .ob-child-item { padding: 0.6rem 0.75rem; }
}

/* ─── METHOD GUIDE (new-to-homeschooling expanded view) ─── */
.method-guide-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.method-guide-card { cursor: pointer; }
.method-guide-card input { display: none; }

.method-guide-card-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  border: 2px solid transparent;
  transition: all var(--duration-base) var(--ease-standard);
}

.method-guide-card input:checked + .method-guide-card-inner {
  border-color: var(--primary);
  background: var(--surface-container);
}

.method-guide-card-inner:hover {
  background: var(--surface-container);
}

.method-guide-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.method-guide-card-name {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--on-surface);
}

.method-guide-card-tagline {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.method-guide-card-body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--on-surface-mid);
  line-height: 1.7;
}

.method-guide-card-good-for {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  line-height: 1.55;
  border-top: 1px solid var(--surface-container-high);
  padding-top: 0.65rem;
}

.method-guide-card-good-for-label {
  font-weight: 700;
  color: var(--on-surface-mid);
  margin-right: 0.25rem;
}

/* ─── TEACHING STYLE QUIZ ─── */
.quiz-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.quiz-progress-track {
  flex: 1;
  height: 6px;
  background: var(--surface-container-high);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  border-radius: var(--radius-xs);
  transition: width var(--duration-slow) var(--ease-standard);
}

.quiz-progress-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-subtle);
  white-space: nowrap;
}

.quiz-question {
  animation: quizFadeIn 0.3s ease;
}

@keyframes quizFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.quiz-question-title {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.25;
  color: var(--on-surface);
  margin-bottom: 0.4rem;
}

.quiz-question-desc {
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  margin-bottom: 1.25rem;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.quiz-option {
  cursor: pointer;
}

.quiz-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quiz-option-inner {
  display: block;
  padding: 0.9rem 1.2rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  transition: background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.quiz-option:hover .quiz-option-inner {
  background: var(--surface-container);
}

.quiz-option input:checked + .quiz-option-inner {
  background: var(--primary);
  box-shadow: 0 2px 12px rgba(64, 92, 101, 0.18);
}

.quiz-option input:checked + .quiz-option-inner .quiz-option-text {
  color: #fff;
}

.quiz-option-text {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--on-surface);
  line-height: 1.4;
}

/* ─── METHOD LOADER OVERLAY ─── */
.ob-method-loader {
  position: fixed;
  inset: 0;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  overflow: hidden;
  visibility: hidden;
}

.ob-method-loader.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.ob-method-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  transform: translateY(10px);
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ob-method-loader.is-visible .ob-method-loader-content {
  transform: translateY(0);
}

.ob-method-loader-logo {
  position: relative;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.ob-method-loader-wordmark {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 500;
  color: var(--primary);
  position: relative;
  z-index: 1;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.ob-method-loader-wordmark .binder-wordmark,
.ob-method-loader-wordmark img,
.ob-method-loader-wordmark svg {
  max-width: 100%;
  max-height: 2.75rem;
  width: auto;
  height: auto;
  display: block;
}

.ob-method-loader-intro {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-top: 0.25rem;
}

.ob-method-loader-name {
  font-family: var(--font-sans);
  font-size: 2.1rem;
  font-style: italic;
  font-weight: 500;
  color: var(--on-surface);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.ob-method-loader-message {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--on-surface-mid);
  max-width: 240px;
  text-align: center;
  line-height: 1.6;
  margin-top: 0.1rem;
}

.ob-method-loader-dots {
  display: flex;
  gap: 0.45rem;
  margin-top: 1.25rem;
}

.ob-method-loader-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.25;
  animation: ob-dot-pulse 1.4s ease-in-out infinite;
}

.ob-method-loader-dots span:nth-child(2) { animation-delay: 0.22s; }
.ob-method-loader-dots span:nth-child(3) { animation-delay: 0.44s; }

@keyframes ob-dot-pulse {
  0%, 80%, 100% { transform: scale(0.65); opacity: 0.25; }
  40%            { transform: scale(1);    opacity: 0.9; }
}

/* ─── SHARE PREVIEW (public) ─── */
.share-preview {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.share-preview-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  pointer-events: none;
}

.share-preview-glow--warm {
  background: radial-gradient(circle, rgba(168, 92, 58, 0.5), transparent 70%);
  top: -10%;
  left: -8%;
  animation: shareGlow 10s ease-in-out infinite alternate;
}

.share-preview-glow--cool {
  background: radial-gradient(circle, rgba(64, 92, 101, 0.45), transparent 70%);
  bottom: -15%;
  right: -8%;
  animation: shareGlow 10s ease-in-out infinite alternate-reverse;
}

@keyframes shareGlow {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.3; }
  100% { transform: translate(20px, -15px) scale(1.1); opacity: 0.45; }
}

.share-preview-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 3rem 1.5rem;
  position: relative;
  z-index: 1;
}

.share-preview-logo {
  text-decoration: none;
}

.share-preview-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-3xl);
  padding: 3rem 3.5rem;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 12px 48px rgba(28, 28, 26, 0.08);
  text-align: center;
}

.share-preview-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--surface-container-low);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-3xl);
  margin-bottom: 1.5rem;
}

.share-preview-title {
  font-family: var(--font-sans);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--on-surface);
  margin-bottom: 1rem;
}

.share-preview-title em {
  font-style: italic;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.share-preview-desc {
  font-size: var(--text-md);
  color: var(--on-surface-mid);
  margin-bottom: 2rem;
}

.share-preview-stats {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-bottom: 1.5rem;
}

.share-preview-stat-num {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
}

.share-preview-stat-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.share-preview-subjects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 2rem;
}

.share-preview-tag {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-3xl);
  background: var(--surface-container-low);
  color: var(--secondary);
}

.share-preview-lesson {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 2rem;
  text-align: left;
}

.share-preview-lesson-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  margin-bottom: 0.4rem;
}

.share-preview-lesson-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  display: flex;
  gap: 0.4rem;
}

.share-preview-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.share-preview-btn-primary {
  padding: 0.75rem 2rem;
  font-size: var(--text-base);
}

.share-preview-fine {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  line-height: 1.6;
  max-width: 380px;
  margin: 0 auto;
}

/* ─── SHARE LINK DISPLAY ─── */
.share-link-display {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}

.share-link-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.share-link-row {
  display: flex;
  gap: 0.5rem;
}

.share-link-input {
  flex: 1;
  font-size: var(--text-sm);
  background: var(--surface-lowest);
}

.share-copy-btn {
  white-space: nowrap;
  font-size: var(--text-sm);
  padding: 0.5rem 1.25rem;
}

/* ─── SHARE OWNER BADGE ─── */
.share-owner-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--surface-container-low);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-3xl);
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* ─── SHARE IMPORT MODAL ─── */
.share-modal {
  border: none;
  border-radius: var(--radius-xl);
  padding: 0;
  box-shadow: 0 24px 80px rgba(28, 28, 26, 0.15);
  max-width: 480px;
  width: 90vw;
}

.share-modal::backdrop {
  background: rgba(28, 28, 26, 0.4);
  backdrop-filter: blur(4px);
}

.share-modal-content {
  padding: 2.5rem;
}

.share-modal-title {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.share-modal-desc {
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  margin-bottom: 1.5rem;
}

.share-child-mapping {
  margin-top: 1.25rem;
}

.share-map-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.share-map-source {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  min-width: 120px;
}

.share-map-arrow {
  color: var(--on-surface-subtle);
  font-size: var(--text-md);
}

.share-map-select {
  flex: 1;
  font-size: var(--text-base);
}

.share-modal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (max-width: 600px) {
  .share-preview-card { padding: 2rem 1.5rem; }
  .share-preview-title { font-size: 2rem; }
  .share-preview-stats { gap: 1.5rem; }
  .share-map-row { flex-wrap: wrap; }
  .share-map-source { min-width: auto; }
}

/* ─── CURRICULUM LISTS (management) ─── */
.cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
}

.cl-card { border-radius: var(--radius-xl); }

.cl-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.cl-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 500;
}

.cl-badge {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-3xl);
  flex-shrink: 0;
}

.cl-badge--published {
  background: rgba(61, 90, 71, 0.12);
  color: var(--secondary);
}

.cl-badge--draft {
  background: var(--surface-container-low);
  color: var(--on-surface-subtle);
}

.cl-card-desc {
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  margin-bottom: 0.75rem;
  line-height: 1.55;
}

.cl-card-meta {
  display: flex;
  gap: 0.75rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-subtle);
}

.cl-items-section {
  margin-top: 2rem;
  border-top: 1px solid var(--surface-container-high);
  padding-top: 1.5rem;
}

.cl-item-row {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.cl-remove-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.cl-remove-check {
  width: auto;
}

/* ─── REFERRALS ─── */
.ref-hero {
  margin-bottom: 2rem;
}

.ref-hero-inner {
  background: linear-gradient(145deg, var(--surface-container-low), var(--surface-container));
  border-radius: var(--radius-3xl);
  padding: 3rem;
  text-align: center;
}

.ref-hero-title {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.ref-hero-desc {
  font-size: var(--text-base);
  color: var(--on-surface-mid);
}

.ref-code-display {
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

.ref-code-display strong {
  font-size: var(--text-md);
  color: var(--primary);
  letter-spacing: 0.06em;
}

.ref-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.ref-stat-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(28, 28, 26, 0.03);
}

.ref-stat-num {
  font-family: var(--font-sans);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.ref-stat-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.ref-how-it-works {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: 0 2px 8px rgba(28, 28, 26, 0.03);
}

.ref-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.ref-steps {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ref-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.ref-step-num {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  color: var(--primary);
  opacity: 0.35;
  min-width: 24px;
  line-height: 1.2;
}

.ref-step-text strong {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
}

.ref-step-text p {
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  margin-top: 0.2rem;
}

.ref-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--surface-container-low);
}

.ref-item:last-child { border-bottom: none; }

.ref-item-email {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  flex: 1;
}

.ref-item-date {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.referral-banner {
  background: linear-gradient(135deg, rgba(61, 90, 71, 0.08), rgba(64, 92, 101, 0.08));
  border: 1px solid rgba(61, 90, 71, 0.15);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--secondary);
  text-align: center;
  line-height: 1.5;
}

.referral-banner-icon {
  margin-right: 0.4rem;
}

@media (max-width: 600px) {
  .ref-stats-grid { grid-template-columns: 1fr; }
}

/* ─── CO-OP HUB ─── */

/* Co-op index / Groups landing page */
.coop-index-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.coop-index-page--simple {
  gap: 1.6rem;
  padding-bottom: 2rem;
}

.coop-index-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 2vw, 2rem);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--primary) 14%, transparent) 0 28%, transparent 42%),
    linear-gradient(135deg, var(--surface-lowest), var(--surface-container-low));
  box-shadow: 0 18px 45px rgba(28, 29, 26, 0.06);
}

.coop-index-hero-copy {
  max-width: 46rem;
}

.coop-index-eyebrow {
  margin-bottom: 0.45rem;
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.coop-index-hero h1 {
  margin: 0;
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.coop-index-hero p {
  max-width: 41rem;
  margin: 0.85rem 0 0;
  color: var(--on-surface-mid);
  font-size: var(--text-base);
  line-height: 1.6;
}

.coop-index-hero-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.coop-index-primary-action,
.coop-index-hero-actions .btn-ghost {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.coop-index-limit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--warning, #d97706) 28%, var(--outline-variant));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--warning, #d97706) 9%, var(--surface-lowest));
  color: var(--on-surface-mid);
}

.coop-index-limit .material-symbols-outlined {
  color: var(--warning, #d97706);
}

.coop-index-limit-cta {
  margin-left: auto;
  white-space: nowrap;
}

.coop-index-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.coop-index-metric {
  min-height: 5.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.15rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: 0 10px 30px rgba(28, 29, 26, 0.04);
}

.coop-index-metric-value {
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: clamp(1.65rem, 2.5vw, 2.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.coop-index-metric-label {
  margin-top: 0.35rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coop-index-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.coop-index-action-card {
  min-height: 6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  color: var(--on-surface);
  text-align: left;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(28, 29, 26, 0.035);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

button.coop-index-action-card {
  font: inherit;
}

.coop-index-action-card:hover,
.coop-index-action-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--outline-variant));
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-lowest));
  box-shadow: 0 16px 36px rgba(28, 29, 26, 0.08);
}

.coop-index-action-card .material-symbols-outlined {
  color: var(--primary);
  font-size: 1.65rem;
}

.coop-index-action-card strong {
  color: var(--on-surface);
  font-size: var(--text-base);
  font-weight: 850;
}

.coop-index-action-card small {
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
}

.coop-index-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 0.85fr);
  gap: 1rem;
  align-items: start;
}

.coop-index-main,
.coop-index-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.coop-card {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-lowest);
  box-shadow: 0 12px 34px rgba(28, 29, 26, 0.045);
  overflow: hidden;
}

.coop-index-section {
  padding: 1.15rem;
}

.coop-card-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  color: var(--on-surface);
}

.coop-card-header .material-symbols-outlined {
  color: var(--primary);
}

.coop-card-header h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.coop-card-header-meta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  min-height: 1.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-container-low));
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 850;
}

.coop-index-grid {
  display: grid;
  gap: 0.9rem;
}

.coop-index-grid--hub {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.coop-index-card {
  --coop-accent: var(--primary);
  display: flex;
  flex-direction: column;
  min-height: 15rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  color: var(--on-surface);
  text-decoration: none;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.coop-index-card:hover,
.coop-index-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--coop-accent) 35%, var(--outline-variant));
  box-shadow: 0 16px 36px rgba(28, 29, 26, 0.08);
}

.coop-index-card-banner {
  height: 4.35rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--coop-accent) 28%, transparent), transparent),
    var(--surface-container-low);
  position: relative;
  overflow: hidden;
}

.coop-index-card-banner::after {
  content: "";
  position: absolute;
  inset: auto -10% -55% 22%;
  height: 5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--coop-accent) 14%, transparent);
}

.coop-index-card-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.coop-index-card-body {
  flex: 1;
  padding: 1rem;
}

.coop-index-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.coop-index-card-icon,
.coop-index-card-monogram,
.coop-index-room-avatar {
  width: 2.7rem;
  height: 2.7rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--coop-accent, var(--primary)) 15%, var(--surface-container-low));
  color: var(--coop-accent, var(--primary));
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: -0.02em;
  object-fit: cover;
}

.coop-index-card-title {
  margin: 0;
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.coop-index-card-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
}

.coop-index-card-role {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 850;
}

.coop-index-card-role--owner {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-container-low));
  color: var(--primary);
}

.coop-index-card-role--member {
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
}

.coop-index-card-desc {
  margin: 0.85rem 0 0;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.coop-index-empty-card,
.coop-index-mini-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 2rem;
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
  text-align: center;
}

.coop-index-empty-card .material-symbols-outlined,
.coop-index-mini-empty .material-symbols-outlined {
  color: var(--primary);
  font-size: 2rem;
}

.coop-index-empty-card h2,
.coop-index-empty-card p,
.coop-index-mini-empty p {
  margin: 0;
}

.coop-index-empty-card h2 {
  color: var(--on-surface);
  font-size: var(--text-xl);
}

.coop-index-empty-actions {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
}

.coop-index-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.coop-index-list-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-lowest);
  color: var(--on-surface);
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.coop-index-list-row:hover,
.coop-index-list-row:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--outline-variant));
  background: color-mix(in srgb, var(--primary) 4%, var(--surface-lowest));
}

.coop-index-list-main {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.coop-index-list-main strong {
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coop-index-list-main span {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coop-date-block {
  width: 2.85rem;
  min-height: 3.15rem;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-container-low));
  color: var(--primary);
}

.coop-date-month {
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coop-date-day {
  font-size: var(--text-lg);
  font-weight: 900;
  line-height: 1;
}

.coop-index-unread {
  min-width: 1.45rem;
  height: 1.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary, #fff);
  font-size: var(--text-xs);
  font-weight: 900;
}

@media (max-width: 980px) {
  .coop-index-hero,
  .coop-index-layout {
    grid-template-columns: 1fr;
  }

  .coop-index-hero {
    flex-direction: column;
  }

  .coop-index-hero-actions {
    justify-content: flex-start;
  }

  .coop-index-metrics,
  .coop-index-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .coop-index-metrics,
  .coop-index-actions,
  .coop-index-grid--hub {
    grid-template-columns: 1fr;
  }

  .coop-index-limit {
    align-items: flex-start;
    flex-direction: column;
  }

  .coop-index-limit-cta {
    margin-left: 0;
  }
}

.coop-simple-header,
.coop-simple-new__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--outline-variant);
}

.coop-simple-header h1,
.coop-simple-new__header h1 {
  margin: 0;
  color: var(--on-surface);
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.coop-simple-header p,
.coop-simple-new__header p {
  max-width: 40rem;
  margin: 0.45rem 0 0;
  color: var(--on-surface-mid);
  font-size: var(--text-base);
  line-height: 1.55;
}

.coop-simple-header__actions,
.coop-simple-new__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding-top: 0.25rem;
}

.coop-simple-header__actions .btn,
.coop-simple-header__actions .btn-ghost {
  min-height: 2.45rem;
  padding: 0.55rem 0.95rem;
  align-items: center;
  gap: 0.42rem;
  line-height: 1;
}

.coop-simple-header__actions .material-symbols-outlined {
  font-size: 1.15rem;
  line-height: 1;
}

.coop-simple-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.8fr);
  gap: 1.2rem;
  align-items: start;
}

.coop-simple-main,
.coop-simple-side,
.coop-simple-new,
.coop-simple-new__form {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.coop-simple-group-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.coop-simple-group-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  color: inherit;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.coop-simple-group-row:hover {
  border-color: color-mix(in srgb, var(--coop-accent, var(--primary)) 30%, var(--outline-variant));
  background: color-mix(in srgb, var(--coop-accent, var(--primary)) 5%, var(--surface-lowest));
}

.coop-simple-group-row__body {
  flex: 1;
  min-width: 0;
}

.coop-simple-group-row__body > div {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.coop-simple-group-row__body strong {
  color: var(--on-surface);
  font-size: var(--text-base);
  font-weight: 750;
}

.coop-simple-group-row__body span,
.coop-simple-group-row__body p {
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
}

.coop-simple-group-row__body p {
  margin: 0.2rem 0 0;
  line-height: 1.4;
}

.coop-simple-group-row__chev {
  color: var(--on-surface-subtle);
  font-size: 1.25rem;
}

.coop-simple-card {
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-sm);
}

.coop-simple-card--compact {
  padding-bottom: 0.85rem;
}

.coop-simple-card h2 {
  margin: 0 0 0.8rem;
  color: var(--on-surface);
  font-size: var(--text-lg);
  line-height: 1.25;
}

.coop-simple-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.coop-simple-grid + .coop-simple-grid,
.coop-simple-grid + .form-group {
  margin-top: 0.85rem;
}

.coop-simple-grid--thirds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.coop-simple-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.coop-simple-preset {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 6.25rem;
  padding: 0.85rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  cursor: pointer;
}

.coop-simple-preset:has(input:checked) {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--outline-variant));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-lowest));
  box-shadow: inset 3px 0 0 var(--primary);
}

.coop-simple-preset input {
  margin-top: 0.2rem;
}

.coop-simple-preset span {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.coop-simple-preset strong {
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 750;
}

.coop-simple-preset small {
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.coop-join-card {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  padding: 1.15rem;
}

.coop-join-card__form {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.coop-join-card__field {
  width: min(100%, 28rem);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.coop-join-card__label {
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coop-join-card__input {
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.12em;
  font-weight: 750;
}

.coop-join-card__submit {
  min-height: 2.75rem;
  min-width: 8rem;
}

.coop-join-card p {
  margin: 0;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .coop-simple-header,
  .coop-simple-new__header {
    flex-direction: column;
  }

  .coop-simple-layout,
  .coop-simple-grid,
  .coop-simple-grid--thirds,
  .coop-simple-presets {
    grid-template-columns: 1fr;
  }

  .coop-simple-header__actions,
  .coop-simple-new__actions {
    justify-content: flex-start;
  }

  .coop-join-card__form {
    align-items: stretch;
  }

  .coop-join-card__field,
  .coop-join-card__submit {
    width: 100%;
  }
}


/* Co-op detail / group hub page */
.coop-page {
  --coop-accent: var(--primary);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.coop-page .coop-hero {
  position: relative;
  z-index: 10;
  min-height: 9rem;
  display: block;
  margin-bottom: 0;
  padding: 0;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--coop-accent) 12%, transparent), transparent 50%),
    var(--surface-lowest);
  box-shadow: 0 16px 42px rgba(28, 29, 26, 0.06);
  overflow: visible;
}

.coop-hero-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.coop-hero-banner-scrim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(18, 22, 20, 0.72), rgba(18, 22, 20, 0.2));
}

.coop-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: clamp(1.1rem, 2vw, 1.6rem);
}

.coop-hero-identity {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
}

.coop-page .coop-hero-icon,
.coop-hero-icon-placeholder {
  width: 4rem;
  height: 4rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.25rem;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--coop-accent) 22%, var(--outline-variant));
  background: color-mix(in srgb, var(--coop-accent) 13%, var(--surface-lowest));
  color: var(--coop-accent);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.coop-hero--with-banner .coop-hero-icon,
.coop-hero--with-banner .coop-hero-icon-placeholder {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.18);
  color: #fff;
  backdrop-filter: blur(8px);
}

.coop-hero-text { min-width: 0; }

.coop-page .coop-hero-title {
  margin: 0;
  color: var(--on-surface);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.coop-hero--with-banner .coop-hero-title,
.coop-hero--with-banner .coop-hero-tagline {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.coop-page .coop-hero-tagline {
  margin: 0.4rem 0 0;
  color: var(--on-surface-mid);
  font-size: var(--text-base);
  line-height: 1.45;
}

.coop-page .coop-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.coop-hero-code,
.coop-page .coop-hero-members,
.coop-hero-tier {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.32rem 0.65rem;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  font-weight: 800;
}

.coop-hero-code { color: var(--coop-accent); }

.coop-hero--with-banner .coop-hero-code,
.coop-hero--with-banner .coop-hero-members,
.coop-hero--with-banner .coop-hero-tier {
  background: rgba(255,255,255,0.16);
  color: #fff;
  backdrop-filter: blur(8px);
}

.coop-page .coop-copy-btn {
  color: inherit;
  font-size: var(--text-xs);
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.coop-hero-actions {
  position: relative;
  flex: 0 0 auto;
}

.coop-hero-kebab,
.coop-icon-btn,
.coop-member-action {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  background: var(--surface-lowest);
  color: var(--on-surface-mid);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.coop-hero-kebab:hover,
.coop-icon-btn:hover,
.coop-member-action:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--coop-accent) 28%, var(--outline-variant));
  background: color-mix(in srgb, var(--coop-accent) 7%, var(--surface-lowest));
  color: var(--coop-accent);
}

.coop-hero--with-banner .coop-hero-kebab {
  background: rgba(255,255,255,0.16);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
}

.coop-hero-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 12rem;
  padding: 0.4rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-lg);
  z-index: 20;
}

.coop-hero-menu[hidden] { display: none; }

.coop-hero-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--on-surface);
  text-decoration: none;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.coop-hero-menu-item:hover { background: var(--surface-container-low); }
.coop-hero-menu-item--danger { color: var(--danger, #b42318); }
.coop-hero-menu-form { margin: 0; }

.coop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 0.85fr);
  gap: 1rem;
  align-items: start;
}

.coop-layout-main,
.coop-layout-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.coop-page .coop-card {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-lowest);
  box-shadow: 0 12px 34px rgba(28, 29, 26, 0.045);
  overflow: hidden;
}

.coop-page .coop-card-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.1rem;
  margin: 0;
  border-bottom: 1px solid var(--outline-variant);
}

.coop-page .coop-card-header > .material-symbols-outlined,
.coop-tool-header-icon {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--coop-accent) 11%, var(--surface-container-low));
  color: var(--coop-accent);
  font-size: 1.25rem;
}

.coop-page .coop-card-header h2 {
  margin: 0;
  color: var(--on-surface);
  font-size: var(--text-lg);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.coop-card-body,
.coop-list,
.coop-storage,
.coop-share-plan-form {
  padding: 1rem 1.1rem;
}

.coop-card-body-hint {
  margin: 0;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.coop-card-header-action {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.coop-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.5rem;
  margin: 1rem 1.1rem;
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
  text-align: center;
}

.coop-empty-state__icon {
  color: var(--coop-accent);
  font-size: 2rem;
}

.coop-empty-state__title,
.coop-empty-state__body {
  margin: 0;
}

.coop-empty-state__title {
  color: var(--on-surface);
  font-weight: 850;
}

.coop-empty-state__body {
  max-width: 28rem;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.coop-tool-card-header {
  align-items: flex-start;
}

.coop-tool-card-title-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.coop-tool-kicker {
  color: var(--coop-accent);
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.coop-tool-card-intro {
  padding-bottom: 0;
}

.coop-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.coop-list-row,
.coop-tool-entry {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  color: var(--on-surface);
  text-decoration: none;
}

.coop-list-row:hover:is(a),
a.coop-list-row:hover {
  border-color: color-mix(in srgb, var(--coop-accent) 25%, var(--outline-variant));
  background: color-mix(in srgb, var(--coop-accent) 4%, var(--surface-lowest));
}

.coop-list-row-main {
  min-width: 0;
  flex: 1;
}

.coop-list-row-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  color: var(--on-surface);
  font-weight: 850;
  line-height: 1.25;
}

.coop-list-row-meta,
.coop-tool-entry-meta {
  margin-top: 0.25rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.coop-tool-entry-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.coop-tool-entry-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.coop-tool-entry-meta .material-symbols-outlined {
  font-size: 0.95rem;
}

.coop-type-icon,
.coop-tool-entry-icon {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--coop-accent) 10%, var(--surface-container-low));
  color: var(--coop-accent);
}

.coop-type-icon .material-symbols-outlined,
.coop-tool-entry-icon .material-symbols-outlined {
  font-size: 1.2rem;
}

.coop-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  font-weight: 850;
  white-space: nowrap;
}

.coop-role-badge--owner,
.coop-role-badge--moderator,
.coop-role-badge--pinned,
.coop-tool-status-badge--pinned {
  background: color-mix(in srgb, var(--coop-accent) 12%, var(--surface-container-low));
  color: var(--coop-accent);
}

.coop-role-badge--pending,
.coop-tool-status-badge--closed {
  background: color-mix(in srgb, var(--warning, #d97706) 12%, var(--surface-container-low));
  color: var(--warning, #d97706);
}

.coop-role-badge--upgrade {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-container-low));
  color: var(--primary);
}

.coop-add-form {
  margin: 0 1.1rem 1rem;
  border-top: 1px solid var(--outline-variant);
  padding-top: 0.8rem;
}

.coop-add-form summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--coop-accent);
  font-size: var(--text-sm);
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.coop-add-form summary::-webkit-details-marker { display: none; }

.coop-add-form-body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.coop-add-form-cols,
.coop-add-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.coop-add-form-row {
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: center;
}

.coop-add-form-row label,
.coop-add-form-hint {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}

.coop-add-form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
}

.coop-add-form-submit { align-self: flex-start; }

.coop-member-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--outline-variant);
}

.coop-member-row:last-child { border-bottom: 0; }

.coop-avatar {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--coop-accent) 12%, var(--surface-container-low));
  color: var(--coop-accent);
  font-size: var(--text-xs);
  font-weight: 900;
}

.coop-avatar--sm {
  width: 2rem;
  height: 2rem;
}

.coop-member-name {
  min-width: 0;
  flex: 1;
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 750;
}

.coop-member-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.coop-member-action {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
}

.coop-member-action .material-symbols-outlined,
.coop-icon-btn .material-symbols-outlined {
  font-size: 1rem;
}

.coop-member-action--danger,
.coop-icon-btn:hover {
  color: var(--danger, #b42318);
}

.coop-pending-group {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--outline-variant);
}

.coop-pending-group-label {
  margin-bottom: 0.35rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coop-resource-group {
  margin: 0 1.1rem 0.75rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.coop-resource-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  background: var(--surface-container-low);
  color: var(--on-surface);
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.coop-resource-group > summary::-webkit-details-marker { display: none; }

.coop-resource-group-count {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}

.coop-storage-head,
.coop-top-uploader {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
}

.coop-storage-track {
  height: 0.55rem;
  margin-top: 0.65rem;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
  overflow: hidden;
}

.coop-storage-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--coop-accent);
}

.coop-top-uploaders {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.8rem;
}

.coop-tool-options,
.coop-tool-actions,
.coop-marketplace-summary,
.coop-tool-attachments {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.coop-tool-option-btn,
.coop-marketplace-pill,
.coop-tool-attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 800;
  text-decoration: none;
}

.coop-tool-option-btn.is-selected {
  border-color: color-mix(in srgb, var(--coop-accent) 35%, var(--outline-variant));
  background: color-mix(in srgb, var(--coop-accent) 12%, var(--surface-container-low));
  color: var(--coop-accent);
}

.coop-tool-attachment img {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.coop-marketplace-pill--sold,
.coop-marketplace-pill--claimed,
.coop-marketplace-pill--closed {
  color: var(--danger, #b42318);
}

.coop-plan-banner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--warning, #d97706) 25%, var(--outline-variant));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--warning, #d97706) 9%, var(--surface-lowest));
  color: var(--on-surface-mid);
}

.coop-plan-banner-cta { margin-left: auto; }

@media (max-width: 980px) {
  .coop-layout { grid-template-columns: 1fr; }
  .coop-hero-inner { flex-direction: column; }
}

@media (max-width: 560px) {
  .coop-hero-identity { flex-direction: column; }
  .coop-add-form-cols,
  .coop-add-form-row { grid-template-columns: 1fr; }
  .coop-member-row { align-items: flex-start; flex-wrap: wrap; }
}

/* Hero */
.coop-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.coop-hero-title {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 800;
  color: var(--on-surface);
  margin-bottom: 0.25rem;
}

.coop-hero-desc {
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  max-width: 36rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.coop-hero-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.coop-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.04em;
}

.coop-copy-btn {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.coop-hero-members {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  font-weight: 500;
}

.coop-hero-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

/* Co-op hero with header image */
.coop-hero--with-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 200px;
  position: relative;
  border: none;
}

.coop-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 100%);
  border-radius: inherit;
}

.coop-hero--with-image .coop-hero-content {
  position: relative;
  z-index: 1;
}

.coop-hero--with-image .coop-hero-title,
.coop-hero--with-image .coop-hero-tagline,
.coop-hero--with-image .coop-hero-desc {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.coop-hero--with-image .coop-hero-members {
  color: rgba(255,255,255,0.8);
}

.coop-hero--with-image .coop-hero-badge {
  background: rgba(255,255,255,0.2);
  color: #ffffff;
  backdrop-filter: blur(6px);
}

.coop-hero--with-image .coop-copy-btn {
  color: rgba(255,255,255,0.9);
}

.coop-hero--with-image .btn-ghost {
  color: #ffffff;
  border-color: rgba(255,255,255,0.3);
}

.coop-hero--with-image .btn-ghost:hover {
  background: rgba(255,255,255,0.15);
}

.coop-hero-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

.coop-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.coop-hero-tagline {
  color: var(--on-surface-mid);
  font-size: var(--text-base);
  font-weight: 500;
  margin: 0.15rem 0 0.6rem;
}

/* Grid Layout */
.coop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .coop-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.coop-grid-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.coop-grid-side {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Board Card */
.coop-board-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(28, 29, 26, 0.04);
  overflow: hidden;
}

.coop-board-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--on-surface);
}

.coop-board-body {
  padding: 0 1.5rem 1.5rem;
}

/* Post Form */
.coop-post-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.coop-post-input {
  resize: vertical;
  min-height: 4rem;
}

/* Posts List */
.coop-posts {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.coop-post {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--surface-container-low);
}

.coop-post:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.coop-post-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.coop-post-author {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--on-surface);
}

.coop-post-date {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.coop-post-del {
  margin-left: auto;
  font-size: var(--text-xs);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.coop-post:hover .coop-post-del {
  opacity: 1;
}

.coop-post-title {
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--on-surface);
  margin-bottom: 0.25rem;
}

.coop-post-body {
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  line-height: 1.6;
}

.coop-post-body p {
  margin-bottom: 0.5rem;
}

.coop-post-body p:last-child {
  margin-bottom: 0;
}

.coop-empty-posts {
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
  text-align: center;
  padding: 2rem 0;
}

/* Side Cards */
.coop-side-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(28, 29, 26, 0.04);
  padding: 1.25rem;
}

.coop-side-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.coop-side-card-header h3 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--on-surface);
}

/* Events */
.coop-events-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.coop-event-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  position: relative;
}

.coop-event-date-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 0.4rem;
  background: var(--secondary-container);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.coop-event-month {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--secondary);
  text-transform: uppercase;
}

.coop-event-day {
  font-size: var(--text-lg);
  font-weight: 900;
  color: var(--secondary);
  line-height: 1;
}

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

.coop-event-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--on-surface);
  line-height: 1.3;
}

.coop-event-meta {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  margin-top: 0.15rem;
}

/* Resources */
.coop-resources-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.coop-resource-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

.coop-resource-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

.coop-resource-name {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--on-surface);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.coop-resource-name:hover {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.coop-resource-meta {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

/* Delete button for items */
.coop-item-delete {
  position: absolute;
  right: 0;
  top: 0;
  background: none;
  border: none;
  color: var(--on-surface-subtle);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: var(--radius-full);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
  display: flex;
  align-items: center;
}

.coop-event-item:hover .coop-item-delete,
.coop-resource-item:hover .coop-item-delete {
  opacity: 1;
}

.coop-item-delete:hover {
  background: var(--surface-container);
  color: var(--error);
}

/* Empty text */
.coop-empty-text {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  text-align: center;
  padding: 1rem 0;
}

/* Add Form (collapsible) */
.coop-add-form-details {
  margin-top: 1rem;
}

.coop-add-form-details summary {
  list-style: none;
}

.coop-add-form-details summary::-webkit-details-marker {
  display: none;
}

.coop-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.6rem;
  border: 2px dashed var(--outline-variant);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--on-surface-subtle);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
  background: none;
}

.coop-add-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.coop-inline-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 1rem 1rem;
}

/* ─── EVENT DETAIL PAGE ─── */
.event-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 768px) {
  .event-detail {
    grid-template-columns: 1fr;
  }
}

.event-detail-main { min-width: 0; }
.event-detail-sidebar { min-width: 0; }

.event-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.event-detail-date-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  padding: 0.6rem;
  background: var(--secondary-container);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.event-detail-date-box .coop-event-month { font-size: var(--text-xs); }
.event-detail-date-box .coop-event-day { font-size: var(--text-xl); }

.event-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.event-type-badge--field_trip {
  background: #e8f5e9;
  color: #2e7d32;
}

.event-type-badge--class_session {
  background: #e3f2fd;
  color: #1565c0;
}

.event-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0;
  border-top: 1px solid var(--outline-variant);
  border-bottom: 1px solid var(--outline-variant);
}

.event-detail-meta-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-base);
  color: var(--on-surface);
}

.event-detail-meta-item .material-symbols-outlined {
  font-size: var(--text-xl);
  color: var(--on-surface-subtle);
}

.event-detail-desc {
  margin-top: 1rem;
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  line-height: 1.6;
}

/* RSVP Buttons */
.event-rsvp-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.event-rsvp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-lowest);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface-mid);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.event-rsvp-btn .material-symbols-outlined { font-size: var(--text-lg); }

.event-rsvp-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.event-rsvp-btn--active.event-rsvp-btn--going {
  border-color: #2e7d32;
  background: #e8f5e9;
  color: #2e7d32;
}

.event-rsvp-btn--active.event-rsvp-btn--maybe {
  border-color: #f9a825;
  background: #fff8e1;
  color: #f57f17;
}

.event-rsvp-btn--active.event-rsvp-btn--declined {
  border-color: var(--error);
  background: var(--rose-pale);
  color: var(--error);
}

/* Attendee List */
.event-attendee-group { margin-bottom: 0.75rem; }
.event-attendee-group:last-child { margin-bottom: 0; }

.event-attendee-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  margin-bottom: 0.35rem;
}

.event-attendee {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: var(--text-sm);
  color: var(--on-surface);
}

.event-attendee-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.event-attendee-dot--going { background: #2e7d32; }
.event-attendee-dot--maybe { background: #f9a825; }
.event-attendee-dot--declined { background: var(--error); }

/* ─── LOCATION AUTOCOMPLETE ─── */
.loc-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  margin-top: 0.25rem;
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}

.loc-suggestion {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background var(--duration-fast) var(--ease-standard);
}

.loc-suggestion:hover,
.loc-suggestion--active {
  background: var(--surface-container-low);
}

.loc-suggestion + .loc-suggestion {
  border-top: 1px solid var(--outline-variant);
}

.loc-suggestion-icon {
  font-size: var(--text-xl);
  color: var(--primary);
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.loc-suggestion-text {
  flex: 1;
  min-width: 0;
}

.loc-suggestion-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.3;
}

.loc-suggestion-detail {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── EVENT CALENDAR ─── */
.event-cal {
  width: 100%;
  max-width: none;
}

.event-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}

.event-cal-month {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--on-surface);
  min-width: 200px;
  text-align: center;
  margin: 0;
}

.event-cal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard);
}

.event-cal-nav-btn:hover {
  background: var(--surface-container);
}

.event-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.event-cal-header {
  padding: 0.5rem;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--outline-variant);
}

.event-cal-day {
  min-height: 5.5rem;
  padding: 0.35rem;
  border-right: 1px solid var(--outline-variant);
  border-bottom: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.event-cal-day:nth-child(7n+7) { border-right: none; }

.event-cal-day--other {
  background: var(--surface-container-low);
}

.event-cal-day--other .event-cal-day-num {
  color: var(--on-surface-subtle);
  opacity: 0.5;
}

.event-cal-day--today .event-cal-day-num {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-cal-day-num {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-mid);
  margin-bottom: 0.15rem;
}

.event-cal-event {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.25rem;
  border-radius: var(--radius-xs);
  text-decoration: none;
  font-size: var(--text-xs);
  line-height: 1.3;
  overflow: hidden;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard);
}

.event-cal-event:hover { background: var(--surface-container); }

.event-cal-event-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.event-cal-event--field_trip .event-cal-event-dot { background: #2e7d32; }
.event-cal-event--class_session .event-cal-event-dot { background: #1565c0; }

.event-cal-event-title {
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-cal-more {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  padding: 0 0.25rem;
}

.event-cal-upcoming {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--outline-variant);
}

@media (max-width: 600px) {
  .event-cal-day { min-height: 3.5rem; }
  .event-cal-event-title { display: none; }
  .event-cal-event-dot { width: 6px; height: 6px; }
}

/* Members */
.coop-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  gap: 0.5rem;
}

.coop-member-row + .coop-member-row {
  border-top: 1px solid var(--surface-container-low);
}

.coop-member-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.coop-member-email {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coop-member-badge {
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--primary-container);
  color: var(--primary);
}

.coop-remove-btn {
  font-size: var(--text-xs);
  padding: 0.2rem 0.5rem;
}

/* Chat Card in co-op */
.coop-chat-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(28, 29, 26, 0.04);
  overflow: hidden;
}
.coop-chat-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}
.chat-messages-list {
  flex: 1;
  overflow-y: auto;
  max-height: 420px;
  min-height: 120px;
  padding: 1.25rem 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.chat-message {
  display: flex;
}
.chat-message--mine {
  justify-content: flex-end;
}
.chat-message--theirs {
  justify-content: flex-start;
}
.chat-bubble {
  max-width: 70%;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container);
  color: var(--on-surface);
  font-size: var(--text-base);
  line-height: 1.45;
}
.chat-message--mine .chat-bubble {
  background: var(--primary);
  color: var(--on-primary);
  border-bottom-right-radius: 0.25rem;
}
.chat-message--theirs .chat-bubble {
  border-bottom-left-radius: 0.25rem;
}
.chat-meta {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}
.chat-message--mine .chat-meta {
  justify-content: flex-end;
}
.chat-author {
  font-size: var(--text-xs);
  font-weight: 600;
  opacity: 0.75;
}
.chat-time {
  font-size: var(--text-xs);
  opacity: 0.6;
}
.chat-body {
  word-break: break-word;
  white-space: pre-wrap;
}
.chat-empty {
  color: var(--nc-text-muted);
  font-size: var(--text-base);
  text-align: center;
  padding: 2rem 0;
}
.chat-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--nc-border);
  background: var(--surface-container-low);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.chat-input {
  flex: 1;
  resize: none;
  min-height: 2.4rem;
  max-height: 8rem;
  overflow-y: auto;
}
.chat-send-btn {
  flex-shrink: 0;
  align-self: flex-end;
}
.chat-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-base);
  color: inherit;
  opacity: 0.5;
  padding: 0 0.15rem;
  line-height: 1;
}
.chat-del-btn:hover { opacity: 1; }

/* ── Chat attachments (rendered in message bubble) ── */
.chat-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.chat-attachment-img-link {
  display: block;
  max-width: 220px;
}
.chat-attachment-img {
  width: 100%;
  max-width: 220px;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}
.chat-attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(0,0,0,.06);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.65rem;
  text-decoration: none;
  color: inherit;
  font-size: var(--text-sm);
  max-width: 220px;
  overflow: hidden;
}
.chat-message--mine .chat-attachment-file {
  background: rgba(255,255,255,.18);
}
.chat-attachment-file:hover { text-decoration: underline; }
.chat-file-icon { flex-shrink: 0; }
.chat-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-file-size {
  flex-shrink: 0;
  font-size: var(--text-xs);
  opacity: 0.65;
}

/* ── File attach button in chat input bar ── */
.chat-attach-btn {
  flex-shrink: 0;
  cursor: pointer;
  font-size: var(--text-lg);
  line-height: 1;
  padding: 0.35rem;
  border-radius: var(--radius-sm);
  opacity: 0.65;
  transition: opacity var(--duration-base) var(--ease-standard);
  user-select: none;
  align-self: flex-end;
}
.chat-attach-btn:hover { opacity: 1; }

/* ── File preview strip (above input row) ── */
.chat-file-preview-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1.25rem 0.5rem;
}
.chat-file-preview-strip:empty { display: none; }
.chat-preview-item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: visible;
}
.chat-preview-thumb {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--nc-border);
}
.chat-preview-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface-container);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.6rem;
  max-width: 160px;
  font-size: var(--text-sm);
}
.chat-preview-icon { flex-shrink: 0; }
.chat-preview-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90px;
}
.chat-preview-size { font-size: var(--text-xs); opacity: 0.6; flex-shrink: 0; }
.chat-preview-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--error, #c0392b);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: var(--text-xs);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.chat-form-error {
  color: var(--error, #c0392b);
  font-size: var(--text-base);
  padding: 0.3rem 1.25rem 0;
}

/* ─── FULL-PAGE CHAT (Campfire) ─── */
.fullchat {
  display: flex;
  height: calc(100vh - 4rem);
  gap: 0;
  position: relative;
}

.fullchat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-lowest);
  border-radius: 1rem 0 0 1rem;
}

.fullchat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.fullchat-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.fullchat-back {
  display: flex;
  align-items: center;
  color: var(--on-surface-subtle);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}
.fullchat-back:hover { color: var(--on-surface); }

.fullchat-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}

.fullchat-online-count {
  font-size: var(--text-xs);
  color: var(--secondary);
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  background: var(--secondary-container);
  border-radius: var(--radius-full);
}

.fullchat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

.fullchat-messages-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.fullchat-composer {
  padding: 0.75rem 1.5rem 1rem;
  border-top: 1px solid var(--surface-container-low);
}

/* ── Typing Indicator ── */
.fullchat-typing {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1.5rem;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  font-weight: 500;
}

.typing-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--on-surface-subtle);
  animation: typing-bounce 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.typing-dots span:nth-child(2) { animation-delay: -0.16s; }
.typing-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ── Sidebar ── */
.fullchat-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--surface-container-low);
  border-radius: 0 1rem 1rem 0;
  overflow-y: auto;
  padding: 1rem 0;
}

.fullchat-sidebar-section {
  padding: 0.5rem 1rem;
}

.fullchat-sidebar-section + .fullchat-sidebar-section {
  border-top: 1px solid var(--surface-container-low);
  margin-top: 0.5rem;
  padding-top: 1rem;
}

.fullchat-sidebar-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem;
}

.fullchat-members {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fullchat-member {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fullchat-member-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.fullchat-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
}

.fullchat-online-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--surface);
}

.fullchat-online-dot--offline {
  background: var(--on-surface-subtle);
  opacity: 0.3;
}

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

.fullchat-member-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface);
  display: block;
}

.fullchat-member-role {
  font-size: var(--text-xs);
  color: var(--secondary);
  font-weight: 600;
}

.fullchat-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  padding: 0.25rem 0;
}

.fullchat-group-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ── Message with avatar (Campfire style) ── */
.fullchat .chat-message {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  position: relative;
}

.fullchat .chat-message:hover {
  background: var(--surface-container-low);
  border-radius: var(--radius-sm);
  margin: 0 -0.5rem;
  padding: 0.5rem;
}

.chat-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.chat-message-content {
  flex: 1;
  min-width: 0;
}

.fullchat .chat-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.fullchat .chat-author {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--on-surface);
}

.fullchat .chat-time {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.fullchat .chat-body {
  font-size: var(--text-base);
  color: var(--on-surface);
  line-height: 1.5;
  word-break: break-word;
}

.chat-reply-context {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  margin-bottom: 0.25rem;
  padding: 0.15rem 0.5rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-xs);
  border-left: 3px solid var(--primary-container);
}

/* ── Message Actions (hover) ── */
.chat-message-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 0.15rem;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container-low);
  border-radius: var(--radius-sm);
  padding: 0.15rem;
  box-shadow: 0 2px 8px rgba(28, 29, 26, 0.08);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.chat-message:hover .chat-message-actions {
  opacity: 1;
}

.chat-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--on-surface-subtle);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.chat-action-btn .material-symbols-outlined {
  font-size: var(--text-lg);
}

.chat-action-btn:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.chat-action-btn--danger:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* ── Reactions ── */
.chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
  align-items: center;
}

.chat-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--surface-container);
  border-radius: var(--radius-full);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.chat-reaction-pill:hover {
  background: var(--surface-container-low);
  border-color: var(--primary-container);
}

.chat-reaction-pill--active {
  background: var(--primary-container);
  border-color: var(--primary);
}

.chat-reaction-emoji {
  font-size: var(--text-base);
  line-height: 1;
}

.chat-reaction-count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--on-surface-mid);
}

.chat-reaction-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px dashed var(--surface-container);
  border-radius: var(--radius-full);
  background: none;
  color: var(--on-surface-subtle);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.chat-reaction-add:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Thread Link ── */
.chat-thread-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.chat-thread-link:hover {
  opacity: 0.7;
}

/* ── Thread Panel ── */
.fullchat-thread {
  width: 320px;
  flex-shrink: 0;
  background: var(--surface-lowest);
  border-left: 1px solid var(--surface-container-low);
  display: flex;
  flex-direction: column;
}

.fullchat-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.fullchat-thread-header h3 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  margin: 0;
}

.fullchat-thread-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.fullchat-thread-composer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--surface-container-low);
}

.fullchat-thread-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── Emoji Picker ── */
.emoji-picker {
  position: fixed;
  z-index: 1000;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(28, 29, 26, 0.12);
  padding: 0.5rem;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.15rem;
}

.emoji-picker-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: var(--text-lg);
  transition: background var(--duration-fast) var(--ease-standard);
}

.emoji-picker-btn:hover {
  background: var(--surface-container-low);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .fullchat {
    flex-direction: column;
    height: calc(100vh - 2rem);
  }
  .fullchat-sidebar {
    display: none;
  }
  .fullchat-thread {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    border-radius: 0;
  }
  .fullchat-main {
    border-radius: var(--radius-lg);
  }
}

/* ─── DIRECT MESSAGES ─── */
.dm-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 768px) {
  .dm-layout { grid-template-columns: 1fr; }
}

/* Conversations List */
.dm-conversations-list {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(28, 29, 26, 0.04);
  overflow: hidden;
}

.dm-conversation-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--surface-container-low);
  transition: background var(--duration-fast) var(--ease-standard);
}

.dm-conversation-item:last-child { border-bottom: none; }

.dm-conversation-item:hover {
  background: var(--surface-container-low);
}

.dm-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

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

.dm-conversation-name {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--on-surface);
}

.dm-conversation-preview {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

.dm-conversation-time {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  flex-shrink: 0;
  white-space: nowrap;
}

.dm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1.5rem;
  color: var(--on-surface-mid);
  font-size: var(--text-base);
}

/* Contacts Sidebar */
.dm-contacts {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(28, 29, 26, 0.04);
  padding: 1.25rem;
}

.dm-contacts-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.75rem;
}

.dm-contact-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
}

.dm-contact-item + .dm-contact-item {
  border-top: 1px solid var(--surface-container-low);
}

.dm-contact-name {
  flex: 1;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-contact-btn {
  font-size: var(--text-xs);
  padding: 0.25rem 0.6rem;
  flex-shrink: 0;
}

/* DM Chat View */
.dm-chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 4rem);
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.dm-chat-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.dm-chat-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}

.dm-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

.dm-messages-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dm-empty-chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  color: var(--on-surface-mid);
  font-size: var(--text-base);
  text-align: center;
}

.dm-chat-composer {
  padding: 0.75rem 1.5rem 1rem;
  border-top: 1px solid var(--surface-container-low);
}

/* DM Message Bubble */
.dm-message {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
}

.dm-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.dm-message-content {
  flex: 1;
  min-width: 0;
}

.dm-message-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.dm-message-author {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--on-surface);
}

.dm-message-time {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.dm-message-body {
  font-size: var(--text-base);
  color: var(--on-surface);
  line-height: 1.5;
  word-break: break-word;
}

.dm-message-body p {
  margin: 0 0 0.35rem;
}

.dm-message-body p:last-child {
  margin-bottom: 0;
}

/* DM Form */
.dm-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dm-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.dm-input {
  flex: 1;
  min-height: 2.4rem;
  max-height: 8rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--surface-container);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  resize: none;
  overflow-y: auto;
  outline: none;
  background: var(--surface);
  color: var(--on-surface);
  transition: border-color var(--duration-base) var(--ease-standard);
}

.dm-input:focus {
  border-color: var(--focus-ring-border);
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
  outline: none;
}

.dm-send-btn {
  flex-shrink: 0;
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
}

/* ─── FRIENDS ─── */
.friends-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 640px;
}

.friends-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(28, 29, 26, 0.04);
  overflow: hidden;
}

.friends-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.friends-card-header h3 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}

.friends-card-body {
  padding: 1.25rem;
}

.friends-code-display {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
}

.friends-code {
  font-family: 'Plus Jakarta Sans', monospace;
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.15em;
}

.friends-copy-btn {
  margin-left: auto;
  font-size: var(--text-sm);
}

.friends-code-hint {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

.friends-add-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.friends-add-row {
  display: flex;
  gap: 0.5rem;
}

.friends-add-row .form-input {
  flex: 1;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.friends-list {
  display: flex;
  flex-direction: column;
}

.friends-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.friends-item:last-child { border-bottom: none; }

.friends-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

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

.friends-item-name {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--on-surface);
  display: block;
}

.friends-item-meta {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.friends-item-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-shrink: 0;
}

.friends-accept-btn {
  font-size: var(--text-sm);
  padding: 0.3rem 0.75rem;
}

.friends-msg-btn,
.friends-remove-btn {
  padding: 0.3rem;
  border-radius: var(--radius-xs);
}

.friends-remove-btn:hover {
  color: var(--error);
}

.friends-empty {
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
}

/* ─── CAMPFIRE CHAT ROOMS ─── */

/* Full-page layout */
.chatroom {
  display: flex;
  height: calc(100dvh - 4rem);
  min-height: 0;
  gap: 0;
  position: relative;
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(28, 29, 26, 0.04);
}

.chatroom-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Header */
.chatroom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid var(--surface-container-low);
  flex-shrink: 0;
}

.chatroom-header-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.chatroom-back {
  display: flex;
  align-items: center;
  color: var(--on-surface-subtle);
  text-decoration: none;
  padding: 0.25rem;
  border-radius: var(--radius-xs);
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}

.chatroom-back:hover {
  color: var(--on-surface);
  background: var(--surface-container-low);
}

.chatroom-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.chatroom-header-icon {
  color: var(--primary);
  font-size: var(--text-xl);
}

.chatroom-header-title {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}

.chatroom-online-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--secondary);
  padding: 0.15rem 0.5rem;
  background: var(--secondary-container);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.chatroom-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chatroom-involvement-select {
  font-size: var(--text-xs);
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--surface-container);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--on-surface-mid);
  font-family: var(--font-sans);
}

/* Messages area */
.chatroom-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.5rem;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* "Load earlier messages" trigger that sits at the top of the scroll
   when a room has more history than the initial page load. */
.chatroom-earlier-trigger {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.chatroom-earlier-trigger:empty {
  display: none;
}
.chatroom-earlier-btn {
  padding: 0.4rem 1rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.chatroom-earlier-btn:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}
.chatroom-earlier-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.chatroom-earlier-btn:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Surfaces ActionCable reconnect / rejected states. Sits at the top of
   the messages scroll so it doesn't push composer or header around. */
.chatroom-status-banner {
  align-self: center;
  max-width: min(640px, 100%);
  margin: 0 auto var(--space-3);
  padding: 0.55rem 0.9rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--on-surface);
  background: var(--primary-soft);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  animation: modalFadeIn var(--duration-base) var(--ease-standard);
  position: sticky;
  top: 0;
  z-index: 1;
}
.chatroom-status-banner--persistent {
  background: color-mix(in srgb, var(--error) 10%, var(--surface-lowest));
  border-color: color-mix(in srgb, var(--error) 35%, var(--outline-variant));
  color: color-mix(in srgb, var(--error) 70%, var(--on-surface));
}

.chatroom-messages-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.chatroom-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
  gap: 0.5rem;
}

/* Individual message */
.chatroom-msg {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  position: relative;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}

.chatroom-msg:hover {
  background: var(--surface-container-low);
}

/* Optimistic-send states: ghost shown before server confirms, and the
   failure state with a retry button. */
.chatroom-msg--pending {
  opacity: 0.55;
}
.chatroom-msg--pending .chatroom-msg-time::after {
  content: " \00b7";
  color: var(--on-surface-subtle);
}
.chatroom-msg--failed {
  opacity: 1;
}
.chatroom-msg--failed .chatroom-msg-time {
  color: var(--error);
  font-weight: 600;
}
.chatroom-msg-retry {
  margin-top: var(--space-2);
  padding: 0.35rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--error);
  background: color-mix(in srgb, var(--error) 8%, var(--surface-lowest));
  border: 1px solid color-mix(in srgb, var(--error) 30%, var(--outline-variant));
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.chatroom-msg-retry:hover {
  background: color-mix(in srgb, var(--error) 18%, var(--surface-lowest));
}
.chatroom-msg-retry:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.chatroom-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.chatroom-msg-content {
  flex: 1;
  min-width: 0;
}

.chatroom-msg-meta {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.1rem;
}

.chatroom-msg-author {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--on-surface);
}

.chatroom-msg-time {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.chatroom-msg-body {
  font-size: var(--text-base);
  color: var(--on-surface);
  line-height: 1.55;
  word-break: break-word;
}

.chatroom-msg-body p {
  margin: 0 0 0.3rem;
}

.chatroom-msg-body p:last-child {
  margin-bottom: 0;
}

/* Attachments */
.chatroom-msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.chatroom-msg-img {
  max-width: 240px;
  max-height: 200px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.chatroom-msg-file {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--on-surface);
  font-size: var(--text-sm);
  transition: background var(--duration-fast) var(--ease-standard);
}

.chatroom-msg-file:hover {
  background: var(--surface-container);
}

.chatroom-msg-filename {
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatroom-msg-filesize {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

/* Message hover actions */
.chatroom-msg-actions {
  position: absolute;
  top: -0.25rem;
  right: 0.25rem;
  display: flex;
  gap: 0.1rem;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container-low);
  border-radius: var(--radius-sm);
  padding: 0.1rem;
  box-shadow: 0 2px 8px rgba(28, 29, 26, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.chatroom-msg:hover .chatroom-msg-actions,
.chatroom-msg:focus-within .chatroom-msg-actions {
  opacity: 1;
  pointer-events: auto;
}

.chatroom-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--on-surface-subtle);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.chatroom-action-btn .material-symbols-outlined {
  font-size: var(--text-lg);
}

.chatroom-action-btn:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.chatroom-action-btn--danger:hover {
  background: #fde8e8;
  color: #c53030;
}

/* Boosts / Reactions */
.chatroom-boosts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
  align-items: center;
  min-height: 0;
}

.chatroom-boost-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--surface-container);
  border-radius: var(--radius-full);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}

.chatroom-boost-pill:hover {
  background: var(--surface-container-low);
  border-color: var(--primary-container);
}

.chatroom-boost-emoji {
  font-size: var(--text-base);
  line-height: 1;
}

.chatroom-boost-count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--on-surface-mid);
}

/* Typing indicator */
.chatroom-typing {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 1.5rem;
  min-height: 1.8rem;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  font-weight: 500;
  flex-shrink: 0;
}

.chatroom-typing[hidden] {
  display: flex;
  visibility: hidden;
}

.chatroom-typing-dots {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.chatroom-typing-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--on-surface-subtle);
  animation: chatroom-bounce 1.4s infinite ease-in-out both;
}

.chatroom-typing-dots span:nth-child(1) { animation-delay: -0.32s; }
.chatroom-typing-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes chatroom-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Composer */
.chatroom-composer-wrap {
  padding: 0.6rem 1.5rem 1rem;
  border-top: 1px solid var(--surface-container-low);
  flex-shrink: 0;
}

.chatroom-composer {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.chatroom-composer-row {
  display: flex;
  position: relative;
}

.chatroom-composer-input-wrapper {
  display: flex;
  align-items: flex-end;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--surface-container);
  border-radius: var(--radius-xl);
  padding: 0.25rem 0.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: border-color var(--duration-base) var(--ease-standard);
}

.chatroom-composer-input-wrapper:focus-within {
  border-color: var(--primary);
}

.chatroom-composer-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding-bottom: 0.25rem; /* align with input padding */
}

.chatroom-composer-action-group {
  position: relative;
}

.chatroom-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  color: var(--on-surface-subtle);
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
  flex-shrink: 0;
  border: none;
  background: transparent;
}

.chatroom-attach-btn:hover {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.chatroom-attach-btn .material-symbols-outlined {
  font-size: var(--text-xl);
}

.chatroom-input {
  flex: 1;
  min-height: 2.2rem;
  max-height: 8rem;
  padding: 0.5rem 0.5rem;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  resize: none;
  overflow-y: auto;
  outline: none;
  color: var(--on-surface);
  line-height: 1.5;
}

.chatroom-input:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

.chatroom-send-btn {
  margin-bottom: 0.25rem;
  margin-left: 0.5rem;
  border-radius: var(--radius-pill);
  padding: 0.4rem 1rem;
}

.chatroom-input:focus {
  border-color: var(--focus-ring-border);
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
  outline: none;
}

.chatroom-send-btn {
  flex-shrink: 0;
  border-radius: var(--radius-md);
  padding: 0.45rem 1rem;
  font-size: var(--text-sm);
}

.chatroom-composer-error {
  font-size: var(--text-sm);
  color: var(--error);
  padding: 0.25rem 0 0.5rem;
}

.chatroom-composer-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
}

.chatroom-preview-item {
  position: relative;
}

.chatroom-preview-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--surface-container);
}

.chatroom-preview-badge {
  padding: 0.3rem 0.5rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatroom-preview-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--error);
  color: white;
  border: none;
  font-size: var(--text-xs);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Sidebar */
.chatroom-sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--surface-container-low);
  overflow-y: auto;
  padding: 0.75rem 0;
}

.chatroom-sidebar-section {
  padding: 0.5rem 1rem;
}

.chatroom-sidebar-section + .chatroom-sidebar-section {
  border-top: 1px solid var(--surface-container-low);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}

.chatroom-sidebar-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.6rem;
}

.chatroom-member-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.chatroom-member {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chatroom-member-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.chatroom-member-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
}

.chatroom-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--surface);
}

.chatroom-dot--online {
  background: #22c55e;
}

.chatroom-dot--offline {
  background: var(--on-surface-subtle);
  opacity: 0.25;
}

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

.chatroom-member-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatroom-member-role {
  font-size: var(--text-xs);
  color: var(--secondary);
  font-weight: 600;
}

.chatroom-info-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  padding: 0.2rem 0;
}

.chatroom-group-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Emoji Picker */
.chatroom-emoji-picker {
  position: fixed;
  z-index: 1000;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(28, 29, 26, 0.12);
  padding: 0.5rem;
}

.chatroom-emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.1rem;
}

.chatroom-emoji-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: var(--text-lg);
  transition: background var(--duration-fast) var(--ease-standard);
}

.chatroom-emoji-btn:hover {
  background: var(--surface-container-low);
}

/* ── Link Previews ── */
.chat-link-preview {
  display: flex;
  gap: 0.75rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary);
  padding: 0.75rem;
  margin-top: 0.5rem;
  text-decoration: none;
  color: var(--on-surface);
  transition: background var(--duration-base) var(--ease-standard);
  overflow: hidden;
}

.chat-link-preview:hover {
  background: var(--surface-container);
}

.chat-link-preview-image {
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.chat-link-preview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-link-preview-body {
  min-width: 0;
  flex: 1;
}

.chat-link-preview-domain {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  margin-bottom: 0.15rem;
}

.chat-link-preview-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.3;
  margin-bottom: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-link-preview-desc {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Emoji Picker (full) ── */
.emoji-picker-panel {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 1000;
  width: 320px;
  max-height: 360px;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 36px rgba(28, 29, 26, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.emoji-picker-search {
  padding: 0.6rem 0.75rem;
  border: none;
  border-bottom: 1px solid var(--surface-container);
  background: transparent;
  font-size: var(--text-sm);
  color: var(--on-surface);
  outline: none;
  font-family: inherit;
}

.emoji-picker-grid {
  overflow-y: auto;
  padding: 0.5rem;
  flex: 1;
}

.emoji-grid-category {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  padding: 0.5rem 0.25rem 0.25rem;
}

.emoji-grid-row {
  display: flex;
  flex-wrap: wrap;
}

.emoji-grid-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: var(--text-lg);
  transition: background var(--duration-fast) var(--ease-standard);
}

.emoji-grid-btn:hover {
  background: var(--surface-container-low);
}

.emoji-grid-empty {
  text-align: center;
  padding: 1.5rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
}

/* ── GIF Picker ── */
.gif-picker-panel {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 1000;
  width: 340px;
  max-height: 400px;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 36px rgba(28, 29, 26, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gif-picker-search {
  padding: 0.6rem 0.75rem;
  border: none;
  border-bottom: 1px solid var(--surface-container);
  background: transparent;
  font-size: var(--text-sm);
  color: var(--on-surface);
  outline: none;
  font-family: inherit;
}

.gif-picker-results {
  overflow-y: auto;
  padding: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
  flex: 1;
}

.gif-picker-item {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.gif-picker-item:hover {
  transform: scale(1.03);
}

.gif-picker-item img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
}

.gif-picker-attribution {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  padding: 0.35rem;
  border-top: 1px solid var(--surface-container);
}

.gif-picker-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 1.5rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
}

/* ──────────────────────────────────────────────────────────────
   CHATROOM REFINEMENT — Schoolhouse Editorial
   Layered on top of the original chatroom block; later rules win.
   ────────────────────────────────────────────────────────────── */

.chatroom {
  background:
    linear-gradient(180deg, var(--surface-lowest) 0%, color-mix(in srgb, var(--surface-lowest) 92%, var(--primary-soft)) 100%);
  border: 1px solid color-mix(in srgb, var(--on-surface) 6%, transparent);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 18px 50px -28px rgba(28, 29, 26, 0.18);
}

/* ── Header ── */
.chatroom-header {
  padding: 1.05rem 1.6rem 1rem;
  align-items: flex-start;
  border-bottom: 1px solid color-mix(in srgb, var(--on-surface) 7%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-lowest) 100%, transparent) 0%, transparent 100%);
}

.chatroom-header-left {
  gap: 0.85rem;
  align-items: flex-start;
}

.chatroom-back {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
  border-radius: var(--radius-full);
  color: var(--on-surface-mid);
}
.chatroom-back .material-symbols-outlined { font-size: 20px; }

.chatroom-header-id {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.chatroom-header-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--primary) 75%, var(--on-surface-subtle));
}

.chatroom-header-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-surface);
  margin: 0;
}

.chatroom-header-subtitle {
  margin: 0.25rem 0 0;
  color: var(--on-surface-subtle);
  font-size: 0.82rem;
  line-height: 1.4;
}

.chatroom-header-hash {
  color: color-mix(in srgb, var(--primary) 70%, var(--on-surface-subtle));
  font-weight: 500;
  margin-right: 0.05em;
}

.chatroom-header-right {
  align-items: center;
  gap: 0.6rem;
}

.chatroom-online-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--on-surface-mid);
  padding: 0.3rem 0.65rem 0.3rem 0.55rem;
  background: color-mix(in srgb, #22c55e 7%, var(--surface-lowest));
  border: 1px solid color-mix(in srgb, #22c55e 22%, var(--outline-variant));
  border-radius: var(--radius-full);
}

.chatroom-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
  animation: chatroom-online-pulse 2.4s ease-in-out infinite;
}

@keyframes chatroom-online-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, #22c55e 6%, transparent); }
}

.chatroom-involvement {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.4rem 0.25rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--on-surface) 8%, transparent);
  border-radius: var(--radius-full);
  background: var(--surface-lowest);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard);
}
.chatroom-involvement:hover { border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.chatroom-involvement-icon { font-size: 16px; color: var(--on-surface-subtle); }
.chatroom-involvement-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: 0 1.1rem 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--on-surface-mid);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--on-surface-subtle) 50%),
                    linear-gradient(135deg, var(--on-surface-subtle) 50%, transparent 50%);
  background-position: calc(100% - 8px) 55%, calc(100% - 4px) 55%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.chatroom-involvement-select:focus { outline: none; }

/* ── Messages ── */
.chatroom-messages {
  padding: 1.25rem 1.6rem 0.5rem;
  scroll-padding-top: 0.5rem;
  background: var(--surface-lowest);
}

.chatroom-messages-list {
  gap: 0.05rem;
}

/* Subtle author rule — visually anchors the avatar column like a margin */
.chatroom-msg {
  padding: 0.45rem 0.5rem 0.45rem 0.55rem;
  border-radius: var(--radius-md);
  gap: 0.85rem;
}
.chatroom-msg:hover {
  background: color-mix(in srgb, var(--primary-soft) 60%, transparent);
}

.chatroom-msg-avatar {
  width: 38px;
  height: 38px;
  font-size: 0.78rem;
  background: linear-gradient(135deg, var(--primary-container) 0%, color-mix(in srgb, var(--primary-container) 70%, var(--tertiary-container, var(--primary-container))) 100%);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
}

.chatroom-msg-meta { gap: 0.55rem; align-items: baseline; }

.chatroom-msg-author {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--on-surface);
}

.chatroom-msg-time {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
}

.chatroom-msg-body {
  font-size: 0.96rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--on-surface) 92%, transparent);
}

/* Hover actions — softer, with a connecting tail to the message */
.chatroom-msg-actions {
  top: -0.85rem;
  right: 0.5rem;
  background: var(--surface-lowest);
  border: 1px solid color-mix(in srgb, var(--on-surface) 8%, transparent);
  border-radius: var(--radius-full);
  padding: 0.15rem;
  box-shadow: 0 6px 18px -8px rgba(28, 29, 26, 0.18);
  transform: translateY(2px);
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.chatroom-msg:hover .chatroom-msg-actions {
  transform: translateY(0);
}
.chatroom-action-btn { width: 26px; height: 26px; border-radius: var(--radius-full); }
.chatroom-action-btn .material-symbols-outlined { font-size: 16px; }

/* Empty state — editorial */
.chatroom-empty {
  padding: 5rem 1.5rem 4rem;
  gap: 0.85rem;
  color: var(--on-surface-mid);
}
.chatroom-empty-glyph {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--primary-soft) 80%, transparent);
  color: var(--primary);
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, transparent);
}
.chatroom-empty-glyph .material-symbols-outlined { font-size: 30px; }
.chatroom-empty-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-surface);
  margin: 0;
}
.chatroom-empty-sub {
  max-width: 28rem;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--on-surface-subtle);
  margin: 0;
}

/* ── Composer ── */
.chatroom-composer-wrap {
  padding: 0.6rem 1.6rem 1.15rem;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, #2563eb 7%, transparent) 100%);
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 7%, transparent);
}

.chatroom-composer-shell {
  display: flex;
  flex-direction: column;
  background: var(--surface-lowest);
  border: 1px solid color-mix(in srgb, var(--on-surface) 9%, transparent);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 8px 24px -16px rgba(28, 29, 26, 0.18);
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.chatroom-composer-shell:focus-within {
  border-color: color-mix(in srgb, #2563eb 55%, transparent);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 4px color-mix(in srgb, #2563eb 12%, transparent),
    0 8px 24px -16px rgba(28, 29, 26, 0.2);
}

/* Old wrapper styles get overridden — we no longer use the row pattern */
.chatroom-composer-row,
.chatroom-composer-input-wrapper {
  all: unset;
  display: contents;
}

.chatroom-input {
  width: 100%;
  min-height: 2.6rem;
  max-height: 10rem;
  padding: 0.85rem 1rem 0.4rem;
  font-size: 0.96rem;
  line-height: 1.5;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: var(--on-surface);
  font-family: var(--font-sans);
}
.chatroom-input::placeholder {
  color: color-mix(in srgb, var(--on-surface-subtle) 80%, transparent);
}
.chatroom-input:focus { box-shadow: none; outline: none; border: none; }

.chatroom-composer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.45rem 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 5%, transparent);
}

.chatroom-composer-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0;
}

.chatroom-attach-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  color: var(--on-surface-subtle);
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, transform 120ms ease;
}
.chatroom-attach-btn:hover {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.chatroom-attach-btn:active { transform: scale(0.94); }
.chatroom-attach-btn .material-symbols-outlined { font-size: 19px; }

.chatroom-attach-btn--text {
  width: auto;
  padding: 0 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.chatroom-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.8rem 0.5rem 0.95rem;
  margin: 0;
  border: none;
  border-radius: var(--radius-full);
  background: #2563eb;
  color: var(--on-primary, #fff);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, #2563eb 80%, transparent);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.chatroom-send-btn:hover {
  background: color-mix(in srgb, #2563eb 92%, black);
  transform: translateY(-1px);
}
.chatroom-send-btn:active { transform: translateY(0); }
.chatroom-send-btn .material-symbols-outlined {
  font-size: 16px;
  font-weight: 700;
}

/* Attachment preview chips */
.chatroom-composer-preview {
  padding: 0.5rem 0.6rem 0;
  gap: 0.4rem;
}
.chatroom-preview-thumb {
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
}

/* ── Unified Popover (file / emoji / gif) ── */
.chatroom-popover {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: -0.25rem;
  z-index: 50;
  width: 320px;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  background: var(--surface-lowest);
  border: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 24px 60px -28px rgba(28, 29, 26, 0.35),
    0 8px 18px -8px rgba(28, 29, 26, 0.12);
  overflow: hidden;
  transform-origin: bottom left;
  animation: chatroom-popover-in 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.chatroom-popover[hidden] { display: none; }

@keyframes chatroom-popover-in {
  from { opacity: 0; transform: translateY(4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.chatroom-popover-head {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 0.85rem 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--on-surface) 6%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-soft) 55%, transparent) 0%, transparent 100%);
}
.chatroom-popover-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--primary) 75%, var(--on-surface-subtle));
}
.chatroom-popover-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--on-surface);
}
.chatroom-popover-empty {
  padding: 1.4rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--on-surface-subtle);
  line-height: 1.5;
}
.chatroom-popover-empty em { font-family: var(--font-display); font-style: italic; color: var(--on-surface-mid); }

/* File share — inherits from .chatroom-popover */
.file-share-panel { /* reset legacy properties so popover styles apply */
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: -0.25rem;
  width: 320px;
  max-height: 380px;
}
.file-share-list {
  padding: 0.4rem 0.4rem 0.5rem;
  overflow-y: auto;
  flex: 1;
}
.file-share-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.86rem;
  transition: background 100ms ease;
}
.file-share-item:hover { background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.file-share-item input[type="checkbox"] {
  accent-color: var(--primary);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.file-share-icon { font-size: 18px !important; color: var(--on-surface-mid); flex-shrink: 0; }
.file-share-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--on-surface);
}
.file-share-size {
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Emoji picker */
.emoji-picker-panel {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: -0.25rem;
  width: min(320px, calc(100vw - 2rem));
  max-height: min(340px, calc(100vh - 12rem));
}
.emoji-picker-search {
  margin: 0.45rem 0.6rem 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
  border-radius: var(--radius-full);
  background: var(--surface);
  font-size: 0.82rem;
  color: var(--on-surface);
  outline: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.emoji-picker-search:focus {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: var(--surface-lowest);
}
.emoji-picker-grid {
  display: block;
  padding: 0.25rem 0.5rem 0.5rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.emoji-grid-category {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  padding: 0.55rem 0.25rem 0.2rem;
}
.emoji-grid-row {
  display: grid;
  grid-template-columns: repeat(8, 32px);
  gap: 0.12rem;
}
.emoji-grid-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  font-size: 1.15rem;
  transition: background 100ms ease, transform 100ms ease;
}
.emoji-grid-btn:hover {
  background: color-mix(in srgb, var(--primary-soft) 70%, transparent);
  transform: scale(1.12);
}

/* GIF picker */
.gif-picker-panel { position: absolute; bottom: calc(100% + 0.6rem); left: -0.25rem; width: 340px; max-height: 420px; }
.gif-picker-search {
  margin: 0.45rem 0.6rem 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
  border-radius: var(--radius-full);
  background: var(--surface);
  font-size: 0.82rem;
  outline: none;
}
.gif-picker-search:focus {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: var(--surface-lowest);
}
.gif-picker-results { padding: 0.45rem; gap: 0.4rem; }
.gif-picker-item { border-radius: var(--radius-sm); }
.gif-picker-item img { height: 88px; }

/* ── Sidebar ── */
.chatroom-sidebar {
  width: 280px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--primary-soft) 38%, var(--surface-lowest)) 0%,
      color-mix(in srgb, var(--primary-soft) 12%, var(--surface-lowest)) 100%);
  border-left: 1px solid color-mix(in srgb, var(--on-surface) 7%, transparent);
  padding: 1.1rem 0.25rem;
}

.chatroom-sidebar-section {
  padding: 0.5rem 1.05rem 0.85rem;
}
.chatroom-sidebar-section + .chatroom-sidebar-section {
  margin-top: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--on-surface) 7%, transparent);
}

.chatroom-sidebar-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--on-surface) 60%, transparent);
  margin: 0 0 0.7rem;
}
.chatroom-sidebar-title > span:first-child::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: currentColor;
  margin-right: 0.5rem;
  vertical-align: middle;
  opacity: 0.6;
}
.chatroom-sidebar-count {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--on-surface-subtle);
  background: color-mix(in srgb, var(--surface-lowest) 100%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-surface) 8%, transparent);
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-full);
}

.chatroom-member-list { gap: 0.15rem; }

.chatroom-member {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.45rem;
  border-radius: var(--radius-md);
  transition: background 120ms ease;
}
.chatroom-member:hover { background: color-mix(in srgb, var(--surface-lowest) 70%, transparent); }

.chatroom-member-avatar-wrap { position: relative; }
.chatroom-member-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.72rem;
  background: linear-gradient(135deg, var(--primary-container) 0%, color-mix(in srgb, var(--primary-container) 70%, var(--surface-lowest)) 100%);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}
.chatroom-member--online .chatroom-member-avatar {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
    0 0 0 2px color-mix(in srgb, #22c55e 75%, transparent),
    0 0 0 4px color-mix(in srgb, #22c55e 18%, transparent);
}

.chatroom-dot {
  width: 0;
  height: 0;
  border: 0;
  display: none; /* presence is now shown by avatar ring; keep node for JS targeting */
}

.chatroom-member-info { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.chatroom-member-name {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--on-surface);
}
.chatroom-member-role {
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.chatroom-member-status {
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
}
.chatroom-member--online .chatroom-member-status { color: #16a34a; font-weight: 600; }

.chatroom-group-info {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.1rem;
}

.chatroom-joincode {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 0.8rem;
  background: var(--surface-lowest);
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, transparent);
  border-radius: var(--radius-md);
}
.chatroom-joincode-label {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}
.chatroom-joincode-value {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--on-surface);
}

.chatroom-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  background: var(--surface-lowest);
  border: 1px solid color-mix(in srgb, var(--on-surface) 9%, transparent);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--on-surface-mid);
  text-decoration: none;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.chatroom-back-link:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
  background: color-mix(in srgb, var(--primary-soft) 70%, var(--surface-lowest));
}
.chatroom-back-link .material-symbols-outlined { font-size: 16px; }

/* Boost emoji palette (for message reactions) — match the popover system */
.chatroom-emoji-picker {
  background: var(--surface-lowest);
  border: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 60px -28px rgba(28, 29, 26, 0.35),
    0 8px 18px -8px rgba(28, 29, 26, 0.12);
  padding: 0.45rem;
}
.chatroom-emoji-btn {
  border-radius: var(--radius-sm);
  transition: background 100ms ease, transform 100ms ease;
}
.chatroom-emoji-btn:hover {
  background: color-mix(in srgb, var(--primary-soft) 70%, transparent);
  transform: scale(1.14);
}

/* Boost pills */
.chatroom-boost-pill {
  padding: 0.15rem 0.55rem;
  background: var(--surface-lowest);
  border: 1px solid color-mix(in srgb, var(--on-surface) 9%, transparent);
}
.chatroom-boost-pill:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  background: color-mix(in srgb, var(--primary-soft) 50%, var(--surface-lowest));
}

/* Typing indicator */
.chatroom-typing {
  padding: 0.25rem 1.6rem 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--on-surface-subtle);
  font-style: italic;
}

/* Rooms Index */
.chatroom-index {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(28, 29, 26, 0.04);
  overflow: hidden;
}

.chatroom-index-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--surface-container-low);
  transition: background var(--duration-fast) var(--ease-standard);
}

.chatroom-index-item:last-child { border-bottom: none; }
.chatroom-index-item:hover { background: var(--surface-container-low); }

.chatroom-index-item--contact {
  cursor: default;
}
.chatroom-index-item--contact:hover {
  background: transparent;
}

.chatroom-index-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chatroom-index-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

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

.chatroom-index-name {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--on-surface);
}

.chatroom-index-group {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.chatroom-index-preview {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatroom-index-time {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.chatroom-index-msg-btn {
  font-size: var(--text-xs);
  padding: 0.2rem 0.6rem;
  flex-shrink: 0;
}

.chatroom-index-divider {
  padding: 0.65rem 1.25rem 0.35rem;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--surface);
}

/* New DM Panel */
.new-dm-panel {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(28, 29, 26, 0.06);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.new-dm-panel[hidden] { display: none; }

.new-dm-panel-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.new-dm-panel-header h3 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}

.new-dm-panel-body {
  padding: 1rem 1.25rem;
}

.new-dm-panel-body .form-input {
  margin-bottom: 0.75rem;
}

.new-dm-friend-list {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
}

.new-dm-friend-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--surface-container-low);
}

.new-dm-friend-item:last-child { border-bottom: none; }

.new-dm-friend-info {
  flex: 1;
  min-width: 0;
}

.new-dm-friend-name {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--on-surface);
}

.new-dm-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-sm);
  padding: 0.35rem 0.75rem;
  flex-shrink: 0;
}

.new-dm-empty {
  padding: 1.5rem 0;
  text-align: center;
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
}

.new-dm-empty a {
  color: var(--primary);
  font-weight: 600;
}

/* Chat preview on co-op page */
.chatroom-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.chatroom-preview-msg {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: var(--text-sm);
  padding: 0.25rem 0;
}

.chatroom-preview-author {
  font-weight: 700;
  color: var(--on-surface);
  flex-shrink: 0;
}

.chatroom-preview-text {
  color: var(--on-surface-mid);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatroom-preview-time {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .chatroom {
    flex-direction: column;
    height: calc(100dvh - var(--mobile-tab-bar-height, 56px) - env(safe-area-inset-bottom, 0px) - 1rem);
    border-radius: 0;
  }
  .chatroom-sidebar { display: none; }
  .chatroom-main {
    border-radius: 0;
    min-height: 0;
  }

  .chatroom-header {
    padding: 0.65rem 0.85rem;
  }

  .chatroom-header-subtitle,
  .chatroom-involvement-icon {
    display: none;
  }

  .chatroom-header-title {
    max-width: 54vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chatroom-messages {
    padding: 0.75rem;
  }

  .chatroom-msg {
    padding: 0.55rem 0.45rem;
  }

  .chatroom-msg-actions {
    position: static;
    margin-top: 0.35rem;
    width: fit-content;
    opacity: 1;
    pointer-events: auto;
  }

  .chatroom-action-btn,
  .chatroom-attach-btn,
  .chatroom-send-btn {
    min-width: var(--mobile-tap-min, 44px);
    min-height: var(--mobile-tap-min, 44px);
    touch-action: manipulation;
  }

  .chatroom-composer-wrap {
    padding: 0.5rem 0.75rem max(0.75rem, env(safe-area-inset-bottom, 0px));
  }

  .chatroom-composer-input-wrapper {
    padding: 0.25rem 0.4rem;
  }

  .chatroom-composer-actions {
    gap: 0.05rem;
  }
}

/* ─── FIELD TRIPS & EXPERIENCES ─── */
.ft-year-group {
  margin-bottom: 2rem;
}

.ft-year-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
}

.ft-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ft-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}

.ft-card-left {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.ft-emoji {
  font-size: var(--text-2xl);
  line-height: 1;
}

.ft-card-body {
  flex: 1;
  min-width: 0;
}

.ft-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.ft-date {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--nc-text-muted);
}

.ft-cat-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nc-forest);
  background: rgba(74, 103, 78, 0.1);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.4rem;
}

.ft-card-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--nc-text);
  margin-bottom: 0.25rem;
}

.ft-location {
  font-size: var(--text-sm);
  color: var(--nc-text-muted);
  margin-bottom: 0.25rem;
}

.ft-desc {
  font-size: var(--text-base);
  color: var(--nc-text-secondary);
  line-height: 1.5;
  margin-bottom: 0.25rem;
}

.ft-subjects {
  font-size: var(--text-sm);
  color: var(--nc-text-muted);
  font-style: italic;
}

.ft-card-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-end;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.ft-card:hover .ft-card-actions {
  opacity: 1;
}

.ft-children-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.ft-child-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--nc-text);
}

.ft-child-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--nc-forest);
  cursor: pointer;
}

@media (max-width: 600px) {
  .ft-card {
    flex-wrap: wrap;
  }
  .ft-card-actions {
    opacity: 1;
    flex-direction: row;
    width: 100%;
  }
}

/* ─── NATURE JOURNAL ─── */
.nj-filters {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-lg);
}

.nj-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: var(--space-3);
}
.nj-filter-row:last-of-type {
  margin-bottom: var(--space-6);
}

.nj-filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nj-filter-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-right: 0.25rem;
  flex-shrink: 0;
}

.nj-filter-pill {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--nc-text-secondary);
  background: var(--nc-bg);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.7rem;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.nj-filter-pill:hover {
  background: var(--nc-surface-hover);
  color: var(--nc-text);
}

.nj-filter-pill.active {
  background: var(--nc-forest);
  color: #fff;
  border-color: var(--nc-forest);
}

.nj-month-group {
  margin-bottom: 2rem;
}

.nj-month-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
}

.nj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.nj-entry-card {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.nj-entry-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.15rem;
}

.nj-emoji {
  font-size: var(--text-xl);
  line-height: 1;
  flex-shrink: 0;
}

.nj-entry-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.nj-entry-date {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--nc-text-muted);
}

.nj-cat-pill {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nc-forest);
  background: rgba(74, 103, 78, 0.1);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.35rem;
}

.nj-entry-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--nc-text);
  line-height: 1.3;
}

.nj-species {
  font-size: var(--text-sm);
  color: var(--nc-text-muted);
}

.nj-detail {
  font-size: var(--text-sm);
  color: var(--nc-text-muted);
}

.nj-observation {
  font-size: var(--text-base);
  color: var(--nc-text-secondary);
  line-height: 1.55;
  margin-top: 0.2rem;
}

.nj-entry-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.5rem;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.nj-entry-card:hover .nj-entry-actions {
  opacity: 1;
}

@media (max-width: 600px) {
  .nj-grid {
    grid-template-columns: 1fr;
  }
  .nj-entry-actions {
    opacity: 1;
  }
}

/* ─── ARTIST & COMPOSER STUDY ─── */
.cs-section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.cs-card {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cs-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.1rem;
}

.cs-type-emoji {
  font-size: var(--text-xl);
  line-height: 1;
}

.cs-card-meta {
  flex: 1;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.cs-type-pill {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nc-rose, #7a3a4a);
  background: rgba(122, 58, 74, 0.1);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.35rem;
}

.cs-archive-pill {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--nc-text-muted);
  background: var(--nc-bg);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.35rem;
}

.cs-card-actions {
  display: flex;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.cs-card:hover .cs-card-actions {
  opacity: 1;
}

.cs-card-name {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--nc-text);
}

.cs-card-name a {
  color: inherit;
  text-decoration: none;
}

.cs-card-name a:hover {
  color: var(--nc-primary);
}

.cs-card-detail {
  font-size: var(--text-sm);
  color: var(--nc-text-muted);
}

.cs-progress-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.cs-progress-track {
  flex: 1;
  height: 5px;
  background: var(--nc-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.cs-progress-fill {
  height: 100%;
  background: var(--nc-forest);
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-standard);
}

.cs-progress-label {
  font-size: var(--text-xs);
  color: var(--nc-text-muted);
  white-space: nowrap;
}

.cs-next-work {
  font-size: var(--text-sm);
  color: var(--nc-text-secondary);
}

/* Show page */
.cs-show-type {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 0.25rem;
}

.cs-show-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 2rem;
  align-items: start;
}

.cs-work-order {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.cs-work-move {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.cs-work-row:hover .cs-work-move {
  opacity: 1;
}

.cs-move-btn {
  border: 1px solid var(--nc-border);
  background: var(--nc-bg, #fff);
  color: var(--nc-text-muted);
  border-radius: var(--radius-sm);
  width: 1.5rem;
  height: 1.4rem;
  line-height: 1;
  cursor: pointer;
  font-size: var(--text-xs);
  transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.cs-move-btn:hover {
  color: var(--nc-primary, var(--primary));
  border-color: var(--nc-primary, var(--primary));
  background: rgba(37, 57, 212, 0.04);
}

.cs-works-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.cs-works-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--nc-text);
}

.cs-works-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

.cs-work-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--nc-surface);
  border-bottom: 1px solid var(--nc-border);
  transition: background var(--duration-fast) var(--ease-standard);
}

.cs-work-row:last-child {
  border-bottom: none;
}

.cs-work-row:hover {
  background: var(--nc-surface-hover, #f8f6f3);
}

.cs-work--done {
  opacity: 0.55;
}

.cs-work--current {
  background: rgba(74, 103, 78, 0.06);
  border-left: 3px solid var(--nc-forest);
}

.cs-work-num {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--nc-text-muted);
  width: 1.5rem;
  text-align: right;
  margin-top: 0.1rem;
}

.cs-work-body {
  flex: 1;
  min-width: 0;
}

.cs-work-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--nc-text);
}

.cs-work-meta {
  font-size: var(--text-sm);
  color: var(--nc-text-muted);
}

.cs-work-notes {
  font-size: var(--text-sm);
  color: var(--nc-text-secondary);
  font-style: italic;
  margin-top: 0.15rem;
}

.cs-work-studied-on {
  font-size: var(--text-xs);
  color: var(--nc-forest);
  margin-top: 0.1rem;
}

.cs-work-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.cs-work-row:hover .cs-work-actions {
  opacity: 1;
}

.cs-mark-btn {
  color: var(--nc-forest) !important;
}

.cs-works-empty {
  padding: 1.5rem;
  text-align: center;
  font-size: var(--text-base);
  color: var(--nc-text-muted);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
}

.cs-add-work-form {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
}

.cs-add-work-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 0.6rem;
}

.cs-inline-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.cs-work-title-input { flex: 2; min-width: 160px; }
.cs-work-year-input  { flex: 0 0 80px; }
.cs-work-medium-input { flex: 2; min-width: 140px; }

/* Bio sidebar */
.cs-bio-card {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.cs-bio-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--nc-text);
  margin-bottom: 0.5rem;
}

.cs-bio-text {
  font-size: var(--text-base);
  color: var(--nc-text-secondary);
  line-height: 1.6;
}

.cs-side-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

@media (max-width: 768px) {
  .cs-show-layout {
    grid-template-columns: 1fr;
  }
  .cs-work-actions {
    opacity: 1;
  }
  .cs-work-move {
    opacity: 1;
  }
}

/* ─── BOOK OF CENTURIES / TIMELINE ─── */
.tl-filters {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-lg);
}

.tl-timeline {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.tl-century-block {
  position: relative;
}

.tl-century-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tl-century-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--nc-border);
}

.tl-entries {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--nc-border);
}

.tl-entry {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.7rem 0;
  position: relative;
}

.tl-entry-dot {
  position: absolute;
  left: -1.65rem;
  top: 1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--nc-bg, #fff);
  background: var(--nc-text-muted);
  flex-shrink: 0;
}

.tl-dot--person      { background: var(--nc-terracotta, #a85c3a); }
.tl-dot--event       { background: var(--nc-rose, #7a3a4a); }
.tl-dot--discovery   { background: var(--nc-sky, #2c5282); }
.tl-dot--invention   { background: var(--nc-gold, #9a7820); }
.tl-dot--art         { background: var(--nc-rose, #7a3a4a); }
.tl-dot--literature  { background: var(--nc-forest, #4a674e); }
.tl-dot--scripture   { background: var(--nc-gold, #9a7820); }
.tl-dot--other       { background: var(--nc-text-muted); }

.tl-entry-year {
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--nc-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 6rem;
  padding-top: 0.05rem;
}

.tl-entry-body {
  flex: 1;
  min-width: 0;
}

.tl-entry-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.tl-entry-emoji {
  font-size: var(--text-md);
  line-height: 1;
}

.tl-entry-name {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--nc-text);
}

.tl-cat-pill {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  background: var(--nc-bg);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.35rem;
}

.tl-entry-desc {
  font-size: var(--text-sm);
  color: var(--nc-text-secondary);
  line-height: 1.5;
  margin-top: 0.2rem;
}

.tl-entry-actions {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.35rem;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.tl-entry:hover .tl-entry-actions {
  opacity: 1;
}

@media (max-width: 600px) {
  .tl-entry-year {
    min-width: 4.5rem;
    font-size: var(--text-xs);
  }
  .tl-entry-actions {
    opacity: 1;
  }
}

/* ─── COPYWORK & DICTATION ─── */
.cw-stats-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.4rem;
  margin-bottom: 1.25rem;
}

.cw-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.cw-stat-num {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--nc-text);
  font-family: var(--font-sans);
}

.cw-stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
}

.cw-stat-divider {
  width: 1px;
  height: 2rem;
  background: var(--nc-border);
}

.cw-filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1.1rem;
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-lg);
}

.cw-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: start;
}

.cw-month-group {
  margin-bottom: 2rem;
}

.cw-month-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 0.75rem;
}

.cw-month-count {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--nc-text-muted);
  opacity: 0.7;
}

.cw-entries {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cw-entry {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.1rem;
}

.cw-entry-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.cw-type-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.45rem;
}

.cw-type--copywork {
  background: rgba(44, 82, 130, 0.1);
  color: var(--nc-sky, #2c5282);
}

.cw-type--dictation {
  background: rgba(154, 120, 32, 0.1);
  color: var(--nc-gold, #9a7820);
}

.cw-entry-date {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--nc-text-muted);
}

.cw-score-pill {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.35rem;
}

.cw-score--forest     { background: rgba(74,103,78,0.12); color: var(--nc-forest, #4a674e); }
.cw-score--sky        { background: rgba(44,82,130,0.12); color: var(--nc-sky, #2c5282); }
.cw-score--gold       { background: rgba(154,120,32,0.12); color: var(--nc-gold, #9a7820); }
.cw-score--terracotta { background: rgba(168,92,58,0.12); color: var(--nc-terracotta, #a85c3a); }

.cw-entry-actions {
  margin-left: auto;
  display: flex;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.cw-entry:hover .cw-entry-actions {
  opacity: 1;
}

.cw-passage {
  font-size: var(--text-base);
  color: var(--nc-text);
  line-height: 1.65;
  font-style: italic;
  font-family: var(--font-sans);
}

.cw-source {
  font-size: var(--text-sm);
  color: var(--nc-text-muted);
  margin-top: 0.3rem;
}

.cw-notes {
  font-size: var(--text-sm);
  color: var(--nc-text-secondary);
  margin-top: 0.3rem;
  font-style: normal;
}

/* Sticky form card */
.cw-form-col {
  position: sticky;
  top: 5rem;
}

.cw-form-card {
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.3rem;
}

.cw-form-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--nc-text);
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .cw-layout {
    grid-template-columns: 1fr;
  }
  .cw-form-col {
    position: static;
    order: -1;
  }
  .cw-entry-actions {
    opacity: 1;
  }
}


/* ─── APP SWITCHER ─── */
.topbar-left {
  display: flex;
  align-items: center;
}

.app-switcher {
  position: relative;
}

.hamburger-btn {
  background: none;
  border: none;
  color: var(--on-surface-mid);
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.hamburger-btn:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

/* Panel */
.app-switcher-panel {
  position: fixed;
  top: 64px;
  left: 76px;
  width: 300px;
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 48px rgba(28, 28, 26, 0.16),
              0 4px 12px rgba(28, 28, 26, 0.06),
              0 0 0 1px var(--outline-variant);
  padding: 1.25rem;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top left;
  transition: opacity 0.18s cubic-bezier(0.2, 0, 0, 1),
              transform 0.18s cubic-bezier(0.2, 0, 0, 1);
}

.app-switcher-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.app-switcher-header {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--primary);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: none;
}

.app-switcher-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Category tiles — M365-style */
.app-category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  color: var(--on-surface-mid);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  text-align: center;
  position: relative;
}

.app-category-tile:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
  transform: translateY(-1px);
}

.app-category-tile:active {
  transform: scale(0.97);
}

.app-category-tile.active {
  background: var(--surface-container);
  color: var(--primary);
}

.app-category-tile.active::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  border-radius: var(--radius-xs);
  background: var(--primary);
}

.app-category-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}

.app-category-tile:hover .app-category-icon {
  box-shadow: 0 4px 12px rgba(28, 28, 26, 0.08);
}

/* Colored icon backgrounds */
.app-category-tile[data-category="daily"] .app-category-icon {
  background: linear-gradient(135deg, #e8d5a3, #d4b96a);
  color: #6b5a2e;
}
.app-category-tile[data-category="planning"] .app-category-icon {
  background: linear-gradient(135deg, #e0c4c0, #c9a09a);
  color: #6b3f37;
}
.app-category-tile[data-category="resources"] .app-category-icon {
  background: linear-gradient(135deg, #c3d4bb, #97b58a);
  color: #3a5230;
}
.app-category-tile[data-category="records"] .app-category-icon {
  background: linear-gradient(135deg, #d4bfaa, #b8956e);
  color: #5a3a1e;
}

.app-category-tile[data-category] .app-category-icon svg {
  stroke: currentColor;
}

.app-category-name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}


/* ─── DASHBOARD METHOD BAR ─── */
.dashboard-method-bar {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

/* Method name — text mark, no badge background */
.method-pill {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--on-surface-subtle);
}

.method-pill--forest     { color: var(--secondary); }
.method-pill--terracotta { color: var(--terracotta); }
.method-pill--sky        { color: var(--sky); }
.method-pill--gold       { color: var(--gold); }
.method-pill--rose       { color: var(--rose); }

/* Tagline — italic serif, em-dash separator built in */
.method-tagline {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--on-surface-subtle);
  flex: 1;
}
.method-tagline::before {
  content: "— ";
  font-style: normal;
}

.method-change-link {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--on-surface-subtle);
  opacity: 0.5;
  margin-left: auto;
  transition: opacity var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
  white-space: nowrap;
}
.method-change-link:hover { opacity: 1; color: var(--primary); }

/* ─── NO METHOD BANNER ─── */
.no-method-banner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--surface-container-low);
  border: 1px solid var(--surface-container-high);
  border-left: 3px solid var(--tertiary);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 1.1rem 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.no-method-icon {
  color: var(--primary);
  opacity: 0.6;
  flex-shrink: 0;
}

.no-method-body {
  flex: 1;
  min-width: 0;
}

.no-method-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.25rem;
}

.no-method-desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  line-height: 1.5;
}

/* ─── MEMORY WORK DUE WIDGET ─── */
.mw-due-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--surface-container-low);
}
.mw-due-item:last-child { border-bottom: none; }

.mw-due-emoji {
  font-size: var(--text-md);
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

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

.mw-due-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mw-due-child {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: 0.1rem;
}

.mw-due-meta { flex-shrink: 0; }

.mw-due-days {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-subtle);
  background: var(--surface-container-low);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-full);
}

.mw-due-days--new {
  background: var(--gold-pale);
  color: var(--gold);
}

.mw-due-more {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  text-align: center;
  padding-top: 0.5rem;
}

/* ─── TRANSCRIPT TABLE ─── */
.transcript-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-sans); font-size: var(--text-sm);
}
.transcript-table th {
  text-align: left; font-weight: 600; color: var(--on-surface-mid);
  padding: 0.5rem 0.6rem; border-bottom: 2px solid var(--outline-variant);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em;
}
.transcript-table td {
  padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--outline-variant);
  color: var(--on-surface);
}
.transcript-table tr:last-child td { border-bottom: none; }

/* ─── MEMORY REVIEW PAGE ─── */
.review-card { max-width: 640px; }
.review-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.review-emoji { font-size: 2rem; }
.review-title { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 700; color: var(--on-surface); }
.review-meta { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--on-surface-mid); margin-top: 0.2rem; }
.review-body {
  font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.8;
  color: var(--on-surface); background: var(--surface-container-low);
  border-radius: var(--radius-lg); padding: 1.2rem 1.5rem; margin-bottom: 1.5rem;
  white-space: pre-wrap;
}
.review-quality-label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--on-surface-mid); margin-bottom: 0.6rem; }
.review-quality-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.review-q-btn { flex: 1; min-width: 80px; text-align: center; }
.review-q-1 { border-color: #d32f2f; color: #d32f2f; }
.review-q-2 { border-color: #f57c00; color: #f57c00; }
.review-q-3 { border-color: #fbc02d; color: #795548; }
.review-q-4 { border-color: var(--secondary); color: var(--secondary); }
.review-q-5 { border-color: var(--primary); color: var(--primary); }
.review-mastered-row { margin-top: 0.5rem; }
.review-mastered-label { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--on-surface-mid); display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }

/* ─── HABITS TODAY WIDGET ─── */
.habits-child-group {
  margin-bottom: 0.9rem;
}
.habits-child-group:last-child { margin-bottom: 0; }

.habits-child-name {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.habit-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
  color: var(--on-surface-mid);
}

.habit-row--done {
  color: var(--on-surface-subtle);
}

.habit-check {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
}

.habit-row--done .habit-check {
  color: var(--secondary);
}

.habit-name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
}

.habit-row--done .habit-name {
  text-decoration: line-through;
  opacity: 0.6;
}

.habit-check-btn {
  all: unset;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  width: 100%;
}
.habit-check-btn:hover .habit-check { color: var(--primary); }

/* ─── TOPBAR ACCOUNT BUTTON ─── */
.topbar-account-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--on-surface-subtle);
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.topbar-account-btn:hover,
.topbar-account-btn--active {
  background: var(--surface-container);
  color: var(--on-surface);
}

/* ─── ACCOUNT SETTINGS PAGE ─── */
.account-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

@media (min-width: 960px) {
  .account-shell {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    padding: 0 1.25rem 3rem;
  }
}

.account-toc {
  position: sticky;
  top: 1.25rem;
  align-self: start;
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: 0 1px 6px var(--shadow);
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
}

@media (min-width: 960px) {
  .account-toc {
    display: flex;
  }
}

.account-toc__heading {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  padding: 0 0.4rem 0.4rem;
  border-bottom: 1px solid var(--surface-container-low);
  margin-bottom: 0.5rem;
}

.account-toc__list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.account-toc__link {
  display: block;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--on-surface-mid);
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.account-toc__link:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.account-toc__link--active {
  background: var(--primary-container);
  color: var(--primary);
  font-weight: 600;
}

.account-body {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.account-body__header {
  align-items: center;
  margin-bottom: 1.35rem;
}

.account-settings-form {
  display: contents;
}

/* Anchor offset so sticky targets aren't covered by the top toolbar. */
.account-body .settings-section {
  scroll-margin-top: 5rem;
}

.account-settings-section-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.account-settings-section-body--profile-photo {
  padding-top: 0.9rem;
}

.account-settings-section-body--divided {
  margin-top: 0.25rem;
  border-top: 1px solid var(--outline-variant);
}

/* Sections that put their action button beside the header without a body —
   match the spacing used by other sections so the page rhythm stays consistent. */
.settings-section--standalone-action .settings-section-header {
  padding-bottom: 1.5rem;
}

.account-profile-photo-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.account-profile-photo-preview-inner {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 800;
  background: var(--primary-container);
  color: var(--primary);
  overflow: hidden;
  flex-shrink: 0;
}

.account-profile-photo-preview-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.account-profile-photo-fields {
  flex: 1;
  min-width: 12rem;
}

.account-profile-photo-remove {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--on-surface-mid);
}

.avatar-crop-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.avatar-crop-current {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--outline-variant);
}

.avatar-crop-current--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
  font-weight: 800;
  box-shadow: none;
}

.avatar-crop-fields {
  flex: 1;
  min-width: 0;
}

.avatar-crop-editor {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr);
  gap: 1rem;
  align-items: center;
  margin-top: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-container-lowest);
}

.avatar-crop-editor[hidden] {
  display: none;
}

.avatar-crop-frame {
  position: relative;
  width: 9rem;
  height: 9rem;
  overflow: hidden;
  border-radius: 50%;
  background:
    linear-gradient(45deg, var(--surface-container-low) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface-container-low) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface-container-low) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface-container-low) 75%);
  background-color: var(--surface-lowest);
  background-position: 0 0, 0 0.5rem, 0.5rem -0.5rem, -0.5rem 0;
  background-size: 1rem 1rem;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 28%, var(--outline-variant)),
    var(--shadow-sm);
}

.avatar-crop-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 42%, transparent);
  pointer-events: none;
}

.avatar-crop-frame img {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
  user-select: none;
  pointer-events: none;
}

.avatar-crop-controls {
  display: grid;
  gap: 0.65rem;
}

.avatar-crop-controls label {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  color: var(--on-surface-mid);
  font-size: 0.84rem;
  font-weight: 650;
}

.avatar-crop-controls input[type="range"] {
  width: 100%;
  accent-color: var(--primary);
}

.avatar-crop-status {
  grid-column: 2;
  margin: -0.2rem 0 0;
  color: var(--on-surface-subtle);
  font-size: 0.82rem;
}

@media (max-width: 680px) {
  .avatar-crop-row,
  .account-profile-photo-row {
    flex-direction: column;
  }

  .avatar-crop-editor {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .avatar-crop-controls,
  .avatar-crop-status {
    width: 100%;
  }

  .avatar-crop-status {
    grid-column: auto;
  }
}

.coop-feed-post__avatar img,
.coop-feed-comment__avatar img,
.coop-feed-form__avatar img,
.coop-avatar img,
.chatroom-msg-avatar img,
.chatroom-member-avatar img,
.chatroom-index-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* ─── BILLING PAGE ─── */
.billing-page {
  max-width: 1040px;
}

.billing-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 12px var(--shadow);
  margin-bottom: 1.75rem;
}

.billing-summary-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.35rem;
}

.billing-summary-plan {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}

.billing-summary-plan-name {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1;
}

.billing-summary-meta {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
}

.billing-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.billing-pill--success { background: #dcfce7; color: #166534; }
.billing-pill--info    { background: #dbeafe; color: #1d4ed8; }
.billing-pill--warn    { background: #fef3c7; color: #92400e; }
.billing-pill--muted   { background: var(--surface-container); color: var(--on-surface-subtle); }

.billing-picker {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 12px var(--shadow);
  padding: 1.75rem;
}

.billing-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.billing-picker-title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 0.2rem;
}

.billing-picker-desc {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
}

.billing-period-switch {
  display: inline-flex;
  background: var(--surface-container);
  border-radius: var(--radius-full);
  padding: 0.25rem;
  gap: 0.25rem;
}

.billing-period-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface-subtle);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.billing-period-btn:hover { color: var(--on-surface); }

.billing-period-btn--active {
  background: var(--surface-lowest);
  color: var(--on-surface);
  box-shadow: 0 1px 3px var(--shadow);
}

.billing-period-save {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-full);
  background: #dcfce7;
  color: #166534;
}

.billing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 900px) {
  .billing-cards { grid-template-columns: 1fr; }
}

.billing-card {
  position: relative;
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}

.billing-card:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 20px var(--shadow);
}

.billing-card--featured {
  border-color: var(--primary);
  box-shadow: 0 6px 20px var(--shadow);
}

.billing-card--current {
  border-color: var(--primary);
  background: var(--primary-container, var(--surface-lowest));
}

.billing-card-badge {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
}

.billing-card-name {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--on-surface);
}

.billing-card-price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.billing-card-amount {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1;
}

.billing-card-period {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
}

.billing-card-desc {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  line-height: 1.45;
  min-height: 2.8em;
}

.billing-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface);
}

.billing-card-features li {
  position: relative;
  padding-left: 1.2rem;
}

.billing-card-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

.billing-card-cta {
  display: block;
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  margin-top: auto;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.billing-card-cta--primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.billing-card-cta--primary:hover {
  background: var(--primary-hover, var(--primary));
  filter: brightness(0.95);
}

.billing-card-cta--ghost {
  background: transparent;
  color: var(--on-surface);
  border-color: var(--surface-container-high);
}

.billing-card-cta--ghost:hover {
  background: var(--surface-container);
}

.billing-card-cta--current {
  background: var(--surface-container);
  color: var(--on-surface-subtle);
  border-color: transparent;
  cursor: default;
}

.billing-picker-note {
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  text-align: center;
}

/* ─── BILLING OVERAGE BANNER ─── */
.billing-overage-banner {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  margin: 0 0 1.25rem;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-lg);
  color: #78350f;
}

.billing-overage-banner--urgent {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.billing-overage-banner-icon .material-symbols-outlined {
  font-size: var(--text-xl);
  line-height: 1;
}

.billing-overage-banner-body {
  flex: 1;
  min-width: 0;
}

.billing-overage-banner-title {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  margin-bottom: 0.3rem;
  line-height: 1.3;
}

.billing-overage-banner-detail {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.billing-overage-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.billing-overage-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.billing-overage-btn--primary {
  background: #78350f;
  color: #fef3c7;
  border-color: #78350f;
}

.billing-overage-banner--urgent .billing-overage-btn--primary {
  background: #991b1b;
  color: #fee2e2;
  border-color: #991b1b;
}

.billing-overage-btn--primary:hover { filter: brightness(1.1); }

.billing-overage-btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}

.billing-overage-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.4);
}

.settings-section {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 2px 12px var(--shadow);
  margin-bottom: 1.15rem;
}

.settings-section--muted {
  background: var(--surface-container-low);
  box-shadow: none;
  border: 1px solid var(--surface-container-high);
}

.settings-section--danger {
  background: var(--surface-lowest);
  box-shadow: none;
  border: 1px solid #fca5a5;
  padding: 1.5rem;
}

.settings-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem 1.5rem 0;
  gap: 1rem;
}

.settings-section--muted .settings-section-header {
  padding: 1.25rem 1.5rem;
  align-items: center;
}

.settings-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.2rem;
}

.settings-section-title--danger {
  font-size: var(--text-sm);
  color: #dc2626;
  margin-bottom: 0.75rem;
}

.settings-section-desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  line-height: 1.5;
}

.settings-subsection {
  border-top: 1px solid var(--border-subtle);
  margin-top: 0.5rem;
  padding: 1.5rem 1.5rem 0.5rem;
}

.settings-subsection-title {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-mid);
  margin-bottom: 0.45rem;
}

.settings-subsection-desc {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  line-height: 1.55;
  margin: 0 0 1rem;
  max-width: 56ch;
}

/* Toggle rows nested inside a subsection share the parent's horizontal
   padding, so we collapse the row's own side padding to keep the left
   edge of the switch flush with the subsection heading. */
.settings-subsection .settings-toggle-row {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-subsection .settings-toggle-row:last-child {
  border-bottom: 0;
  padding-bottom: 0.5rem;
}

.settings-subsection .settings-toggle-row:first-of-type {
  padding-top: 0.25rem;
}

.toggle-label-desc {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

/* Morning briefing — deterministic floor + optional AI overlay. */
.home-briefing__card {
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.home-briefing__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}

.home-briefing__stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-surface-subtle);
}

.home-briefing__stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.1;
}

.home-briefing__stat-detail {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

.home-briefing__priorities {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.75rem;
}

.home-briefing__priority {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}

.home-briefing__priority-label {
  font-weight: 500;
  color: var(--on-surface);
}

.home-briefing__priority-detail {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

.home-briefing__overlay {
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.75rem;
}

.home-briefing__overlay-inner {
  min-height: 2.5rem;
}

.home-briefing__overlay-text {
  display: flex;
  gap: 0.6rem;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--on-surface);
}

.home-briefing__overlay-text p {
  margin: 0;
}

.home-briefing__overlay-icon {
  color: var(--method-accent);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.home-briefing__overlay-pending {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  font-style: italic;
}

.home-briefing__overlay-cta {
  font-size: var(--text-sm);
}

.home-briefing__overlay-unavailable {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

/* Child show: 7-day progress note with optional AI overlay. */
.child-progress {
  margin: 0 0 1.5rem;
}

.child-progress__head {
  margin-bottom: 0.5rem;
}

.child-progress__title {
  margin: 0;
  font-size: 1.1rem;
}

.child-progress__sub {
  margin: 0.1rem 0 0;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

.child-progress__card .card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.child-progress__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.75rem;
}

.child-progress__stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-surface-subtle);
}

.child-progress__stat-value {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
}

.child-progress__stat-detail {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

.child-progress__overlay {
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.75rem;
}

.child-progress__overlay-inner {
  min-height: 2.5rem;
}

.child-progress__overlay-text {
  display: flex;
  gap: 0.6rem;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--on-surface);
}

.child-progress__overlay-text p {
  margin: 0;
}

.child-progress__overlay-foot {
  margin-top: 0.4rem !important;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.child-progress__overlay-icon {
  color: var(--method-accent, currentColor);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.child-progress__overlay-pending {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  font-style: italic;
}

.child-progress__overlay-cta {
  font-size: var(--text-sm);
}

.child-progress__overlay-unavailable {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

/* Weekly review: AI narrative overlay on the deterministic brain. */
.weekly-brain-narrative {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface);
}

.weekly-brain-narrative__head {
  margin-bottom: 0.75rem;
}

.weekly-brain-narrative__title {
  margin: 0;
  font-size: 1.05rem;
}

.weekly-brain-narrative__sub {
  margin: 0.2rem 0 0;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

.weekly-brain-narrative__inner {
  min-height: 2.5rem;
}

.weekly-brain-narrative__text {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--on-surface);
}

.weekly-brain-narrative__text p {
  margin: 0 0 0.75rem;
}

.weekly-brain-narrative__foot {
  font-size: var(--text-xs) !important;
  color: var(--on-surface-subtle);
  margin-top: 0.5rem !important;
}

.weekly-brain-narrative__pending {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-style: italic;
  color: var(--on-surface-mid);
}

.weekly-brain-narrative__cta {
  font-size: var(--text-sm);
}

.weekly-brain-narrative__unavailable {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

/* Transcript course: AI-drafted description overlay. */
.tc-course-ai {
  margin-top: 0.4rem;
}

.tc-course-ai__inner {
  display: block;
}

.tc-course-ai__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-xs);
}

.tc-course-ai__pending {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-style: italic;
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
}

.tc-course-ai__text {
  border-left: 3px solid var(--method-accent, var(--on-surface-subtle));
  padding: 0.4rem 0.75rem;
  margin: 0.25rem 0 0;
  background: var(--surface-subtle, transparent);
  border-radius: 0 6px 6px 0;
}

.tc-course-ai__draft {
  margin: 0 0 0.4rem;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.tc-course-ai__row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.tc-course-ai__hint {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.tc-course-ai__unavailable {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
}

/* Compliance portfolio drafts: per-child cards on /formal-records. */
.compliance-portfolio-drafts {
  margin: 2rem 0;
}

.compliance-portfolio-drafts__head {
  margin-bottom: 1rem;
}

.compliance-portfolio-drafts__head h2 {
  margin: 0;
}

.compliance-portfolio-drafts__head p {
  margin: 0.25rem 0 0;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
}

.compliance-portfolio-drafts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem;
}

.compliance-portfolio-card {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.compliance-portfolio-card__title {
  margin: 0;
  font-size: 1.05rem;
}

.compliance-portfolio-card__sub {
  margin: 0.1rem 0 0;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.compliance-portfolio-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 0.5rem;
}

.compliance-portfolio-card__stat-value {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
}

.compliance-portfolio-card__stat-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-surface-mid);
}

.compliance-portfolio-card__stat-detail {
  display: block;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.compliance-portfolio-card__overlay {
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.75rem;
}

.compliance-portfolio-card__overlay-inner {
  min-height: 2.5rem;
}

.compliance-portfolio-card__cta {
  font-size: var(--text-sm);
}

.compliance-portfolio-card__pending {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-style: italic;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
}

.compliance-portfolio-card__text p {
  margin: 0 0 0.6rem;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.compliance-portfolio-card__disclaimer {
  font-size: var(--text-xs) !important;
  color: var(--on-surface-mid);
  background: rgba(0, 0, 0, 0.04);
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  margin: 0 0 0.5rem !important;
}

.compliance-portfolio-card__unavailable {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

/* Memory work: inline AI mnemonic overlay on the show page. */
.mw-mnemonic {
  margin: 1rem 0;
}

.mw-mnemonic__inner {
  display: block;
}

.mw-mnemonic__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.mw-mnemonic__pending {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-style: italic;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
}

.mw-mnemonic__text {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: var(--surface-subtle, rgba(0,0,0,0.03));
}

.mw-mnemonic__icon {
  color: var(--method-accent, currentColor);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.mw-mnemonic__body {
  margin: 0 0 0.35rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  flex: 1;
}

.mw-mnemonic__redraft {
  font-size: var(--text-xs);
}

.mw-mnemonic__unavailable {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

/* Quick capture: AI free-text parser → confirmation form. */
.quick-capture-card {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.5rem;
}

.quick-capture-card__head {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.quick-capture-card__title {
  margin: 0;
  font-size: 1.05rem;
}

.quick-capture-card__sub {
  margin: 0.2rem 0 0;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

.quick-capture-card__error {
  margin: 0.5rem 0;
  color: var(--danger, #b3261e);
  font-size: var(--text-sm);
}

.quick-capture-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.quick-capture-result__intro {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  margin: 0 0 0.75rem;
}

.quick-capture-result__form {
  border-left: 3px solid var(--method-accent, var(--on-surface-subtle));
  padding-left: 1rem;
}

/* Daily log: one-line AI reflection prompt above the form. */
.daily-reflection {
  margin: 1rem 0;
}

.daily-reflection__inner {
  display: block;
}

.daily-reflection__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.daily-reflection__pending {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-style: italic;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
}

.daily-reflection__text {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  background: var(--surface-subtle, rgba(0,0,0,0.03));
  border-radius: 8px;
}

.daily-reflection__icon {
  color: var(--method-accent, currentColor);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.daily-reflection__question {
  margin: 0 0 0.35rem;
  font-size: var(--text-base);
  line-height: 1.5;
  flex: 1;
}

.daily-reflection__redraft {
  font-size: var(--text-xs);
}

.daily-reflection__unavailable {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

/* ─── UI STYLE TOGGLE (Funky / Clean) ─── */
.style-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

.style-toggle-label {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface-subtle);
  transition: color var(--duration-base) var(--ease-standard);
}

.style-toggle-label--active {
  color: var(--primary);
}

/* ─── COLLAPSIBLE SETTINGS SECTIONS ─── */
.settings-collapsible {
  border: none;
}

.settings-collapsible summary {
  list-style: none;
}
.settings-collapsible summary::-webkit-details-marker {
  display: none;
}

.settings-collapsible-trigger {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard);
  border-radius: var(--radius-lg);
}

.settings-collapsible-trigger:hover {
  background: var(--surface-container-low);
}

.settings-collapsible-current {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-container);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.settings-collapsible-arrow {
  color: var(--on-surface-subtle);
  transition: transform var(--duration-base) var(--ease-standard);
  flex-shrink: 0;
}

.settings-collapsible[open] .settings-collapsible-arrow {
  transform: rotate(180deg);
}

.settings-collapsible-body {
  padding: 0 1.5rem 1.5rem;
}

.settings-method-grid {
  padding: 1.25rem 1.5rem 1.5rem;
}

.settings-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.5rem 1.5rem;
}

.settings-radio-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.settings-radio-label {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--on-surface-mid);
}

.settings-actions {
  max-width: 860px;
  margin-bottom: 1.5rem;
}

.settings-actions--sticky {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1.25rem 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  border-top: 1px solid rgba(26, 26, 46, 0.08);
  z-index: 100;
  display: flex;
  align-items: center;
}

.settings-meta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1.5rem;
}
.settings-meta-row:last-child { padding-bottom: 1.25rem; }

.settings-storage-bar {
  padding: 0.25rem 1.5rem 0.75rem;
}
.settings-storage-bar .fm-storage-info {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin-bottom: 0.4rem;
}
.settings-storage-bar .fm-storage-track {
  height: 6px;
  background: var(--surface-container);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.settings-storage-bar .fm-storage-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-xs);
}

.settings-storage-bytype {
  margin-top: 0.25rem;
  border-top: 1px solid rgba(60, 44, 0, 0.06);
  padding-top: 0.5rem;
}
.settings-storage-bytype-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  padding: 0.25rem 1.5rem 0.1rem;
}

/* ─── Account storage dashboard ──────────────────────────────── */
.storage-dashboard-page {
  display: grid;
  gap: 1.15rem;
  width: 100%;
  padding-bottom: 2.5rem;
}

.storage-dashboard-header {
  align-items: center;
}

.storage-dashboard-header__actions,
.storage-dashboard-header__actions .btn,
.storage-dashboard-header__actions .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.storage-dashboard-header__actions .material-symbols-outlined {
  font-size: 1.05rem;
}

.storage-dashboard-hero {
  display: grid;
  grid-template-columns: minmax(26rem, 1fr) minmax(22rem, 0.78fr);
  gap: 1rem;
  align-items: stretch;
}

.storage-donut-card,
.storage-panel,
.storage-metric-card {
  border: 1px solid var(--outline-variant);
  border-radius: 1.1rem;
  background: var(--surface-lowest);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--on-surface) 5%, transparent);
}

.storage-donut-card {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: center;
  padding: clamp(1.1rem, 2vw, 1.65rem);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 10%, transparent), transparent 30rem),
    var(--surface-lowest);
}

.storage-donut {
  position: relative;
  width: min(100%, 15rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--storage-donut);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 65%, transparent);
}

.storage-donut::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: inherit;
  background: var(--surface-lowest);
  box-shadow: 0 0 0 1px var(--outline-variant);
}

.storage-donut__center {
  position: absolute;
  inset: 25%;
  z-index: 1;
  display: grid;
  place-content: center;
  text-align: center;
}

.storage-donut__center strong {
  color: var(--on-surface);
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  line-height: 1;
}

.storage-donut__center span {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.storage-donut-card__copy {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.storage-eyebrow {
  color: var(--on-surface-subtle);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.storage-donut-card__copy h2,
.storage-panel__header h2 {
  margin: 0;
  color: var(--on-surface);
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.storage-donut-card__copy h2 {
  font-size: clamp(1.65rem, 2.9vw, 2.45rem);
  line-height: 1.05;
}

.storage-donut-card__copy p {
  margin: 0;
  max-width: 38rem;
  color: var(--on-surface-mid);
  font-size: var(--text-base);
}

.storage-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.storage-metric-card {
  display: grid;
  gap: 0.35rem;
  align-content: center;
  min-height: 8.2rem;
  padding: 1rem;
}

.storage-metric-card .material-symbols-outlined {
  color: var(--primary);
  font-size: 1.35rem;
}

.storage-metric-card strong {
  color: var(--on-surface);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1;
}

.storage-metric-card small {
  color: var(--on-surface-subtle);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.storage-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(28rem, 1.1fr) minmax(22rem, 0.9fr);
  gap: 1rem;
  align-items: start;
}

.storage-panel {
  overflow: hidden;
}

.storage-panel--sources {
  grid-row: span 2;
}

.storage-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--outline-variant);
  background: color-mix(in srgb, var(--surface-container-low) 55%, var(--surface-lowest));
}

.storage-panel__header h2 {
  margin-top: 0.12rem;
  font-size: 1rem;
}

.storage-source-list,
.storage-type-list,
.storage-largest-list {
  display: grid;
  gap: 0;
}

.storage-source-row,
.storage-largest-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  padding: 0.95rem 1.15rem;
}

.storage-source-row + .storage-source-row,
.storage-type-row + .storage-type-row,
.storage-largest-row + .storage-largest-row {
  border-top: 1px solid var(--outline-variant);
}

.storage-source-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--storage-row-color) 12%, var(--surface-container-low));
  color: var(--storage-row-color);
}

.storage-source-row__icon .material-symbols-outlined {
  font-size: 1.15rem;
}

.storage-source-row__main {
  min-width: 0;
}

.storage-source-row__top,
.storage-type-row > div,
.storage-largest-row {
  align-items: center;
}

.storage-source-row__top,
.storage-type-row > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.storage-source-row strong,
.storage-type-row strong,
.storage-largest-row strong {
  color: var(--on-surface);
}

.storage-source-row__top span,
.storage-type-row span,
.storage-largest-row em {
  color: var(--on-surface-mid);
  font-style: normal;
  font-weight: 750;
  white-space: nowrap;
}

.storage-source-row__bar,
.storage-type-row__bar {
  height: 0.48rem;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: var(--surface-container-low);
  overflow: hidden;
}

.storage-source-row__bar span,
.storage-type-row__bar span {
  display: block;
  width: var(--storage-row-width, var(--storage-type-width, 0%));
  height: 100%;
  min-width: 0.25rem;
  border-radius: inherit;
  background: var(--storage-row-color, var(--primary));
}

.storage-source-row p {
  margin: 0.45rem 0 0;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
}

.storage-type-row {
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem 1.15rem;
}

.storage-type-row__bar span {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.storage-largest-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  color: inherit;
  text-decoration: none;
}

.storage-largest-row:hover {
  background: var(--surface-container-low);
}

.storage-largest-row .material-symbols-outlined {
  color: var(--primary);
  font-size: 1.25rem;
}

.storage-largest-row div {
  min-width: 0;
}

.storage-largest-row strong,
.storage-largest-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storage-largest-row small {
  margin-top: 0.12rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}

.storage-empty-panel {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 2.5rem 1.25rem;
  text-align: center;
}

.storage-empty-panel--small {
  padding-block: 2rem;
}

.storage-empty-panel .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  background: var(--surface-container-low);
  color: var(--primary);
}

.storage-empty-panel strong {
  color: var(--on-surface);
}

.storage-empty-panel p {
  max-width: 26rem;
  margin: 0;
  color: var(--on-surface-subtle);
}

@media (max-width: 1100px) {
  .storage-dashboard-hero,
  .storage-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .storage-panel--sources {
    grid-row: auto;
  }
}

@media (max-width: 680px) {
  .storage-dashboard-header,
  .storage-dashboard-header__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .storage-dashboard-header__actions .btn,
  .storage-dashboard-header__actions .btn-ghost {
    justify-content: center;
    width: 100%;
  }

  .storage-donut-card {
    grid-template-columns: 1fr;
  }

  .storage-donut {
    justify-self: center;
  }

  .storage-dashboard-metrics {
    grid-template-columns: 1fr;
  }

  .storage-source-row__top,
  .storage-type-row > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
}

.settings-meta-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  width: 80px;
  flex-shrink: 0;
}

.settings-meta-value {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--on-surface-mid);
}

.settings-readonly-value {
  align-items: center;
  background: var(--surface-container-low);
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-md);
  color: var(--on-surface);
  display: flex;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  min-height: 2.75rem;
  padding: 0.75rem 0.875rem;
}

.settings-google-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1rem;
  padding: 1rem 1.5rem 1.5rem;
}

.settings-google-pane {
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  padding: 1rem;
}

.settings-google-status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.settings-google-count {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--on-surface);
}

.settings-google-hint,
.settings-google-url {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  line-height: 1.5;
}

.settings-google-url {
  display: block;
  overflow-wrap: anywhere;
}

.settings-google-callout {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-full);
  background: var(--surface);
  border: 1px solid var(--surface-container-high);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-mid);
  white-space: nowrap;
}

.settings-google-form,
.settings-google-fields,
.settings-google-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.settings-google-actions {
  display: flex;
  justify-content: flex-start;
}

.settings-google-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--surface-container-high);
}

.settings-google-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.settings-google-item-main {
  min-width: 0;
  flex: 1;
}

.settings-google-item-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.3rem;
}

.settings-google-name {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface);
}

.settings-google-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-full);
  font-family: 'DM Mono', monospace;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #e8f0fe;
  color: #1a73e8;
}

.settings-google-badge--sheet {
  background: #e6f4ea;
  color: #137333;
}

.settings-google-badge--doc {
  background: #e8f0fe;
  color: #1a73e8;
}

.settings-google-badge--slides {
  background: #fef7e0;
  color: #b06000;
}

.settings-google-badge--folder {
  background: #fff1e6;
  color: #c26401;
}

@media (max-width: 900px) {
  .settings-google-grid {
    grid-template-columns: 1fr;
  }

  .settings-google-item {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-google-status {
    flex-direction: column;
    align-items: stretch;
  }
}

.settings-danger-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.settings-danger-label {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 0.25rem;
}

.settings-danger-desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  line-height: 1.5;
  max-width: 480px;
}

.btn-danger {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-danger:hover { background: #fecaca; }

/* ─── TOGGLE SWITCH ─── */
.toggle-switch {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  display: block;
  width: 40px;
  height: 22px;
  background: var(--surface-container-high);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard);
}

.toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform var(--duration-base) var(--ease-standard);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.toggle-input:checked + .toggle-track {
  background: var(--secondary);
}

.toggle-input:checked + .toggle-track::after {
  transform: translateX(18px);
}

.toggle-switch--lg .toggle-track {
  width: 52px;
  height: 28px;
}

.toggle-switch--lg .toggle-track::after {
  width: 22px;
  height: 22px;
  top: 3px;
  left: 3px;
}

.toggle-switch--lg .toggle-input:checked + .toggle-track::after {
  transform: translateX(24px);
}

/* ─── SETTINGS TOGGLE ROW ─── */
.settings-toggle-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem 1.5rem;
}

.settings-toggle-row--locked .toggle-label-text {
  color: var(--on-surface-mid);
}

.toggle-switch--locked {
  display: inline-flex;
  align-items: center;
  opacity: 0.45;
  cursor: not-allowed;
}

.settings-upgrade-pill {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #a78bfa, #c4b5fd);
  color: #ffffff !important;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  vertical-align: middle;
  line-height: 1.4;
}

.settings-upgrade-pill:hover {
  filter: brightness(1.05);
}

.toggle-label-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.toggle-label-text {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
}

.toggle-label-hint {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  line-height: 1.4;
}

.nav-toggles-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.toggle-label-status {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}

.toggle-status {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.toggle-status--on  { color: var(--secondary); }
.toggle-status--off { color: var(--on-surface-subtle); }

/* ─── ONBOARDING PREFERENCES CARD ─── */
.ob-pref-card {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.ob-pref-card-body {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
}

.ob-pref-card-icon {
  color: var(--primary);
  opacity: 0.75;
  flex-shrink: 0;
}

.ob-pref-card-text {
  flex: 1;
  min-width: 0;
}

.ob-pref-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.3rem;
}

.ob-pref-card-desc {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  line-height: 1.5;
}

.ob-pref-card-desc a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ob-pref-card-desc a:hover {
  color: var(--primary-hover);
}

/* ─── MODAL ─── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  animation: modalFadeIn 0.15s ease;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-panel {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  padding: 1.25rem 1.5rem 0;
  position: relative;
}

.modal-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0;
}

.modal-subtitle {
  font-size: var(--text-sm);
  color: #9ca3af;
  margin-top: 0.15rem;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: #9ca3af;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.modal-close:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.modal-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.modal-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding-top: 0.75rem;
}

/* ─── CUSTOM TRACKERS ─── */
.tracker-column-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
}
.tracker-column-row .form-input {
  flex: 2;
}
.tracker-column-row .form-select {
  flex: 1;
  min-width: 100px;
}
.tracker-col-remove {
  background: none;
  border: none;
  font-size: var(--text-lg);
  color: #9ca3af;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  border-radius: var(--radius-xs);
}
.tracker-col-remove:hover {
  color: #d50000;
  background: #fff0f0;
}

.tracker-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-md);
  background: #fff;
}

.tracker-table {
  width: 100%;
  border-collapse: collapse;
}
.tracker-table thead th {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #70757a;
  padding: 0.6rem 1rem;
  text-align: left;
  background: #fafafa;
  border-bottom: 1px solid #e5e7eb;
}
.tracker-table tbody td {
  font-size: var(--text-base);
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--outline-variant);
  color: var(--on-surface-mid);
}
.tracker-table tbody tr:last-child td {
  border-bottom: none;
}
.tracker-table tbody tr:hover {
  background: #fafafa;
}
.tracker-actions-col {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

/* ─── CONFIRM / ALERT DIALOG ───
   Replaces browser-native confirm() and alert(). Wired via Turbo config
   (app/javascript/application.ts) for data-turbo-confirm, and via the
   dialogs helper module (app/javascript/lib/dialogs.ts) for direct JS
   callers. Supports a --danger variant for destructive actions. */

.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  animation: modalFadeIn var(--duration-base) var(--ease-standard);
}

.confirm-panel {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 420px;
  padding: 1.5rem 1.5rem 1.25rem;
  animation: modalSlideIn var(--duration-base) var(--ease-standard);
}

.confirm-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  letter-spacing: var(--tracking-xl);
  color: var(--on-surface);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.confirm-message {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--on-surface-mid);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.confirm-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.confirm-btn:active {
  transform: scale(0.97);
}
.confirm-btn:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.confirm-btn--cancel {
  background: var(--surface-lowest);
  color: var(--on-surface);
  border-color: var(--outline-variant);
}
.confirm-btn--cancel:hover {
  background: var(--surface-container-low);
  border-color: var(--outline);
}

.confirm-btn--ok {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.confirm-btn--ok:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.confirm-btn--danger {
  background: var(--error);
  color: #fff;
  border-color: var(--error);
}
.confirm-btn--danger:hover {
  background: color-mix(in srgb, var(--error) 85%, black);
  border-color: color-mix(in srgb, var(--error) 85%, black);
}

/* Alert variant — single OK button, right-aligned, primary style */
.confirm-overlay--alert .confirm-actions {
  justify-content: flex-end;
}
body.theme-dark .confirm-btn--cancel:hover {
  background: var(--surface-container);
}

/* ─── BETA NOTICE ─── */
.beta-notice {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 170;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: min(22rem, calc(100vw - 2rem));
  padding: 0.85rem 2.5rem 0.85rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, var(--surface-lowest)), var(--surface-lowest));
  color: var(--on-surface);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--primary) 12%, transparent), var(--shadow-md);
  animation: beta-notice-slide-in 560ms 1.1s var(--ease-emphasized) both;
}

.beta-notice--hiding {
  animation: beta-notice-slide-out 180ms var(--ease-standard) both;
}

.beta-notice__badge {
  flex: 0 0 auto;
  padding: 0.22rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.beta-notice__title {
  margin: 0 0 0.15rem;
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
}

.beta-notice__body {
  margin: 0;
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.35;
}

.beta-notice__close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--on-surface-subtle);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.beta-notice__close:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--on-surface);
}

.beta-notice__close .material-symbols-outlined {
  font-size: 1rem;
  font-variation-settings: "FILL" 0, "wght" 650, "GRAD" 0, "opsz" 20;
}

@keyframes beta-notice-slide-in {
  from {
    opacity: 0;
    transform: translateX(-1.25rem) translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes beta-notice-slide-out {
  to {
    opacity: 0;
    transform: translateX(-0.75rem) translateY(0.35rem);
  }
}

body.theme-dark .beta-notice {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, var(--surface-lowest)), var(--surface-lowest));
  box-shadow: 0 18px 44px color-mix(in srgb, black 36%, transparent);
}

@media (max-width: 640px) {
  .beta-notice {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    width: auto;
  }

  .beta-notice__body {
    display: none;
  }
}

/* ─── HELP FAB ─── */
.help-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.help-fab-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: white;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  font-style: normal;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(28, 28, 26, 0.18);
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-fab-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(28, 28, 26, 0.22);
}

.help-popover {
  position: absolute;
  bottom: calc(100% + 0.75rem);
  right: 0;
  width: 320px;
  max-width: 90vw;
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(28, 28, 26, 0.14),
              0 2px 8px rgba(28, 28, 26, 0.06),
              0 0 0 1px var(--outline-variant);
  padding: 1.25rem 1.5rem;
}

.help-popover::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: var(--surface-lowest);
  border-right: 1px solid var(--outline-variant);
  border-bottom: 1px solid var(--outline-variant);
  transform: rotate(45deg);
}

.help-popover-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
}

.help-popover-body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  line-height: 1.6;
}

.help-docs-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.8rem;
  color: var(--primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}

.help-docs-link::after {
  content: "open_in_new";
  font-family: "Material Symbols Outlined";
  font-size: 1rem;
  line-height: 1;
  font-weight: 400;
}

.help-docs-link:hover {
  color: var(--primary-dim);
  text-decoration: underline;
}

.help-popover-divider {
  border: none;
  border-top: 1px solid var(--outline-variant);
  margin: 1rem 0;
}

.help-feedback-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.help-feedback-textarea {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--on-surface);
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.help-feedback-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.help-feedback-submit {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: white;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  align-self: flex-end;
}

.help-feedback-submit:hover {
  background: var(--primary-dark, color-mix(in srgb, var(--primary) 85%, black));
  transform: translateY(-1px);
}

.help-feedback-success {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--success, #16a34a);
  text-align: center;
  padding: 0.75rem 0;
}

.help-feedback-error {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--error, #dc2626);
  text-align: center;
  padding: 0.25rem 0;
}

/* ─── NARRATION SHOW ─── */
.narration-source-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.75rem;
}

.narration-full-text {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--on-surface);
}

/* ─── FIELD TRIP SHOW ─── */
.ft-detail-row {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  padding: 0.4rem 0;
}

.ft-detail-row + .ft-detail-row {
  border-top: 1px solid var(--surface-container-high);
}

.ft-description {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--on-surface);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--surface-container-high);
}

/* ─── ENRICHMENT PAGES ─── */
.enrich-stats-bar {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.enrich-stat {
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--surface-container-low);
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
}

.enrich-stat-num {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--on-surface);
}

.enrich-stat-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.enrich-month-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.enrich-month-label {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
}

.enrich-summary-strip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.enrich-summary-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--on-surface-subtle);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.enrich-summary-pill {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.65rem;
}

.record-item-link {
  color: inherit;
  text-decoration: none;
}

.record-item-link:hover {
  color: var(--primary);
}

.record-item-meta {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin-top: 0.35rem;
}

.enrich-detail-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 12px var(--shadow);
  padding: 1.5rem;
}

.enrich-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.enrich-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
}

.enrich-detail-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.enrich-detail-value {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
}

.enrich-detail-body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--on-surface);
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
}

.enrich-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.enrich-check-option {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

@media (max-width: 600px) {
  .enrich-stats-bar {
    flex-direction: column;
  }
  .enrich-stat {
    min-width: 0;
  }
  .enrich-month-nav {
    flex-wrap: wrap;
  }
}

/* ═══════════════════════════════════════════════════════
   PAGE & BLOCK EDITOR
   ═══════════════════════════════════════════════════════ */

/* ─── PAGE INDEX ─── */
.page-index { max-width: 800px; margin: 0 auto; }
.page-index-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem;
}
.page-index-title {
  font-family: var(--font-sans); font-size: var(--text-2xl); font-weight: 700;
}
.page-index-list { display: flex; flex-direction: column; gap: 0.5rem; }

.page-card {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  text-decoration: none; color: var(--on-surface);
  transition: background var(--duration-base) var(--ease-standard);
}
.page-card:hover { background: var(--surface-container); }
.page-card-icon { font-size: var(--text-xl); flex-shrink: 0; }
.page-card-body { flex: 1; min-width: 0; }
.page-card-title {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-md);
}
.page-card-meta {
  display: flex; gap: 0.5rem; font-size: var(--text-sm); color: var(--on-surface-mid);
  margin-top: 0.15rem;
}
.page-card-badge {
  font-size: var(--text-xs); background: var(--surface-container-high);
  padding: 0.15rem 0.5rem; border-radius: var(--radius-md);
  color: var(--on-surface-mid);
}

/* ─── PAGE SHOW ─── */
.page-show { max-width: 800px; margin: 0 auto; }

.page-header { margin-bottom: 2rem; }
.page-header-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.page-show .page-title {
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500;
  outline: none; border: none; width: 100%;
  color: var(--on-surface); line-height: 1.15; letter-spacing: var(--tracking-3xl);
}
.page-show .page-title:focus { border-bottom: 2px solid var(--primary); }
.page-show .page-title:empty::before {
  content: 'Untitled'; color: var(--on-surface-subtle); font-style: italic;
}

.page-header-actions {
  display: flex; gap: 0.5rem; align-items: center;
  margin-top: 0.75rem; flex-wrap: wrap;
}
.page-header-type {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--on-surface-subtle); font-family: var(--font-sans); font-weight: 600;
}
.page-header-child {
  font-size: var(--text-sm); font-family: var(--font-sans); font-weight: 500;
}

/* ─── BLOCKS ─── */
.page-blocks { display: flex; flex-direction: column; gap: 0.25rem; }

.block {
  display: flex; align-items: flex-start; gap: 0.25rem;
  padding: 0.35rem 0; position: relative;
  border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-standard);
}
.block:hover { background: var(--surface-container-low); }

.block-handle {
  opacity: 0; cursor: grab; color: var(--on-surface-subtle);
  font-size: var(--text-xs); padding: 0.25rem 0.15rem; user-select: none;
  transition: opacity var(--duration-fast) var(--ease-standard); flex-shrink: 0; margin-top: 0.15rem;
}
.block-content { flex: 1; min-width: 0; }
.block-actions {
  opacity: 0; display: flex; gap: 0.25rem; flex-shrink: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
.block-action-btn {
  background: none; border: none; cursor: pointer; padding: 0.15rem 0.35rem;
  color: var(--on-surface-subtle); font-size: var(--text-base); border-radius: var(--radius-xs);
}
.block-action-btn:hover { background: var(--surface-container-high); color: var(--error); }

.block--dragging { opacity: 0.5; }
.block-placeholder {
  background: var(--primary-container); border-radius: var(--radius-md);
  border: 2px dashed var(--primary); opacity: 0.4;
}

.block-children {
  margin-left: 1.5rem; padding-left: 0.75rem;
  border-left: 2px solid var(--surface-container-high);
}

/* ─── CONTENT BLOCKS ─── */
.block-text {
  font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.7;
  color: var(--on-surface); margin: 0;
}

.block-heading { font-family: var(--font-sans); color: var(--on-surface); margin: 0; }
.block-heading-1 { font-size: var(--text-2xl); font-weight: 600; }
.block-heading-2 { font-size: var(--text-xl); font-weight: 500; }
.block-heading-3 { font-size: var(--text-lg); font-weight: 500; }

.block-todo { display: flex; align-items: center; gap: 0.5rem; }
.block-todo-check {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: var(--text-lg); line-height: 1;
}
.block-todo-indicator { color: var(--on-surface-subtle); }
.block-todo-indicator.checked { color: var(--primary); }
.block-todo-text { font-family: var(--font-sans); font-size: var(--text-md); }
.block-todo-text.completed { text-decoration: line-through; color: var(--on-surface-subtle); }

.block-divider {
  border: none; height: 1px; background: var(--surface-container-high);
  margin: 0.5rem 0;
}

/* ─── DOMAIN BLOCKS ─── */
.block-lesson-header,
.block-narration-header,
.block-habit-header,
.block-memory-work-header,
.block-read-aloud-header,
.block-field-trip-header,
.block-copywork-header,
.block-cultural-header,
.block-nature-header,
.block-daily-log-header,
.block-template-header {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}

.block-lesson-toggle, .block-habit-toggle, .block-cultural-work-toggle {
  background: none; border: none; cursor: pointer; padding: 0; font-size: var(--text-lg);
}
.block-lesson-check, .block-habit-check {
  color: var(--on-surface-subtle);
}
.block-lesson-check.completed, .block-habit-check.completed {
  color: var(--primary);
}

.block-lesson-title, .block-habit-name, .block-read-aloud-title,
.block-field-trip-title, .block-nature-title, .block-cultural-name,
.block-memory-work-title, .block-template-title {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-md);
}
.block-lesson-title.completed { text-decoration: line-through; color: var(--on-surface-subtle); }

.block-lesson-meta, .block-habit-meta, .block-read-aloud-meta,
.block-field-trip-meta, .block-nature-meta, .block-memory-work-meta,
.block-template-meta {
  display: flex; gap: 0.5rem; font-size: var(--text-sm); color: var(--on-surface-mid);
  margin-top: 0.2rem; font-family: var(--font-sans);
}

.block-lesson-notes, .block-nature-observation, .block-field-trip-desc,
.block-cultural-bio, .block-memory-work-body {
  font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.6;
  color: var(--on-surface); margin-top: 0.35rem;
}

.block-copywork-passage {
  font-family: var(--font-sans); font-style: italic;
  font-size: var(--text-md); line-height: 1.7;
  margin: 0.5rem 0 0.25rem 0; padding-left: 1rem;
  border-left: 3px solid var(--primary-container);
  color: var(--on-surface);
}
.block-copywork-source {
  font-size: var(--text-sm); color: var(--on-surface-mid);
  font-family: var(--font-sans);
}

.block-timeline {
  display: flex; align-items: baseline; gap: 0.75rem;
}
.block-timeline-year {
  font-family: var(--font-sans); font-weight: 700; font-size: var(--text-base);
  color: var(--primary); min-width: 5rem; text-align: right;
}
.block-timeline-name {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-md);
}
.block-timeline-desc {
  font-size: var(--text-base); color: var(--on-surface-mid); margin-top: 0.15rem;
  font-family: var(--font-sans);
}

.block-transcript-course {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-sans); font-size: var(--text-base);
}
.block-transcript-course-name { font-weight: 600; flex: 1; }
.block-transcript-course-grade { font-weight: 700; color: var(--primary); }
.block-transcript-course-credits { color: var(--on-surface-mid); }

.block-daily-log-section {
  font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.6;
  margin-top: 0.25rem;
}

.block-book, .block-outside, .block-attendance, .block-read-session,
.block-habit-log, .block-memory-review, .block-cultural-work {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans); font-size: var(--text-base);
}

.block-book-title, .block-cultural-work-title { font-weight: 600; }
.block-book-author { color: var(--on-surface-mid); font-style: italic; }

.block-habit-streak {
  color: var(--primary); font-weight: 600;
}

/* ─── BLOCK INSERTER ─── */
.block-inserter {
  margin-top: 1rem; padding: 0.5rem 0;
}
.block-inserter-btn {
  display: flex; align-items: center; gap: 0.5rem;
  background: none; border: none; cursor: pointer;
  color: var(--on-surface-subtle); padding: 0.35rem 0.5rem;
  border-radius: var(--radius-md); width: 100%; text-align: left;
  font-family: var(--font-sans); font-size: var(--text-base);
  transition: background var(--duration-fast) var(--ease-standard);
}
.block-inserter-btn:hover {
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
}
.block-inserter-plus {
  font-size: var(--text-xl); font-weight: 300; width: 1.5rem; text-align: center;
}

/* ─── SLASH MENU ─── */
.slash-menu {
  position: absolute; z-index: 100; width: 280px;
  background: rgba(var(--surface-rgb, 246,243,240), 0.95);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-lg); padding: 0.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  max-height: 320px; overflow-y: auto;
}
.slash-menu-search {
  width: 100%; border: none; background: var(--surface-container-low);
  padding: 0.5rem 0.75rem; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: var(--text-base);
  outline: none; margin-bottom: 0.35rem;
}
.slash-menu-list { display: flex; flex-direction: column; }
.slash-menu-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.4rem 0.65rem; border: none; background: none;
  cursor: pointer; border-radius: var(--radius-md); text-align: left;
  font-family: var(--font-sans); font-size: var(--text-base);
  color: var(--on-surface); transition: background var(--duration-fast) var(--ease-standard);
}
.slash-menu-item:hover { background: var(--surface-container-low); }
.slash-menu-item-slash {
  font-size: var(--text-xs); color: var(--on-surface-subtle);
  font-family: monospace;
}

/* ─── SIDEBAR V2 ─── */
.sidebar-v2 .sidebar-section--quick { margin-bottom: 0.5rem; }
.sidebar-v2 .sidebar-section--legacy {
  margin-top: auto; padding-top: 0.75rem;
  border-top: 1px solid var(--surface-container-high);
}

.sidebar-page-item {
  display: flex; align-items: center; gap: 0.15rem;
  min-height: 1.75rem;
}
.sidebar-page-toggle {
  background: none; border: none; cursor: pointer; padding: 0.15rem;
  color: var(--on-surface-subtle); border-radius: var(--radius-xs);
  display: flex; align-items: center;
}
.sidebar-page-toggle:hover { background: var(--surface-container-high); }
.sidebar-page-arrow { transition: transform var(--duration-base) var(--ease-standard); }
.sidebar-page-spacer { width: 18px; flex-shrink: 0; }

.sidebar-page-link {
  display: flex; align-items: center; gap: 0.35rem;
  text-decoration: none; color: var(--on-surface);
  padding: 0.2rem 0.35rem; border-radius: var(--radius-xs);
  font-family: var(--font-sans); font-size: var(--text-sm);
  flex: 1; min-width: 0; transition: background var(--duration-fast) var(--ease-standard);
}
.sidebar-page-link:hover { background: var(--surface-container-low); }
.sidebar-page-link.active {
  background: var(--surface-container);
  font-weight: 600;
}
.sidebar-page-icon { font-size: var(--text-base); flex-shrink: 0; }
.sidebar-page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-page-child { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sidebar-page-children { margin-top: 0.1rem; }

.nav-item--add {
  color: var(--on-surface-subtle); font-style: italic;
}
.nav-item--add:hover { color: var(--primary); }

/* ─── PAGE FORM ─── */
.page-form-container { max-width: 600px; margin: 0 auto; }
.page-form-title {
  font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 700;
  margin-bottom: 1.5rem;
}

/* ── Community ─────────────────────────────────────────── */
.community-header {
  margin-bottom: 2rem;
}
.community-title {
  font-family: var(--font-sans); font-size: 2rem; font-weight: 700;
  color: var(--on-surface);
}
.community-subtitle {
  color: var(--on-surface-mid); font-size: var(--text-md); margin-top: 0.25rem;
}
.community-filters { margin-bottom: 1.5rem; }
.community-filter-form .filter-row {
  display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
}
.community-filter-form .filter-search { flex: 1; min-width: 200px; }
.community-filter-form .filter-select { min-width: 160px; }
.community-filter-form .filter-input {
  width: 100%; padding: 0.5rem 0.75rem; border: none;
  border-radius: var(--radius-full); font-size: var(--text-base); background: var(--surface-container-low);
}
.community-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}
.community-card {
  border: none; border-radius: var(--radius-xl);
  background: var(--surface-lowest); transition: box-shadow var(--duration-base) var(--ease-standard);
  box-shadow: 0 2px 12px var(--shadow);
}
.community-card:hover { box-shadow: var(--shadow-lg); }
.community-card-link {
  display: block; padding: 1.25rem; text-decoration: none; color: inherit;
}
.community-card-icon { font-size: var(--text-xl); margin-bottom: 0.5rem; }
.community-card-title {
  font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 700;
  color: var(--on-surface);
}
.community-card-meta {
  font-size: var(--text-sm); color: var(--on-surface-mid); margin-top: 0.25rem;
}
.community-card-sep { margin: 0 0.3rem; }
.community-card-author {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.75rem; font-size: var(--text-sm); color: var(--on-surface-mid);
}
.community-card-stats {
  display: flex; gap: 0.75rem; margin-top: 0.75rem;
  font-size: var(--text-xs); color: var(--on-surface-mid);
}
.community-card-forks { color: var(--secondary); font-weight: 500; }
.method-pill--sm { font-size: var(--text-xs); padding: 0.15rem 0.5rem; }
.community-pagination {
  display: flex; gap: 1rem; justify-content: center; margin-top: 2rem;
}

/* Community page show */
.community-page-header { margin-bottom: 1.5rem; }
.community-page-icon { font-size: 2rem; }
.community-page-title {
  font-family: var(--font-sans); font-size: var(--text-2xl); font-weight: 700;
  color: var(--on-surface); margin-top: 0.25rem;
}
.community-page-meta {
  font-size: var(--text-base); color: var(--on-surface-mid); margin-top: 0.25rem;
}
.community-page-actions {
  display: flex; gap: 0.75rem; margin-bottom: 2rem;
}
.community-page-blocks { max-width: 720px; }
.community-block {
  padding: 0.5rem 0; border-bottom: none;
}
.community-block-children {
  margin-left: 1.5rem; border-left: 2px solid var(--outline-variant);
  padding-left: 1rem;
}

/* ─── PRICING PAGE ─── */
.pricing-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
}
.pricing-header-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 0.8rem;
}
.pricing-headline {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--on-surface);
  margin-bottom: 0.8rem;
}
.pricing-subheadline {
  font-size: var(--text-base);
  color: var(--on-surface-mid);
  line-height: 1.5;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto 4rem;
  align-items: start;
}
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
}

.pricing-card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  position: relative;
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.pricing-card:hover {
  box-shadow: 0 8px 32px var(--shadow);
  transform: translateY(-2px);
}

.pricing-card--featured {
  border: 2px solid var(--primary);
  box-shadow: 0 4px 24px rgba(64, 92, 101, 0.12);
}
.pricing-card--featured:hover {
  box-shadow: 0 12px 40px rgba(64, 92, 101, 0.18);
}

.pricing-card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 1rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pricing-card-head { margin-bottom: 1.5rem; }

.pricing-plan-name {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.2rem;
}
.pricing-plan-desc {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

.pricing-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 1.5rem;
}
.pricing-amount {
  font-family: var(--font-sans);
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--on-surface);
  line-height: 1;
}
.pricing-period {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

.pricing-card-action { margin-bottom: 1.5rem; }
.pricing-btn {
  width: 100%;
  text-align: center;
  display: block;
}

.pricing-current-badge {
  display: block;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--secondary);
  background: var(--sage-pale);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-full);
}

.pricing-features { border-top: 1px solid var(--outline-variant); padding-top: 1.2rem; }
.pricing-feature-group-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.8rem;
}
.pricing-feature-list { list-style: none; }
.pricing-feature {
  font-size: var(--text-sm);
  color: var(--on-surface);
  padding: 0.3rem 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.4;
}
.pricing-check {
  color: var(--secondary);
  font-weight: 700;
  font-size: var(--text-base);
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
}
.pricing-check--accent { color: var(--primary); }

/* ── Feature Comparison Table ── */
.pricing-comparison {
  max-width: 960px;
  margin: 0 auto 4rem;
}
.pricing-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--on-surface);
  text-align: center;
  margin-bottom: 2rem;
}
.pricing-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.pricing-table th,
.pricing-table td {
  padding: 0.65rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--outline-variant);
}
.pricing-table thead th {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  position: sticky;
  top: 0;
}
.pricing-table-feature { width: 40%; }
.pricing-table-plan { width: 20%; text-align: center; }
.pricing-table-plan--featured {
  background: rgba(64, 92, 101, 0.04);
  color: var(--primary);
}
.pricing-table td:not(:first-child) { text-align: center; color: var(--on-surface-mid); }
.pricing-table td:nth-child(3) { background: rgba(64, 92, 101, 0.03); font-weight: 500; color: var(--on-surface); }

.pricing-table-section td {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  padding-top: 1.2rem;
  border-bottom: none;
}

/* ── FAQ ── */
.pricing-faq {
  max-width: 760px;
  margin: 0 auto 3rem;
}
.pricing-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 600px) {
  .pricing-faq-grid { grid-template-columns: 1fr; }
}
.pricing-faq-item {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.4rem;
}
.pricing-faq-q {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--on-surface);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.pricing-faq-a {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  line-height: 1.55;
}

/* ─── DISCOVER (community pin board) ─────────────────────────────── */

/* ── Filter pills ── */
.discover-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  align-items: center;
}
.discover-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--surface-container);
  color: var(--on-surface-mid);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.discover-filter-pill:hover {
  background: var(--surface-container-high);
  color: var(--on-surface);
}
.discover-filter-pill--active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.discover-filter-count {
  font-size: var(--text-xs);
  opacity: 0.75;
}
.discover-filter-sep {
  width: 1px;
  height: 1.2rem;
  background: var(--outline-variant);
  margin: 0 0.2rem;
}

/* ── Masonry grid ── */
.discover-grid {
  columns: 3 220px;
  column-gap: 1rem;
}

/* ── Pin card ── */
.pin-card {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--radius-md);
  background: var(--nc-surface);
  border: 1px solid var(--nc-border);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.pin-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
.pin-card-img-link { display: block; }
.pin-card-img-wrap {
  width: 100%;
  min-height: 140px;
  max-height: 320px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pin-card-img-wrap--terracotta { background: var(--terracotta-soft, #f5e6e0); }
.pin-card-img-wrap--sky        { background: var(--sky-soft, #e0eff8); }
.pin-card-img-wrap--forest     { background: var(--forest-soft, #e0ece4); }
.pin-card-img-wrap--gold       { background: var(--gold-soft, #f5f0e0); }
.pin-card-img-wrap--rose       { background: var(--rose-soft, #f8e6ec); }
.pin-card-img {
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
  display: block;
}
.pin-card-img-placeholder {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-mid);
  padding: 2rem;
  text-align: center;
}
.pin-card-body { padding: 0.75rem 0.85rem 0.85rem; }
.pin-card-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.pin-category-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
}
.pin-category-badge--terracotta { background: var(--terracotta-soft, #f5e6e0); color: #7a3a20; }
.pin-category-badge--sky        { background: var(--sky-soft, #e0eff8);        color: #1a5276; }
.pin-category-badge--forest     { background: var(--forest-soft, #e0ece4);     color: #1a4a2e; }
.pin-category-badge--gold       { background: var(--gold-soft, #f5f0e0);       color: #6b5a1e; }
.pin-category-badge--rose       { background: var(--rose-soft, #f8e6ec);       color: #7a2040; }
.pin-vis-badge {
  font-size: var(--text-sm);
  opacity: 0.65;
  margin-left: auto;
}
.pin-card-title {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface);
  text-decoration: none;
  margin-bottom: 0.3rem;
  line-height: 1.35;
}
.pin-card-title:hover { text-decoration: underline; }
.pin-card-desc {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  margin: 0 0 0.5rem;
  line-height: 1.45;
}
.pin-card-footer { margin-top: 0.5rem; }
.pin-card-author {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  text-decoration: none;
  font-weight: 500;
}
.pin-card-author:hover { text-decoration: underline; }

/* ── Pin show page ── */
.pin-show-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 768px) {
  .pin-show-layout { grid-template-columns: 1fr; }
}
.pin-show-img-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-container);
}
.pin-show-img {
  width: 100%;
  max-height: 600px;
  object-fit: contain;
  display: block;
}
.pin-show-img-placeholder {
  border-radius: var(--radius-md);
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--on-surface-mid);
}
.pin-show-img-placeholder--terracotta { background: var(--terracotta-soft, #f5e6e0); }
.pin-show-img-placeholder--sky        { background: var(--sky-soft, #e0eff8); }
.pin-show-img-placeholder--forest     { background: var(--forest-soft, #e0ece4); }
.pin-show-img-placeholder--gold       { background: var(--gold-soft, #f5f0e0); }
.pin-show-img-placeholder--rose       { background: var(--rose-soft, #f8e6ec); }
.pin-show-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.pin-show-title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 0.75rem;
  line-height: 1.25;
}
.pin-show-desc {
  font-size: var(--text-md);
  color: var(--on-surface-mid);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.pin-show-desc p { margin: 0 0 0.5rem; }
.pin-show-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-base);
  color: var(--primary);
  text-decoration: none;
  background: var(--surface-container);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.75rem;
  margin-bottom: 1rem;
  word-break: break-all;
}
.pin-show-link:hover { text-decoration: underline; }
.pin-show-author {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--nc-border);
}
.pin-show-author-link { text-decoration: none; }
.pin-show-author-name {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--on-surface);
}
.pin-show-date {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

/* ── Pin form ── */
.pin-image-upload-area {
  position: relative;
  border: 2px dashed var(--nc-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--duration-base) var(--ease-standard);
}
.pin-image-upload-area:hover { border-color: var(--primary); }
.pin-image-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.pin-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
  padding: 2rem;
}
.pin-image-placeholder-icon { font-size: 2rem; }
.pin-image-preview {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-md);
}
.form-hint {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin-top: 0.3rem;
}

/* ── Visibility picker ── */
.vis-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vis-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.vis-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--nc-border);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
  position: relative;
}
.vis-option:hover { border-color: var(--primary); background: var(--surface-container-low); }
.vis-option--active,
.vis-option:has(.vis-radio:checked) {
  border-color: var(--primary);
  background: var(--surface-container-low);
}
.vis-option-icon { font-size: var(--text-lg); flex-shrink: 0; margin-top: 0.05rem; }
.vis-option-label { display: block; font-weight: 600; font-size: var(--text-base); color: var(--on-surface); }
.vis-option-desc { display: block; font-size: var(--text-sm); color: var(--on-surface-subtle); margin-top: 0.1rem; }

/* ─── DOCS ─── */
.docs-toolbar {
  margin-bottom: 1rem;
}

.library-search-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.library-search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: min(100%, 22rem);
}

.library-search-form__input {
  flex: 1;
  min-width: 12rem;
}

.library-search-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.library-search-filter__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
}

.library-search-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

@media (max-width: 640px) {
  .library-search-filter__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: -0.75rem;
    padding: 0.1rem 0.75rem 0.25rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .library-search-filter__chips::-webkit-scrollbar {
    display: none;
  }

  .library-search-filter__chips > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.library-search-meta {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin: 0 0 1rem;
}

.library-search-section {
  margin-bottom: 1.75rem;
}

.library-search-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.library-search-section__title {
  font-size: var(--text-md);
  font-weight: 700;
  margin: 0 0 0.65rem;
  color: var(--on-surface);
}

.library-search-section__head .library-search-section__title {
  margin-bottom: 0;
}

.library-search-section__count {
  font-weight: 600;
  color: var(--on-surface-subtle);
}

.library-search-file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.library-search-file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(26, 26, 46, 0.06);
}

.library-search-file-row:last-child {
  border-bottom: none;
}

.library-search-file-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--on-surface);
  font-weight: 500;
  font-size: var(--text-sm);
  min-width: 0;
}

.library-search-file-link:hover {
  color: var(--primary);
}

.library-search-file-icon {
  font-size: var(--text-xl);
  opacity: 0.75;
  flex-shrink: 0;
}

.library-search-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-search-file-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  flex-shrink: 0;
}

.library-search-file-dash {
  opacity: 0.5;
}

.library-search-empty {
  margin-top: 1rem;
}

.docs-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.doc-note-card {
  text-decoration: none;
  color: inherit;
  display: block;
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 20px rgba(10, 10, 30, 0.04);
  padding: 1rem;
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.doc-note-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(10, 10, 30, 0.08);
  border-color: rgba(37, 57, 212, 0.14);
}

.doc-note-card-top,
.doc-note-card-title-wrap,
.doc-note-card-footer,
.doc-form-meta {
  display: flex;
  align-items: center;
}

.doc-note-card-top,
.doc-note-card-footer {
  justify-content: space-between;
}

.doc-note-card-top {
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.doc-note-card-title-wrap {
  align-items: flex-start;
  min-width: 0;
}

.doc-note-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1.35;
}

.doc-list-preview {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  line-height: 1.5;
  min-height: 4.8em;
}

.doc-note-card-footer {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(26, 26, 46, 0.06);
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.docs-empty-state {
  margin-top: 1rem;
}

.doc-list-time {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

.doc-show-card {
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(26, 26, 46, 0.08);
  box-shadow: 0 10px 24px rgba(10, 10, 30, 0.05);
  padding: 2rem;
  margin-top: 1.5rem;
}

.doc-show-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}

.doc-content {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--on-surface);
}

.doc-content h1 { font-size: var(--text-xl); font-weight: 700; margin: 1.5rem 0 0.75rem; }
.doc-content blockquote {
  border-left: 3px solid rgba(37, 57, 212, 0.3);
  padding-left: 1rem;
  color: var(--on-surface-subtle);
  margin: 1rem 0;
}
.doc-content ul, .doc-content ol { padding-left: 1.5rem; }
.doc-content a { color: #2539d4; }

/* Doc form */
.doc-form {
  margin-top: 1rem;
}

.doc-form-header {
  background: linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(26, 26, 46, 0.08);
  box-shadow: 0 8px 20px rgba(10, 10, 30, 0.04);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.doc-form-kicker {
  font-family: 'DM Mono', monospace;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  margin-bottom: 0.55rem;
}

.doc-title-input {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 700;
  border: none;
  outline: none;
  width: 100%;
  color: var(--on-surface);
  background: transparent;
  padding: 0;
  margin-bottom: 0.75rem;
}

.doc-title-input::placeholder {
  color: var(--on-surface-subtle);
  opacity: 0.5;
}

.doc-form-meta {
  gap: 0.5rem;
  flex-wrap: wrap;
}

.doc-meta-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
}

.doc-meta-select {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: 0.35rem 0.6rem;
  border: 1.5px solid rgba(26, 26, 46, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.8);
  color: var(--on-surface);
}

.doc-editor-wrap {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(26, 26, 46, 0.08);
  box-shadow: 0 8px 20px rgba(10, 10, 30, 0.04);
  overflow: hidden;
  margin-bottom: 1rem;
}

.doc-editor-tip {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  padding: 0.85rem 1rem 0;
}

.doc-editor-wrap trix-toolbar {
  background: color-mix(in srgb, var(--page-bg) 72%, var(--surface) 28%);
  border-bottom: 1px solid rgba(26, 26, 46, 0.05);
  padding: 0.45rem 0.7rem 0.55rem;
}

.doc-editor-wrap trix-editor {
  min-height: 320px;
  padding: 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.75;
  color: var(--on-surface);
  border: none;
}

/* Intentional: the doc-editor-wrap container draws the focus ring; the
   Trix editor surface itself should stay unadorned for a clean writing UX. */
.doc-editor-wrap trix-editor:focus {
  outline: none;
  box-shadow: none;
}

.doc-form-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ─── Docs / records: Paper-like canvas ─── */
.bc-main--paper {
  max-width: 960px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 92%, var(--surface) 8%) 0%, color-mix(in srgb, var(--page-bg) 62%, transparent) 28%, transparent 55%);
}

.bc-main--record-craft {
  max-width: min(1240px, 100%);
  background: transparent;
}

/* Wide layout: pages that benefit from filling the full viewport
   (planner calendar grid, files browser, etc.). */
.binder-stage .bc-main.bc-main--wide {
  max-width: none;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.record-craft {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

.record-craft-sidebar {
  position: sticky;
  top: 0.75rem;
  align-self: start;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.35rem 1rem 2rem 0;
  margin-right: 0.25rem;
  border-right: 1px solid rgba(26, 26, 46, 0.08);
  scrollbar-gutter: stable;
}

.record-craft-sidebar__section {
  margin-bottom: 1rem;
}

.record-craft-sidebar__section--data {
  padding-top: 1rem;
  border-top: 1px solid rgba(26, 26, 46, 0.06);
}

.record-craft-sidebar__kicker {
  margin: 0 0 0.35rem;
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.record-craft-sidebar__hint {
  margin: 0 0 0.75rem;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--on-surface-mid);
}

.record-craft-nav {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.record-craft-nav__item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.45rem 0.5rem 0.35rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--duration-fast) var(--ease-standard);
  border: 1px solid transparent;
}

.record-craft-nav__item:hover {
  background: rgba(26, 26, 46, 0.04);
  border-color: rgba(26, 26, 46, 0.06);
}

.record-craft-nav__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.record-craft-nav__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.record-craft-nav__label {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--on-surface);
  line-height: 1.25;
}

.record-craft-nav__desc {
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--on-surface-subtle);
}

.record-craft-nav__chev {
  font-size: var(--text-lg);
  opacity: 0.35;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.record-craft-nav__item:hover .record-craft-nav__chev {
  opacity: 0.55;
}

.record-craft-data-templates {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.record-template-rail__head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.record-template-rail__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: 1.15rem;
}

.record-craft-template-btn {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  margin: 0;
  padding: 0.6rem 0.7rem;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-md);
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.record-craft-template-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 28%, var(--outline-variant));
  background: var(--surface-container-low);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.record-craft-template-btn--active {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--outline-variant));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-lowest));
  box-shadow: inset 3px 0 0 var(--primary);
}

.record-craft-template-btn--blank {
  border-style: dashed;
}

.record-craft-template-btn__icon {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.record-craft-template-btn__icon .material-symbols-outlined { font-size: 1.15rem; }

/* Color tokens for chip + icon background. Each variant pairs a soft tinted
   background with the matching saturated foreground so the rail scans as
   "kinds of records" at a glance, without ever looking like a stoplight. */
.record-craft-template-btn__icon--violet  { background: color-mix(in srgb, #706cfc 14%, transparent); color: #5852e0; }
.record-craft-template-btn__icon--amber   { background: color-mix(in srgb, #d97706 14%, transparent); color: #b45309; }
.record-craft-template-btn__icon--blue    { background: color-mix(in srgb, #2563eb 14%, transparent); color: #1d4ed8; }
.record-craft-template-btn__icon--green   { background: color-mix(in srgb, #2f9e8f 16%, transparent); color: #1f8074; }
.record-craft-template-btn__icon--rose    { background: color-mix(in srgb, #d6336c 14%, transparent); color: #b02756; }
.record-craft-template-btn__icon--neutral { background: var(--surface-container);                     color: var(--on-surface-subtle); }

.record-craft-template-btn__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.record-craft-template-btn__name {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--on-surface);
  line-height: 1.25;
}

.record-craft-template-btn__type {
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}
.record-craft-template-btn__type--violet  { color: #5852e0; }
.record-craft-template-btn__type--amber   { color: #b45309; }
.record-craft-template-btn__type--blue    { color: #1d4ed8; }
.record-craft-template-btn__type--green   { color: #1f8074; }
.record-craft-template-btn__type--rose    { color: #b02756; }
.record-craft-template-btn__type--neutral { color: var(--on-surface-subtle); }

.record-craft-template-btn__desc {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--on-surface-mid);
}

/* Group header inside the rail */
.record-template-rail__group {
  margin: 0.75rem 0 0.25rem;
  padding: 0 0.15rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}
.record-template-rail__group:first-of-type { margin-top: 0.4rem; }

.record-template-rail__details {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.record-template-rail__details > summary.record-template-rail__group {
  cursor: pointer;
  list-style: none;
}

.record-template-rail__details > summary.record-template-rail__group::-webkit-details-marker {
  display: none;
}

.record-template-rail__details > summary.record-template-rail__group::after {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  font-size: 1rem;
  font-weight: 400;
  line-height: 0;
  margin-left: 0.2rem;
  vertical-align: middle;
}

.record-template-rail__details[open] > summary.record-template-rail__group::after {
  content: "expand_less";
}

@media (prefers-reduced-motion: reduce) {
  .record-craft-template-btn { transition: none; }
  .record-craft-template-btn:hover { transform: none; }
}

/* Record workspace swap + skeleton. The Stimulus controller flips a class
   around an atomic DOM replace so the new content cross-fades in rather
   than popping. The skeleton is a shimmer placeholder that fills the
   shape while the apply_template POST round-trips. */
[data-record-template-target="workspace"] {
  transition: opacity 140ms ease-out;
}
[data-record-template-target="workspace"].record-craft-workspace--swapping {
  opacity: 0.0;
}

.record-skeleton {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.25rem 0;
}

.record-skeleton__card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.record-skeleton__title,
.record-skeleton__line {
  height: 0.7rem;
  border-radius: var(--radius-xs);
  background: linear-gradient(
    90deg,
    var(--surface-container) 0%,
    var(--surface-container-low) 50%,
    var(--surface-container) 100%
  );
  background-size: 200% 100%;
  animation: recordSkeletonShimmer 1.4s ease-in-out infinite;
}

.record-skeleton__title { width: 35%; height: 1rem; margin-bottom: 0.25rem; }
.record-skeleton__line                       { width: 90%; }
.record-skeleton__line--short                { width: 55%; }
.record-skeleton__line--full                 { width: 100%; height: 0.85rem; }

.record-skeleton--blank {
  background: var(--surface-lowest);
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  gap: 0.55rem;
}

@keyframes recordSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-record-template-target="workspace"] { transition: none; }
  .record-skeleton__title,
  .record-skeleton__line { animation: none; }
}

.record-craft-sidebar__manage {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.record-craft-sidebar__manage:hover {
  text-decoration: underline;
}

.record-template-rail__empty {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.record-template-rail__empty strong {
  color: var(--on-surface);
  font-size: var(--text-sm);
}

.record-craft-main {
  min-width: 0;
  padding-left: 0.5rem;
}

@media (max-width: 900px) {
  .record-craft {
    grid-template-columns: 1fr;
  }

  .record-craft-sidebar {
    position: relative;
    top: 0;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid rgba(26, 26, 46, 0.08);
    padding: 0 0 1rem;
    margin: 0 0 0.5rem;
  }

  .record-craft-main {
    padding-left: 0;
  }

  .record-craft-nav {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.35rem;
  }
}

.doc-paper {
  margin-top: -0.5rem;
}

.doc-paper__flash {
  margin-bottom: 1rem;
}

.doc-paper__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -0.25rem 1rem;
  padding: 0.5rem 0.35rem 0.85rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 97%, transparent) 70%, transparent 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.doc-paper__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--on-surface-mid, #555);
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem 0.35rem 0.25rem;
  margin-left: -0.35rem;
  transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}

.doc-paper__back .material-symbols-outlined {
  font-size: var(--text-lg);
  opacity: 0.85;
}

.doc-paper__back:hover {
  color: var(--on-surface, #1a1a2e);
  background: rgba(26, 26, 46, 0.05);
}

.doc-paper__bar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.doc-paper__save-status {
  flex: 1;
  min-width: 0;
  margin: 0 0.5rem;
  text-align: center;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--on-surface-subtle);
}

.doc-paper__save-status--idle {
  font-style: italic;
  opacity: 0.88;
}

.doc-paper__save-status--saving {
  color: var(--on-surface-mid);
  font-style: italic;
}

.doc-paper__save-status--saved {
  color: var(--on-surface-subtle);
}

.doc-paper__save-status--error {
  color: #b42318;
  font-weight: 500;
}

.doc-paper__retry {
  flex-shrink: 0;
}

.doc-paper__sheet {
  max-width: 680px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-xs);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 12px 40px rgba(15, 15, 40, 0.06);
  border: 1px solid rgba(26, 26, 46, 0.06);
  padding: 2.25rem 2.5rem 3rem;
  min-height: 55vh;
}

.doc-paper__sheet--readonly {
  padding-top: 2rem;
}

.doc-paper__display-title {
  font-family: var(--font-sans);
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--on-surface);
  margin: 0 0 0.75rem;
}

.doc-paper__read-meta {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  line-height: 1.5;
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.doc-paper__read-meta-sep {
  opacity: 0.45;
  user-select: none;
}

.doc-content--paper,
.doc-editor-wrap--paper .lexical-doc-editable {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-size: var(--text-md);
  line-height: 1.8;
  color: var(--on-surface);
}

.doc-content--paper h1,
.doc-content--paper h2,
.doc-editor-wrap--paper .lexical-h1,
.doc-editor-wrap--paper .lexical-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.doc-content--paper h1 {
  font-size: var(--text-xl);
  margin: 1.75rem 0 0.65rem;
}

.doc-content--paper h2 {
  font-size: var(--text-lg);
  margin: 1.5rem 0 0.5rem;
}

.doc-content--paper blockquote {
  border-left: 3px solid rgba(37, 57, 212, 0.22);
  padding-left: 1.1rem;
  margin: 1.1rem 0;
  color: var(--on-surface-mid);
  font-style: italic;
}

.record-structured-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.record-structured-form__intro {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--outline-variant);
}

.record-structured-form__intro span {
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.record-structured-form__intro strong {
  color: var(--on-surface);
  font-size: var(--text-lg);
  line-height: 1.25;
}

.record-structured-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.record-structured-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.record-structured-fieldset__legend {
  margin: 0 0 0.7rem;
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.record-structured-fieldset__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.record-structured-field--wide {
  grid-column: 1 / -1;
}

.record-structured-field__label {
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.record-structured-field__input {
  width: 100%;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-lowest);
  color: var(--on-surface);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.55;
  padding: 0.75rem 0.85rem;
}

.record-structured-field__input--number {
  min-height: 2.6rem;
  padding-right: 3.25rem;
}

.record-structured-field__input--textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.record-structured-field__number-wrap {
  position: relative;
  display: block;
}

.record-structured-field__number-wrap > span {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 800;
  transform: translateY(-50%);
  pointer-events: none;
}

.record-structured-field__input:focus {
  border-color: var(--focus-ring-border);
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
  outline: none;
}

.record-structured-form__empty {
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  padding: 1rem;
}

.record-structured-read {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.record-structured-read__section {
  border-bottom: 1px solid var(--outline-variant);
  padding-bottom: 1.15rem;
}

.record-structured-read__section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.record-structured-read__section h2 {
  color: var(--on-surface);
  font-size: var(--text-lg);
  line-height: 1.25;
  margin: 0 0 0.55rem;
}

.record-structured-read__section p {
  color: var(--on-surface-mid);
  font-size: var(--text-md);
  line-height: 1.65;
  margin: 0 0 0.6rem;
}

.record-structured-read__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
  margin: 0;
}

.record-structured-read__field {
  margin: 0;
}

.record-structured-read__field--wide {
  grid-column: 1 / -1;
}

.record-structured-read__field dt {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.record-structured-read__field dd {
  margin: 0.2rem 0 0;
  color: var(--on-surface-mid);
  font-size: var(--text-md);
  line-height: 1.55;
}

@media (max-width: 720px) {
  .record-structured-fieldset__grid,
  .record-structured-read__fields {
    grid-template-columns: 1fr;
  }
}

.doc-content--paper ul,
.doc-content--paper ol {
  padding-left: 1.35rem;
}

.doc-content--paper a {
  color: #2539d4;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.doc-form--paper {
  margin-top: 0;
}

.doc-title-input--paper {
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.doc-paper__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(26, 26, 46, 0.07);
}

.doc-form-meta--inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.doc-paper__date {
  min-width: 9.5rem;
}

.doc-editor-wrap--paper {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 0;
}

.lexical-doc-toolbar-wrap {
  position: relative;
  margin-bottom: 0.75rem;
}

.doc-editor-wrap--paper .lexical-doc-toolbar {
  position: sticky;
  top: 3.25rem;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.15rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(26, 26, 46, 0.06);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.45rem;
}

.lexical-doc-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lexical-link-popover {
  margin-top: 0.5rem;
  padding: 0.75rem 0.85rem;
  background: #fff;
  border: 1px solid rgba(26, 26, 46, 0.1);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(15, 15, 40, 0.08);
  max-width: 420px;
}

.lexical-link-popover__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  margin-bottom: 0.35rem;
}

.lexical-link-popover__input {
  width: 100%;
  margin-bottom: 0.65rem;
}

.lexical-link-popover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.lexical-action-text-embed {
  margin: 0.75rem 0;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(26, 26, 46, 0.12);
  background: rgba(248, 246, 242, 0.65);
}

.lexical-action-text-embed .attachment,
.lexical-action-text-embed .attachment-gallery {
  margin: 0;
}

body.theme-dark .lexical-link-popover {
  background: var(--surface-container-high, #2a2a34);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

body.theme-dark .lexical-action-text-embed {
  background: rgba(36, 36, 44, 0.5);
  border-color: rgba(255, 255, 255, 0.12);
}

.lexical-doc-toolbar__btn {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.3rem 0.45rem;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--on-surface-mid);
  cursor: pointer;
  line-height: 1.2;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.lexical-doc-toolbar__btn:hover {
  background: rgba(37, 57, 212, 0.08);
  color: var(--on-surface);
}

.lexical-doc-toolbar__sep {
  width: 1px;
  height: 1rem;
  background: rgba(26, 26, 46, 0.12);
  margin: 0 0.15rem;
  flex-shrink: 0;
}

.lexical-doc-editor {
  position: relative;
}

.lexical-doc-editable-shell {
  position: relative;
}

.lexical-doc-editable {
  min-height: 420px;
  padding: 0.25rem 0 1rem;
  outline: none;
}

/* Intentional: rich-text editing surface; the containing card owns the ring. */
.lexical-doc-editable:focus {
  outline: none;
}

.lexical-doc-placeholder {
  position: absolute;
  top: 0.25rem;
  left: 0;
  pointer-events: none;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--on-surface-subtle);
  opacity: 0.45;
}

.doc-editor-wrap--paper .lexical-h1 {
  font-size: var(--text-xl);
  margin: 0.35rem 0 0.25rem;
}

.doc-editor-wrap--paper .lexical-h2 {
  font-size: var(--text-lg);
  margin: 0.3rem 0 0.2rem;
}

.doc-editor-wrap--paper .lexical-quote {
  border-left: 3px solid rgba(37, 57, 212, 0.22);
  padding-left: 1rem;
  margin: 0.65rem 0;
  color: var(--on-surface-mid);
  font-style: italic;
}

.doc-editor-wrap--paper .lexical-link {
  color: #2539d4;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.doc-editor-wrap--paper .lexical-ul,
.doc-editor-wrap--paper .lexical-ol {
  padding-left: 1.35rem;
  margin: 0.4rem 0;
}

.doc-editor-wrap--paper .lexical-p {
  margin: 0.35rem 0;
}

.doc-editor-tip--paper {
  padding: 0 0 0.75rem;
  margin: 0;
  max-width: 36rem;
}

.doc-form-actions--paper-mobile {
  display: none;
}

.record-template-picker--paper {
  margin-bottom: 1.25rem;
  background: rgba(248, 246, 242, 0.9);
}

@media (max-width: 640px) {
  .doc-paper__sheet {
    padding: 1.5rem 1.25rem 2.25rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: 0 8px 28px rgba(15, 15, 40, 0.06);
  }

  .doc-paper__bar-actions .doc-paper__cancel {
    display: none;
  }

  .doc-form-actions--paper-mobile {
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin: 1rem -1rem -1rem;
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(26, 26, 46, 0.08);
    box-shadow: 0 -4px 24px rgba(15, 15, 40, 0.06);
    justify-content: flex-end;
  }

  .bc-main--paper .doc-form-actions--paper-mobile {
    margin-left: -1rem;
    margin-right: -1rem;
  }
}

body.theme-dark .bc-main--paper {
  background: linear-gradient(180deg, rgba(28, 28, 36, 0.95) 0%, rgba(22, 22, 30, 0.5) 40%, transparent 70%);
}

body.theme-dark .bc-main--record-craft {
  background: transparent;
}

body.theme-dark .doc-paper__bar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 96%, transparent) 65%, transparent 100%);
}

body.theme-dark .doc-paper__back {
  color: var(--on-surface-mid, #aaa);
}

body.theme-dark .doc-paper__back:hover {
  color: var(--on-surface, #f0f0f5);
  background: rgba(255, 255, 255, 0.06);
}

body.theme-dark .doc-paper__save-status--error {
  color: #fca5a5;
}

body.theme-dark .doc-paper__sheet {
  background: var(--surface-container-high, #2a2a34);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 16px 48px rgba(0, 0, 0, 0.35);
}

body.theme-dark .doc-paper__meta-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .record-craft-sidebar {
  border-right-color: rgba(255, 255, 255, 0.1);
}

body.theme-dark .record-craft-sidebar__section--data {
  border-top-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .record-craft-nav__item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .record-craft-template-btn {
  background: var(--surface-container-low, #2a2a32);
  border-color: rgba(255, 255, 255, 0.1);
}

body.theme-dark .record-craft-template-btn:hover {
  background: var(--surface-container, #32323c);
}

body.theme-dark .record-craft-template-btn--active {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-container-low, #2a2a32));
}

body.theme-dark .doc-content--paper a {
  color: #8ab4ff;
}

body.theme-dark .doc-editor-wrap--paper .lexical-doc-toolbar {
  background: rgba(36, 36, 44, 0.94);
  border-color: rgba(255, 255, 255, 0.1);
}

body.theme-dark .doc-editor-wrap--paper .lexical-doc-toolbar__btn {
  color: var(--on-surface-mid, #aaa);
}

body.theme-dark .doc-editor-wrap--paper .lexical-doc-toolbar__btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-surface, #e8e8ee);
}

body.theme-dark .doc-editor-wrap--paper .lexical-doc-toolbar__sep {
  background: rgba(255, 255, 255, 0.15);
}

body.theme-dark .doc-editor-wrap--paper .lexical-doc-editable {
  color: var(--on-surface, #e8e8ee);
}

body.theme-dark .doc-editor-wrap--paper .lexical-doc-placeholder {
  color: var(--on-surface-subtle);
}

body.theme-dark .doc-editor-wrap--paper .lexical-link {
  color: #8ab4ff;
}

body.theme-dark .record-template-picker--paper {
  background: rgba(36, 36, 44, 0.6);
}

@media (max-width: 640px) {
  body.theme-dark .doc-form-actions--paper-mobile {
    background: rgba(36, 36, 44, 0.96);
    border-top-color: rgba(255, 255, 255, 0.1);
  }
}

/* ─── Record Template Picker ─── */
.record-tools-nav {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0 1rem;
  flex-wrap: wrap;
}

.record-tools-nav__link {
  font-size: var(--text-sm, 0.875rem);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full, 100px);
  background: var(--surface-container, #f0eee8);
  color: var(--on-surface-mid, #555);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-standard);
}

.record-tools-nav__link:hover {
  background: var(--surface-container-high, #e5e3dc);
  color: var(--on-surface, #1a1a2e);
}

.record-template-picker {
  background: var(--surface-container, #f8f6f0);
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: var(--radius-md, 12px);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.record-template-picker__header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.record-template-picker__hint {
  font-size: var(--text-xs, 0.8rem);
  color: var(--on-surface-subtle, #888);
}

.record-template-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
}

.record-template-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.65rem 0.85rem;
  background: #fff;
  border: 1px solid rgba(26, 26, 46, 0.1);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.record-template-btn:hover {
  border-color: var(--primary, #3b6dd6);
  box-shadow: 0 0 0 1px var(--primary, #3b6dd6);
}

.record-template-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.record-template-btn__name {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  color: var(--on-surface, #1a1a2e);
}

.record-template-btn__desc {
  font-size: var(--text-xs, 0.8rem);
  color: var(--on-surface-subtle, #888);
  line-height: 1.4;
}

.record-template-picker__footer {
  margin-top: 0.75rem;
}

.doc-form-meta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.form-input--sm {
  padding: 0.35rem 0.5rem;
  font-size: var(--text-sm, 0.875rem);
}

/* ─── Section Builder ─── */
.record-template-builder {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
}

.record-template-builder__hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0.9rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--outline-variant);
  margin-bottom: 1.25rem;
}

.record-template-builder__eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: var(--radius-full);
  padding: 0.2rem 0.6rem;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-container-low));
  color: var(--on-surface-mid);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.record-template-builder__title {
  margin: 0;
  color: var(--on-surface);
  font-size: clamp(2rem, 3vw, 2.7rem);
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.record-template-builder__lede {
  margin: 0.55rem 0 0;
  max-width: 44rem;
  color: var(--on-surface-mid);
  font-size: var(--text-base);
  line-height: 1.55;
}

.record-template-builder__preview {
  width: min(100%, 38rem);
  min-width: 0;
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-sm);
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
}

.record-template-builder__preview .material-symbols-outlined {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-container-low));
}

.record-template-builder__preview strong {
  color: var(--on-surface);
  font-size: var(--text-base);
}

.record-template-builder__summary-count {
  width: fit-content;
  margin-top: 0.35rem;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-container-low));
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 850;
}

.record-template-builder__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.15rem;
}

.record-template-builder__summary-pill,
.record-template-builder__empty-summary {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--surface-container);
  color: var(--on-surface-mid);
  font-size: 0.72rem;
  font-weight: 650;
}

.record-template-builder__empty-summary {
  color: var(--on-surface-subtle);
}

.record-template-builder__grid {
  display: grid;
  grid-template-columns: minmax(20rem, 0.82fr) minmax(28rem, 1.18fr);
  gap: 1rem;
  align-items: start;
}

.record-template-builder__panel {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.record-template-builder__panel--sections {
  padding-bottom: 1rem;
}

.record-template-builder__panel-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--outline-variant);
}

.record-template-builder__panel-heading > .material-symbols-outlined {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-container-low));
}

.record-template-builder__panel-heading h2 {
  margin: 0;
  color: var(--on-surface);
  font-size: var(--text-lg);
  font-weight: 850;
  letter-spacing: -0.015em;
}

.record-template-builder__panel-heading p {
  margin: 0.2rem 0 0;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.record-template-builder__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.form-grid {
  display: grid;
  gap: 1rem;
}

.form-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.template-preset-picker {
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--outline-variant);
}

.template-preset-picker__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.template-preset-picker__head span {
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 850;
}

.template-preset-picker__head small {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  text-align: right;
}

.template-preset-picker__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.template-preset-card {
  min-height: 3.2rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-lowest);
  color: var(--on-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.template-preset-card:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-lowest));
  border-color: color-mix(in srgb, var(--primary) 28%, var(--outline-variant));
}

.template-preset-card .material-symbols-outlined {
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-container-low));
  color: var(--primary);
  font-size: 1.05rem;
}

.template-preset-card strong {
  overflow: hidden;
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-builder {
  background: var(--surface-container, #f8f6f0);
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: var(--radius-md, 12px);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

.section-builder__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.section-builder--template {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.section-builder__list--cards {
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin: 0;
}

.section-builder__group {
  display: grid;
  gap: 0.45rem;
}

.section-builder__group-title {
  color: var(--on-surface-subtle);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-builder__group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.section-builder__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

.section-builder__item:hover {
  background: rgba(26, 26, 46, 0.04);
}

.section-builder__item--card {
  align-items: flex-start;
  min-height: 6.8rem;
  padding: 0.85rem;
  border: 1px solid var(--outline-variant);
  background: var(--surface-lowest);
  border-radius: var(--radius-md);
}

.section-builder__item--card:hover,
.section-builder__item--active {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-lowest));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--outline-variant));
}

.section-builder__item--card input {
  margin-top: 0.18rem;
  accent-color: var(--primary);
}

.section-builder__content {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.section-builder__label {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 750;
  color: var(--on-surface, #1a1a2e);
}

.section-builder__desc {
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.section-builder__fields {
  color: var(--on-surface-subtle);
  font-size: 0.68rem;
  line-height: 1.35;
  margin-top: 0.1rem;
}

.record-field-builder {
  display: grid;
  gap: 0.85rem;
}

.record-field-builder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 4%, var(--surface-container-lowest));
}

.record-field-builder__head > div {
  display: grid;
  gap: 0.15rem;
}

.record-field-builder__head strong {
  color: var(--on-surface);
  font-size: var(--text-base);
  font-weight: 850;
}

.record-field-builder__head span {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  line-height: 1.35;
}

.record-field-builder__list {
  display: grid;
  gap: 0.75rem;
}

.record-field-builder__row {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-sm);
}

.record-field-builder__main {
  display: grid;
  grid-template-columns: minmax(12rem, 1.1fr) minmax(9rem, 0.7fr) minmax(12rem, 1fr);
  gap: 0.65rem;
}

.record-field-builder__sub {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto;
  gap: 0.65rem;
  align-items: end;
}

.record-field-builder label {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.record-field-builder label > span {
  color: var(--on-surface-subtle);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.record-field-builder__required {
  min-height: 2.6rem;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.45rem !important;
  padding: 0 0.75rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-container-lowest);
}

.record-field-builder__required input {
  accent-color: var(--primary);
}

.record-field-builder__remove {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-lowest);
  color: var(--on-surface-subtle);
  cursor: pointer;
}

.record-field-builder__remove:hover {
  color: #b42318;
  border-color: color-mix(in srgb, #b42318 35%, var(--outline-variant));
  background: color-mix(in srgb, #b42318 5%, var(--surface-lowest));
}

@media (max-width: 900px) {
  .record-field-builder__main,
  .record-field-builder__sub {
    grid-template-columns: 1fr;
  }

  .record-field-builder__required {
    width: fit-content;
  }
}

.form-hint {
  font-size: var(--text-xs, 0.8rem);
  color: var(--on-surface-subtle, #888);
  margin: 0.25rem 0 0;
}

.section-heading {
  font-size: var(--text-md, 1rem);
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
  color: var(--on-surface, #1a1a2e);
}

.doc-note-card--readonly {
  cursor: default;
}

/* ─── SHEETS (Spreadsheet Grid) ─── */
.sheet-grid-wrap {
  overflow-x: auto;
  border: 1px solid rgba(26, 26, 46, 0.08);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 1px 4px rgba(10, 10, 30, 0.04);
}

.sheet-table {
  width: 100%;
  border-collapse: collapse;
}

.sheet-table thead th {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  padding: 0.6rem 0.75rem;
  text-align: left;
  background: rgba(240, 236, 250, 0.4);
  border-bottom: 1px solid rgba(26, 26, 46, 0.08);
  white-space: nowrap;
  user-select: none;
}

.sheet-cell {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid rgba(26, 26, 46, 0.04);
  border-right: 1px solid rgba(26, 26, 46, 0.04);
  color: var(--on-surface);
  cursor: cell;
  min-width: 120px;
  height: 38px;
  vertical-align: middle;
  transition: background var(--duration-fast) var(--ease-standard);
}

.sheet-cell:hover {
  background: rgba(37, 57, 212, 0.03);
}

.sheet-cell:last-of-type {
  border-right: none;
}

.sheet-check {
  font-size: var(--text-md);
}

.sheet-cell-input {
  width: 100%;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--on-surface);
  background: rgba(37, 57, 212, 0.06);
  padding: 0.4rem 0.5rem;
  margin: -0.4rem -0.75rem;
  width: calc(100% + 1.5rem);
  height: 38px;
  box-sizing: border-box;
  border-radius: 0;
}

.sheet-cell-input:focus {
  background: var(--focus-ring-glow);
  box-shadow: inset 0 0 0 2px var(--focus-ring-color);
}

.sheet-actions-th {
  width: 36px;
}

.sheet-actions-td {
  width: 36px;
  text-align: center;
  border-bottom: 1px solid rgba(26, 26, 46, 0.04);
}

.sheet-row-delete {
  background: none;
  border: none;
  color: var(--on-surface-subtle);
  font-size: var(--text-md);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
  padding: 0.25rem;
}

tr:hover .sheet-row-delete {
  opacity: 1;
}

.sheet-row-delete:hover {
  color: #dc2626;
}

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

/* Sheet header */
.sheet-title-form {
  margin: 0;
}

.sheet-title-input {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--on-surface);
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  width: 100%;
  letter-spacing: -0.02em;
}

.sheet-title-input:focus {
  background: rgba(37, 57, 212, 0.04);
  border-radius: var(--radius-xs);
  padding: 0.15rem 0.35rem;
  margin: -0.15rem -0.35rem;
}

.sheet-header-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-shrink: 0;
}

.sheet-action-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(26, 26, 46, 0.1);
  background: rgba(255, 255, 255, 0.6);
  color: var(--on-surface);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
  display: inline-flex;
  align-items: center;
}

.sheet-action-btn:hover {
  background: rgba(37, 57, 212, 0.06);
  border-color: rgba(37, 57, 212, 0.2);
}

.sheet-action-btn--danger {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.15);
}

.sheet-action-btn--danger:hover {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.3);
}

/* Editable column headers */
.sheet-col-label-input {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  width: 100%;
  min-width: 60px;
}

.sheet-col-label-input:focus {
  color: var(--on-surface);
  background: rgba(37, 57, 212, 0.06);
  border-radius: var(--radius-xs);
  padding: 0.15rem 0.3rem;
  margin: -0.15rem -0.3rem;
}

/* Portfolio evidence */
.portfolio-evidence-group {
  margin-bottom: 1.5rem;
}

.portfolio-evidence-subject {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--on-surface);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.portfolio-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.portfolio-evidence-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(28, 29, 26, 0.04);
  position: relative;
}

.portfolio-evidence-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: var(--surface-container-low);
}

.portfolio-evidence-info {
  padding: 0.6rem 0.75rem;
}

.portfolio-evidence-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--on-surface);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-evidence-meta {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  display: block;
  margin-top: 0.15rem;
}

.portfolio-evidence-type {
  font-weight: 600;
  text-transform: capitalize;
}

.portfolio-evidence-link {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  color: var(--primary);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.portfolio-evidence-card:hover .portfolio-evidence-link {
  opacity: 1;
}

/* Co-op resource folders */
.coop-resources-categorized {
  display: flex;
  flex-direction: column;
}

.coop-resource-category {
  border-bottom: 1px solid var(--outline-variant);
}

.coop-resource-category:last-child { border-bottom: none; }

.coop-resource-category summary {
  list-style: none;
}
.coop-resource-category summary::-webkit-details-marker { display: none; }

.coop-resource-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--on-surface-mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.coop-resource-category-header:hover {
  background: var(--surface-container-low);
}

.coop-resource-category-count {
  font-size: var(--text-xs);
  background: var(--surface-container);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-full);
  color: var(--on-surface-subtle);
}

/* Google Drive Picker */
.gdp-trigger {
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  color: var(--primary);
  transition: border-color var(--duration-base) var(--ease-standard);
}

.gdp-trigger:hover {
  border-color: var(--primary);
}

.gdp-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  background: var(--surface-lowest);
  border: 1px solid var(--surface-container);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(28, 29, 26, 0.12);
  z-index: 100;
  max-height: 260px;
  overflow-y: auto;
}

.gdp-dropdown[hidden] { display: none; }

.gdp-dropdown--up {
  top: auto;
  bottom: calc(100% + 0.35rem);
}

.gdp-list {
  display: flex;
  flex-direction: column;
}

.gdp-file {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--surface-container-low);
  transition: background var(--duration-fast) var(--ease-standard);
  width: 100%;
  font-family: inherit;
}

.gdp-file:last-child { border-bottom: none; }
.gdp-file:hover { background: var(--surface-container-low); }

.gdp-file-icon {
  font-size: var(--text-lg);
  flex-shrink: 0;
}

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

.gdp-file-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gdp-file-meta {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  text-transform: capitalize;
}

.gdp-loading, .gdp-empty {
  padding: 1.25rem;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

.gdp-empty a {
  color: var(--primary);
  font-weight: 600;
}

.gdp-providers-row {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.gdp-provider-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-sm);
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--outline-variant);
  background: var(--surface);
  color: var(--on-surface-mid);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.gdp-provider-btn:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.gdp-provider-btn--active {
  background: var(--primary-container);
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
}

/* ─── FILE VIEWER ─── */
.viewer {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 4rem);
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(28, 29, 26, 0.04);
}

.viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--surface-container-low);
  flex-shrink: 0;
}

.viewer-header-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.viewer-back {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--on-surface-subtle);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: var(--radius-xs);
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}

.viewer-back:hover {
  color: var(--on-surface);
  background: var(--surface-container-low);
}

.viewer-filename {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--on-surface);
}

.viewer-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.viewer-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-sm);
}

.viewer-content {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
}

.viewer-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  width: 100%;
  height: 100%;
}

.viewer-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-xs);
}

.viewer-pdf {
  width: 100%;
  height: 100%;
  border: none;
}

.viewer-video {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
}

.viewer-video-player {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
}

.viewer-unsupported {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem;
  color: var(--on-surface-subtle);
  background: var(--surface);
  border-radius: var(--radius-lg);
  text-align: center;
}

/* ─── NOTIFICATIONS ─── */

/* Bell icon in header */
.notif-bell {
  position: relative;
}

.notif-bell-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  color: var(--on-surface-subtle);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}

.notif-bell-btn:hover {
  color: var(--on-surface);
  background: var(--surface-container-low);
}

.notif-bell-btn .material-symbols-outlined {
  font-size: var(--text-xl);
}

.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--error, #dc2626);
  color: white;
  font-size: var(--text-xs);
  font-weight: 800;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.notif-badge[hidden] { display: none; }

/* Dropdown */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 340px;
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  z-index: 500;
  overflow: hidden;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.notif-dropdown[hidden] { display: none; }

.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.notif-mark-all-read {
  min-height: 2rem;
  padding: 0.25rem 0.65rem;
  font-size: var(--text-xs);
  box-shadow: none;
}

@media (max-width: 768px) {
  .notif-mark-all-read {
    min-height: var(--mobile-tap-min);
    padding: 0.5rem 0.8rem;
    font-size: var(--text-sm);
  }
}

.notif-dropdown-list {
  max-height: 320px;
  overflow-y: auto;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
  border-bottom: 1px solid var(--surface-container-low);
}

.notif-item:last-child { border-bottom: none; }

.notif-item:hover {
  background: var(--surface-container-low);
}

.notif-item--unread {
  background: var(--primary-container);
  background: rgba(232, 180, 74, 0.08);
}

.notif-item-icon {
  font-size: var(--text-lg);
  color: var(--primary);
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.notif-item-content {
  flex: 1;
  min-width: 0;
}

.notif-item-text {
  font-size: var(--text-sm);
  color: var(--on-surface);
  display: block;
  line-height: 1.4;
}

.notif-item-time {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.notif-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
}

.notif-dropdown-footer {
  display: block;
  text-align: center;
  padding: 0.6rem 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  border-top: 1px solid var(--surface-container-low);
}

.notif-dropdown-footer:hover {
  background: var(--surface-container-low);
}

/* Notifications page */
.notif-page-list {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(28, 29, 26, 0.04);
  overflow: hidden;
}

.notif-page-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--surface-container-low);
}

.notif-page-item:last-child { border-bottom: none; }

.notif-page-item--unread {
  background: rgba(232, 180, 74, 0.06);
}

.notif-page-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-container-low);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-page-icon {
  font-size: var(--text-lg);
  color: var(--primary);
}

.notif-page-content {
  flex: 1;
  min-width: 0;
}

.notif-page-text {
  font-size: var(--text-base);
  color: var(--on-surface);
  line-height: 1.4;
}

.notif-page-meta {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  margin-top: 0.15rem;
}

.notif-page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

.notif-page-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
  text-align: center;
}

/* ═══ DAILY AGENDA ═══ */
.daily-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.daily-quick-tile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--on-surface);
  text-decoration: none;
  font-size: var(--text-base);
  font-weight: 500;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.daily-quick-tile:hover {
  background: var(--surface-container-low);
  border-color: var(--outline);
  transform: translateY(-1px);
}
.daily-quick-icon {
  font-size: var(--text-xl);
  color: var(--primary);
}
.daily-quick-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-catch-up-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--surface-lowest), var(--surface-container-low));
  box-shadow: var(--shadow-sm);
}
.planner-catch-up-eyebrow {
  margin-bottom: 0.2rem;
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.planner-catch-up-card h2 {
  margin: 0;
  color: var(--on-surface);
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}
.planner-catch-up-card p {
  margin: 0.25rem 0 0;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
}
.planner-catch-up-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.planner-catch-up-actions form { margin: 0; }
.reschedule-preview-help {
  margin: 0.8rem 0 1rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.reschedule-preview-form {
  display: block;
}
.reschedule-preview-item--selectable {
  cursor: pointer;
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.reschedule-preview-check {
  align-self: center;
}
@media (max-width: 720px) {
  .planner-catch-up-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .reschedule-preview-item--selectable {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .reschedule-preview-dates {
    grid-column: 2;
  }
}

.quick-log-intro-card {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-lowest);
}
.quick-log-intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--primary) 12%, white);
  color: var(--primary);
  flex-shrink: 0;
}
.quick-log-intro-card strong {
  display: block;
  color: var(--on-surface);
  font-weight: 800;
}
.quick-log-intro-card p {
  margin: 0.2rem 0 0;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.quick-log-options {
  display: grid;
  gap: 0.7rem;
  margin: 1rem 0;
}
.quick-log-option {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.8rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
}
.quick-log-option input {
  margin-top: 0.2rem;
}
.quick-log-option span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.quick-log-option strong {
  color: var(--on-surface);
  font-size: var(--text-sm);
}
.quick-log-option em {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-style: normal;
  line-height: 1.35;
}

.page-header--daily-loop {
  align-items: center;
}
.daily-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.daily-loop-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: stretch;
  margin-bottom: 1.5rem;
  padding: 1.1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--surface-lowest), var(--surface-container-low));
  box-shadow: var(--shadow-sm);
}
.daily-loop-card__main {
  min-width: 0;
}
.daily-loop-eyebrow {
  margin-bottom: 0.25rem;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}
.daily-loop-title {
  margin: 0;
  color: var(--on-surface);
  font-size: var(--text-xl);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.daily-loop-desc {
  max-width: 60ch;
  margin: 0.4rem 0 0;
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
}
.daily-loop-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}
.daily-loop-actions form {
  margin: 0;
}
.daily-loop-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 0.6rem;
  min-width: 310px;
}
.daily-loop-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.75rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-lowest) 82%, transparent);
}
.daily-loop-stat__value {
  color: var(--on-surface);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.daily-loop-stat__label {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 780px) {
  .daily-loop-card {
    grid-template-columns: 1fr;
  }
  .daily-loop-stats {
    min-width: 0;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .daily-loop-stats {
    grid-template-columns: 1fr;
  }
}

.daily-child-section {
  margin-bottom: 2.5rem;
}
.daily-child-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.daily-child-name {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--on-surface);
  margin: 0;
}
.daily-group {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}
.daily-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin-bottom: 0.55rem;
}
.daily-group-add {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--primary);
  text-decoration: none;
}
.daily-group-add:hover { text-decoration: underline; }
.daily-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.daily-list-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.25rem;
  border-radius: var(--radius-sm);
}
.daily-list-item:hover { background: var(--surface-container-low); }
.daily-check-form { display: inline-flex; margin: 0; }
.daily-check {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--outline);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.daily-check .material-symbols-outlined { font-size: var(--text-base); color: #fff; }
.daily-check--done {
  background: var(--primary);
  border-color: var(--primary);
}
.daily-item-body {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: var(--on-surface);
  font-size: var(--text-base);
}
.daily-item-body--done .daily-item-title {
  text-decoration: line-through;
  color: var(--on-surface-subtle);
}
.daily-item-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.daily-item-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  color: #fff;
}
.daily-item-meta {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin-left: auto;
}
.daily-empty {
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  padding: 0.3rem 0.25rem;
}

.report-readiness-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-sm);
}
.report-readiness-eyebrow {
  margin-bottom: 0.25rem;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}
.report-readiness-title {
  margin: 0;
  color: var(--on-surface);
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.report-readiness-desc {
  margin: 0.45rem 0 0;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.report-readiness-meter {
  overflow: hidden;
  height: 0.5rem;
  margin-top: 1rem;
  border-radius: var(--radius-full);
  background: var(--surface-container-highest);
}
.report-readiness-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}
.report-readiness-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.report-readiness-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
}
.report-readiness-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: var(--radius-full);
  background: var(--surface-container-high);
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 800;
}
.report-readiness-item--complete .report-readiness-icon {
  background: color-mix(in srgb, var(--primary) 14%, white);
  color: var(--primary);
}
.report-readiness-item--missing .report-readiness-icon {
  background: color-mix(in srgb, var(--error, #b3261e) 12%, white);
  color: var(--error, #b3261e);
}
.report-readiness-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.report-readiness-item__body strong {
  color: var(--on-surface);
  font-size: var(--text-sm);
}
.report-readiness-item__body span {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  line-height: 1.35;
}
.report-readiness-action {
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.report-readiness-action:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .report-readiness-card {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .report-readiness-item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .report-readiness-action {
    grid-column: 2;
    justify-self: start;
  }
}

/* ------------------------------------------------------------------------
 * Portfolio unified feed
 * ------------------------------------------------------------------------ */
.page-header--portfolio {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.records-page {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.records-page__header {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--outline-variant);
}
.records-page__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.45rem;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.portfolio-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.portfolio-new-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #fff;
  font-weight: 750;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.portfolio-new-btn:hover { opacity: 0.9; }
.portfolio-new-btn__icon {
  font-size: 18px !important;
  line-height: 1;
}

.records-filter-panel {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-lowest) 82%, transparent);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
}
.records-filter-panel__summary {
  min-height: 3rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0.85rem;
  cursor: pointer;
  list-style: none;
}
.records-filter-panel__summary::-webkit-details-marker {
  display: none;
}
.records-filter-panel__summary-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 750;
}
.records-filter-panel__summary-copy .material-symbols-outlined {
  font-size: 18px;
  color: var(--on-surface-mid);
}
.records-filter-panel__active {
  min-width: 0;
  flex: 1;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.records-filter-panel__chevron {
  color: var(--on-surface-subtle);
  font-size: 20px;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.records-filter-panel[open] .records-filter-panel__chevron {
  transform: rotate(180deg);
}

.portfolio-filters {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  padding: 0 0.85rem 0.85rem;
}
.portfolio-filter-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.portfolio-filter-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle);
  font-weight: 600;
  padding-top: 0;
  min-width: 48px;
}
.portfolio-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.portfolio-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0 0.65rem;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
  border: 1px solid var(--outline-variant);
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
  white-space: nowrap;
}
.portfolio-pill:hover {
  background: var(--surface-container-low);
}
.portfolio-pill--active {
  background: var(--on-surface);
  border-color: var(--on-surface);
  color: var(--surface-lowest);
}
.portfolio-pill--active:hover { background: var(--on-surface); opacity: 0.92; }
.portfolio-pill-icon {
  font-size: var(--text-md) !important;
  line-height: 1;
}

.portfolio-filter-more {
  position: relative;
}

.portfolio-filter-more > summary {
  cursor: pointer;
  list-style: none;
}

.portfolio-filter-more > summary::-webkit-details-marker {
  display: none;
}

.portfolio-filter-more[open] .portfolio-pill--more {
  background: var(--surface-container-high);
}

.portfolio-filter-more__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  left: 0;
  display: grid;
  min-width: 13rem;
  padding: 0.35rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-lg);
}

.portfolio-filter-more__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-md);
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}

.portfolio-filter-more__item:hover,
.portfolio-filter-more__item--active {
  background: var(--surface-container);
}
.portfolio-pill-count {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
}
.portfolio-pill--active .portfolio-pill-count {
  background: rgba(255, 255, 255, 0.22);
}

.portfolio-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.records-feed {
  overflow: hidden;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-sm);
}

/* ─── Records hub ─── */
.records-hub {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.records-hub__back {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--on-surface-mid);
  text-decoration: none;
  margin-bottom: 0.35rem;
}

.records-hub__back:hover { color: var(--on-surface); }

.records-hub__back .material-symbols-outlined {
  font-size: 18px;
  margin-left: -0.25rem;
}

.records-hub__all {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--on-surface);
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}

.records-hub__all:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--outline-variant));
  box-shadow: var(--shadow-md);
}

.records-hub__all-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  flex-shrink: 0;
}

.records-hub__all-icon .material-symbols-outlined { font-size: 24px; }

.records-hub__all-copy {
  flex: 1;
  min-width: 0;
}

.records-hub__all-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: -0.01em;
}

.records-hub__all-sub {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  margin-top: 0.1rem;
}

.records-hub__all-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  flex-shrink: 0;
}

.records-hub__all-count strong {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--on-surface);
}

.records-hub__all-count span {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.records-hub__all-chevron {
  color: var(--on-surface-subtle);
  font-size: 22px;
  flex-shrink: 0;
}

.records-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
}

.records-hub__category {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.records-hub__category-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--outline-variant);
}

.records-hub__category-icon {
  font-size: 22px;
  color: var(--on-surface-mid);
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.records-hub__category-title-wrap {
  flex: 1;
  min-width: 0;
}

.records-hub__category-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--on-surface);
  letter-spacing: -0.01em;
}

.records-hub__category-desc {
  margin: 0.15rem 0 0;
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
  line-height: 1.45;
}

.records-hub__category-count {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  border-radius: var(--radius-full);
  padding: 0.15rem 0.55rem;
  letter-spacing: 0.02em;
  margin-top: 0.15rem;
}

.records-hub__kind-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.records-hub__kind {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-md);
  color: var(--on-surface);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard);
}

.records-hub__kind:hover {
  background: var(--surface-container-low);
}

.records-hub__kind-icon {
  font-size: 18px;
  color: var(--on-surface-mid);
}

.records-hub__kind-label {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
}

.records-hub__kind-count {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  font-weight: 600;
}

.records-hub__kind--empty .records-hub__kind-label,
.records-hub__kind--empty .records-hub__kind-count,
.records-hub__kind--empty .records-hub__kind-icon {
  opacity: 0.55;
}

.records-hub__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 0.6rem 0.85rem;
  align-self: flex-start;
}

.records-hub__hint .material-symbols-outlined {
  font-size: 18px;
  color: var(--on-surface-mid);
}

.records-hub__hint-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.records-hub__hint-link:hover { text-decoration: underline; }
.portfolio-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--outline-variant);
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  transition: background var(--duration-base) var(--ease-standard);
}
.portfolio-item:last-child {
  border-bottom: 0;
}
.portfolio-item:hover {
  background: var(--surface-container-low);
}
.portfolio-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.1rem;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
  flex-shrink: 0;
}
.portfolio-item__icon .material-symbols-outlined {
  font-size: 18px;
}
.portfolio-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.portfolio-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}
.portfolio-item__kind {
  font-weight: 750;
  color: var(--on-surface-mid);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}
.portfolio-item__child {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.portfolio-item__meta {
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}
.portfolio-item__time {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}
.portfolio-item__title {
  font-size: var(--text-md);
  font-weight: 750;
  color: var(--on-surface);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.portfolio-item__preview {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.portfolio-load-more {
  display: flex;
  justify-content: center;
  margin: 1.25rem 0 0.5rem;
}
.portfolio-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.25rem;
  border-radius: var(--radius-full);
  background: var(--surface-container);
  color: var(--on-surface);
  font-size: var(--text-base);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border, #e9e4d8);
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.portfolio-load-more-btn:hover {
  background: var(--surface-hover, #ece9e2);
  border-color: var(--primary);
}

@media (max-width: 640px) {
  .records-page {
    max-width: none;
  }
  .page-header--portfolio {
    gap: 0.85rem;
  }

  .portfolio-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .portfolio-export-btn,
  .portfolio-new-btn {
    justify-content: center;
    min-height: 2.75rem;
  }

  .portfolio-filters {
    gap: 0.7rem;
    margin-block: 0;
  }

  .portfolio-filter-row {
    display: block;
  }

  .portfolio-filter-label {
    display: block;
    min-width: 0;
    padding: 0 0 0.35rem;
  }

  .portfolio-pill-group {
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .portfolio-pill-group::-webkit-scrollbar {
    display: none;
  }

  .portfolio-pill {
    min-height: 2rem;
  }
}

/* ------------------------------------------------------------------------
 * Generic grid/list view toggle
 * ------------------------------------------------------------------------ */
.view-toggle {
  display: inline-flex;
  border-radius: var(--radius-sm);
  background: var(--surface-container);
  padding: 2px;
  border: 1px solid #d4ccb8;
}
.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm);
  color: var(--on-surface-subtle);
  text-decoration: none;
  line-height: 1;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.view-toggle-btn .material-symbols-outlined { font-size: var(--text-lg); }
.view-toggle-btn:hover { color: var(--on-surface); }
.view-toggle-btn--active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(28, 20, 8, 0.08);
}

/* ------------------------------------------------------------------------
 * Subjects — list view
 * ------------------------------------------------------------------------ */
.subject-list {
  display: flex;
  flex-direction: column;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.subject-list__head,
.subject-list__row {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) minmax(170px, 1fr) 100px 120px 110px 180px;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
}
.subject-list__head {
  background: var(--surface-container);
  border-bottom: 1px solid var(--outline-variant);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
}
.subject-list__row + .subject-list__row,
.subject-list__head + .subject-list__row {
  border-top: 1px solid var(--outline-variant);
}
.subject-list__row:hover { background: var(--surface-container-low); }
.subject-list__col--name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.subject-list__name {
  font-weight: 600;
  color: var(--on-surface);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subject-list__name:hover { color: var(--primary); }
.subject-list__color {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-full);
  background: var(--surface-container);
}
.subject-list__col--domain {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  color: var(--on-surface);
  font-size: var(--text-sm);
}

.subject-list__col--domain small {
  color: var(--on-surface-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subject-list__col--num {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--on-surface);
}
.subject-list__col--actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .subject-list__head { display: none; }
  .subject-list__row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
  }
  .subject-list__col--num::before {
    content: attr(data-label);
    color: var(--on-surface-subtle);
    font-size: var(--text-xs);
    margin-right: 0.35rem;
  }
  .subject-list__col--actions { justify-content: flex-start; }
}

/* ─── AI Homeschool Chat ─── */

.ai-chat-index { margin-top: 1.5rem; }

.ai-chat-conversation-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ai-chat-conversation-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  transition: background var(--duration-base) var(--ease-standard);
}

.ai-chat-conversation-card:hover {
  background: var(--surface-container);
}

.ai-chat-conversation-link {
  flex: 1;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.ai-chat-conversation-title {
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-chat-conversation-meta {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin-top: 0.2rem;
}

.ai-chat-conversation-delete {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--on-surface-subtle);
  padding: 0.35rem;
  border-radius: var(--radius-sm);
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
  flex-shrink: 0;
}

.ai-chat-conversation-delete:hover {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 10%, transparent);
}

.ai-chat-conversation-delete .material-symbols-outlined {
  font-size: var(--text-lg);
}

.ai-chat-empty {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
}

.ai-chat-empty-icon .material-symbols-outlined {
  font-size: 48px;
  color: var(--primary);
  opacity: 0.7;
}

.ai-chat-empty h3 {
  margin: 1rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--on-surface);
}

.ai-chat-empty p {
  color: var(--on-surface-subtle);
  font-size: var(--text-base);
  max-width: 480px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

/* Chat shell: sidebar + main */

.binder-workspace:has(.ai-chat-shell) {
  align-items: stretch;
  height: 100vh;
  min-height: 0;
}

.binder-stage .bc-main:has(.ai-chat-shell) {
  padding: 0;
  overflow: hidden;
  max-width: 100%;
}

.ai-chat-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100%;
  gap: 0;
  overflow: hidden;
  position: relative;
}

.ai-chat-sidebar-overlay {
  display: none;
}

.ai-chat-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--surface-container-low);
  border-right: 1px solid var(--outline-variant);
  overflow-y: auto;
  scrollbar-width: none;
}

.ai-chat-sidebar::-webkit-scrollbar {
  display: none;
}

.ai-chat-sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 0.5rem;
  border-bottom: none;
  flex-shrink: 0;
}

.ai-chat-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
}

.ai-chat-search-icon {
  font-size: var(--text-md);
  color: var(--on-surface-subtle);
}

.ai-chat-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--on-surface);
  outline: none;
  font-family: inherit;
  min-width: 0;
}

.ai-chat-search-input::placeholder {
  color: var(--on-surface-subtle);
}

.ai-chat-sidebar-back {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--on-surface-subtle);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}

.ai-chat-sidebar-back:hover { color: var(--on-surface); }

.ai-chat-sidebar-back .material-symbols-outlined { font-size: var(--text-lg); }

/* button_to wraps the + button in a <form>; keep it inline-flex so the
   icon sits next to the search + select buttons in the header. */
.ai-chat-sidebar-header form.button_to {
  display: inline-flex;
  margin: 0;
  flex-shrink: 0;
}

.ai-chat-new-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-container, #ffe7d6);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--on-primary-container, var(--on-surface));
  padding: 0.35rem;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.ai-chat-new-btn:hover { background: var(--primary, #e8590c); color: #fff; border-color: transparent; }

.ai-chat-new-btn .material-symbols-outlined { font-size: var(--text-lg); }

.ai-chat-sidebar-conversations {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ai-chat-sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--on-surface);
  transition: background var(--duration-base) var(--ease-standard);
  position: relative;
}

.ai-chat-sidebar-item:hover { background: var(--surface-container); }

.ai-chat-sidebar-item--active {
  background: var(--surface-container);
  font-weight: 500;
}

.ai-chat-sidebar-item-check {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.ai-chat-sidebar-item-check input {
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary);
}

.ai-chat-shell--selecting .ai-chat-sidebar-item-check {
  display: inline-flex;
}

.ai-chat-sidebar-item-link {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  color: inherit;
  padding: 0.1rem 0.15rem;
}

.ai-chat-sidebar-item-title {
  font-size: var(--text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-chat-sidebar-item-time {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.ai-chat-sidebar-item-trash-form {
  display: contents;
}

.ai-chat-sidebar-item-rename,
.ai-chat-sidebar-item-trash {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--on-surface-subtle);
  padding: 0.25rem;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
  flex-shrink: 0;
}

.ai-chat-sidebar-item:hover .ai-chat-sidebar-item-rename,
.ai-chat-sidebar-item:focus-within .ai-chat-sidebar-item-rename,
.ai-chat-sidebar-item:hover .ai-chat-sidebar-item-trash,
.ai-chat-sidebar-item:focus-within .ai-chat-sidebar-item-trash {
  opacity: 1;
}

.ai-chat-sidebar-item-rename:hover {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.ai-chat-sidebar-item-trash:hover {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 12%, transparent);
}

.ai-chat-sidebar-item-rename .material-symbols-outlined,
.ai-chat-sidebar-item-trash .material-symbols-outlined {
  font-size: var(--text-md);
}

.ai-chat-shell--selecting .ai-chat-sidebar-item-trash-form,
.ai-chat-shell--selecting .ai-chat-sidebar-item-rename {
  display: none;
}

/* Suggested Follow-ups */
.ai-chat-followups {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--outline-variant);
}

.ai-chat-followup-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  color: var(--on-surface);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
  width: fit-content;
  max-width: 100%;
}

.ai-chat-followup-btn:hover {
  background: var(--surface-container-high);
  border-color: var(--outline);
}

.ai-chat-followup-btn .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--primary);
  flex-shrink: 0;
}

/* Inline rename input */
.ai-chat-rename-input {
  width: 100%;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--on-surface);
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: var(--radius-xs);
  padding: 0.15rem 0.35rem;
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
}

.ai-chat-sidebar-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--on-surface-subtle);
  padding: 0.35rem;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.ai-chat-sidebar-select-btn:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}

.ai-chat-sidebar-select-btn .material-symbols-outlined { font-size: var(--text-lg); }

.ai-chat-sidebar-select-btn--active {
  background: var(--surface-container);
  color: var(--primary);
}

.ai-chat-sidebar-bulkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0 0.5rem 0.25rem;
  background: var(--surface-container);
  border-radius: var(--radius-sm);
}

.ai-chat-sidebar-bulkbar[hidden] {
  display: none;
}

.ai-chat-sidebar-bulkbar-count {
  font-size: var(--text-sm);
  color: var(--on-surface);
  font-weight: 500;
}

.ai-chat-sidebar-bulkbar-actions {
  display: inline-flex;
  gap: 0.25rem;
}

.ai-chat-sidebar-bulkbar-cancel,
.ai-chat-sidebar-bulkbar-delete {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.ai-chat-sidebar-bulkbar-cancel {
  color: var(--on-surface-subtle);
}

.ai-chat-sidebar-bulkbar-cancel:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.ai-chat-sidebar-bulkbar-delete {
  color: var(--error);
}

.ai-chat-sidebar-bulkbar-delete:hover:not(:disabled) {
  background: color-mix(in srgb, var(--error) 12%, transparent);
}

.ai-chat-sidebar-bulkbar-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-chat-sidebar-bulkbar-delete .material-symbols-outlined {
  font-size: var(--text-md);
}

/* Main chat area */

.ai-chat-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  overflow: hidden;
}

.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--outline-variant);
  flex-shrink: 0;
  background: transparent;
}

.ai-chat-header-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--on-surface);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-chat-header-icon {
  color: var(--primary);
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.ai-chat-header-action {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--on-surface-subtle);
  padding: 0.35rem;
  border-radius: var(--radius-sm);
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}

.ai-chat-header-action:hover {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 10%, transparent);
}

.ai-chat-header-action .material-symbols-outlined { font-size: var(--text-lg); }

/* Messages area */

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

/* Surfaces ActionCable reconnect + stream-idle states. Lives above the
   messages list so it doesn't push layout around as it appears/disappears. */
.ai-chat-status-banner {
  align-self: center;
  max-width: min(640px, 100%);
  margin: var(--space-3) auto 0;
  padding: 0.55rem 0.9rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--on-surface);
  background: var(--primary-soft);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  animation: modalFadeIn var(--duration-base) var(--ease-standard);
}
.ai-chat-status-banner--persistent {
  background: color-mix(in srgb, var(--error) 10%, var(--surface-lowest));
  border-color: color-mix(in srgb, var(--error) 35%, var(--outline-variant));
  color: color-mix(in srgb, var(--error) 70%, var(--on-surface));
}

.ai-chat-messages > * {
  width: 100%;
  max-width: 800px;
}

.ai-chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.25rem 2rem 2rem;
  flex: 1;
}

.ai-chat-welcome-icon .material-symbols-outlined {
  font-size: 42px;
  color: var(--primary);
  opacity: 0.8;
}

.ai-chat-welcome h3 {
  margin: 0.85rem 0 0.45rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--on-surface);
}

.ai-chat-welcome-copy {
  margin: 0 0 1.25rem;
  max-width: 36rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.ai-chat-suggestions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  max-width: 500px;
}

.ai-chat-suggestion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.65rem 0.85rem;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--on-surface);
  text-align: left;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.ai-chat-suggestion:hover {
  background: var(--surface-container);
  border-color: var(--primary);
}

.ai-chat-suggestion .material-symbols-outlined {
  font-size: 1.15rem;
  color: var(--primary);
  flex-shrink: 0;
}

/* Individual messages */

.ai-chat-message {
  display: flex;
  gap: 0.75rem;
}

.ai-chat-message--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ai-chat-message--assistant {
  align-self: flex-start;
}

.ai-chat-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-chat-message--assistant .ai-chat-message-avatar {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
}

.ai-chat-message--user .ai-chat-message-avatar {
  background: var(--surface-container);
  color: var(--on-surface-subtle);
}

.ai-chat-message-avatar .material-symbols-outlined { font-size: var(--text-lg); }

.ai-chat-message-content {
  flex: 1;
  min-width: 0;
}

.ai-chat-message-sender {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ai-chat-message--user .ai-chat-message-sender {
  flex-direction: row-reverse;
}

.ai-chat-message-time {
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.ai-chat-message-body {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--on-surface);
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
}

.ai-chat-message-body:empty {
  display: none;
}

.ai-chat-message--assistant .ai-chat-message-body {
  background: var(--surface-container-low);
  border-top-left-radius: 0.25rem;
}

.ai-chat-message--user .ai-chat-message-body {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-top-right-radius: 0.25rem;
}

.ai-chat-message-body p { margin-bottom: 0.65rem; }
.ai-chat-message-body p:last-child { margin-bottom: 0; }
.ai-chat-message-body h1,
.ai-chat-message-body h2,
.ai-chat-message-body h3,
.ai-chat-message-body h4 { margin: 1rem 0 0.5rem; font-family: var(--font-display); }
.ai-chat-message-body h3 { font-size: var(--text-md); }
.ai-chat-message-body h4 { font-size: var(--text-base); }
.ai-chat-message-body ul,
.ai-chat-message-body ol { margin: 0.5rem 0; padding-left: 1.5rem; }
.ai-chat-message-body li { margin-bottom: 0.25rem; }
.ai-chat-message-body code:not(pre code) { background: var(--surface-container); padding: 0.15em 0.35em; border-radius: 4px; font-size: 0.85em; font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); }
.ai-chat-message-body pre { background: var(--surface-container); padding: 0.75rem 1rem; border-radius: var(--radius-sm); overflow-x: auto; margin: 0.5rem 0; }
.ai-chat-message-body pre code { background: none; padding: 0; }
.ai-chat-message-body blockquote { border-left: 3px solid var(--outline-variant); padding-left: 0.75rem; margin: 0.5rem 0; color: var(--on-surface-subtle); }
.ai-chat-message-body strong { font-weight: 600; }
.ai-chat-message-body hr { border: none; border-top: 1px solid var(--outline-variant); margin: 1rem 0; }
.ai-chat-message-body table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; font-size: var(--text-base); }
.ai-chat-message-body th,
.ai-chat-message-body td { border: 1px solid var(--outline-variant); padding: 0.4rem 0.6rem; text-align: left; }
.ai-chat-message-body th { background: var(--surface-container-low); font-weight: 600; }

/* Message action buttons */

.ai-chat-message-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.5rem;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.ai-chat-message:hover .ai-chat-message-actions { opacity: 1; }

.ai-chat-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}

.ai-chat-action-btn:hover {
  color: var(--on-surface);
  background: var(--surface-container);
}

.ai-chat-action-btn .material-symbols-outlined { font-size: var(--text-base); }

.ai-chat-thinking {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  font-style: italic;
}

.ai-chat-thinking-panel {
  margin: 0 0 0.4rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-container-low, var(--surface-container));
  overflow: hidden;
}

.ai-chat-thinking-panel[open] {
  background: var(--surface-container);
}

.ai-chat-thinking-summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.7rem;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ai-chat-thinking-summary::-webkit-details-marker {
  display: none;
}

.ai-chat-thinking-summary::marker {
  display: none;
  content: "";
}

.ai-chat-thinking-label {
  font-style: italic;
}

.ai-chat-thinking-hint {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  opacity: 0.75;
}

.ai-chat-thinking-panel[open] .ai-chat-thinking-hint {
  visibility: hidden;
}

.ai-chat-thinking-chevron {
  font-size: var(--text-lg);
  color: var(--on-surface-subtle);
  transition: transform var(--duration-base) var(--ease-standard);
}

.ai-chat-thinking-panel[open] .ai-chat-thinking-chevron {
  transform: rotate(180deg);
}

/* Message entry animation */
@keyframes aiChatMessageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-chat-message {
  animation: aiChatMessageIn 200ms ease-out both;
}

.ai-chat-message.ai-chat-message--instant {
  animation: none;
}

/* Thinking dots animation (shown before first streaming chunk) */
@keyframes aiChatThinkingDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.ai-chat-thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 0.5rem;
}

.ai-chat-thinking-dots span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: aiChatThinkingDot 1.4s infinite ease-in-out both;
}

.ai-chat-thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
.ai-chat-thinking-dots span:nth-child(2) { animation-delay: -0.16s; }
.ai-chat-thinking-dots span:nth-child(3) { animation-delay: 0s; }

/* Hide dots once streaming starts */
.ai-chat-thinking-panel.streaming .ai-chat-thinking-dots {
  display: none;
}

/* Retry / Regenerate / Edit button variants */
.ai-chat-retry-btn .material-symbols-outlined,
.ai-chat-regenerate-btn .material-symbols-outlined,
.ai-chat-edit-btn .material-symbols-outlined {
  font-size: var(--text-base);
}

.ai-chat-thinking-body {
  padding: 0.25rem 0.85rem 0.75rem;
  border-top: 1px solid var(--outline-variant);
  font-size: var(--text-base);
  color: var(--on-surface-subtle);
  max-height: 18rem;
  overflow-y: auto;
}

.ai-chat-thinking-body > *:first-child {
  margin-top: 0.5rem;
}

.ai-chat-thinking-body > *:last-child {
  margin-bottom: 0;
}

.ai-chat-caret {
  display: inline-block;
  width: 0.55ch;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: currentColor;
  border-radius: var(--radius-xs);
  opacity: 0.85;
  animation: aiChatCaret 1s steps(2) infinite;
}

@keyframes aiChatCaret {
  0%, 50% { opacity: 0.85; }
  51%, 100% { opacity: 0; }
}

/* Fluidity polish: smooth state transitions on the chat surface ------------- */

/* While a response is pending the body is small (just the indicator). Reserve
   one line of vertical space so the bubble doesn't visibly grow on first
   chunk; the markdown content fills it without a height jump. */
.ai-chat-message--pending .ai-chat-message-body {
  min-height: 2.6em;
}

.ai-chat-streaming-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  animation: aiChatStreamingIn 180ms ease-out both;
}

.ai-chat-streaming-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: aiChatStreamingPulse 1.1s ease-in-out infinite;
}
.ai-chat-streaming-dot:nth-child(1) { animation-delay: 0s; }
.ai-chat-streaming-dot:nth-child(2) { animation-delay: 0.22s; }

@keyframes aiChatStreamingPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

@keyframes aiChatStreamingIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Optimistic user message (inserted by the form before the server round-trip
   completes). Slightly dimmed so it reads as "in flight" without flicker. */
.ai-chat-message--optimistic .ai-chat-message-body {
  opacity: 0.72;
  transition: opacity 120ms ease-out;
}

/* Soften the bubble + content transitions when state classes flip. The body
   subtree is replaced on each markdown reparse, so transitioning the
   container (not its children) keeps the perceived motion smooth without
   re-animating every paragraph. */
.ai-chat-message-body {
  transition:
    background-color 160ms ease-out,
    padding 160ms ease-out,
    min-height 160ms ease-out;
}

/* Smooth scroll on the messages list when the controller nudges scrollTop
   during streaming. Disabled for users who prefer reduced motion. */
.ai-chat-messages {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  .ai-chat-messages { scroll-behavior: auto; }
  .ai-chat-streaming-indicator,
  .ai-chat-streaming-dot,
  .ai-chat-caret { animation: none; }
}

/* Code block wrapper and header */
.ai-chat-code-block {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #1e1e1e;
  margin: 0.5rem 0;
  border: 1px solid #333;
}

.ai-chat-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.75rem;
  background: #2d2d2d;
  border-bottom: 1px solid #333;
  font-size: var(--text-xs);
  color: #999;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}

.ai-chat-code-lang {
  font-weight: 500;
  text-transform: lowercase;
  opacity: 0.7;
}

.ai-chat-code-block pre {
  margin: 0;
  padding: 0.75rem 1rem;
  padding-right: 3.5rem;
  background: transparent;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
  tab-size: 2;
}

.ai-chat-code-block code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, 'Cascadia Code', Consolas, monospace);
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  color: #d4d4d4;
}

/* Syntax highlighting colors (GitHub Dark theme) */
.ai-chat-code-block .hljs-comment,
.ai-chat-code-block .hljs-quote { color: #8b949e; font-style: italic; }
.ai-chat-code-block .hljs-keyword,
.ai-chat-code-block .hljs-selector-tag { color: #ff7b72; }
.ai-chat-code-block .hljs-string,
.ai-chat-code-block .hljs-doctag,
.ai-chat-code-block .hljs-template-variable { color: #a5d6ff; }
.ai-chat-code-block .hljs-title,
.ai-chat-code-block .hljs-section,
.ai-chat-code-block .hljs-name { color: #d2a8ff; }
.ai-chat-code-block .hljs-type,
.ai-chat-code-block .hljs-class .hljs-title { color: #79c0ff; }
.ai-chat-code-block .hljs-number { color: #79c0ff; }
.ai-chat-code-block .hljs-variable,
.ai-chat-code-block .hljs-template-variable { color: #ffa657; }
.ai-chat-code-block .hljs-built_in,
.ai-chat-code-block .hljs-builtin-name { color: #ffa657; }
.ai-chat-code-block .hljs-literal { color: #79c0ff; }
.ai-chat-code-block .hljs-symbol,
.ai-chat-code-block .hljs-bullet { color: #a5d6ff; }
.ai-chat-code-block .hljs-link { color: #58a6ff; text-decoration: underline; }
.ai-chat-code-block .hljs-meta { color: #8b949e; }
.ai-chat-code-block .hljs-attr,
.ai-chat-code-block .hljs-attribute { color: #79c0ff; }
.ai-chat-code-block .hljs-function { color: #d2a8ff; }
.ai-chat-code-block .hljs-operator,
.ai-chat-code-block .hljs-punctuation { color: #c9d1d9; }
.ai-chat-code-block .hljs-tag { color: #8b949e; }
.ai-chat-code-block .hljs-regex { color: #a5d6ff; }
.ai-chat-code-block .hljs-subst { color: #d4d4d4; }
.ai-chat-code-block .hljs-selector-attr,
.ai-chat-code-block .hljs-selector-pseudo { color: #d2a8ff; }
.ai-chat-code-block .hljs-addition { color: #aff5b4; background: #033a16; }
.ai-chat-code-block .hljs-deletion { color: #ffdcd7; background: #67060c; }

/* Copy button */
.ai-chat-code-header .ai-chat-code-copy {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xs);
  padding: 0.15rem 0.45rem;
  font-size: var(--text-xs);
  color: #999;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
  font-family: inherit;
}

.ai-chat-code-header .ai-chat-code-copy:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
  opacity: 1;
}

.ai-chat-code-header .ai-chat-code-copy--copied {
  color: #3fb950;
  opacity: 1 !important;
}

.ai-chat-code-header .ai-chat-code-copy .material-symbols-outlined { font-size: var(--text-base); }

.ai-chat-copy-btn--copied { color: var(--primary); }

.ai-chat-error {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--error);
  font-size: var(--text-base);
}

.ai-chat-error .material-symbols-outlined { font-size: var(--text-md); }

/* Inline editing */
.ai-chat-editing {
  background: var(--surface-container-low) !important;
  padding: 0.75rem !important;
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
}

.ai-chat-edit-textarea {
  width: 100%;
  min-height: 80px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--on-surface);
  background: var(--surface-lowest);
  border: 1px solid var(--outline);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
  resize: vertical;
  outline: none;
}

.ai-chat-edit-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
}

.ai-chat-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.ai-chat-edit-save-btn,
.ai-chat-edit-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}

.ai-chat-edit-save-btn {
  background: var(--primary);
  color: var(--on-primary);
}

.ai-chat-edit-save-btn:hover {
  background: var(--primary-hover);
}

.ai-chat-edit-cancel-btn {
  background: var(--surface-container);
  color: var(--on-surface-mid);
}

.ai-chat-edit-cancel-btn:hover {
  background: var(--surface-container-high);
  color: var(--on-surface);
}

/* Composer */

.ai-chat-composer {
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid var(--outline-variant);
  background: transparent;
  flex-shrink: 0;
}

.ai-chat-form { width: 100%; }

.ai-chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
  max-width: 800px;
  margin: 0 auto;
}

.ai-chat-input-row:focus-within {
  border-color: var(--outline-variant);
  background: var(--surface);
}

.ai-chat-input {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  padding: 0.35rem 0.5rem;
  color: var(--on-surface);
  outline: none;
  min-height: 1.5em;
  max-height: 200px;
}

.ai-chat-input::placeholder {
  color: var(--on-surface-subtle);
}

.ai-chat-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--on-primary, #fff);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0.45rem;
  transition: opacity var(--duration-base) var(--ease-standard);
  flex-shrink: 0;
}

.ai-chat-send-btn:hover { opacity: 0.85; }

.ai-chat-send-btn .material-symbols-outlined { font-size: var(--text-lg); }

.ai-chat-stop-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--surface-container);
  color: var(--on-surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0.45rem;
  transition: background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.ai-chat-stop-btn:hover {
  background: var(--surface-container-high);
  border-color: var(--outline);
}

.ai-chat-stop-btn .material-symbols-outlined { font-size: var(--text-lg); }

.ai-chat-shell--streaming .ai-chat-send-btn { display: none; }
.ai-chat-shell--streaming .ai-chat-stop-btn { display: inline-flex; }

.ai-chat-input-hint {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  margin-top: 0.35rem;
  text-align: center;
}

/* Token budget meter */

.ai-token-meter {
  padding: 0;
  margin-bottom: 1.25rem;
}

.ai-token-meter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.ai-token-meter-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--on-surface-subtle);
}

.ai-token-meter-reset {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  opacity: 0.7;
}

.ai-token-meter-bar-track {
  height: 4px;
  background: var(--surface-container);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.ai-token-meter-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-xs);
  transition: width var(--duration-slow) var(--ease-standard);
}

.ai-token-meter-bar--warning { background: #f4b400; }
.ai-token-meter-bar--critical { background: var(--error); }

.ai-token-meter-exhausted {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.65rem;
  background: color-mix(in srgb, var(--error) 10%, transparent);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--error);
}

.ai-token-meter-exhausted .material-symbols-outlined { font-size: var(--text-md); }

.ai-token-meter-low {
  margin-top: 0.4rem;
  font-size: var(--text-sm);
}

.ai-token-meter-upgrade {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.ai-token-meter-upgrade:hover { text-decoration: underline; }

.ai-chat-sidebar-meter {
  padding: 0.75rem;
  border-top: 1px solid var(--outline-variant);
  margin-top: auto;
}

.ai-chat-sidebar-meter .ai-token-meter {
  margin-bottom: 0;
  background: transparent;
  padding: 0;
}

.ai-chat-budget-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--error) 8%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--on-surface);
}

.ai-chat-budget-block .material-symbols-outlined {
  font-size: var(--text-lg);
  color: var(--error);
  flex-shrink: 0;
}

/* Tablet */
@media (max-width: 980px) {
  .ai-chat-shell {
    grid-template-columns: 240px 1fr;
  }

  .ai-chat-messages {
    padding: 1rem 1.25rem;
  }

  .ai-chat-composer {
    padding: 0.75rem 1.25rem 1rem;
  }

  .ai-chat-input-row {
    max-width: 100%;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .binder-workspace:has(.ai-chat-shell) {
    padding: 0;
  }

  .ai-chat-shell {
    grid-template-columns: 1fr;
    position: relative;
  }

  .ai-chat-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 85vw);
    z-index: 300;
    background: var(--surface);
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    transform: translateX(-100%);
    transition: transform var(--duration-base) var(--ease-standard);
  }

  .ai-chat-sidebar--open {
    transform: translateX(0);
  }

    .ai-chat-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 290;
  }

  .ai-chat-sidebar--open ~ .ai-chat-sidebar-overlay {
    display: block;
  }

  .ai-chat-mobile-toggle {
    display: inline-flex;
  }

  .ai-chat-header {
    padding: 0.6rem 0.75rem;
  }

  .ai-chat-messages {
    padding: 1rem;
  }

  .ai-chat-messages > * {
    max-width: 100%;
  }

  .ai-chat-composer {
    padding: 0.5rem 0.75rem 0.75rem;
  }

  .ai-chat-input-row {
    max-width: 100%;
    border-radius: var(--radius-lg);
  }

  .ai-chat-suggestions {
    grid-template-columns: 1fr;
  }

  .ai-chat-message {
    gap: 0.5rem;
  }

  .ai-chat-message-body {
    padding: 0.65rem 0.85rem;
    font-size: var(--text-base);
  }

  .ai-chat-welcome {
    padding: 2rem 1rem;
  }

  .ai-chat-welcome h3 {
    font-size: var(--text-md);
  }

  .ai-chat-input-hint {
    display: none;
  }

  .ai-chat-message-actions {
    opacity: 1;
  }
}

/* Hide mobile toggle on desktop */
.ai-chat-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--on-surface-subtle);
  padding: 0.35rem;
  border-radius: var(--radius-sm);
}

.ai-chat-mobile-toggle .material-symbols-outlined { font-size: var(--text-xl); }

/* ------------------------------------------------------------------------
 * Guided dashboard + formal records redesign
 * ------------------------------------------------------------------------ */

.binder-sidebar__nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.binder-sidebar__nav-group + .binder-sidebar__nav-group {
  margin-top: 0.95rem;
}

.binder-sidebar__nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dashboard-home--guided {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.home-guided-hero,
.home-guided-snapshot__card,
.home-guided-setup,
.home-guided-priority-card,
.home-guided-student-card,
.home-guided-overview__stat-card,
.home-guided-browse-card,
.home-guided-activity-card,
.home-guided-aside-card,
.home-activity,
.home-tools,
.formal-records-hero,
.formal-record-card,
.formal-records-helper__card,
.drive-starter-hint {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
}

/* Cards that are themselves clickable (anchors / buttons) get hover lift.
   Static section wrappers keep their shadow but don't translate. */
.home-guided-student-card,
.home-guided-priority-card,
.home-guided-browse-card,
.home-guided-activity-card,
.formal-record-card {
  cursor: pointer;
}

.home-guided-student-card:hover,
.home-guided-priority-card:hover,
.home-guided-browse-card:hover,
.home-guided-activity-card:hover,
.formal-record-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

.home-guided-student-card:active,
.home-guided-priority-card:active,
.home-guided-browse-card:active,
.home-guided-activity-card:active,
.formal-record-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-card);
}

.home-activity,
.home-tools {
  padding: 1.15rem 1.2rem;
}

.home-guided-hero {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 1.45rem;
  align-items: flex-start;
}

.home-guided-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.home-guided-hero__eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.home-guided-hero__title {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--on-surface);
}

.home-guided-hero__subtitle,
.home-guided-hero__motto {
  margin: 0;
  color: var(--on-surface-mid);
  max-width: 54rem;
}

.home-guided-hero__motto {
  font-style: italic;
}

.home-guided-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
  min-width: 16rem;
}

.home-guided-mode-switch {
  display: inline-flex;
  padding: 0.2rem;
  gap: 0.15rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-full);
  border: 1px solid var(--outline-variant);
}

.home-guided-mode-switch__btn {
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-full);
  color: var(--on-surface-mid);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
}

.home-guided-mode-switch__btn--active {
  background: var(--surface-lowest);
  color: var(--on-surface);
  box-shadow: var(--shadow-sm);
}

.home-guided-hero__cta-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.home-guided-hero__customize {
  display: flex;
  justify-content: flex-end;
  font-size: var(--text-sm);
}

.home-guided-section {
  position: relative;
}

.home-get-started {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: 1.15rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 9% 18%, rgba(255, 217, 102, 0.28), transparent 22%),
    radial-gradient(circle at 88% 14%, rgba(55, 214, 178, 0.22), transparent 24%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--surface-lowest)), var(--surface-lowest) 48%, color-mix(in srgb, #ff8fb3 10%, var(--surface-lowest)));
  box-shadow: 0 18px 45px color-mix(in srgb, var(--primary) 13%, transparent);
}

.home-get-started::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(-100%);
  animation: home-get-started-shimmer 6s ease-in-out infinite;
}

.home-get-started__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-get-started__sparkles span {
  position: absolute;
  display: inline-flex;
  font-size: 1.15rem;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.08));
  animation: home-get-started-float 5.5s ease-in-out infinite;
}

.home-get-started__sparkles span:nth-child(1) {
  top: 0.65rem;
  right: clamp(1.1rem, 22%, 10.5rem);
}

.home-get-started__sparkles span:nth-child(2) {
  bottom: 0.75rem;
  left: clamp(1.2rem, 22%, 18rem);
  animation-delay: 0.7s;
}

.home-get-started__sparkles span:nth-child(3) {
  top: 0.8rem;
  right: 1.35rem;
  animation-delay: 1.3s;
}

.home-get-started__copy,
.home-get-started__action {
  position: relative;
  z-index: 1;
}

.home-get-started__copy {
  flex: 1 1 23rem;
  min-width: 0;
}

.home-get-started .home-get-started__eyebrow {
  margin: 0 0 0.25rem;
  color: color-mix(in srgb, var(--primary) 82%, var(--on-surface));
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-get-started h2 {
  margin: 0;
  color: var(--on-surface);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 900;
  line-height: 1.05;
}

.home-get-started p {
  margin: 0.45rem 0 0;
  max-width: 58ch;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.home-get-started__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.home-get-started__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0.28rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--outline-variant));
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.62);
  color: color-mix(in srgb, var(--on-surface) 84%, var(--primary));
  font-size: var(--text-xs);
  font-weight: 800;
}

.home-get-started__action {
  flex: 1 1 14rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  min-width: min(100%, 14rem);
}

.home-get-started__action p {
  margin: 0;
  max-width: 24ch;
  text-align: right;
}

.home-get-started__button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.9rem;
  padding-inline: 1.15rem;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 24%, transparent);
}

.home-get-started__button-row {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.home-get-started__hide {
  min-height: 2.9rem;
  padding-inline: 1rem;
  background: rgba(255, 255, 255, 0.62);
}

.home-get-started__button span[aria-hidden] {
  display: inline-flex;
  animation: home-get-started-rocket 1.9s ease-in-out infinite;
}

.home-get-started--notice {
  border-color: color-mix(in srgb, #d97706 28%, var(--outline-variant));
  background:
    radial-gradient(circle at 9% 18%, rgba(255, 217, 102, 0.32), transparent 22%),
    radial-gradient(circle at 88% 14%, rgba(55, 214, 178, 0.18), transparent 24%),
    linear-gradient(135deg, color-mix(in srgb, #d97706 9%, var(--surface-lowest)), var(--surface-lowest) 54%, color-mix(in srgb, var(--primary) 8%, var(--surface-lowest)));
}

@keyframes home-get-started-shimmer {
  0%, 54% { transform: translateX(-100%); opacity: 0; }
  62% { opacity: 1; }
  76%, 100% { transform: translateX(100%); opacity: 0; }
}

@keyframes home-get-started-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-0.45rem) rotate(5deg); }
}

@keyframes home-get-started-rocket {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-0.12rem); }
}

@media (prefers-reduced-motion: reduce) {
  .home-get-started::before,
  .home-get-started__sparkles span,
  .home-get-started__button span[aria-hidden] {
    animation: none;
  }
}

@media (max-width: 860px) {
  .home-get-started {
    flex-direction: column;
    align-items: stretch;
  }

  .home-get-started__action {
    align-items: flex-start;
    min-width: 0;
  }

  .home-get-started__action p {
    max-width: 58ch;
    text-align: left;
  }

  .home-get-started__button-row {
    justify-content: flex-start;
  }

  .home-get-started__sparkles span:nth-child(2) {
    left: auto;
    right: 6.5rem;
  }
}

@container (max-width: 38rem) {
  .home-get-started {
    flex-direction: column;
    align-items: stretch;
  }

  .home-get-started__copy,
  .home-get-started__action {
    flex-basis: auto;
  }

  .home-get-started__action {
    align-items: flex-start;
  }

  .home-get-started__action p {
    max-width: 58ch;
    text-align: left;
  }

  .home-get-started__button-row {
    justify-content: flex-start;
  }
}

.home-guided-section__hide {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: var(--mobile-tap-min);
  height: var(--mobile-tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 120ms, color 120ms, transform 120ms;
}

.home-guided-section__hide:hover {
  background: var(--surface-container);
  color: var(--on-surface);
  transform: scale(1.05);
}

.home-guided-customize {
  background: var(--surface-lowest);
  border: 1px dashed var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.home-guided-customize__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.6rem;
}

.home-guided-customize__chip {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  color: var(--on-surface);
  transition: background 120ms, border-color 120ms;
}

.home-guided-customize__chip:hover {
  background: var(--surface-container);
  border-color: var(--on-surface-subtle);
}

.home-guided-customize__plus {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--method-accent, var(--on-surface));
  line-height: 1;
  margin-top: 0.1rem;
}

.home-guided-customize__chip-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.home-guided-customize__chip-body strong {
  font-size: var(--text-sm);
  font-weight: 600;
}

.home-guided-customize__chip-body span {
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
}

.home-attendance-quick {
  display: grid;
  grid-template-columns: minmax(12rem, 0.75fr) minmax(18rem, 1fr);
  gap: 1.1rem;
  align-items: start;
  max-width: 52rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-card);
}

.home-attendance-quick__copy {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.home-attendance-quick__icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--method-accent, var(--primary)) 10%, var(--surface-container-low));
  color: var(--method-accent, var(--primary));
  font-size: 1.2rem;
}

.home-attendance-quick h2 {
  margin: 0;
  color: var(--on-surface);
  font-size: var(--text-md);
  font-weight: 850;
  letter-spacing: -0.01em;
}

.home-attendance-quick p {
  margin: 0.25rem 0 0;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.home-attendance-quick__form {
  display: grid;
  grid-template-columns: repeat(2, minmax(8.5rem, 1fr)) auto;
  gap: 0.65rem;
  align-items: end;
  justify-self: stretch;
}

.home-attendance-quick__field--notes {
  grid-column: 1 / 3;
}

.home-attendance-quick__field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.home-attendance-quick__field > span {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-attendance-quick__submit {
  min-height: var(--mobile-tap-min);
  padding-inline: 1rem;
}

@media (max-width: 1100px) {
  .home-attendance-quick {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

@media (max-width: 760px) {
  .home-attendance-quick__form {
    grid-template-columns: 1fr;
  }

  .home-attendance-quick__field--notes {
    grid-column: auto;
  }

  .home-attendance-quick__submit {
    width: 100%;
  }
}

.home-guided-snapshot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.home-guided-snapshot__card {
  padding: 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.home-guided-snapshot__label,
.home-guided-student-card__metric-label,
.formal-record-card__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.home-guided-snapshot__value {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1;
  color: var(--on-surface);
}

.formal-record-card__stat {
  display: block;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--on-surface);
  word-break: break-word;
}

.formal-record-card__stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.home-guided-snapshot__hint,
.home-guided-section-sub,
.home-guided-priority-card__body,
.home-guided-student-card__next,
.home-guided-browse-card__body,
.formal-record-card__summary,
.formal-record-card__subtitle,
.drive-starter-hint,
.home-guided-activity-card__row span:last-child {
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--on-surface-mid);
}

.home-guided-setup {
  padding: 1.15rem 1.2rem;
}

.home-guided-section-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.95rem;
}

.home-guided-section-head--tight {
  margin-bottom: 0.8rem;
}

.home-guided-section-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 750;
  color: var(--on-surface);
}

.home-guided-inline-link {
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
}

.home-guided-inline-link:hover {
  text-decoration: underline;
}

.home-guided-priorities .dash-card__body {
  margin-top: auto;
}

.home-guided-priorities .home-guided-inline-link {
  width: fit-content;
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.2rem;
  padding: 0.48rem 0.82rem 0.48rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--surface-lowest)), color-mix(in srgb, var(--surface-lowest) 92%, transparent));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 9%, transparent);
  color: color-mix(in srgb, var(--primary) 88%, var(--on-surface));
  font-weight: 850;
  letter-spacing: -0.01em;
  transition: transform 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard), border-color 160ms var(--ease-standard), background 160ms var(--ease-standard);
}

.home-guided-priorities .home-guided-inline-link::after {
  content: "arrow_forward";
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  font-family: "Material Symbols Outlined";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 160ms var(--ease-standard), background 160ms var(--ease-standard);
}

.home-guided-priorities .home-guided-inline-link:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--outline-variant));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--surface-lowest)), var(--surface-lowest));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 13%, transparent);
  text-decoration: none;
  transform: translateY(-1px);
}

.home-guided-priorities .home-guided-inline-link:hover::after {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  transform: translateX(2px);
}

.home-guided-priorities .dash-card:nth-child(3n + 2) .home-guided-inline-link {
  border-color: color-mix(in srgb, var(--secondary) 24%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 12%, var(--surface-lowest)), color-mix(in srgb, var(--surface-lowest) 92%, transparent));
  color: color-mix(in srgb, var(--secondary) 78%, var(--on-surface));
}

.home-guided-priorities .dash-card:nth-child(3n + 2) .home-guided-inline-link::after {
  background: color-mix(in srgb, var(--secondary) 15%, transparent);
}

.home-guided-priorities .dash-card:nth-child(3n) .home-guided-inline-link {
  border-color: color-mix(in srgb, var(--warning, #d97706) 24%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--warning, #d97706) 10%, var(--surface-lowest)), color-mix(in srgb, var(--surface-lowest) 92%, transparent));
  color: color-mix(in srgb, var(--warning, #b45309) 82%, var(--on-surface));
}

.home-guided-priorities .dash-card:nth-child(3n) .home-guided-inline-link::after {
  background: color-mix(in srgb, var(--warning, #d97706) 14%, transparent);
}

.home-guided-setup__count {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--on-surface-mid);
}

.home-guided-setup__grid,
.home-guided-priorities__grid,
.home-guided-students__grid,
.home-guided-overview__stats,
.home-guided-browse-grid,
.home-guided-activity__grid,
.formal-records-grid,
.formal-records-helper {
  display: grid;
  gap: 0.9rem;
}

.home-guided-setup__grid,
.home-guided-priorities__grid,
.formal-records-helper {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.home-guided-setup__card,
.home-guided-priority-card {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  border: 1px solid var(--outline-variant);
  padding: 1rem;
}

.home-guided-setup__title,
.home-guided-priority-card__title,
.home-guided-browse-card__title,
.home-guided-activity-card__head h3,
.formal-record-card__title,
.formal-records-helper__card h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--on-surface);
}

.home-guided-setup__body {
  margin: 0.35rem 0 0.75rem;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--on-surface-mid);
}

.home-guided-main {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
  gap: 1rem;
  align-items: start;
}

.home-guided-main__primary,
.home-guided-main__aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.home-guided-students__grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.home-guided-student-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
}

.home-guided-student-card__top,
.home-guided-student-card__identity,
.home-guided-priority-card__head,
.formal-record-card__head,
.formal-records-hero {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.home-guided-student-card__top {
  justify-content: space-between;
}

.home-guided-student-card__name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--on-surface);
}

.home-guided-student-card__grade {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

.home-guided-student-card__status {
  flex-shrink: 0;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
}

.home-guided-student-card__status--ready {
  background: color-mix(in srgb, var(--mint) 16%, var(--surface-lowest));
  color: var(--mint);
}

.home-guided-student-card__status--needs-plan {
  background: color-mix(in srgb, var(--gold) 14%, var(--surface-lowest));
  color: var(--secondary);
}

.home-guided-student-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.formal-record-card__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.85rem 1rem;
}

.home-guided-student-card__metric-value {
  display: block;
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--on-surface);
}

.home-guided-overview__stats {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.formal-records-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}

.home-guided-overview__stat-card {
  padding: 0.95rem 1rem;
  text-align: center;
}

.home-guided-overview__stat-card strong {
  display: block;
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--on-surface);
}

.home-guided-overview__stat-card span {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.home-guided-browse-grid,
.home-guided-activity__grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.home-guided-browse-card,
.home-guided-activity-card,
.home-guided-aside-card {
  padding: 1rem 1.1rem;
}

.formal-record-card,
.formal-records-helper__card {
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.formal-record-card {
  box-sizing: border-box;
  min-height: 100%;
}

.formal-record-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 0;
}

.formal-record-card > * {
  margin: 0;
}

.formal-record-card__head {
  margin-bottom: 0;
}

.formal-record-card__actions {
  padding-top: 0.15rem;
}

.home-guided-browse-card__links,
.home-guided-browse-links,
.home-guided-routine-links {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.home-guided-browse-card__link,
.home-guided-browse-links__item,
.home-guided-routine-links__item,
.home-guided-activity-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--on-surface);
}

.home-guided-browse-card__link .material-symbols-outlined,
.home-guided-browse-links__item .material-symbols-outlined,
.home-guided-routine-links__item .material-symbols-outlined,
.home-guided-priority-card__icon,
.formal-record-card__icon {
  color: var(--primary);
}

.home-guided-routine-links__item--muted {
  opacity: 0.86;
}

.home-guided-quick-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.home-guided-quick-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.75rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  text-decoration: none;
  color: inherit;
}

.home-guided-quick-link--editing {
  width: 100%;
  cursor: pointer;
  justify-content: space-between;
}

.home-guided-quick-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  flex-shrink: 0;
}

.home-guided-quick-link__label {
  font-size: var(--text-sm);
  font-weight: 650;
}

.home-guided-quick-link__remove {
  color: var(--on-surface-subtle);
  font-size: var(--text-md);
}

.home-guided-quick-links__add {
  margin-top: 1rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--outline-variant);
}

.home-guided-quick-links__add h3 {
  margin: 0 0 0.75rem;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

.home-guided-outside-form {
  display: flex;
  gap: 0.5rem;
}

.home-guided-outside-form__input {
  flex: 1;
  min-width: 0;
  padding: 0.62rem 0.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--outline-variant);
  background: var(--surface);
}

.home-guided-outside-form__btn {
  padding: 0.62rem 0.9rem;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  cursor: pointer;
}

.home-guided-tip {
  margin: 0;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.formal-records-hero {
  justify-content: space-between;
  padding: 1.4rem 1.55rem;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.formal-records-grid {
  margin-bottom: 1.25rem;
}

.formal-records-hero__copy {
  min-width: 0;
}

.formal-records-hero__eyebrow {
  display: block;
  margin-bottom: 0.3rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
}

.formal-records-hero__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--on-surface);
}

.formal-records-hero__body {
  margin: 0.4rem 0 0;
  max-width: 48rem;
  color: var(--on-surface-mid);
  line-height: 1.5;
}

.formal-records-hero__actions,
.formal-record-card__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.formal-record-card__head {
  margin-bottom: 0.9rem;
}

.formal-record-card__icon {
  font-size: var(--text-xl);
}

.formal-record-card__pill {
  display: inline-flex;
  margin-left: 0.35rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
}

.formal-record-list {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.formal-records-helper__card {
  padding: 1.4rem 1.55rem;
}

.formal-records-helper__card h3 {
  text-wrap: balance;
  margin-bottom: 0.6rem;
}

.formal-records-helper__card ul {
  margin: 0;
  padding-left: 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.formal-records-helper__card p,
.formal-records-helper__card li {
  color: var(--on-surface-mid);
  line-height: 1.55;
}

.formal-records-helper__card p {
  margin: 0;
}

.compliance-hub {
  max-width: 78rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.compliance-hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(26rem, 1.08fr);
  gap: 1rem;
  align-items: stretch;
}

.compliance-hub-hero__copy,
.compliance-map-card,
.compliance-hub-stat,
.compliance-hub-requirements,
.compliance-hub-empty,
.compliance-hub-action-card {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-2xl, 1.5rem);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-card);
}

.compliance-hub-hero__copy {
  min-height: 27rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.25rem, 3vw, 2rem);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--surface-lowest)), var(--surface-lowest) 55%),
    var(--surface-lowest);
}

.compliance-hub-hero__eyebrow,
.compliance-hub-section-head span,
.compliance-map-card__head span,
.compliance-hub-stat small {
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.compliance-hub-hero h1 {
  max-width: 38rem;
  margin: 0.45rem 0 0;
  color: var(--on-surface);
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 850;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.compliance-hub-hero p {
  max-width: 36rem;
  margin: 1rem 0 0;
  color: var(--on-surface-mid);
  font-size: var(--text-lg);
  line-height: 1.45;
}

.compliance-hub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.35rem;
}

.compliance-map-card {
  min-width: 0;
  padding: 1rem;
  overflow: hidden;
}

.compliance-map-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
}

.compliance-map-card__head strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--on-surface);
  font-size: var(--text-2xl);
  font-weight: 850;
  letter-spacing: -0.03em;
}

.compliance-map-card__map {
  overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 28%),
    linear-gradient(135deg, var(--surface-container-low), var(--surface-lowest));
  border: 1px solid var(--outline-variant);
}

.compliance-map-card .state-map__svg {
  display: block;
  width: 100%;
  height: auto;
  padding: 1rem;
}

.compliance-map-card .state-map__state {
  fill: color-mix(in srgb, var(--on-surface) 10%, var(--surface-container));
  stroke: var(--surface-lowest);
  stroke-width: 1;
  transition: fill 160ms ease, filter 160ms ease;
}

.compliance-map-card .state-map__border,
.compliance-map-card .state-map__divider {
  fill: none;
  stroke: var(--surface-lowest);
  stroke-width: 1;
  pointer-events: none;
}

.compliance-map-card .state-map__hit {
  fill: transparent;
  stroke: transparent;
  cursor: default;
}

.compliance-map-card .state-map__group--selected .state-map__state {
  fill: var(--primary);
  filter: drop-shadow(0 5px 8px color-mix(in srgb, var(--primary) 35%, transparent));
}

.compliance-hub-stats,
.compliance-hub-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.compliance-hub-stat {
  display: flex;
  gap: 0.85rem;
  padding: 1rem;
}

.compliance-hub-stat > .material-symbols-outlined,
.compliance-hub-check > .material-symbols-outlined,
.compliance-hub-action-card > .material-symbols-outlined,
.compliance-hub-empty > .material-symbols-outlined {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 11%, var(--surface-container-low));
  color: var(--primary);
}

.compliance-hub-stat strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--on-surface);
  font-size: var(--text-2xl);
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1;
}

.compliance-hub-stat em {
  display: block;
  margin-top: 0.35rem;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  font-style: normal;
}

.compliance-hub-requirements,
.compliance-hub-empty {
  padding: 1.2rem;
}

.compliance-hub-section-head {
  margin-bottom: 0.9rem;
}

.compliance-hub-section-head h2,
.compliance-hub-empty h2 {
  margin: 0.2rem 0 0;
  color: var(--on-surface);
  font-size: var(--text-xl);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.compliance-hub-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.compliance-hub-check {
  min-width: 0;
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem;
  border-radius: var(--radius-xl);
  background: var(--surface-container-low);
}

.compliance-hub-check strong,
.compliance-hub-action-card strong {
  display: block;
  color: var(--on-surface);
  font-size: var(--text-md);
  font-weight: 850;
}

.compliance-hub-check p,
.compliance-hub-action-card p,
.compliance-hub-empty p {
  margin: 0.25rem 0 0;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.compliance-hub-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.compliance-hub-action-card {
  min-width: 0;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.compliance-hub-action-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--primary) 24%, var(--outline-variant));
}

.drive-starter-hint {
  margin: 0.85rem 0 0;
  padding: 0.85rem 1rem;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.drive-starter-hint__body {
  flex: 1;
  min-width: 0;
}

.drive-starter-hint__dismiss-form {
  margin: 0;
  flex-shrink: 0;
}

.drive-starter-hint__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--mobile-tap-min);
  min-height: var(--mobile-tap-min);
  border-radius: var(--radius-full);
  background: transparent;
  border: none;
  color: var(--on-surface-subtle);
  cursor: pointer;
  padding: 0;
}

.drive-starter-hint__dismiss:hover {
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
  color: var(--on-surface);
}

.drive-starter-hint__dismiss .material-symbols-outlined {
  font-size: 18px;
}

@media (max-width: 1100px) {
  .home-guided-main {
    grid-template-columns: 1fr;
  }

  .compliance-hub-hero,
  .compliance-hub-checks {
    grid-template-columns: 1fr;
  }

  .home-guided-hero {
    flex-direction: column;
  }

  .home-guided-hero__actions {
    align-items: flex-start;
    min-width: 0;
  }

  .home-guided-snapshot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .home-guided-snapshot,
  .home-guided-quick-links,
  .formal-records-grid,
  .formal-records-helper,
  .compliance-hub-stats,
  .compliance-hub-actions,
  .home-guided-setup__grid,
  .home-guided-priorities__grid,
  .home-guided-students__grid,
  .home-guided-browse-grid,
  .home-guided-activity__grid,
  .home-guided-overview__stats {
    grid-template-columns: 1fr;
  }

  .home-guided-outside-form,
  .formal-records-hero,
  .formal-record-card__actions {
    flex-direction: column;
  }

  .compliance-hub-hero__copy {
    min-height: 0;
  }

  .compliance-hub-empty {
    grid-template-columns: 1fr;
  }

  .home-guided-student-card__top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Rich (Lexical) notes embedded inside standard forms. Compact variant keeps the
   editor body shorter for lightweight "learning notes"–style fields; full size
   is used for long-form lesson plans. */
.rich-notes-field__hint {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  margin: 0 0 0.55rem;
}

.rich-notes-field .doc-editor-wrap--paper .lexical-doc-toolbar {
  position: static;
  top: auto;
}

.rich-notes-field .lexical-doc-placeholder {
  top: 3.85rem;
  left: 0.9rem;
}

.rich-notes-field .lexical-doc-editable {
  min-height: 16rem;
  padding: 0.65rem 0.9rem 1rem;
  border: 1px solid var(--border-color, rgba(26, 26, 46, 0.12));
  border-radius: var(--radius-md);
  background: var(--surface-1, #fff);
}

.rich-notes-field--compact .lexical-doc-editable {
  min-height: 6.5rem;
}

.rich-notes-rendered {
  line-height: 1.55;
}

.rich-notes-rendered .attachment,
.rich-notes-rendered .attachment-gallery {
  margin: 0.9rem 0;
}

.rich-notes-rendered img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

body.theme-dark .rich-notes-field .lexical-doc-editable {
  background: var(--surface-container-high, #2a2a34);
  border-color: rgba(255, 255, 255, 0.12);
}

/* =========================================================================
   MOBILE FOUNDATION
   Global primitives that make the app feel native on phones.
   Applied under 768px so desktop/tablet layout is unchanged.
   Screen-specific mobile passes (Files, Records, AI Chat, New Item) build
   on top of these primitives — prefer the 640/768/1024 breakpoints going
   forward and consume these classes instead of re-implementing.
   ========================================================================= */

:root {
  --mobile-tap-min: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    overscroll-behavior-y: none;
  }

  /* Prevent iOS from auto-zooming when focusing text inputs (anything <16px triggers zoom). */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input:not([type]),
  select,
  textarea {
    font-size: max(16px, 1rem);
  }

  /* Allow smooth momentum scrolling in any scroll container. */
  .binder-sidebar__scroll,
  .bc-main,
  .ai-chat-messages,
  [data-overflow-scroll] {
    -webkit-overflow-scrolling: touch;
  }

  /* Subtle press feedback on tappable controls — mimics iOS/Android active state. */
  a.binder-sidebar__nav-item:active,
  a.binder-sidebar__shortcut-link:active,
  .binder-toolbar__menu-btn:active,
  .bc-icon-btn:active,
  .binder-sidebar__quick-btn:active,
  .sidebar-new-entry-option:active {
    transform: scale(0.97);
  }

  /* Ensure common interactive surfaces clear the 44px touch target. */
  .binder-toolbar__menu-btn,
  .bc-icon-btn,
  .bc-avatar-btn,
  .binder-sidebar__quick-btn {
    min-width: var(--mobile-tap-min);
    min-height: var(--mobile-tap-min);
  }

  .binder-toolbar__search {
    touch-action: manipulation;
  }

  /* Common app controls should feel reliable under a thumb. Keep this
     scoped to the signed-in app shell so dense marketing/content links
     are not unexpectedly inflated. */
  .bc-main :where(button, .btn, .btn-ghost, a.btn, a.btn-ghost, [role="button"]),
  .binder-toolbar :where(button, a),
  .bc-user-dropdown :where(button, a),
  .notif-dropdown :where(button, a) {
    min-height: var(--mobile-tap-min);
    touch-action: manipulation;
  }

  .bc-main :where(.card, .form-card, .dash-card, .home-student-card, .home-mini-card, .record-item, .drive-row, .records-hub-panel) {
    min-width: 0;
  }
}

/* Safe-area handling for the mobile drawer: the drawer is fixed-positioned
   inside the 980px breakpoint at line 2381; on notched iOS devices the drawer
   needs to respect insets so content isn't under the status bar / home bar. */
@media (max-width: 980px) {
  .binder-sidebar.sidebar-shell {
    top: max(0.85rem, var(--safe-top));
    left: max(0.85rem, var(--safe-left));
    bottom: max(0.85rem, var(--safe-bottom));
    width: min(var(--binder-sidebar-width), calc(100vw - 1.7rem - var(--safe-left) - var(--safe-right)));
    max-width: calc(100vw - 1.7rem - var(--safe-left) - var(--safe-right));
    will-change: transform;
  }

  .binder-toolbar {
    padding-left: max(0px, var(--safe-left));
    padding-right: max(0px, var(--safe-right));
  }

  /* Lock body scroll while the drawer is open so the page behind doesn't
     scroll when the user swipes inside the drawer. */
  body.sidebar-open {
    overflow: hidden;
    touch-action: none;
  }
}

/* Utility: opt a container into a "mobile sheet" pattern — full width, rounded
   top only, slides up from the bottom with safe-area-aware bottom padding.
   Screen passes can apply this to upload dialogs, New-item flows, etc. */
.mobile-sheet {
  padding-bottom: max(1rem, var(--safe-bottom));
}

@media (max-width: 640px) {
  .mobile-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: mobile-sheet-in 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  }
}

@keyframes mobile-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Utility: a tappable row that's at least 44px tall with comfortable spacing.
   Use for stacked list rows (e.g. Files in card mode). */
.tap-row {
  min-height: var(--mobile-tap-min);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* On phones the "?" page-help FAB floats over content and covers cards/CTAs
   in the lower-right. It's a nice-to-have on desktop and a nuisance on a
   small screen — hide it below the tablet breakpoint. */
@media (max-width: 640px) {
  .help-fab {
    display: none !important;
  }

  /* The sticky toolbar (menu / chat / bell / avatar) wraps to two rows on
     small screens and camps on the viewport, eating ~90px of vertical space
     the whole time the user is scrolling. Let it scroll away naturally on
     phones — the hamburger is reachable by scrolling back to the top, and
     on most flows the user is moving through a single scroll context. */
  .binder-toolbar {
    position: static;
    top: auto;
  }

  .binder-toolbar__start > .sidebar-mobile-toggle.binder-toolbar__menu-btn {
    display: none !important;
  }
}

/* =========================================================================
   MOBILE: FILES SCREEN
   Native-feeling Files experience under 640px.
   - Table collapses to stacked cards
   - View tabs + type filters become horizontal scroll rails
   - Modals (New folder, Move to folder) slide up as bottom sheets
   - Preview panel takes the whole screen
   - Bulk actions stick to the bottom of the viewport
   ========================================================================= */

@media (max-width: 640px) {
  /* --- Top header --- */
  .drive-files-page .drive-page-tagline { display: none; }
  .drive-top {
    margin-bottom: 0.85rem;
    gap: 0.65rem;
  }
  .drive-page-title {
    font-size: var(--text-xl);
    letter-spacing: -0.03em;
  }
  .drive-top__actions {
    width: 100%;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }
  .drive-top__actions .drive-btn {
    min-height: var(--mobile-tap-min);
    padding: 0.5rem 0.85rem;
    font-size: var(--text-base);
  }
  .drive-top__actions .drive-btn--filled { flex: 1 1 auto; }
  .drive-top__actions .drive-btn--outline {
    flex: 0 1 auto;
    padding: 0.5rem 0.75rem;
  }
  .drive-top__actions .drive-icon-btn {
    width: var(--mobile-tap-min);
    height: var(--mobile-tap-min);
    flex: 0 0 auto;
  }

  /* --- View tabs: horizontal scroll rail --- */
  .drive-view-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    margin: 0 -0.6rem 0.85rem;
    padding: 0.2rem 0.6rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .drive-view-tabs::-webkit-scrollbar { display: none; }
  .drive-view-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 2.35rem;
    padding: 0.45rem 0.95rem;
    white-space: nowrap;
  }
  .drive-view-tab--secondary { margin-left: 0; }

  /* --- Type filters: horizontal scroll rail --- */
  .drive-type-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -0.6rem 0.85rem;
    padding: 0.15rem 0.6rem;
    -webkit-overflow-scrolling: touch;
  }
  .drive-type-filters::-webkit-scrollbar { display: none; }
  .drive-type-chip {
    flex: 0 0 auto;
    min-height: 2.1rem;
    padding: 0.4rem 0.8rem;
    white-space: nowrap;
  }

  /* --- Tagged-with filter chips --- */
  .drive-filter-row {
    flex-wrap: nowrap;
    align-items: center;
  }
  .drive-filter-row__label { flex: 0 0 auto; }
  .drive-filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
  }
  .drive-filter-chips::-webkit-scrollbar { display: none; }
  .drive-chip {
    flex: 0 0 auto;
    min-height: 2rem;
    white-space: nowrap;
  }

  /* --- Breadcrumbs: allow horizontal scroll for long paths --- */
  .drive-breadcrumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .drive-breadcrumbs::-webkit-scrollbar { display: none; }

  /* --- Starter hint: shrink --- */
  .drive-starter-hint {
    font-size: var(--text-sm);
    padding: 0.7rem 0.85rem;
  }

  /* --- Search form --- */
  .drive-search-form { flex-wrap: wrap; row-gap: 0.4rem; }
  .drive-search-form__input { min-height: var(--mobile-tap-min); }

  /* --- Table → card layout --- */
  .drive-table-shell {
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    border-radius: 0;
  }
  .drive-col-header { display: none !important; }

  .drive-table-body.fm-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .drive-row,
  .drive-row.fm-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: 0.6rem;
    row-gap: 0.25rem;
    min-width: 0;
    padding: 0.75rem 3rem 0.75rem 0.85rem;
    margin: 0;
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    background: var(--surface-lowest);
    box-shadow: var(--shadow-sm);
    min-height: 3.75rem;
  }
  .drive-row:last-child,
  .drive-row.fm-item:last-child { border-bottom: 1px solid var(--outline-variant); }
  .drive-row:active {
    transform: scale(0.99);
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .drive-cell--check { display: none; }

  .drive-cell--name {
    flex: 1 0 100%;
    min-width: 0;
  }
  .drive-cell--name .drive-file-link { gap: 0.6rem; }
  .drive-cell--name .drive-file-link__icon { font-size: var(--text-2xl); }
  .drive-cell--name .drive-file-link__text {
    font-weight: 550;
    font-size: var(--text-md);
  }

  /* Meta row: hide "Uploaded" (3rd cell), keep Modified/Activity, tag, size */
  .drive-row > .drive-cell:nth-child(3) { display: none; }
  .drive-cell--date,
  .drive-cell--tagged,
  .drive-cell--size {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    color: var(--on-surface-subtle);
  }
  .drive-cell--date { padding-left: 2.2rem; } /* line up under the icon */
  .drive-cell--tagged .drive-tag {
    font-size: var(--text-xs);
    padding: 0.08rem 0.4rem;
  }
  /* Empty placeholders clutter the meta row on mobile — drop them */
  .drive-row .drive-cell--dash,
  .drive-row .drive-cell--tagged:has(.drive-cell--dash),
  .drive-row .drive-cell--size:empty {
    display: none;
  }

  /* Actions: pin to right, trim to the essentials on mobile */
  .drive-cell--actions {
    position: absolute;
    right: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    gap: 0;
  }
  .drive-row-action[title="Star"],
  .drive-row-action[title="Unstar"],
  .drive-row-action[title="Copy share link"],
  .drive-row-action[title="Download"] {
    display: none;
  }
  .drive-row-action,
  .drive-row-action-form button {
    width: var(--mobile-tap-min);
    height: var(--mobile-tap-min);
  }

  /* --- Bulk toolbar: fixed to bottom of viewport with safe-area --- */
  .drive-bulk-toolbar {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: max(0.75rem, var(--safe-bottom));
    z-index: 60;
    margin-bottom: 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(15, 20, 30, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: color-mix(in srgb, var(--primary) 14%, var(--surface-lowest) 86%);
  }
  .drive-bulk-toolbar__actions .drive-btn--sm {
    min-height: 2.4rem;
    padding: 0.45rem 0.7rem;
    font-size: var(--text-sm);
  }

  /* --- Preview panel: full-screen slide-up --- */
  .drive-preview-panel {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 92vh;
    max-height: 92dvh;
    border-left: none;
    border-top: 1px solid var(--outline-variant);
    border-radius: 18px 18px 0 0;
    padding-bottom: max(0px, var(--safe-bottom));
    animation: mobile-sheet-in 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .drive-preview-panel__head { padding: 0.95rem 1rem; }
  /* Grabber handle */
  .drive-preview-panel::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 4px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--on-surface) 18%, transparent);
    pointer-events: none;
  }
  .drive-preview-panel__close {
    min-width: var(--mobile-tap-min);
    min-height: var(--mobile-tap-min);
  }

  /* --- New folder & Move modals: bottom sheets --- */
  .join-overlay:has(.drive-folder-modal) {
    align-items: flex-end;
  }
  .drive-folder-modal {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 18px 18px 0 0;
    padding-bottom: max(1rem, var(--safe-bottom));
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: mobile-sheet-in 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .drive-folder-modal::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 4px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--on-surface) 16%, transparent);
    pointer-events: none;
  }
  .drive-folder-modal .drive-modal-actions {
    flex-direction: column-reverse;
    gap: 0.5rem;
  }
  .drive-folder-modal .drive-modal-actions .drive-btn {
    width: 100%;
    min-height: var(--mobile-tap-min);
  }
}

/* =========================================================================
   MOBILE: ADD A NEW ITEM
   Turns the sidebar "+ New" menu into a native bottom sheet and makes
   create forms feel like iOS/Android modal flows (sticky action bar at
   bottom, comfortable padding, safe-area handling).
   ========================================================================= */

/* The backdrop is always present in the DOM but only shown on mobile when
   the menu is open. :has() lets us react without JS state on the body. */
.sidebar-new-entry-backdrop { display: none; }

@media (max-width: 640px) {
  /* Backdrop fades in when the menu is visible */
  .sidebar-new-entry-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(17, 23, 33, 0.42);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-standard);
    z-index: 265;
  }
  /* The controller teleports the backdrop + menu out to document.body on
     mobile (to escape the sidebar's transform containing block), so the
     `:has()` lookup has to start from the document root, not the trigger. */
  body:has(.sidebar-new-entry-menu:not([hidden])) .sidebar-new-entry-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Menu becomes a full-width action sheet anchored to the bottom edge.
     Overrides the desktop positioning in both `.sidebar-new-entry-menu`
     (line 3300) and `.binder-sidebar__create-menu.sidebar-new-entry-menu`
     (line 1766). */
  .sidebar-new-entry-menu,
  .binder-sidebar__create-menu.sidebar-new-entry-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.35rem 0.5rem max(0.75rem, var(--safe-bottom));
    border-radius: 20px 20px 0 0;
    max-height: min(82vh, 34rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 270;
    box-shadow: 0 -12px 40px rgba(15, 20, 30, 0.22);
    animation: mobile-sheet-in 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Sheet header — grabber + title */
  .sidebar-new-entry-sheet-head {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0 0.6rem;
    background: #ffffff;
    z-index: 1;
  }
  .sidebar-new-entry-sheet-grabber {
    width: 2.5rem;
    height: 4px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--on-surface) 16%, transparent);
  }
  .sidebar-new-entry-sheet-title {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-surface-subtle);
  }

  /* Larger, more tappable option rows inside the sheet */
  .sidebar-new-entry-menu .sidebar-new-entry-option,
  .binder-sidebar__create-menu.sidebar-new-entry-menu .sidebar-new-entry-option {
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.9rem;
    min-height: var(--mobile-tap-min);
    border-radius: var(--radius-md);
  }
  .sidebar-new-entry-menu .sidebar-new-entry-dot {
    width: 14px;
    height: 14px;
    margin-top: 0;
  }
  .sidebar-new-entry-menu .sidebar-new-entry-label {
    font-size: var(--text-md);
  }
  .sidebar-new-entry-menu .sidebar-new-entry-desc {
    font-size: var(--text-sm);
    margin-top: 2px;
  }
  .sidebar-new-entry-more {
    margin-top: 0.35rem;
    padding-top: 0.45rem;
  }
  .sidebar-new-entry-more__summary {
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.9rem;
    min-height: var(--mobile-tap-min);
    border-radius: var(--radius-md);
  }
  .sidebar-new-entry-more__icon {
    width: 14px;
    margin-top: 0;
    font-size: 1.25rem;
  }
  .sidebar-new-entry-menu .sidebar-new-entry-option--secondary {
    padding-left: 2.25rem;
  }
}

/* Hide the sheet header on desktop — it's only meaningful in the sheet */
@media (min-width: 641px) {
  .sidebar-new-entry-sheet-head { display: none; }
}

/* =========================================================================
   TOOLBAR QUICK-ADD (mobile mirror of the sidebar's "+ New")
   The sidebar's quick-add lives behind a now-hidden drawer on phones.
   This mirror sits in the toolbar's leading slot — matches iOS's
   top-leading + (QuickAddToolbar) — and pops up the same record-type
   sheet via its own Stimulus instance. Hidden ≥769px so the sidebar
   button keeps its place on tablet+.
   ========================================================================= */

.toolbar-quick-add { display: none; }

@media (max-width: 768px) {
  .toolbar-quick-add {
    display: inline-flex;
    position: relative;
    align-items: center;
  }

  .toolbar-quick-add__btn {
    /* Inherits .binder-toolbar__menu-btn sizing/tap-target rules from
       the existing toolbar styles; this just paints the iOS-style
       primary tint on top. */
    color: var(--primary);
  }
  .toolbar-quick-add__btn .material-symbols-outlined {
    font-variation-settings: "FILL" 1, "wght" 600;
  }
  .toolbar-quick-add__btn:active {
    transform: scale(0.94);
  }
}

/* =========================================================================
   MOBILE: FORM ACTION BAR
   Pins the primary submit action to the bottom of the viewport on phones,
   so the user's thumb doesn't have to chase a scroll-dependent button.
   Reserves space at the bottom of the form so the sticky bar never covers
   the last field.
   ========================================================================= */

@media (max-width: 640px) {
  .curriculum-list-item-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .curriculum-list-item-row__remove,
  .curriculum-list-item-row__remove-check {
    justify-content: flex-start;
    padding-inline: 0;
  }

  /* Reserve space so content isn't hidden behind the fixed action bar.
     Covers any form in the app that uses the shared `.form-actions` row. */
  form:has(.form-actions) {
    padding-bottom: calc(5.5rem + var(--safe-bottom));
  }

  /* Fixed (not sticky) because the host scroll container `.bc-main` has
     `overflow: auto` but doesn't actually scroll — sticky would be trapped
     inside its block formatting context and never engage. Fixed is anchored
     to the viewport regardless.

     Must also drop `backdrop-filter` on `.form-card` on mobile: a
     backdrop-filtered ancestor establishes a containing block for its
     fixed-position descendants, which would pin this bar inside the card
     instead of the viewport. */
  .form-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .form-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0.75rem max(0.85rem, var(--safe-left)) max(0.75rem, var(--safe-bottom)) max(0.85rem, var(--safe-right));
    background: color-mix(in srgb, var(--surface-lowest) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-top: 1px solid var(--outline-variant);
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: 0.5rem;
    z-index: 55;
  }

  .form-actions > .btn,
  .form-actions > button[type="submit"],
  .form-actions > input[type="submit"] {
    flex: 1 1 auto;
    min-height: var(--mobile-tap-min);
    font-size: var(--text-md);
  }
  .form-actions > .btn-ghost,
  .form-actions > .btn-danger {
    flex: 0 0 auto;
    min-height: var(--mobile-tap-min);
  }

  /* Comfortable horizontal breathing room for form containers on phones */
  .binder-form,
  .doc-form,
  form.record-form {
    padding-left: max(0.85rem, var(--safe-left));
    padding-right: max(0.85rem, var(--safe-right));
  }
}

/* =========================================================================
   MOBILE: RECORDS (FORMAL RECORDS)
   The index already collapses to 1 column at 720px; this pass tightens
   the layout for phones — removes redundant chrome, reclaims padding,
   shrinks hero copy, and enforces 44px tap targets on the card CTAs.
   ========================================================================= */

@media (max-width: 640px) {
  /* The page-header ("Formal Records / Transcripts, compliance…") duplicates
     the hero eyebrow + title directly below it. On a small screen the
     redundancy costs ~140px of vertical real estate for no new information.
     Keep the page-header when it's specifically the formal-records flavor
     so other pages are unaffected. */
  .page-header--formal-records { display: none; }

  /* Hero: tighter padding, compact title, readable body */
  .formal-records-hero {
    padding: 1.05rem 1.1rem;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
    border-radius: var(--radius-lg);
  }
  .formal-records-hero__eyebrow {
    font-size: var(--text-xs);
    margin-bottom: 0.2rem;
  }
  .formal-records-hero__title {
    font-size: var(--text-xl);
    text-wrap: balance;
  }
  .formal-records-hero__body {
    font-size: var(--text-base);
    line-height: 1.45;
    margin-top: 0.3rem;
  }
  .formal-records-hero__actions {
    width: 100%;
    gap: 0.5rem;
  }
  .formal-records-hero__actions .btn,
  .formal-records-hero__actions .btn-ghost {
    width: 100%;
    min-height: var(--mobile-tap-min);
    justify-content: center;
  }

  /* Cards: tighter padding, bigger radius for an iOS card feel */
  .formal-records-grid {
    gap: 0.75rem;
    margin-bottom: 0.85rem;
  }
  .formal-record-card {
    padding: 1rem 1.05rem;
    gap: 0.7rem;
    border-radius: var(--radius-lg);
  }
  .formal-record-card__head { gap: 0.6rem; }
  .formal-record-card__icon { font-size: var(--text-xl); }
  .formal-record-card__title { font-size: var(--text-md); }
  .formal-record-card__subtitle {
    font-size: var(--text-sm);
    line-height: 1.35;
  }
  .formal-record-card__stats {
    gap: 1rem;
  }
  .formal-record-card__stat { font-size: var(--text-xl); }
  .formal-record-card__label { font-size: var(--text-xs); }
  .formal-record-card__summary {
    font-size: var(--text-base);
    line-height: 1.45;
  }

  /* CTAs: the stacked column layout inherits from the 720px rule, just
     make sure every button clears the 44px tap target. */
  .formal-record-card__actions {
    width: 100%;
    gap: 0.4rem;
  }
  .formal-record-card__actions .btn,
  .formal-record-card__actions .btn-ghost,
  .formal-record-card__actions .btn-sm,
  .formal-record-card__actions .btn-ghost.btn-sm {
    width: 100%;
    min-height: var(--mobile-tap-min);
    justify-content: center;
    font-size: var(--text-base);
    padding: 0.65rem 1rem;
  }

  /* Helper section at the bottom: tighter padding, looser line-height */
  .formal-records-helper {
    gap: 0.75rem;
  }
  .formal-records-helper__card {
    padding: 1rem 1.05rem;
    border-radius: var(--radius-lg);
  }
  .formal-records-helper__card h3 {
    font-size: var(--text-md);
    margin-bottom: 0.45rem;
  }
  .formal-records-helper__card ul { gap: 0.35rem; }
  .formal-records-helper__card p,
  .formal-records-helper__card li {
    font-size: var(--text-base);
    line-height: 1.5;
  }
}

/* =========================================================================
   MOBILE: AI CHAT
   The AI chat already collapses to a single column + drawer sidebar at 768px.
   This pass fixes leftover rough edges for a native chat feel:
   - unhides the sidebar toggle that the existing CSS broke via source order
   - pins the composer above the home bar with safe-area padding
   - scales the send / stop buttons to a 44px tap target
   - restores the keyboard hint as a subtle one-liner above the composer
   - makes per-message action buttons horizontally scrollable instead of
     cramping in a 3-column grid on very narrow screens
   ========================================================================= */

@media (max-width: 768px) {
  /* Force the mobile toggle visible — the base rule at line 26025 is declared
     AFTER the existing 768px override and wins on source order, hiding it on
     every viewport. Giving the mobile rule higher specificity fixes it without
     reordering the file. */
  .ai-chat-header .ai-chat-mobile-toggle {
    display: inline-flex;
    min-width: var(--mobile-tap-min);
    min-height: var(--mobile-tap-min);
  }

  /* Drawer should slide above the main app sidebar when it opens */
  .ai-chat-sidebar {
    top: max(0px, var(--safe-top));
    bottom: max(0px, var(--safe-bottom));
    padding-bottom: max(0.5rem, var(--safe-bottom));
  }

  /* Header: align title-chip stacking and keep the delete icon at 44px */
  .ai-chat-header {
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
  }
  .ai-chat-header-title {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ai-chat-header-action {
    min-width: var(--mobile-tap-min);
    min-height: var(--mobile-tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Composer: clear the home bar and feel anchored */
  .ai-chat-composer {
    padding: 0.5rem 0.75rem max(0.6rem, var(--safe-bottom));
    background: var(--surface);
  }
  .ai-chat-input-row {
    padding: 0.45rem 0.45rem 0.45rem 0.95rem;
    gap: 0.4rem;
  }
  .ai-chat-input {
    font-size: max(16px, 0.95rem); /* prevent iOS zoom on focus */
    padding: 0.5rem 0.4rem;
  }
  .ai-chat-send-btn,
  .ai-chat-stop-btn {
    width: var(--mobile-tap-min);
    height: var(--mobile-tap-min);
    padding: 0;
    border-radius: var(--radius-lg);
  }
  .ai-chat-send-btn .material-symbols-outlined,
  .ai-chat-stop-btn .material-symbols-outlined {
    font-size: var(--text-xl);
  }

  /* Bring back the keyboard hint as a subtle one-liner above the composer.
     The original mobile CSS hid it entirely, which loses context about
     ⌘-Enter behavior. Condense rather than remove. */
  .ai-chat-composer .ai-chat-input-hint {
    display: block;
    font-size: var(--text-xs);
    margin-top: 0.3rem;
    opacity: 0.7;
  }

  /* Per-message actions (Copy / Save to lesson / Save to record): the
     default is a 3-column grid that wraps text awkwardly at narrow widths.
     On mobile, let them scroll horizontally as a chip rail. */
  .ai-chat-message-actions {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0.35rem;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
  }
  .ai-chat-message-actions::-webkit-scrollbar { display: none; }
  .ai-chat-message-actions > * {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 2.25rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
  }

  /* Welcome suggestions: make them feel like tap chips, not cards */
  .ai-chat-suggestions > * {
    min-height: var(--mobile-tap-min);
    padding: 0.85rem 1rem;
    border-radius: var(--radius-lg);
  }
}

/* =========================================================================
   MOBILE UI UNIFORMITY (Tier 1)
   Cross-cutting mobile polish that aligns the web's primary list / modal /
   empty-state surfaces with the iOS app's feel. Limited to ≤640px so
   tablet+ stays put. Built on top of the MOBILE FOUNDATION primitives
   already established above (--mobile-tap-min, --safe-bottom,
   .mobile-sheet, mobile-sheet-in keyframes).
   ========================================================================= */

@media (max-width: 640px) {
  /* ─── Shared list rows ───────────────────────────────────────────
     iOS list rows are full-bleed (edge-to-edge dividers), generously
     tappable (≥56px), and respond to the press with a subtle dim.
     Apply that treatment to the two row partials that today use
     bordered-card or flexbox layouts: `.lesson-item` and
     `.portfolio-item`. The Files table already has its own mobile
     pass higher up. */

  .lesson-item {
    padding: 0.95rem 1rem;
    min-height: 56px;
    gap: 0.85rem;
  }
  .lesson-item:active {
    background: color-mix(in srgb, var(--on-surface) 5%, transparent);
  }
  /* Full-bleed divider: counter the page's horizontal padding so the
     hairline runs edge-to-edge, the way a UITableView does. */
  .lesson-item {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
  .lesson-check-btn {
    min-width: var(--mobile-tap-min);
    min-height: var(--mobile-tap-min);
    margin-left: -0.4rem;
  }

  .portfolio-item {
    padding: 0.85rem 1rem;
    min-height: 64px;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
    border-bottom: 1px solid var(--outline-variant);
    border-radius: 0;
  }
  .portfolio-item:active {
    background: color-mix(in srgb, var(--on-surface) 5%, transparent);
  }
  .portfolio-item:hover {
    /* Mobile shouldn't render a hover state — :hover sticks after tap
       on iOS Safari. The :active rule above gives press feedback. */
    background: transparent;
  }
  .portfolio-item__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }
  .portfolio-item__title {
    font-size: var(--text-md);
    line-height: 1.3;
  }
  .portfolio-item__preview {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  /* ─── Generic modal → bottom sheet ───────────────────────────────
     The Files folder modal already slides up from the bottom (above,
     line ~29967). Extend the same treatment to the other three modal
     classes in use across the app so every modal feels consistent on
     mobile. Each gets: full-width, top-rounded corners only, slide-up
     animation, safe-area-aware bottom padding, and a grabber handle. */

  /* Generic .join-overlay modals (without the drive-folder variant —
     that one already has a more specific rule). */
  .join-overlay:not(:has(.drive-folder-modal)) {
    align-items: flex-end;
  }
  .join-overlay:not(:has(.drive-folder-modal)) .join-modal-content {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 18px 18px 0 0;
    padding-top: 1.6rem;
    padding-bottom: max(1rem, var(--safe-bottom));
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: mobile-sheet-in 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .join-overlay:not(:has(.drive-folder-modal)) .join-modal-content::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 4px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--on-surface) 16%, transparent);
    pointer-events: none;
  }

  /* Native <dialog>-based share modal. */
  .share-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    padding-bottom: max(1rem, var(--safe-bottom));
    animation: mobile-sheet-in 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .share-modal-actions {
    flex-direction: column-reverse;
    gap: 0.5rem;
  }
  .share-modal-actions > * {
    width: 100%;
    min-height: var(--mobile-tap-min);
  }

  /* Portfolio quick-add. */
  .portfolio-new-overlay {
    align-items: flex-end;
  }
  .portfolio-new-overlay .portfolio-new-modal {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 18px 18px 0 0;
    padding-top: 1.6rem;
    padding-bottom: max(1rem, var(--safe-bottom));
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: mobile-sheet-in 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .portfolio-new-overlay .portfolio-new-modal::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 4px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--on-surface) 16%, transparent);
    pointer-events: none;
  }

  /* ─── Empty states ───────────────────────────────────────────────
     The desktop .empty-state lifts the content with 5rem of vertical
     padding and a 32px title — comfortable on a 1280px canvas, but
     dominates a 375px screen. iOS's ContentUnavailableView renders
     tighter and lets the content breathe. */
  .empty-state {
    padding: 2.5rem 1.5rem;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .empty-icon {
    font-size: 2.4rem;
    margin-bottom: 0.85rem;
  }
  .empty-title {
    font-size: var(--text-xl);
    margin-bottom: 0.4rem;
  }
  .empty-desc {
    font-size: var(--text-sm);
    line-height: 1.55;
  }

  /* ─── Native input affordances ───────────────────────────────────
     Accent color drives radio/checkbox tints to the brand orange so
     forms don't feel default-system. */
  input[type="radio"],
  input[type="checkbox"] {
    accent-color: var(--primary);
  }
}

/* =========================================================================
   MOBILE TAB BAR (Tier 2)
   Fixed-bottom tab nav with four direct destinations plus a More sheet for
   secondary routes. Tab bar respects safe-area-inset-bottom. The main scroll
   container gets bottom padding so the last row never hides under it.
   ========================================================================= */

.mobile-tab-bar { display: none; }

@media (max-width: 768px) {
  :root {
    --mobile-tab-bar-height: 52px;
  }

  .mobile-tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 180;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    height: calc(var(--mobile-tab-bar-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    border-top: 1px solid var(--outline-variant);
    /* Frosted glass for the iOS-app look on Safari; falls back to a
       solid surface tint elsewhere. */
    background: color-mix(in srgb, var(--surface-lowest) 88%, transparent);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
  }

  .mobile-tab-bar__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 3px;
    min-height: var(--mobile-tab-bar-height);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--on-surface-subtle);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .mobile-tab-bar__item:active {
    transform: scale(0.95);
  }

  .mobile-tab-bar__icon {
    font-size: 22px !important;
    line-height: 1;
    /* Variation settings give the iOS "selected tab" feel — heavier
       and filled when active. */
    font-variation-settings: "FILL" 0, "wght" 400;
    transition: font-variation-settings var(--duration-fast) var(--ease-standard);
  }

  .mobile-tab-bar__label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 500;
  }

  .mobile-tab-bar__item--active {
    color: var(--primary);
  }

  .mobile-tab-bar__item--active .mobile-tab-bar__icon {
    font-variation-settings: "FILL" 1, "wght" 600;
  }

  .mobile-tab-bar__item--active .mobile-tab-bar__label {
    font-weight: 600;
  }

  .mobile-tab-bar__more {
    flex: 1 1 0;
    min-width: 0;
  }

  .mobile-tab-bar__more-trigger {
    width: 100%;
    height: 100%;
  }

  .mobile-tab-bar__more > summary {
    list-style: none;
  }

  .mobile-tab-bar__more > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-tab-bar__more-backdrop {
    position: fixed;
    inset: 0;
    z-index: 185;
    padding: 0;
    border: 0;
    background: rgba(17, 23, 33, 0.28);
    cursor: default;
  }

  .mobile-tab-bar__more-sheet {
    position: fixed;
    left: max(0.65rem, var(--safe-left));
    right: max(0.65rem, var(--safe-right));
    bottom: calc(var(--mobile-tab-bar-height) + var(--safe-bottom) + 0.55rem);
    z-index: 190;
    padding: 0.6rem;
    border: 1px solid color-mix(in srgb, var(--outline-variant) 85%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-lowest) 96%, transparent);
    box-shadow: 0 16px 42px rgba(15, 20, 30, 0.22);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
  }

  .mobile-tab-bar__more-grabber {
    width: 2.4rem;
    height: 4px;
    margin: 0.05rem auto 0.4rem;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--on-surface) 18%, transparent);
  }

  .mobile-tab-bar__more-title {
    margin: 0 0 0.55rem;
    color: var(--on-surface-subtle);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
  }

  .mobile-tab-bar__more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .mobile-tab-bar__more-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: var(--mobile-tap-min);
    padding: 0.65rem 0.7rem;
    border-radius: var(--radius-md);
    color: var(--on-surface);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 650;
    line-height: 1.2;
  }

  .mobile-tab-bar__more-item .material-symbols-outlined {
    flex: 0 0 auto;
    color: var(--on-surface-subtle);
    font-size: 1.35rem;
  }

  .mobile-tab-bar__more-item--active {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
  }

  .mobile-tab-bar__more-item--active .material-symbols-outlined {
    color: var(--primary);
    font-variation-settings: "FILL" 1, "wght" 600;
  }

  /* Reserve space at the bottom of the main scroll container so the
     tab bar doesn't cover the last row. */
  .bc-main {
    padding-bottom: calc(var(--mobile-tab-bar-height) + var(--safe-bottom) + 1rem);
  }

  .beta-notice {
    bottom: calc(var(--mobile-tab-bar-height) + var(--safe-bottom) + 0.75rem);
    z-index: 160;
  }

  /* The hamburger toggle is no longer needed — the tab bar carries
     primary nav, and the orphaned routes live in the account sheet
     accessed from the avatar in the toolbar. */
  .sidebar-mobile-toggle,
  .binder-toolbar__start > .sidebar-mobile-toggle.binder-toolbar__menu-btn {
    display: none;
  }

  /* The drawer-style sidebar is mobile dead weight now. Hide it
     entirely (it can still be reached via direct URL navigation;
     the slide-in interaction is gone). */
  .binder-sidebar.sidebar-shell,
  .binder-sidebar-overlay {
    display: none;
  }
}

@media (max-width: 380px) {
  .mobile-tab-bar__item {
    padding-inline: 1px;
  }

  .mobile-tab-bar__icon {
    font-size: 22px !important;
  }

  .mobile-tab-bar__label {
    font-size: 9px;
    letter-spacing: 0;
  }
}

/* Mobile-only nav section in the avatar dropdown. Hidden on tablet+
   because the left sidebar already covers these routes there. */
.bc-user-dropdown-section--mobile-only,
.bc-user-dropdown-item--mobile-only,
.bc-user-dropdown-sheet-head,
.notif-dropdown-sheet-head {
  display: none;
}

@media (max-width: 768px) {
  .bc-user-dropdown-section--mobile-only,
  .bc-user-dropdown-item--mobile-only {
    display: flex;
  }
  .bc-user-dropdown-section--mobile-only {
    /* Match the existing section label style. */
    align-items: center;
  }

  /* Avatar + bell dropdowns become slide-up sheets on mobile. The
     existing Stimulus controllers (`new-entry`, `notifications`)
     already toggle these elements via [hidden]; we just restyle them
     so the open state is a sheet rather than a positioned card. */
  .bc-user-dropdown,
  .notif-dropdown {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    padding-top: 1.6rem !important;
    padding-bottom: max(1rem, var(--safe-bottom)) !important;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1100;
    animation: mobile-sheet-in 0.24s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  }

  /* Backdrop. Generated via :not([hidden]) on the sheet so we don't
     need any extra DOM. */
  .bc-user-dropdown:not([hidden])::before,
  .notif-dropdown:not([hidden])::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(2px);
    z-index: -1;
    /* The backdrop is purely visual; outside-tap-to-close logic
       lives in the existing Stimulus controllers. */
  }

  .bc-user-dropdown-sheet-head,
  .notif-dropdown-sheet-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: -0.85rem;
    margin-bottom: 0.5rem;
  }
  .bc-user-dropdown-sheet-grabber,
  .notif-dropdown-sheet-grabber {
    width: 2.5rem;
    height: 4px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--on-surface) 16%, transparent);
  }
  .bc-user-dropdown-sheet-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-subtle);
  }

  /* Tighten dropdown items for sheet density. */
  .bc-user-dropdown-item {
    min-height: var(--mobile-tap-min);
    padding: 0.7rem 1rem;
  }
  .notif-item {
    min-height: var(--mobile-tap-min);
    padding: 0.85rem 1rem;
  }
}

/* Planner reskin late overrides. Kept at the end so these Binder-facing
   classes win over the legacy `.gcal-*` calendar rules above. */
.planner-reskin .planner-toolbar {
  background: color-mix(in srgb, var(--planner-surface) 94%, transparent);
  border: 1px solid var(--planner-line);
  border-radius: var(--radius-2xl);
  box-shadow: var(--planner-shadow);
  margin: 1rem 1rem 0.85rem;
  padding: 0.75rem;
}

.planner-reskin .planner-title {
  color: var(--planner-ink);
  font-size: 1.18rem;
  font-weight: 760;
  letter-spacing: 0;
}

.planner-reskin .planner-action-btn,
.planner-reskin .planner-today-btn,
.planner-reskin .planner-nav-arrow {
  background: var(--planner-control);
  border: 1px solid var(--planner-line);
  border-radius: var(--radius-full);
  color: var(--planner-ink);
  font-weight: 700;
}

.planner-reskin .planner-action-btn--primary {
  background: var(--planner-accent);
  border-color: var(--planner-accent);
  color: #ffffff;
}

.planner-reskin .planner-view-switcher {
  background: var(--planner-wash);
  border: 1px solid var(--planner-line);
  border-radius: var(--radius-full);
  padding: 0.18rem;
}

.planner-reskin .planner-view-btn {
  border-radius: var(--radius-full);
  color: var(--planner-muted);
  font-weight: 700;
}

.planner-reskin .planner-view-btn--active {
  background: var(--planner-control);
  color: var(--planner-ink);
  box-shadow: 0 1px 3px rgba(54, 42, 26, 0.08);
}

/* ── Planner overflow menu (kebab) ── */
.planner-reskin .planner-overflow-menu {
  position: relative;
}

.planner-reskin .planner-overflow-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--planner-control);
  border: 1px solid var(--planner-line);
  border-radius: var(--radius-full);
  color: var(--planner-ink);
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.planner-reskin .planner-overflow-trigger::-webkit-details-marker { display: none; }
.planner-reskin .planner-overflow-trigger:hover {
  background: var(--planner-wash);
  box-shadow: 0 1px 3px rgba(54, 42, 26, 0.08);
}
.planner-reskin .planner-overflow-trigger svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.planner-reskin .planner-overflow-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: 6px;
  z-index: 100;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.planner-reskin .planner-overflow-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--planner-ink);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease;
}
.planner-reskin .planner-overflow-item:hover {
  background: var(--planner-wash);
}
.planner-reskin .planner-overflow-item .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

.planner-reskin .planner-overflow-divider {
  height: 1px;
  background: var(--planner-line);
  margin: 4px 8px;
}

/* Rich overflow menu — items with icon, label, and description */
.planner-reskin .planner-overflow-dropdown--rich {
  min-width: 19rem;
  padding: 0.4rem;
}

.planner-reskin .planner-overflow-form {
  margin: 0;
}

.planner-reskin .planner-overflow-section {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--planner-muted);
  padding: 0.6rem 0.75rem 0.35rem;
}

.planner-reskin .planner-overflow-item--rich {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  text-align: left;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--planner-ink);
  text-decoration: none;
  transition: background 0.12s ease;
}

.planner-reskin .planner-overflow-item--rich:hover,
.planner-reskin .planner-overflow-item--rich:focus-visible {
  background: var(--planner-wash);
  outline: none;
}

.planner-reskin .planner-overflow-icon {
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 0.1rem;
  color: var(--planner-accent-strong);
  flex-shrink: 0;
}

.planner-reskin .planner-overflow-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.planner-reskin .planner-overflow-label {
  font-weight: 600;
  color: var(--planner-ink);
  line-height: 1.3;
}

.planner-reskin .planner-overflow-desc {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--planner-muted);
  line-height: 1.35;
}

.planner-reskin .planner-week,
.planner-reskin .planner-month,
.planner-reskin .planner-day-view {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  margin: 0;
  overflow: hidden;
}

.planner-reskin .planner-week__head,
.planner-reskin .planner-month__head {
  background: #f7efe2;
  border-bottom: 1px solid var(--planner-line);
}

.planner-reskin .planner-week__col,
.planner-reskin .planner-week-cell,
.planner-reskin .planner-month-cell,
.planner-reskin .planner-day-column,
.planner-reskin .planner-day-lessons {
  border-color: var(--planner-line);
}

.planner-reskin .planner-week__col-head--today,
.planner-reskin .planner-week__col--today,
.planner-reskin .planner-month-cell--today {
  background: rgba(47, 111, 115, 0.07);
}

.planner-reskin .planner-lesson-card {
  border: 1px solid rgba(47, 42, 34, 0.08);
  border-left: 4px solid rgba(47, 111, 115, 0.38);
  border-radius: var(--radius-full);
  box-shadow: 0 6px 16px rgba(54, 42, 26, 0.08);
  color: var(--planner-ink);
  padding: 0.48rem 0.55rem;
}

.planner-reskin .planner-lesson-card--done {
  background: #eef6ef;
  border-left-color: #4f8b5b;
  color: rgba(47, 42, 34, 0.72);
}

.planner-reskin .planner-add-btn,
.planner-reskin .planner-month-add {
  border-radius: var(--radius-full);
  color: var(--planner-accent-strong);
  font-weight: 750;
}

/* Week/day schedule add controls: not full pills (overrides rule above). */
.planner-reskin .gcal-cell-add,
.planner-reskin .gcal-day-add-btn {
  border-radius: var(--radius-md);
}

/* Binder-theme planner pass. This intentionally overrides the first scaffold
   with the actual app tokens: ember primary, mauve rails, white cards on the
   cool-slate canvas, and low neutral shadows. */
.planner-reskin {
  --planner-ink: var(--on-surface);
  --planner-muted: var(--on-surface-mid);
  --planner-subtle: var(--on-surface-subtle);
  --planner-line: var(--outline-variant);
  --planner-line-strong: var(--outline);
  --planner-surface: var(--surface-lowest);
  --planner-panel: var(--surface-container-low);
  --planner-wash: var(--surface-container);
  --planner-accent: var(--primary);
  --planner-accent-strong: var(--primary-hover);
  --planner-shadow: var(--shadow-sm);
  background: transparent;
  gap: var(--space-5);
  padding: var(--space-4);
}

.planner-reskin .planner-sidebar {
  align-self: flex-start;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  gap: var(--space-6);
  padding: var(--space-4);
  width: 220px;
}

.planner-reskin .planner-sidebar-title {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.planner-reskin .planner-child-item,
.planner-reskin .planner-subject-item {
  color: var(--on-surface-mid);
  border-radius: var(--radius-full);
  padding: var(--space-2);
}

.planner-reskin .planner-child-item:hover,
.planner-reskin .planner-subject-item:hover {
  background: var(--surface-lowest);
  border-color: var(--outline-variant);
}

.planner-reskin .planner-main {
  gap: var(--space-4);
}

.planner-reskin .planner-toolbar {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.planner-reskin .planner-title {
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.planner-reskin .planner-action-btn,
.planner-reskin .planner-today-btn,
.planner-reskin .planner-nav-arrow {
  background: var(--surface-lowest);
  border-color: var(--outline-variant);
  border-radius: var(--radius-full);
  color: var(--on-surface);
  box-shadow: none;
}

.planner-reskin .planner-action-btn:hover,
.planner-reskin .planner-today-btn:hover,
.planner-reskin .planner-nav-arrow:hover {
  background: var(--surface-container-low);
  border-color: var(--outline);
  color: var(--primary);
}

.planner-reskin .planner-action-btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.planner-reskin .planner-action-btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--on-primary);
}

.planner-reskin .planner-view-switcher {
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  padding: 0.25rem;
  gap: 0.15rem;
  overflow: visible;
  margin-left: 0.5rem;
}

.planner-reskin .planner-view-btn {
  background: transparent;
  border: 0;
  border-right: 0 !important;
  border-radius: var(--radius-full);
  color: var(--on-surface-mid);
  padding: 0.35rem 0.75rem;
  font-weight: 600;
}

.planner-reskin .planner-view-btn:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.planner-reskin .planner-view-btn--active {
  background: var(--surface-lowest);
  color: var(--on-surface);
  box-shadow: var(--shadow-sm);
}

.planner-reskin .planner-week,
.planner-reskin .planner-month,
.planner-reskin .planner-day-view {
  background: var(--surface-lowest);
  border-color: var(--outline-variant);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  margin: 0;
}

.planner-reskin .planner-week__head,
.planner-reskin .planner-month__head,
.planner-reskin .planner-day-view__header {
  background: var(--surface-container-low);
  border-color: var(--outline-variant);
}

.planner-reskin .planner-week__col-head,
.planner-reskin .planner-month__day-label {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 700;
}

.planner-reskin .planner-week__body,
.planner-reskin .planner-month-grid,
.planner-reskin .planner-day-columns {
  background: var(--surface-lowest);
}

.planner-reskin .planner-week__col,
.planner-reskin .planner-month-cell,
.planner-reskin .planner-day-column {
  background: var(--surface-lowest);
  border-color: var(--outline-variant);
}

.planner-reskin .planner-week__col:hover,
.planner-reskin .planner-month-cell:hover {
  background: var(--surface-container-low);
}

.planner-reskin .planner-week__col-head--today,
.planner-reskin .planner-week__col--today,
.planner-reskin .planner-month-cell--today {
  background: var(--primary-soft);
}

.planner-reskin .planner-week__col--today:hover,
.planner-reskin .planner-month-cell--today:hover {
  background: color-mix(in srgb, var(--primary-soft) 74%, var(--surface-lowest));
}

.planner-reskin .planner-day-num {
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.planner-reskin .planner-day-num--today {
  background: transparent;
  color: var(--primary);
  font-weight: 700;
  text-shadow: 0 0 18px rgba(112, 108, 252, 0.45), 0 0 6px rgba(112, 108, 252, 0.25);
}

.planner-reskin .planner-week-cell,
.planner-reskin .planner-day-lessons {
  background: color-mix(in srgb, var(--surface-lowest) 82%, var(--surface-container-low));
  border-color: transparent;
  border-radius: var(--radius-sm);
}

.planner-reskin .planner-week-cell:hover,
.planner-reskin .planner-day-lessons:hover {
  background: var(--surface-lowest);
  box-shadow: inset 0 0 0 1px var(--outline-variant);
}

.planner-reskin .planner-add-btn {
  color: var(--on-surface-subtle);
  opacity: 0;
  transition: opacity 0.14s ease, color 0.14s ease;
}

.planner-reskin .planner-add-btn--empty {
  background: transparent;
  border-color: transparent;
  color: var(--on-surface-subtle);
}

.planner-reskin .planner-week-cell:hover .planner-add-btn,
.planner-reskin .planner-week-cell:focus-within .planner-add-btn,
.planner-reskin .planner-day-lessons:hover .planner-add-btn,
.planner-reskin .planner-day-lessons:focus-within .planner-add-btn {
  opacity: 1;
}

.planner-reskin .planner-add-btn:hover,
.planner-reskin .planner-add-btn:focus-visible {
  color: var(--primary);
}

.planner-reskin .planner-add-btn:hover,
.planner-reskin .planner-add-btn:focus-visible,
.planner-reskin .planner-month-add:hover,
.planner-reskin .planner-month-add:focus-visible {
  background: var(--primary-soft);
  color: var(--primary-hover);
}

.planner-reskin .planner-lesson-card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  color: var(--on-surface);
}

.planner-reskin .planner-lesson-card:hover {
  box-shadow: var(--shadow-md);
}

.planner-reskin .planner-lesson-card--done {
  background: var(--mint-pale);
  border-left-color: var(--mint);
  color: var(--on-surface-mid);
}

.planner-reskin .planner-month-event {
  border-radius: var(--radius-full);
}

.planner-reskin .planner-month-more {
  color: var(--primary);
}

body.theme-dark .planner-reskin {
  --planner-wash: var(--surface-container);
  background: transparent;
}

body.theme-dark .planner-reskin .planner-sidebar,
body.theme-dark .planner-reskin .planner-toolbar,
body.theme-dark .planner-reskin .planner-week,
body.theme-dark .planner-reskin .planner-month,
body.theme-dark .planner-reskin .planner-day-view,
body.theme-dark .planner-reskin .planner-week__col,
body.theme-dark .planner-reskin .planner-month-cell,
body.theme-dark .planner-reskin .planner-day-column {
  background: var(--surface-container-low);
}

/* Blank weeks should still feel like a usable planning board, not a compact
   report table. These heights give empty plans enough room while still
   letting lesson-heavy weeks grow naturally. */
.planner-reskin .planner-week {
  min-height: clamp(360px, calc(100vh - 260px), 640px);
}

.planner-reskin .planner-week__body {
  min-height: clamp(280px, calc(100vh - 360px), 540px);
}

.planner-reskin .planner-week__col {
  min-height: inherit;
}

.planner-reskin .planner-week-cell {
  flex: 1 1 0;
  min-height: 132px;
  padding: var(--space-2);
}

.planner-reskin .planner-add-btn--empty {
  align-self: stretch;
  justify-content: flex-start;
  min-height: 34px;
}

.planner-reskin .planner-day-view,
.planner-reskin .planner-day-column {
  min-height: clamp(420px, calc(100vh - 260px), 720px);
}

.planner-reskin .planner-month-cell {
  min-height: 118px;
}

@media (max-width: 900px) {
  .planner-reskin .planner-week,
  .planner-reskin .planner-day-view,
  .planner-reskin .planner-day-column {
    min-height: 420px;
  }

  .planner-reskin .planner-week__body {
    min-height: 320px;
  }

  .planner-reskin .planner-week-cell {
    min-height: 96px;
  }
}

/* ─── PostHog-style dashboard card anatomy ───
   Structured card with: color-coded left accent, header row
   (time range + title + info + menu), description, and data area.
   Used for stat cards, metric widgets, and summary panels. */

.dash-card {
  position: relative;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.dash-card:hover {
  box-shadow: var(--shadow-md);
}

.dash-card__accent {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
}
.dash-card__accent--blue   { background: #4285f4; }
.dash-card__accent--green  { background: #34a853; }
.dash-card__accent--orange { background: #fbbc04; }
.dash-card__accent--red    { background: #ea4335; }
.dash-card__accent--purple { background: #9c27b0; }
.dash-card__accent--teal   { background: #009688; }

.dash-card__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem 0.5rem;
  padding-left: 1.25rem;
}

.dash-card__time-range {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface);
  flex: 1;
}

.dash-card__info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--on-surface-subtle);
  cursor: help;
  font-size: 14px;
  transition: background var(--duration-fast) var(--ease-standard);
}
.dash-card__info:hover {
  background: var(--surface-container);
}

.dash-card__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: var(--on-surface-subtle);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.dash-card__menu:hover {
  background: var(--surface-container);
}

.dash-card__description {
  padding: 0 1rem 0.5rem;
  padding-left: 1.25rem;
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
  line-height: 1.4;
}

.dash-card__body {
  padding: 0.5rem 1rem 1rem;
  padding-left: 1.25rem;
}

.dash-card__value {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--on-surface);
}

.dash-card__subtitle {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  margin-top: 0.25rem;
}

.dash-card__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  text-align: center;
}
.dash-card__empty-icon {
  font-size: 28px;
  color: var(--on-surface-subtle);
  opacity: 0.4;
}
.dash-card__empty-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface);
}
.dash-card__empty-body {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  max-width: 240px;
}

/* ─── Template Marketplace ─────────────────────────────────────── */

.template-marketplace {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
}

.template-marketplace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1.25rem;
}

.template-marketplace-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.template-marketplace-header .page-title {
  font-size: clamp(2rem, 3vw, 2.55rem);
  font-weight: 850;
  letter-spacing: -0.03em;
}

.template-marketplace-header .page-subtitle {
  max-width: 38rem;
  color: var(--on-surface-mid);
  line-height: 1.55;
}

/* Toolbar */
.template-toolbar {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.15rem;
  flex-wrap: wrap;
}

/* Search bar */
.template-search-bar {
  position: relative;
  flex: 1;
  min-width: 260px;
}

.template-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--on-surface-subtle);
  pointer-events: none;
}

.template-search-input {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem 0.75rem 3rem;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--on-surface);
  outline: none;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.template-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
}

.template-search-input::placeholder {
  color: var(--on-surface-subtle);
}

.template-search-clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  color: var(--on-surface-subtle);
  transition: background var(--duration-base) var(--ease-standard);
}

.template-search-clear:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}

/* Filters */
.template-filters {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.template-filter-form {
  display: flex;
  gap: 0.5rem;
}

.template-filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  min-height: 3rem;
  padding: 0.6rem 2.1rem 0.6rem 0.9rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--on-surface);
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  transition: border-color var(--duration-base) var(--ease-standard);
}

.template-filter-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring-glow);
}

/* Tabs */
.template-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 1.65rem;
  flex-wrap: wrap;
  padding: 0.25rem;
  border-bottom: 1px solid var(--outline-variant);
  background: color-mix(in srgb, var(--surface-container-low) 65%, transparent);
  border-radius: var(--radius-lg);
}

.template-tab {
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-surface-subtle);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

.template-tab:hover {
  color: var(--on-surface);
  background: var(--surface-container);
}

.template-tab--active {
  color: var(--on-primary);
  background: var(--primary);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 18%, transparent);
}

.template-tab--active:hover {
  background: var(--primary-hover);
  color: var(--on-primary);
}

/* Grid */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 1rem;
  align-items: start;
}

/* Section headers */
.template-section-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  margin-bottom: 0.15rem;
  min-height: 2.4rem;
}

.template-section-header--subtle {
  margin-top: 1rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--outline-variant);
}

.template-section-icon {
  font-size: 1.25rem;
  color: var(--primary);
}

.template-section-title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 850;
  color: var(--on-surface);
  margin: 0;
  letter-spacing: -0.02em;
}

.template-section-subtitle {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  margin: 0;
  font-weight: 400;
}

.template-create-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: linear-gradient(135deg, var(--surface-lowest), color-mix(in srgb, var(--primary) 5%, var(--surface-container-low)));
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--outline-variant));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.template-create-panel[hidden] {
  display: none;
}

.template-create-panel__icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 11%, var(--surface-lowest));
  color: var(--primary);
}

.template-create-panel__icon .material-symbols-outlined {
  font-size: 1.45rem;
}

.template-create-panel__body {
  min-width: 0;
}

.template-create-panel__kicker {
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.template-create-panel h2 {
  margin: 0 0 0.2rem;
  color: var(--on-surface);
  font-size: var(--text-lg);
  font-weight: 850;
  letter-spacing: -0.02em;
}

.template-create-panel p {
  margin: 0;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.45;
}

/* Child grouping */
.template-child-group {
  grid-column: 1 / -1;
}

.template-child-label {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Cards */
.template-card {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  min-height: 8.35rem;
  text-decoration: none;
  color: inherit;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.template-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--primary) 25%, var(--outline-variant));
}

.template-card[hidden] {
  display: none;
}

/* Thumbnail */
.template-card-thumbnail {
  aspect-ratio: auto;
  min-height: 100%;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface-container-low));
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--outline-variant);
}

.template-card-thumbnail-inner {
  padding: 0.75rem 0.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.template-card-preview-badge {
  position: static;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-lowest));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.template-card-preview-badge--suggestion {
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-lowest));
}

.template-card-preview-badge--community {
  background: color-mix(in srgb, var(--primary) 15%, var(--surface-lowest));
}

.template-card-preview-badge .material-symbols-outlined {
  font-size: 1.2rem;
}

.template-card-preview-title {
  display: none;
}

.template-card-preview-meta {
  display: none;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.template-card-preview-tag {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
  color: var(--on-surface-mid);
}

.template-card-preview-days {
  display: none;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.template-card-preview-day {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}

.template-card-preview-sections {
  display: none;
}

.template-card-preview-section {
  font-size: 0.65rem;
  color: var(--on-surface-mid);
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.template-card-preview-check {
  font-size: 0.75rem;
  color: #16a34a;
}

.template-card-preview-more {
  font-size: 0.6rem;
  color: var(--on-surface-subtle);
  font-style: italic;
}

/* Card body */
.template-card-body {
  display: flex;
  min-height: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.95rem 1rem;
}

.template-card-kicker {
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0;
}

.template-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 850;
  color: var(--on-surface);
  margin: 0;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.template-card-desc {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.template-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.55rem;
  align-items: center;
  margin-top: auto;
}

.template-card-meta-item {
  font-size: var(--text-xs);
  color: var(--on-surface-mid);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.template-card-meta-icon {
  font-size: 0.85rem;
}

.template-card-meta-tags {
  flex-wrap: wrap;
  gap: 0.25rem;
  width: 100%;
}

.template-card-meta-tag {
  font-size: 0.65rem;
  font-weight: 650;
  padding: 0.16rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--surface-container);
  color: var(--on-surface-subtle);
}

.template-card-days {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}

.template-card-day-pill {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  color: var(--primary);
}

/* Badges */
.template-card-badge {
  font-size: 0.65rem;
  font-weight: 850;
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.template-card-badge--active {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}

.template-card-badge--inactive {
  background: var(--surface-variant);
  color: var(--on-surface-subtle);
}

.template-card-badge--system {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.template-card-badge--custom {
  background: var(--surface-container);
  color: var(--on-surface-mid);
}

.template-card-badge--suggested {
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
}

.template-card-badge--community {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.template-card-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--surface-variant);
  color: var(--on-surface-mid);
}

.template-card-cta {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--outline-variant);
}

.template-card-cta-text {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--primary);
}

/* Empty states */
.template-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  border: 1px solid var(--outline-variant);
}

.template-empty-icon {
  font-size: 2.5rem;
  color: var(--on-surface-subtle);
  opacity: 0.4;
  margin-bottom: 1rem;
}

.template-empty-title {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
}

.template-empty-desc {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  max-width: 380px;
  margin: 0 auto 1.25rem;
  line-height: 1.55;
}

.template-empty-search {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 2rem;
}

.template-empty-search-icon {
  font-size: 2rem;
  color: var(--on-surface-subtle);
  opacity: 0.4;
  margin-bottom: 0.75rem;
}

.template-empty-search-title {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 0.35rem;
}

.template-empty-search-desc {
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ─── Template Detail Page ─────────────────────────────────────── */

.template-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.template-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--on-surface-subtle);
  text-decoration: none;
}

.breadcrumb-link:hover {
  color: var(--primary);
}

.breadcrumb-icon {
  font-size: 1rem;
}

.template-detail-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.template-detail-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.template-detail-card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.template-detail-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.template-detail-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-container-low));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.template-detail-icon .material-symbols-outlined {
  font-size: 1.5rem;
}

.template-detail-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--on-surface);
  margin: 0 0 0.5rem;
  letter-spacing: var(--tracking-2xl);
  line-height: 1.2;
}

.template-detail-badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.template-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.template-detail-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.template-detail-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.template-detail-value {
  font-size: var(--text-base);
  color: var(--on-surface);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.template-detail-section {
  margin-bottom: 1.25rem;
}

.template-detail-section:last-child {
  margin-bottom: 0;
}

.template-detail-days {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.template-detail-day-pill {
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--surface-container);
  color: var(--on-surface-subtle);
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

.template-detail-day-pill--active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.template-detail-notes {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  line-height: 1.6;
}

.template-detail-desc {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  line-height: 1.6;
}

.template-detail-sections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.template-detail-section-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  color: var(--on-surface);
}

.template-detail-section-check {
  font-size: 1rem;
  color: #16a34a;
}

.template-detail-section-label {
  font-weight: 500;
}

.template-detail-footer {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* ─── Publish Review Page ────────────────────────────────────── */

.template-publish-alert {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
}

.template-publish-alert--warning {
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.25);
}

.template-publish-alert--info {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--outline-variant));
}

.template-publish-alert-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.template-publish-alert--warning .template-publish-alert-icon {
  color: #ca8a04;
}

.template-publish-alert--info .template-publish-alert-icon {
  color: var(--primary);
}

.template-publish-alert-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--on-surface);
  margin-bottom: 0.25rem;
}

.template-publish-alert-body {
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
  line-height: 1.5;
}

.template-publish-warnings {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.template-publish-warning-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  background: var(--surface-container-low);
  border-radius: var(--radius-md);
  border: 1px solid var(--outline-variant);
  font-size: var(--text-sm);
  color: var(--on-surface-mid);
}

.template-publish-warning-icon {
  font-size: 1.1rem;
  color: #ca8a04;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.template-publish-preview {
  padding: 0.5rem;
}

.template-publish-preview-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 1.25rem;
}

.template-publish-preview-icon {
  font-size: 1.1rem;
}

.template-publish-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding-top: 0.5rem;
}

/* ─── Form card wide variant ───────────────────────────────────── */

.form-card--wide {
  max-width: 768px;
}

/* ─── Responsive ───────────────────────────────────────────────── */

@media (max-width: 768px) {
  .template-marketplace {
    padding: 1.25rem;
  }

  .template-marketplace-header {
    flex-direction: column;
  }

  .template-marketplace-header__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .template-create-panel {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .template-create-panel .btn {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
  }

  .record-template-builder {
    padding: 1.25rem;
  }

  .record-template-builder__hero {
    grid-template-columns: 1fr;
  }

  .record-template-builder__preview {
    width: 100%;
    min-width: 0;
  }

  .record-template-builder__grid,
  .form-grid--two,
  .template-preset-picker__grid,
  .section-builder__list--cards,
  .section-builder__group-grid {
    grid-template-columns: 1fr;
  }

  .record-template-builder__actions {
    justify-content: stretch;
  }

  .record-template-builder__actions .btn,
  .record-template-builder__actions .btn-ghost {
    flex: 1;
    justify-content: center;
  }

  .template-toolbar {
    flex-direction: column;
  }

  .template-search-bar {
    min-width: 100%;
  }

  .template-filters {
    width: 100%;
  }

  .template-filter-form {
    width: 100%;
  }

  .template-filter-select {
    flex: 1;
  }

  .template-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .template-detail {
    padding: 1.25rem;
  }

  .template-detail-grid {
    grid-template-columns: 1fr;
  }

  .template-detail-sections {
    grid-template-columns: 1fr;
  }

  .template-detail-header {
    flex-direction: column;
  }

  .template-detail-actions {
    width: 100%;
  }

  .template-detail-actions .btn-ghost {
    flex: 1;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .template-card {
    grid-template-columns: 4.25rem minmax(0, 1fr);
  }

  .template-tabs {
    gap: 0.35rem;
  }

  .template-tab {
    padding: 0.4rem 0.75rem;
    font-size: var(--text-xs);
  }

  .template-publish-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .template-publish-actions .btn,
  .template-publish-actions .btn-ghost {
    width: 100%;
    text-align: center;
  }
}


/* Weekly Homeschool Brain */
.weekly-brain-header .page-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.weekly-brain-undo,
.planner-undo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
}
.weekly-brain-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--surface-lowest), var(--surface-container-low));
  box-shadow: var(--shadow-sm);
}
.weekly-brain-eyebrow {
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.weekly-brain-hero h2 {
  margin: 0.25rem 0 0;
  color: var(--on-surface);
  font-size: var(--text-2xl);
  letter-spacing: -0.03em;
}
.weekly-brain-hero p {
  max-width: 760px;
  margin: 0.55rem 0 0;
  color: var(--on-surface-mid);
  line-height: 1.55;
}
.weekly-brain-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.weekly-brain-metric {
  padding: 0.9rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
}
.weekly-brain-metric--good { border-color: color-mix(in srgb, var(--mint) 42%, var(--outline-variant)); }
.weekly-brain-metric--watch { border-color: color-mix(in srgb, var(--gold) 42%, var(--outline-variant)); }
.weekly-brain-metric-label {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.weekly-brain-metric-value {
  margin-top: 0.25rem;
  color: var(--on-surface);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
}
.weekly-brain-metric-detail {
  margin-top: 0.35rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  line-height: 1.35;
}
.weekly-brain-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 1rem;
}
.weekly-brain-card {
  padding: 1rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-sm);
}
.weekly-brain-card--wide { grid-row: span 2; }
.weekly-brain-card-head h2 {
  margin: 0;
  color: var(--on-surface);
  font-size: var(--text-xl);
}
.weekly-brain-card-head p {
  margin: 0.2rem 0 0.9rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
}
.weekly-brain-child-list,
.weekly-brain-gap-list,
.weekly-brain-suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.weekly-brain-child-row,
.weekly-brain-gap,
.weekly-brain-suggestion {
  padding: 0.8rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
}
.weekly-brain-child-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.weekly-brain-child-main strong,
.weekly-brain-gap strong,
.weekly-brain-suggestion strong {
  display: block;
  color: var(--on-surface);
}
.weekly-brain-child-main span:not(.child-dot),
.weekly-brain-gap span,
.weekly-brain-suggestion span {
  display: block;
  margin-top: 0.15rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.weekly-brain-progress {
  height: 8px;
  margin-top: 0.6rem;
  border-radius: var(--radius-full);
  background: var(--surface-container-high);
  overflow: hidden;
}
.weekly-brain-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mint);
}
.weekly-brain-gap--missing { border-color: color-mix(in srgb, var(--error) 40%, var(--outline-variant)); }
.weekly-brain-gap--warning { border-color: color-mix(in srgb, var(--gold) 45%, var(--outline-variant)); }
.weekly-brain-gap--notice { border-color: color-mix(in srgb, var(--sky) 45%, var(--outline-variant)); }
.weekly-brain-link {
  display: inline-flex;
  margin-top: 0.45rem;
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}
.weekly-brain-link:hover { text-decoration: underline; }
.weekly-brain-empty-good {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mint);
  font-weight: 700;
}
.weekly-brain-suggestion form { margin-top: 0.5rem; }
@media (max-width: 900px) {
  .weekly-brain-hero { align-items: flex-start; flex-direction: column; }
  .weekly-brain-grid { grid-template-columns: 1fr; }
  .weekly-brain-card--wide { grid-row: auto; }
}

/* =========================================================================
   Binder date picker
   Custom calendar popover for date fields, tuned to feel like modern app chrome.
   ========================================================================= */
.binder-date-input {
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--on-surface-subtle) 50%),
    linear-gradient(135deg, var(--on-surface-subtle) 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 50%, calc(100% - 0.75rem) 50%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2.35rem;
}

.binder-date-picker {
  position: absolute;
  z-index: 10000;
  width: min(18rem, calc(100vw - 1.5rem));
  padding: 0.875rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-md);
  color: var(--on-surface);
  font-family: var(--font-sans);
  user-select: none;
}

.binder-date-picker__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.binder-date-picker button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.binder-date-picker__title {
  justify-self: start;
  padding: 0.35rem 0.4rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.binder-date-picker__title:hover,
.binder-date-picker__nav:hover,
.binder-date-picker__today:hover {
  background: var(--surface-container-low);
}

.binder-date-picker__today {
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 700;
}

.binder-date-picker__nav {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-full);
  color: var(--on-surface-mid);
  font-size: 1.45rem;
  line-height: 1;
}

.binder-date-picker__weekdays,
.binder-date-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.125rem;
}

.binder-date-picker__weekdays {
  margin-bottom: 0.25rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
}

.binder-date-picker__weekdays > div {
  padding: 0.25rem 0;
}

.binder-date-picker__day {
  aspect-ratio: 1;
  min-width: 0;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--on-surface);
}

.binder-date-picker__day:hover {
  background: var(--surface-container-low);
}

.binder-date-picker__day--muted {
  color: var(--on-surface-subtle);
}

.binder-date-picker__day--today {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
  color: var(--primary);
}

.binder-date-picker__day--selected,
.binder-date-picker__day--selected:hover {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 0.35rem 0.8rem color-mix(in srgb, var(--primary) 30%, transparent);
}

body.theme-dark .binder-date-picker {
  border-color: rgba(255, 255, 255, 0.12);
}

/* ─── DASHBOARD COVER BACKGROUNDS ─── */
body[class*="dashboard-bg-"] {
  --dashboard-cover-base: #f7f1ec;
  --dashboard-cover-pattern: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0));
  background-color: var(--dashboard-cover-base);
  background-image: var(--dashboard-cover-pattern);
  background-size: var(--dashboard-cover-size, auto);
  background-position: var(--dashboard-cover-position, 0 0);
  background-attachment: fixed;
}

body[class*="dashboard-bg-"] .bc-shell,
body[class*="dashboard-bg-"] .binder-workspace,
body[class*="dashboard-bg-"] .binder-stage,
body[class*="dashboard-bg-"] .binder-stage .bc-main {
  background: transparent;
}

body[class*="dashboard-bg-"] .binder-sidebar.sidebar-shell {
  --binder-sidebar-bg: color-mix(in srgb, var(--surface-lowest) 72%, transparent);
  --binder-sidebar-border: color-mix(in srgb, var(--outline) 60%, transparent);
  backdrop-filter: blur(18px) saturate(1.08);
}

body[class*="dashboard-bg-"] .binder-sidebar__chrome {
  background: color-mix(in srgb, var(--surface-lowest) 12%, transparent);
}


body.dashboard-bg-rainbow {
  --dashboard-cover-base: #f6efe6;
  --dashboard-cover-pattern:
    radial-gradient(ellipse 115% 92% at -8% -18%, transparent 30%, rgba(190, 115, 91, 0.44) 31% 36%, transparent 37%),
    radial-gradient(ellipse 106% 86% at -6% -14%, transparent 38%, rgba(220, 170, 92, 0.46) 39% 45%, transparent 46%),
    radial-gradient(ellipse 98% 80% at -3% -8%, transparent 47%, rgba(140, 168, 128, 0.44) 48% 55%, transparent 56%),
    radial-gradient(ellipse 90% 74% at 1% -2%, transparent 57%, rgba(238, 199, 172, 0.54) 58% 66%, transparent 67%),
    radial-gradient(ellipse 84% 68% at 5% 6%, transparent 68%, rgba(245, 236, 208, 0.82) 69% 78%, transparent 79%),
    linear-gradient(135deg, rgba(255,255,255,0.38), rgba(255,255,255,0)),
    linear-gradient(135deg, #f7efe4, #efe4d6 52%, #edf2e8);
  --dashboard-cover-size: auto;
}

body.dashboard-bg-graph {
  --dashboard-cover-base: #f4f2e8;
  --dashboard-cover-pattern:
    url("data:image/svg+xml,%3Csvg width='420' height='260' viewBox='0 0 420 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2379916f' stroke-linecap='round' opacity='.34'%3E%3Cpath d='M306 232c-3-42 9-84 45-122'/%3E%3Cpath d='M348 112c-26 1-47-10-63-32'/%3E%3Cpath d='M356 124c-12 19-12 38 0 57'/%3E%3Cpath d='M318 178c-20 2-36 13-49 33'/%3E%3Cpath d='M96 48c25 25 52 29 82 10'/%3E%3Cpath d='M103 62c13 14 14 31 3 52'/%3E%3C/g%3E%3Cg fill='none' stroke='%2396ad8a' opacity='.20'%3E%3Cpath d='M-20 192c58-36 106-36 144 0s83 37 135 4 103-33 161 2'/%3E%3Cpath d='M-24 218c58-33 105-33 141 0s80 32 132 0 103-32 171 4'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(110, 139, 151, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 139, 151, 0.11) 1px, transparent 1px),
    linear-gradient(135deg, #faf7ee, #edf3ed 58%, #eef3f5);
  --dashboard-cover-size: 420px 260px, 28px 28px, 28px 28px, auto;
  --dashboard-cover-position: 82% 12%, 0 0, 0 0, 0 0;
}

body.dashboard-bg-sunshine {
  --dashboard-cover-base: #f6efe2;
  --dashboard-cover-pattern:
    linear-gradient(172deg, transparent 0 11%, rgba(122, 147, 128, 0.84) 11.2% 23%, transparent 23.2%),
    linear-gradient(172deg, transparent 0 24%, rgba(246, 239, 216, 0.95) 24.2% 37%, transparent 37.2%),
    linear-gradient(172deg, transparent 0 38%, rgba(210, 120, 97, 0.82) 38.2% 50%, transparent 50.2%),
    linear-gradient(172deg, transparent 0 51%, rgba(222, 174, 87, 0.86) 51.2% 63%, transparent 63.2%),
    linear-gradient(172deg, transparent 0 64%, rgba(42, 69, 88, 0.80) 64.2% 76%, transparent 76.2%),
    linear-gradient(135deg, #fbf4e9, #eee5d8);
  --dashboard-cover-size: auto;
}

body.dashboard-bg-confetti {
  --dashboard-cover-base: #f7efe6;
  --dashboard-cover-pattern:
    url("data:image/svg+xml,%3Csvg width='520' height='320' viewBox='0 0 520 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-30 88C58 58 120 70 171 122s111 60 180 20 130-41 199-6v214H-30z' fill='%23d78f72' opacity='.36'/%3E%3Cpath d='M246-38c72 42 100 94 84 156s-3 103 39 143 64 82 66 126H246z' fill='%238aa27c' opacity='.42'/%3E%3Cpath d='M-12 224c66-35 124-41 174-18s94 26 132 7 76-24 114-14v140H-12z' fill='%23e3bd6c' opacity='.34'/%3E%3Cpath d='M76-18h186l-28 116c-10 43-41 67-92 70S52 154 26 116z' fill='%23f7e7c9' opacity='.78'/%3E%3Cg stroke='%232c4b57' stroke-width='2' opacity='.16'%3E%3Cpath d='M70 252l118-20M312 74l96-28M356 250l86 22'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(135deg, rgba(255,255,255,0.52), rgba(255,255,255,0)),
    linear-gradient(135deg, #fbf4ea, #ece1d4 58%, #edf1e7);
  --dashboard-cover-size: 520px 320px, auto, auto;
  --dashboard-cover-position: center center, 0 0, 0 0;
}

body.dashboard-bg-midnight {
  --dashboard-cover-base: #0d1c2a;
  --dashboard-cover-pattern:
    url("data:image/svg+xml,%3Csvg width='640' height='360' viewBox='0 0 640 360' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff7d8' opacity='.7'%3E%3Ccircle cx='74' cy='52' r='1.6'/%3E%3Ccircle cx='152' cy='94' r='1.2'/%3E%3Ccircle cx='264' cy='50' r='1.4'/%3E%3Ccircle cx='424' cy='82' r='1.5'/%3E%3Ccircle cx='542' cy='42' r='1.1'/%3E%3Ccircle cx='592' cy='128' r='1.2'/%3E%3C/g%3E%3Cpath d='M0 260c78-62 138-71 218-24s139 45 206-10 140-66 216-18v152H0z' fill='%231b4b55' opacity='.72'/%3E%3Cpath d='M0 292c96-48 170-50 260-14s166 31 236-6 114-39 144-26v114H0z' fill='%230b2230' opacity='.94'/%3E%3Cpath d='M104 214c46-70 116-92 184-61s114 22 168-27' fill='none' stroke='%2349b6a2' stroke-width='38' stroke-linecap='round' opacity='.16'/%3E%3C/svg%3E"),
    radial-gradient(circle at 18% 18%, rgba(76, 160, 183, 0.24), transparent 28%),
    radial-gradient(circle at 80% 6%, rgba(144, 107, 184, 0.18), transparent 24%),
    linear-gradient(135deg, #0c1725, #10283a 58%, #09131f);
  --dashboard-cover-size: cover, auto, auto, auto;
}

body.dashboard-bg-mint {
  --dashboard-cover-base: #edf2e8;
  --dashboard-cover-pattern:
    url("data:image/svg+xml,%3Csvg width='520' height='320' viewBox='0 0 520 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%237f9a76' stroke-linecap='round' opacity='.35'%3E%3Cpath d='M-30 94c72-56 143-56 215 0s143 56 215 0 143-56 215 0'/%3E%3Cpath d='M-36 138c75-50 148-50 219 0s143 50 215 0 145-50 221 0'/%3E%3Cpath d='M-28 184c74-45 146-45 216 0s142 45 216 0 144-45 216 0'/%3E%3Cpath d='M-24 232c74-40 146-40 216 0s142 40 216 0 144-40 216 0'/%3E%3C/g%3E%3Cpath d='M92 250c56-64 116-76 180-38s110 35 160-9' fill='none' stroke='%23d59570' stroke-width='6' stroke-dasharray='2 16' stroke-linecap='round' opacity='.38'/%3E%3Ccircle cx='406' cy='78' r='48' fill='%23dcb969' opacity='.22'/%3E%3Ccircle cx='142' cy='126' r='62' fill='%238fb6bd' opacity='.18'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #f6f0df, #e6efe5 48%, #e1edf0);
  --dashboard-cover-size: 520px 320px, auto;
  --dashboard-cover-position: center center, 0 0;
}

body.dashboard-bg-custom {
  --dashboard-cover-base: #f6f3ee;
  --dashboard-cover-pattern:
    linear-gradient(135deg, rgba(247, 241, 232, 0.70), rgba(247, 241, 232, 0.28)),
    var(--dashboard-cover-custom-image);
  --dashboard-cover-size: cover, cover;
  --dashboard-cover-position: center center, center center;
}

body[class*="dashboard-bg-"] .binder-stage .bc-main:has(.dashboard-home) {
  background: transparent;
}

.dashboard-home--guided {
  position: relative;
}

body.dashboard-bg-midnight .dashboard-home--guided {
  --surface-lowest: rgba(255, 255, 255, 0.96);
  --outline-variant: rgba(255, 255, 255, 0.18);
}

/* =========================================================================
   MOBILE WEB AUDIT FIXES — authenticated web app
   These late overrides smooth the phone-sized web experience without touching
   the native iOS client. Keep these at the end so they win over older mobile
   passes scattered through the legacy stylesheet.
   ========================================================================= */

/* ─── App page layout standard ───
   Keep app pages on a common left rail so moving between overview pages
   (Terms, Records, Library) and dense work surfaces (Planner, Files) does
   not visually shift the canvas. Specialized reading/writing paper layouts
   can opt back into centering with their modifier class. */
.binder-stage .bc-main {
  box-sizing: border-box;
  margin-inline: 0 auto;
  max-width: var(--app-page-max-width);
  padding: var(--app-page-top-space) var(--app-page-gutter) var(--app-page-bottom-space);
}

.binder-stage .bc-main.bc-main--wide {
  max-width: var(--app-page-wide-max-width);
  padding: var(--app-page-top-space) var(--app-page-gutter) var(--app-page-bottom-space);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.binder-stage .bc-main.bc-main--paper {
  margin-inline: auto;
  max-width: min(960px, 100%);
}

.binder-stage .bc-main.bc-main--record-craft {
  max-width: min(1240px, 100%);
}

.binder-stage .bc-main:has(.template-marketplace) {
  max-width: none;
}

.binder-stage .bc-main.bc-main--flush {
  margin-inline: 0;
  max-width: none;
  padding: 0;
}

.page-header {
  margin-bottom: var(--app-page-section-gap);
}

.planner-shell.planner-reskin {
  padding: 0;
}

.planner-reskin .planner-main,
.planner-reskin .planner-sidebar {
  min-width: 0;
}

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .binder-workspace {
    width: 100%;
    min-width: 0;
    padding: 0.5rem max(0.5rem, var(--safe-right)) 0.5rem max(0.5rem, var(--safe-left));
  }

  .binder-stage,
  .binder-stage .bc-main,
  .bc-main {
    min-width: 0;
  }

  .binder-stage .bc-main,
  .bc-main {
    padding-left: max(0.75rem, var(--safe-left));
    padding-right: max(0.75rem, var(--safe-right));
  }

  /* The previous mobile toolbar wrapped actions onto a second row, which made
     phone pages feel jumpy and consumed too much vertical space. Keep chrome in
     one compact row: quick add, search, chat, bell, avatar. */
  .binder-toolbar {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
  }

  .binder-toolbar__start {
    flex: 0 0 auto;
  }

  .binder-toolbar__search {
    flex: 0 0 auto;
    width: var(--mobile-tap-min);
    height: var(--mobile-tap-min);
    min-width: var(--mobile-tap-min);
    min-height: var(--mobile-tap-min);
    padding: 0;
    justify-content: center;
  }

  .binder-toolbar__search-placeholder,
  .binder-toolbar__search-kbd {
    display: none;
  }

  .binder-toolbar__actions {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 0.35rem;
  }

  .bc-icon-btn,
  .bc-avatar-btn,
  .binder-toolbar__menu-btn {
    width: var(--mobile-tap-min);
    height: var(--mobile-tap-min);
    min-width: var(--mobile-tap-min);
    min-height: var(--mobile-tap-min);
    flex: 0 0 auto;
  }

  .mobile-tab-bar {
    z-index: 90;
  }
}

@media (max-width: 640px) {
  /* Generic page headers should stack instead of squeezing actions/titles into
     one row. This catches many CRUD screens without bespoke per-page CSS. */
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
    margin-bottom: 1.15rem;
  }

  .page-title,
  .dash-greeting,
  .dash-hero-title,
  .drive-page-title {
    overflow-wrap: anywhere;
  }

  .page-title {
    font-size: clamp(1.7rem, 9vw, var(--text-3xl));
    line-height: 1.08;
  }

  .page-header .btn,
  .page-header .btn-ghost,
  .page-header a.btn,
  .page-header a.btn-ghost {
    width: 100%;
    min-height: var(--mobile-tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* Fixed bottom action bars need to sit above the global tab bar. Before this,
     submit buttons and bulk file actions fought with the nav on phones. */
  form:has(.form-actions) {
    padding-bottom: calc(5.5rem + var(--mobile-tab-bar-height) + var(--safe-bottom));
  }

  .form-actions {
    bottom: calc(var(--mobile-tab-bar-height) + var(--safe-bottom));
    padding-bottom: 0.75rem;
  }

  .drive-bulk-toolbar {
    bottom: calc(var(--mobile-tab-bar-height) + var(--safe-bottom) + 0.75rem);
  }

  /* Media and wide embedded content should shrink instead of creating horizontal
     scroll. Tables keep their own local scroll where needed. */
  img,
  video,
  canvas,
  svg,
  iframe {
    max-width: 100%;
  }

  table,
  pre,
  code {
    max-width: 100%;
  }

  .card-grid,
  .dash-bento-12,
  .dash-bento-col-8,
  .dash-bento-col-4,
  .home-grid,
  .hub-grid,
  .form-row {
    min-width: 0;
  }
}

@media (max-width: 768px) {
  :root {
    --mobile-toolbar-height: 54px;
  }

  /* AI chat: restore the history toggle after the later desktop hide rule and
     keep the whole chat viewport above the bottom tab bar. */
  .ai-chat-mobile-toggle {
    display: inline-flex !important;
    min-width: var(--mobile-tap-min);
    min-height: var(--mobile-tap-min);
  }

  .binder-workspace:has(.ai-chat-shell) {
    height: auto;
    min-height: 100dvh;
    align-items: stretch;
    padding-bottom: 0;
  }

  .binder-stage .bc-main:has(.ai-chat-shell) {
    height: calc(100dvh - var(--mobile-toolbar-height) - var(--mobile-tab-bar-height) - var(--safe-bottom));
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .ai-chat-shell {
    height: 100%;
    min-height: 0;
  }

  .ai-chat-main,
  .ai-chat-messages {
    min-height: 0;
  }

  .ai-chat-sidebar {
    top: max(0px, var(--safe-top));
    bottom: calc(var(--mobile-tab-bar-height) + var(--safe-bottom));
    height: auto;
  }

  .ai-chat-sidebar-overlay {
    bottom: calc(var(--mobile-tab-bar-height) + var(--safe-bottom));
  }

  .ai-chat-composer {
    padding-bottom: 0.85rem;
    background: var(--surface-lowest);
  }

  /* Community chat rooms use full-viewport math too; account for toolbar and
     bottom nav so the composer never hides under mobile chrome. */
  .chatroom {
    height: calc(100dvh - var(--mobile-toolbar-height) - var(--mobile-tab-bar-height) - var(--safe-bottom) - 0.75rem);
    min-height: 0;
    border-radius: var(--radius-md);
  }

  .chatroom-messages {
    min-height: 0;
    padding: 0.85rem;
  }

  .chatroom-composer-wrap {
    padding: 0.55rem 0.65rem 0.7rem;
  }

  .chatroom-header {
    padding: 0.7rem 0.85rem;
    gap: 0.6rem;
  }

  .chatroom-header-title,
  .chatroom-online-badge {
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chatroom-msg-img {
    max-width: min(240px, 72vw);
    height: auto;
  }
}

@media (max-width: 900px) {
  /* Planner: don't spend 220px of a phone viewport on the filter rail. Keep the
     people/subject context available as a horizontal rail above the planner. */
  .planner-shell,
  .planner-reskin.planner-shell,
  .planner-reskin .planner-shell {
    flex-direction: column;
    gap: 0.85rem;
  }

  .planner-sidebar,
  .planner-reskin .planner-sidebar {
    width: 100%;
    max-width: 100%;
    flex-direction: row;
    align-items: stretch;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.75rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .planner-sidebar-section {
    flex: 0 0 min(16rem, 82vw);
    scroll-snap-align: start;
  }

  .planner-child-list,
  .planner-subject-legend {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .planner-child-list::-webkit-scrollbar,
  .planner-subject-legend::-webkit-scrollbar {
    display: none;
  }

  .planner-child-item,
  .planner-subject-item,
  .planner-reskin .planner-child-item,
  .planner-reskin .planner-subject-item {
    flex: 0 0 auto;
    min-height: 2.5rem;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  /* Popovers launched from chat composer buttons should clamp to the viewport
     instead of hanging off the right edge on narrow phones. */
  .emoji-picker-panel,
  .gif-picker-panel,
  .chatroom-emoji-picker {
    position: fixed !important;
    left: max(0.5rem, var(--safe-left)) !important;
    right: max(0.5rem, var(--safe-right)) !important;
    bottom: calc(var(--mobile-tab-bar-height) + var(--safe-bottom) + 4.25rem) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(60dvh, 420px);
    z-index: 120;
  }

  .gif-picker-item img {
    height: 76px;
  }

  .chatroom-msg-actions {
    opacity: 1;
    pointer-events: auto;
    position: static;
    transform: none;
    margin-top: 0.35rem;
    width: max-content;
  }
}

@media (max-width: 900px) {
  .term-year-dashboard {
    grid-template-columns: 1fr;
  }

  .term-list {
    grid-template-columns: 1fr;
  }

  .term-bulk-row,
  .term-bulk-row--header {
    display: block;
  }

  .term-bulk-row--header {
    display: none;
  }

  .term-bulk-row {
    min-width: 0;
    padding: 0.85rem;
  }

  .term-bulk-cell {
    border-left: 0 !important;
    padding: 0.45rem 0;
  }

  .term-bulk-cell::before {
    color: var(--on-surface-subtle);
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .term-bulk-cell--actions {
    align-items: center;
  }

  .term-bulk-form__footer,
  .term-planner-header {
    align-items: stretch;
    flex-direction: column;
  }

  .term-bulk-form__footer .btn,
  .term-planner-header__actions .btn {
    width: 100%;
  }
}

/* ─── ONBOARDING CHILDREN STEP ─── */
.ob-children-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ob-child-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--binder-cream, #faf8f4);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
  border-radius: var(--radius-md, 0.75rem);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ob-child-card:hover {
  border-color: var(--border-strong, rgba(0, 0, 0, 0.12));
}

.ob-child-card--editing {
  display: block;
  background: var(--surface, #fff);
  padding: 1.25rem 1.25rem 0.5rem;
  border-color: var(--primary, #b4593c);
  box-shadow: 0 0 0 2px rgba(180, 89, 60, 0.12);
}

.ob-child-card-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.ob-child-card-swatch {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.ob-child-card-text {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  min-width: 0;
}

.ob-child-card-name {
  font-size: var(--text-md, 1.05rem);
  color: var(--on-surface, #2a1d1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ob-child-card-grade {
  font-size: var(--text-sm, 0.85rem);
  color: var(--on-surface-subtle, #9a8c7a);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.ob-child-card-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.ob-child-card-btn {
  font-size: 0.82rem;
  padding: 0.3rem 0.65rem;
  color: var(--on-surface-subtle, #9a8c7a);
}

.ob-child-card-btn--danger:hover {
  color: var(--danger, #b4593c);
}

.ob-add-another {
  margin-bottom: 1.5rem;
}

.ob-add-another-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  padding: 0.45rem 0.9rem;
}

.ob-add-another-summary::-webkit-details-marker {
  display: none;
}

.ob-add-another[open] .ob-add-another-summary {
  margin-bottom: 0.75rem;
}

.ob-add-another-form {
  padding-top: 0.25rem;
}

.ob-continue-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.ob-continue-btn {
  min-width: 8rem;
}

.ob-back-row {
  margin-top: 0.75rem;
}

@media (max-width: 600px) {
  .ob-child-card { padding: 0.75rem 0.9rem; }
  .ob-child-card-text { flex-direction: column; gap: 0.1rem; align-items: flex-start; }
  .ob-child-card-name { font-size: var(--text-base, 1rem); }
}

/* ─── DASHBOARD (lean redesign) ─── */
.home-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.5rem 1.25rem 2rem;
  margin: 0 -1.25rem 2rem;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  isolation: isolate;
  overflow: hidden;
}

.home-hero__copy {
  min-width: 0;
}

.home-hero__title {
  font-family: var(--font-sans);
  font-size: clamp(1.85rem, 3.5vw, 2.65rem);
  font-weight: 850;
  letter-spacing: -0.015em;
  margin: 0 0 0.4rem;
  color: var(--on-surface, #2a1d1a);
}

.home-hero__subtitle {
  font-size: var(--text-md, 1rem);
  color: var(--on-surface-subtle, #8a7a68);
  margin: 0;
}

.home-hero__sep {
  margin: 0 0.35rem;
  opacity: 0.5;
}

.home-hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.home-hero__cta {
  display: inline-flex;
  align-items: center;
  min-width: 11rem;
  justify-content: center;
  line-height: 1;
  text-align: center;
}

.home-hero__customize {
  width: var(--mobile-tap-min);
  height: var(--mobile-tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  background: var(--surface-lowest);
  color: var(--on-surface-subtle, #8a7a68);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}

.home-hero__customize .material-symbols-outlined {
  font-size: 1.1rem;
  line-height: 1;
}

.home-hero__customize:hover {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--outline-variant));
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-lowest));
  color: var(--on-surface, #2a1d1a);
  transform: translateY(-1px);
}

/* Smart hero (day-aware) ---------------------------------------------------
   The new hero swaps the bare greeting for a three-line block (eyebrow,
   greeting headline, computed day-summary) and adds a "today completion"
   ring on the right. Layout collapses to a stacked column on mobile. */

.home-hero--smart {
  align-items: center;
  padding: 2rem 1.5rem;
}

.home-hero--smart .home-hero__copy {
  flex: 1 1 auto;
}

.home-hero__eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  margin: 0 0 0.5rem;
}

.home-hero--smart .home-hero__title {
  margin: 0 0 0.4rem;
}

.home-hero__summary {
  font-size: var(--text-md);
  color: var(--on-surface);
  margin: 0 0 1.25rem;
  max-width: 38rem;
  line-height: 1.5;
}

.home-hero--smart .home-hero__actions {
  margin-top: 0;
  flex-wrap: wrap;
}

/* Secondary action (e.g. "+ New lesson") next to the state-aware primary CTA. */
.home-hero__secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}
.home-hero__secondary .material-symbols-outlined { font-size: 1.05rem; }

/* Multi-child picker uses a native <details>. Position the menu absolutely
   so the picker doesn't push the hero ring around when it opens. */
.home-hero__lesson-picker {
  position: relative;
}
.home-hero__lesson-picker > summary {
  list-style: none;
}
.home-hero__lesson-picker > summary::-webkit-details-marker { display: none; }
.home-hero__lesson-picker > summary::after {
  content: "▾";
  margin-left: 0.15rem;
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
}
.home-hero__lesson-picker-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 11rem;
  z-index: 10;
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.home-hero__lesson-picker-label {
  margin: 0.1rem 0.35rem 0.3rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.home-hero__lesson-picker-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--on-surface);
  font-size: var(--text-sm);
  transition: background var(--duration-fast) var(--ease-standard);
}
.home-hero__lesson-picker-item:hover {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-lowest));
}

.home-hero__ring {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ring primitive: conic-gradient donut with a hollow center. Tokens come
   from the method-accent variables set on :root so the ring matches the
   user's chosen homeschool method. */
.hero-ring {
  --ring-size: 9.5rem;
  --ring-thickness: 0.7rem;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  background: var(--ring, conic-gradient(var(--surface-container-low) 0 100%));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-ring::after {
  content: "";
  position: absolute;
  inset: var(--ring-thickness);
  background: var(--surface-lowest);
  border-radius: 50%;
}

.hero-ring__center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  color: var(--on-surface);
}
.hero-ring__center strong { font-size: 1.45rem; font-weight: 800; line-height: 1; }
.hero-ring__center span   { font-size: var(--text-xs); color: var(--on-surface-subtle); }

@media (max-width: 720px) {
  .home-hero--smart { flex-direction: column-reverse; align-items: stretch; }
  .home-hero--smart .home-hero__actions { flex-wrap: wrap; }
  .home-hero__ring { justify-content: flex-start; }
  .hero-ring { --ring-size: 7.5rem; --ring-thickness: 0.6rem; }
}

/* Today at a glance --------------------------------------------------------
   Graphical replacement for the old Snapshot section. Renders three cards
   side by side on desktop, stacking gracefully below. */

.home-glance__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.home-glance__card {
  background: var(--surface-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem 1.25rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.home-glance__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.home-glance__card-title {
  font-size: var(--text-base);
  font-weight: 700;
  margin: 0;
  color: var(--on-surface);
}

.home-glance__card-eyebrow {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.home-glance__empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--on-surface-subtle);
}

/* Per-child mini-rings */
.kid-ring-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
}

.kid-ring__link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
  padding: 0.15rem 0.35rem;
  transition: background var(--duration-fast) var(--ease-standard);
}
.kid-ring__link:hover { background: color-mix(in srgb, var(--method-accent, var(--primary)) 6%, transparent); }

.kid-ring__ring {
  --ring-size: 3.25rem;
  --ring-thickness: 0.32rem;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  background: var(--ring, conic-gradient(var(--surface-container-low) 0 100%));
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kid-ring__ring::after {
  content: "";
  position: absolute;
  inset: var(--ring-thickness);
  background: var(--surface-lowest);
  border-radius: 50%;
}

.kid-ring__center {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--on-surface);
}

.kid-ring__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kid-ring__name   { font-weight: 600; font-size: var(--text-sm); color: var(--on-surface); }
.kid-ring__habits { font-size: var(--text-xs); color: var(--on-surface-subtle); }

/* 7-day completed-lesson sparkline */
.weekly-spark {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  height: 7rem;
  padding-top: 0.5rem;
}

.weekly-spark__col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  height: 100%;
}

.weekly-spark__bar {
  width: 100%;
  background: color-mix(in srgb, var(--method-accent, var(--primary)) 55%, var(--surface-container-low));
  border-radius: var(--radius-sm) var(--radius-sm) 4px 4px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 4px;
  transition: background var(--duration-base) var(--ease-standard);
  min-height: 6%;
}

.weekly-spark__col--today .weekly-spark__bar {
  background: var(--method-accent, var(--primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--method-accent, var(--primary)) 25%, transparent);
}

.weekly-spark__count {
  font-size: 0.65rem;
  color: var(--surface-lowest);
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}

.weekly-spark__day {
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Outside-time ring */
.outside-ring {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.outside-ring__ring {
  --ring-size: 5rem;
  --ring-thickness: 0.5rem;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  background: var(--ring, conic-gradient(var(--surface-container-low) 0 100%));
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.outside-ring__ring::after {
  content: "";
  position: absolute;
  inset: var(--ring-thickness);
  background: var(--surface-lowest);
  border-radius: 50%;
}
.outside-ring__center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.outside-ring__center strong { font-size: 1.05rem; font-weight: 800; color: var(--on-surface); }
.outside-ring__center span   { font-size: 0.65rem; color: var(--on-surface-subtle); }

.outside-ring__copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.outside-ring__hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .weekly-spark__bar,
  .home-hero__customize,
  .kid-ring__link { transition: none; }
}

/* Students */
.home-today-students__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
}

.home-student-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--surface-lowest, #fff);
  border: 1px solid var(--outline-variant, rgba(0, 0, 0, 0.06));
  border-radius: var(--radius-xl, 1.25rem);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.home-student-card:hover {
  border-color: var(--method-accent, var(--border-strong, rgba(0, 0, 0, 0.12)));
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.home-student-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-card);
}

/* Active-card border accent — orange-to-cream gradient seam on hover/focus.
   Uses border-image so it sits cleanly within the existing 1px border slot. */
.home-student-card:hover,
.home-student-card:focus-visible,
.home-tool:hover,
.home-tool:focus-visible,
.material-card:hover,
.goal-card:focus-within {
  border-color: transparent;
  border-image: linear-gradient(135deg, rgba(255, 110, 60, 0.9) 0%, rgba(255, 175, 130, 0.55) 55%, rgba(64, 34, 32, 0.1) 100%) 1;
}

.home-student-card__top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.home-student-card__identity {
  min-width: 0;
}

.home-student-card__name {
  font-size: var(--text-md, 1.05rem);
  font-weight: 600;
  color: var(--on-surface, #2a1d1a);
  line-height: 1.2;
}

.home-student-card__grade {
  font-size: 0.82rem;
  color: var(--on-surface-subtle, #8a7a68);
  letter-spacing: 0.02em;
}

.home-student-card__metrics {
  display: flex;
  gap: 1.5rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.home-student-card__metric-value {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--on-surface, #2a1d1a);
}

.home-student-card__metric-label {
  font-size: 0.75rem;
  color: var(--on-surface-subtle, #8a7a68);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-student-card__next {
  font-size: 0.92rem;
  color: var(--on-surface-subtle, #8a7a68);
  margin: 0;
  line-height: 1.4;
}

.home-student-card__next strong {
  color: var(--on-surface, #2a1d1a);
  font-weight: 600;
}

/* Single-student hero card (richer fill when @children.size == 1) */
.home-student-hero {
  background: var(--surface-lowest, #fff);
  border: 1px solid var(--outline-variant, rgba(0, 0, 0, 0.06));
  border-radius: var(--radius-xl, 1.25rem);
  box-shadow: var(--shadow-card);
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.home-student-hero__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.home-student-hero__identity {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.home-student-hero__avatar {
  width: 3.75rem;
  height: 3.75rem;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.home-student-hero__name {
  font-family: var(--font-sans);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.15rem;
  color: var(--on-surface, #2a1d1a);
}

.home-student-hero__grade {
  margin: 0;
  font-size: 0.88rem;
  color: var(--on-surface-subtle, #8a7a68);
  letter-spacing: 0.03em;
}

.home-student-hero__cta {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--method-accent, #b4593c);
  text-decoration: none;
  padding: 0.5rem 0;
  white-space: nowrap;
}

.home-student-hero__cta:hover {
  text-decoration: underline;
}

.home-student-hero__metrics {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.home-student-hero__metric-value {
  display: block;
  font-family: var(--font-sans);
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--on-surface, #2a1d1a);
  margin-bottom: 0.25rem;
}

.home-student-hero__metric-label {
  font-size: 0.72rem;
  color: var(--on-surface-subtle, #8a7a68);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-student-hero__profile-link {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--on-surface-subtle, #8a7a68);
  text-decoration: none;
}

.home-student-hero__profile-link:hover {
  color: var(--on-surface, #2a1d1a);
  text-decoration: underline;
}

.home-student-hero__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.home-student-hero__col-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle, #8a7a68);
  margin: 0 0 0.85rem;
}

.home-student-hero__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.home-student-hero__row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--on-surface, #2a1d1a);
}

.home-student-hero__row--done {
  color: var(--on-surface-subtle, #8a7a68);
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.25);
}

.home-student-hero__check {
  flex-shrink: 0;
  color: var(--on-surface-subtle, #b8a896);
  line-height: 1;
}

.home-student-hero__row--done .home-student-hero__check {
  color: var(--method-accent, #b4593c);
}

.home-student-hero__check .material-symbols-outlined {
  font-size: 1.2rem;
}

.home-student-hero__row-subject {
  color: var(--on-surface-subtle, #8a7a68);
  margin-right: 0.2rem;
}

.home-student-hero__empty {
  font-size: 0.92rem;
  color: var(--on-surface-subtle, #8a7a68);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 720px) {
  .home-student-hero { padding: 1.25rem; }
  .home-student-hero__columns { grid-template-columns: 1fr; gap: 1.25rem; }
  .home-student-hero__metrics { gap: 1.5rem; flex-wrap: wrap; }
  .home-student-hero__profile-link { margin-left: 0; width: 100%; }
}

/* ─── PLANNER: tabs (shared) ─── */
.planner-tabs-wrap {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 1rem;
}

.planner-tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--surface-subtle, rgba(0, 0, 0, 0.03));
  border-radius: var(--radius-full);
  width: fit-content;
}

.planner-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--on-surface-subtle, #8a7a68);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: color 0.15s ease, background 0.15s ease;
}

.planner-tab .material-symbols-outlined { font-size: 1.1rem; }

.planner-tab:hover {
  color: var(--on-surface, #2a1d1a);
}

.planner-tab--active {
  background: var(--surface, #fff);
  color: var(--on-surface, #2a1d1a);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ─── PLANNER: Plan view (subject × day grid) — chrome matches Schedule tab ─── */
.plan-shell {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.plan-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.plan-header__main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-width: 0;
}

.plan-header__week {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.plan-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--on-surface-subtle, #8a7a68);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.plan-nav-arrow .material-symbols-outlined {
  font-size: 1.3rem;
}

.plan-nav-arrow:hover {
  background: var(--surface-subtle, rgba(0, 0, 0, 0.04));
  color: var(--on-surface, #2a1d1a);
}

.plan-today-btn {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-full);
  color: var(--on-surface, #2a1d1a);
  text-decoration: none;
  background: var(--surface, #fff);
  transition: border-color 0.15s ease;
}

.plan-today-btn:hover {
  border-color: var(--planner-line, var(--outline-variant));
  background: var(--planner-wash, var(--surface-container-low));
}

.plan-title {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0;
  color: var(--on-surface, #2a1d1a);
}

.plan-week-count {
  font-size: 0.88rem;
  color: var(--on-surface-subtle, #8a7a68);
}

.plan-print-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface-subtle, #8a7a68);
  text-decoration: none;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-full);
  background: var(--surface, #fff);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.plan-print-link:hover {
  border-color: var(--planner-line, var(--outline-variant));
  color: var(--planner-ink, var(--on-surface));
  background: var(--planner-wash, var(--surface-container-low));
}

.plan-print-link .material-symbols-outlined {
  font-size: 1.05rem;
}

.plan-view-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--surface-subtle, rgba(0, 0, 0, 0.03));
  border-radius: var(--radius-full);
  width: fit-content;
  margin: 0;
}

.plan-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-surface-subtle, #8a7a68);
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: color 0.15s ease, background 0.15s ease;
}

.plan-view-toggle__btn:hover {
  color: var(--on-surface, #2a1d1a);
}

.plan-view-toggle__btn--active {
  background: var(--surface-lowest, #fff);
  color: var(--on-surface, #2a1d1a);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

@media (max-width: 680px) {
  .plan-header,
  .plan-header__main {
    width: 100%;
  }

  .plan-header__main {
    gap: 0.55rem;
  }

  .plan-header__week {
    width: 100%;
  }

  .plan-title {
    flex: 1;
    text-align: center;
    font-size: 1.1rem;
  }

  .plan-view-toggle {
    order: 2;
  }
}

/* ─── CURRICULUM MATERIALS ─── */
.materials-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.materials-group {
  background: var(--surface-lowest, #fff);
  border: 1px solid var(--outline-variant, rgba(0, 0, 0, 0.06));
  border-radius: var(--radius-xl, 1.25rem);
  box-shadow: var(--shadow-card);
  padding: 1.15rem 1.25rem;
}

.materials-group__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.05));
  margin-bottom: 0.75rem;
}

.materials-group__chip {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.materials-group__chip--unassigned {
  background: var(--surface-container-low, rgba(0, 0, 0, 0.08));
}

.materials-group__title {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
  color: var(--on-surface, #2a1d1a);
  flex: 1;
}

.materials-group__count {
  font-size: 0.78rem;
  color: var(--on-surface-subtle, #8a7a68);
  letter-spacing: 0.04em;
}

.materials-group__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.material-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--surface-subtle, rgba(0, 0, 0, 0.02));
  border-radius: var(--radius-md, 0.75rem);
  transition: background 0.12s ease;
}

.material-card:hover {
  background: var(--surface-container-low, rgba(0, 0, 0, 0.04));
}

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

.material-card__title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.material-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--on-surface, #2a1d1a);
  margin: 0;
  line-height: 1.3;
}

.material-card__status {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--on-surface-subtle, #8a7a68);
}

.material-card__status--active   { background: rgba(76, 175, 80, 0.12); color: #2e7d32; }
.material-card__status--finished { background: rgba(33, 150, 243, 0.12); color: #1565c0; }
.material-card__status--queued   { background: rgba(255, 152, 0, 0.12); color: #ef6c00; }
.material-card__status--abandoned{ background: rgba(0, 0, 0, 0.05); color: var(--on-surface-subtle, #8a7a68); }

.material-card__byline {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  color: var(--on-surface-subtle, #8a7a68);
}

.material-card__child {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--on-surface-subtle, #8a7a68);
  font-style: italic;
}

.material-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.material-card__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--surface-container);
  color: var(--on-surface-mid);
  font-size: var(--text-xs);
  font-weight: 650;
}

.material-card__link {
  margin: 0.25rem 0 0;
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-card__link a {
  color: var(--primary);
  text-decoration: none;
}

.material-card__link a:hover {
  text-decoration: underline;
}

.material-card__notes {
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
  color: var(--on-surface, #2a1d1a);
  line-height: 1.4;
}

.material-card__actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

@media (max-width: 840px) {
  .subject-profile-card {
    grid-template-columns: 1fr;
  }

  .subject-profile-card__meta {
    grid-template-columns: 1fr;
  }
}

/* ─── LEARNING GOALS ─── */
.goals-section {
  background: var(--surface-lowest, #fff);
  border: 1px solid var(--outline-variant, rgba(0, 0, 0, 0.06));
  border-radius: var(--radius-xl, 1.25rem);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.35rem;
}

.goals-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.goals-section__title {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
  color: var(--on-surface, #2a1d1a);
}

.goals-section__count {
  font-size: 0.82rem;
  color: var(--on-surface-subtle, #8a7a68);
}

.goals-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.goal-card {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  background: var(--surface-subtle, rgba(0, 0, 0, 0.02));
  border-radius: var(--radius-md, 0.75rem);
  transition: background 0.12s ease;
}

.goal-card:hover {
  background: var(--surface-container-low, rgba(0, 0, 0, 0.04));
}

.goal-card--achieved {
  opacity: 0.6;
}

.goal-card--abandoned {
  opacity: 0.5;
  background: transparent;
  border: 1px dashed var(--border-subtle, rgba(0, 0, 0, 0.08));
}

.goal-card__toggle {
  background: transparent;
  border: 0;
  padding: 0.15rem;
  cursor: pointer;
  color: var(--on-surface-subtle, #b8a896);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}

.goal-card__toggle:hover {
  color: var(--method-accent, #b4593c);
}

.goal-card--achieved .goal-card__toggle {
  color: var(--method-accent, #b4593c);
}

.goal-card__toggle .material-symbols-outlined {
  font-size: 1.3rem;
}

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

.goal-card__title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--on-surface, #2a1d1a);
  line-height: 1.35;
}

.goal-card--achieved .goal-card__title {
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.25);
}

.goal-card__desc {
  font-size: 0.85rem;
  color: var(--on-surface-subtle, #8a7a68);
  margin-top: 0.15rem;
  line-height: 1.4;
}

.goal-card__meta {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--on-surface-subtle, #8a7a68);
  margin-top: 0.3rem;
  letter-spacing: 0.02em;
}

.goal-card__status {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.goal-card__remove {
  background: transparent;
  border: 0;
  padding: 0.15rem;
  cursor: pointer;
  color: var(--on-surface-subtle, #b8a896);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease;
}

.goal-card:hover .goal-card__remove,
.goal-card:focus-within .goal-card__remove {
  opacity: 1;
}

.goal-card__remove:hover {
  color: var(--danger, #b4593c);
}

.goal-card__remove .material-symbols-outlined {
  font-size: 1.1rem;
}

.goals-add {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.goals-add__input {
  flex: 1;
  padding: 0.55rem 0.85rem;
  font-size: 0.92rem;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-sm, 0.5rem);
  background: var(--surface-lowest, #fff);
  color: var(--on-surface, #2a1d1a);
  font-family: var(--font-sans);
}

.goals-add__input:focus {
  outline: none;
  border-color: var(--method-accent, #b4593c);
}

.plan-week-count strong {
  color: var(--on-surface, #2a1d1a);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.plan-child-picker {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.plan-child-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--on-surface-subtle);
  text-decoration: none;
  background: var(--planner-control, var(--surface-lowest));
  border: 1px solid var(--border-subtle, var(--outline-variant));
  border-radius: 9999px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.plan-child-pill__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  display: inline-block;
}

.plan-child-pill:hover {
  color: var(--on-surface);
  background: var(--planner-control-hover, var(--surface-container-low));
}

.plan-child-pill--active {
  color: var(--on-surface);
  border-color: var(--planner-accent, var(--primary));
  background: color-mix(in srgb, var(--planner-accent, var(--primary)) 12%, var(--surface-lowest));
}

/* The grid */
.plan-grid {
  display: grid;
  grid-template-columns: minmax(10rem, 1.4fr) repeat(7, minmax(0, 1fr)) minmax(3.5rem, 0.5fr);
  background: var(--planner-surface, var(--surface-lowest));
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.plan-grid__head,
.plan-grid__row {
  display: contents;
}

.plan-grid__corner,
.plan-grid__day-head,
.plan-grid__total-head {
  padding: 0.85rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
  background: var(--surface-subtle, var(--surface-container-low));
  border-bottom: 1px solid var(--border-subtle, var(--outline-variant));
  display: flex;
  align-items: center;
}

.plan-grid__corner {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface-subtle, var(--surface-container-low));
}

.plan-grid__day-head {
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-transform: none;
  letter-spacing: 0;
}

.plan-grid__day-abbr {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-subtle);
}

.plan-grid__day-num {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--on-surface);
  line-height: 1;
}

.plan-grid__day-head--today .plan-grid__day-num {
  color: var(--planner-accent, var(--primary));
  font-weight: 600;
}

.plan-grid__total-head {
  justify-content: center;
}

.plan-grid__subject {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--border-subtle, var(--outline-variant));
  border-right: 1px solid var(--border-subtle, var(--outline-variant));
  background: var(--surface-subtle, var(--surface-container-low));
  position: sticky;
  left: 0;
  z-index: 1;
}

.plan-grid__subject-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--on-surface);
}

.plan-grid__subject-chip {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.plan-grid__subject-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--on-surface);
}

.plan-grid__cell {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border-subtle, var(--outline-variant));
  border-left: 1px solid var(--border-subtle, var(--outline-variant));
  min-height: 4rem;
  position: relative;
  transition: background 0.12s ease;
}

.plan-grid__cell:hover { background: var(--surface-subtle, var(--surface-container-low)); }

.plan-grid__cell--today {
  background: color-mix(in srgb, var(--planner-accent, var(--primary)) 9%, var(--surface-lowest));
}
.plan-grid__cell--today:hover {
  background: color-mix(in srgb, var(--planner-accent, var(--primary)) 11%, var(--surface-lowest));
}

.plan-grid__chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem;
  background: var(--planner-control, var(--surface-lowest));
  border: 1px solid var(--border-subtle, var(--outline-variant));
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--on-surface);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.plan-grid__chip:hover {
  border-color: color-mix(in srgb, var(--planner-accent, var(--primary)) 45%, var(--outline-variant));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.plan-grid__chip--done {
  background: var(--surface-subtle, var(--surface-container-low));
  color: var(--on-surface-subtle);
}

.plan-grid__chip--done .plan-grid__chip-text {
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.3);
}

.plan-grid__chip-text {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-grid__chip-check {
  font-size: 0.95rem;
  color: var(--planner-accent, var(--primary));
  flex-shrink: 0;
}

.plan-grid__chip-duration {
  font-size: 0.7rem;
  color: var(--on-surface-subtle);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.plan-grid__add {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.85rem;
  border: 1px dashed transparent;
  border-radius: var(--radius-full);
  color: var(--on-surface-subtle);
  font-size: 1.05rem;
  text-decoration: none;
  margin-top: auto;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.plan-grid__cell--empty .plan-grid__add {
  border-color: var(--border-subtle, var(--outline-variant));
}

.plan-grid__add:hover {
  border-color: var(--planner-accent, var(--primary));
  color: var(--planner-accent, var(--primary));
  background: color-mix(in srgb, var(--planner-accent, var(--primary)) 10%, var(--surface-lowest));
}

.plan-grid__total {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-subtle, var(--outline-variant));
  border-left: 1px solid var(--border-subtle, var(--outline-variant));
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--on-surface);
  background: var(--surface-subtle, var(--surface-container-low));
  font-variant-numeric: tabular-nums;
}

.plan-grid__total--zero {
  color: var(--on-surface-subtle);
  font-weight: 400;
}

@media (max-width: 960px) {
  .plan-grid {
    grid-template-columns: minmax(7rem, 1.2fr) repeat(7, minmax(0, 1fr)) minmax(2.5rem, 0.4fr);
    font-size: 0.85rem;
  }
  .plan-grid__chip { font-size: 0.72rem; padding: 0.25rem 0.4rem; }
  .plan-grid__chip-duration { display: none; }
  .plan-grid__day-num { font-size: 0.95rem; }
  .plan-title { font-size: 1.1rem; }
}

@media (max-width: 680px) {
  .plan-grid { overflow-x: auto; display: block; }
  .plan-grid__head, .plan-grid__row {
    display: grid;
    grid-template-columns: minmax(7rem, 1.35fr) repeat(7, minmax(4.35rem, 1fr)) minmax(2.75rem, 0.4fr);
    min-width: 43rem;
  }
  .plan-grid__corner,
  .plan-grid__subject { width: 7rem; }
  .plan-grid__cell { min-height: 3.5rem; padding: 0.4rem; }
  .plan-grid__cell-empty-text { display: none; }
  .plan-grid__add { min-height: var(--mobile-tap-min); height: var(--mobile-tap-min); }
  .planner-reskin .planner-overflow-trigger {
    width: var(--mobile-tap-min);
    height: var(--mobile-tap-min);
  }
}

/* Activity */
.home-activity__list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
}

.home-activity__list li + li .home-activity__item {
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.home-activity__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0.25rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
  border-radius: var(--radius-sm, 0.5rem);
}

.home-activity__item:hover {
  background: var(--surface-subtle, rgba(0, 0, 0, 0.02));
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

.home-activity__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--method-accent-pale, #faf6f0);
  color: var(--method-accent, #755700);
  flex-shrink: 0;
}

.home-activity__icon .material-symbols-outlined {
  font-size: 1.2rem;
}

.home-activity__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.home-activity__summary {
  color: var(--on-surface, #2a1d1a);
  font-size: 0.95rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.home-activity__meta {
  font-size: 0.78rem;
  color: var(--on-surface-subtle, #8a7a68);
}

.home-activity__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--method-accent, #755700);
  flex-shrink: 0;
}

.home-activity__footer {
  margin-top: 0.25rem;
  display: flex;
  justify-content: flex-end;
}

.home-activity__mark-all {
  font-size: 0.82rem;
  padding: 0.35rem 0.7rem;
}

/* Tools (horizontal row replacing the aside) */
.home-tools__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}

/* button_to wraps each item in a <form>; let the button become the grid child */
.home-tools__row > form {
  display: contents;
}

.home-tool {
  --home-tool-bg: var(--surface-lowest, #fff);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  min-height: 6.5rem;
  padding: 1rem 0.6rem;
  background: var(--home-tool-bg);
  border: 1px solid var(--outline-variant, rgba(0, 0, 0, 0.06));
  border-radius: var(--radius-md, 0.75rem);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  position: relative;
}

.home-tool:hover {
  border-color: var(--method-accent, var(--border-strong, rgba(0, 0, 0, 0.12)));
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.home-tool:active {
  transform: translateY(0);
  box-shadow: var(--shadow-card);
}

.home-tool__icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 0.5rem);
}

.home-tool__label {
  font-size: 0.82rem;
  color: var(--on-surface, #2a1d1a);
  text-align: center;
  line-height: 1.25;
}

.home-tool__remove {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  font-size: 0.85rem;
  color: var(--on-surface-subtle, #8a7a68);
}

.home-tools__add {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}

.home-tools__add h3 {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-subtle, #8a7a68);
  margin: 0 0 0.75rem;
}

@media (max-width: 720px) {
  .home-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    margin-inline: 0;
    padding: 1.35rem 1rem 1.25rem;
  }
  .home-hero__actions { width: 100%; gap: 0.75rem; }
  .home-hero__cta { flex: 1; min-height: var(--mobile-tap-min); }
  .home-today-students__grid { grid-template-columns: 1fr; }
  .home-student-card { padding: 1.25rem; }
}


/* ─── Pastel rounded UI pass (mockup alignment) ───
   Keeps the existing Rails views/logic intact while pushing the app chrome
   closer to the supplied Binder dashboard mock: softer pastels, pillowy cards,
   dark primary action buttons, and no sharp orange as a global accent. */
body:not(.theme-dark) {
  background: var(--surface);
}

.sidebar-shell {
  background: var(--surface-lowest);
  border-right: 1px solid var(--outline-variant);
  border-radius: 0;
  box-shadow: var(--shadow-soft);
}

.sidebar-nav-item {
  border-radius: var(--radius-xl);
  font-weight: 800;
  opacity: 0.68;
}

.sidebar-nav-item:hover {
  background: var(--surface-container-low);
}

.sidebar-nav-item--active,
.sidebar-nav-item--active:hover {
  background: var(--primary-container);
  color: var(--primary);
  box-shadow: none;
}

.sidebar-nav-item--active .material-symbols-outlined {
  color: var(--primary);
}

.sidebar-new-entry-btn,
.btn {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
  border-radius: var(--radius-xl);
  font-weight: 800;
  box-shadow: var(--shadow-md);
}

.sidebar-new-entry-btn:hover,
.btn:hover {
  background: color-mix(in srgb, var(--secondary) 88%, white);
  border-color: color-mix(in srgb, var(--secondary) 88%, white);
}

.btn-ghost,
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  border-radius: var(--radius-xl);
}

.card,
.form-card,
.dash-card,
.doc-note-card,
.template-detail-card,
.mw-body-card,
.stat--card,
.home-student-card,
.home-mini-card,
.home-routine-strip__card {
  border-radius: var(--radius-4xl);
  box-shadow: var(--shadow-soft);
}

.dashboard-home {
  --dash-quiet-radius: var(--radius-4xl);
  --dash-quiet-shadow: var(--shadow-soft);
}

.dashboard-home .dash-date-badge,
.dashboard-home .dash-motto-banner,
.dashboard-home .quick-link-card,
.dashboard-home .dash-student-card,
.dashboard-home .dash-whats-next,
.dashboard-home .dash-sidebar-card,
.dashboard-home .child-col,
.dashboard-home .dash-stat-card,
.dashboard-home .dash-card {
  border-radius: var(--radius-4xl);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-soft);
}

.dashboard-home .quick-link-card:nth-child(6n+1),
.dashboard-home .dash-card:nth-child(6n+1) { background: color-mix(in srgb, var(--gold-pale) 36%, white); }
.dashboard-home .quick-link-card:nth-child(6n+2),
.dashboard-home .dash-card:nth-child(6n+2) { background: color-mix(in srgb, var(--sky-pale) 32%, white); }
.dashboard-home .quick-link-card:nth-child(6n+3),
.dashboard-home .dash-card:nth-child(6n+3) { background: color-mix(in srgb, var(--mint-pale) 32%, white); }
.dashboard-home .quick-link-card:nth-child(6n+4),
.dashboard-home .dash-card:nth-child(6n+4) { background: color-mix(in srgb, var(--rose-pale) 32%, white); }
.dashboard-home .quick-link-card:nth-child(6n+5),
.dashboard-home .dash-card:nth-child(6n+5) { background: color-mix(in srgb, var(--lilac-pale) 36%, white); }
.dashboard-home .quick-link-card:nth-child(6n),
.dashboard-home .dash-card:nth-child(6n) { background: color-mix(in srgb, var(--terra-pale) 30%, white); }

body.theme-dark .dashboard-home .quick-link-card:nth-child(n),
body.theme-dark .dashboard-home .dash-card:nth-child(n) {
  border-color: color-mix(in srgb, var(--dashboard-accent, var(--primary)) 16%, var(--outline-variant));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--surface-container-low) 88%, var(--dashboard-accent, var(--primary))),
    color-mix(in srgb, var(--surface-lowest) 94%, var(--dashboard-accent, var(--primary)))
  );
  box-shadow: 0 14px 30px color-mix(in srgb, black 24%, transparent);
}

.dashboard-home .dash-card-head,
.dashboard-home .child-header {
  border-bottom-color: color-mix(in srgb, var(--outline-variant) 60%, transparent);
}

.dashboard-home .dash-planner-link {
  background: var(--secondary);
  border-radius: var(--radius-xl);
  color: #fff;
  font-weight: 800;
}

body.theme-dark .sidebar-new-entry-btn,
body.theme-dark .btn,
body.theme-dark .dashboard-home .dash-planner-link {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

/* Dashboard report-style polish: bring the home surface closer to the
   analytics page with heavier hierarchy and restrained accent washes. */
.dashboard-home--guided {
  --dashboard-accent: var(--method-accent, var(--primary));
  --dashboard-accent-pale: color-mix(in srgb, var(--dashboard-accent) 8%, var(--surface-lowest));
  --dashboard-accent-line: color-mix(in srgb, var(--dashboard-accent) 24%, var(--outline-variant));
}

.dashboard-home--guided .home-hero,
.dashboard-home--guided .home-tools,
.dashboard-home--guided .home-attendance-quick,
.dashboard-home--guided .home-glance__card,
.dashboard-home--guided .home-guided-setup,
.dashboard-home--guided .home-guided-customize {
  border-color: color-mix(in srgb, var(--dashboard-accent) 12%, var(--outline-variant));
  background: linear-gradient(135deg, var(--surface-lowest), color-mix(in srgb, var(--surface-container-low) 86%, var(--dashboard-accent)));
}

.dashboard-home--guided .home-hero {
  box-shadow: 0 18px 42px color-mix(in srgb, var(--dashboard-accent) 10%, transparent);
}

.dashboard-home--guided .home-hero__eyebrow,
.dashboard-home--guided .home-glance__card-eyebrow,
.dashboard-home--guided .home-attendance-quick__field > span,
.dashboard-home--guided .home-tools__add h3 {
  color: color-mix(in srgb, var(--dashboard-accent) 78%, var(--on-surface));
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-home--guided .home-hero__title {
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.98;
}

.dashboard-home--guided .home-hero__summary,
.dashboard-home--guided .home-guided-section-sub,
.dashboard-home--guided .home-attendance-quick p,
.dashboard-home--guided .home-glance__empty,
.dashboard-home--guided .kid-ring__habits,
.dashboard-home--guided .outside-ring__hint {
  color: var(--on-surface-mid);
  font-weight: 450;
}

.dashboard-home--guided .home-guided-section-title,
.dashboard-home--guided .home-attendance-quick h2,
.dashboard-home--guided .home-glance__card-title {
  letter-spacing: 0;
}

.dashboard-home--guided .home-guided-section-title {
  color: color-mix(in srgb, var(--dashboard-accent) 70%, var(--on-surface));
  font-size: var(--text-sm);
  font-weight: 850;
}

.dashboard-home--guided .home-attendance-quick h2,
.dashboard-home--guided .home-glance__card-title,
.dashboard-home--guided .home-guided-setup__title,
.dashboard-home--guided .home-guided-priority-card__title,
.dashboard-home--guided .home-guided-browse-card__title {
  font-weight: 850;
}

.dashboard-home--guided .home-tool,
.dashboard-home--guided .home-guided-setup__card,
.dashboard-home--guided .home-guided-priority-card {
  --home-tool-bg: color-mix(in srgb, var(--surface-lowest) 92%, var(--dashboard-accent));

  border-color: color-mix(in srgb, var(--dashboard-accent) 10%, var(--outline-variant));
  background: var(--home-tool-bg);
}

.dashboard-home--guided .home-tool:hover,
.dashboard-home--guided .home-guided-setup__card:hover,
.dashboard-home--guided .home-guided-priority-card:hover {
  border-color: var(--dashboard-accent-line);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--dashboard-accent) 12%, transparent);
}

.home-tool:hover,
.home-tool:focus-visible {
  border-color: transparent;
  border-image: none;
  background:
    linear-gradient(var(--home-tool-bg), var(--home-tool-bg)) padding-box,
    linear-gradient(135deg, rgba(255, 110, 60, 0.9) 0%, rgba(255, 175, 130, 0.55) 55%, rgba(64, 34, 32, 0.1) 100%) border-box;
}

.dashboard-home--guided .home-tool__icon,
.dashboard-home--guided .home-attendance-quick__icon {
  background: color-mix(in srgb, var(--dashboard-accent) 11%, var(--surface-container-low));
  color: var(--dashboard-accent);
}

.dashboard-home--guided .home-tool__label,
.dashboard-home--guided .kid-ring__name {
  font-weight: 750;
}

.dashboard-home--guided .home-guided-inline-link {
  color: color-mix(in srgb, var(--dashboard-accent) 84%, var(--on-surface));
  font-weight: 800;
}

body.theme-dark .dashboard-home--guided .home-guided-priorities .dash-card {
  border-color: color-mix(in srgb, var(--dashboard-accent) 22%, var(--outline-variant));
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--dashboard-accent) 18%, transparent), transparent 42%),
    linear-gradient(135deg, var(--surface-container-low), color-mix(in srgb, var(--surface-lowest) 92%, var(--dashboard-accent)));
}

body.theme-dark .dashboard-home--guided .home-guided-priorities .dash-card__title {
  color: var(--on-surface);
}

body.theme-dark .dashboard-home--guided .home-guided-priorities .dash-card__info {
  color: color-mix(in srgb, var(--on-surface-subtle) 82%, var(--dashboard-accent));
}

body.theme-dark .dashboard-home--guided .home-guided-priorities .dash-card__body {
  color: var(--on-surface-mid);
}

body.theme-dark .dashboard-home--guided .home-guided-priorities .home-guided-inline-link,
body.theme-dark .dashboard-home--guided .home-guided-priorities .dash-card:nth-child(3n + 2) .home-guided-inline-link,
body.theme-dark .dashboard-home--guided .home-guided-priorities .dash-card:nth-child(3n) .home-guided-inline-link {
  border-color: color-mix(in srgb, var(--dashboard-accent) 34%, var(--outline-variant));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--dashboard-accent) 22%, var(--surface-container)),
    color-mix(in srgb, var(--surface-container-low) 88%, var(--dashboard-accent))
  );
  color: color-mix(in srgb, var(--dashboard-accent) 42%, var(--on-surface));
  box-shadow: 0 10px 24px color-mix(in srgb, black 18%, transparent);
}

body.theme-dark .dashboard-home--guided .home-guided-priorities .home-guided-inline-link::after,
body.theme-dark .dashboard-home--guided .home-guided-priorities .dash-card:nth-child(3n + 2) .home-guided-inline-link::after,
body.theme-dark .dashboard-home--guided .home-guided-priorities .dash-card:nth-child(3n) .home-guided-inline-link::after {
  background: color-mix(in srgb, var(--dashboard-accent) 28%, transparent);
  color: color-mix(in srgb, var(--dashboard-accent) 30%, var(--on-surface));
}

body.theme-dark .dashboard-home--guided .home-guided-priorities .home-guided-inline-link:hover,
body.theme-dark .dashboard-home--guided .home-guided-priorities .dash-card:nth-child(3n + 2) .home-guided-inline-link:hover,
body.theme-dark .dashboard-home--guided .home-guided-priorities .dash-card:nth-child(3n) .home-guided-inline-link:hover {
  border-color: color-mix(in srgb, var(--dashboard-accent) 48%, var(--outline));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--dashboard-accent) 28%, var(--surface-container)),
    color-mix(in srgb, var(--surface-container-low) 84%, var(--dashboard-accent))
  );
}

.dashboard-home--guided .hero-ring,
.dashboard-home--guided .kid-ring__ring,
.dashboard-home--guided .outside-ring__ring {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--dashboard-accent) 10%, transparent),
    0 8px 18px color-mix(in srgb, var(--dashboard-accent) 9%, transparent);
}

.dashboard-home--guided .hero-ring__center strong,
.dashboard-home--guided .kid-ring__center,
.dashboard-home--guided .outside-ring__center strong,
.dashboard-home--guided .weekly-spark__count {
  font-weight: 850;
}

.dashboard-home--guided .weekly-spark__bar {
  background: color-mix(in srgb, var(--dashboard-accent) 48%, var(--surface-container-low));
}

.dashboard-home--guided .weekly-spark__col--today .weekly-spark__bar {
  background: var(--dashboard-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dashboard-accent) 22%, transparent);
}

.dashboard-home--guided .weekly-spark__day {
  font-weight: 800;
}

.coop-feed {
  padding: 1rem 1.1rem 1.15rem;
}

.coop-feed-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
}

.coop-feed-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}

.coop-feed-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1rem;
}

.coop-feed-post {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
}

.coop-feed-post__avatar {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--coop-accent) 12%, var(--surface-container));
  color: var(--coop-accent);
  font-size: var(--text-sm);
  font-weight: 900;
}

.coop-feed-post__content {
  min-width: 0;
  flex: 1;
}

.coop-feed-post__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}

.coop-feed-post__header strong {
  display: block;
  color: var(--on-surface);
  font-size: var(--text-sm);
}

.coop-feed-post h3 {
  margin: 0.5rem 0 0;
  color: var(--on-surface);
  font-size: var(--text-base);
  font-weight: 850;
}

.coop-feed-post__body {
  margin-top: 0.45rem;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.coop-feed-post__body p {
  margin: 0;
}

.coop-feed-post__body p + p {
  margin-top: 0.55rem;
}

.coop-feed-form__type-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.coop-feed-form__type-row .form-select {
  max-width: 12rem;
}

.coop-feed-form__pin {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
  font-weight: 700;
}

.coop-feed-post--pinned {
  border-color: color-mix(in srgb, var(--coop-accent) 35%, var(--outline-variant));
  background: color-mix(in srgb, var(--coop-accent) 5%, var(--surface-lowest));
}

.coop-feed-post__admin-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.coop-feed-post__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--coop-accent) 10%, var(--surface-container));
  color: var(--coop-accent);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.coop-feed-post__badge .material-symbols-outlined {
  font-size: 0.9rem;
}

.coop-feed-post__badge--type {
  background: var(--surface-container-low);
  color: var(--on-surface-subtle);
}

.coop-feed-post__reactions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.coop-feed-reaction {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  background: var(--surface-lowest);
  color: var(--on-surface-subtle);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 750;
  cursor: pointer;
}

.coop-feed-reaction .material-symbols-outlined {
  font-size: 1rem;
}

.coop-feed-reaction.is-selected,
.coop-feed-reaction:hover {
  border-color: color-mix(in srgb, var(--coop-accent) 45%, var(--outline-variant));
  color: var(--coop-accent);
  background: color-mix(in srgb, var(--coop-accent) 8%, var(--surface-lowest));
}

.coop-feed-reaction strong {
  color: inherit;
  font-size: 0.7rem;
}

.coop-feed-comments {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--outline-variant);
}

.coop-feed-comments__list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.coop-feed-comment {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.coop-feed-comment__avatar {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--surface-container);
  color: var(--on-surface-subtle);
  font-size: 0.7rem;
  font-weight: 900;
}

.coop-feed-comment__content {
  min-width: 0;
  flex: 1;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
}

.coop-feed-comment__header {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}

.coop-feed-comment__header strong {
  color: var(--on-surface);
}

.coop-feed-comment__body {
  margin-top: 0.2rem;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.coop-feed-comment__body p {
  margin: 0;
}

.coop-feed-comment-form {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.coop-feed-comment-form .form-input {
  min-height: 2.5rem;
}

.coop-icon-btn--sm {
  width: 1.8rem;
  height: 1.8rem;
}

.coop-icon-btn--sm .material-symbols-outlined {
  font-size: 1rem;
}

@media (max-width: 640px) {
  .coop-feed-comment-form,
  .coop-feed-form__type-row {
    flex-direction: column;
    align-items: stretch;
  }

  .coop-feed-form__type-row .form-select {
    max-width: none;
  }
}

.coop-member-row--pending-review {
  align-items: flex-start;
}

.coop-member-main {
  min-width: 0;
  flex: 1;
}

.coop-member-note {
  margin: 0.25rem 0 0;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.coop-member-review-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.coop-member-review-form {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.coop-member-review-form .form-input {
  min-height: 2.25rem;
}

@media (max-width: 720px) {
  .coop-member-review-form {
    flex-direction: column;
    align-items: stretch;
  }
}

.coop-report-menu {
  position: relative;
}

.coop-report-menu > summary {
  list-style: none;
}

.coop-report-menu > summary::-webkit-details-marker {
  display: none;
}

.coop-report-form {
  position: absolute;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 15rem;
  padding: 0.65rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  box-shadow: var(--shadow-md);
}

.coop-feed-comment__actions {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.25rem;
}

.coop-report-row {
  align-items: flex-start;
}

.coop-report-target {
  margin: 0.35rem 0 0;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.coop-class-roster {
  margin-top: 0.55rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}

.coop-class-roster summary {
  cursor: pointer;
  font-weight: 800;
}

.coop-class-roster-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.coop-class-roster-list span {
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
}

.coop-ops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1rem;
}

.coop-ops-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
}

.coop-ops-card .material-symbols-outlined {
  color: var(--coop-accent);
}

.coop-ops-card strong {
  color: var(--on-surface);
  font-size: 1.8rem;
  line-height: 1;
}

.coop-ops-card small {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.coop-ops-row {
  align-items: flex-start;
}

@media (max-width: 760px) {
  .coop-ops-grid {
    grid-template-columns: 1fr;
  }
}

.coop-attention-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 1rem 1rem 0;
}

.coop-attention-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--coop-accent) 28%, var(--outline-variant));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--coop-accent) 6%, var(--surface-lowest));
  color: inherit;
  text-decoration: none;
}

.coop-attention-item > .material-symbols-outlined {
  color: var(--coop-accent);
  font-size: 1.2rem;
}

.coop-attention-item strong,
.coop-attention-item small {
  display: block;
}

.coop-attention-item strong {
  color: var(--on-surface);
  font-size: var(--text-sm);
}

.coop-attention-item small {
  margin-top: 0.15rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}

.coop-attention-empty {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1rem 1rem 0;
  padding: 0.75rem;
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  color: var(--on-surface-subtle);
  font-size: var(--text-sm);
  font-weight: 750;
}

.coop-attention-empty .material-symbols-outlined {
  color: var(--success, #2e7d32);
}

@media (max-width: 760px) {
  .coop-attention-list {
    grid-template-columns: 1fr;
  }
}

.coop-directory-toolbar {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid var(--outline-variant);
}

.coop-directory-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.coop-directory-search .material-symbols-outlined,
.coop-directory-privacy .material-symbols-outlined {
  color: var(--on-surface-subtle);
  font-size: 1.1rem;
}

.coop-directory-search .form-input {
  min-width: 0;
  flex: 1;
}

.coop-directory-privacy {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 700;
}

.coop-directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1rem;
}

.coop-directory-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
}

.coop-directory-name {
  color: var(--on-surface);
  font-weight: 850;
}

.coop-directory-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin-top: 0.2rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}

@media (max-width: 860px) {
  .coop-directory-grid,
  .coop-directory-card {
    grid-template-columns: 1fr;
  }

  .coop-directory-search {
    align-items: stretch;
    flex-direction: column;
  }
}

.coop-essentials-strip {
  padding: 1rem;
  border-bottom: 1px solid var(--outline-variant);
  background: color-mix(in srgb, var(--coop-accent) 5%, var(--surface-lowest));
}

.coop-essentials-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 850;
}

.coop-essentials-title .material-symbols-outlined,
.coop-pinned-inline {
  color: var(--coop-accent);
  font-size: 1rem;
  vertical-align: -0.15em;
}

.coop-essentials-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.coop-essential-card {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid color-mix(in srgb, var(--coop-accent) 25%, var(--outline-variant));
  border-radius: var(--radius-lg);
  background: var(--surface-lowest);
  color: inherit;
  text-decoration: none;
}

.coop-essential-card > .material-symbols-outlined {
  color: var(--coop-accent);
  font-size: 1.15rem;
}

.coop-essential-card strong,
.coop-essential-card small {
  display: block;
}

.coop-essential-card strong {
  color: var(--on-surface);
  font-size: var(--text-sm);
}

.coop-essential-card small {
  margin-top: 0.1rem;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}

@media (max-width: 860px) {
  .coop-essentials-list {
    grid-template-columns: 1fr;
  }
}

.coop-activity-list,
.coop-activity-timeline {
  display: grid;
  gap: 0.65rem;
  padding: 1rem;
}

.coop-activity-list--compact {
  padding-top: 0.75rem;
}

.coop-activity-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  background: var(--surface-container-low);
  color: inherit;
  text-decoration: none;
}

.coop-activity-row--timeline {
  align-items: flex-start;
}

.coop-activity-main strong,
.coop-activity-main small {
  display: block;
}

.coop-activity-main strong {
  color: var(--on-surface);
  font-size: var(--text-sm);
}

.coop-activity-main small,
.coop-activity-time {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}

.coop-activity-time {
  white-space: nowrap;
  font-weight: 750;
}

@media (max-width: 720px) {
  .coop-activity-row {
    grid-template-columns: auto 1fr;
  }

  .coop-activity-time {
    grid-column: 2;
  }
}

.binder-workspace--focused,
.binder-stage--focused {
  min-height: 100vh;
  width: 100%;
}

.bc-main--focused-coop {
  padding: 0;
  max-width: none;
}

.coop-feature-visibility-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) repeat(3, minmax(8rem, auto));
  gap: 0.5rem;
  align-items: stretch;
}

.coop-feature-visibility-head {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.coop-feature-name,
.coop-feature-toggle,
.coop-feature-locked {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
}

.coop-feature-name {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.coop-feature-name strong,
.coop-feature-name small {
  display: block;
}

.coop-feature-name small {
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
}

.coop-feature-toggle {
  justify-content: center;
  color: var(--on-surface-mid);
  font-size: var(--text-sm);
  font-weight: 800;
}

.coop-feature-locked {
  justify-content: center;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  color: var(--on-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 850;
}

.coop-feature-locked .material-symbols-outlined {
  font-size: 1rem;
}

@media (max-width: 900px) {
  .coop-feature-visibility-grid {
    grid-template-columns: 1fr;
  }

  .coop-feature-visibility-head {
    display: none;
  }

  .coop-feature-name,
  .coop-feature-toggle,
  .coop-feature-locked {
    border-radius: var(--radius-lg);
  }
}
.admin-shell {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 0 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.admin-shell__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}

.admin-stat {
  background: var(--surface-lowest);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  box-shadow: 0 1px 6px var(--shadow);
}

.admin-stat__value {
  font-family: var(--font-sans);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1.1;
}

.admin-stat__label {
  font-size: 0.78rem;
  color: var(--on-surface-subtle);
  margin-top: 0.2rem;
}

.admin-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 12px var(--shadow);
  padding: 1.25rem 1.5rem 1.5rem;
}

.admin-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.admin-card__title {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--on-surface);
  margin: 0 0 0.2rem;
}

.admin-card__sub {
  font-size: 0.88rem;
  color: var(--on-surface-subtle);
  margin: 0 0 1rem;
  line-height: 1.5;
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.admin-form__divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--on-surface-subtle);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0.25rem 0;
}

.admin-form__divider::before,
.admin-form__divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--surface-container-low);
}

.admin-form__checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--on-surface-mid);
}

.admin-form__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-preview {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--primary-container);
  color: var(--primary);
}

.admin-preview__heading {
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.admin-preview__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.2rem 1rem;
  font-size: 0.85rem;
  font-family: var(--font-mono);
}

.admin-preview__more {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  opacity: 0.85;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--surface-container-low);
  vertical-align: middle;
}

.admin-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-subtle);
  font-weight: 700;
}

.admin-table__row--inactive td {
  color: var(--on-surface-subtle);
}

.admin-table__actions {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

.admin-table__dim {
  color: var(--on-surface-subtle);
  font-size: 0.82rem;
}

.admin-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-pill--active {
  background: #dcfce7;
  color: #166534;
}

.admin-pill--muted {
  background: var(--surface-container-low);
  color: var(--on-surface-mid);
}

.admin-search {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.admin-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-list--compact li {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--surface-container-low);
  font-size: 0.9rem;
}

.admin-list__meta {
  color: var(--on-surface-subtle);
  font-size: 0.82rem;
}


/* ─── ADMIN PAGES ─── */


/* ─── COMMUNITY LAYOUT (public profiles, public posts, etc.) ─── */
.community-body {
  margin: 0;
  background: var(--surface-canvas, #f7f7f9);
  color: var(--on-surface, #1a1a1f);
  font-family: var(--font-sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.community-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--surface-container-low, #e9e9ee);
}

.community-topbar__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.community-topbar__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.community-topbar__brand-img {
  display: inline-flex;
  align-items: center;
  height: 44px;
}

.community-topbar__brand-img .binder-wordmark {
  height: 44px;
  width: auto;
}

.community-topbar__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.community-topbar__link {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--on-surface-mid, #4a4a52);
  text-decoration: none;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
}
.community-topbar__link:hover { color: var(--on-surface, #1a1a1f); }

.community-topbar__cta {
  display: inline-flex;
  align-items: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #706cfc 0%, #5b57e3 100%);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(112, 108, 252, 0.2);
}
.community-topbar__cta:hover { filter: brightness(1.04); }

.community-main {
  flex: 1 0 auto;
  width: 100%;
}

.community-flash {
  max-width: 1100px;
  margin: 1rem auto 0;
}

.community-footer {
  flex-shrink: 0;
  padding: 1.25rem 1rem 2rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--on-surface-subtle, #6d6d78);
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.community-footer__sep { opacity: 0.5; }
.community-footer__link { color: inherit; text-decoration: none; }
.community-footer__link:hover { color: var(--on-surface, #1a1a1f); text-decoration: underline; }

/* ── Profile shell ── */
.community-profile {
  position: relative;
  padding-bottom: 3rem;
}

.community-profile__cover {
  height: 140px;
  background: linear-gradient(120deg, #c4b5fd 0%, #a5b4fc 35%, #fda4af 100%);
}

.community-profile__shell {
  max-width: 1100px;
  margin: -64px auto 0;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .community-profile__shell {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
}

.community-profile__main {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid var(--surface-container-low, #ececf2);
  overflow: visible;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.community-profile__identity {
  padding: 0 1.5rem 1.25rem;
}

.community-profile__identity-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-top: -56px;
  margin-bottom: 0.85rem;
}

.community-profile__avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  background: var(--surface-lowest, #fafafa);
  overflow: hidden;
  flex-shrink: 0;
}

.community-profile__avatar-inner,
.community-profile__avatar-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.community-profile__action {
  margin-bottom: 0.6rem;
}

.community-profile__name {
  font-family: var(--font-sans);
  font-size: 1.65rem;
  font-weight: 800;
  margin: 0.4rem 0 0.1rem;
  line-height: 1.15;
}

.community-profile__handle {
  color: var(--on-surface-subtle, #6d6d78);
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
}

.community-profile__bio {
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0.5rem 0 0.85rem;
  color: var(--on-surface-mid, #2a2a32);
}

.community-profile__about {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-size: 0.85rem;
  color: var(--on-surface-mid, #5a5a62);
}

.community-profile__about-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.community-profile__about-item .material-symbols-outlined {
  font-size: 1.05rem;
  color: var(--on-surface-subtle, #6d6d78);
}

.community-profile__about-item--verified { color: #047857; font-weight: 600; }
.community-profile__about-item--verified .material-symbols-outlined { color: #10b981; }

.community-profile__stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.25rem;
  font-size: 0.92rem;
  color: var(--on-surface-mid, #4a4a52);
}

.community-profile__stats strong {
  color: var(--on-surface, #1a1a1f);
}

.community-profile__tabs {
  display: flex;
  gap: 0.25rem;
  border-top: 1px solid var(--surface-container-low, #ececf2);
  padding: 0 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.community-profile__tabs::-webkit-scrollbar { display: none; }

.community-profile__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.95rem 0.85rem;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  color: var(--on-surface-mid, #4a4a52);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  transition: color 0.12s ease;
}

.community-profile__tab:hover { color: var(--on-surface, #1a1a1f); }

.community-profile__tab--active {
  color: var(--on-surface, #1a1a1f);
  border-bottom-color: #706cfc;
}

.community-profile__tab-count {
  font-size: 0.75rem;
  background: var(--surface-container-low, #ececf2);
  color: var(--on-surface-mid, #5a5a62);
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.5;
}

.community-profile__tab--active .community-profile__tab-count {
  background: rgba(112, 108, 252, 0.14);
  color: #4f49d1;
}

.community-profile__panel {
  padding: 1.25rem 1.5rem 1.75rem;
}

.community-profile__section-heading {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle, #6d6d78);
  margin: 1.5rem 0 0.65rem;
  font-weight: 700;
}

.community-profile__section-heading:first-child { margin-top: 0; }

.community-profile__section-heading--warn { color: #b45309; }

.community-profile__hint {
  font-size: 0.85rem;
  color: var(--on-surface-subtle, #6d6d78);
  margin: 0 0 0.85rem;
}

/* ── Cards ── */
.community-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.85rem;
}

.community-card-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.community-card-grid--pins {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.community-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--surface-container-low, #ececf2);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

.community-card:hover {
  border-color: #cdcadf;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.community-card--media {
  padding: 0;
}

.community-card:not(.community-card--media) {
  padding: 0.95rem 1rem;
}

.community-card__image-wrap {
  background: var(--surface-container-low, #f0f0f4);
  aspect-ratio: 5 / 3;
  overflow: hidden;
}

.community-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.community-card__body {
  padding: 0.8rem 1rem 0.95rem;
}

.community-card__title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
}

.community-card__meta {
  font-size: 0.82rem;
  color: var(--on-surface-subtle, #6d6d78);
  margin-top: 0.25rem;
}

.community-card__submeta {
  font-size: 0.74rem;
  color: var(--on-surface-subtle, #6d6d78);
  margin-top: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.community-profile-feed {
  display: flex;
  flex-direction: column;
}

.community-profile-post {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0.8rem;
  padding: 1rem 0;
  border-top: 1px solid var(--surface-container-low, #ececf2);
}

.community-profile-post:first-child {
  border-top: 0;
  padding-top: 0;
}

.community-profile-post:last-child {
  padding-bottom: 0;
}

.community-profile-post--featured {
  border-top-color: rgba(112, 108, 252, 0.28);
}

.community-profile-post--moderated {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  padding: 1rem;
  margin-top: 0.75rem;
}

.community-profile-post__avatar {
  width: 44px;
  height: 44px;
}

.community-profile-post__avatar > * {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}

.community-profile-post__content {
  min-width: 0;
}

.community-profile-post__header,
.community-profile-post__author,
.community-profile-post__meta {
  display: flex;
  align-items: center;
}

.community-profile-post__header {
  gap: 0.35rem;
  min-width: 0;
  color: var(--on-surface-subtle, #6d6d78);
  font-size: 0.9rem;
}

.community-profile-post__author {
  gap: 0.35rem;
  min-width: 0;
}

.community-profile-post__author strong {
  color: var(--on-surface, #1a1a1f);
  font-weight: 800;
}

.community-profile-post__author span,
.community-profile-post__time {
  min-width: 0;
  color: var(--on-surface-subtle, #6d6d78);
}

.community-profile-post__dot {
  color: var(--on-surface-subtle, #6d6d78);
}

.community-profile-post__title {
  margin: 0.35rem 0 0;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 800;
  color: var(--on-surface, #1a1a1f);
}

.community-profile-post__body {
  margin-top: 0.25rem;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--on-surface, #1a1a1f);
}

.community-profile-post__body p {
  margin: 0.35rem 0 0;
}

.community-profile-post__media {
  position: relative;
  margin-top: 0.75rem;
  border: 1px solid var(--surface-container-low, #ececf2);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-lowest, #fafafa);
}

.community-profile-post__image {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

.community-profile-post__media-count {
  position: absolute;
  right: 0.65rem;
  bottom: 0.65rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.68);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.25rem 0.55rem;
}

.community-profile-post__meta {
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  color: var(--on-surface-subtle, #6d6d78);
  font-size: 0.83rem;
}

.community-profile-post__detail-link {
  color: #92400e;
  font-weight: 700;
  text-decoration: none;
}

.community-profile-post__detail-link:hover {
  text-decoration: underline;
}

.community-profile-post__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.68rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #fef3c7;
  color: #92400e;
}
.community-profile-post__badge--hidden { background: #fee2e2; color: #991b1b; }
.community-profile-post__badge--removed { background: #fecaca; color: #7f1d1d; }
.community-profile-post__badge--pending_review { background: #dbeafe; color: #1e40af; }

@media (max-width: 560px) {
  .community-profile-post {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 0.65rem;
  }

  .community-profile-post__avatar,
  .community-profile-post__avatar > * {
    width: 36px;
    height: 36px;
  }

  .community-profile-post__header {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.2rem 0.35rem;
  }
}

/* ── Empty state ── */
.community-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  background: var(--surface-lowest, #fafafa);
  border: 1px dashed var(--surface-container-low, #d8d8e0);
  border-radius: 14px;
}

.community-empty__icon .material-symbols-outlined {
  font-size: 2rem;
  color: var(--on-surface-subtle, #6d6d78);
}

.community-empty__title {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0.55rem 0 0.4rem;
}

.community-empty__body {
  font-size: 0.92rem;
  color: var(--on-surface-mid, #4a4a52);
  max-width: 32rem;
  margin: 0 auto 1rem;
  line-height: 1.5;
}

/* ── Right rail ── */
.community-profile__rail {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

@media (min-width: 1024px) {
  .community-profile__rail {
    position: sticky;
    top: 78px;
  }
}

.community-rail-card {
  background: #ffffff;
  border: 1px solid var(--surface-container-low, #ececf2);
  border-radius: 14px;
  padding: 1rem 1.15rem 1.1rem;
}

.community-rail-card__heading {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-surface-subtle, #6d6d78);
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.community-rail-card__body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--on-surface-mid, #2a2a32);
  margin: 0 0 0.85rem;
}

.community-rail-card__body--muted {
  color: var(--on-surface-subtle, #6d6d78);
  font-style: italic;
  margin-bottom: 0;
}

.community-rail-card--cta {
  background: linear-gradient(150deg, #f5f3ff 0%, #ffffff 60%);
  border-color: rgba(112, 108, 252, 0.18);
}

.community-rail-card__secondary {
  display: block;
  text-align: center;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--on-surface-mid, #4a4a52);
  text-decoration: none;
  font-weight: 600;
}
.community-rail-card__secondary:hover { color: var(--on-surface, #1a1a1f); }

.community-rail-share {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface-container-low, #f0f0f4);
  border-radius: 10px;
  padding: 0.3rem 0.4rem 0.3rem 0.65rem;
}

.community-rail-share__url {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.75rem;
  color: var(--on-surface-mid, #4a4a52);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.community-rail-share__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0.25rem;
  color: var(--on-surface-mid, #4a4a52);
  cursor: pointer;
  border-radius: 8px;
}
.community-rail-share__copy:hover { background: rgba(0, 0, 0, 0.05); color: var(--on-surface, #1a1a1f); }

/* ── Buttons (community scope) ── */
.community-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.12s ease, background-color 0.12s ease, color 0.12s ease;
  font-family: inherit;
}

.community-btn--primary {
  background: #1a1a1f;
  color: #ffffff;
}
.community-btn--primary:hover { filter: brightness(1.1); }

.community-btn--ghost {
  background: transparent;
  color: var(--on-surface, #1a1a1f);
  border: 1px solid var(--surface-container-high, #d4d4dc);
}
.community-btn--ghost:hover { background: var(--surface-container-low, #ececf2); }

.community-btn--full { width: 100%; }

/* ── Plain post composer ── */
.community-composer-page {
  padding: 2.5rem 1rem 4rem;
}

.community-composer-shell {
  max-width: 720px;
  margin: 0 auto;
}

.community-composer-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.community-composer-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--on-surface-mid, #4a4a52);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.community-composer-back .material-symbols-outlined {
  font-size: 1.1rem;
}

.community-composer-kicker {
  color: #706cfc;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.community-composer-head h1 {
  margin: 0.2rem 0 0;
  color: var(--on-surface, #1a1a1f);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}

.community-composer-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.community-composer-card {
  padding: 1rem;
  border: 1px solid var(--surface-container-low, #ececf2);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(25, 27, 28, 0.06);
}

.community-composer-author {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
  color: var(--on-surface, #1a1a1f);
}

.community-composer-author span:not(.material-symbols-outlined):not(.avatar-initials) {
  display: block;
  color: var(--on-surface-subtle, #6d6d78);
  font-size: 0.85rem;
}

.community-composer-title,
.community-composer-body {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--on-surface, #1a1a1f);
  font-family: inherit;
  outline: 0;
}

.community-composer-title {
  padding: 0.3rem 0 0.75rem;
  font-size: 1.35rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.community-composer-body {
  min-height: 12rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--surface-container-low, #ececf2);
  resize: vertical;
  font-size: 1rem;
  line-height: 1.55;
}

.community-composer-title::placeholder,
.community-composer-body::placeholder {
  color: var(--on-surface-subtle, #8a8a94);
}

.community-composer-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--surface-container-low, #ececf2);
  flex-wrap: wrap;
}

.community-composer-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  padding: 0 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(112, 108, 252, 0.22);
  background: rgba(112, 108, 252, 0.08);
  color: #5b57e3;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}

.community-composer-upload .material-symbols-outlined {
  font-size: 1.15rem;
}

.community-composer-file {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.community-composer-selects {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.community-composer-select {
  min-height: 2.35rem;
  padding: 0 0.7rem;
  border: 1px solid var(--surface-container-high, #d4d4dc);
  border-radius: 999px;
  background: #ffffff;
  color: var(--on-surface-mid, #4a4a52);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
}

.community-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.community-composer-error {
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: #fee2e2;
  color: #991b1b;
  font-weight: 700;
}

@media (max-width: 640px) {
  .community-topbar__brand-img,
  .community-topbar__brand-img .binder-wordmark {
    height: 34px;
  }

  .community-composer-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .community-composer-selects,
  .community-composer-select,
  .community-composer-upload,
  .community-composer-actions .community-btn {
    width: 100%;
  }
}


/* ─── COMMUNITY PROFILE SETTINGS HELPERS ─── */
.settings-toggle-row--lead {
  padding: 1.25rem 1.5rem 0.75rem;
}

.settings-handle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-handle-row__at {
  color: var(--on-surface-subtle, #6d6d78);
  font-weight: 600;
}

.settings-handle-row__view {
  margin-top: 0.4rem;
}

.settings-handle-row__suggested {
  color: #2f855a;
}

.settings-impact-card {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--surface-container-low, #f8f7fa);
  border-radius: 10px;
}

.settings-impact-card__heading {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--on-surface-mid, #555);
  margin-bottom: 0.5rem;
}

.settings-impact-card__row {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  flex-wrap: wrap;
}

.settings-stacked-group {
  margin-top: 1rem;
}


/* ─── COMMUNITY LOCKED PROFILE CARD ─── */
.community-profile--locked .community-profile__cover {
  background: linear-gradient(120deg, #d4d4dc 0%, #b6b6c4 100%);
}

.community-locked-card {
  text-align: center;
  padding: 3rem 1.75rem 2.5rem;
}

.community-locked-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-container-low, #ececf2);
  color: var(--on-surface-mid, #5a5a62);
  margin-bottom: 0.85rem;
}

.community-locked-card__icon .material-symbols-outlined {
  font-size: 28px;
}

.community-locked-card__title {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
}

.community-locked-card__body {
  max-width: 32rem;
  margin: 0 auto 1.25rem;
  color: var(--on-surface-mid, #4a4a52);
  line-height: 1.55;
}

.community-locked-card__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}