/* ==========================================================================
   fcc-app-modules-v1.css
   Phase 1A — Per-module wrapper scaffold (PLACEHOLDER for Phase 1C)

   This file is a SCAFFOLD only. Phase 1A delivers the shell rebrand
   (sidebar / topbar / drawer / bottom-nav / tokens / components). Module-
   level shell alignment (Calendar header polish, Chores list rows, Meal
   Planning sheet chrome, Profiles card grid, Settings groups, etc.) is
   Phase 1C work and will land in this file, one module per commit.

   Loading the file early (Phase 1A) reserves the slot so:
     - Cache-buster discipline is established now
     - Phase 1C can append without touching app/index.html again
     - The per-module ordering is documented in one place

   Scope: every rule MUST live under `body.fcc-app-shell-v1` and target an
   existing module page id (or an additive `.fcc-mod-*` class). No
   selectors that touch element types globally.

   Module ordering for Phase 1C (matches plan §7.2):
     1.  #dashboard            (Phase 1B is the primary surface; minor 1C polish here)
     2.  #calendar             (most-used; legacy + v2 share DOM — careful)
     3.  #chores               (chores-page class — high specificity already)
     4.  Onix surfaces         (assistant overlay + dashboard card — no page id)
     5.  #mealPlanning         (recent FV.2e work — preserve)
     6.  #shopping             (parent-only)
     7.  #profiles             (preserve dual-source trusted device fix)
     8.  #settings + #appearance + #security + #supportCenter + #notifications + #automation + #budgetAlerts
     9.  #memories + #timeline
    10.  Behavior cluster (8 pages)
    11.  #expenses + #budget
    12.  #wishlists, #values, #meeting, #messages, #vacation, #points, #chorePoints, #rewards, #achievements, #schoolPortal, #reports, #kids-games

   ========================================================================== */


/* --------------------------------------------------------------------------
   PHASE 1A — Minimal page canvas spacing
   Every existing <section class="page"> gets a comfortable content gutter
   when the new shell is on. This is the only module-level rule we ship
   in Phase 1A; everything else here is reserved for Phase 1C.
   -------------------------------------------------------------------------- */
body.fcc-app-shell-v1 .page {
  /* Existing page rules in styles.css remain authoritative for show/hide.
     We only nudge horizontal/vertical breathing room when the new shell
     is on. */
}

@media (min-width: 768px) {
  body.fcc-app-shell-v1 .page {
    padding-left: clamp(var(--fcc-space-5), 3vw, var(--fcc-space-7));
    padding-right: clamp(var(--fcc-space-5), 3vw, var(--fcc-space-7));
  }
}


/* --------------------------------------------------------------------------
   RESERVED — Phase 1C module slots
   Append per-module rule blocks below as each module is aligned. Keep them
   in the order listed above. Each block must:
     - Open with a comment banner: ===== <module> =====
     - Scope every selector under `body.fcc-app-shell-v1 #<pageId>`
     - Add at most ~80 lines of CSS per module in 1C (the heavy work is
       wrapping with .fcc-card / .fcc-list-row / .fcc-module-header)
     - Not duplicate any existing styles.css selectors for the same module

   Example slot (commented out — Phase 1C will activate):

   body.fcc-app-shell-v1 #calendar { … }
   body.fcc-app-shell-v1 #calendar .fcc-module-header { … }
   body.fcc-app-shell-v1 #calendar .calendar-grid { … }

   -------------------------------------------------------------------------- */


/* ============================================================
   ===== #dashboard (Phase 1B — CSS-only reskin) =====

   Strategy: the dashboard is an existing widget grid with a
   visibility system + 24+ widget types populated by dashboard.js
   and other module renderers. We do NOT reshuffle the inner DOM.
   Instead we reskin the existing containers so they match the
   new visual language (rounded white cards, lavender hero,
   dark-glass Onix card, soft pill banners).

   Surfaces reskinned:
     - .welcome-card (greeting hero)
     - .dashboard-widgets-actions (Manage Widgets button row)
     - .overdue-banner (warm coral notification pill)
     - .dashboard-grid (responsive 1/2-column grid)
     - .dashboard-card (every widget container)
     - .dashboard-card h3 / .muted typography
     - .fcc-ai-dashboard-card (Onix Summary widget — dark glass)
     - .dashboard-empty-state (visibility-system empty hint)
     - .assistant-input-wrap (legacy Family Assistant input)

   NOT touched:
     - Widget contents (each module renders its own widget body)
     - Widget visibility popup logic
     - dashboard.js render pipeline
     - Any data fetching
   ============================================================ */

/* Welcome-card hero ----------------------------------------- */
body.fcc-app-shell-v1 #dashboard .welcome-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #FBF7FF 0%, #F4EBFF 45%, #FCE7F3 100%);
  border: 1px solid var(--fcc-color-border-strong);
  border-radius: var(--fcc-radius-xl);
  box-shadow: 0 14px 36px rgba(124, 58, 237, 0.12), 0 2px 4px rgba(27, 18, 48, 0.04);
  padding: var(--fcc-space-7) var(--fcc-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fcc-space-5);
  flex-wrap: wrap;
  margin: var(--fcc-space-4) 0 var(--fcc-space-5);
}
body.fcc-app-shell-v1 #dashboard .welcome-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
body.fcc-app-shell-v1 #dashboard .welcome-card::after {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -10%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
body.fcc-app-shell-v1 #dashboard .welcome-card-copy {
  position: relative;
  z-index: 1;
  flex: 1 1 60%;
  min-width: 240px;
}
body.fcc-app-shell-v1 #dashboard .welcome-card h2 {
  font-family: var(--fcc-font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fcc-color-text);
  margin: 0 0 var(--fcc-space-2);
  background: linear-gradient(135deg, #6D28D9 0%, #BE185D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.fcc-app-shell-v1 #dashboard .welcome-card p {
  color: var(--fcc-color-text-muted);
  font-size: 14px;
  margin: 0 0 6px;
  line-height: 1.5;
}
body.fcc-app-shell-v1 #dashboard .welcome-card .bible-verse-line {
  color: var(--fcc-color-text-subtle);
  font-style: italic;
  margin-top: var(--fcc-space-2);
}
body.fcc-app-shell-v1 #dashboard .dashboard-widgets-actions {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}
body.fcc-app-shell-v1 #dashboard .dashboard-manage-widgets-btn {
  background: var(--fcc-color-surface);
  color: var(--fcc-color-accent-strong);
  border: 1px solid var(--fcc-color-border-strong);
  border-radius: var(--fcc-radius-pill);
  padding: 10px var(--fcc-space-5);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.12);
  transition: background var(--fcc-dur-fast) var(--fcc-ease),
              transform var(--fcc-dur-fast) var(--fcc-ease),
              box-shadow var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 #dashboard .dashboard-manage-widgets-btn:hover {
  background: var(--fcc-color-surface-tint);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.18);
}

/* Kid-only swap (the dashboardKidSelectorWrap) -------------- */
body.fcc-app-shell-v1 #dashboard #dashboardKidSelectorWrap {
  background: var(--fcc-color-surface);
  border: 1px solid var(--fcc-color-border);
  border-radius: var(--fcc-radius-lg);
  padding: var(--fcc-space-3) var(--fcc-space-4);
  display: flex;
  align-items: center;
  gap: var(--fcc-space-3);
  box-shadow: var(--fcc-shadow-card);
  margin-bottom: var(--fcc-space-4);
}
body.fcc-app-shell-v1 #dashboard .kid-logged-in-label {
  font-weight: 700;
  color: var(--fcc-color-text);
}

/* Overdue banner (warm coral pill) -------------------------- */
body.fcc-app-shell-v1 #dashboard .overdue-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fcc-space-4);
  padding: 14px var(--fcc-space-5);
  margin: 0 0 var(--fcc-space-4);
  background: linear-gradient(135deg, #FFF7ED 0%, #FFE4D6 100%);
  border: 1px solid #FDBA74;
  border-radius: var(--fcc-radius-lg);
  color: #9A3412;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(251, 146, 60, 0.14);
}
body.fcc-app-shell-v1 #dashboard .overdue-banner-link {
  color: #9A3412;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 800;
  white-space: nowrap;
}
body.fcc-app-shell-v1 #dashboard .overdue-banner-link:hover {
  color: #7C2D12;
}

/* Dashboard grid -------------------------------------------- */
body.fcc-app-shell-v1 #dashboard .dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fcc-space-5);
}
@media (min-width: 900px) {
  body.fcc-app-shell-v1 #dashboard .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1440px) {
  body.fcc-app-shell-v1 #dashboard .dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Onix summary spans 2 columns on wide screens (it's the headline widget) */
  body.fcc-app-shell-v1 #dashboard .dashboard-grid .widget-fcc-ai-summary {
    grid-column: span 2;
  }
}

/* Generic widget card chrome -------------------------------- */
body.fcc-app-shell-v1 #dashboard .dashboard-card {
  background: var(--fcc-color-surface);
  border: 1px solid var(--fcc-color-border);
  border-radius: var(--fcc-radius-lg);
  box-shadow: var(--fcc-shadow-card);
  padding: var(--fcc-space-5);
  transition: box-shadow var(--fcc-dur-base) var(--fcc-ease),
              transform var(--fcc-dur-base) var(--fcc-ease);
}
@media (min-width: 768px) {
  body.fcc-app-shell-v1 #dashboard .dashboard-card:hover {
    box-shadow: var(--fcc-shadow-card-hover);
    transform: translateY(-2px);
  }
}
body.fcc-app-shell-v1 #dashboard .dashboard-card > h3 {
  font-family: var(--fcc-font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fcc-color-text);
  margin: 0 0 var(--fcc-space-3);
  display: flex;
  align-items: center;
  gap: var(--fcc-space-2);
}
body.fcc-app-shell-v1 #dashboard .dashboard-card .muted {
  color: var(--fcc-color-text-muted);
}
body.fcc-app-shell-v1 #dashboard .dashboard-card .muted.small {
  font-size: 12px;
  margin: 0 0 var(--fcc-space-3);
}

