/* =============================================================================
 * 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 ────────────────────────────────────────────────────────────────────
 *   Ember (#FF4500) on a cool-slate canvas. Palette ramps: orange primary,
 *   brown/mauve/dusty-rose accents, slate neutrals. "Mintlify-style shell" —
 *   translucent floating topnav pill, full-height workspace with sidebar +
 *   toolbar, cards on a tinted page.
 *
 * ── 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    Inter (400/500/600/700) — body, UI, buttons, labels.
 *   --font-display Fraunces — reserved for page titles and celebratory
 *                  moments (stat numbers, hero dates). Loaded but currently
 *                  under-used; lean into it on new `.page-title` surfaces.
 *   --font-mono    system mono stack — code and numerics only.
 *
 *   Rules:
 *     • Always reference --font-sans (not the literal 'Inter, -apple-system…'
 *       stack). Keeps future font swaps to one line.
 *     • Weights: use 400/500/600/700 only. Intermediate values (650, 750)
 *       snap to the nearest loaded weight and waste design intent.
 *     • Tracking scales with size: tighter as type grows. Body: -0.005em.
 *       Display: -0.02em to -0.04em.
 *
 * ── 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-full 9999px
 *   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 — cool slate canvas + warm off-white lifts + mauve-tinted rails */
  --surface:               #edeff0;
  --surface-container-low: #f8f3f3;
  --surface-container:     #e3e5e8;
  --surface-container-high:#ddd6dc;
  --surface-lowest:        #ffffff;
  --surface-variant:       #c2c9cc;

  /* Brand — Ember orange + palette anchors (deep brown, mauve, dusty rose) */
  --brand-ember:             #ff4500;
  --brand-brown:             #402220;
  --brand-mauve:             #bdacba;
  --brand-dust:              #c79b94;

  --primary:               var(--brand-ember);
  --primary-hover:         #c83400;
  --primary-dim:           #8f2300;
  --primary-container:     #ffd2c7;
  --primary-fixed:         #ff987d;
  --on-primary:            #ffffff;
  --primary-soft:          rgba(255, 69, 0, 0.09);

  --secondary:             var(--brand-brown);
  --secondary-container:   #ead6d4;
  --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 — brown-tinted for warmth vs pure neutral */
  --outline-variant:       rgba(64, 34, 32, 0.07);
  --outline:               rgba(64, 34, 32, 0.14);

  /* Ambient shadow — slate + subtle warmth */
  --shadow:                rgba(25, 27, 28, 0.07);

  /* Data / badge colors — Craft-style colorful pastels
     (each has a foreground and a pale fill) */
  --terracotta:            #c05038;
  --terra-pale:            #fbe9e1;
  --gold:                  #b88915;
  --gold-pale:             #fbf1d6;
  --sky:                   #2f6ec2;
  --sky-pale:              #e3edfa;
  --rose:                  #b9315c;
  --rose-pale:             #fae1ea;
  --lilac:                 #7159c2;
  --lilac-pale:            #ebe6fa;
  --mint:                  #2f9276;
  --mint-pale:             #dcf0e9;
  --butter:                #d4a21a;
  --butter-pale:           #fbf0cc;
  --sage-pale:             #e4ead9;

  /* 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 — Craft-style stack */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Inter', Georgia, serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Radius scale — Apple/Material-style, ~×1.5 progression */
  --radius-xs:   0.25rem;   /*  4px */
  --radius-sm:   0.375rem;  /*  6px */
  --radius-md:   0.625rem;  /* 10px */
  --radius-lg:   0.875rem;  /* 14px */
  --radius-xl:   1.25rem;   /* 20px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-3xl:  1.75rem;   /* 28px */
  --radius-full: 9999px;

  /* Shadow scale — low, soft, neutral */
  --shadow-sm: 0 1px 2px var(--shadow);
  --shadow-md: 0 2px 10px var(--shadow);
  --shadow-lg: 0 8px 28px var(--shadow);
  --shadow-xl: 0 16px 48px rgba(25, 27, 28, 0.08);

  /* Motion — durations tuned for app UI, not marketing pages */
  --duration-fast: 120ms;  /* hovers, small state flips */
  --duration-base: 200ms;  /* most transitions */
  --duration-slow: 320ms;  /* 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 */
}