/* Onix Summary widget (dark-glass intelligence surface) ----- */
body.fcc-app-shell-v1 #dashboard .widget-fcc-ai-summary {
  /* Override base dashboard-card chrome with the Onix dark glass */
  background: var(--fcc-color-onix-gradient);
  border: 0;
  box-shadow: var(--fcc-shadow-onix);
  padding: 0;
  position: relative;
  overflow: hidden;
}
body.fcc-app-shell-v1 #dashboard .widget-fcc-ai-summary::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.30) 0%, transparent 70%);
  pointer-events: none;
}
body.fcc-app-shell-v1 #dashboard .widget-fcc-ai-summary:hover {
  /* Disable the lift-on-hover for the Onix card — it has its own gravity */
  transform: none;
  box-shadow: var(--fcc-shadow-onix);
}
body.fcc-app-shell-v1 #dashboard .widget-fcc-ai-summary .fcc-ai-dashboard-card {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--fcc-space-6);
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
body.fcc-app-shell-v1 #dashboard .fcc-ai-dashboard-eyebrow {
  color: rgba(244, 114, 182, 0.92);
  font-weight: 800;
}
body.fcc-app-shell-v1 #dashboard .fcc-ai-dashboard-card h3 {
  color: var(--fcc-color-onix-text);
  font-family: var(--fcc-font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 20px;
  margin: 0;
}
body.fcc-app-shell-v1 #dashboard .fcc-ai-dashboard-badge {
  background: rgba(255, 255, 255, 0.14);
  color: var(--fcc-color-onix-text);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
body.fcc-app-shell-v1 #dashboard .fcc-ai-dashboard-body {
  color: var(--fcc-color-onix-text-muted);
  margin-top: var(--fcc-space-4);
  font-size: 14px;
  line-height: 1.55;
}
body.fcc-app-shell-v1 #dashboard .fcc-ai-dashboard-actions {
  margin-top: var(--fcc-space-5);
  gap: var(--fcc-space-2);
}
body.fcc-app-shell-v1 #dashboard .fcc-ai-dashboard-actions button {
  background: rgba(255, 255, 255, 0.10);
  color: var(--fcc-color-onix-text);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--fcc-radius-pill);
  padding: 9px var(--fcc-space-4);
  font-weight: 700;
  font-family: var(--fcc-font-body);
  font-size: 13px;
  transition: background var(--fcc-dur-fast) var(--fcc-ease),
              border-color var(--fcc-dur-fast) var(--fcc-ease),
              transform var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 #dashboard .fcc-ai-dashboard-actions button:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

/* Empty state for the visibility system --------------------- */
body.fcc-app-shell-v1 #dashboard .dashboard-empty-state {
  background: var(--fcc-color-surface);
  border: 1px dashed var(--fcc-color-border-strong);
  border-radius: var(--fcc-radius-lg);
  padding: var(--fcc-space-7) var(--fcc-space-5);
  text-align: center;
  color: var(--fcc-color-text-muted);
}
body.fcc-app-shell-v1 #dashboard .dashboard-empty-state .btn-link {
  color: var(--fcc-color-accent);
  font-weight: 700;
}

/* Legacy Family Assistant input (kept — restyled) ----------- */
body.fcc-app-shell-v1 #dashboard .assistant-input-wrap {
  display: flex;
  gap: var(--fcc-space-2);
  margin-top: var(--fcc-space-3);
}
body.fcc-app-shell-v1 #dashboard .assistant-input-wrap input {
  flex: 1 1 auto;
  padding: 10px var(--fcc-space-4);
  border-radius: var(--fcc-radius-pill);
  border: 1px solid var(--fcc-color-border-strong);
  background: var(--fcc-color-surface);
  color: var(--fcc-color-text);
  font-family: var(--fcc-font-body);
  font-size: 14px;
}
body.fcc-app-shell-v1 #dashboard .assistant-input-wrap input:focus {
  outline: 2px solid var(--fcc-color-accent);
  outline-offset: 2px;
}
body.fcc-app-shell-v1 #dashboard .assistant-input-wrap .btn-primary {
  background: var(--fcc-color-accent-gradient);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--fcc-radius-pill);
  padding: 10px var(--fcc-space-5);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
}
body.fcc-app-shell-v1 #dashboard .assistant-examples {
  color: var(--fcc-color-text-subtle);
  font-size: 12px;
  margin: 0 0 var(--fcc-space-3);
}

/* Widget visibility popup (mobile sheet + desktop modal) ---- */
body.fcc-app-shell-v1 #dashboard .dashboard-widgets-popup {
  border-radius: var(--fcc-radius-xl) var(--fcc-radius-xl) 0 0;
  box-shadow: var(--fcc-shadow-overlay);
  background: var(--fcc-color-surface);
}
body.fcc-app-shell-v1 #dashboard .dashboard-widgets-popup-title {
  font-family: var(--fcc-font-display);
  color: var(--fcc-color-text);
  font-weight: 800;
}
body.fcc-app-shell-v1 #dashboard .dashboard-widgets-popup-backdrop {
  background: rgba(27, 18, 48, 0.32);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ============================================================
   END #dashboard reskin (Phase 1B initial)
   ============================================================ */


/* ============================================================
   ===== #dashboard SPEC-ALIGNED LAYOUT (.fcc-dashboard-v1) =====
   The mockup-aligned dashboard. Legacy widget grid + welcome card
   stay in DOM (so existing renderers/handlers don't break) but are
   PERMANENTLY hidden — no toggle, no dual dashboard. Per spec:
   "Do not leave both the old dashboard and new dashboard visible
   at the same time."
   ============================================================ */

/* Permanently hide every legacy dashboard surface inside the new shell.
   The new layout owns the dashboard; the legacy widget popup + grid +
   welcome card stay in DOM only so existing handlers don't NPE on
   missing IDs. */
body.fcc-app-shell-v1 #dashboard .fcc-legacy-welcome,
body.fcc-app-shell-v1 #dashboard .welcome-card,
body.fcc-app-shell-v1 #dashboard .dashboard-grid,
body.fcc-app-shell-v1 #dashboard .dashboard-widgets-popup,
body.fcc-app-shell-v1 #dashboard .dashboard-widgets-popup-backdrop,
body.fcc-app-shell-v1 #dashboard .overdue-banner,
body.fcc-app-shell-v1 #dashboard #dashboardManageWidgetsBtn {
  display: none !important;
}
/* Hide the redundant "Manage Widgets" sidebar sub-nav (no widget grid
   to manage anymore under the new shell). */
body.fcc-app-shell-v1 #dashboardManageWidgetsNav {
  display: none !important;
}

/* The legacy stylesheet has late dashboard caps; this scoped shell rule is
   the Phase 1B source of truth for the active dashboard canvas. */
body.fcc-app-shell-v1 #dashboard.page.active {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Layout root — spec-target width + auto margins so the dashboard
   uses the available canvas instead of a narrow centered column. */
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-v1 {
  display: flex;
  flex-direction: column;
  gap: var(--fcc-space-5);
  padding-top: var(--fcc-space-4);
  padding-bottom: var(--fcc-space-6);
  width: min(100%, 1480px);
  max-width: 1480px;
  margin-inline: 0 auto;
  padding-inline: clamp(12px, 1.2vw, 22px);
}

body.fcc-app-shell-v1 #dashboard .fcc-dashboard-top-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}