/* ─── 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-ember:             #ff987d;
  --brand-brown:             #c27973;
  --brand-mauve:             #bdacba;
  --brand-dust:              #c79b94;

  --primary:               #ff987d;
  --primary-hover:         #ffb199;
  --primary-dim:           #ff7a5c;
  --primary-container:     #561100;
  --primary-fixed:         #ffd2c7;
  --on-primary:            #230300;
  --primary-soft:          rgba(255, 152, 125, 0.14);

  --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(255, 152, 125, 0.35);
  color: var(--on-surface);
}

/* ─── 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 — warm canvas + Ember */
.theme-preview--light {
  background: #f8f3f3;
}
.theme-preview--light .theme-preview-bar  { background: #ff4500; }
.theme-preview--light .theme-preview-dot  { background: #ff4500; }
.theme-preview--light .theme-preview-line { background: #ddd6dc; }

/* Dark preview — #191B1C canvas + soft ember */
.theme-preview--dark {
  background: #191b1c;
}
.theme-preview--dark .theme-preview-bar  { background: #ff987d; }
.theme-preview--dark .theme-preview-dot  { background: #ff987d; }
.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: var(--surface);
  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(255, 69, 0, 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 ─── */

/* ─── 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); }

/* ─── 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-tree-logo,
.bc-logo .bc-logo-img svg {
  height: 24px;
  width: auto;
}

/* 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: 34px;
  height: 34px;
  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: var(--text-lg);
}

.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);
}

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(--surface-lowest);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px rgba(28, 29, 26, 0.14), 0 0 0 1px var(--outline-variant);
  padding: 0.5rem;
  z-index: 300;
}

.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-tree-logo,
  .bc-logo .bc-logo-img svg {
    height: 22px;
  }

  .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;
  --binder-sidebar-radius: 8px;
  --binder-sidebar-bg: var(--surface-container-low);
  --binder-sidebar-border: var(--surface-container-high);
  --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 2px var(--shadow);
  --binder-card-bg: var(--surface-lowest);
  --binder-card-border: var(--surface-container-high);
  --binder-nav-bg: transparent;
  --binder-nav-border: transparent;
  --binder-nav-hover: color-mix(in srgb, var(--brand-brown) 8%, transparent);
  --binder-nav-active-bg: 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(--surface-container-high);
  --binder-toolbar-shadow: var(--shadow-sm);
  --binder-icon-bg: var(--surface-lowest);
  --binder-icon-border: var(--surface-container-high);
  --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(--surface-container-high);
  --binder-launcher-trigger-text: var(--on-surface);
  --binder-launcher-panel-bg: var(--surface-lowest);
  --binder-launcher-panel-border: var(--surface-container-high);
  --binder-launcher-panel-shadow: var(--shadow-lg), 0 0 0 1px var(--outline-variant);
  --binder-ambient-a: rgba(255, 69, 0, 0.04);
  --binder-ambient-b: rgba(189, 172, 186, 0.14);
  background-color: var(--surface);
  background-image: none;
}

/* Default Ember accents; lab variants only nudge data colors + ambient wash */
body.nav-ui-mint {
  --terracotta: #c83400;
  --terra-pale: #ffd2c7;
  --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(255, 69, 0, 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(255, 69, 0, 0.05);
}

body.theme-dark[class*="nav-ui-"] {
  --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(--brand-mauve) 12%, transparent);
  --binder-nav-active-bg: 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 3px var(--shadow);
  --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: var(--shadow-xl), 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);
}

.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: 0;
  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);
}

.binder-sidebar__logo-img .binder-tree-logo,
.binder-sidebar__logo-img svg {
  width: auto;
  height: 3.25rem;
  display: block;
}

.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.3rem;
  width: 100%;
  padding: 0.42rem 0.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  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__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(255, 69, 0, 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-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-copy {
  display: flex;
  min-width: 0;
  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__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(255, 69, 0, 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-tree-logo,
.sidebar-logo-img svg {
  height: 140px;
  width: auto;
}

.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: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(28, 29, 26, 0.14), 0 0 0 1px rgba(28, 29, 26, 0.04);
  padding: 0.5rem;
  max-height: 24rem;
  overflow-y: auto;
  z-index: 100;
}

.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-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;
}

/* ─── 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: 1440px;
  width: 100%;
  margin: 0 auto;
}

/* Legacy .main class for views not yet migrated */
.main {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 2rem 3rem;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}
.main--hub {
  max-width: 1200px;
  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);
}

.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 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-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: rgba(255, 255, 255, 0.82);
  border: none;
  border-radius: var(--radius-lg);
  padding: 0.85rem 1.15rem;
  box-shadow: 0 3px 10px rgba(28, 29, 26, 0.03);
  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: 0 8px 18px rgba(28, 29, 26, 0.06);
}

.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;
}

/* 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);
}

.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));
}

/* After base .btn-ghost: dark themes use light --on-surface for body text; ghost
   keeps a light fill, so use dark ink. Placed here so this wins over `a { color: inherit }`. */
body.theme-dark .btn-ghost,
body.theme-dark .btn-ghost {
  color: var(--on-primary);
}

body.theme-dark .btn-ghost:hover,
body.theme-dark .btn-ghost: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: 500;
  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-list {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}

.term-list-heading {
  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-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(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}

.term-summary-grid--wide {
  margin-bottom: 2rem;
}

.term-summary-stat {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
}

.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-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-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;
}

.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-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; }