/* ---- Hero --------------------------------------------------- */
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #FBF7FF 0%, #F4EBFF 50%, #FCE7F3 100%);
  border: 1px solid var(--fcc-app-line);
  border-radius: var(--fcc-app-radius-xl);
  box-shadow: var(--fcc-app-shadow);
  padding: var(--fcc-space-7) var(--fcc-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fcc-space-6);
  flex-wrap: wrap;
}
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: 5%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  right: -5%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(236, 90, 183, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-hero-copy {
  flex: 1 1 60%;
  min-width: 260px;
  position: relative;
  z-index: 1;
}
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-kicker {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--fcc-radius-pill);
  background: rgba(255, 255, 255, 0.62);
  color: var(--fcc-app-purple);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--fcc-space-3);
}
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-greeting {
  font-family: var(--fcc-font-display);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 var(--fcc-space-2);
  color: var(--fcc-app-ink);
}
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-greeting [data-dashboard-user-name] {
  background: linear-gradient(135deg, var(--fcc-app-purple) 0%, var(--fcc-app-pink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-subtitle {
  color: var(--fcc-app-muted);
  font-size: 14px;
  margin: 0 0 var(--fcc-space-5);
}

/* Hero art (real LOGO-WOFCC.png) */
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-hero-art {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-width: 180px;
}
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-hero-art img {
  width: clamp(120px, 14vw, 190px);
  height: auto;
  max-width: 190px;
  max-height: 190px;
  object-fit: contain;
  position: relative;
  inset: auto;
  transform: none;
  border-radius: 0;
  z-index: 1;
}
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-hero-logo {
  filter: drop-shadow(0 12px 28px rgba(124, 58, 237, 0.22));
}

/* ---- Stat tiles -------------------------------------------- */
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fcc-space-3);
  margin-top: var(--fcc-space-2);
}
@media (min-width: 640px) {
  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
body.fcc-app-shell-v1 #dashboard .fcc-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--fcc-space-4);
  background: var(--fcc-app-surface-strong);
  border: 1px solid var(--fcc-app-line);
  border-radius: var(--fcc-app-radius-lg);
  box-shadow: 0 4px 16px rgba(70, 40, 120, 0.06);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--fcc-dur-base) var(--fcc-ease),
              transform var(--fcc-dur-base) var(--fcc-ease);
}
body.fcc-app-shell-v1 #dashboard .fcc-stat-tile:hover {
  box-shadow: var(--fcc-app-shadow);
  transform: translateY(-2px);
}
body.fcc-app-shell-v1 #dashboard .fcc-stat-tile__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--fcc-radius-md);
  background: rgba(124, 58, 237, 0.12);
  color: var(--fcc-app-purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
body.fcc-app-shell-v1 #dashboard .fcc-stat-tile[data-stat="reminders"] .fcc-stat-tile__icon {
  background: rgba(236, 90, 183, 0.14); color: #BE185D;
}
body.fcc-app-shell-v1 #dashboard .fcc-stat-tile[data-stat="todos"] .fcc-stat-tile__icon {
  background: rgba(34, 197, 94, 0.14); color: #166534;
}
body.fcc-app-shell-v1 #dashboard .fcc-stat-tile[data-stat="chores"] .fcc-stat-tile__icon {
  background: rgba(251, 146, 60, 0.14); color: #92400E;
}
body.fcc-app-shell-v1 #dashboard .fcc-stat-tile__value {
  font-family: var(--fcc-font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--fcc-app-ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
body.fcc-app-shell-v1 #dashboard .fcc-stat-tile__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--fcc-app-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---- Main + rail grid (spec: minmax(0,1fr) 320px gap 24px) -------- */
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 1280px) {
  body.fcc-app-shell-v1 #dashboard.page.active {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-top-row {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 22px;
  }

  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-top-row .fcc-dashboard-hero,
  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-top-row .fcc-upcoming-card {
    height: 100%;
  }

  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-main-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 22px;
  }
}
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-primary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  min-width: 0;
}
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-rail {
  display: flex;
  flex-direction: column;
  gap: var(--fcc-space-5);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
@media (min-width: 1100px) {
  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-primary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  body.fcc-app-shell-v1 #dashboard .fcc-today-schedule-card {
    grid-column: 1;
  }

  body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card {
    grid-column: 2;
  }

  body.fcc-app-shell-v1 #dashboard .fcc-todos-overview-card,
  body.fcc-app-shell-v1 #dashboard .fcc-recent-activity-card {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1280px) {
  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-rail {
    min-width: 320px;
    max-width: 360px;
  }

  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-rail .fcc-card {
    width: 100%;
  }
}
@media (max-width: 1023px) {
  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-v1 {
    width: 100%;
    max-width: none;
  }

  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-main-grid,
  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-primary {
    grid-template-columns: 1fr;
  }

  body.fcc-app-shell-v1 #dashboard .fcc-today-schedule-card,
  body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card,
  body.fcc-app-shell-v1 #dashboard .fcc-todos-overview-card,
  body.fcc-app-shell-v1 #dashboard .fcc-recent-activity-card {
    grid-column: 1;
  }
}

/* ---- Generic card chrome on dashboard ---------------------- */
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-v1 .fcc-card {
  background: var(--fcc-app-surface-strong);
  border: 1px solid var(--fcc-app-line);
  border-radius: var(--fcc-app-radius-lg);
  box-shadow: 0 4px 16px rgba(70, 40, 120, 0.06);
  padding: var(--fcc-space-5);
}
body.fcc-app-shell-v1 #dashboard .fcc-card__title {
  color: var(--fcc-app-ink);
}
body.fcc-app-shell-v1 #dashboard .fcc-card__action {
  color: var(--fcc-app-purple);
}

/* ---- Onix dashboard card (dark glass — spec gradient) -----
   Specificity bumped (.fcc-dashboard-v1 included) so this rule wins
   against `.fcc-dashboard-v1 .fcc-card` which also matches this card. */
body.fcc-app-shell-v1 #dashboard .fcc-dashboard-v1 .fcc-onix-dashboard-card,
body.fcc-app-shell-v1 #dashboard .fcc-card.fcc-onix-dashboard-card {
  background:
    radial-gradient(circle at 18% 12%, rgba(168, 85, 247, 0.45), transparent 32%),
    radial-gradient(circle at 88% 10%, rgba(236, 72, 153, 0.22), transparent 30%),
    linear-gradient(145deg, #21113f 0%, #130b2d 100%);
  color: #ffffff;
  border: 0;
  box-shadow: var(--fcc-shadow-onix);
  padding: var(--fcc-space-6);
  position: relative;
  overflow: hidden;
}
/* Force every text node + control inside the Onix card to readable white,
   defeating any inherited muted/disabled styles from the legacy stylesheet. */
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card,
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card h1,
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card h2,
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card h3,
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card p,
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card a,
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card button,
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card input,
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card .fcc-onix-prompt span {
  color: #ffffff;
  opacity: 1;
}
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card__eyebrow {
  color: var(--fcc-app-pink);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 6px;
  position: relative;
  z-index: 1;
}
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card__title {
  font-family: var(--fcc-font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fcc-color-onix-text);
  margin: 0 0 var(--fcc-space-2);
  position: relative;
  z-index: 1;
}
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card__subtitle {
  color: var(--fcc-color-onix-text-muted);
  margin: 0 0 var(--fcc-space-5);
  font-size: 14px;
  position: relative;
  z-index: 1;
}
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card__open {
  position: absolute;
  top: var(--fcc-space-4);
  right: var(--fcc-space-4);
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.10);
  border-radius: var(--fcc-radius-pill);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card__open:hover {
  background: rgba(255, 255, 255, 0.18);
}
body.fcc-app-shell-v1 #dashboard .fcc-mini-onix-thread {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 210px;
  overflow-y: auto;
  margin: 0 0 var(--fcc-space-4);
  padding-right: 2px;
}
body.fcc-app-shell-v1 #dashboard .fcc-mini-onix-thread:empty {
  display: none;
}
body.fcc-app-shell-v1 #dashboard .fcc-mini-onix-message {
  max-width: 88%;
  border-radius: 14px;
  padding: 9px 11px;
  font-size: 13px;
  line-height: 1.35;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.10);
  white-space: pre-wrap;
}
body.fcc-app-shell-v1 #dashboard .fcc-mini-onix-message.user {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.20);
}
body.fcc-app-shell-v1 #dashboard .fcc-mini-onix-message.onix {
  align-self: flex-start;
}
body.fcc-app-shell-v1 #dashboard .fcc-mini-onix-thinking {
  align-self: flex-start;
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  font-weight: 700;
}
body.fcc-app-shell-v1 #dashboard .fcc-mini-onix-open-action {
  align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--fcc-radius-pill);
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card__prompts {
  display: flex;
  flex-direction: column;
  gap: var(--fcc-space-2);
  position: relative;
  z-index: 1;
}
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card .fcc-onix-prompt {
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.08);
  color: var(--fcc-color-onix-text);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--fcc-radius-md);
  padding: 12px var(--fcc-space-4);
  font-family: var(--fcc-font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fcc-space-3);
  transition: background var(--fcc-dur-fast) var(--fcc-ease),
              border-color var(--fcc-dur-fast) var(--fcc-ease),
              transform var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 #dashboard .fcc-onix-dashboard-card .fcc-onix-prompt:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.20);
  transform: translateX(2px);
}

/* ---- Today's Schedule ------------------------------------- */
/* List rows already styled by fcc-app-components-v1.css; here we just
   make sure the schedule list has no UL bullet padding. */
body.fcc-app-shell-v1 #dashboard .fcc-today-schedule-card .fcc-list,
body.fcc-app-shell-v1 #dashboard .fcc-todos-overview-card .fcc-list,
body.fcc-app-shell-v1 #dashboard .fcc-recent-activity-card .fcc-list,
body.fcc-app-shell-v1 #dashboard .fcc-upcoming-card .fcc-list,
body.fcc-app-shell-v1 #dashboard .fcc-onix-activity-card .fcc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.fcc-app-shell-v1 #dashboard .fcc-today-schedule-card .fcc-list-row[role="button"],
body.fcc-app-shell-v1 #dashboard .fcc-upcoming-card .fcc-list-row[role="button"] {
  cursor: pointer;
}
body.fcc-app-shell-v1 #dashboard .fcc-today-schedule-card .fcc-list-row[role="button"]:focus-visible,
body.fcc-app-shell-v1 #dashboard .fcc-upcoming-card .fcc-list-row[role="button"]:focus-visible,
body.fcc-app-shell-v1 #dashboard .fcc-family-members-card .fcc-avatar:focus-visible {
  outline: 3px solid rgba(124, 58, 237, 0.28);
  outline-offset: 2px;
}
body.fcc-app-shell-v1 #dashboard .fcc-family-members-card .fcc-avatar {
  padding: 0;
  cursor: pointer;
  font-family: var(--fcc-font-body);
}
body.fcc-app-shell-v1 #dashboard .fcc-family-members-card .fcc-avatar:not(.fcc-avatar--add) {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #F4EBFF 0%, #FCE7F3 100%);
  border: 2px solid #FFFFFF;
  box-shadow: 0 8px 18px rgba(83, 45, 128, 0.12), 0 2px 6px rgba(17, 12, 46, 0.08);
}
body.fcc-app-shell-v1 #dashboard .fcc-family-members-card .fcc-avatar--add {
  width: 56px;
  height: 56px;
}
body.fcc-app-shell-v1 #dashboard .fcc-family-members-card .profile-avatar-dashboard {
  background: transparent;
}
body.fcc-app-shell-v1 #dashboard .fcc-family-members-card .profile-avatar-dashboard.profile-avatar-fallback {
  background: linear-gradient(135deg, #F4EBFF 0%, #FCE7F3 100%);
  color: var(--fcc-color-accent);
}
body.fcc-app-shell-v1 #dashboard .fcc-family-members-card .profile-avatar-dashboard .profile-avatar-initials {
  font-weight: 800;
  font-size: 18px;
}

/* ---- To-Dos overview mini-stats --------------------------- */
body.fcc-app-shell-v1 #dashboard .fcc-todos-overview-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fcc-space-2);
  margin-bottom: var(--fcc-space-3);
}
@media (min-width: 640px) {
  body.fcc-app-shell-v1 #dashboard .fcc-todos-overview-card__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
body.fcc-app-shell-v1 #dashboard .fcc-todo-stat {
  background: rgba(124, 58, 237, 0.04);
  border: 1px solid var(--fcc-app-line);
  border-radius: var(--fcc-radius-md);
  padding: var(--fcc-space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.fcc-app-shell-v1 #dashboard .fcc-todo-stat__value {
  font-family: var(--fcc-font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--fcc-app-ink);
  line-height: 1;
}
body.fcc-app-shell-v1 #dashboard .fcc-todo-stat__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fcc-app-muted);
}
body.fcc-app-shell-v1 #dashboard .fcc-todo-stat--todo .fcc-todo-stat__value { color: var(--fcc-app-purple); }
body.fcc-app-shell-v1 #dashboard .fcc-todo-stat--progress .fcc-todo-stat__value { color: var(--fcc-app-blue); }
body.fcc-app-shell-v1 #dashboard .fcc-todo-stat--done .fcc-todo-stat__value { color: var(--fcc-app-green); }
body.fcc-app-shell-v1 #dashboard .fcc-todo-stat--overdue .fcc-todo-stat__value { color: var(--fcc-app-red); }

/* Hide a list when it has no LI children (avoids empty whitespace) */
body.fcc-app-shell-v1 #dashboard .fcc-list:empty {
  display: none;
}

/* Mobile-specific stat tile layout (cleaner on tight viewports) */
@media (max-width: 639px) {
  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-hero {
    padding: var(--fcc-space-6) var(--fcc-space-5);
    flex-direction: column;
    text-align: left;
  }
  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-hero-art {
    min-width: 120px;
    align-self: center;
  }
}

/* ===== End #dashboard spec-aligned layout ===== */


/* ============================================================
   ===== #calendar (Phase 1C Batch 1 — CSS-only reskin) =====

   Surfaces reskinned (no DOM changes, no JS):
     - .section-card.calendar-shell-card (outer shell)
     - .calendar-hero-band + .calendar-kicker + .section-title
     - .fcc-calendar-control-strip (toolbar row)
     - .fcc-calendar-nav-pill + .fcc-calendar-nav-btn + .fcc-calendar-today-btn
     - .fcc-calendar-current-date-label (month/year)
     - .fcc-calendar-view-switcher + .calendar-view-btn (Month/Week/Day/Agenda tabs)
     - .fcc-calendar-action-primary + .fcc-calendar-action-secondary
     - .calendar-toolbar-chip-badge
     - .calendar-workspace (filters + main grid)
     - .calendar-filters-panel
     - .calendar-surface-card
     - .calendar-weekdays
     - .calendar-meals-legend-chip
     - .calendar-day-detail
     - .calendar-event-modal-backdrop + .calendar-event-modal + .calendar-event-modal-header
     - .calendar-event-form-card

   NOT touched:
     - .calendar-grid cell rendering (calendar.js dynamic)
     - Event chip internals (provider-specific styling)
     - Recurrence/import/sync logic
     - fcc-family-command (its own batch surface)
   ============================================================ */

/* Outer shell */
body.fcc-app-shell-v1 #calendar .calendar-shell-card {
  background: var(--fcc-color-surface);
  border: 1px solid var(--fcc-color-border);
  border-radius: var(--fcc-radius-xl);
  box-shadow: var(--fcc-shadow-card);
  padding: var(--fcc-space-5);
}

/* Hero band */
body.fcc-app-shell-v1 #calendar .calendar-hero-band {
  background: linear-gradient(135deg, #FBF7FF 0%, #F4EBFF 60%, #FCE7F3 100%);
  border-radius: var(--fcc-radius-lg);
  padding: var(--fcc-space-5) var(--fcc-space-6);
  margin-bottom: var(--fcc-space-5);
  position: relative;
  overflow: hidden;
}
body.fcc-app-shell-v1 #calendar .calendar-hero-band::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.20) 0%, transparent 70%);
  pointer-events: none;
}
body.fcc-app-shell-v1 #calendar .calendar-kicker {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--fcc-radius-pill);
  background: rgba(255, 255, 255, 0.6);
  color: var(--fcc-color-accent-strong);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--fcc-space-2);
  position: relative;
  z-index: 1;
}
body.fcc-app-shell-v1 #calendar .calendar-page-title {
  font-family: var(--fcc-font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fcc-color-text);
  margin: 0 0 var(--fcc-space-2);
  position: relative;
  z-index: 1;
}
body.fcc-app-shell-v1 #calendar .calendar-page-subtitle {
  color: var(--fcc-color-text-muted);
  font-size: 13px;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Control strip */
body.fcc-app-shell-v1 #calendar .fcc-calendar-control-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--fcc-space-3);
  padding: var(--fcc-space-3) 0;
  margin-bottom: var(--fcc-space-4);
  border-top: 1px solid var(--fcc-color-divider);
  border-bottom: 1px solid var(--fcc-color-divider);
}

/* Prev / Today / Next pill */
body.fcc-app-shell-v1 #calendar .fcc-calendar-nav-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: var(--fcc-color-surface-tint);
  border: 1px solid var(--fcc-color-border);
  border-radius: var(--fcc-radius-pill);
  gap: 2px;
}
body.fcc-app-shell-v1 #calendar .fcc-calendar-nav-btn,
body.fcc-app-shell-v1 #calendar .fcc-calendar-today-btn {
  background: transparent;
  border: 0;
  color: var(--fcc-color-text-muted);
  font-weight: 700;
  font-family: var(--fcc-font-body);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--fcc-radius-pill);
  cursor: pointer;
  transition: background var(--fcc-dur-fast) var(--fcc-ease),
              color var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 #calendar .fcc-calendar-nav-btn {
  font-size: 18px;
  padding: 6px 12px;
  line-height: 1;
}
body.fcc-app-shell-v1 #calendar .fcc-calendar-nav-btn:hover,
body.fcc-app-shell-v1 #calendar .fcc-calendar-today-btn:hover {
  background: var(--fcc-color-surface);
  color: var(--fcc-color-accent);
}

/* Current month/year title */
body.fcc-app-shell-v1 #calendar .fcc-calendar-current-date-label {
  font-family: var(--fcc-font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fcc-color-text);
  margin: 0;
}

/* View switcher tabs */
body.fcc-app-shell-v1 #calendar .fcc-calendar-view-switcher {
  display: inline-flex;
  padding: 3px;
  background: var(--fcc-color-surface-tint);
  border: 1px solid var(--fcc-color-border);
  border-radius: var(--fcc-radius-pill);
  gap: 2px;
}
body.fcc-app-shell-v1 #calendar .calendar-view-btn {
  background: transparent;
  border: 0;
  color: var(--fcc-color-text-muted);
  font-weight: 700;
  font-family: var(--fcc-font-body);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: var(--fcc-radius-pill);
  cursor: pointer;
  transition: background var(--fcc-dur-fast) var(--fcc-ease),
              color var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 #calendar .calendar-view-btn:hover {
  color: var(--fcc-color-accent);
}
body.fcc-app-shell-v1 #calendar .calendar-view-btn.active,
body.fcc-app-shell-v1 #calendar .calendar-view-btn[aria-selected="true"] {
  background: var(--fcc-color-surface);
  color: var(--fcc-color-accent-strong);
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.16);
}

/* Action buttons */
body.fcc-app-shell-v1 #calendar .fcc-calendar-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--fcc-space-2);
  margin-left: auto;
}
body.fcc-app-shell-v1 #calendar .fcc-calendar-action-primary {
  background: var(--fcc-color-accent-gradient);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--fcc-radius-pill);
  padding: 9px 16px;
  font-weight: 700;
  font-family: var(--fcc-font-body);
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
  transition: transform var(--fcc-dur-fast) var(--fcc-ease),
              box-shadow var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 #calendar .fcc-calendar-action-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.34);
}
body.fcc-app-shell-v1 #calendar .fcc-calendar-action-secondary {
  background: var(--fcc-color-surface);
  color: var(--fcc-color-text);
  border: 1px solid var(--fcc-color-border-strong);
  border-radius: var(--fcc-radius-pill);
  padding: 9px 14px;
  font-weight: 700;
  font-family: var(--fcc-font-body);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 #calendar .fcc-calendar-action-secondary:hover {
  background: var(--fcc-color-surface-tint);
}
body.fcc-app-shell-v1 #calendar .calendar-toolbar-chip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--fcc-radius-pill);
  background: var(--fcc-color-accent);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  margin-left: 6px;
}

/* Workspace grid (filters + main) */
body.fcc-app-shell-v1 #calendar .calendar-workspace {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fcc-space-4);
}
@media (min-width: 1024px) {
  body.fcc-app-shell-v1 #calendar .calendar-workspace {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}
body.fcc-app-shell-v1 #calendar .calendar-filters-panel {
  background: var(--fcc-color-surface);
  border: 1px solid var(--fcc-color-border);
  border-radius: var(--fcc-radius-lg);
  padding: var(--fcc-space-4);
}