.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: rgba(255, 255, 255, 0.92);
  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);
}

/* Dark themes: light input fill + light --on-surface was unreadable; focus uses dark fill again. */
body.theme-dark .form-input,
body.theme-dark .form-select,
body.theme-dark .form-textarea,
body.theme-dark .form-input,
body.theme-dark .form-select,
body.theme-dark .form-textarea {
  color: var(--on-primary);
}

body.theme-dark .form-input::placeholder,
body.theme-dark .form-textarea::placeholder,
body.theme-dark .form-input::placeholder,
body.theme-dark .form-textarea::placeholder {
  color: color-mix(in srgb, var(--on-primary) 48%, transparent);
}

body.theme-dark .form-input:focus,
body.theme-dark .form-select:focus,
body.theme-dark .form-textarea:focus,
body.theme-dark .form-input:focus,
body.theme-dark .form-select:focus,
body.theme-dark .form-textarea:focus {
  color: var(--on-surface);
}

body.theme-dark .form-input:focus::placeholder,
body.theme-dark .form-textarea:focus::placeholder,
body.theme-dark .form-input:focus::placeholder,
body.theme-dark .form-textarea:focus::placeholder {
  color: color-mix(in srgb, var(--on-surface) 45%, transparent);
}

/* Native date controls: host `color` often does not style the inner value (term onboarding). */
body.theme-dark .form-input[type="date"],
body.theme-dark .form-input[type="datetime-local"],
body.theme-dark .form-input[type="month"],
body.theme-dark .form-input[type="date"],
body.theme-dark .form-input[type="datetime-local"],
body.theme-dark .form-input[type="month"] {
  color-scheme: light;
}

body.theme-dark .form-input[type="date"]:focus,
body.theme-dark .form-input[type="datetime-local"]:focus,
body.theme-dark .form-input[type="month"]:focus,
body.theme-dark .form-input[type="date"]:focus,
body.theme-dark .form-input[type="datetime-local"]:focus,
body.theme-dark .form-input[type="month"]:focus {
  color-scheme: dark;
}

body.theme-dark .form-input[type="date"]::-webkit-datetime-edit,
body.theme-dark .form-input[type="date"]::-webkit-datetime-edit-fields-wrapper,
body.theme-dark .form-input[type="date"]::-webkit-datetime-edit-text,
body.theme-dark .form-input[type="date"]::-webkit-datetime-edit-month-field,
body.theme-dark .form-input[type="date"]::-webkit-datetime-edit-day-field,
body.theme-dark .form-input[type="date"]::-webkit-datetime-edit-year-field,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit-text,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit-month-field,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit-day-field,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit-year-field,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
body.theme-dark .form-input[type="month"]::-webkit-datetime-edit,
body.theme-dark .form-input[type="date"]::-webkit-datetime-edit,
body.theme-dark .form-input[type="date"]::-webkit-datetime-edit-fields-wrapper,
body.theme-dark .form-input[type="date"]::-webkit-datetime-edit-text,
body.theme-dark .form-input[type="date"]::-webkit-datetime-edit-month-field,
body.theme-dark .form-input[type="date"]::-webkit-datetime-edit-day-field,
body.theme-dark .form-input[type="date"]::-webkit-datetime-edit-year-field,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit-text,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit-month-field,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit-day-field,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit-year-field,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
body.theme-dark .form-input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
body.theme-dark .form-input[type="month"]::-webkit-datetime-edit {
  color: var(--on-primary);
}