/* Surface card (the month grid + day/week/agenda views container) */
body.fcc-app-shell-v1 #calendar .calendar-surface-card {
  background: var(--fcc-color-surface);
  border: 1px solid var(--fcc-color-border);
  border-radius: var(--fcc-radius-lg);
  padding: var(--fcc-space-4);
}

/* Weekday header */
body.fcc-app-shell-v1 #calendar .calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  padding-bottom: var(--fcc-space-2);
  border-bottom: 1px solid var(--fcc-color-divider);
  margin-bottom: var(--fcc-space-2);
}
body.fcc-app-shell-v1 #calendar .calendar-weekdays > span {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fcc-color-text-subtle);
  padding: 6px 0;
}

/* Meals legend chips */
body.fcc-app-shell-v1 #calendar .calendar-meals-legend {
  display: flex;
  gap: var(--fcc-space-2);
  flex-wrap: wrap;
  padding-top: var(--fcc-space-3);
  border-top: 1px solid var(--fcc-color-divider);
  margin-top: var(--fcc-space-3);
}
body.fcc-app-shell-v1 #calendar .calendar-meals-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--fcc-radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--fcc-color-accent-soft);
  color: var(--fcc-color-accent-strong);
}
body.fcc-app-shell-v1 #calendar .calendar-meals-legend-breakfast {
  background: rgba(245, 158, 11, 0.14);
  color: #92400E;
}
body.fcc-app-shell-v1 #calendar .calendar-meals-legend-lunch {
  background: rgba(34, 197, 94, 0.14);
  color: #166534;
}

/* Day detail side panel */
body.fcc-app-shell-v1 #calendar .calendar-day-detail {
  background: var(--fcc-color-surface);
  border: 1px solid var(--fcc-color-border);
  border-radius: var(--fcc-radius-lg);
  padding: var(--fcc-space-5);
  margin-top: var(--fcc-space-4);
  box-shadow: var(--fcc-shadow-card);
}
body.fcc-app-shell-v1 #calendar .day-detail-title {
  font-family: var(--fcc-font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fcc-color-text);
  margin: 0 0 var(--fcc-space-3);
}

/* Event modal (Add/Edit Event) */
body.fcc-app-shell-v1 #calendar .calendar-event-modal-backdrop {
  background: rgba(27, 18, 48, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body.fcc-app-shell-v1 #calendar .calendar-event-modal-inner {
  background: var(--fcc-color-surface);
  border-radius: var(--fcc-radius-xl);
  box-shadow: var(--fcc-shadow-overlay);
  border: 1px solid var(--fcc-color-border);
}
body.fcc-app-shell-v1 #calendar .calendar-event-modal-header {
  border-bottom: 1px solid var(--fcc-color-divider);
}
body.fcc-app-shell-v1 #calendar .calendar-event-modal-title {
  font-family: var(--fcc-font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--fcc-color-text);
}
body.fcc-app-shell-v1 #calendar .calendar-event-form-card {
  background: var(--fcc-color-surface-tint);
  border-radius: var(--fcc-radius-md);
  padding: var(--fcc-space-4);
}

/* ===== End #calendar reskin ===== */


/* ============================================================
   ===== #chores (Phase 1C Batch 1 — CSS-only reskin) =====

   Surfaces reskinned (no DOM, no JS):
     - .section-card.fcc-ios-form-shell (Add a Chore card)
     - .section-card.fcc-ios-card (Chore Notes + Templates card)
     - .section-title.fcc-ios-title / .fcc-ios-section-title
     - .fcc-ios-label / .fcc-ios-input / .fcc-ios-select
     - .fcc-form-row / .fcc-form-row-3 / .form-group
     - .btn-primary.fcc-ios-button-primary
     - .btn-secondary.fcc-ios-button-secondary
     - .chore-template-card-head
     - .chore-template-add-btn
     - .chore-template-sheet-panel (recurring chore builder bottom sheet)
     - .chore-template-sheet-eyebrow / -title / -subtitle / -close
     - .fcc-sheet-handle
     - .fcc-segmented + .fcc-seg (Weekly/Daily/Monthly/Custom)
     - .fcc-pill-grid + .fcc-pill (day-of-week pills)
     - .smart-hints / .parent-insights-host
     - .chore-template-backdrop

   NOT touched:
     - Chore status state machine
     - Points logic
     - Photo proof flow
     - Rendering of the actual chores list (chores.js dynamic)
   ============================================================ */

/* Outer cards in #chores */
body.fcc-app-shell-v1 #chores .section-card {
  background: var(--fcc-color-surface);
  border: 1px solid var(--fcc-color-border);
  border-radius: var(--fcc-radius-lg);
  box-shadow: var(--fcc-shadow-card);
  padding: var(--fcc-space-5);
}
body.fcc-app-shell-v1 #chores .two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fcc-space-4);
}
@media (min-width: 900px) {
  body.fcc-app-shell-v1 #chores .two-col {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

/* Section titles */
body.fcc-app-shell-v1 #chores .section-title {
  font-family: var(--fcc-font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fcc-color-text);
  margin: 0 0 var(--fcc-space-4);
}
body.fcc-app-shell-v1 #chores .fcc-ios-section-title {
  font-size: 17px;
}
body.fcc-app-shell-v1 #chores .muted.small {
  color: var(--fcc-color-text-muted);
  font-size: 12px;
}

/* Form rows */
body.fcc-app-shell-v1 #chores .fcc-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fcc-space-4);
  margin-bottom: var(--fcc-space-4);
}
@media (min-width: 600px) {
  body.fcc-app-shell-v1 #chores .fcc-form-row-3 {
    grid-template-columns: 1fr 1.4fr 0.7fr;
  }
  body.fcc-app-shell-v1 #chores .fcc-form-row:not(.fcc-form-row-3) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Form fields */
body.fcc-app-shell-v1 #chores .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.fcc-app-shell-v1 #chores .fcc-ios-label,
body.fcc-app-shell-v1 #chores .fcc-form-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fcc-color-text-subtle);
}
body.fcc-app-shell-v1 #chores .fcc-ios-input,
body.fcc-app-shell-v1 #chores .fcc-ios-select,
body.fcc-app-shell-v1 #chores .fcc-input,
body.fcc-app-shell-v1 #chores .fcc-select {
  background: var(--fcc-color-surface);
  border: 1px solid var(--fcc-color-border-strong);
  border-radius: var(--fcc-radius-md);
  padding: 10px var(--fcc-space-4);
  color: var(--fcc-color-text);
  font-family: var(--fcc-font-body);
  font-size: 14px;
  font-weight: 500;
  transition: border-color var(--fcc-dur-fast) var(--fcc-ease),
              box-shadow var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 #chores .fcc-ios-input:focus,
body.fcc-app-shell-v1 #chores .fcc-ios-select:focus {
  outline: 0;
  border-color: var(--fcc-color-accent);
  box-shadow: 0 0 0 3px var(--fcc-color-accent-soft);
}

/* Action buttons */
body.fcc-app-shell-v1 #chores .fcc-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--fcc-space-3);
}
body.fcc-app-shell-v1 #chores .btn-primary,
body.fcc-app-shell-v1 #chores .fcc-ios-button-primary,
body.fcc-app-shell-v1 #chores .fcc-primary-action {
  background: var(--fcc-color-accent-gradient);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--fcc-radius-pill);
  padding: 10px var(--fcc-space-6);
  font-weight: 700;
  font-family: var(--fcc-font-body);
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
  transition: transform var(--fcc-dur-fast) var(--fcc-ease),
              box-shadow var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 #chores .btn-primary:hover,
body.fcc-app-shell-v1 #chores .fcc-ios-button-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.34);
}
body.fcc-app-shell-v1 #chores .btn-secondary,
body.fcc-app-shell-v1 #chores .fcc-ios-button-secondary {
  background: var(--fcc-color-surface);
  color: var(--fcc-color-accent-strong);
  border: 1px solid var(--fcc-color-border-strong);
  border-radius: var(--fcc-radius-pill);
  padding: 9px var(--fcc-space-5);
  font-weight: 700;
  font-family: var(--fcc-font-body);
  font-size: 13px;
  cursor: pointer;
}
body.fcc-app-shell-v1 #chores .btn-secondary:hover {
  background: var(--fcc-color-surface-tint);
}

/* Templates card head */
body.fcc-app-shell-v1 #chores .chore-template-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fcc-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--fcc-space-4);
}
body.fcc-app-shell-v1 #chores .parent-insights-host__title {
  font-family: var(--fcc-font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--fcc-color-text);
  margin: var(--fcc-space-3) 0 4px;
}
body.fcc-app-shell-v1 #chores .parent-insights-host__subtitle {
  color: var(--fcc-color-text-muted);
}

/* Recurring chore builder bottom sheet */
body.fcc-app-shell-v1 #chores .chore-template-backdrop {
  background: rgba(27, 18, 48, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body.fcc-app-shell-v1 #chores .chore-template-sheet-panel {
  background: var(--fcc-color-surface);
  border-radius: var(--fcc-radius-xl) var(--fcc-radius-xl) 0 0;
  box-shadow: var(--fcc-shadow-overlay);
  padding: var(--fcc-space-5);
  padding-bottom: calc(var(--fcc-space-5) + var(--fcc-safe-bottom));
}
body.fcc-app-shell-v1 #chores .fcc-sheet-handle {
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--fcc-color-divider);
  margin: 0 auto var(--fcc-space-4);
}
body.fcc-app-shell-v1 #chores .chore-template-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fcc-space-3);
  margin-bottom: var(--fcc-space-5);
}
body.fcc-app-shell-v1 #chores .chore-template-sheet-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--fcc-radius-pill);
  background: var(--fcc-color-accent-soft);
  color: var(--fcc-color-accent-strong);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--fcc-space-2);
}
body.fcc-app-shell-v1 #chores .chore-template-sheet-title {
  font-family: var(--fcc-font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fcc-color-text);
  margin: 0 0 var(--fcc-space-2);
}
body.fcc-app-shell-v1 #chores .chore-template-sheet-subtitle {
  color: var(--fcc-color-text-muted);
  font-size: 13px;
  margin: 0;
}
body.fcc-app-shell-v1 #chores .chore-template-sheet-close {
  width: 36px;
  height: 36px;
  border-radius: var(--fcc-radius-pill);
  background: var(--fcc-color-surface-tint);
  color: var(--fcc-color-text);
  border: 0;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
body.fcc-app-shell-v1 #chores .chore-template-sheet-close:hover {
  background: var(--fcc-color-accent-soft);
  color: var(--fcc-color-accent);
}
body.fcc-app-shell-v1 #chores .chore-template-section {
  margin-bottom: var(--fcc-space-5);
}
body.fcc-app-shell-v1 #chores .chore-template-section-title {
  font-family: var(--fcc-font-display);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fcc-color-text-subtle);
  margin-bottom: var(--fcc-space-3);
}
body.fcc-app-shell-v1 #chores .chore-template-mini-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--fcc-color-text-muted);
  margin-bottom: var(--fcc-space-2);
}
body.fcc-app-shell-v1 #chores .chore-template-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fcc-space-3);
}

/* Segmented control (Weekly / Daily / Monthly / Custom) */
body.fcc-app-shell-v1 #chores .fcc-segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--fcc-color-surface-tint);
  border: 1px solid var(--fcc-color-border);
  border-radius: var(--fcc-radius-pill);
  position: relative;
}
body.fcc-app-shell-v1 #chores .fcc-seg {
  position: relative;
  background: transparent;
  border: 0;
  padding: 7px 14px;
  font-family: var(--fcc-font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--fcc-color-text-muted);
  border-radius: var(--fcc-radius-pill);
  cursor: pointer;
  z-index: 1;
}
body.fcc-app-shell-v1 #chores .fcc-seg.is-active {
  background: var(--fcc-color-surface);
  color: var(--fcc-color-accent-strong);
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.16);
}

/* Day-of-week pill grid */
body.fcc-app-shell-v1 #chores .fcc-pill-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
body.fcc-app-shell-v1 #chores .fcc-pill {
  background: var(--fcc-color-surface);
  border: 1px solid var(--fcc-color-border-strong);
  border-radius: var(--fcc-radius-pill);
  padding: 8px 4px;
  font-family: var(--fcc-font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--fcc-color-text-muted);
  cursor: pointer;
  transition: background var(--fcc-dur-fast) var(--fcc-ease),
              border-color var(--fcc-dur-fast) var(--fcc-ease),
              color var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 #chores .fcc-pill:hover {
  background: var(--fcc-color-surface-tint);
}
body.fcc-app-shell-v1 #chores .fcc-pill.is-active {
  background: var(--fcc-color-accent);
  border-color: var(--fcc-color-accent);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.28);
}

/* Smart hints + parent insights */
body.fcc-app-shell-v1 #chores .smart-hints {
  background: var(--fcc-color-accent-soft);
  border-radius: var(--fcc-radius-md);
  padding: var(--fcc-space-3) var(--fcc-space-4);
  color: var(--fcc-color-accent-strong);
  font-size: 13px;
  margin-top: var(--fcc-space-3);
}
body.fcc-app-shell-v1 #chores .smart-hints:empty {
  display: none;
}
body.fcc-app-shell-v1 #chores .parent-insights-list:empty {
  display: none;
}

/* ===== End #chores reskin ===== */


/* ============================================================
   ===== Onix surfaces (Phase 1C Batch 1 — light token alignment) =====

   The full-screen Onix overlay (.command-ai-upload-panel) has 1200+
   lines of dedicated CSS in command-ai-upload.css. We do NOT compete
   with it. We only nudge surface tokens (background tint, border
   radius, shadow, accent color) so it visually belongs to the new
   shell next to the dashboard Onix card.

   Surfaces touched (token alignment ONLY):
     - .command-ai-upload-panel (outer shell — accent color hooks)
     - .fcc-family-command-host (calendar-embedded command surface)
     - .fcc-family-command (card)
     - .fcc-family-command__title / __subtitle / __summary-chip

   NOT touched:
     - Chat thread/bubble internals (.ask-fcc-*)
     - Voice listening states (.is-listening, .command-ai-orb, .command-ai-brain)
     - Composer/input internals
     - All upload-specific UI
   ============================================================ */

/* Calendar-embedded family command surface */
body.fcc-app-shell-v1 .fcc-family-command {
  background: var(--fcc-color-onix-gradient);
  color: var(--fcc-color-onix-text);
  border-radius: var(--fcc-radius-xl);
  padding: var(--fcc-space-5);
  box-shadow: var(--fcc-shadow-onix);
  border: 0;
  position: relative;
  overflow: hidden;
}
body.fcc-app-shell-v1 .fcc-family-command::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.26) 0%, transparent 70%);
  pointer-events: none;
}
body.fcc-app-shell-v1 .fcc-family-command__header {
  position: relative;
  z-index: 1;
}
body.fcc-app-shell-v1 .fcc-family-command__title {
  font-family: var(--fcc-font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fcc-color-onix-text);
  margin: 0 0 6px;
}
body.fcc-app-shell-v1 .fcc-family-command__subtitle {
  color: var(--fcc-color-onix-text-muted);
  font-size: 13px;
  margin: 0;
}
body.fcc-app-shell-v1 .fcc-family-command__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--fcc-space-3);
  position: relative;
  z-index: 1;
}
body.fcc-app-shell-v1 .fcc-family-command__summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--fcc-radius-pill);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--fcc-color-onix-text);
  font-size: 11px;
  font-weight: 700;
}
body.fcc-app-shell-v1 .fcc-family-command__section-title {
  font-family: var(--fcc-font-display);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fcc-color-onix-text-muted);
  margin: var(--fcc-space-4) 0 var(--fcc-space-3);
  position: relative;
  z-index: 1;
}
body.fcc-app-shell-v1 .fcc-family-command__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fcc-space-2);
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  body.fcc-app-shell-v1 .fcc-family-command__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
body.fcc-app-shell-v1 .fcc-family-command__card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--fcc-radius-md);
  padding: var(--fcc-space-3) var(--fcc-space-4);
  color: var(--fcc-color-onix-text);
  transition: background var(--fcc-dur-fast) var(--fcc-ease),
              transform var(--fcc-dur-fast) var(--fcc-ease);
}
body.fcc-app-shell-v1 .fcc-family-command__card[data-fcai-open-insight] {
  cursor: pointer;
}
body.fcc-app-shell-v1 .fcc-family-command__card[data-fcai-open-insight]:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}
body.fcc-app-shell-v1 .fcc-family-command__card[data-fcai-open-insight]:focus-visible {
  outline: 2px solid rgba(244, 114, 182, 0.7);
  outline-offset: 2px;
}

/* Full-screen Onix overlay — light token alignment only */
body.fcc-app-shell-v1 .command-ai-upload-panel {
  /* Map the accent color used inside the panel to our brand token
     wherever the panel's own stylesheet reads from CSS variables. The
     panel keeps its own background and chrome — we only want focus
     rings + primary actions inside it to feel violet-on-brand. */
  --command-ai-accent: var(--fcc-color-accent);
  --command-ai-accent-strong: var(--fcc-color-accent-strong);
  --command-ai-accent-soft: var(--fcc-color-accent-soft);
}
body.fcc-app-shell-v1 .command-ai-upload-panel :focus-visible {
  outline: 2px solid var(--fcc-color-accent);
  outline-offset: 2px;
}

/* ===== End Onix surfaces reskin ===== */


/* ===== #mealPlanning (Phase 1C — slot reserved) ===== */


/* ===== #shopping (Phase 1C — slot reserved) ===== */


/* ===== #profiles (Phase 1C — slot reserved) ===== */


/* ===== Settings cluster — #settings #appearance #security #supportCenter #notifications #automation #budgetAlerts (Phase 1C — slot reserved) ===== */


/* ===== #memories + #timeline (Phase 1C — slot reserved) ===== */


/* ===== Behavior cluster — #behavior #behavior-dashboard #behavior-plans #behavior-labels #behavior-progress #behavior-reports #behavior-sharing #behavior-report-history (Phase 1C — slot reserved) ===== */


/* ===== #expenses + #budget (Phase 1C — slot reserved) ===== */


/* ===== Remaining modules — #wishlists #values #meeting #messages #vacation #points #chorePoints #rewards #achievements #schoolPortal #reports #kids-games (Phase 1C — slot reserved) ===== */


/* --------------------------------------------------------------------------
   Phase 1B Fix 2 — Mobile/tablet dashboard blank-top + hero stability

   Problem A: styles.css L47125 sets `padding-top: 100px` on
              `body.logged-in .main-with-sidebar` at @media (max-width: 1100px),
              which leaves a huge blank band on tablets/landscape phones
              (768–1100px). Phone-only rule at 767px already overrides it.
   Problem B: `fcc-page-in` animation in fcc-app-shell-v1.css runs an
              opacity 0 → 1 transition every time `#dashboard.page` re-enters
              `.active`, making the hero flicker / appear-then-disappear.
   -------------------------------------------------------------------------- */