body.theme-dark .form-input[type="date"]:focus::-webkit-datetime-edit,
body.theme-dark .form-input[type="date"]:focus::-webkit-datetime-edit-fields-wrapper,
body.theme-dark .form-input[type="date"]:focus::-webkit-datetime-edit-text,
body.theme-dark .form-input[type="date"]:focus::-webkit-datetime-edit-month-field,
body.theme-dark .form-input[type="date"]:focus::-webkit-datetime-edit-day-field,
body.theme-dark .form-input[type="date"]:focus::-webkit-datetime-edit-year-field,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-fields-wrapper,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-text,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-month-field,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-day-field,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-year-field,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-hour-field,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-minute-field,
body.theme-dark .form-input[type="month"]:focus::-webkit-datetime-edit,
body.theme-dark .form-input[type="date"]:focus::-webkit-datetime-edit,
body.theme-dark .form-input[type="date"]:focus::-webkit-datetime-edit-fields-wrapper,
body.theme-dark .form-input[type="date"]:focus::-webkit-datetime-edit-text,
body.theme-dark .form-input[type="date"]:focus::-webkit-datetime-edit-month-field,
body.theme-dark .form-input[type="date"]:focus::-webkit-datetime-edit-day-field,
body.theme-dark .form-input[type="date"]:focus::-webkit-datetime-edit-year-field,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-fields-wrapper,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-text,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-month-field,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-day-field,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-year-field,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-hour-field,
body.theme-dark .form-input[type="datetime-local"]:focus::-webkit-datetime-edit-minute-field,
body.theme-dark .form-input[type="month"]:focus::-webkit-datetime-edit {
  color: var(--on-surface);
}

/* 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);
}

/* 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;
}

.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: rgba(255, 255, 255, 0.84);
  border-radius: var(--radius-xl);
  border: none;
  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-subtle, #f5f3ef);
  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);
}

.fm-global-drop-overlay__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.child-profile-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  border: 1.5px solid rgba(26, 26, 46, 0.06);
}

.child-profile-id {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.child-profile-avatar {
  width: 52px;
  height: 52px;
  font-size: var(--text-lg);
  border: none;
}

.child-profile-name {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--on-surface);
}

.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);
}

/* ─── 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: 1rem;
  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;
}

.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) 35%, transparent);
  z-index: 1040;
}

.drive-preview-backdrop[hidden] {
  display: none;
}

.drive-preview-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(100vw, 28rem);
  height: 100vh;
  max-height: 100dvh;
  background: var(--surface-lowest);
  border-left: 1px solid var(--outline-variant);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.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);
}

.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;
}

.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: center;
  text-align: center;
  padding: var(--space-7) var(--space-4);
  color: var(--on-surface-mid);
}

.drive-empty__icon {
  font-size: 3rem;
  opacity: 0.28;
  margin-bottom: var(--space-3);
}

.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;
}

@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: 100%;
  left: 0;
  z-index: 1000;
  width: 300px;
  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;
  margin-bottom: 0.5rem;
}

.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-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-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-submit-btn {
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
}

.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;
  text-align: center;
  margin-bottom: 0.3rem;
  color: var(--primary);
}

.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; }

/* ─── 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 ─── */
.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;
  justify-content: space-between;
  padding: 0.5rem 0;
  margin-bottom: 0.75rem;
  gap: 1rem;
}

.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-sm);
  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-xl);
  font-weight: 400;
  color: #3c4043;
  margin: 0;
  letter-spacing: 0;
}

.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-sm);
  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);
}
.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-sm);
  overflow: hidden;
  background: #fff;
}

.gcal-week-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid #dadce0;
}

.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);
  min-height: 450px;
}

.gcal-week-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0.4rem;
  background: #fff;
  position: relative;
  cursor: pointer;
  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-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: #1a73e8;
  color: #fff;
  font-weight: 500;
}

/* 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-xs);
  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);
  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: flex;
  border: 1px solid #dadce0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.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-right: 1px solid #dadce0;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  background: #fff;
}
.gcal-view-btn:last-child { border-right: none; }
.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;
}

.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.5rem;
  border-radius: var(--radius-sm);
  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-sm);
  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;
}
.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: flex-end;
}

.gcal-month-num {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #3c4043;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.gcal-month-events {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gcal-month-event {
  display: block;
  padding: 1px 4px;
  border-radius: var(--radius-xs);
  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;
}

/* ─── 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;
  }
  .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;
  }
  .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 ─── */