/* Tablet band 768–1100px: legacy styles.css L47125 forced padding-top: 100px
   here, which leaves a huge blank strip above the dashboard. Override to the
   header height + 12px breathing room. Phone band (≤767px) is intentionally
   excluded — its header is `position: static`, so the legacy 12px stays. */
@media (min-width: 768px) and (max-width: 1100px) {
  body.fcc-app-shell-v1.logged-in .main-with-sidebar {
    padding-top: calc(var(--fcc-header-height, 64px) + 12px) !important;
  }
}

@media (max-width: 1023px) {
  body.fcc-app-shell-v1 #dashboard.page.active {
    padding-top: 0;
    margin-top: 0;
  }

  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-v1 {
    padding-top: 14px;
  }

  body.fcc-app-shell-v1 #dashboard .fcc-dashboard-hero {
    visibility: visible;
    opacity: 1;
    min-height: auto;
  }
}

/* Run the page-in animation only on first entry. fcc-dashboard-v1.js adds
   .fcc-dash-entered on first hydrate, so subsequent re-activations skip
   the opacity 0 → 1 sweep that was causing the hero flicker. */
body.fcc-app-shell-v1 #dashboard.page.active.fcc-dash-entered {
  animation: none !important;
}


/* =========================================================
   FCC Layout Regression Guard — App Shell + Dashboard + Expenses
   Purpose: prevents wide desktop pages from drifting under the sidebar,
   prevents right-column orphan layouts, and keeps modules inside a stable
   rebrand page shell. Appended LAST (this file loads after styles.css and
   fcc-app-shell-v1.css) so it overrides stale finance-layout rules.
   ========================================================= */

/* ---- A. App-shell containment ------------------------------------------
   No horizontal page scroll, min-width:0 on the flex/grid canvas so wide
   children can shrink, and border-box everywhere in the shell. */
body.fcc-app-shell-v1,
body.fcc-app-shell-v1 #mainContent,
body.fcc-app-shell-v1 .main-content-wrap {
  max-width: 100%;
  overflow-x: hidden;
}
body.fcc-app-shell-v1 .main-with-sidebar,
body.fcc-app-shell-v1 .main-content-wrap,
body.fcc-app-shell-v1 .page,
body.fcc-app-shell-v1 .page.active {
  min-width: 0;
  box-sizing: border-box;
}
body.fcc-app-shell-v1 .main-with-sidebar {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---- B. Desktop canvas — overflow-safe, page-agnostic ------------------
   The legacy dashboard-only rule used `width: calc(100vw - 250px)`. 100vw
   includes the vertical scrollbar, so the canvas was a few px too wide and
   produced a horizontal scrollbar ("stretched / out of rhythm"). We keep
   each page's existing sidebar margin (dashboard 250px, others var
   --sidebar-width) but switch the width to `auto` so the block simply fills
   the remaining content width with no 100vw overflow. We also normalize the
   oversized legacy top padding (146px) down to the rebrand header height. */
@media (min-width: 1024px) {
  body.fcc-app-shell-v1.logged-in .main-with-sidebar {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    padding-top: calc(var(--fcc-header-height, 76px) + 16px) !important;
    padding-left: clamp(16px, 1.6vw, 28px) !important;
    padding-right: clamp(18px, 1.8vw, 32px) !important;
  }

  /* Neutralize the 100vw width on the dashboard-only :has() rule. Same
     selector + later source order so it wins on equal specificity; we leave
     its margin-left intact (geometry already verified-good on dashboard). */
  @supports selector(:has(*)) {
    body.fcc-app-shell-v1:has(#dashboard.page.active) .main-with-sidebar {
      width: auto !important;
      max-width: none !important;
    }
  }

  /* Shared centered page shell (~1560px) for the finance + profile pages so
     they match the dashboard's contained canvas instead of a narrow 1180px
     column or an edge-to-edge stretch. */
  body.fcc-app-shell-v1 #expenses.page.active,
  body.fcc-app-shell-v1 #budget.page.active,
  body.fcc-app-shell-v1 #profiles.page.active {
    width: min(100%, 1560px);
    max-width: 1560px;
    margin-inline: auto;
  }
}

/* ---- C. Regression lock — min-width:0 so grid/flex children can shrink,
   and long text wraps/ellipsizes instead of forcing horizontal overflow. */
body.fcc-app-shell-v1 #expenses .expenses-layout > *,
body.fcc-app-shell-v1 #expenses > .section-card,
body.fcc-app-shell-v1 #expenses .section-card,
body.fcc-app-shell-v1 #budget .budget-page-shell > *,
body.fcc-app-shell-v1 #budget .section-card,
body.fcc-app-shell-v1 #budget [class*="grid"] > *,
body.fcc-app-shell-v1 #profiles .card,
body.fcc-app-shell-v1 #profiles .section-card,
body.fcc-app-shell-v1 #profiles [class*="grid"] > * {
  min-width: 0;
}
body.fcc-app-shell-v1 #expenses .table-wrap,
body.fcc-app-shell-v1 #budget .table-wrap,
body.fcc-app-shell-v1 #profiles .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   FCC Expenses normalization — clean top-to-bottom flow
   ========================================================= */

/* ROOT CAUSE FIX: the first child of .expenses-layout is an (almost always)
   empty <div data-fcc-category-merge-panel-host>. In a 2-column grid that
   empty div consumed grid cell #1, pushing the Add Expense form into the
   right column (blank lavender area on the left) and wrapping Budget
   Snapshot onto a second row ("disconnected lower on the page"). Collapse
   it when empty, and span it full-width (its own row) when populated. */
body.fcc-app-shell-v1 #expenses .expenses-layout > [data-fcc-category-merge-panel-host] {
  grid-column: 1 / -1;
}
body.fcc-app-shell-v1 #expenses .expenses-layout > [data-fcc-category-merge-panel-host]:empty {
  display: none;
}

/* Keep the intended two-column top grid (form + Category Manager live inside
   the form card; Budget Snapshot is the right column), collapsing on smaller
   desktops. minmax(0, …) so neither column can force overflow. */
body.fcc-app-shell-v1 #expenses .expenses-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 24px;
}
@media (max-width: 1100px) {
  body.fcc-app-shell-v1 #expenses .expenses-layout {
    grid-template-columns: 1fr;
  }
  body.fcc-app-shell-v1 #expenses .expense-summary-card {
    position: static;
  }
}

/* =========================================================
   FCC Finance + Profiles rebrand polish — lavender/pink, matches Expenses
   The budget/expenses/chores modules share a `--fcc-ios-*` token system that
   shipped in BLUE (#2563eb / rgba(37,99,235,…)). Remapping those tokens flips
   every iOS card, input, chip and button on those pages to the rebrand
   palette in one move; a few hard-coded blue literals are overridden below.
   ========================================================= */
body.fcc-app-shell-v1 #budget .budget-page-shell,
body.fcc-app-shell-v1 #expenses,
body.fcc-app-shell-v1 #chores.chores-page,
body.fcc-app-shell-v1 #profiles {
  --fcc-ios-blue: #7c3aed;
  --fcc-ios-blue-soft: rgba(124, 58, 237, 0.10);
  --fcc-ios-border: rgba(124, 58, 237, 0.16);
  --fcc-ios-border-soft: rgba(124, 58, 237, 0.10);
  --fcc-ios-shadow: 0 18px 45px rgba(74, 31, 122, 0.10);
  --fcc-ios-shadow-soft: 0 10px 28px rgba(74, 31, 122, 0.08);
}

/* Primary actions → violet→pink gradient (was a blue→blue gradient literal). */
body.fcc-app-shell-v1 #budget .fcc-ios-button-primary,
body.fcc-app-shell-v1 #expenses .fcc-ios-button-primary,
body.fcc-app-shell-v1 #chores .fcc-ios-button-primary,
body.fcc-app-shell-v1 #budget .btn-primary,
body.fcc-app-shell-v1 #expenses .expense-form-actions .btn-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%) !important;
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.24) !important;
  border: 0 !important;
  color: #ffffff !important;
}

/* Inputs/selects/textareas → lavender border + focus ring (was blue). */
body.fcc-app-shell-v1 #budget .fcc-ios-input,
body.fcc-app-shell-v1 #budget .fcc-ios-select,
body.fcc-app-shell-v1 #budget .fcc-ios-textarea,
body.fcc-app-shell-v1 #expenses .fcc-ios-input,
body.fcc-app-shell-v1 #expenses .fcc-ios-select,
body.fcc-app-shell-v1 #expenses .fcc-ios-textarea {
  border-color: rgba(124, 58, 237, 0.18);
}
body.fcc-app-shell-v1 #budget .fcc-ios-input:focus,
body.fcc-app-shell-v1 #budget .fcc-ios-select:focus,
body.fcc-app-shell-v1 #budget .fcc-ios-textarea:focus,
body.fcc-app-shell-v1 #expenses .fcc-ios-input:focus,
body.fcc-app-shell-v1 #expenses .fcc-ios-select:focus,
body.fcc-app-shell-v1 #expenses .fcc-ios-textarea:focus {
  border-color: rgba(124, 58, 237, 0.55);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

/* Section titles use the rebrand violet rather than the old blue accent. */
body.fcc-app-shell-v1 #expenses .section-title,
body.fcc-app-shell-v1 #budget .section-title {
  color: var(--fcc-app-ink, #11142f);
}
body.fcc-app-shell-v1 #expenses .expense-form-section-title {
  color: var(--fcc-color-accent-strong, #6d28d9);
}

/* =========================================================
   FCC Budget page hero — soft lavender/pink header (matches Expenses)
   ========================================================= */