/* Warm canvas matches marketing (.marketing-body / --mk-bg) via design tokens */
.onboarding-body {
  background: var(--surface-container-low);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.onboarding-body {
  overflow-x: hidden;
}

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-tree-logo,
.ob-brand-logo svg {
  height: 12rem;
  width: 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;
}

/* ── 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),
    #ff6b8a, #ff8a65, #ffd54f,
    #81c784, #4dd0e1, #7986cb,
    #ba68c8, #f06292, #ff6b8a
  );
  -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),
    #ff6b8a44, #ff8a6544, #ffd54f44,
    #81c78444, #4dd0e144, #7986cb44,
    #ba68c844, #f0629244, #ff6b8a44
  );
  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(--secondary);
}

.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;
}

/* ── 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: #fff;
  border: 1px solid #e5e7eb;
  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 #e5e7eb;
  background: #fafafa;
}

.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;
}

/* 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;
}

/* 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-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; }
}

/* ── 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; }
  .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-tree-logo,
.ob-method-loader-wordmark svg {
  max-width: 100%;
  max-height: 5.5rem;
  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 ─── */

/* 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 { max-width: 900px; }

.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(100vh - 4rem);
  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;
}

/* 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;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

/* "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 {
  opacity: 1;
  pointer-events: auto;
}

.chatroom-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);
}

.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;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  font-weight: 500;
  flex-shrink: 0;
}

.chatroom-typing[hidden] {
  display: none;
}

.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;
  gap: 0.4rem;
  align-items: flex-end;
}

.chatroom-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  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;
}

.chatroom-attach-btn:hover {
  color: var(--primary);
  background: var(--surface-container-low);
}

.chatroom-attach-btn .material-symbols-outlined {
  font-size: var(--text-xl);
}

.chatroom-input {
  flex: 1;
  min-height: 2.2rem;
  max-height: 8rem;
  padding: 0.45rem 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);
  line-height: 1.5;
}

.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: 100%;
  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;
  margin-bottom: 0.5rem;
}

.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: 100%;
  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;
  margin-bottom: 0.5rem;
}

.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);
}

/* 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(100vh - 2rem);
  }
  .chatroom-sidebar { display: none; }
  .chatroom-main { border-radius: var(--radius-lg); }
}

/* ─── 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-settings-form {
  max-width: 860px;
}

/* ─── 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: 'Fraunces', Georgia, serif;
  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: 'Fraunces', Georgia, serif;
  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: 'Fraunces', Georgia, serif;
  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: 'Fraunces', Georgia, serif;
  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.5rem;
}

.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;
}

/* ─── 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;
}

.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-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;
}

.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(--secondary);
  opacity: 0.7;
  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;
}

/* ─── 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);
}

/* ─── 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;
}

/* ─── 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-lowest); }

.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;
}

.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: rgba(248, 246, 240, 0.9);
  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, rgba(245, 244, 240, 0.85) 0%, rgba(250, 249, 246, 0.4) 28%, transparent 55%);
}

.bc-main--record-craft {
  max-width: min(1240px, 100%);
}

/* Wide layout: pages that benefit from filling the full viewport
   (planner calendar grid, files browser, etc.). */
.bc-main--wide {
  max-width: none;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.record-craft {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 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: 1.5rem;
}

.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-craft-template-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  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);
}

.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);
}

.record-craft-template-btn__name {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--on-surface);
}

.record-craft-template-btn__desc {
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--on-surface-mid);
}

.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-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, rgba(250, 249, 246, 0.97) 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: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  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;
}

.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: 'Fraunces', 'Georgia', serif;
  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 .doc-paper__bar {
  background: linear-gradient(180deg, rgba(22, 22, 30, 0.96) 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 .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 ─── */
.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__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__label {
  font-size: var(--text-sm, 0.875rem);
  color: var(--on-surface, #1a1a2e);
}

.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(--surface-lowest);
  border: 1px solid var(--surface-container);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 36px rgba(28, 29, 26, 0.12);
  z-index: 500;
  overflow: hidden;
}

.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-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;
}

.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;
}

/* ------------------------------------------------------------------------
 * Portfolio unified feed
 * ------------------------------------------------------------------------ */