body.fcc-app-shell-v1 #budget .budget-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, #fbf7ff 0%, #f4ebff 50%, #fce7f3 100%);
  border: 1px solid var(--fcc-app-line, rgba(124, 58, 237, 0.12));
  border-radius: var(--fcc-app-radius-xl, 30px);
  box-shadow: var(--fcc-app-shadow, 0 24px 70px rgba(70, 40, 120, 0.12));
  padding: 24px 26px;
}
body.fcc-app-shell-v1 #budget .budget-header-actions-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.fcc-app-shell-v1 #budget .budget-page-title {
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Forecast / snapshot grids: never let a card exceed its cell. */
body.fcc-app-shell-v1 #budget [class*="grid"] {
  min-width: 0;
}
body.fcc-app-shell-v1 #budget [class*="grid"] > * {
  min-width: 0;
  max-width: 100%;
}

/* =========================================================
   FCC Profiles rebrand polish — premium household manager
   ========================================================= */
body.fcc-app-shell-v1 #profiles .family-profiles-manager,
body.fcc-app-shell-v1 #profiles .fcc-profile-card,
body.fcc-app-shell-v1 #profiles .family-address-section,
body.fcc-app-shell-v1 #profiles .profile-toolbar {
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 45px rgba(74, 31, 122, 0.08);
}
body.fcc-app-shell-v1 #profiles .family-profiles-manager {
  padding: 24px;
}
body.fcc-app-shell-v1 #profiles .card-header h2 {
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Primary / secondary actions in profiles → rebrand pills. */
body.fcc-app-shell-v1 #profiles .fcc-btn.primary,
body.fcc-app-shell-v1 #profiles .btn-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  border: 0;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.22);
}
/* Long names / emails wrap instead of forcing horizontal overflow. */
body.fcc-app-shell-v1 #profiles .profile-value,
body.fcc-app-shell-v1 #profiles .profile-row,
body.fcc-app-shell-v1 #profiles .family-address-line {
  overflow-wrap: anywhere;
}
/* Empty-state for pending invites → dashed lavender box. */
body.fcc-app-shell-v1 #profiles .fcc-pending-invites-mount:empty {
  display: none;
}

/* =========================================================
   FCC Header User Menu Regression Guard
   The account chip is relocated into the header on desktop; make sure it is
   clickable and its dropdown floats above page content (JS toggle restored
   in main.js → fccInitUserMenuToggle).
   ========================================================= */
body.fcc-app-shell-v1 #headerControls > #sidebarAccountCard.fcc-header-profile-chip,
body.fcc-app-shell-v1 #headerControls > #sidebarAccountCard.fcc-header-profile-chip .account-card-main {
  pointer-events: auto;
}
body.fcc-app-shell-v1 #headerControls > #sidebarAccountCard.fcc-header-profile-chip .account-card-main {
  cursor: pointer;
}
body.fcc-app-shell-v1 #headerControls > #sidebarAccountCard.fcc-header-profile-chip .account-card-main:focus-visible {
  outline: 2px solid var(--fcc-color-accent-ring, rgba(124, 58, 237, 0.32));
  outline-offset: 2px;
}
body.fcc-app-shell-v1 #headerControls > #sidebarAccountCard.fcc-header-profile-chip .account-dropdown {
  z-index: var(--fcc-z-modal, 80);
  max-width: min(340px, calc(100vw - 24px));
}

/* =========================================================
   FCC Finance + Profiles responsive behavior
   ========================================================= */
@media (max-width: 900px) {
  body.fcc-app-shell-v1 #budget .budget-header-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 760px) {
  body.fcc-app-shell-v1 #expenses.page.active,
  body.fcc-app-shell-v1 #budget.page.active,
  body.fcc-app-shell-v1 #profiles.page.active {
    width: 100%;
    max-width: 100%;
  }
  body.fcc-app-shell-v1 #budget .budget-header-actions-toolbar,
  body.fcc-app-shell-v1 #budget .budget-header-actions-toolbar .btn-secondary {
    width: 100%;
  }
  body.fcc-app-shell-v1 #expenses .expense-form-actions .btn-primary {
    width: 100%;
  }
  body.fcc-app-shell-v1 #profiles .fcc-section-action-row .fcc-btn {
    width: 100%;
  }
}

/* =========================================================
   FCC Blueprint Alignment Pass — Expenses + Budget + Profiles + Chores
   Builds the dashboard page rhythm shown in the blueprint mockups on top of
   the existing rebrand tokens: a soft gradient page hero, real-data stat-card
   rows, and overflow-safe multi-column grids. Loaded last so it wins.
   ========================================================= */

/* ---- Shared page hero ---------------------------------------------------- */
body.fcc-app-shell-v1 .fcc-page-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding: 26px 30px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 30px;
  background: linear-gradient(135deg, #fbf7ff 0%, #f4ebff 52%, #fce7f3 100%);
  box-shadow: 0 24px 70px rgba(70, 40, 120, 0.12);
}
body.fcc-app-shell-v1 .fcc-page-hero-copy {
  min-width: 0;
}
body.fcc-app-shell-v1 .fcc-page-hero-title {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.fcc-app-shell-v1 .fcc-page-hero-subtitle {
  margin: 8px 0 0;
  max-width: 60ch;
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--fcc-app-ink-soft, #5b5570);
}
body.fcc-app-shell-v1 .fcc-page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.fcc-app-shell-v1 .fcc-hero-primary-btn,
body.fcc-app-shell-v1 .fcc-hero-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
body.fcc-app-shell-v1 .fcc-hero-primary-btn {
  color: #ffffff;
  border: 0;
  background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.26);
}
body.fcc-app-shell-v1 .fcc-hero-secondary-btn {
  color: #6d28d9;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.08);
}
body.fcc-app-shell-v1 .fcc-hero-primary-btn:hover,
body.fcc-app-shell-v1 .fcc-hero-secondary-btn:hover {
  transform: translateY(-1px);
}

/* ---- Shared stat-card row ------------------------------------------------ */
body.fcc-app-shell-v1 .fcc-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
body.fcc-app-shell-v1 .fcc-stat-card {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(74, 31, 122, 0.08);
}
body.fcc-app-shell-v1 .fcc-stat-card-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fcc-app-ink-soft, #6b6480);
}
body.fcc-app-shell-v1 .fcc-stat-card-value {
  margin-top: 8px;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--fcc-app-ink, #14112b);
}
body.fcc-app-shell-v1 .fcc-stat-card-hint {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--fcc-app-ink-soft, #7a7390);
}
@media (max-width: 1100px) {
  body.fcc-app-shell-v1 .fcc-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  body.fcc-app-shell-v1 .fcc-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Shared multi-column dashboard grids --------------------------------- */
body.fcc-app-shell-v1 .fcc-two-column-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
body.fcc-app-shell-v1 .fcc-three-column-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
@media (max-width: 1000px) {
  body.fcc-app-shell-v1 .fcc-two-column-grid,
  body.fcc-app-shell-v1 .fcc-three-column-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Expenses: three-card top grid (Add / Category Manager / Snapshot) --- */
body.fcc-app-shell-v1 #expenses .expenses-layout {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
body.fcc-app-shell-v1 #expenses .expense-category-card,
body.fcc-app-shell-v1 #expenses .expense-summary-card {
  align-self: start;
}
body.fcc-app-shell-v1 #expenses .expense-category-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 1200px) {
  body.fcc-app-shell-v1 #expenses .expenses-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Add Expense form spans the full first row; the two helper cards share row 2. */
  body.fcc-app-shell-v1 #expenses .expenses-layout > .expense-form-card {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  body.fcc-app-shell-v1 #expenses .expenses-layout {
    grid-template-columns: 1fr;
  }
  body.fcc-app-shell-v1 #expenses .expenses-layout > .expense-form-card {
    grid-column: auto;
  }
}

/* ---- Budget: fill the page shell instead of a narrow centered panel ------
   styles.css caps `.budget-page-shell` at max-width:1120px + margin auto,
   which made the finance dashboard look like a floating settings modal inside
   the wider 1560px page canvas. Release the cap so the hero, stat cards and
   intelligence bands span the full shell width. */
body.fcc-app-shell-v1 #budget .budget-page-shell {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}
/* The JS-rendered hero/snapshot and intelligence bands already build their own
   grids; just guarantee they get full width and can shrink inside the shell. */
body.fcc-app-shell-v1 #budget .budget-hero-mount,
body.fcc-app-shell-v1 #budget .fcc-budget-ai-host,
body.fcc-app-shell-v1 #budget #budgetLinesCard,
body.fcc-app-shell-v1 #budget #budgetManageCard {
  width: 100%;
  min-width: 0;
}

/* ---- Profiles: overview stat row + two-column pending/address ------------ */
body.fcc-app-shell-v1 #profiles .fcc-profiles-overview {
  margin: 18px 0 22px;
}
body.fcc-app-shell-v1 #profiles .fcc-profiles-overview-grid {
  margin-bottom: 22px;
}
body.fcc-app-shell-v1 #profiles .fcc-profiles-overview-grid > * {
  min-width: 0;
}
/* Address + pending panels read as first-class cards in the two-column row. */
body.fcc-app-shell-v1 #profiles .fcc-profiles-overview-grid .family-address-section,
body.fcc-app-shell-v1 #profiles .fcc-profiles-overview-grid .fcc-invite-mgmt-shell {
  height: 100%;
  border: 1px solid rgba(124, 58, 237, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 34px rgba(74, 31, 122, 0.08);
  padding: 20px 22px;
}

/* ---- Chores: weekly overview row sits under the hero --------------------- */
body.fcc-app-shell-v1 #chores .fcc-chores-overview {
  margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   END fcc-app-modules-v1.css (scaffold)
   ========================================================================== */