.page-header--portfolio {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.portfolio-header-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.portfolio-new-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.portfolio-new-btn:hover { opacity: 0.9; }

.portfolio-filters {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 1rem 0 1.25rem;
}
.portfolio-filter-row {
  display: flex;
  align-items: flex-start;
  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.4rem;
  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;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--surface-subtle, #f5f3ef);
  color: var(--on-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  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-hover, #ece9e2);
}
.portfolio-pill--active {
  background: var(--primary);
  color: #fff;
}
.portfolio-pill--active:hover { background: var(--primary); opacity: 0.92; }
.portfolio-pill-icon {
  font-size: var(--text-md) !important;
  line-height: 1;
}
.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.5rem;
}
.portfolio-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid #d4ccb8;
  box-shadow: 0 1px 2px rgba(28, 20, 8, 0.05);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.portfolio-item:hover {
  border-color: var(--primary);
  box-shadow: 0 3px 10px rgba(28, 20, 8, 0.08);
}
.portfolio-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--surface-subtle, #f5f3ef);
  color: var(--primary);
  flex-shrink: 0;
}
.portfolio-item__icon .material-symbols-outlined {
  font-size: var(--text-lg);
}
.portfolio-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.portfolio-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
}
.portfolio-item__kind {
  font-weight: 600;
  color: var(--primary);
  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.05rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--surface-subtle, #f5f3ef);
  font-size: var(--text-xs);
  color: var(--on-surface);
}
.portfolio-item__time {
  margin-left: auto;
  font-size: var(--text-xs);
}
.portfolio-item__title {
  font-size: var(--text-md);
  font-weight: 600;
  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-base);
  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-subtle, #f5f3ef);
  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);
}

/* ------------------------------------------------------------------------
 * Generic grid/list view toggle
 * ------------------------------------------------------------------------ */
.view-toggle {
  display: inline-flex;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle, #f5f3ef);
  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: #fff;
  border: 1px solid #d4ccb8;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(28, 20, 8, 0.05);
}
.subject-list__head,
.subject-list__row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) 100px 120px 110px 180px;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
}
.subject-list__head {
  background: var(--surface-subtle, #f5f3ef);
  border-bottom: 1px solid #d4ccb8;
  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 #ece5d3;
}
.subject-list__row:hover { background: #fbf8f0; }
.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-subtle, #f5f3ef);
}
.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-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-trash,
.ai-chat-sidebar-item:focus-within .ai-chat-sidebar-item-trash {
  opacity: 1;
}

.ai-chat-sidebar-item-trash:hover {
  color: var(--error);
  background: color-mix(in srgb, var(--error) 12%, transparent);
}

.ai-chat-sidebar-item-trash .material-symbols-outlined {
  font-size: var(--text-md);
}

.ai-chat-shell--selecting .ai-chat-sidebar-item-trash-form {
  display: none;
}

.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: 3rem 2rem;
  flex: 1;
}

.ai-chat-welcome-icon .material-symbols-outlined {
  font-size: 42px;
  color: var(--primary);
  opacity: 0.8;
}

.ai-chat-welcome h3 {
  margin: 1rem 0 1.5rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--on-surface);
}

.ai-chat-suggestions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  max-width: 520px;
}

.ai-chat-suggestion {
  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);
  cursor: pointer;
  font-size: var(--text-base);
  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: var(--text-xl);
  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 { background: var(--surface-container); padding: 0.15rem 0.35rem; border-radius: var(--radius-xs); font-size: var(--text-sm); }
.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);
}

.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; }
}

.ai-chat-code-block {
  position: relative;
}

.ai-chat-code-block pre {
  padding-right: 3rem;
}

.ai-chat-code-copy {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xs);
  padding: 0.2rem 0.5rem;
  font-size: var(--text-xs);
  color: var(--on-surface-subtle);
  cursor: pointer;
  opacity: 0;
  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-block:hover .ai-chat-code-copy,
.ai-chat-code-copy:focus-visible { opacity: 1; }

.ai-chat-code-copy:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}

.ai-chat-code-copy--copied {
  color: var(--primary);
  opacity: 1 !important;
}

.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); }

/* 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,
.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-sm);
}

.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-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-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;
}

.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;
}

.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 > * {
  margin: 0;
}

.formal-record-card__head {
  margin-bottom: 0;
}

.formal-record-card__actions {
  margin-top: auto;
  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;
}

.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;
  width: 28px;
  height: 28px;
  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;
  }

  .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,
  .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;
  }

  .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-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);
  }
}

/* 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;
  }
}

/* =========================================================================
   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;
  }
}

/* Hide the sheet header on desktop — it's only meaningful in the sheet */
@media (min-width: 641px) {
  .sidebar-new-entry-sheet-head { display: none; }
}

/* =========================================================================
   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) {
  /* 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);
  }
}