/* GENERATED by tools/build-bundles.mjs - do not edit.
   Edit the layer sources in public/*-refresh.css, or the order in
   tools/layers.json, then run: npm run build:bundles

   Target: base (home / login / display / reset-password / verify-email)
   Layers, in cascade order:
      1. themes
      2. responsive
      3. dark-mode
      4. design-system
*/

/* ====================================================================
   themes-refresh.css
   ==================================================================== */
/* ====================================================================
   themes-refresh.css

   The six visual themes, the picker that switches them, and the two later
   passes that corrected them. Every rule here is already scoped by
   [data-hub-theme], so the file boundaries were never what kept one theme
   out of another.

   Merged from: personalization, marker, glacier, mosaic, theme-cleanup, theme-hard-neutral
   Cascade order within this file is exactly the order those files
   were concatenated in before, so the shipped bundle is unchanged.
   ==================================================================== */

/* ====================================================================
   was personalization-refresh.css
   ==================================================================== */

/* Hub personalization v2: four deliberately different product directions.
   Loaded after the core visual system so each preset can restyle the whole Hub. */

body.hub-personalized {
  /* The ground, and it has to be a ground.
     This was #fdf3ef against a card of #fffaf6 - close enough that the
     card could only be inferred from its shadow. Paper on a table is
     visible because the table is darker than the paper, so the fix is
     at this end rather than by making the cards brighter: warmer and a
     few steps deeper, which keeps Soft Glow soft while letting the
     surfaces on top of it actually read as surfaces. */
  --hub-page: #f5eae1;
  /* Flat, not a wash.
     These were three-stop diagonal gradients - peach into lilac into
     mint - and every card on every screen wore one. A treatment applied
     to everything distinguishes nothing, so the gradient was carrying no
     information while making it harder to see the ones that do (a chart
     fill, a progress bar, the Tonight card). Soft Glow keeps its warmth;
     it just stops spending it on all forty cards at once.
     The other five presets set these to flat values already. */
  --hub-surface: #fffaf6;
  --hub-surface-alt: #fdf6f1;
  --hub-row: rgba(255,255,255,.90);
  --hub-border: rgba(112,89,84,.10);
  --hub-shape: rgba(255,255,255,.38);
  --hub-shadow: 0 6px 18px rgba(82,65,62,.055);
  --hub-accent: #62aaa2;
  --hub-accent-ink: #3e6b66;
  --hub-accent-2: #9b89cf;
  --hub-text: #45373a;
  --hub-muted: #6c5f60;
  --hub-tab: rgba(255,253,251,.95);
  --hub-input: rgba(255,255,255,.86);
  --hub-panel-radius: 18px;
  --hub-control-radius: 11px;
  background: var(--hub-page) !important;
  color: var(--hub-text);
}

/* ---------- Shared theming hooks ---------- */
body.hub-personalized #app,
body.hub-personalized .settings-panel {
  color: var(--hub-text);
}
body.hub-personalized .tabbar {
  background: var(--hub-tab);
  border-color: var(--hub-border);
}
/* --hub-accent doubles as a button fill, so it is tuned to be a
   background. Used directly as small text it runs about 2.4:1. These read
   from --hub-accent-ink instead: same hue, dark enough to clear AA. */
body.hub-personalized .tab-btn.active,
body.hub-personalized .subtab-btn.active {
  color: var(--hub-accent-ink, var(--hub-accent)) !important;
}
/* .filter-chip.active is deliberately NOT in that list. --hub-accent-ink
   is the accent darkened to read on the *page* background, and the
   active chip is not on the page background - it is a filled pill. This
   rule used to recolour its text and leave its fill alone, which put a
   teal #3e6b66 on a pink #e8a0bf at 2.91:1. The pairing the chip was
   designed with is 7.72:1, so the fix is to let it keep it. Same shape
   of mistake as DEF-03, where readableInk was applied to text on a
   filled control it was never computed for. */ 
body.hub-personalized .btn.btn-primary {
  background: var(--hub-accent) !important;
  border-color: var(--hub-accent) !important;
}
/* Third time for the same mistake, so it is worth naming: --hub-accent-ink
   is the accent darkened to read on the PAGE background. Applying it to
   text sitting on a filled control - a chip, a primary button, an <a>
   dressed as one - puts it on a background it was never computed against.
   The kiosk's gate button is the case that caught it: an <a> on teal,
   recoloured to #3e6b66, which is 1.4:1 and reads as an empty button.
   Anything that carries its own fill is excluded here and keeps the
   pairing it was designed with. */
body.hub-personalized .swap-toggle-btn,
body.hub-personalized a:not(.gate-primary):not(.btn-primary):not(.btn):not([class*="-tile"]):not([class*="-card"]) {
  color: var(--hub-accent-ink, var(--hub-accent)) !important;
}
body.hub-personalized input,
body.hub-personalized select,
body.hub-personalized textarea {
  background: var(--hub-input) !important;
  border-color: var(--hub-border) !important;
  color: var(--hub-text) !important;
}
body.hub-personalized input::placeholder,
body.hub-personalized textarea::placeholder {
  color: var(--hub-muted) !important;
  opacity: .72;
}

/* Command surfaces: the ones that hold a control you act on.
   The page-title headers used to be in this list, which is how every
   screen came to open with a card containing only its own name. They
   are not surfaces at all now - see "page titles are not cards" in
   design-system-refresh.css - so what is left here is the two cards
   that genuinely carry something: the brain dump and the chore adder. */
body.hub-personalized #view-tasks .tasks-command-card,
body.hub-personalized #view-schedule .chores-command-card {
  background: var(--hub-surface);
  border-color: var(--hub-border);
  box-shadow: var(--hub-shadow);
  color: var(--hub-text);
}

/* Functional section surfaces.
   These take --hub-surface, not --hub-surface-alt.

   They used to take the alt, and in Soft Glow that is #fdf6f1 against a
   page of #fdf3ef - three units apart on every channel, which is not a
   boundary anybody can see. The cards carrying every piece of content in
   the app were painted in the secondary tier while the decorative header
   above them got the primary one, so the only thing separating a card
   from the page was its drop shadow. That is why every screen read as
   soft clouds rather than structure.

   Five of the six themes define --hub-surface and --hub-surface-alt
   identically, so this changes nothing in Studio, Marker, Glacier,
   Mosaic or Gallery. It is Soft Glow - the default, and therefore what
   almost everybody sees - and Notebook that were affected. */
body.hub-personalized .view > .card,
body.hub-personalized #today-tasks-card,
body.hub-personalized #calendar-card,
body.hub-personalized #view-tasks .tasks-open-shell,
body.hub-personalized #view-schedule .chores-preview-card,
body.hub-personalized #view-schedule .chores-items-card,
body.hub-personalized #view-schedule .chores-add-card,
body.hub-personalized #view-meals .meals-planner-card,
body.hub-personalized #view-meals .meals-library-category-card,
body.hub-personalized #view-budget .budget-lineup-surface,
body.hub-personalized #view-budget .budget-goals-summary,
body.hub-personalized #view-budget .budget-compact-collapse-card,
body.hub-personalized #view-budget .budget-insight-collapse-card,
body.hub-personalized #view-purge .purge-upnext-refresh,
body.hub-personalized #view-purge .purge-session-refresh,
body.hub-personalized #view-purge .purge-lineup-surface {
  background: var(--hub-surface) !important;
  border-color: var(--hub-border) !important;
  box-shadow: var(--hub-shadow) !important;
  color: var(--hub-text) !important;
}

/* Scannable rows. */
body.hub-personalized .chores-today-row,
body.hub-personalized .product-lineup-row,
body.hub-personalized .product-lineup-card,
body.hub-personalized .product-calendar-row,
body.hub-personalized .product-simple-row,
body.hub-personalized .product-grocery-row,
body.hub-personalized #today-tasks-list .tonight-task-item,
body.hub-personalized #cal-list-view .product-calendar-row,
body.hub-personalized #schedule-items-list > .product-lineup-card,
body.hub-personalized #week-plan-list .product-lineup-card,
body.hub-personalized #library-breakfast-list .product-lineup-card,
body.hub-personalized #library-dinners-list .product-lineup-card,
body.hub-personalized #library-snacks-list .product-lineup-card,
body.hub-personalized #grocery-list .grocery-row,
body.hub-personalized #budget-income-list .product-lineup-card,
body.hub-personalized #budget-expense-list .product-lineup-card,
body.hub-personalized #planner-lines-list .product-lineup-card,
body.hub-personalized #savings-goals-list .product-lineup-card,
body.hub-personalized #purge-zones-list .product-zone-row {
  color: var(--hub-text);
}

body.hub-personalized .section-title,
body.hub-personalized .task-title,
body.hub-personalized .meal-title,
body.hub-personalized .chores-today-title,
body.hub-personalized .budget-refresh-hero-title,
body.hub-personalized .tasks-command-title,
body.hub-personalized .chores-command-title {
  color: var(--hub-text) !important;
}
body.hub-personalized .notifications-note,
body.hub-personalized .task-meta,
body.hub-personalized .meal-tag,
body.hub-personalized .product-row-brief,
body.hub-personalized .chores-today-owner,
body.hub-personalized .budget-refresh-month-note,
body.hub-personalized .gauge-sub,
body.hub-personalized .gauge-label {
  color: var(--hub-muted);
}

/* Decorative shape colour follows a theme unless that theme suppresses shapes. */
body.hub-personalized #view-dashboard .dashboard-hero::after,
body.hub-personalized #view-tasks .tasks-command-card::after,
body.hub-personalized #view-schedule .chores-command-card::after,
body.hub-personalized #today-tasks-card::after,
body.hub-personalized #calendar-card::after,
body.hub-personalized #view-budget .budget-refresh-hero::after,
body.hub-personalized #view-purge .purge-refresh-hero::after,
body.hub-personalized .lineup-surface::after,
body.hub-personalized .purge-lineup-surface::after {
  background: var(--hub-shape) !important;
}

/* ---------- SOFT GLOW: current warm, playful direction ---------- */
body.hub-personalized[data-hub-theme="soft-glow"] {
  font-family: "Nunito", system-ui, sans-serif;
}

/* ---------- STUDIO: crisp modern productivity product ---------- */
body.hub-personalized[data-hub-theme="studio"] {
  --hub-page: #f3f6fb;
  --hub-surface: #ffffff;
  --hub-surface-alt: #ffffff;
  --hub-row: #ffffff;
  --hub-border: #dce3ef;
  --hub-shape: transparent;
  --hub-shadow: 0 1px 2px rgba(19,35,62,.035);
  --hub-accent: #2563eb;
  --hub-accent-ink: #225ad6;
  --hub-accent-2: #0f172a;
  --hub-text: #172033;
  --hub-muted: #667085;
  --hub-tab: #ffffff;
  --hub-input: #f8fafc;
  font-family: "Poppins", system-ui, sans-serif;
  background-image: linear-gradient(rgba(37,99,235,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.025) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}
body.hub-personalized[data-hub-theme="studio"] .view-header,
body.hub-personalized[data-hub-theme="studio"] .dashboard-hero,
body.hub-personalized[data-hub-theme="studio"] .tasks-command-card,
body.hub-personalized[data-hub-theme="studio"] .chores-command-card,
body.hub-personalized[data-hub-theme="studio"] .budget-refresh-hero,
body.hub-personalized[data-hub-theme="studio"] .purge-refresh-hero {
  border: 1px solid #dce3ef;
  border-left: 4px solid #2563eb;
  box-shadow: 0 2px 8px rgba(30,64,175,.045);
}
body.hub-personalized[data-hub-theme="studio"] #view-dashboard .dashboard-hero::after,
body.hub-personalized[data-hub-theme="studio"] #view-tasks .tasks-command-card::after,
body.hub-personalized[data-hub-theme="studio"] #view-schedule .chores-command-card::after,
body.hub-personalized[data-hub-theme="studio"] #today-tasks-card::after,
body.hub-personalized[data-hub-theme="studio"] #calendar-card::after,
body.hub-personalized[data-hub-theme="studio"] #view-budget .budget-refresh-hero::after,
body.hub-personalized[data-hub-theme="studio"] #view-purge .purge-refresh-hero::after,
body.hub-personalized[data-hub-theme="studio"] .lineup-surface::after,
body.hub-personalized[data-hub-theme="studio"] .purge-lineup-surface::after {
  display: none !important;
}
body.hub-personalized[data-hub-theme="studio"] .view-header h1,
body.hub-personalized[data-hub-theme="studio"] .tasks-command-title,
body.hub-personalized[data-hub-theme="studio"] .chores-command-title,
body.hub-personalized[data-hub-theme="studio"] .budget-refresh-hero-title,
body.hub-personalized[data-hub-theme="studio"] .section-title {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
  text-transform: none;
}
body.hub-personalized[data-hub-theme="studio"] .tasks-command-eyebrow,
body.hub-personalized[data-hub-theme="studio"] .chores-command-eyebrow,
body.hub-personalized[data-hub-theme="studio"] .purge-refresh-eyebrow,
body.hub-personalized[data-hub-theme="studio"] .budget-refresh-eyebrow,
body.hub-personalized[data-hub-theme="studio"] .gauge-label {
  font-family: "Poppins", sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body.hub-personalized[data-hub-theme="studio"] .tabbar {
  border-top: 1px solid #dce3ef;
  box-shadow: 0 -3px 14px rgba(15,23,42,.035);
}
body.hub-personalized[data-hub-theme="studio"] .tab-btn {
  font-family: "Poppins", sans-serif !important;
  font-size: .75rem !important;
  color: #7b8496 !important;
}
body.hub-personalized[data-hub-theme="studio"] .tab-btn.active {
  color: #2563eb !important;
  font-weight: 700 !important;
}
body.hub-personalized[data-hub-theme="studio"] .tab-btn.active .tab-icon {
  background: #eaf1ff;
  border-radius: 6px;
  padding: 2px 7px;
}
body.hub-personalized[data-hub-theme="studio"] .subtabbar,
body.hub-personalized[data-hub-theme="studio"] .filter-bar {
  padding: 3px;
}
body.hub-personalized[data-hub-theme="studio"] .subtab-btn.active,
body.hub-personalized[data-hub-theme="studio"] .filter-chip.active {
  background: #ffffff !important;
  color: #1d4ed8 !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.07) !important;
}

/* ---------- MIDNIGHT: dark glass, luminous, high contrast ---------- */
body.hub-personalized[data-hub-theme="midnight"] {
  --hub-page: #0b1020;
  --hub-surface: linear-gradient(135deg, rgba(25,35,62,.95), rgba(20,28,49,.96));
  --hub-surface-alt: linear-gradient(145deg, rgba(18,27,47,.94), rgba(15,22,39,.96));
  --hub-row: rgba(26,36,60,.94);
  --hub-border: rgba(131,161,211,.18);
  --hub-shape: rgba(76,230,210,.08);
  --hub-shadow: 0 12px 32px rgba(0,0,0,.24);
  --hub-accent: #4ee6d0;
  --hub-accent-ink: #256c62;
  --hub-accent-2: #a78bfa;
  --hub-text: #edf4ff;
  --hub-muted: #9aa9c2;
  --hub-tab: rgba(11,16,32,.96);
  --hub-input: #11192a;
  font-family: "Nunito", system-ui, sans-serif;
  background: radial-gradient(circle at 18% 0%, rgba(77,82,255,.18), transparent 32%), radial-gradient(circle at 86% 16%, rgba(78,230,208,.10), transparent 28%), #0b1020 !important;
}
body.hub-personalized[data-hub-theme="midnight"] #scripture-banner {
  background: rgba(13,20,35,.94) !important;
  color: #c9d5e9 !important;
  border-color: rgba(130,160,210,.14) !important;
}
body.hub-personalized[data-hub-theme="midnight"] .settings-panel.settings-refined {
  background: #0f1728 !important;
  border-color: rgba(145,171,214,.16) !important;
  box-shadow: -18px 0 50px rgba(0,0,0,.42) !important;
}
body.hub-personalized[data-hub-theme="midnight"] .view > .card,
body.hub-personalized[data-hub-theme="midnight"] .tasks-open-shell,
body.hub-personalized[data-hub-theme="midnight"] .chores-preview-card,
body.hub-personalized[data-hub-theme="midnight"] .chores-items-card,
body.hub-personalized[data-hub-theme="midnight"] .budget-lineup-surface,
body.hub-personalized[data-hub-theme="midnight"] .purge-lineup-surface {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.hub-personalized[data-hub-theme="midnight"] .view-header h1,
body.hub-personalized[data-hub-theme="midnight"] .tasks-command-title,
body.hub-personalized[data-hub-theme="midnight"] .chores-command-title,
body.hub-personalized[data-hub-theme="midnight"] .budget-refresh-hero-title,
body.hub-personalized[data-hub-theme="midnight"] .section-title {
  font-family: "Poppins", system-ui, sans-serif;
  color: #f5f8ff;
  letter-spacing: -.02em;
}
body.hub-personalized[data-hub-theme="midnight"] .task-title,
body.hub-personalized[data-hub-theme="midnight"] .meal-title,
body.hub-personalized[data-hub-theme="midnight"] .chores-today-title,
body.hub-personalized[data-hub-theme="midnight"] .grocery-item-name {
  color: #eef5ff !important;
}
body.hub-personalized[data-hub-theme="midnight"] .filter-chip,
body.hub-personalized[data-hub-theme="midnight"] .subtab-btn,
body.hub-personalized[data-hub-theme="midnight"] .owner-check-label,
body.hub-personalized[data-hub-theme="midnight"] .pill {
  background: rgba(17,25,42,.82) !important;
  border-color: rgba(138,166,211,.18) !important;
  color: #a9b7cc !important;
}
body.hub-personalized[data-hub-theme="midnight"] .filter-chip.active,
body.hub-personalized[data-hub-theme="midnight"] .subtab-btn.active {
  background: rgba(78,230,208,.12) !important;
  color: #75f2df !important;
  border-color: rgba(78,230,208,.36) !important;
  box-shadow: 0 0 18px rgba(78,230,208,.08) !important;
}
body.hub-personalized[data-hub-theme="midnight"] .tabbar {
  border-top: 1px solid rgba(124,153,201,.18);
  box-shadow: 0 -10px 28px rgba(0,0,0,.34);
  backdrop-filter: blur(18px);
}
body.hub-personalized[data-hub-theme="midnight"] .tab-btn {
  color: #71819d !important;
}
body.hub-personalized[data-hub-theme="midnight"] .tab-btn.active {
  color: #63ead6 !important;
  text-shadow: 0 0 14px rgba(78,230,208,.28);
}
body.hub-personalized[data-hub-theme="midnight"] .section-collapse-btn,
body.hub-personalized[data-hub-theme="midnight"] .product-chevron,
body.hub-personalized[data-hub-theme="midnight"] .settings-gear-btn,
body.hub-personalized[data-hub-theme="midnight"] .settings-close-btn {
  background: #11192a !important;
  border-color: rgba(139,166,212,.20) !important;
  color: #79ead9 !important;
}

/* ---------- NOTEBOOK: warm paper, editorial, analogue planner ---------- */
body.hub-personalized[data-hub-theme="notebook"] {
  --hub-page: #eee5d4;
  --hub-surface: #fbf4e7;
  --hub-surface-alt: #f8f0e2;
  --hub-row: #fffaf0;
  --hub-border: #cdbfa9;
  --hub-shape: transparent;
  --hub-shadow: 3px 3px 0 rgba(130,101,67,.10);
  --hub-accent: #a84f3d;
  --hub-accent-ink: #9e4a39;
  --hub-accent-2: #6f7752;
  --hub-text: #40372f;
  --hub-muted: #786b5e;
  --hub-tab: #f7efe1;
  --hub-input: #fffaf0;
  font-family: "Quicksand", system-ui, sans-serif;
  background-color: #eee5d4 !important;
  background-image: repeating-linear-gradient(0deg, rgba(125,99,71,.035) 0, rgba(125,99,71,.035) 1px, transparent 1px, transparent 24px) !important;
}
body.hub-personalized[data-hub-theme="notebook"] .view-header h1,
body.hub-personalized[data-hub-theme="notebook"] .tasks-command-title,
body.hub-personalized[data-hub-theme="notebook"] .chores-command-title,
body.hub-personalized[data-hub-theme="notebook"] .budget-refresh-hero-title,
body.hub-personalized[data-hub-theme="notebook"] .section-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: none;
  color: #40372f;
}
body.hub-personalized[data-hub-theme="notebook"] .dashboard-hero,
body.hub-personalized[data-hub-theme="notebook"] .view-header,
body.hub-personalized[data-hub-theme="notebook"] .tasks-command-card,
body.hub-personalized[data-hub-theme="notebook"] .chores-command-card,
body.hub-personalized[data-hub-theme="notebook"] .budget-refresh-hero,
body.hub-personalized[data-hub-theme="notebook"] .purge-refresh-hero {
  background-image: linear-gradient(90deg, transparent 0 21px, rgba(176,79,61,.16) 21px 22px, transparent 22px);
  border: 1px solid #cdbfa9;
  box-shadow: 3px 3px 0 rgba(126,96,62,.10);
}
body.hub-personalized[data-hub-theme="notebook"] #view-dashboard .dashboard-hero::after,
body.hub-personalized[data-hub-theme="notebook"] #view-tasks .tasks-command-card::after,
body.hub-personalized[data-hub-theme="notebook"] #view-schedule .chores-command-card::after,
body.hub-personalized[data-hub-theme="notebook"] #today-tasks-card::after,
body.hub-personalized[data-hub-theme="notebook"] #calendar-card::after,
body.hub-personalized[data-hub-theme="notebook"] #view-budget .budget-refresh-hero::after,
body.hub-personalized[data-hub-theme="notebook"] #view-purge .purge-refresh-hero::after,
body.hub-personalized[data-hub-theme="notebook"] .lineup-surface::after,
body.hub-personalized[data-hub-theme="notebook"] .purge-lineup-surface::after {
  display: none !important;
}
body.hub-personalized[data-hub-theme="notebook"] .tabbar {
  border-top: 2px solid #c7b79d;
  box-shadow: 0 -3px 0 rgba(114,91,64,.04);
}
body.hub-personalized[data-hub-theme="notebook"] .tab-btn {
  font-family: "Quicksand", sans-serif !important;
  color: #857667 !important;
}
body.hub-personalized[data-hub-theme="notebook"] .tab-btn.active {
  color: #a84f3d !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
body.hub-personalized[data-hub-theme="notebook"] .filter-chip,
body.hub-personalized[data-hub-theme="notebook"] .subtab-btn,
body.hub-personalized[data-hub-theme="notebook"] .swap-toggle-btn {
  background: transparent !important;
  border: 1px solid #cbbda7 !important;
  color: #6f6255 !important;
  box-shadow: none !important;
}
body.hub-personalized[data-hub-theme="notebook"] .filter-chip.active,
body.hub-personalized[data-hub-theme="notebook"] .subtab-btn.active {
  background: #a84f3d !important;
  border-color: #a84f3d !important;
  color: #fffaf0 !important;
}
body.hub-personalized[data-hub-theme="notebook"] .gauge-track {
  height: 5px;
}

/* ---------- Theme-specific corner ranges ---------- */
body.hub-personalized[data-hub-theme="soft-glow"][data-hub-corners="soft"] { --hub-panel-radius: 18px; --hub-control-radius: 11px; }
body.hub-personalized[data-hub-theme="soft-glow"][data-hub-corners="balanced"] { --hub-panel-radius: 12px; --hub-control-radius: 9px; }
body.hub-personalized[data-hub-theme="soft-glow"][data-hub-corners="crisp"] { --hub-panel-radius: 7px; --hub-control-radius: 6px; }
body.hub-personalized[data-hub-theme="studio"][data-hub-corners="soft"] { --hub-panel-radius: 10px; --hub-control-radius: 7px; }
body.hub-personalized[data-hub-theme="studio"][data-hub-corners="balanced"] { --hub-panel-radius: 6px; --hub-control-radius: 5px; }
body.hub-personalized[data-hub-theme="studio"][data-hub-corners="crisp"] { --hub-panel-radius: 2px; --hub-control-radius: 2px; }
body.hub-personalized[data-hub-theme="midnight"][data-hub-corners="soft"] { --hub-panel-radius: 20px; --hub-control-radius: 11px; }
body.hub-personalized[data-hub-theme="midnight"][data-hub-corners="balanced"] { --hub-panel-radius: 14px; --hub-control-radius: 8px; }
body.hub-personalized[data-hub-theme="midnight"][data-hub-corners="crisp"] { --hub-panel-radius: 8px; --hub-control-radius: 5px; }
body.hub-personalized[data-hub-theme="notebook"][data-hub-corners="soft"] { --hub-panel-radius: 14px; --hub-control-radius: 8px; }
body.hub-personalized[data-hub-theme="notebook"][data-hub-corners="balanced"] { --hub-panel-radius: 8px; --hub-control-radius: 5px; }
body.hub-personalized[data-hub-theme="notebook"][data-hub-corners="crisp"] { --hub-panel-radius: 2px; --hub-control-radius: 2px; }

body.hub-personalized .dashboard-hero,
body.hub-personalized .view-header,
body.hub-personalized .card,
body.hub-personalized .tasks-command-card,
body.hub-personalized .tasks-open-shell,
body.hub-personalized .chores-command-card,
body.hub-personalized .chores-preview-card,
body.hub-personalized .chores-items-card,
body.hub-personalized .meals-planner-card,
body.hub-personalized .budget-refresh-hero,
body.hub-personalized .purge-refresh-hero,
body.hub-personalized .purge-lineup-surface,
body.hub-personalized .budget-goals-summary {
  border-radius: var(--hub-panel-radius);
}
body.hub-personalized button,
body.hub-personalized input,
body.hub-personalized select,
body.hub-personalized textarea,
body.hub-personalized .filter-chip,
body.hub-personalized .pill {
  border-radius: var(--hub-control-radius) !important;
}
body.hub-personalized .section-collapse-btn,
body.hub-personalized .product-chevron,
body.hub-personalized .settings-close-btn,
body.hub-personalized .settings-gear-btn,
body.hub-personalized .budget-goals-ring,
body.hub-personalized .purge-progress-ring {
  border-radius: 50% !important;
}

/* ---------- Density ---------- */
body.hub-personalized[data-hub-density="relaxed"] .view > .card,
body.hub-personalized[data-hub-density="relaxed"] .view > section {
  margin-bottom: 16px !important;
}
body.hub-personalized[data-hub-density="relaxed"] .chores-today-row,
body.hub-personalized[data-hub-density="relaxed"] .product-lineup-row,
body.hub-personalized[data-hub-density="relaxed"] .product-lineup-card > .meal-card-head,
body.hub-personalized[data-hub-density="relaxed"] .product-calendar-row,
body.hub-personalized[data-hub-density="relaxed"] .grocery-row {
  padding-top: 11px;
  padding-bottom: 11px;
}
body.hub-personalized[data-hub-density="compact"] .view > .card,
body.hub-personalized[data-hub-density="compact"] .view > section {
  margin-bottom: 7px !important;
}
body.hub-personalized[data-hub-density="compact"] .chores-today-row,
body.hub-personalized[data-hub-density="compact"] .product-lineup-row,
body.hub-personalized[data-hub-density="compact"] .product-lineup-card > .meal-card-head,
body.hub-personalized[data-hub-density="compact"] .product-calendar-row,
body.hub-personalized[data-hub-density="compact"] .grocery-row {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* ---------- Settings controls ---------- */
.settings-panel.settings-refined .personalization-settings-card {
  padding: 15px !important;
  background: var(--hub-surface, linear-gradient(135deg,#fff4eb,#f7effb,#edf7ef)) !important;
  border-color: var(--hub-border, #eadfd8) !important;
  color: var(--hub-text, #45373a) !important;
}
.personalization-heading { margin-bottom: 14px; }
.personalization-heading .section-title { margin: 0; }
.personalization-heading p {
  margin: 2px 0 0;
  color: var(--hub-muted, #6c5f60);
  font-size: .75rem;
}
.personal-setting-group + .personal-setting-group {
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--hub-border, rgba(112,89,84,.10));
}
.personal-setting-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.personal-setting-head strong { color: var(--hub-text, #45373a); font-size: .79rem; }
.personal-setting-head span { color: var(--hub-muted, #6c5f60); font-size: .75rem; text-align: right; }
.personal-theme-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.personal-theme-option {
  min-width: 0;
  padding: 7px !important;
  border: 1px solid var(--hub-border, #e4dad4) !important;
  background: var(--hub-input, rgba(255,255,255,.76)) !important;
  color: var(--hub-text, #45373a) !important;
  text-align: left;
  box-shadow: none !important;
}
.personal-theme-option.is-selected {
  border-color: var(--hub-accent, #62aaa2) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hub-accent, #62aaa2) 18%, transparent) !important;
}
.personal-theme-preview {
  position: relative;
  display: block;
  height: 52px;
  overflow: hidden;
  margin-bottom: 6px;
  border-radius: 8px;
  border: 1px solid rgba(80,65,60,.10);
}
.personal-preview-top { position:absolute; left:6px; top:6px; width:36px; height:5px; border-radius:4px; }
.personal-preview-shape { position:absolute; right:-9px; top:-10px; width:30px; height:30px; border-radius:50%; }
.personal-preview-row { position:absolute; left:7px; right:7px; height:8px; border-radius:5px; }
.personal-preview-row-a { top:22px; }
.personal-preview-row-b { top:33px; right:22px; }
.personal-preview-nav { position:absolute; left:0; right:0; bottom:0; height:8px; }
.personal-theme-soft-glow .personal-theme-preview { background: linear-gradient(135deg,#fff1e8,#f4ebfa,#eaf6ed); }
.personal-theme-soft-glow .personal-preview-top { background:#c98878; }
.personal-theme-soft-glow .personal-preview-shape { background:rgba(255,255,255,.58); }
.personal-theme-soft-glow .personal-preview-row { background:rgba(255,255,255,.90); }
.personal-theme-soft-glow .personal-preview-nav { background:#fffdfb; }
.personal-theme-studio .personal-theme-preview { background:#f3f6fb; }
.personal-theme-studio .personal-preview-top { background:#2563eb; border-radius:1px; }
.personal-theme-studio .personal-preview-shape { display:none; }
.personal-theme-studio .personal-preview-row { background:#fff; border:1px solid #d8e0ec; border-radius:2px; }
.personal-theme-studio .personal-preview-nav { background:#fff; border-top:1px solid #d8e0ec; }
.personal-theme-midnight .personal-theme-preview { background:radial-gradient(circle at 75% 10%,rgba(78,230,208,.18),transparent 34%),#0b1020; border-color:#26334c; }
.personal-theme-midnight .personal-preview-top { background:#4ee6d0; box-shadow:0 0 8px rgba(78,230,208,.35); }
.personal-theme-midnight .personal-preview-shape { background:rgba(167,139,250,.18); }
.personal-theme-midnight .personal-preview-row { background:#19233a; border:1px solid #2b3b5b; }
.personal-theme-midnight .personal-preview-nav { background:#0e1526; border-top:1px solid #26334c; }
.personal-theme-notebook .personal-theme-preview { background:repeating-linear-gradient(0deg,#f7efdf 0,#f7efdf 11px,#e7dbc7 12px); border-color:#c8b99f; }
.personal-theme-notebook .personal-preview-top { background:#a84f3d; border-radius:0; }
.personal-theme-notebook .personal-preview-shape { display:none; }
.personal-theme-notebook .personal-preview-row { background:#fff9ee; border-bottom:1px dashed #cdbda4; border-radius:0; }
.personal-theme-notebook .personal-preview-nav { background:#eee3d0; border-top:2px solid #bca98b; }
.personal-theme-copy { display:block; }
.personal-theme-copy strong,
.personal-theme-copy small { display:block; overflow:hidden; text-overflow:ellipsis; }
.personal-theme-copy strong { font-size: .75rem; white-space:nowrap; }
.personal-theme-copy small { margin-top:1px; color:var(--hub-muted,#6c5f60); font-size: .75rem; line-height:1.2; }
.personal-segmented {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:4px;
  padding:3px;
  border:1px solid var(--hub-border,#e4dad4);
  border-radius:var(--hub-control-radius,11px);
  background:color-mix(in srgb,var(--hub-input,#fff) 76%,transparent);
}
.personal-segmented-btn {
  min-width:0;
  min-height:31px;
  padding:5px !important;
  border:0 !important;
  background:transparent !important;
  color:var(--hub-muted,#6c5f60) !important;
  font-size: .75rem !important;
  font-weight:800;
  box-shadow:none !important;
}
.personal-segmented-btn.is-selected {
  background:var(--hub-row,#fff) !important;
  color:var(--hub-text,#45373a) !important;
  box-shadow:0 2px 7px rgba(80,65,61,.07) !important;
}
.personal-reset-btn {
  margin-top:13px;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:var(--hub-muted,#6c5f60) !important;
  font-size: .75rem !important;
  text-decoration:underline;
  box-shadow:none !important;
}

@media (max-width:390px) {
  .personal-theme-grid { grid-template-columns:1fr 1fr; }
  .personal-setting-head { display:block; }
  .personal-setting-head span { display:block; margin-top:2px; text-align:left; }
}

@media (prefers-reduced-motion:reduce) {
  body.hub-personalized * { scroll-behavior:auto !important; }
}

/* ====================================================================
   was marker-refresh.css
   ==================================================================== */

/* Marker: flat blocks of colour inside thick ink outlines, chunky rounded
   type, and no gradients anywhere - good children's-book illustration
   rather than "kids' app".

   This one has a job rather than just a look. The tablet display on the
   wall and the kids reading their own visual schedule need something
   legible from across a room, and flat saturated blocks behind near-black
   ink beat every other theme here for that. It is also accessible by
   construction rather than by correction: every fill in the palette sits
   at 9:1 or better against the ink, so there is no combination of text
   and surface in this theme that can fail AA.

   Replaces Home Base, which was another light "command centre" direction
   competing with Mosaic and Soft Glow for the same adult-facing job. */

body.hub-personalized[data-hub-theme="marker"] {
  --mk-ink: #141414;
  --mk-ink-soft: #333333;
  --mk-paper: #fffaf0;
  --mk-card: #ffffff;

  /* Flat fills, never gradients. Each is light enough that near-black ink
     sits on it at 9:1 or better - the reason this theme cannot produce a
     failing colour pair. */
  --mk-sun: #ffd23f;
  --mk-sky: #7ad3f5;
  --mk-grass: #95e08a;
  --mk-berry: #f5a3c7;
  --mk-grape: #c9a7f5;
  --mk-clay: #ffab76;

  --mk-line: 3px;
  --mk-radius: 20px;
  /* A hard offset shadow rather than a blur: ink-drawn things sit on the
     page like stickers, they do not float above it. */
  --mk-drop: 4px 4px 0 var(--mk-ink);
  --mk-drop-sm: 3px 3px 0 var(--mk-ink);

  /* Baloo is already this theme's heading face everywhere it was set by
     hand; naming it here means the remaining display headings follow it
     too. Labels take the near-black ink, in keeping with a theme whose
     whole idea is flat colour behind hard ink. */
  --hub-display-font: "Baloo 2", "Nunito", cursive;
  --hub-display-ink: var(--mk-ink);
  --hub-daylabel-ink: var(--mk-ink-soft);

  --hub-page: var(--mk-paper);
  --hub-surface: var(--mk-card);
  --hub-surface-alt: var(--mk-card);
  --hub-surface-soft: var(--mk-paper);
  --hub-row: var(--mk-card);
  --hub-border: var(--mk-ink);
  --hub-shape: transparent;
  --hub-shadow: var(--mk-drop);
  --hub-accent: var(--mk-sun);
  --hub-accent-ink: var(--mk-ink);
  --hub-accent-2: var(--mk-sky);
  --hub-text: var(--mk-ink);
  --hub-muted: var(--mk-ink-soft);
  --hub-tab: var(--mk-card);
  --hub-input: var(--mk-card);

  --bg: var(--mk-paper);
  --card: var(--mk-card);
  --border: var(--mk-ink);
  --text: var(--mk-ink);
  --text-secondary: var(--mk-ink);
  --text-muted: var(--mk-ink-soft);
  --teal: var(--mk-sun);

  background: var(--mk-paper) !important;
  background-image: none !important;
  color: var(--mk-ink) !important;
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-weight: 700;
}

body.hub-personalized[data-hub-theme="marker"] #app,
body.hub-personalized[data-hub-theme="marker"] .view {
  background: transparent !important;
  color: var(--mk-ink) !important;
}

/* Module palettes: collapse every tab's local accents onto the flat set
   so no layer can reintroduce a gradient or a mid-tone ink. */
body.hub-personalized[data-hub-theme="marker"] #view-tasks {
  --task-ink: var(--mk-ink); --task-muted: var(--mk-ink-soft);
}
body.hub-personalized[data-hub-theme="marker"] #view-meals {
  --meal-green: var(--mk-ink); --meal-green-soft: var(--mk-grass);
  --meal-blue: var(--mk-ink);
}
body.hub-personalized[data-hub-theme="marker"] #view-schedule {
  --chores-lilac: var(--mk-grape); --chores-lilac-strong: var(--mk-ink); --chores-gold-soft: var(--mk-sun);
}
body.hub-personalized[data-hub-theme="marker"] #view-purge {
  --purge-ink: var(--mk-ink); --purge-muted: var(--mk-ink-soft);
  --purge-progress: var(--mk-sun);
  --purge-warm: var(--mk-ink);
  --purge-sage: var(--mk-ink);
  --purge-teal: var(--mk-ink); --purge-teal-soft: var(--mk-sky);
}
body.hub-personalized[data-hub-theme="marker"] #view-budget {
  --budget-ink: var(--mk-ink); --budget-muted: var(--mk-ink-soft); --budget-line: var(--mk-ink);
}
body.hub-personalized[data-hub-theme="marker"] {
  --product-ink: var(--mk-ink); --product-muted: var(--mk-ink-soft);
  --product-gold: var(--mk-sun); --product-peach: var(--mk-clay);
  --product-sage: var(--mk-grass); --product-teal: var(--mk-sky);
  --product-lilac: var(--mk-grape);
  --lineup-surface-gradient: var(--mk-card);
  --lineup-surface-bg: var(--mk-card);
  --lineup-row-bg: var(--mk-card);
  --lineup-row-border: var(--mk-ink);
  --lineup-shadow: none;
}

/* No gradients anywhere. This theme is flat colour by definition, and the
   tab layers paint plenty of them. */
body.hub-personalized[data-hub-theme="marker"] #app *,
body.hub-personalized[data-hub-theme="marker"] #app *::before,
body.hub-personalized[data-hub-theme="marker"] #app *::after {
  background-image: none !important;
  text-shadow: none !important;
}

/* ---- type: chunky, rounded, and bigger than the other themes ----
   Legibility from across a room is this theme's whole job, so the type
   scale steps up rather than staying at phone-reading size. */
body.hub-personalized[data-hub-theme="marker"] .view-header h1,
body.hub-personalized[data-hub-theme="marker"] .tasks-command-title,
body.hub-personalized[data-hub-theme="marker"] .chores-command-title,
body.hub-personalized[data-hub-theme="marker"] .budget-refresh-hero-title {
  font-family: "Baloo 2", "Nunito", cursive;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--mk-ink);
}

body.hub-personalized[data-hub-theme="marker"] .section-title {
  font-family: "Baloo 2", "Nunito", cursive !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--mk-ink) !important;
  letter-spacing: 0 !important;
  border: none !important;
}

body.hub-personalized[data-hub-theme="marker"] .tasks-stat-value {
  font-family: "Baloo 2", "Nunito", cursive;
  font-size: 2.1rem;
  color: var(--mk-ink);
}

/* .gauge-value holds a short number in the capacity gauges but a whole
   sentence in the week-tasks card, so it only gets a modest step up -
   at display size the sentence overflowed its card and covered the tab
   bar. */
body.hub-personalized[data-hub-theme="marker"] .gauge-value {
  font-family: "Baloo 2", "Nunito", cursive;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--mk-ink);
}

body.hub-personalized[data-hub-theme="marker"] .task-title,
body.hub-personalized[data-hub-theme="marker"] .chores-today-title,
body.hub-personalized[data-hub-theme="marker"] .day-plan-title {
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  color: var(--mk-ink) !important;
}

body.hub-personalized[data-hub-theme="marker"] .notifications-note,
body.hub-personalized[data-hub-theme="marker"] .today-tasks-sub,
body.hub-personalized[data-hub-theme="marker"] .empty-state,
body.hub-personalized[data-hub-theme="marker"] .gauge-sub,
body.hub-personalized[data-hub-theme="marker"] .tasks-stat-label {
  font-size: .82rem;
  color: var(--mk-ink-soft);
}

/* ---- surfaces: outlined blocks that sit on the page like stickers ---- */
body.hub-personalized[data-hub-theme="marker"] .card,
body.hub-personalized[data-hub-theme="marker"] .lineup-surface,
body.hub-personalized[data-hub-theme="marker"] .tasks-open-shell,
body.hub-personalized[data-hub-theme="marker"] .tasks-command-card,
body.hub-personalized[data-hub-theme="marker"] .chores-command-card,
body.hub-personalized[data-hub-theme="marker"] .chores-items-card,
body.hub-personalized[data-hub-theme="marker"] .meals-planner-card,
body.hub-personalized[data-hub-theme="marker"] .meals-refresh-summary,
body.hub-personalized[data-hub-theme="marker"] .purge-lineup-surface,
body.hub-personalized[data-hub-theme="marker"] .purge-refresh-hero,
body.hub-personalized[data-hub-theme="marker"] .budget-refresh-hero,
body.hub-personalized[data-hub-theme="marker"] .settings-section-card,
body.hub-personalized[data-hub-theme="marker"] .dashboard-hero,
body.hub-personalized[data-hub-theme="marker"] .view-header {
  background: var(--mk-card);
  border: var(--mk-line) solid var(--mk-ink);
  border-radius: var(--mk-radius);
  box-shadow: var(--mk-drop);
  color: var(--mk-ink);
  margin-bottom: 18px;
}

body.hub-personalized[data-hub-theme="marker"] .chores-today-row,
body.hub-personalized[data-hub-theme="marker"] .product-lineup-card,
body.hub-personalized[data-hub-theme="marker"] .product-calendar-row,
body.hub-personalized[data-hub-theme="marker"] .product-simple-row,
body.hub-personalized[data-hub-theme="marker"] .grocery-row,
body.hub-personalized[data-hub-theme="marker"] .inbox-item,
body.hub-personalized[data-hub-theme="marker"] .help-request-item,
body.hub-personalized[data-hub-theme="marker"] .calibration-row,
body.hub-personalized[data-hub-theme="marker"] .zone-row,
body.hub-personalized[data-hub-theme="marker"] .meal-card,
body.hub-personalized[data-hub-theme="marker"] .day-plan-card,
body.hub-personalized[data-hub-theme="marker"] .task-row,
body.hub-personalized[data-hub-theme="marker"] #today-tasks-list .tonight-task-item {
  color: var(--mk-ink);
  margin-bottom: 8px;
}

/* The four dashboard tiles are the clearest place for flat blocks of
   colour - one per tile, the way a picture book would do it. */

/* The decorative corner disc each tile carries is a soft white wash. On a
   flat saturated block it reads as a smudge, which is the one thing this
   theme should never have. --hub-shape covers the shared rule; the tab
   layers paint their own, hence the explicit suppression. */
body.hub-personalized[data-hub-theme="marker"] .card::after,
body.hub-personalized[data-hub-theme="marker"] .view-header::after,
body.hub-personalized[data-hub-theme="marker"] .dashboard-hero::after,
body.hub-personalized[data-hub-theme="marker"] .lineup-surface::after,
body.hub-personalized[data-hub-theme="marker"] .chores-items-card::after,
body.hub-personalized[data-hub-theme="marker"] .tasks-command-card::after,
body.hub-personalized[data-hub-theme="marker"] .purge-lineup-surface::after {
  background: transparent;
  display: none;
}

/* ---- pills: outlined chips, ink text, hue carried by the border ----
   The tint colours vary in lightness, so filling with them would put ink
   on an unpredictable ground. Outlining instead keeps the category
   readable at a fixed 18:1 while the hue still identifies it. */
body.hub-personalized[data-hub-theme="marker"] .pill {
  background: var(--mk-card) !important;
  border: 2px solid var(--mk-ink) !important;
  border-radius: 999px !important;
  padding: 3px 11px !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  color: var(--mk-ink) !important;
}
body.hub-personalized[data-hub-theme="marker"] .pill.is-tinted {
  border-color: var(--tint-ink, var(--mk-ink)) !important;
  color: var(--mk-ink) !important;
  background: var(--mk-card) !important;
}
body.hub-personalized[data-hub-theme="marker"] .priority-tag {
  color: var(--mk-ink) !important;
  font-weight: 800 !important;
}
body.hub-personalized[data-hub-theme="marker"] .zone-status-btn.is-tinted {
  background: var(--mk-card) !important;
  border: 2px solid var(--tint-ink, var(--mk-ink)) !important;
  color: var(--mk-ink) !important;
  border-radius: 999px !important;
}

/* ---- controls ---- */
body.hub-personalized[data-hub-theme="marker"] .btn.btn-primary {
  background: var(--mk-sun) !important;
  color: var(--mk-ink) !important;
  border: var(--mk-line) solid var(--mk-ink) !important;
  border-radius: 14px !important;
  box-shadow: var(--mk-drop-sm) !important;
  font-weight: 800 !important;
  font-size: .95rem !important;
}
body.hub-personalized[data-hub-theme="marker"] .btn.btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--mk-ink) !important;
}

body.hub-personalized[data-hub-theme="marker"] .swap-toggle-btn,
body.hub-personalized[data-hub-theme="marker"] .btn:not(.btn-primary),
body.hub-personalized[data-hub-theme="marker"] .subtab-btn,
body.hub-personalized[data-hub-theme="marker"] .cal-nav-btn,
body.hub-personalized[data-hub-theme="marker"] .section-collapse-btn,
body.hub-personalized[data-hub-theme="marker"] .product-chevron,
body.hub-personalized[data-hub-theme="marker"] .view-header-icon {
  background: var(--mk-card);
  border: 2px solid var(--mk-ink);
  border-radius: 12px;
  color: var(--mk-ink);
  box-shadow: none;
  font-weight: 800;
}
body.hub-personalized[data-hub-theme="marker"] .subtab-btn.active {
  background: var(--mk-sun) !important;
  color: var(--mk-ink) !important;
}

/* Round controls stay round - a 12px radius on a circular chevron leaves
   a lozenge with the glyph off-centre. */
body.hub-personalized[data-hub-theme="marker"] .product-chevron,
body.hub-personalized[data-hub-theme="marker"] .cal-nav-btn,
body.hub-personalized[data-hub-theme="marker"] .view-header-icon,
body.hub-personalized[data-hub-theme="marker"] .section-collapse-btn,
body.hub-personalized[data-hub-theme="marker"] .settings-gear-btn,
body.hub-personalized[data-hub-theme="marker"] .tasks-open-chevron,
body.hub-personalized[data-hub-theme="marker"] .universal-collapse-chevron,
body.hub-personalized[data-hub-theme="marker"] .meal-chevron,
body.hub-personalized[data-hub-theme="marker"] .chores-items-collapse-toggle,
body.hub-personalized[data-hub-theme="marker"] .purge-zone-collapse-toggle {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.hub-personalized[data-hub-theme="marker"] input,
body.hub-personalized[data-hub-theme="marker"] textarea,
body.hub-personalized[data-hub-theme="marker"] select,
body.hub-personalized[data-hub-theme="marker"] .inbox-input {
  background: var(--mk-card) !important;
  border: 2px solid var(--mk-ink) !important;
  border-radius: 12px !important;
  color: var(--mk-ink) !important;
  font-weight: 600 !important;
}
/* The rest of the theme runs at weight 700-800, but inputs keep a lighter
   weight: the schedule capture box has a long example placeholder in a
   fixed-height textarea, and bolder type ran it past the bottom edge. */
body.hub-personalized[data-hub-theme="marker"] input::placeholder,
body.hub-personalized[data-hub-theme="marker"] textarea::placeholder {
  color: var(--mk-ink-soft) !important;
  font-weight: 500 !important;
}

body.hub-personalized[data-hub-theme="marker"] :focus-visible {
  outline: 3px solid var(--mk-ink) !important;
  outline-offset: 3px !important;
}

/* ---- tab bar: a solid ink rule and a filled block for the active tab ---- */
body.hub-personalized[data-hub-theme="marker"] .tabbar {
  background: var(--mk-card);
  border-top: var(--mk-line) solid var(--mk-ink);
  box-shadow: none;
}
body.hub-personalized[data-hub-theme="marker"] .tab-btn {
  color: var(--mk-ink) !important;
  background: transparent !important;
  font-weight: 800 !important;
}
body.hub-personalized[data-hub-theme="marker"] .tab-btn.active {
  background: var(--mk-sun) !important;
  color: var(--mk-ink) !important;
  border: 2px solid var(--mk-ink) !important;
  border-radius: 12px !important;
}

/* ---- progress: an ink-outlined channel with a flat fill ---- */
body.hub-personalized[data-hub-theme="marker"] .gauge,
body.hub-personalized[data-hub-theme="marker"] .gauge-track,
body.hub-personalized[data-hub-theme="marker"] .tasks-week-track,
body.hub-personalized[data-hub-theme="marker"] .meals-day-progress {
  overflow: hidden;
}

/* ---- scripture banner and status text ---- */
body.hub-personalized[data-hub-theme="marker"] #scripture-banner {
  background: var(--mk-paper) !important;
  border-bottom: 2px solid var(--mk-ink) !important;
  color: var(--mk-ink) !important;
}
body.hub-personalized[data-hub-theme="marker"] #scripture-banner * { color: inherit !important; }

body.hub-personalized[data-hub-theme="marker"] .status-msg { color: var(--mk-ink-soft) !important; }
body.hub-personalized[data-hub-theme="marker"] .status-msg.success,
body.hub-personalized[data-hub-theme="marker"] .status-msg.error { color: var(--mk-ink) !important; font-weight: 800 !important; }

/* ---- settings ---- */
body.hub-personalized[data-hub-theme="marker"] .settings-panel,
body.hub-personalized[data-hub-theme="marker"] .settings-panel.settings-experience-upgraded,
body.hub-personalized[data-hub-theme="marker"] .settings-panel.settings-experience-upgraded > .settings-panel-header {
  background: var(--mk-paper) !important;
  color: var(--mk-ink) !important;
}
body.hub-personalized[data-hub-theme="marker"] .settings-panel.settings-experience-upgraded .settings-section-card::before {
  background: var(--mk-ink) !important;
  width: 4px;
}

@media (prefers-reduced-motion: reduce) {
  body.hub-personalized[data-hub-theme="marker"] *,
  body.hub-personalized[data-hub-theme="marker"] *::before,
  body.hub-personalized[data-hub-theme="marker"] *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---- picker preview ---- */
.personal-theme-marker .personal-theme-preview {
  background: #fffaf0 !important;
  border: 2px solid #141414 !important;
  box-shadow: 3px 3px 0 #141414 !important;
}
.personal-theme-marker .personal-preview-top {
  background: #ffd23f !important;
  height: 7px !important;
  border-bottom: 2px solid #141414 !important;
}
.personal-theme-marker .personal-preview-shape {
  background: #7ad3f5 !important;
  border: 2px solid #141414 !important;
}
.personal-theme-marker .personal-preview-row {
  background: #ffffff !important;
  border: 2px solid #141414 !important;
  border-radius: 6px !important;
}
.personal-theme-marker .personal-preview-row-a { background: #95e08a !important; }
.personal-theme-marker .personal-preview-nav {
  background: #ffffff !important;
  border-top: 2px solid #141414 !important;
}

/* ====================================================================
   was glacier-refresh.css
   ==================================================================== */

/* Glacier: bright, cool, crystalline.

   Saturated sapphire blues on crisp white, with icy-pale blue borders,
   blue-tinted depth, and opaque dimensional accents. Not glassmorphism -
   nothing here is see-through. The freshness comes from luminosity and
   from how little of the screen the blue actually occupies.

   The governing idea is that colour can be vivid as long as it is
   concentrated: white holds almost every surface, and strong blue is
   spent only where something means something - progress, selection,
   navigation, status, actions.

   --- On saturation and contrast ---
   The three reference blues (#5AAEF2, #479DE8, #3B8EDB) sit at exactly
   the luminance that fails WCAG AA in both directions: 2.4:1 to 3.5:1 as
   text on white, and the same again for white text on them. They are too
   light to read against, and too dark to read on.

   The fix is not to mute them. Deepening a blue while holding its chroma
   raises saturation rather than lowering it - #1A73C7 is 77% saturated
   against #3B8EDB's 69%, and clears AA at 4.86:1 both ways. So:

     - Blues that carry no text keep the reference values exactly:
       progress fills, ring arcs, borders, indicators, the light end of a
       gradient. Contrast rules do not apply to them.
     - Blue that IS text, or that carries white text, uses the deepened
       ramp. Same hue family, more saturation, readable.

   The vivid look survives because the vividness lives in the fills. */

body.hub-personalized[data-hub-theme="glacier"] {
  /* Reference blues, used as fills and edges - never behind text. */
  --gl-sky: #5AAEF2;
  --gl-blue: #479DE8;

  /* Text-safe ramp: same hue, deeper, more saturated. Used for blue
     labels and for anything filled that carries white type. */
  --gl-ink-blue: #1A73C7;
  --gl-ink-blue-deep: #0B5CAB;

  /* Crisp white surfaces over a pale cool ground. The blue must not wash
     over the whole screen - that is what separates this from a tinted
     theme. */
  --gl-ground: #f2f8fe;
  --gl-card: #ffffff;
  --gl-inset: #f7fbff;

  /* Icy, not grey. A grey border here reads as dirt against the blue. */
  --gl-edge: #dcebfa;
  --gl-edge-strong: #c9e0f6;

  /* Depth is blue-tinted light, never a grey drop shadow. */
  --gl-lift: 0 6px 18px rgba(58, 120, 190, .09);
  --gl-lift-sm: 0 2px 8px rgba(58, 120, 190, .07);
  --gl-glow: 0 4px 12px rgba(26, 115, 199, .28);

  /* Very dark cool navy rather than black - it ties the type into the
     blue without giving up readability (15:1 on white). */
  --gl-navy: #12263f;
  --gl-navy-2: #4a6285;
  --gl-muted: #546e92;

  --hub-page: var(--gl-ground);
  --hub-surface: var(--gl-card);
  --hub-surface-alt: var(--gl-card);
  --hub-surface-soft: var(--gl-inset);
  --hub-row: var(--gl-card);
  --hub-border: var(--gl-edge);
  --hub-shape: transparent;
  --hub-shadow: var(--gl-lift);
  --hub-accent: var(--gl-ink-blue);
  --hub-accent-ink: var(--gl-ink-blue);
  --hub-accent-2: var(--gl-blue);
  --hub-text: var(--gl-navy);
  --hub-muted: var(--gl-muted);
  --hub-tab: var(--gl-card);
  --hub-input: var(--gl-card);

  --bg: var(--gl-ground);
  --card: var(--gl-card);
  --border: var(--gl-edge);
  --text: var(--gl-navy);
  --text-secondary: var(--gl-navy-2);
  --text-muted: var(--gl-muted);
  --teal: var(--gl-ink-blue);

  /* The deep blue carries the headings and the day/time labels, which is
     what ties the type into the theme rather than leaving it warm.
     Nunito for display too - Luckiest Guy's soft cartoon weight fights
     the crisp, cool surfaces this theme is built on. */
  --hub-display-font: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --hub-display-ink: var(--gl-ink-blue);
  --hub-daylabel-ink: var(--gl-ink-blue);

  background: var(--gl-ground) !important;
  background-image: none !important;
  color: var(--gl-navy) !important;
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif !important;
}

body.hub-personalized[data-hub-theme="glacier"] #app,
body.hub-personalized[data-hub-theme="glacier"] .view {
  background: transparent !important;
  color: var(--gl-navy) !important;
}

/* Module palettes collapse onto the blue ramp. Every tab ships its own
   warm accents, which would break both the cool cast and the rule that
   colour stays concentrated. */
body.hub-personalized[data-hub-theme="glacier"] #view-tasks {
  --task-ink: var(--gl-navy); --task-muted: var(--gl-muted);
}
body.hub-personalized[data-hub-theme="glacier"] #view-meals {
  --meal-green: var(--gl-ink-blue); --meal-green-soft: #eaf4fd;
  --meal-blue: var(--gl-ink-blue);
}
body.hub-personalized[data-hub-theme="glacier"] #view-schedule {
  --chores-lilac: #eaf4fd; --chores-lilac-strong: var(--gl-ink-blue); --chores-gold-soft: #eaf4fd;
}
body.hub-personalized[data-hub-theme="glacier"] #view-purge {
  --purge-ink: var(--gl-navy); --purge-muted: var(--gl-muted);
  --purge-progress: var(--gl-blue);
  --purge-warm: var(--gl-ink-blue);
  --purge-sage: var(--gl-ink-blue);
  --purge-teal: var(--gl-ink-blue); --purge-teal-soft: #eaf4fd;
}
body.hub-personalized[data-hub-theme="glacier"] #view-budget {
  --budget-ink: var(--gl-navy); --budget-muted: var(--gl-muted); --budget-line: var(--gl-edge);
}
body.hub-personalized[data-hub-theme="glacier"] {
  --product-ink: var(--gl-navy); --product-muted: var(--gl-muted);
  --product-gold: var(--gl-blue); --product-peach: var(--gl-blue);
  --product-sage: var(--gl-blue); --product-teal: var(--gl-blue);
  --product-lilac: var(--gl-blue);
  --lineup-surface-gradient: var(--gl-card);
  --lineup-surface-bg: var(--gl-card);
  --lineup-row-bg: var(--gl-card);
  --lineup-row-border: var(--gl-edge);
  --lineup-shadow: var(--gl-lift-sm);
}

/* The tab layers paint warm gradients across most surfaces, which would
   put a cream wash over what is meant to be crisp white. This carries an
   ID, so it also outranks the deliberate gradients further down the file
   - those are re-asserted through #app at the end to win it back. */
body.hub-personalized[data-hub-theme="glacier"] #app *,
body.hub-personalized[data-hub-theme="glacier"] #app *::before,
body.hub-personalized[data-hub-theme="glacier"] #app *::after {
  background-image: none !important;
}

/* ---- type ---- */
/* The tab headings take the blue, not the navy. This is the same
   #1A73C7 the section titles and eyebrows already use, so the name of the
   tab reads as part of the theme rather than as generic dark text. Data
   (numbers, task titles) stays navy: blue is spent on labels and
   structure here, not on every piece of text. */
body.hub-personalized[data-hub-theme="glacier"] .view-header h1,
body.hub-personalized[data-hub-theme="glacier"] .tasks-command-title,
body.hub-personalized[data-hub-theme="glacier"] .chores-command-title,
body.hub-personalized[data-hub-theme="glacier"] .budget-refresh-hero-title,
body.hub-personalized[data-hub-theme="glacier"] .purge-refresh-hero h1,
body.hub-personalized[data-hub-theme="glacier"] .meals-summary-title {
  color: var(--gl-ink-blue);
  font-weight: 800;
  letter-spacing: -.005em;
}

body.hub-personalized[data-hub-theme="glacier"] .task-title,
body.hub-personalized[data-hub-theme="glacier"] .gauge-value {
  color: var(--gl-navy);
  font-weight: 800;
  letter-spacing: -.005em;
}

/* Section labels are one of the few places blue is spent on type, so they
   use the deepened ramp rather than the reference sky. */
body.hub-personalized[data-hub-theme="glacier"] .section-title,
body.hub-personalized[data-hub-theme="glacier"] .gauge-label,
body.hub-personalized[data-hub-theme="glacier"] .chores-command-eyebrow,
body.hub-personalized[data-hub-theme="glacier"] .tasks-command-eyebrow {
  color: var(--gl-ink-blue);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .78rem;
}

body.hub-personalized[data-hub-theme="glacier"] .notifications-note,
body.hub-personalized[data-hub-theme="glacier"] .today-tasks-sub,
body.hub-personalized[data-hub-theme="glacier"] .empty-state,
body.hub-personalized[data-hub-theme="glacier"] .gauge-sub,
body.hub-personalized[data-hub-theme="glacier"] .tasks-stat-label {
  color: var(--gl-muted);
}

/* ---- surfaces: crisp white, icy edge, blue-tinted lift ---- */
body.hub-personalized[data-hub-theme="glacier"] .card,
body.hub-personalized[data-hub-theme="glacier"] .lineup-surface,
body.hub-personalized[data-hub-theme="glacier"] .tasks-open-shell,
body.hub-personalized[data-hub-theme="glacier"] .tasks-command-card,
body.hub-personalized[data-hub-theme="glacier"] .chores-command-card,
body.hub-personalized[data-hub-theme="glacier"] .chores-items-card,
body.hub-personalized[data-hub-theme="glacier"] .meals-planner-card,
body.hub-personalized[data-hub-theme="glacier"] .meals-refresh-summary,
body.hub-personalized[data-hub-theme="glacier"] .purge-lineup-surface,
body.hub-personalized[data-hub-theme="glacier"] .purge-refresh-hero,
body.hub-personalized[data-hub-theme="glacier"] .budget-refresh-hero,
body.hub-personalized[data-hub-theme="glacier"] .settings-section-card,
body.hub-personalized[data-hub-theme="glacier"] .dashboard-hero,
body.hub-personalized[data-hub-theme="glacier"] .view-header {
  background: var(--gl-card);
  border: 1px solid var(--gl-edge);
  border-radius: 18px;
  box-shadow: var(--gl-lift);
  color: var(--gl-navy);
  margin-bottom: 14px;
}

body.hub-personalized[data-hub-theme="glacier"] .chores-today-row,
body.hub-personalized[data-hub-theme="glacier"] .product-lineup-card,
body.hub-personalized[data-hub-theme="glacier"] .product-calendar-row,
body.hub-personalized[data-hub-theme="glacier"] .product-simple-row,
body.hub-personalized[data-hub-theme="glacier"] .grocery-row,
body.hub-personalized[data-hub-theme="glacier"] .inbox-item,
body.hub-personalized[data-hub-theme="glacier"] .help-request-item,
body.hub-personalized[data-hub-theme="glacier"] .calibration-row,
body.hub-personalized[data-hub-theme="glacier"] .zone-row,
body.hub-personalized[data-hub-theme="glacier"] .meal-card,
body.hub-personalized[data-hub-theme="glacier"] .day-plan-card,
body.hub-personalized[data-hub-theme="glacier"] .task-row,
body.hub-personalized[data-hub-theme="glacier"] .tasks-stat,
body.hub-personalized[data-hub-theme="glacier"] #today-tasks-list .tonight-task-item {
  color: var(--gl-navy);
  margin-bottom: 8px;
}

/* Tiles stay white too. Tinting all four would be the blue washing over
   the screen, which is the thing this theme is defined against. */

/* ---- pills: opaque, saturated, dimensional ----
   The light-to-dark fill plus a hairline top highlight is what produces
   the crystal read. Both ends of the gradient clear AA behind white type,
   so the dimensionality costs nothing in legibility. */
body.hub-personalized[data-hub-theme="glacier"] .pill {
  background: linear-gradient(180deg, var(--gl-ink-blue) 0%, var(--gl-ink-blue-deep) 100%) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: .75rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--gl-lift-sm) !important;
}
/* Category tints would break the single-accent rule, so the hue is
   dropped and the chip stays on the blue ramp like every other pill. */
body.hub-personalized[data-hub-theme="glacier"] .pill.is-tinted {
  --tint-ink: transparent;
  --tint-edge: transparent;
  color: #ffffff !important;
}
body.hub-personalized[data-hub-theme="glacier"] .priority-tag {
  color: var(--gl-muted) !important;
}
body.hub-personalized[data-hub-theme="glacier"] .zone-status-btn.is-tinted {
  background: #ffffff !important;
  border: 1.5px solid var(--gl-ink-blue) !important;
  color: var(--gl-ink-blue) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

/* ---- controls: primary / outline / pressed, per the reference ---- */
body.hub-personalized[data-hub-theme="glacier"] .btn.btn-primary {
  background: linear-gradient(180deg, var(--gl-ink-blue) 0%, var(--gl-ink-blue-deep) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), var(--gl-glow) !important;
}
body.hub-personalized[data-hub-theme="glacier"] .btn.btn-primary:active {
  background: linear-gradient(180deg, var(--gl-ink-blue-deep) 0%, #094e92 100%) !important;
  box-shadow: inset 0 2px 4px rgba(8, 58, 110, .45) !important;
  transform: translateY(1px);
}

body.hub-personalized[data-hub-theme="glacier"] .swap-toggle-btn,
body.hub-personalized[data-hub-theme="glacier"] .btn:not(.btn-primary),
body.hub-personalized[data-hub-theme="glacier"] .subtab-btn,
body.hub-personalized[data-hub-theme="glacier"] .cal-nav-btn,
body.hub-personalized[data-hub-theme="glacier"] .section-collapse-btn,
body.hub-personalized[data-hub-theme="glacier"] .product-chevron,
body.hub-personalized[data-hub-theme="glacier"] .view-header-icon,
body.hub-personalized[data-hub-theme="glacier"] .settings-gear-btn {
  background: #ffffff;
  border: 1.5px solid var(--gl-edge-strong);
  border-radius: 999px;
  color: var(--gl-ink-blue);
  box-shadow: none;
  font-weight: 800;
}
body.hub-personalized[data-hub-theme="glacier"] .subtab-btn.active {
  background: linear-gradient(180deg, var(--gl-ink-blue) 0%, var(--gl-ink-blue-deep) 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22) !important;
}

body.hub-personalized[data-hub-theme="glacier"] input,
body.hub-personalized[data-hub-theme="glacier"] textarea,
body.hub-personalized[data-hub-theme="glacier"] select,
body.hub-personalized[data-hub-theme="glacier"] .inbox-input {
  background: #ffffff !important;
  border: 1.5px solid var(--gl-edge-strong) !important;
  border-radius: 14px !important;
  color: var(--gl-navy) !important;
}
body.hub-personalized[data-hub-theme="glacier"] input::placeholder,
body.hub-personalized[data-hub-theme="glacier"] textarea::placeholder {
  color: var(--gl-muted) !important;
}
body.hub-personalized[data-hub-theme="glacier"] input:focus,
body.hub-personalized[data-hub-theme="glacier"] textarea:focus {
  border-color: var(--gl-blue) !important;
  box-shadow: 0 0 0 3px rgba(71, 157, 232, .18) !important;
}
body.hub-personalized[data-hub-theme="glacier"] :focus-visible {
  outline: 2px solid var(--gl-ink-blue) !important;
  outline-offset: 2px !important;
}

/* ---- tab bar: navigation is one of the places blue earns its keep ---- */
body.hub-personalized[data-hub-theme="glacier"] .tabbar {
  background: #ffffff;
  border-top: 1px solid var(--gl-edge);
  box-shadow: 0 -4px 16px rgba(58,120,190,.07);
}
body.hub-personalized[data-hub-theme="glacier"] .tab-btn {
  color: var(--gl-muted) !important;
  background: transparent !important;
  font-weight: 700 !important;
}
body.hub-personalized[data-hub-theme="glacier"] .tab-btn.active {
  color: var(--gl-ink-blue) !important;
  background: transparent !important;
  font-weight: 800 !important;
}

/* ---- progress: icy track, vivid fill ----
   These carry no text, so the reference blues are used unmodified. */
body.hub-personalized[data-hub-theme="glacier"] .gauge-track,
body.hub-personalized[data-hub-theme="glacier"] .tasks-week-track,
body.hub-personalized[data-hub-theme="glacier"] .meals-day-progress {
  overflow: hidden;
}

/* ---- status ---- */
body.hub-personalized[data-hub-theme="glacier"] .status-msg { color: var(--gl-muted) !important; }
body.hub-personalized[data-hub-theme="glacier"] .status-msg.success { color: var(--gl-ink-blue) !important; }
/* The over-capacity state still has to read as a warning, so it keeps a
   distinct hue rather than joining the blue - but a deep one, not an
   alarm red, so it sits inside this palette's register. */
body.hub-personalized[data-hub-theme="glacier"] .status-msg.error,
body.hub-personalized[data-hub-theme="glacier"] .today-tasks-remaining.over {
  color: #b03a48 !important;
}

/* ---- scripture banner and settings ---- */
body.hub-personalized[data-hub-theme="glacier"] #scripture-banner {
  background: var(--gl-ground) !important;
  border-color: var(--gl-edge) !important;
  color: var(--gl-navy) !important;
}
body.hub-personalized[data-hub-theme="glacier"] #scripture-banner * { color: inherit !important; }

body.hub-personalized[data-hub-theme="glacier"] .settings-panel,
body.hub-personalized[data-hub-theme="glacier"] .settings-panel.settings-experience-upgraded,
body.hub-personalized[data-hub-theme="glacier"] .settings-panel.settings-experience-upgraded > .settings-panel-header {
  background: var(--gl-ground) !important;
  color: var(--gl-navy) !important;
}

/* Decorative corner discs are a leftover warmth from the shared layers
   and read as a smudge on crisp white. */
body.hub-personalized[data-hub-theme="glacier"] .card::after,
body.hub-personalized[data-hub-theme="glacier"] .view-header::after,
body.hub-personalized[data-hub-theme="glacier"] .dashboard-hero::after,
body.hub-personalized[data-hub-theme="glacier"] .lineup-surface::after {
  background: transparent;
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  body.hub-personalized[data-hub-theme="glacier"] *,
  body.hub-personalized[data-hub-theme="glacier"] *::before,
  body.hub-personalized[data-hub-theme="glacier"] *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---- picker preview ---- */
.personal-theme-glacier .personal-theme-preview {
  background: #f2f8fe !important;
  border: 1px solid #dcebfa !important;
  box-shadow: 0 2px 8px rgba(58,120,190,.10) !important;
}
.personal-theme-glacier .personal-preview-top {
  background: linear-gradient(90deg, #5AAEF2, #3B8EDB) !important;
  height: 5px !important;
}
.personal-theme-glacier .personal-preview-shape {
  background: linear-gradient(180deg, #1A73C7, #0B5CAB) !important;
  border: none !important;
}
.personal-theme-glacier .personal-preview-row {
  background: #ffffff !important;
  border: 1px solid #dcebfa !important;
  border-radius: 7px !important;
}
.personal-theme-glacier .personal-preview-row-a { background: #ffffff !important; }
.personal-theme-glacier .personal-preview-nav {
  background: #ffffff !important;
  border-top: 1px solid #dcebfa !important;
}


/* ---- gradients re-asserted through #app ----
   The blanket background-image:none above is ID-scoped and would
   otherwise flatten the pills and buttons into invisible white shapes:
   a transparent background under white type. These restore the intended
   dimensionality at matching specificity. */
body.hub-personalized[data-hub-theme="glacier"] #app .pill,
body.hub-personalized[data-hub-theme="glacier"] #app .btn.btn-primary,
body.hub-personalized[data-hub-theme="glacier"] #app .subtab-btn.active {
  background-image: linear-gradient(180deg, var(--gl-ink-blue) 0%, var(--gl-ink-blue-deep) 100%) !important;
  background-color: var(--gl-ink-blue) !important;
  color: #ffffff !important;
}

/* The capacity chip carries a warm cream fill from another layer. It is
   one of the reference's signature elements, so it becomes a blue pill;
   the over-capacity variant stays distinguishable without going warm,
   since a salmon chip on this palette reads as a bug rather than a
   warning. */
body.hub-personalized[data-hub-theme="glacier"] #app .today-tasks-remaining {
  /* The blue fill this comment promises was never written, so the white
     it sets landed on the warm cream the chip carries from
     hub-polish-refresh.css - #ffffff on #f5ede7, 1.16:1, which is the
     capacity figure rendered invisible on the busiest card in the app.
     Measured with axe across every theme and appearance; this was the
     only 1.x ratio anywhere. White on --gl-ink-blue is 4.86:1. */
  background: var(--gl-ink-blue) !important;
  color: #ffffff !important;
  padding: 4px 12px !important;
  font-weight: 800 !important;
}
/* Over capacity uses the reference's outline variant rather than a filled
   warning: a solid dark-red pill is the loudest thing on the screen, which
   both breaks the rule that colour stays concentrated and is the wrong
   register for an app whose slip nudges are deliberately gentle. Outlined
   still reads as "different", without alarm. */
body.hub-personalized[data-hub-theme="glacier"] #app .today-tasks-remaining.over {
  /* Outlined, per the note above - and now that the base chip is a solid
     blue, the fill has to be taken back off here or the warning colour
     would sit on it at 1.38:1. */
  background: var(--gl-ground) !important;
  border: 1.5px solid #a03744;
  color: #a03744 !important;
}

/* The scripture reference keeps a warm accent from the base stylesheet. */
body.hub-personalized[data-hub-theme="glacier"] #scripture-banner,
body.hub-personalized[data-hub-theme="glacier"] #scripture-banner * {
  color: var(--gl-navy) !important;
}
/* The verse reference is #scripture-ref - an id, not a class - and takes
   --coral-ink from the base stylesheet. In the reference design it is one
   of the places blue is deliberately spent. */
body.hub-personalized[data-hub-theme="glacier"] #scripture-ref {
  color: var(--gl-ink-blue) !important;
}

/* ====================================================================
   was mosaic-refresh.css
   ==================================================================== */

/* Mosaic: an aggressive, exploratory product redesign.
   The same data/actions remain underneath, but hierarchy, navigation,
   information representation and page flow are intentionally recomposed. */

body.hub-personalized[data-hub-theme="mosaic"] {
  --hub-page: #f5f4ff;
  --hub-surface: #ffffff;
  --hub-surface-alt: #ffffff;
  --hub-row: #ffffff;
  --hub-border: rgba(39,38,67,.10);
  --hub-shape: transparent;
  --hub-shadow: 0 14px 36px rgba(57,48,104,.08);
  --hub-accent: #6657e8;
  --hub-accent-ink: #5c4ed1;
  --hub-accent-2: #ff6e73;
  --hub-text: #22223c;
  /* 4.43:1 on a white card and 4.06:1 on the lilac page ground - just
     under AA, and the source of 30 of Mosaic's failures, since the muted
     token feeds every gauge label, sub-line and meta row. #5f5e70 keeps
     the same violet-grey at 6.32:1 on white and 5.33:1 on the tinted
     gauge grounds where the last of them were still failing. */
  --hub-muted: #5f5e70;
  --hub-tab: rgba(255,255,255,.94);
  --hub-input: rgba(255,255,255,.92);
  --mosaic-violet: #6657e8;
  --mosaic-indigo: #2e316e;
  --mosaic-coral: #ff6e73;
  --mosaic-cyan: #20b9c4;
  --mosaic-yellow: #ffd76a;
  --mosaic-ink: #22223c;
  --mosaic-soft-violet: #ece9ff;
  --mosaic-soft-cyan: #dcf7f6;
  --mosaic-soft-yellow: #fff3c8;

  /* Poppins is the theme's heading face; the violet is its accent, so
     headings and day labels read as part of the same palette instead of
     a leftover warm pink. */
  --hub-display-font: "Poppins", system-ui, sans-serif;
  --hub-display-ink: var(--mosaic-indigo);
  --hub-daylabel-ink: var(--hub-accent-ink);
  background:
    radial-gradient(circle at 0% 2%, rgba(102,87,232,.16), transparent 28%),
    radial-gradient(circle at 105% 13%, rgba(255,110,115,.16), transparent 25%),
    radial-gradient(circle at 18% 94%, rgba(32,185,196,.10), transparent 28%),
    #f5f4ff !important;
  color: var(--mosaic-ink) !important;
  font-family: "Nunito", system-ui, sans-serif !important;
}

body.hub-personalized[data-hub-theme="mosaic"] #app {
  max-width: 760px !important;
  padding: 10px 12px 118px !important;
}

body.hub-personalized[data-hub-theme="mosaic"] .view {
  animation: mosaic-view-in .32s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes mosaic-view-in {
  from { opacity: .35; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Headers: compact poster-like identities ---------- */
body.hub-personalized[data-hub-theme="mosaic"] .view-header,
body.hub-personalized[data-hub-theme="mosaic"] #view-dashboard .dashboard-hero {
  position: relative;
  min-height: 78px;
  padding: 15px 16px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
  border: 0;
  box-shadow: 0 12px 30px rgba(60,50,112,.075);
  border-radius: 25px 25px 11px 25px;
}
body.hub-personalized[data-hub-theme="mosaic"] .view-header::before,
body.hub-personalized[data-hub-theme="mosaic"] #view-dashboard .dashboard-hero::before {
  content: "";
  position: absolute;
  width: 94px;
  height: 94px;
  right: -29px;
  top: -37px;
  border-radius: 32% 68% 55% 45% / 54% 38% 62% 46%;
  background: linear-gradient(145deg, var(--mosaic-yellow), var(--mosaic-coral));
  opacity: .90;
  transform: rotate(17deg);
  animation: mosaic-float 8s ease-in-out infinite alternate;
}
body.hub-personalized[data-hub-theme="mosaic"] #view-schedule > .view-header::before { background: linear-gradient(145deg,#ffbea8,#ff7180); }
body.hub-personalized[data-hub-theme="mosaic"] #view-meals > .view-header::before { background: linear-gradient(145deg,#ffe47f,#b9de61); }
body.hub-personalized[data-hub-theme="mosaic"] #view-budget > .view-header::before { background: linear-gradient(145deg,#8de4da,#20b9c4); }
body.hub-personalized[data-hub-theme="mosaic"] #view-purge > .purge-refresh-hero::before { background: linear-gradient(145deg,#c7bbff,#8c79ef); }
@keyframes mosaic-float { to { transform: rotate(31deg) translate(-4px,7px); } }

body.hub-personalized[data-hub-theme="mosaic"] .view-header h1,
body.hub-personalized[data-hub-theme="mosaic"] .section-title,
body.hub-personalized[data-hub-theme="mosaic"] .tasks-command-title,
body.hub-personalized[data-hub-theme="mosaic"] .chores-command-title,
body.hub-personalized[data-hub-theme="mosaic"] .budget-refresh-hero-title {
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--mosaic-ink);
  letter-spacing: -.045em;
  text-transform: none;
}
body.hub-personalized[data-hub-theme="mosaic"] .view-header h1 {
  font-size: 1.35rem;
  position: relative;
  z-index: 2;
}
body.hub-personalized[data-hub-theme="mosaic"] .view-header-icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 13px 7px 13px 13px;
  background: var(--mosaic-soft-violet);
  color: var(--mosaic-violet);
}
body.hub-personalized[data-hub-theme="mosaic"] #view-schedule .view-header-icon { background:#ffe6e1; color:#e35f68; }
body.hub-personalized[data-hub-theme="mosaic"] #view-meals .view-header-icon { background:#fff1bd; color:#b58212; }
body.hub-personalized[data-hub-theme="mosaic"] #view-budget .view-header-icon { background:#dff7f4; color:#168e97; }

/* ---------- Dashboard: asymmetric live canvas ---------- */
body.hub-personalized[data-hub-theme="mosaic"] #view-dashboard .dashboard-hero {
  min-height: 82px !important;
  background: linear-gradient(120deg,#ffffff 0%,#f0eeff 100%) !important;
}
body.hub-personalized[data-hub-theme="mosaic"] #view-dashboard .dashboard-hero-art,
body.hub-personalized[data-hub-theme="mosaic"] #view-dashboard .dashboard-hero-sub,
body.hub-personalized[data-hub-theme="mosaic"] #view-dashboard .dashboard-hero-logout {
  display: none !important;
}
body.hub-personalized[data-hub-theme="mosaic"] #view-dashboard .dashboard-hero .brand-title {
  font-size: 1.22rem !important;
}
body.hub-personalized[data-hub-theme="mosaic"] #view-dashboard .dashboard-hero-eyebrow {
  font-size: .75rem !important;
  color: #5f5e70 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
body.hub-personalized[data-hub-theme="mosaic"] #view-dashboard .settings-gear-btn {
  z-index: 4 !important;
  width: 37px !important;
  height: 37px !important;
  background: #fff !important;
  border: 1px solid rgba(61,55,104,.10) !important;
  color: var(--mosaic-indigo) !important;
  box-shadow: 0 5px 14px rgba(45,42,80,.08) !important;
}

/* ---------- Live metric chips: intentionally varied size ---------- */
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-live-strip {
  display: grid !important;
  grid-template-columns: 1.25fr .8fr 1fr !important;
  gap: 7px !important;
  margin: 0 0 10px !important;
}
body.hub-personalized:not([data-hub-theme="mosaic"]) .mosaic-live-strip,
body.hub-personalized:not([data-hub-theme="mosaic"]) .mosaic-jumpbar {
  display: none !important;
}
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-live-chip {
  min-width: 0;
  padding: 9px 10px !important;
  border: 0 !important;
  box-shadow: 0 6px 18px rgba(54,49,91,.055) !important;
  background: #fff !important;
}
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-live-chip:nth-child(1) {
  border-radius: 19px 9px 19px 19px !important;
  background: var(--mosaic-soft-violet) !important;
}
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-live-chip:nth-child(2) {
  border-radius: 9px 18px 18px 9px !important;
  background: var(--mosaic-soft-cyan) !important;
}
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-live-chip:nth-child(3) {
  border-radius: 18px 18px 8px 18px !important;
  background: var(--mosaic-soft-yellow) !important;
}
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-live-chip strong,
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-live-chip span {
  display: block;
}
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-live-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 .94rem/1 "Poppins",sans-serif !important;
  color: var(--mosaic-ink) !important;
}
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-live-chip:first-child strong { font-size: 1.18rem !important; }
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-live-chip span {
  margin-top: 3px;
  color: #5f5e70 !important;
  font-size: .75rem !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ---------- Continuous-page exploration ---------- */
body.hub-personalized[data-hub-theme="mosaic"] #view-meals > .subtabbar,
body.hub-personalized[data-hub-theme="mosaic"] #view-budget > .subtabbar,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-planner > .subtabbar {
  display: none;
}
body.hub-personalized[data-hub-theme="mosaic"] #view-meals > .subview,
body.hub-personalized[data-hub-theme="mosaic"] #view-budget > .subview,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-planner > .subview {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
}
body.hub-personalized[data-hub-theme="mosaic"] [data-mosaic-label] {
  position: relative;
  scroll-margin-top: 16px;
  margin-top: 18px !important;
  padding-top: 46px !important;
}
body.hub-personalized[data-hub-theme="mosaic"] [data-mosaic-label]::before {
  content: attr(data-mosaic-label);
  position: absolute;
  top: 4px;
  left: 2px;
  color: var(--mosaic-ink);
  font: 700 1.02rem/1.1 "Poppins",sans-serif;
  letter-spacing: -.035em;
}
body.hub-personalized[data-hub-theme="mosaic"] [data-mosaic-label]::after {
  content: attr(data-mosaic-note);
  position: absolute;
  top: 26px;
  left: 2px;
  color: #858399;
  font-size: .75rem;
  font-weight: 700;
}
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-jumpbar {
  display: flex !important;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: -2px 0 9px !important;
  padding: 2px 1px 4px !important;
}
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-jumpbar::-webkit-scrollbar { display:none; }
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-jump-pill {
  flex: 0 0 auto;
  min-height: 32px !important;
  padding: 6px 12px !important;
  border: 0 !important;
  background: #fff !important;
  color: #67657b !important;
  box-shadow: 0 4px 12px rgba(52,48,85,.05) !important;
  font-size: .75rem !important;
  font-weight: 900 !important;
}
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-jump-pill:nth-child(1) { border-radius:16px 7px 16px 16px !important; padding-inline:16px !important; color:#5a4fd0 !important; background:#ece9ff !important; }
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-jump-pill:nth-child(2) { border-radius:7px 16px 16px 7px !important; background:#dcf7f6 !important; }
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-jump-pill:nth-child(3) { border-radius:16px 16px 7px 16px !important; background:#fff1c8 !important; padding-inline:14px !important; }
body.hub-personalized[data-hub-theme="mosaic"] .mosaic-jump-pill:nth-child(4) { border-radius:9px 18px 9px 18px !important; background:#ffe4e3 !important; }

/* ---------- Cards become modules, not a stack of identical rectangles ---------- */
body.hub-personalized[data-hub-theme="mosaic"] .view > .card,
body.hub-personalized[data-hub-theme="mosaic"] .tasks-open-shell,
body.hub-personalized[data-hub-theme="mosaic"] .chores-preview-card,
body.hub-personalized[data-hub-theme="mosaic"] .chores-items-card,
body.hub-personalized[data-hub-theme="mosaic"] .chores-add-card,
body.hub-personalized[data-hub-theme="mosaic"] .meals-planner-card,
body.hub-personalized[data-hub-theme="mosaic"] .budget-lineup-surface,
body.hub-personalized[data-hub-theme="mosaic"] .budget-compact-collapse-card,
body.hub-personalized[data-hub-theme="mosaic"] .budget-insight-collapse-card,
body.hub-personalized[data-hub-theme="mosaic"] .purge-lineup-surface {
  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(58,52,96,.055) !important;
}
body.hub-personalized[data-hub-theme="mosaic"] .view > .card:nth-of-type(3n+1),
body.hub-personalized[data-hub-theme="mosaic"] .subview > .card:nth-of-type(3n+1) { border-radius: 24px 11px 24px 24px !important; }
body.hub-personalized[data-hub-theme="mosaic"] .view > .card:nth-of-type(3n+2),
body.hub-personalized[data-hub-theme="mosaic"] .subview > .card:nth-of-type(3n+2) { border-radius: 12px 24px 20px 12px !important; }
body.hub-personalized[data-hub-theme="mosaic"] .view > .card:nth-of-type(3n),
body.hub-personalized[data-hub-theme="mosaic"] .subview > .card:nth-of-type(3n) { border-radius: 20px 20px 9px 24px !important; }

/* Section surface colour is useful again, but only as context. */
body.hub-personalized[data-hub-theme="mosaic"] #view-tasks .tasks-command-card,
body.hub-personalized[data-hub-theme="mosaic"] #view-tasks .tasks-open-shell { background:linear-gradient(135deg,#eeebff,#fff) !important; }
body.hub-personalized[data-hub-theme="mosaic"] #view-schedule .chores-command-card,
body.hub-personalized[data-hub-theme="mosaic"] #view-schedule .chores-preview-card { background:linear-gradient(135deg,#ffe8e4,#fff) !important; }
body.hub-personalized[data-hub-theme="mosaic"] #view-meals .meals-planner-card { background:linear-gradient(135deg,#fff2c4,#fff) !important; }
body.hub-personalized[data-hub-theme="mosaic"] #view-budget .budget-refresh-hero,
body.hub-personalized[data-hub-theme="mosaic"] #view-budget .budget-goals-summary { background:linear-gradient(135deg,#dff7f4,#fff) !important; }
body.hub-personalized[data-hub-theme="mosaic"] #view-purge .purge-refresh-hero,
body.hub-personalized[data-hub-theme="mosaic"] #view-purge .purge-lineup-surface { background:linear-gradient(135deg,#ece8ff,#fff) !important; }

/* ---------- Tasks: cards behave like a visual runway ---------- */
body.hub-personalized[data-hub-theme="mosaic"] #tasks-list {
  display: grid !important;
  gap: 7px !important;
}
body.hub-personalized[data-hub-theme="mosaic"] #tasks-list > .task-row,
body.hub-personalized[data-hub-theme="mosaic"] #tasks-list > .product-lineup-row {
  position: relative;
  min-height: 52px;
  padding: 9px 36px 9px 13px;
}
body.hub-personalized[data-hub-theme="mosaic"] #tasks-list > :nth-child(4n+1) { border-radius:18px 7px 18px 18px !important; }
body.hub-personalized[data-hub-theme="mosaic"] #tasks-list > :nth-child(4n+2) { border-radius:8px 18px 18px 8px !important; margin-left:12px !important; }
body.hub-personalized[data-hub-theme="mosaic"] #tasks-list > :nth-child(4n+3) { border-radius:18px 18px 7px 18px !important; margin-right:8px !important; }
body.hub-personalized[data-hub-theme="mosaic"] #tasks-list > :nth-child(4n) { border-radius:13px 8px 20px 13px !important; margin-left:5px !important; }

/* ---------- Schedule: timeline, not table ---------- */
body.hub-personalized[data-hub-theme="mosaic"] #schedule-items-list,
body.hub-personalized[data-hub-theme="mosaic"] #chores-today-list {
  position: relative !important;
  padding-left: 13px !important;
}
body.hub-personalized[data-hub-theme="mosaic"] #schedule-items-list::before,
body.hub-personalized[data-hub-theme="mosaic"] #chores-today-list::before {
  content:"";
  position:absolute;
  left:4px;
  top:9px;
  bottom:9px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(#ff7a80,#ffd76a,#20b9c4);
}
body.hub-personalized[data-hub-theme="mosaic"] #schedule-items-list > .product-lineup-card,
body.hub-personalized[data-hub-theme="mosaic"] #chores-today-list > .chores-today-row {
  position:relative;
  margin-bottom:6px;
}
body.hub-personalized[data-hub-theme="mosaic"] #schedule-items-list > .product-lineup-card::before,
body.hub-personalized[data-hub-theme="mosaic"] #chores-today-list > .chores-today-row::before {
  content:"";
  position:absolute;
  left:-14px;
  top:50%;
  width:8px;
  height:8px;
  transform:translateY(-50%);
}

/* ---------- Meals: week becomes a visual board, library becomes browseable ---------- */
body.hub-personalized[data-hub-theme="mosaic"] #week-plan-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
body.hub-personalized[data-hub-theme="mosaic"] #week-plan-list > .product-lineup-card,
body.hub-personalized[data-hub-theme="mosaic"] #week-plan-list > .meal-card {
  min-width:0;
  margin:0;
  padding:9px;
}
body.hub-personalized[data-hub-theme="mosaic"] #week-plan-list > :nth-child(4n+1) { background:#fff2c8; border-radius:18px 8px 18px 18px; }
body.hub-personalized[data-hub-theme="mosaic"] #week-plan-list > :nth-child(4n+2) { background:#e3f8f4; border-radius:8px 18px 18px 8px; }
body.hub-personalized[data-hub-theme="mosaic"] #week-plan-list > :nth-child(4n+3) { background:#f0edff; border-radius:18px 18px 8px 18px; }
body.hub-personalized[data-hub-theme="mosaic"] #week-plan-list > :nth-child(4n) { background:#ffe7e7; border-radius:14px 8px 20px 14px; }
body.hub-personalized[data-hub-theme="mosaic"] #library-breakfast-list,
body.hub-personalized[data-hub-theme="mosaic"] #library-dinners-list,
body.hub-personalized[data-hub-theme="mosaic"] #library-snacks-list {
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(150px,72%) !important;
  gap:7px !important;
  overflow-x:auto !important;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  padding-bottom:5px !important;
  scrollbar-width:none;
}
body.hub-personalized[data-hub-theme="mosaic"] #library-breakfast-list::-webkit-scrollbar,
body.hub-personalized[data-hub-theme="mosaic"] #library-dinners-list::-webkit-scrollbar,
body.hub-personalized[data-hub-theme="mosaic"] #library-snacks-list::-webkit-scrollbar { display:none; }
body.hub-personalized[data-hub-theme="mosaic"] #library-breakfast-list > *,
body.hub-personalized[data-hub-theme="mosaic"] #library-dinners-list > *,
body.hub-personalized[data-hub-theme="mosaic"] #library-snacks-list > * {
  scroll-snap-align:start;
  min-width:0 !important;
  background:#fff !important;
  border:1px solid rgba(46,45,75,.07) !important;
  border-radius:18px 9px 18px 18px !important;
}

/* Grocery becomes tactile checklist strips. */
body.hub-personalized[data-hub-theme="mosaic"] #grocery-list .grocery-row,
body.hub-personalized[data-hub-theme="mosaic"] #grocery-list .product-grocery-row {
  min-height:42px;
  margin-bottom:4px;
}

/* ---------- Budget: dashboard mosaic instead of repeated financial tables ---------- */
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-this-year,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-insights,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-planner,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-savings-goals {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-this-year::before,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-this-year::after,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-insights::before,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-insights::after,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-planner::before,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-planner::after,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-savings-goals::before,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-savings-goals::after {
  grid-column:1/-1;
}
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-this-year > .card:first-of-type,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-insights > .card:first-of-type,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-planner > .subview,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-savings-goals > .budget-goals-runway-shell,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-savings-goals > .card:first-of-type {
  grid-column:1/-1 !important;
}
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-this-year > .card,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-insights > .card,
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-savings-goals > .card {
  min-width:0 !important;
  margin:0 !important;
  padding:11px !important;
}
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-insights > .card:nth-of-type(2) { background:#e5f8f4 !important; }
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-insights > .card:nth-of-type(3) { background:#ffe8e6 !important; }
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-insights > .card:nth-of-type(4) { background:#eeeaff !important; grid-column:1/-1 !important; }
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-insights > .card:nth-of-type(5) { background:#fff2c6 !important; }
body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-insights > .card:nth-of-type(6) { background:#e3f5dd !important; }

body.hub-personalized[data-hub-theme="mosaic"] #planner-view-overview,
body.hub-personalized[data-hub-theme="mosaic"] #planner-view-food,
body.hub-personalized[data-hub-theme="mosaic"] #planner-view-lines {
  grid-column:1/-1 !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:0 !important;
}
body.hub-personalized[data-hub-theme="mosaic"] #planner-view-overview > .card:first-of-type,
body.hub-personalized[data-hub-theme="mosaic"] #planner-view-overview > .planner-bottomline-card,
body.hub-personalized[data-hub-theme="mosaic"] #planner-view-food > .card:first-of-type,
body.hub-personalized[data-hub-theme="mosaic"] #planner-view-lines > .card:first-of-type {
  grid-column:1/-1 !important;
}
body.hub-personalized[data-hub-theme="mosaic"] #planner-category-bars .gauge-track,
body.hub-personalized[data-hub-theme="mosaic"] #budget-insights-trend .gauge-track {
  height:9px;
  overflow:hidden;
}

/* ---------- Purge: zones as progress cards ---------- */
body.hub-personalized[data-hub-theme="mosaic"] #purge-zones-list {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:7px !important;
}
body.hub-personalized[data-hub-theme="mosaic"] #purge-zones-list > .product-zone-row,
body.hub-personalized[data-hub-theme="mosaic"] #purge-zones-list > .zone-row {
  min-width:0 !important;
  min-height:74px !important;
  padding:10px !important;
  margin:0 !important;
  background:#fff !important;
  border:0 !important;
  box-shadow:0 5px 15px rgba(58,52,96,.045) !important;
}
body.hub-personalized[data-hub-theme="mosaic"] #purge-zones-list > :nth-child(3n+1) { background:#efecff !important; border-radius:20px 8px 20px 20px !important; }
body.hub-personalized[data-hub-theme="mosaic"] #purge-zones-list > :nth-child(3n+2) { background:#e2f7f2 !important; border-radius:8px 20px 20px 8px !important; }
body.hub-personalized[data-hub-theme="mosaic"] #purge-zones-list > :nth-child(3n) { grid-column:1/-1; background:#fff0c7 !important; border-radius:18px 18px 8px 20px !important; }

/* ---------- Controls and variable pills ---------- */
body.hub-personalized[data-hub-theme="mosaic"] .filter-bar,
body.hub-personalized[data-hub-theme="mosaic"] .subtabbar {
  display:flex;
  gap:5px;
  overflow-x:auto;
  padding:3px;
  scrollbar-width:none;
}
body.hub-personalized[data-hub-theme="mosaic"] .filter-bar::-webkit-scrollbar,
body.hub-personalized[data-hub-theme="mosaic"] .subtabbar::-webkit-scrollbar { display:none; }
body.hub-personalized[data-hub-theme="mosaic"] .filter-chip,
body.hub-personalized[data-hub-theme="mosaic"] .subtab-btn,
body.hub-personalized[data-hub-theme="mosaic"] .owner-check-label,
body.hub-personalized[data-hub-theme="mosaic"] .pill {
  flex:0 0 auto;
  border:0 !important;
  background:#fff !important;
  color:#5f5e70 !important;
  box-shadow:0 4px 11px rgba(53,48,86,.04) !important;
  font-weight:900 !important;
}
body.hub-personalized[data-hub-theme="mosaic"] .filter-chip:nth-child(4n+1),
body.hub-personalized[data-hub-theme="mosaic"] .subtab-btn:nth-child(4n+1) { padding:7px 16px !important; border-radius:17px 8px 17px 17px !important; }
body.hub-personalized[data-hub-theme="mosaic"] .filter-chip:nth-child(4n+2),
body.hub-personalized[data-hub-theme="mosaic"] .subtab-btn:nth-child(4n+2) { padding:6px 11px !important; border-radius:8px 17px 17px 8px !important; }
body.hub-personalized[data-hub-theme="mosaic"] .filter-chip:nth-child(4n+3),
body.hub-personalized[data-hub-theme="mosaic"] .subtab-btn:nth-child(4n+3) { padding:7px 13px !important; border-radius:16px 16px 7px 16px !important; }
body.hub-personalized[data-hub-theme="mosaic"] .filter-chip.active,
body.hub-personalized[data-hub-theme="mosaic"] .subtab-btn.active {
  background:var(--mosaic-indigo) !important;
  color:#fff !important;
  transform:scale(1.04) !important;
  box-shadow:0 7px 16px rgba(46,49,110,.18) !important;
}
body.hub-personalized[data-hub-theme="mosaic"] .btn.btn-primary {
  /* The light end of this gradient sat at 4.15:1 against the white
     label - the whole button failed AA at its brightest point, which is
     also where the text is easiest to lose. Pulling that stop to #6a58dd
     keeps the violet-to-violet lift and clears 5.18:1. */
  background:linear-gradient(135deg,#6255dc,#6a58dd) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 7px 17px rgba(92,78,207,.18) !important;
  border-radius:14px 7px 14px 14px !important;
  transition:transform .16s ease !important;
}
body.hub-personalized[data-hub-theme="mosaic"] .btn.btn-primary:active { transform:scale(.97) !important; }
body.hub-personalized[data-hub-theme="mosaic"] input,
body.hub-personalized[data-hub-theme="mosaic"] select,
body.hub-personalized[data-hub-theme="mosaic"] textarea {
  background:#fff !important;
  border:1px solid rgba(54,50,84,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5) !important;
}

/* ---------- Bottom navigation becomes a dynamic dock ---------- */
body.hub-personalized[data-hub-theme="mosaic"] .tabbar {
  left:12px;
  right:12px;
  bottom:calc(9px + env(safe-area-inset-bottom));
  width:auto;
  max-width:736px;
  margin-inline:auto;
  padding:6px;
  gap:2px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(49,45,78,.08);
  border-radius:22px 22px 13px 22px;
  box-shadow:0 14px 35px rgba(48,42,80,.16);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
body.hub-personalized[data-hub-theme="mosaic"] .tab-btn {
  min-width:0 !important;
  color:#8b8999 !important;
  border-radius:14px !important;
  transition:flex .22s ease, background .22s ease, transform .18s ease !important;
}
body.hub-personalized[data-hub-theme="mosaic"] .tab-btn.active {
  background:#2f316e !important;
  color:#fff !important;
  transform:translateY(-2px) !important;
  box-shadow:0 7px 14px rgba(47,49,110,.20) !important;
}
body.hub-personalized[data-hub-theme="mosaic"] .tab-btn:nth-child(2).active { background:#6657e8 !important; }
body.hub-personalized[data-hub-theme="mosaic"] .tab-btn:nth-child(3).active { background:#ef6d72 !important; }
body.hub-personalized[data-hub-theme="mosaic"] .tab-btn:nth-child(4).active { background:#bc8d1d !important; }
body.hub-personalized[data-hub-theme="mosaic"] .tab-btn:nth-child(5).active { background:#188f83 !important; }
body.hub-personalized[data-hub-theme="mosaic"] .tab-btn:nth-child(6).active { background:#735fc1 !important; }

/* ---------- Mosaic Settings preview ---------- */
.personal-theme-mosaic .personal-theme-preview {
  background:
    radial-gradient(circle at 12% 8%,rgba(102,87,232,.27),transparent 27%),
    linear-gradient(145deg,#f4f2ff,#fff5e8);
}
.personal-theme-mosaic .personal-preview-top {
  width:42px !important;
  height:8px !important;
  background:#2f316e !important;
  border-radius:7px 3px 7px 7px !important;
}
.personal-theme-mosaic .personal-preview-shape {
  width:32px !important;
  height:32px !important;
  background:#ff817f !important;
  border-radius:35% 65% 55% 45% !important;
  transform:rotate(18deg);
}
.personal-theme-mosaic .personal-preview-row-a {
  left:7px !important;
  right:39% !important;
  height:13px !important;
  background:#ece8ff !important;
  border-radius:8px 3px 8px 8px !important;
}
.personal-theme-mosaic .personal-preview-row-b {
  left:45% !important;
  right:7px !important;
  height:18px !important;
  background:#fff0b8 !important;
  border-radius:4px 9px 9px 4px !important;
}
.personal-theme-mosaic .personal-preview-nav { background:#2f316e !important; border-radius:8px 8px 3px 8px !important; left:5px !important; right:5px !important; bottom:3px !important; }

/* Settings follows the more expressive Mosaic language. */
body[data-hub-theme="mosaic"] .settings-panel.settings-experience-upgraded {
  background:
    radial-gradient(circle at 100% 0%,rgba(255,110,115,.10),transparent 26%),
    #f5f4ff !important;
}
body[data-hub-theme="mosaic"] .settings-panel.settings-experience-upgraded .settings-section-card {
  border:0 !important;
  box-shadow:0 8px 22px rgba(56,50,92,.06) !important;
}
body[data-hub-theme="mosaic"] .settings-panel.settings-experience-upgraded .settings-section-card:nth-of-type(3n+1) { border-radius:23px 10px 23px 23px !important; }
body[data-hub-theme="mosaic"] .settings-panel.settings-experience-upgraded .settings-section-card:nth-of-type(3n+2) { border-radius:11px 23px 20px 11px !important; }
body[data-hub-theme="mosaic"] .settings-panel.settings-experience-upgraded .settings-section-card:nth-of-type(3n) { border-radius:20px 20px 9px 23px !important; }

@media (min-width:620px) {
  body.hub-personalized[data-hub-theme="mosaic"] #week-plan-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body.hub-personalized[data-hub-theme="mosaic"] #purge-zones-list { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  body.hub-personalized[data-hub-theme="mosaic"] #purge-zones-list > :nth-child(3n) { grid-column:auto !important; }
}

@media (max-width:390px) {
  body.hub-personalized[data-hub-theme="mosaic"] #app { padding-inline:9px !important; }
  body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-this-year,
  body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-insights,
  body.hub-personalized[data-hub-theme="mosaic"] #budget-subview-savings-goals,
  body.hub-personalized[data-hub-theme="mosaic"] #planner-view-overview,
  body.hub-personalized[data-hub-theme="mosaic"] #planner-view-food,
  body.hub-personalized[data-hub-theme="mosaic"] #planner-view-lines { gap:6px !important; }
  body.hub-personalized[data-hub-theme="mosaic"] .mosaic-live-strip { grid-template-columns:1.15fr .85fr .9fr !important; gap:5px !important; }
  body.hub-personalized[data-hub-theme="mosaic"] .mosaic-live-chip { padding:8px !important; }
}

@media (prefers-reduced-motion:reduce) {
  body.hub-personalized[data-hub-theme="mosaic"] .view,
  body.hub-personalized[data-hub-theme="mosaic"] .view-header::before,
  body.hub-personalized[data-hub-theme="mosaic"] #view-dashboard .dashboard-hero::before {
    animation:none;
  }
  body.hub-personalized[data-hub-theme="mosaic"] * {
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* ====================================================================
   was theme-cleanup-refresh.css
   ==================================================================== */

/* Final theme refinements for Gallery and Notebook.
   Loaded after the responsive layer so theme identity remains consistent
   across phone, tablet and desktop layouts. */

/* ============================================================
   GALLERY — strict monochrome
   ============================================================ */
body.hub-personalized[data-hub-theme="gallery"] {
  --hub-page: #ffffff;
  --hub-surface: #ffffff;
  --hub-surface-alt: #ffffff;
  --hub-surface-soft: #fafafa;
  --hub-row: #ffffff;
  --hub-border: #e7e7e7;
  --hub-shape: transparent;
  --hub-shadow: none;
  --hub-accent: #111111;
  --hub-accent-ink: #111111;
  --hub-accent-2: #5f5f5f;
  --hub-text: #111111;
  --hub-muted: #6e6e6e;
  --hub-tab: rgba(255,255,255,.98);
  --hub-input: #ffffff;
  --brand-color: #111111;
  --teal: #111111;
  --green: #111111;
  --lime: #111111;
  --lime-light: #f3f3f3;
  --amber: #555555;
  --amber-light: #e8e8e8;
  --purple: #555555;
  --coral: #333333;
  --red: #111111;
  --sage: #555555;
  --sage-soft: #f5f5f5;
  --lavender: #666666;
  --lavender-soft: #f4f4f4;
  --gold: #555555;
  --coral-soft: #f5f5f5;
  --teal-soft: #f5f5f5;

  /* Gallery had no display face of its own, so its big headings still
     rendered in Luckiest Guy - a soft cartoon face inside a theme whose
     entire point is minimal and architectural. A plain grotesque at the
     same near-black as the body type is the honest version of it. */
  --hub-display-font: "Poppins", system-ui, sans-serif;
  --hub-display-ink: #111111;
  --hub-daylabel-ink: #555555;

  background: #ffffff !important;
  background-image: none !important;
}

body.hub-personalized[data-hub-theme="gallery"] #app,
body.hub-personalized[data-hub-theme="gallery"] .view,
body.hub-personalized[data-hub-theme="gallery"] .settings-panel {
  color: #111111 !important;
}

body.hub-personalized[data-hub-theme="gallery"] :is(
  .notifications-note,
  .task-meta,
  .meal-tag,
  .product-row-brief,
  .chores-today-owner,
  .budget-refresh-month-note,
  .gauge-sub,
  .gauge-label,
  .view-header-sub,
  .dashboard-hero-sub
) {
  color: #6e6e6e;
}

body.hub-personalized[data-hub-theme="gallery"] :is(
  .filter-chip,
  .subtab-btn,
  .pill,
  .owner-check-label,
  .swap-toggle-btn,
  .section-collapse-btn,
  .product-chevron,
  .settings-gear-btn,
  .settings-close-btn
) {
  background: #ffffff !important;
  border-color: #d9d9d9 !important;
  color: #555555 !important;
  box-shadow: none !important;
}

body.hub-personalized[data-hub-theme="gallery"] :is(
  .filter-chip.active,
  .subtab-btn.active,
  .personal-segmented-btn.is-selected
) {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.hub-personalized[data-hub-theme="gallery"] .tab-btn {
  /* #7a7a7a on this theme's white ground is 4.29:1, under the 4.5:1 AA
     floor, on the row that moves between the five Hub screens and the
     four Budget ones. #6a6a6a is 5.41:1 and still reads as the quiet
     half of the pair against the #111111 active tab. */
  color: #6a6a6a !important;
}
body.hub-personalized[data-hub-theme="gallery"] .tab-btn.active {
  color: #111111 !important;
  background: transparent !important;
  text-shadow: none !important;
}
body.hub-personalized[data-hub-theme="gallery"] .tab-btn.active .tab-icon {
  background: #f2f2f2 !important;
  color: #111111 !important;
}

body.hub-personalized[data-hub-theme="gallery"] .btn.btn-primary,
body.hub-personalized[data-hub-theme="gallery"] .settings-logout-btn {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.hub-personalized[data-hub-theme="gallery"] :is(
  .owner-pill,
  .family-avatar,
  .eater-badge,
  .mod-person,
  .kid-column
) {
  --accent: #111111 !important;
}

body.hub-personalized[data-hub-theme="gallery"] :is(svg, img) {
  filter: grayscale(1) !important;
}
body.hub-personalized[data-hub-theme="gallery"] .personal-theme-preview,
body.hub-personalized[data-hub-theme="gallery"] .personal-theme-preview :is(svg,img) {
  filter: none !important;
}
body.hub-personalized[data-hub-theme="gallery"] input,
body.hub-personalized[data-hub-theme="gallery"] select,
body.hub-personalized[data-hub-theme="gallery"] textarea {
  accent-color: #111111 !important;
}

body[data-hub-theme="gallery"] .settings-panel.settings-experience-upgraded .settings-section-card::before,
body[data-hub-theme="gallery"] .settings-panel.settings-experience-upgraded .settings-section-calendar::before {
  background: #111111 !important;
}
body[data-hub-theme="gallery"] .settings-panel.settings-experience-upgraded .settings-section-calendar,
body[data-hub-theme="gallery"] .settings-panel.settings-experience-upgraded .settings-section-account {
  background: #fafafa !important;
}

/* ============================================================
   NOTEBOOK — light neutral paper, restrained ruled lines
   ============================================================ */
body.hub-personalized[data-hub-theme="notebook"] {
  --hub-page: #f7f5ef;
  --hub-surface: rgba(255,254,250,.96);
  --hub-surface-alt: rgba(255,254,250,.92);
  --hub-row: #fffefa;
  --hub-border: #dedbd3;
  --hub-shape: transparent;
  --hub-shadow: 0 1px 0 rgba(25,25,25,.04);
  --hub-accent: #30302e;
  --hub-accent-ink: #30302e;
  --hub-accent-2: #6b6b67;
  --hub-text: #2d2d2b;
  --hub-muted: #65635e;
  --hub-tab: rgba(255,254,250,.97);
  --hub-input: #fffefa;
  --brand-color: #30302e;
  --teal: #30302e;
  --green: #4f4f4c;
  --lime: #4f4f4c;
  --lime-light: #f1f0eb;
  --amber: #666561;
  --amber-light: #ecebe6;
  --purple: #666561;
  --coral: #555552;
  --red: #30302e;
  --sage: #666561;
  --sage-soft: #f1f0eb;
  --lavender: #666561;
  --lavender-soft: #f1f0eb;
  --gold: #666561;
  --coral-soft: #f1f0eb;
  --teal-soft: #f1f0eb;

  /* Notebook already sets Playfair on a hand-listed set of headings;
     naming it here means the ones that list misses follow it too rather
     than dropping back to Luckiest Guy. */
  --hub-display-font: "Playfair Display", Georgia, serif;
  --hub-display-ink: #2d2d2b;
  --hub-daylabel-ink: #666561;

  background-color: #f7f5ef !important;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 27px,
    rgba(45,45,43,.055) 27px,
    rgba(45,45,43,.055) 28px
  ) !important;
  background-attachment: fixed !important;
}

/* Larger surfaces carry a faint continuation of the notebook ruling.
   It is deliberately subtle so text remains the dominant visual layer. */

body.hub-personalized[data-hub-theme="notebook"] :is(
  .notifications-note,
  .task-meta,
  .meal-tag,
  .product-row-brief,
  .chores-today-owner,
  .budget-refresh-month-note,
  .gauge-sub,
  .gauge-label,
  .view-header-sub,
  .dashboard-hero-sub
) {
  color: #65635e;
}

body.hub-personalized[data-hub-theme="notebook"] .tabbar {
  background: rgba(255,254,250,.97);
  border-top: 1px solid #d7d4cc;
  box-shadow: none;
}
body.hub-personalized[data-hub-theme="notebook"] .tab-btn {
  color: #74726c !important;
}
body.hub-personalized[data-hub-theme="notebook"] .tab-btn.active {
  color: #2d2d2b !important;
  background: transparent !important;
  text-decoration-color: #2d2d2b !important;
}

body.hub-personalized[data-hub-theme="notebook"] :is(
  .filter-chip,
  .subtab-btn,
  .swap-toggle-btn,
  .pill,
  .owner-check-label,
  .section-collapse-btn,
  .product-chevron,
  .settings-gear-btn,
  .settings-close-btn
) {
  background: rgba(255,254,250,.90) !important;
  border-color: #d8d5cd !important;
  color: #5d5c57 !important;
  box-shadow: none !important;
}
body.hub-personalized[data-hub-theme="notebook"] :is(
  .filter-chip.active,
  .subtab-btn.active,
  .personal-segmented-btn.is-selected
) {
  background: #30302e !important;
  border-color: #30302e !important;
  color: #fffefa !important;
  box-shadow: none !important;
}

body.hub-personalized[data-hub-theme="notebook"] .btn.btn-primary {
  background: #30302e !important;
  border-color: #30302e !important;
  color: #fffefa !important;
  box-shadow: none !important;
}

body.hub-personalized[data-hub-theme="notebook"] :is(
  .owner-pill,
  .family-avatar,
  .eater-badge,
  .mod-person,
  .kid-column
) {
  --accent: #555552 !important;
}
body.hub-personalized[data-hub-theme="notebook"] input,
body.hub-personalized[data-hub-theme="notebook"] select,
body.hub-personalized[data-hub-theme="notebook"] textarea {
  accent-color: #30302e !important;
}

body[data-hub-theme="notebook"] .settings-panel.settings-experience-upgraded,
body[data-hub-theme="notebook"] .settings-panel.settings-experience-upgraded > .settings-panel-header {
  background-color: #f7f5ef !important;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 27px,
    rgba(45,45,43,.045) 27px,
    rgba(45,45,43,.045) 28px
  ) !important;
}
body[data-hub-theme="notebook"] .settings-panel.settings-experience-upgraded .settings-section-card {
  background: rgba(255,254,250,.96) !important;
  border-color: #dedbd3 !important;
  box-shadow: none !important;
}
body[data-hub-theme="notebook"] .settings-panel.settings-experience-upgraded .settings-section-card::before,
body[data-hub-theme="notebook"] .settings-panel.settings-experience-upgraded .settings-section-calendar::before {
  background: #30302e !important;
  opacity: .55 !important;
}

/* Updated theme previews. */
.personal-theme-gallery .personal-theme-preview {
  background: #ffffff !important;
  border-color: #d8d8d8 !important;
}
.personal-theme-gallery .personal-preview-top,
.personal-theme-gallery .personal-preview-nav {
  background: #111111 !important;
}
.personal-theme-gallery .personal-preview-row {
  background: #ffffff !important;
  border-color: #d8d8d8 !important;
}
.personal-theme-gallery .personal-preview-shape { display: none !important; }

.personal-theme-notebook .personal-theme-preview {
  background: repeating-linear-gradient(
    to bottom,
    #faf9f5 0,
    #faf9f5 11px,
    #e7e6e1 12px
  ) !important;
  border-color: #d8d5cd !important;
}
.personal-theme-notebook .personal-preview-top {
  background: #30302e !important;
  border-radius: 0 !important;
}
.personal-theme-notebook .personal-preview-shape { display: none !important; }
.personal-theme-notebook .personal-preview-row {
  background: rgba(255,254,250,.94) !important;
  border-bottom: 1px solid #d8d5cd !important;
  border-radius: 0 !important;
}
.personal-theme-notebook .personal-preview-nav {
  background: #f1f0eb !important;
  border-top: 1px solid #d8d5cd !important;
}

/* ====================================================================
   was theme-hard-neutral-refresh.css
   ==================================================================== */

/* Hard final-layer neutralization for Gallery + Notebook.
   This intentionally overrides module-local palettes defined by Tasks, Meals,
   Chores, Budget and Purge so theme choice always wins. */

/* ============================================================
   SHARED NEUTRAL THEME HOOKS
   ============================================================ */
body.hub-personalized[data-hub-theme="gallery"],
body.hub-personalized[data-hub-theme="notebook"] {
  --theme-neutral-ink: #171717;
  --theme-neutral-muted: #6c6c69;
  --theme-neutral-line: #deded9;
  --theme-neutral-soft: #f4f4f1;
}

body.hub-personalized[data-hub-theme="gallery"] #view-tasks,
body.hub-personalized[data-hub-theme="notebook"] #view-tasks {
  --task-ink: var(--theme-neutral-ink);
  --task-muted: var(--theme-neutral-muted);
}

body.hub-personalized[data-hub-theme="gallery"] #view-meals,
body.hub-personalized[data-hub-theme="notebook"] #view-meals {
  --meal-green: #333333;
  --meal-green-soft: var(--theme-neutral-soft);
  --meal-blue: #555555;
}

body.hub-personalized[data-hub-theme="gallery"] #view-budget,
body.hub-personalized[data-hub-theme="notebook"] #view-budget {
  --budget-ink: var(--theme-neutral-ink);
  --budget-muted: var(--theme-neutral-muted);
  --budget-line: rgba(30,30,30,.12);
}

body.hub-personalized[data-hub-theme="gallery"] #view-purge,
body.hub-personalized[data-hub-theme="notebook"] #view-purge {
  --purge-ink: var(--theme-neutral-ink);
  --purge-muted: var(--theme-neutral-muted);
  --purge-warm: #4a4a4a;
  --purge-sage: #333333;
  --purge-teal: #444444;
  --purge-teal-soft: var(--theme-neutral-soft);
}

body.hub-personalized[data-hub-theme="gallery"] #view-schedule,
body.hub-personalized[data-hub-theme="notebook"] #view-schedule {
  --chores-lilac: var(--theme-neutral-soft);
  --chores-lilac-strong: #444444;
  --chores-gold-soft: var(--theme-neutral-soft);
}

/* ============================================================
   GALLERY — no chromatic colour anywhere in the application surface
   ============================================================ */
body.hub-personalized[data-hub-theme="gallery"] {
  --theme-neutral-soft: #f5f5f5;
  --theme-neutral-line: #dedede;
  --theme-neutral-ink: #111111;
  --theme-neutral-muted: #6e6e6e;
  --brand-color: #111111;
  background: #ffffff !important;
  background-image: none !important;
}

body.hub-personalized[data-hub-theme="gallery"] #scripture-banner {
  background: #ffffff !important;
  background-image: none !important;
  color: #444444 !important;
  border-color: #e5e5e5 !important;
}
body.hub-personalized[data-hub-theme="gallery"] #scripture-banner * {
  color: inherit !important;
}

/* Kill gradients and module decorative fills before applying deliberate neutrals. */

/* Tasks */
body.hub-personalized[data-hub-theme="gallery"] #view-tasks .tasks-week-track span {
  background: #111111 !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-tasks :is(.pill,.priority-tag) {
  background: #ffffff !important;
  border: 1px solid #d8d8d8 !important;
  color: #444444 !important;
}

/* Chores / Schedule */
body.hub-personalized[data-hub-theme="gallery"] #view-schedule .schedule-preview-day.is-today {
  background: #f6f6f6 !important;
  border-color: #222222 !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-schedule :is(.view-header-icon,.chores-command-eyebrow,.chores-today-time,.schedule-preview-weekday) {
  color: #222222;
}

/* Meals */
body.hub-personalized[data-hub-theme="gallery"] #view-meals .meals-refresh-summary {
  background: #ffffff;
  color: #111111;
  border: 1px solid #dedede;
}
body.hub-personalized[data-hub-theme="gallery"] #view-meals :is(.meals-completion-pct,.meals-summary-title,.meals-summary-eyebrow) {
  color: #111111 !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-meals .day-plan-card.meals-day-today {
  border-color: #111111;
}
body.hub-personalized[data-hub-theme="gallery"] #view-meals .day-plan-card.meals-day-complete {
  border-color: #d8d8d8;
}
body.hub-personalized[data-hub-theme="gallery"] #view-meals .meals-day-progress,
body.hub-personalized[data-hub-theme="gallery"] #view-meals .meals-day-complete .meals-day-progress {
  background: #ffffff !important;
  color: #333333 !important;
  border-color: #cfcfcf !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-meals #meal-auto-fill-btn {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}

/* Budget */
body.hub-personalized[data-hub-theme="gallery"] #view-budget .budget-refresh-balance-value {
  color: #111111 !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-budget .budget-refresh-spend-track {
  background: #ededed !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-budget .budget-refresh-spend-fill,
body.hub-personalized[data-hub-theme="gallery"] #view-budget .budget-refresh-spend-fill.is-over {
  background: #111111 !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-budget :is(.budget-refresh-eyebrow,.view-header-icon) {
  color: #222222;
}

/* Purge */
body.hub-personalized[data-hub-theme="gallery"] #view-purge .purge-progress-ring {
  background: conic-gradient(#111111 var(--purge-progress), #e8e8e8 0deg) !important;
  box-shadow: inset 0 0 0 1px #dedede !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-purge .purge-progress-ring::after {
  background: #ffffff !important;
  box-shadow: none !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-purge .purge-upnext-refresh,
body.hub-personalized[data-hub-theme="gallery"] #view-purge .purge-session-refresh,
body.hub-personalized[data-hub-theme="gallery"] #view-purge .purge-session-refresh.target-hit {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #e1e1e1 !important;
  box-shadow: none !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-purge .purge-upnext-refresh :is(.section-title,.grocery-item-name,.grocery-item-amount) {
  color: #111111 !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-purge .purge-upnext-kicker {
  color: #666666 !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-purge .purge-session-refresh #purge-log-session,
body.hub-personalized[data-hub-theme="gallery"] #view-purge .purge-session-refresh #purge-session-bar {
  background: #111111 !important;
  color: #ffffff !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-purge #purge-dest-legend .pill {
  background: #ffffff !important;
  color: #222222 !important;
  border-color: #dedede !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-purge .zone-row,
body.hub-personalized[data-hub-theme="gallery"] #view-purge .zone-row.purge-stage-done {
  background: #ffffff !important;
  border-color: #e1e1e1 !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-purge .zone-row::before {
  background: #ededed !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-purge .zone-row::after,
body.hub-personalized[data-hub-theme="gallery"] #view-purge .zone-row.purge-stage-sorting::after,
body.hub-personalized[data-hub-theme="gallery"] #view-purge .zone-row.purge-stage-boxed::after,
body.hub-personalized[data-hub-theme="gallery"] #view-purge .zone-row.purge-stage-done::after {
  background: #111111 !important;
}

/* Dashboard + generic semantic states. */
body.hub-personalized[data-hub-theme="gallery"] #app :is(
  .status-pill,.priority-tag,.eater-badge,.owner-pill,.pill
) {
  background-color: #ffffff !important;
  color: #333333 !important;
}
body.hub-personalized[data-hub-theme="gallery"] #app :is(svg,img) {
  filter: grayscale(1) saturate(0) !important;
}
body.hub-personalized[data-hub-theme="gallery"] #app input,
body.hub-personalized[data-hub-theme="gallery"] #app select,
body.hub-personalized[data-hub-theme="gallery"] #app textarea {
  accent-color: #111111 !important;
}

/* ============================================================
   NOTEBOOK — very light paper + graphite only
   ============================================================ */
body.hub-personalized[data-hub-theme="notebook"] {
  --theme-neutral-soft: #f3f2ed;
  --theme-neutral-line: #dcdbd4;
  --theme-neutral-ink: #2d2d2b;
  --theme-neutral-muted: #65635e;
  --hub-page: #faf9f5;
  --hub-surface: rgba(255,255,252,.96);
  --hub-surface-alt: rgba(255,255,252,.94);
  --hub-row: #fffefb;
  --hub-border: #deddd6;
  --hub-accent: #30302e;
  --hub-accent-ink: #30302e;
  --hub-accent-2: #686863;
  --hub-text: #2d2d2b;
  --hub-muted: #65635e;
  --brand-color: #30302e;
  background-color: #faf9f5 !important;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    rgba(45,45,43,.055) 31px,
    rgba(45,45,43,.055) 32px
  ) !important;
  background-attachment: fixed !important;
}

body.hub-personalized[data-hub-theme="notebook"] #scripture-banner {
  background: rgba(255,255,252,.94) !important;
  background-image: none !important;
  color: #555550 !important;
  border-color: #deddd6 !important;
}
body.hub-personalized[data-hub-theme="notebook"] #scripture-banner * {
  color: inherit !important;
}

/* No decorative blobs or artwork-like pseudo shapes. */

/* Cards stay mostly clean paper; the ruled page remains visible around them. */

/* Tasks */
body.hub-personalized[data-hub-theme="notebook"] #view-tasks .tasks-week-track span {
  background: #3a3a37 !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-tasks :is(.pill,.priority-tag) {
  background: #fffefb !important;
  border-color: #d8d7d0 !important;
  color: #4b4b47 !important;
}

/* Chores */
body.hub-personalized[data-hub-theme="notebook"] #view-schedule .schedule-preview-day.is-today {
  background: #f2f1ec !important;
  border-color: #555550 !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-schedule :is(.view-header-icon,.chores-command-eyebrow,.chores-today-time,.schedule-preview-weekday) {
  color: #464642;
}

/* Meals */
body.hub-personalized[data-hub-theme="notebook"] #view-meals .meals-refresh-summary {
  background: rgba(255,255,252,.96);
  color: #2d2d2b;
  border: 1px solid #deddd6;
}
body.hub-personalized[data-hub-theme="notebook"] #view-meals :is(.meals-completion-pct,.meals-summary-title,.meals-summary-eyebrow) {
  color: #2d2d2b !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-meals .day-plan-card.meals-day-today {
  border-color: #454542;
}
body.hub-personalized[data-hub-theme="notebook"] #view-meals .day-plan-card.meals-day-complete {
  border-color: #d4d3cc;
}
body.hub-personalized[data-hub-theme="notebook"] #view-meals .meals-day-progress,
body.hub-personalized[data-hub-theme="notebook"] #view-meals .meals-day-complete .meals-day-progress {
  background: #fffefb !important;
  color: #4a4a46 !important;
  border-color: #d3d2cb !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-meals #meal-auto-fill-btn {
  background: #333330 !important;
  color: #ffffff !important;
  border-color: #333330 !important;
}

/* Budget */
body.hub-personalized[data-hub-theme="notebook"] #view-budget .budget-refresh-balance-value {
  color: #2d2d2b !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-budget .budget-refresh-spend-track {
  background: #e9e8e2 !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-budget .budget-refresh-spend-fill,
body.hub-personalized[data-hub-theme="notebook"] #view-budget .budget-refresh-spend-fill.is-over {
  background: #3b3b38 !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-budget :is(.budget-refresh-eyebrow,.view-header-icon) {
  color: #444440;
}

/* Purge */
body.hub-personalized[data-hub-theme="notebook"] #view-purge .purge-progress-ring {
  background: conic-gradient(#3b3b38 var(--purge-progress), #e7e6e0 0deg) !important;
  box-shadow: inset 0 0 0 1px #deddd6 !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-purge .purge-progress-ring::after {
  background: #fffefb !important;
  box-shadow: none !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-purge .purge-upnext-refresh,
body.hub-personalized[data-hub-theme="notebook"] #view-purge .purge-session-refresh,
body.hub-personalized[data-hub-theme="notebook"] #view-purge .purge-session-refresh.target-hit {
  background: #fffefb !important;
  color: #2d2d2b !important;
  border: 1px solid #deddd6 !important;
  box-shadow: none !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-purge .purge-upnext-refresh :is(.section-title,.grocery-item-name,.grocery-item-amount) {
  color: #2d2d2b !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-purge .purge-upnext-kicker {
  color: #73716c !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-purge .purge-session-refresh #purge-log-session,
body.hub-personalized[data-hub-theme="notebook"] #view-purge .purge-session-refresh #purge-session-bar {
  background: #333330 !important;
  color: #ffffff !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-purge #purge-dest-legend .pill {
  background: #fffefb !important;
  color: #454541 !important;
  border-color: #d9d8d1 !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-purge .zone-row,
body.hub-personalized[data-hub-theme="notebook"] #view-purge .zone-row.purge-stage-done {
  background: #fffefb !important;
  border-color: #deddd6 !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-purge .zone-row::before {
  background: #e9e8e2 !important;
}
body.hub-personalized[data-hub-theme="notebook"] #view-purge .zone-row::after,
body.hub-personalized[data-hub-theme="notebook"] #view-purge .zone-row.purge-stage-sorting::after,
body.hub-personalized[data-hub-theme="notebook"] #view-purge .zone-row.purge-stage-boxed::after,
body.hub-personalized[data-hub-theme="notebook"] #view-purge .zone-row.purge-stage-done::after {
  background: #3b3b38 !important;
}

/* Dashboard + generic pills/semantic states. */
body.hub-personalized[data-hub-theme="notebook"] #app :is(
  .status-pill,.priority-tag,.eater-badge,.owner-pill,.pill
) {
  background: #fffefb !important;
  background-image: none !important;
  color: #464642 !important;
  border-color: #d8d7d0 !important;
}
body.hub-personalized[data-hub-theme="notebook"] #app :is(svg,img) {
  filter: grayscale(1) saturate(0) !important;
}
body.hub-personalized[data-hub-theme="notebook"] #app input,
body.hub-personalized[data-hub-theme="notebook"] #app select,
body.hub-personalized[data-hub-theme="notebook"] #app textarea {
  accent-color: #333330 !important;
}

/* Settings + appearance previews should accurately show the final directions. */
body[data-hub-theme="gallery"] .settings-panel.settings-experience-upgraded :is(
  .settings-section-card,.settings-family-stack,.family-member-row,.checkbox-row,.personal-theme-option
) {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #e2e2e2 !important;
}
body[data-hub-theme="gallery"] .settings-panel.settings-experience-upgraded .settings-section-card::before {
  background: #111111 !important;
}
body[data-hub-theme="notebook"] .settings-panel.settings-experience-upgraded :is(
  .settings-section-card,.settings-family-stack,.family-member-row,.checkbox-row,.personal-theme-option
) {
  background: #fffefb !important;
  background-image: none !important;
  border-color: #deddd6 !important;
}
body[data-hub-theme="notebook"] .settings-panel.settings-experience-upgraded .settings-section-card::before {
  background: #4a4a46 !important;
}

.personal-theme-gallery .personal-theme-preview {
  background: #ffffff !important;
  background-image: none !important;
}
.personal-theme-gallery .personal-preview-top,
.personal-theme-gallery .personal-preview-nav {
  background: #111111 !important;
}
.personal-theme-gallery .personal-preview-row {
  background: #ffffff !important;
  border-color: #d8d8d8 !important;
}
.personal-theme-notebook .personal-theme-preview {
  background-color: #faf9f5 !important;
  background-image: repeating-linear-gradient(to bottom,#faf9f5 0,#faf9f5 11px,#deddd6 12px) !important;
  border-color: #d8d7d0 !important;
}
.personal-theme-notebook .personal-preview-top {
  background: #343431 !important;
}
.personal-theme-notebook .personal-preview-shape {
  display: none !important;
}
.personal-theme-notebook .personal-preview-row {
  background: rgba(255,255,252,.92) !important;
  border-color: #d8d7d0 !important;
}
.personal-theme-notebook .personal-preview-nav {
  background: #f2f1ec !important;
  border-color: #d8d7d0 !important;
}

/* ============================================================
   REMAINING COLOUR LEAKS
   Found by walking every tab in Gallery with a script that flags any
   computed colour, border or gradient with real chroma in it - including
   on ::before/::after, which is where most of these were hiding.
   ============================================================ */

/* Decorative accent bars across the top of cards. These are the loudest
   leak by far: a full rainbow gradient on an otherwise white page. */
body.hub-personalized[data-hub-theme="gallery"] .card::before,
body.hub-personalized[data-hub-theme="notebook"] .card::before,
body.hub-personalized[data-hub-theme="gallery"] .card::after,
body.hub-personalized[data-hub-theme="notebook"] .card::after,
body.hub-personalized[data-hub-theme="gallery"] .lineup-surface::before,
body.hub-personalized[data-hub-theme="notebook"] .lineup-surface::before {
  background-image: none !important;
  background-color: var(--theme-neutral-line) !important;
}

/* The dashboard momentum dial and its eyebrow label. */

/* Chores brain-dump card marker. */
body.hub-personalized[data-hub-theme="gallery"] .chores-brain-card::before,
body.hub-personalized[data-hub-theme="notebook"] .chores-brain-card::before {
  background-image: none !important;
  background-color: var(--theme-neutral-line) !important;
  color: var(--theme-neutral-ink) !important;
  border-color: var(--theme-neutral-line) !important;
}

/* Week/month label above the meal planner and calendar. */
body.hub-personalized[data-hub-theme="gallery"] .cal-month-label,
body.hub-personalized[data-hub-theme="notebook"] .cal-month-label {
  color: var(--theme-neutral-ink) !important;
  border-color: var(--theme-neutral-line) !important;
}

/* Category and status tints. app.js used to write these as inline colour
   literals, which beat every stylesheet rule no matter how specific -
   the reason task category pills and purge status chips stayed coloured
   here however much the theme said otherwise. They now arrive as custom
   properties (setPillTint), so redefining the properties is enough and
   no !important arms race is needed against the element's own style
   attribute. */
body.hub-personalized[data-hub-theme="gallery"] .pill.is-tinted,
body.hub-personalized[data-hub-theme="notebook"] .pill.is-tinted,
body.hub-personalized[data-hub-theme="gallery"] .zone-status-btn.is-tinted,
body.hub-personalized[data-hub-theme="notebook"] .zone-status-btn.is-tinted {
  --tint-ink: var(--theme-neutral-ink);
  --tint-edge: var(--theme-neutral-line);
  --tint-wash: var(--theme-neutral-soft);
}

/* Times and durations inside schedule/chore item pills. */
body.hub-personalized[data-hub-theme="gallery"] #view-schedule .chores-items-card .pill,
body.hub-personalized[data-hub-theme="notebook"] #view-schedule .chores-items-card .pill,
body.hub-personalized[data-hub-theme="gallery"] #view-schedule .chores-items-collapse-toggle,
body.hub-personalized[data-hub-theme="notebook"] #view-schedule .chores-items-collapse-toggle,
body.hub-personalized[data-hub-theme="gallery"] .schedule-item-time,
body.hub-personalized[data-hub-theme="notebook"] .schedule-item-time {
  color: var(--theme-neutral-ink) !important;
  border-color: var(--theme-neutral-line) !important;
}

/* The weekday rows in the meal planner - the user-reported "far too much
   colour" case. Each row carried a cream-to-lavender-to-mint diagonal
   gradient; desaturated enough to slip under a chroma threshold, but
   across seven full-width rows it reads as a pastel wash down the page. */
body.hub-personalized[data-hub-theme="gallery"] #view-meals #week-plan-list .day-plan-card,
body.hub-personalized[data-hub-theme="notebook"] #view-meals #week-plan-list .day-plan-card,
body.hub-personalized[data-hub-theme="gallery"] #view-meals #week-plan-list .day-plan-card.meals-day-complete,
body.hub-personalized[data-hub-theme="notebook"] #view-meals #week-plan-list .day-plan-card.meals-day-complete,
body.hub-personalized[data-hub-theme="gallery"] #view-meals #week-plan-list .day-plan-card.meals-day-today,
body.hub-personalized[data-hub-theme="notebook"] #view-meals #week-plan-list .day-plan-card.meals-day-today,
body.hub-personalized[data-hub-theme="gallery"] #view-meals .day-plan-title,
body.hub-personalized[data-hub-theme="notebook"] #view-meals .day-plan-title {
  background-image: none;
  background-color: var(--theme-neutral-soft);
  color: var(--theme-neutral-ink);
  border-color: var(--theme-neutral-line);
}

/* Gallery only: the tasks module defines its own warm inks (a plum-tinted
   near-black for headings, warm taupe for meta). At Notebook's warm-paper
   temperature those are right; against Gallery's true white they read as a
   tint on what is meant to be the neutral, architectural direction. */
body.hub-personalized[data-hub-theme="gallery"] #view-tasks .tasks-command-title,
body.hub-personalized[data-hub-theme="gallery"] #view-tasks .tasks-open-title,
body.hub-personalized[data-hub-theme="gallery"] #view-tasks .tasks-open-head,
body.hub-personalized[data-hub-theme="gallery"] #view-tasks .tasks-open-head span,
body.hub-personalized[data-hub-theme="gallery"] #view-dashboard .dash-momentum-sub {
  color: var(--theme-neutral-ink) !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-tasks .tasks-open-meta,
body.hub-personalized[data-hub-theme="gallery"] #view-tasks .tasks-open-meta span {
  color: var(--theme-neutral-muted) !important;
}
body.hub-personalized[data-hub-theme="gallery"] #view-tasks .tasks-week-progress {
  border-color: var(--theme-neutral-line) !important;
}

/* ====================================================================
   responsive-refresh.css
   ==================================================================== */
/* Responsive product pass.
   Auto mode maps <=599px to phone, 600-899px to tablet, >=900px to desktop.
   Settings can intentionally force Compact or Spacious without changing theme. */

body.hub-responsive {
  --responsive-gutter: 16px;
}

body.hub-responsive #app {
  width: 100%;
}

body.hub-responsive .view,
body.hub-responsive .card,
body.hub-responsive .subview,
body.hub-responsive .lineup-surface,
body.hub-responsive .purge-lineup-surface {
  min-width: 0;
}

body.hub-responsive img,
body.hub-responsive svg,
body.hub-responsive canvas {
  max-width: 100%;
}

body.hub-responsive input,
body.hub-responsive select,
body.hub-responsive textarea,
body.hub-responsive button {
  max-width: 100%;
}

body.hub-responsive table {
  max-width: 100%;
}

/* ---------------- PHONE / COMPACT ---------------- */
body.hub-responsive[data-hub-effective-layout="phone"] {
  --responsive-gutter: 9px;
}

body.hub-responsive[data-hub-effective-layout="phone"] #app {
  max-width: none !important;
  width: 100% !important;
  padding: 8px var(--responsive-gutter) calc(102px + env(safe-area-inset-bottom)) !important;
}

body.hub-responsive[data-hub-effective-layout="phone"] .view-header,
body.hub-responsive[data-hub-effective-layout="phone"] #view-dashboard .dashboard-hero,
body.hub-responsive[data-hub-effective-layout="phone"] #view-purge .purge-refresh-hero {
  min-height: 58px;
  margin-bottom: 8px;
  padding: 11px 12px;
}

body.hub-responsive[data-hub-effective-layout="phone"] .view-header h1,
body.hub-responsive[data-hub-effective-layout="phone"] #view-dashboard .dashboard-hero .brand-title {
  font-size: 1.08rem;
  line-height: 1.08;
}

body.hub-responsive[data-hub-effective-layout="phone"] .dashboard-hero-copy {
  width: calc(100% - 48px) !important;
  max-width: calc(100% - 48px) !important;
}

/* Phone type sizes.
   These used to shrink on the narrow layout - .53rem tab labels, .58rem
   tile captions, .66rem helper text, which render at 8.5px, 9.3px and
   10.6px. That is the wrong direction: the phone is the surface held at
   arm's length, in bad light, by someone who may already be short on
   focus, and it is where this app is used most. Narrow width is a reason
   to show less, not to set it smaller. Everything here is now at or above
   the 12px floor the readable-type layer sets, and the tab bar - the one
   genuinely width-constrained row - is as large as five labels allow.

   WCAG AA has no minimum size to hit here; it does require these to
   survive 200% zoom, which they do, since they are still relative units. */
body.hub-responsive[data-hub-effective-layout="phone"] .dashboard-hero-sub,
body.hub-responsive[data-hub-effective-layout="phone"] .view-header-sub,
body.hub-responsive[data-hub-effective-layout="phone"] .chores-command-sub {
  font-size: .82rem;
  line-height: 1.3;
}

body.hub-responsive[data-hub-effective-layout="phone"] .settings-gear-btn {
  width: 38px !important;
  height: 38px !important;
}

/* Dashboard: primary information gets width; secondary information can still scan quickly. */

/* Home Base + Mosaic retain their identity, but no longer squeeze bento geometry into phone width. */

/* Core content density. */
body.hub-responsive[data-hub-effective-layout="phone"] .view > .card,
body.hub-responsive[data-hub-effective-layout="phone"] .view > section {
  margin-bottom: 8px !important;
}

body.hub-responsive[data-hub-effective-layout="phone"] .card,
body.hub-responsive[data-hub-effective-layout="phone"] .tasks-command-card,
body.hub-responsive[data-hub-effective-layout="phone"] .tasks-open-shell,
body.hub-responsive[data-hub-effective-layout="phone"] .chores-command-card,
body.hub-responsive[data-hub-effective-layout="phone"] .chores-preview-card,
body.hub-responsive[data-hub-effective-layout="phone"] .chores-items-card,
body.hub-responsive[data-hub-effective-layout="phone"] .chores-add-card,
body.hub-responsive[data-hub-effective-layout="phone"] .meals-planner-card,
body.hub-responsive[data-hub-effective-layout="phone"] .budget-refresh-hero,
body.hub-responsive[data-hub-effective-layout="phone"] .purge-lineup-surface {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body.hub-responsive[data-hub-effective-layout="phone"] .section-title {
  font-size: .88rem !important;
  line-height: 1.15 !important;
}

body.hub-responsive[data-hub-effective-layout="phone"] .notifications-note,
body.hub-responsive[data-hub-effective-layout="phone"] .status-msg,
body.hub-responsive[data-hub-effective-layout="phone"] .product-row-brief,
body.hub-responsive[data-hub-effective-layout="phone"] .task-meta,
body.hub-responsive[data-hub-effective-layout="phone"] .meal-tag {
  font-size: .875rem !important;
  line-height: 1.4 !important;
}

/* Forms become thumb-friendly instead of compressed side-by-side controls. */
body.hub-responsive[data-hub-effective-layout="phone"] .btn-row,
body.hub-responsive[data-hub-effective-layout="phone"] .filter-row,
body.hub-responsive[data-hub-effective-layout="phone"] .kid-header {
  flex-wrap: wrap !important;
  gap: 6px !important;
}

body.hub-responsive[data-hub-effective-layout="phone"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
body.hub-responsive[data-hub-effective-layout="phone"] select,
body.hub-responsive[data-hub-effective-layout="phone"] textarea {
  min-height: 42px !important;
  font-size: 16px !important; /* prevents iOS focus zoom */
}

body.hub-responsive[data-hub-effective-layout="phone"] .btn,
body.hub-responsive[data-hub-effective-layout="phone"] .swap-toggle-btn,
body.hub-responsive[data-hub-effective-layout="phone"] .subtab-btn,
body.hub-responsive[data-hub-effective-layout="phone"] .filter-chip,
body.hub-responsive[data-hub-effective-layout="phone"] .personal-segmented-btn {
  min-height: 40px !important;
}

body.hub-responsive[data-hub-effective-layout="phone"] .filter-row > select,
body.hub-responsive[data-hub-effective-layout="phone"] .filter-row > input {
  flex: 1 1 145px !important;
  min-width: 0 !important;
}

/* Horizontal navigation is preferable to six microscopic controls. */
body.hub-responsive[data-hub-effective-layout="phone"] .subtabbar,
body.hub-responsive[data-hub-effective-layout="phone"] .filter-bar,
body.hub-responsive[data-hub-effective-layout="phone"] .mosaic-jumpbar {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 5px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

body.hub-responsive[data-hub-effective-layout="phone"] .subtabbar::-webkit-scrollbar,
body.hub-responsive[data-hub-effective-layout="phone"] .filter-bar::-webkit-scrollbar,
body.hub-responsive[data-hub-effective-layout="phone"] .mosaic-jumpbar::-webkit-scrollbar {
  display: none;
}

body.hub-responsive[data-hub-effective-layout="phone"] .subtabbar .subtab-btn,
body.hub-responsive[data-hub-effective-layout="phone"] .filter-bar .filter-chip,
body.hub-responsive[data-hub-effective-layout="phone"] .mosaic-jump-pill {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}

/* Bottom nav remains one-tap but gets usable targets and can breathe on very narrow phones. */
body.hub-responsive[data-hub-effective-layout="phone"] .tabbar {
  left: 7px;
  right: 7px;
  width: auto;
  max-width: none;
  bottom: max(7px, env(safe-area-inset-bottom));
  padding: 5px;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body.hub-responsive[data-hub-effective-layout="phone"] .tabbar::-webkit-scrollbar { display:none; }

body.hub-responsive[data-hub-effective-layout="phone"] .tab-btn {
  flex: 1 0 54px !important;
  min-width: 54px !important;
  min-height: 50px !important;
  padding: 5px 3px !important;
  font-size: .68rem !important;
  line-height: 1.15 !important;
}

body.hub-responsive[data-hub-effective-layout="phone"] .tab-icon {
  margin-bottom: 2px !important;
}

/* Repeated multi-column data becomes readable lists on phone. */
body.hub-responsive[data-hub-effective-layout="phone"] #week-plan-list,
body.hub-responsive[data-hub-effective-layout="phone"] #purge-zones-list,
body.hub-responsive[data-hub-effective-layout="phone"] #budget-subview-this-year,
body.hub-responsive[data-hub-effective-layout="phone"] #budget-subview-insights,
body.hub-responsive[data-hub-effective-layout="phone"] #budget-subview-savings-goals,
body.hub-responsive[data-hub-effective-layout="phone"] #planner-view-overview,
body.hub-responsive[data-hub-effective-layout="phone"] #planner-view-food,
body.hub-responsive[data-hub-effective-layout="phone"] #planner-view-lines {
  grid-template-columns: 1fr;
}

/* The week's meal plan, on a phone.
   Each day is a four-column grid - 9em for the day name, then the meals,
   then the progress pill and the chevron. 9em is about 144px, which on a
   375px screen is over a third of it spent on the word "Wednesday". What
   was left had to hold a slot label, a meal name, a prep time and a
   chevron, so the meal names were squeezed to a couple of words and
   wrapped to three lines each.
   On a phone the day name gets its own row and the meals get the full
   width underneath. Nothing is hidden and nothing is truncated - the same
   information, laid out down the screen instead of across it. */
body.hub-responsive[data-hub-effective-layout="phone"].product-polish-active #view-meals #week-plan-list > .day-plan-card {
  grid-template-columns: minmax(0, 1fr) auto auto;
  row-gap: 8px;
}
body.hub-responsive[data-hub-effective-layout="phone"].product-polish-active #view-meals #week-plan-list .day-plan-title > span:first-child {
  grid-area: 1 / 1;
  font-size: 1.02rem;
}
body.hub-responsive[data-hub-effective-layout="phone"].product-polish-active #view-meals #week-plan-list .meals-day-progress {
  grid-area: 1 / 2;
}
body.hub-responsive[data-hub-effective-layout="phone"].product-polish-active #view-meals #week-plan-list .section-collapse-btn {
  grid-area: 1 / 3;
}
body.hub-responsive[data-hub-effective-layout="phone"].product-polish-active #view-meals #week-plan-list .section-collapse-body {
  grid-area: 2 / 1 / auto / -1;
}

/* The meal rows themselves keep their four columns on a phone - label,
   name, prep time, chevron. An earlier version of this dropped the prep
   time's column to buy width for the meal name, which left four children
   in a three-column grid: the chevron wrapped onto a second line and every
   card sized itself differently. The width the rows needed was never
   theirs to find; it was the day-name column above taking a third of the
   screen, which the rule above gives back. */
body.hub-responsive[data-hub-effective-layout="phone"] #week-plan-list .meal-title {
  white-space: normal;
  overflow-wrap: anywhere;
}

body.hub-responsive[data-hub-effective-layout="phone"] .gauge-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

body.hub-responsive[data-hub-effective-layout="phone"] .mosaic-live-strip {
  display: flex !important;
  overflow-x: auto !important;
  gap: 6px !important;
  scrollbar-width: none;
}

body.hub-responsive[data-hub-effective-layout="phone"] .mosaic-live-strip::-webkit-scrollbar { display:none; }
body.hub-responsive[data-hub-effective-layout="phone"] .mosaic-live-chip { flex: 0 0 105px !important; }

body.hub-responsive[data-hub-effective-layout="phone"] table {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.hub-responsive[data-hub-effective-layout="phone"] th,
body.hub-responsive[data-hub-effective-layout="phone"] td {
  white-space: nowrap;
}

/* Settings remains usable on a phone without turning theme previews into postage stamps. */
body.hub-responsive[data-hub-effective-layout="phone"] .settings-panel {
  width: 100% !important;
  max-width: 100% !important;
}

body.hub-responsive[data-hub-effective-layout="phone"] .personal-theme-grid {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 6px !important;
}

body.hub-responsive[data-hub-effective-layout="phone"] .personal-theme-option {
  min-width: 0 !important;
}

body.hub-responsive[data-hub-effective-layout="phone"] .personal-setting-head {
  display: block !important;
}

body.hub-responsive[data-hub-effective-layout="phone"] .personal-setting-head span {
  display: block !important;
  margin-top: 2px !important;
  text-align: left !important;
}

@media (max-width: 350px) {
  body.hub-responsive[data-hub-effective-layout="phone"] .personal-theme-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------- TABLET ---------------- */
body.hub-responsive[data-hub-effective-layout="tablet"] {
  --responsive-gutter: 18px;
}

body.hub-responsive[data-hub-effective-layout="tablet"] #app {
  max-width: 860px !important;
  padding: 16px var(--responsive-gutter) calc(102px + env(safe-area-inset-bottom)) !important;
}

body.hub-responsive[data-hub-effective-layout="tablet"] #week-plan-list,
body.hub-responsive[data-hub-effective-layout="tablet"] #purge-zones-list {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

body.hub-responsive[data-hub-effective-layout="tablet"] .gauge-row {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
}

body.hub-responsive[data-hub-effective-layout="tablet"] .settings-panel {
  width: min(720px, 92vw) !important;
  max-width: 720px !important;
}

body.hub-responsive[data-hub-effective-layout="tablet"] .personal-theme-grid {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}

body.hub-responsive[data-hub-effective-layout="tablet"] input,
body.hub-responsive[data-hub-effective-layout="tablet"] select,
body.hub-responsive[data-hub-effective-layout="tablet"] textarea,
body.hub-responsive[data-hub-effective-layout="tablet"] .btn,
body.hub-responsive[data-hub-effective-layout="tablet"] .swap-toggle-btn {
  min-height: 40px;
}

/* ---------------- DESKTOP / SPACIOUS ---------------- */
body.hub-responsive[data-hub-effective-layout="desktop"] {
  --responsive-gutter: 24px;
}

body.hub-responsive[data-hub-effective-layout="desktop"] #app {
  max-width: 1080px !important;
  padding: 22px var(--responsive-gutter) 112px !important;
}

body.hub-responsive[data-hub-effective-layout="desktop"] #week-plan-list {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

body.hub-responsive[data-hub-effective-layout="desktop"] #purge-zones-list {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}

body.hub-responsive[data-hub-effective-layout="desktop"] .gauge-row {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
}

body.hub-responsive[data-hub-effective-layout="desktop"] .settings-panel {
  width: min(780px, 80vw) !important;
  max-width: 780px !important;
}

body.hub-responsive[data-hub-effective-layout="desktop"] .personal-theme-grid {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}

/* At genuinely wide desktop widths, navigation can become a rail instead of consuming the bottom edge.

   The rail is taken out of flow, so #app has to reserve its column
   explicitly - otherwise the rail sits on top of the cards at every width
   between this breakpoint and roughly 1420px, clipping headings mid-word
   ("Task load" rendering as "ask load"). #app is centred with a max-width,
   so the centring already supplies some of that clearance; the reserve
   below only tops up whatever is missing.

     rail column   118px  (--rail-width 104px + 7px padding each side)
     left gutter    18px  (the rail's own minimum offset)
     clear gap      20px
     ----------------------
     --rail-reserve 156px  measured from the viewport's left edge */
@media (min-width: 1180px) {
  body.hub-responsive[data-hub-effective-layout="desktop"] #app {
    --rail-reserve: 156px;
    max-width: 1120px !important;
    /* max(gutter, reserve - whatever the centring already gives us) */
    padding-left: max(var(--responsive-gutter), calc(var(--rail-reserve) - (100vw - 1120px) / 2)) !important;
    padding-bottom: 34px !important;
  }

  body.hub-responsive[data-hub-effective-layout="desktop"] .tabbar {
    /* Sits 20px clear of #app's left edge once the viewport is wide enough
       to place it there; pinned to the 18px gutter below that. */
    left: max(18px, calc(50vw - 560px - 138px));
    right: auto;
    /* Anchored to the top of the content column, not centred on the
       viewport. Centring meant the rail's position depended on the window
       height rather than on anything in the page, so it sat in the middle
       of nowhere - starting below the first card, level with different
       content on every tab, and moving when the window resized. Aligning
       it with the page title makes it read as part of the page. */
    top: 76px;
    bottom: auto;
    transform: none;
    width: 104px;
    max-width: 104px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 7px;
  }

  body.hub-responsive[data-hub-effective-layout="desktop"] .tab-btn {
    width: 100% !important;
    min-height: 58px !important;
    padding: 7px 5px !important;
  }
}

/* Respect motion preferences across every theme, not just Mosaic. */
@media (prefers-reduced-motion: reduce) {
  body.hub-responsive *,
  body.hub-responsive *::before,
  body.hub-responsive *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ====================================================================
   dark-mode-refresh.css
   ==================================================================== */
/* Device dark mode.
   This is the Dusk palette promoted out of the theme picker and into an
   appearance state, because a manually-selected dark theme is the wrong
   shape for the problem: dark mode belongs to the device, and choosing it
   as a "theme" meant giving up whichever visual personality you actually
   wanted in order to get it.

   It now applies on top of any theme when the device asks for dark (or
   when the household forces it), so the theme keeps its identity and only
   the surfaces invert. Per-theme accents are re-applied at the bottom of
   this file so dark mode is not identical for everyone.

   Selector is [data-hub-appearance="dark"], set by personalization-refresh.js
   from the appearance preference and prefers-color-scheme. */

/* ---------- shared dark surfaces ----------
   Near-monochrome surfaces separated by elevation rather than borders,
   warm off-white ink rather than pure white (less glare at night), and
   one accent reserved for state and progress - supplied per theme at the
   bottom of this file. */
body.hub-personalized[data-hub-appearance="dark"] {
  --dusk-page: #15171c;
  --dusk-card: #1c1f26;
  --dusk-raised: #232730;
  --dusk-inset: #191c22;
  --dusk-line: rgba(255,255,255,.07);
  --dusk-line-strong: rgba(255,255,255,.13);
  /* Warm off-white rather than pure white: less glare at night, and it
     keeps the ember accent from reading as a colour cast. */
  --dusk-ink: #e8e6e1;
  --dusk-ink-2: #adaca6;
  /* Sits at ~5.8:1 on the card surface. The obvious choice a couple of
     steps darker lands at 4.4:1, which fails AA on the small 11-12px
     labels this is mostly used for. */
  --dusk-muted: #9b9b96;
  --dusk-ember: #e0a06a;
  --dusk-ember-soft: rgba(224,160,106,.14);
  --dusk-ember-line: rgba(224,160,106,.34);

  --hub-page: var(--dusk-page);
  /* --hub-surface is the card surface, in both appearances.
     It used to be --dusk-card here while the light themes meant the
     brighter of their two tiers by the same name, so the two halves of
     the product disagreed about what "surface" meant - and because the
     cards were painted from --hub-surface-alt, dark mode happened to
     land on the right colour through the wrong variable. Now that cards
     read --hub-surface everywhere, this has to be the raised tone or
     dark mode would move its cards TOWARDS the page (#1c1f26 is 7 steps
     off #15171c; #232730 is 14) - the opposite of the fix.
     --dusk-muted stays legible on it: 5.4:1 against #232730, against
     the 4.5:1 the 11-12px labels need. */
  --hub-surface: var(--dusk-raised);
  --hub-surface-alt: var(--dusk-raised);
  --hub-surface-soft: var(--dusk-inset);
  --hub-row: var(--dusk-raised);
  --hub-border: var(--dusk-line);
  --hub-accent: var(--dusk-ember);
  --hub-accent-ink: var(--dusk-ember);
  --hub-accent-2: var(--dusk-ember);
  --hub-text: var(--dusk-ink);
  --hub-muted: var(--dusk-muted);
  --hub-tab: var(--dusk-card);
  /* Several cards carry a large decorative blob in one corner. On the
     light themes it is a barely-there tint; on a dark ground it renders
     as a pale grey lump sitting on top of the content. */
  --hub-shape: transparent;
  --hub-shadow: none;
  /* The lineup layer paints section surfaces and list rows from these,
     including that cream-lavender-mint diagonal. Overriding the tokens
     retints everything built on them in one place, rather than chasing
     each row selector. */
  --lineup-surface-gradient: var(--dusk-card);
  --lineup-surface-bg: var(--dusk-card);
  --lineup-row-bg: var(--dusk-inset);
  --lineup-row-border: rgba(255,255,255,.07);
  --lineup-shadow: none;
  --hub-input: var(--dusk-inset);

  /* Base-stylesheet tokens, so components that never learned about themes
     still land in the right palette instead of staying light. */
  --bg: var(--dusk-inset);
  --card: var(--dusk-card);
  --border: var(--dusk-line);
  /* --line has to be set here too, not just --border.
     tokens.css declares `--line: var(--border, #f0dfd3)` on :root, and a
     custom property resolves against the element that DECLARES it - so
     redefining --border further down never reaches it, and --line stayed
     at the light #f0dfd3 in dark mode. Every card drawn by the
     "one surface deep" border rule was getting a pale hairline on a dark
     ground because of it. */
  --line: var(--dusk-line);
  --text: var(--dusk-ink);
  --text-secondary: var(--dusk-ink-2);
  --text-muted: var(--dusk-muted);
  --teal: var(--dusk-ember);
  --red: #d98b7a;

  /* Display headings and the small day/time labels: both were resolving
     to light-mode inks over a dark card. The muted grey is the same one
     the rest of the secondary type uses, so day labels recede here the
     way they do in the light themes rather than shouting in mauve. */
  --hub-display-ink: var(--dusk-ink);
  --hub-daylabel-ink: var(--dusk-muted);

  background: var(--dusk-page) !important;
  color: var(--dusk-ink) !important;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  /* Times, durations, counts and money all shift width as they update
     otherwise - tabular figures hold the column still. */
  font-variant-numeric: tabular-nums;
}

body.hub-personalized[data-hub-appearance="dark"] #app,
body.hub-personalized[data-hub-appearance="dark"] .view {
  background: transparent !important;
  color: var(--dusk-ink) !important;
}

/* Each tab module carries its own ink and accent tokens, all authored for
   a light ground - a near-black heading and a mid taupe for meta. Left
   alone they turn into dark-on-dark text that all but disappears here, so
   every module's ink is inverted and its accents are collapsed onto the
   single ember. Setting the tokens rather than the components means the
   modules keep their own layout rules and only the palette changes. */
body.hub-personalized[data-hub-appearance="dark"] #view-tasks {
  --task-ink: var(--dusk-ink);
  --task-muted: var(--dusk-muted);
}
body.hub-personalized[data-hub-appearance="dark"] #view-meals {
  --meal-green: var(--dusk-ink-2);
  --meal-green-soft: var(--dusk-inset);
  --meal-blue: var(--dusk-ink-2);
}
body.hub-personalized[data-hub-appearance="dark"] #view-budget {
  --budget-ink: var(--dusk-ink);
  --budget-muted: var(--dusk-muted);
  --budget-line: var(--dusk-line);
}
body.hub-personalized[data-hub-appearance="dark"] #view-purge {
  --purge-ink: var(--dusk-ink);
  --purge-muted: var(--dusk-muted);
  --purge-progress: var(--dusk-ember);
  --purge-warm: var(--dusk-ember);
  --purge-sage: var(--dusk-ink-2);
  --purge-teal: var(--dusk-ink-2);
  --purge-teal-soft: var(--dusk-inset);
}
body.hub-personalized[data-hub-appearance="dark"] #view-schedule {
  --chores-lilac: var(--dusk-inset);
  --chores-lilac-strong: var(--dusk-ink-2);
  --chores-gold-soft: var(--dusk-inset);
}
body.hub-personalized[data-hub-appearance="dark"] {
  --product-ink: var(--dusk-ink);
  --product-muted: var(--dusk-muted);
  --product-gold: var(--dusk-ember);
  --product-peach: var(--dusk-ember);
  --product-sage: var(--dusk-ink-2);
  --product-teal: var(--dusk-ink-2);
  --product-lilac: var(--dusk-ink-2);
}

/* ---- type ---- */
body.hub-personalized[data-hub-appearance="dark"] .view-header h1,
body.hub-personalized[data-hub-appearance="dark"] .tasks-command-title,
body.hub-personalized[data-hub-appearance="dark"] .chores-command-title,
body.hub-personalized[data-hub-appearance="dark"] .budget-refresh-hero-title {
  font-family: "Poppins", ui-sans-serif, sans-serif;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--dusk-ink);
}

/* Section titles become quiet labels over a hairline rather than loud
   headings - the card itself already says "new section starts here".
   DEF-06: this used to also force uppercase, which only dark mode did,
   so the same heading read "Tonight's window" in light and "TONIGHT'S
   WINDOW" in dark. A theme should change colour and weight, not the
   words' casing - and all-caps is measurably slower to read, which is
   the wrong trade for this audience. */
body.hub-personalized[data-hub-appearance="dark"] .section-title {
  font-family: ui-sans-serif, -apple-system, sans-serif !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  color: var(--dusk-muted) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid var(--dusk-line) !important;
}

body.hub-personalized[data-hub-appearance="dark"] .notifications-note,
body.hub-personalized[data-hub-appearance="dark"] .today-tasks-sub,
body.hub-personalized[data-hub-appearance="dark"] .empty-state {
  color: var(--dusk-muted) !important;
}

/* ---- surfaces: separation by value, not by outline ---- */
body.hub-personalized[data-hub-appearance="dark"] .card,
body.hub-personalized[data-hub-appearance="dark"] .lineup-surface,
body.hub-personalized[data-hub-appearance="dark"] .tasks-open-shell,
body.hub-personalized[data-hub-appearance="dark"] .chores-items-card,
body.hub-personalized[data-hub-appearance="dark"] .purge-lineup-surface,
body.hub-personalized[data-hub-appearance="dark"] .settings-section-card {
  background: var(--dusk-card) !important;
  border: 1px solid var(--dusk-line) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.34) !important;
  color: var(--dusk-ink) !important;
  margin-bottom: 14px !important;
}

body.hub-personalized[data-hub-appearance="dark"] .dashboard-hero,
body.hub-personalized[data-hub-appearance="dark"] .view-header,
body.hub-personalized[data-hub-appearance="dark"] .tasks-command-card,
body.hub-personalized[data-hub-appearance="dark"] .chores-command-card,
body.hub-personalized[data-hub-appearance="dark"] .budget-refresh-hero,
body.hub-personalized[data-hub-appearance="dark"] .purge-refresh-hero {
  background: var(--dusk-raised);
  border: 1px solid var(--dusk-line);
  box-shadow: none;
  color: var(--dusk-ink);
}

body.hub-personalized[data-hub-appearance="dark"] .chores-today-row,
body.hub-personalized[data-hub-appearance="dark"] .product-lineup-card,
body.hub-personalized[data-hub-appearance="dark"] .product-calendar-row,
body.hub-personalized[data-hub-appearance="dark"] .grocery-row,
body.hub-personalized[data-hub-appearance="dark"] .inbox-item,
body.hub-personalized[data-hub-appearance="dark"] .help-request-item,
body.hub-personalized[data-hub-appearance="dark"] .calibration-row,
body.hub-personalized[data-hub-appearance="dark"] #today-tasks-list .tonight-task-item {
  color: var(--dusk-ink);
}

/* ---- pills: filled chips, softly rectangular, not outlined lozenges ---- */
body.hub-personalized[data-hub-appearance="dark"] .pill {
  background: rgba(255,255,255,.06) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 3px 9px !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  letter-spacing: .045em !important;
  color: var(--dusk-ink-2) !important;
}

/* Category/status tints arrive as custom properties (see setPillTint in
   app.js). Dusk keeps a trace of the hue so categories stay tellable
   apart, but as a dim wash rather than saturated text on a dark ground. */
body.hub-personalized[data-hub-appearance="dark"] .pill.is-tinted {
  --tint-edge: transparent;
  color: var(--dusk-ink-2) !important;
  background: rgba(255,255,255,.07) !important;
  box-shadow: inset 2px 0 0 var(--tint-ink, transparent) !important;
}

body.hub-personalized[data-hub-appearance="dark"] .priority-tag {
  color: var(--dusk-muted) !important;
}

body.hub-personalized[data-hub-appearance="dark"] .zone-status-btn.is-tinted {
  background: var(--dusk-raised) !important;
  border: 1px solid var(--dusk-line-strong) !important;
  color: var(--dusk-ink-2) !important;
  box-shadow: inset 2px 0 0 var(--tint-ink, transparent) !important;
}

/* ---- controls ---- */
body.hub-personalized[data-hub-appearance="dark"] .btn.btn-primary {
  background: var(--dusk-ember) !important;
  color: #1b1408 !important;
  border: 1px solid var(--dusk-ember) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

body.hub-personalized[data-hub-appearance="dark"] .swap-toggle-btn,
body.hub-personalized[data-hub-appearance="dark"] .btn:not(.btn-primary),
body.hub-personalized[data-hub-appearance="dark"] .subtab-btn,
body.hub-personalized[data-hub-appearance="dark"] .cal-nav-btn,
body.hub-personalized[data-hub-appearance="dark"] .section-collapse-btn {
  background: var(--dusk-raised) !important;
  border: 1px solid var(--dusk-line-strong) !important;
  color: var(--dusk-ink-2) !important;
  box-shadow: none !important;
}

body.hub-personalized[data-hub-appearance="dark"] .subtab-btn.active {
  background: var(--dusk-ember-soft) !important;
  border-color: var(--dusk-ember-line) !important;
  color: var(--dusk-ember) !important;
}

body.hub-personalized[data-hub-appearance="dark"] input,
body.hub-personalized[data-hub-appearance="dark"] textarea,
body.hub-personalized[data-hub-appearance="dark"] select,
body.hub-personalized[data-hub-appearance="dark"] .inbox-input {
  background: var(--dusk-inset) !important;
  border: 1px solid var(--dusk-line-strong) !important;
  color: var(--dusk-ink) !important;
}

body.hub-personalized[data-hub-appearance="dark"] input::placeholder,
body.hub-personalized[data-hub-appearance="dark"] textarea::placeholder {
  color: var(--dusk-muted) !important;
}

/* A focus ring you can actually see, on every interactive surface -
   easy to lose against a dark ground, and this app is used by people
   who navigate it while distracted. */
body.hub-personalized[data-hub-appearance="dark"] :focus-visible {
  outline: 2px solid var(--dusk-ember) !important;
  outline-offset: 2px !important;
}

/* ---- tab bar: the active tab is marked by an ember edge, not a slab ---- */
body.hub-personalized[data-hub-appearance="dark"] .tabbar {
  background: var(--dusk-card);
  border-top: 1px solid var(--dusk-line);
  box-shadow: 0 -2px 10px rgba(0,0,0,.3);
}

body.hub-personalized[data-hub-appearance="dark"] .tab-btn {
  color: var(--dusk-muted) !important;
  background: transparent !important;
  border-top: 2px solid transparent !important;
}

body.hub-personalized[data-hub-appearance="dark"] .tab-btn.active {
  color: var(--dusk-ember) !important;
  background: transparent !important;
  border-top: 2px solid var(--dusk-ember) !important;
  border-radius: 0 !important;
}

/* ---- progress, gauges and numbers ---- */

body.hub-personalized[data-hub-appearance="dark"] .gauge-value,
body.hub-personalized[data-hub-appearance="dark"] .focus-overlay-timer {
  font-variant-numeric: tabular-nums;
  color: var(--dusk-ink);
}

body.hub-personalized[data-hub-appearance="dark"] .focus-overlay {
  background: var(--dusk-page) !important;
}
body.hub-personalized[data-hub-appearance="dark"] .focus-overlay-timer {
  color: var(--dusk-ember) !important;
}

/* ---- status messages ---- */
body.hub-personalized[data-hub-appearance="dark"] .status-msg { color: var(--dusk-muted) !important; }
body.hub-personalized[data-hub-appearance="dark"] .status-msg.success { color: #9fc79a !important; }
body.hub-personalized[data-hub-appearance="dark"] .status-msg.error { color: #d98b7a !important; }

/* ---- settings surface ---- */
body.hub-personalized[data-hub-appearance="dark"] .settings-panel {
  background: var(--dusk-page) !important;
  color: var(--dusk-ink) !important;
}
body.hub-personalized[data-hub-appearance="dark"] .settings-panel .settings-family-stack {
  background: var(--dusk-card) !important;
  border-color: var(--dusk-line) !important;
}

/* Motion is a stimulus like any other, and this theme's whole reason for
   existing is lowering the load. */
@media (prefers-reduced-motion: reduce) {
  body.hub-personalized[data-hub-appearance="dark"] *,
  body.hub-personalized[data-hub-appearance="dark"] *::before,
  body.hub-personalized[data-hub-appearance="dark"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Decorative colour bars and dials from the per-tab refresh layers would
   otherwise sit on top of a dark card as bright stripes. */
body.hub-personalized[data-hub-appearance="dark"] .card::before,
body.hub-personalized[data-hub-appearance="dark"] .lineup-surface::before {
  background: var(--dusk-line) !important;
  background-image: none !important;
}

/* Belt and braces on the corner blobs: the shared rule above sets these
   from --hub-shape, but several tab layers paint their own. */
body.hub-personalized[data-hub-appearance="dark"] #app *::after,
body.hub-personalized[data-hub-appearance="dark"] #app *::before {
  background-image: none !important;
}
body.hub-personalized[data-hub-appearance="dark"] #view-dashboard .dashboard-hero::after,
body.hub-personalized[data-hub-appearance="dark"] #view-tasks .tasks-command-card::after,
body.hub-personalized[data-hub-appearance="dark"] #view-schedule .chores-command-card::after,
body.hub-personalized[data-hub-appearance="dark"] #today-tasks-card::after,
body.hub-personalized[data-hub-appearance="dark"] #calendar-card::after,
body.hub-personalized[data-hub-appearance="dark"] #view-purge .purge-refresh-hero::after,
body.hub-personalized[data-hub-appearance="dark"] .lineup-surface::after,
body.hub-personalized[data-hub-appearance="dark"] .purge-lineup-surface::after {
  background: transparent !important;
  display: none !important;
}

/* The scripture banner sits above the app shell and never picked up a
   theme, so it stayed a bright band across the top of a dark page. */
body.hub-personalized[data-hub-appearance="dark"] #scripture-banner {
  background: var(--dusk-page) !important;
  background-image: none !important;
  border-color: var(--dusk-line) !important;
  color: var(--dusk-ink-2) !important;
}
body.hub-personalized[data-hub-appearance="dark"] #scripture-banner * {
  color: inherit !important;
}

/* Progress tracks: dark channel, ember fill. Without this the track keeps
   its light-theme background and reads as a bright bar. */
body.hub-personalized[data-hub-appearance="dark"] .gauge-track > span,
body.hub-personalized[data-hub-appearance="dark"] .tasks-week-track > span {
  background: var(--dusk-ember);
}

/* The momentum dial is drawn as a light disc with a conic progress ring. */

/* Small state chips ("0.0h left of 2.0h") carry their own light fills. */
body.hub-personalized[data-hub-appearance="dark"] .lineup-surface .pill,
body.hub-personalized[data-hub-appearance="dark"] .today-tasks-remaining {
  color: var(--dusk-ink-2) !important;
}

/* ---- remaining light surfaces ----
   Found by walking every tab and flagging any painted surface whose
   luminance stayed high - the dark-theme mirror of the chroma sweep used
   on Gallery. Each of these is a light-theme fill from a tab layer that
   never expected a dark ground under it. */

/* Decorative corner discs on tiles and cards. */
body.hub-personalized[data-hub-appearance="dark"] .view-header::after,
body.hub-personalized[data-hub-appearance="dark"] .card::after,
body.hub-personalized[data-hub-appearance="dark"] .tasks-capture-card::after,
body.hub-personalized[data-hub-appearance="dark"] .chores-items-card::after {
  background: transparent;
  background-image: none;
}

/* Progress rings are a light disc with a coloured arc drawn over it. */

/* The four pastel stat cards at the top of Tasks. */
body.hub-personalized[data-hub-appearance="dark"] #view-tasks .tasks-stat,
body.hub-personalized[data-hub-appearance="dark"] #view-schedule .chores-stat {
  color: var(--dusk-ink);
}

/* Round icon and chevron buttons. */
body.hub-personalized[data-hub-appearance="dark"] .view-header-icon,
body.hub-personalized[data-hub-appearance="dark"] .product-chevron,
body.hub-personalized[data-hub-appearance="dark"] .tasks-open-chevron,
body.hub-personalized[data-hub-appearance="dark"] .universal-collapse-chevron,
body.hub-personalized[data-hub-appearance="dark"] .meal-chevron,
body.hub-personalized[data-hub-appearance="dark"] .chores-items-collapse-toggle,
body.hub-personalized[data-hub-appearance="dark"] .purge-zone-collapse-toggle {
  background: var(--dusk-raised);
  background-image: none;
  border-color: var(--dusk-line-strong);
  color: var(--dusk-ink-2);
}

/* Panels and rows that kept a near-white fill. */
body.hub-personalized[data-hub-appearance="dark"] .subtabbar,
body.hub-personalized[data-hub-appearance="dark"] .chores-how-it-works,
body.hub-personalized[data-hub-appearance="dark"] .grocery-row,
body.hub-personalized[data-hub-appearance="dark"] .product-simple-row,
body.hub-personalized[data-hub-appearance="dark"] .slot-empty-row,
body.hub-personalized[data-hub-appearance="dark"] .zone-row,
body.hub-personalized[data-hub-appearance="dark"] .meal-card,
body.hub-personalized[data-hub-appearance="dark"] .day-plan-card,
body.hub-personalized[data-hub-appearance="dark"] .day-plan-title {
  color: var(--dusk-ink);
}

/* Catch-all for surfaces painted with a gradient rather than a flat fill.
   A luminance sweep over background-color misses these entirely, which is
   how the Meals "Week covered" panel stayed a bright cream card in the
   middle of a dark page. Same surface list the Gallery layer neutralises. */

/* Text the tab layers hardcode as literals rather than reading from their
   own tokens, so the token overrides above never reached it. Each was
   authored as a dark ink for a light card and fails WCAG AA badly here -
   "Open tasks" was landing at 1.28:1, which is functionally invisible. */
body.hub-personalized[data-hub-appearance="dark"] #view-dashboard .dash-momentum-sub,
body.hub-personalized[data-hub-appearance="dark"] #view-tasks .tasks-open-title,
body.hub-personalized[data-hub-appearance="dark"] #view-tasks .tasks-open-head,
body.hub-personalized[data-hub-appearance="dark"] #view-tasks .tasks-open-head span,
body.hub-personalized[data-hub-appearance="dark"] #view-meals .cal-month-label,
body.hub-personalized[data-hub-appearance="dark"] .cal-month-label {
  color: var(--dusk-ink) !important;
}
body.hub-personalized[data-hub-appearance="dark"] #view-tasks .tasks-open-meta,
body.hub-personalized[data-hub-appearance="dark"] #view-tasks .tasks-open-meta span,
body.hub-personalized[data-hub-appearance="dark"] #view-schedule .chores-command-eyebrow,
body.hub-personalized[data-hub-appearance="dark"] #view-meals .meals-day-progress,
body.hub-personalized[data-hub-appearance="dark"] .meals-day-progress {
  color: var(--dusk-ink-2) !important;
}

/* Collapsible section headers keep a light divider under them, which on a
   dark card reads as a bright rule straight across the page. */
body.hub-personalized[data-hub-appearance="dark"] .section-collapse-head,
body.hub-personalized[data-hub-appearance="dark"] .kid-header,
body.hub-personalized[data-hub-appearance="dark"] .today-tasks-header,
body.hub-personalized[data-hub-appearance="dark"] .settings-panel-header {
  border-color: var(--dusk-line) !important;
}

/* The product-polish layer scopes some rows by list id, which outranks a
   class-only theme rule however late it loads. */
body.hub-personalized[data-hub-appearance="dark"] #purge-upnext-list .product-simple-row,
body.hub-personalized[data-hub-appearance="dark"] #grocery-list .grocery-row,
body.hub-personalized[data-hub-appearance="dark"] #week-plan-list .day-plan-card,
body.hub-personalized[data-hub-appearance="dark"] #week-plan-list .meal-card {
  color: var(--dusk-ink);
}

body[data-hub-appearance="dark"] .settings-panel.settings-experience-upgraded,
body[data-hub-appearance="dark"] .settings-panel.settings-experience-upgraded > .settings-panel-header {
  background: #15171c !important;
  color: #e8e6e1 !important;
}
body[data-hub-appearance="dark"] .settings-panel.settings-experience-upgraded .settings-section-card,
body[data-hub-appearance="dark"] .settings-panel.settings-experience-upgraded .settings-family-stack {
  background: #1c1f26 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: none !important;
  color: #e8e6e1 !important;
}
/* The accent stripe each settings card carries reads as a bright bar on a
   dark ground, so it becomes a hairline like everything else here. */
body[data-hub-appearance="dark"] .settings-panel.settings-experience-upgraded .settings-section-card::before {
  background: rgba(255,255,255,.09) !important;
  background-image: none !important;
  width: 3px;
}

/* ============================================================
   PER-THEME ACCENTS IN DARK
   Without this every theme collapses into the same dark screen and the
   personality someone chose in daylight disappears at night. The surfaces
   stay shared; the accent and a few identity cues come from the theme.
   Each accent is a light tint so it clears AA against the dark ground.
   ============================================================ */
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="soft-glow"] {
  --dusk-ember: #f0a58f;
  --dusk-ember-soft: rgba(240,165,143,.14);
  --dusk-ember-line: rgba(240,165,143,.34);
}
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="mosaic"] {
  --dusk-ember: #a99bf5;
  --dusk-ember-soft: rgba(169,155,245,.14);
  --dusk-ember-line: rgba(169,155,245,.34);
}
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="notebook"] {
  --dusk-ember: #d9c9a3;
  --dusk-ember-soft: rgba(217,201,163,.14);
  --dusk-ember-line: rgba(217,201,163,.34);
}
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="gallery"] {
  --dusk-ember: #e8e6e1;
  --dusk-ember-soft: rgba(232,230,225,.12);
  --dusk-ember-line: rgba(232,230,225,.30);
}
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="glacier"] {
  /* Sky blue rather than the daylight sapphire: the deepened ramp that
     carries white type on white surfaces is far too dark to read against
     a dark one, so dark mode uses the light end of the same hue. */
  --dusk-ember: #7cc2f5;
  --dusk-ember-soft: rgba(124,194,245,.14);
  --dusk-ember-line: rgba(124,194,245,.34);
  /* Glacier sets its own inks with !important, so they win over the
     shared dark tokens and stay dark-on-dark unless inverted here. Same
     treatment Marker needs, for the same reason: a theme that defines its
     own text colours has to define them for both appearances. */
  --gl-navy: #e8eef5;
  --gl-navy-2: #b6c6d8;
  --gl-muted: #94a7bd;
  --gl-ground: #15171c;
  --gl-card: #1c1f26;
  --gl-inset: #191c22;
  --gl-edge: rgba(255,255,255,.10);
  --gl-edge-strong: rgba(255,255,255,.16);
  --gl-lift: none;
  --gl-lift-sm: none;
  --gl-glow: none;
  --gl-sky: #7cc2f5;
  --gl-blue: #5AAEF2;
  --gl-ink-blue: #7cc2f5;
  --gl-ink-blue-deep: #5AAEF2;
  --hub-accent-ink: #7cc2f5;
  --hub-daylabel-ink: #7cc2f5;
}
/* The button fill is light in dark mode, so its label flips to dark. */
/* The gradient inverts: light sky blue fill with dark navy type, since a
   deep blue button would disappear into a dark card. */
/* Scoped through #app to match the light rules these override - those
   carry an id and would otherwise keep white type on a light blue fill. */
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="glacier"] #app .btn.btn-primary,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="glacier"] #app .pill,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="glacier"] #app .today-tasks-remaining,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="glacier"] #app .subtab-btn.active {
  color: #0c1f33 !important;
}
/* The over-capacity warning keeps its meaning but has to be legible on a
   dark ground rather than the deep clay used on a pale one. */
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="glacier"] .today-tasks-remaining.over,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="glacier"] .status-msg.error {
  color: #e8a0a9 !important;
}
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="glacier"] .status-msg.success {
  color: #7cc2f5 !important;
}

/* Marker is the exception worth handling properly. Its identity is the
   ink outline, so in dark mode the outline inverts to light rather than
   disappearing - otherwise the one theme built around drawn edges loses
   the only thing that made it itself. */
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="marker"] {
  --dusk-ember: #ffd23f;
  --dusk-ember-soft: rgba(255,210,63,.14);
  --dusk-ember-line: rgba(255,210,63,.34);
  --mk-ink: #e8e6e1;
  --mk-ink-soft: #adaca6;
  --mk-paper: #15171c;
  --mk-card: #1c1f26;
}
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="marker"] .card,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="marker"] .btn.btn-primary,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="marker"] .tabbar {
  /* The outline inverts and stays - it is the theme's identity - but at a
     dimmer weight, and the hard offset shadow goes entirely. A 4px solid
     near-white drop shadow on a dark ground stops reading as a drawn edge
     and becomes a bar of glare, which is the opposite of what anyone
     wants from dark mode. */
  border-color: rgba(232,230,225,.55);
  box-shadow: none;
}
/* The flat fills are tuned for ink on top of them, so in dark they become
   the text colour instead of the surface - a saturated block would be a
   glare source at night. */
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="marker"] .btn.btn-primary {
  background: #ffd23f !important;
  color: #1b1408 !important;
}

/* ============================================================
   THEMES THAT PIN THEIR OWN PALETTE
   Gallery, Notebook and Mosaic enforce their looks with literal
   !important values scoped through #app, which outranks the shared dark
   rules above on specificity and leaves dark-on-dark text. Rather than
   unpick those layers, this matches their shape - the same #app :is(...)
   surface list, one attribute deeper - so the appearance wins where it
   has to and nothing else about those themes changes.
   ============================================================ */
body.hub-personalized[data-hub-appearance="dark"]:is([data-hub-theme="gallery"],[data-hub-theme="notebook"],[data-hub-theme="mosaic"]) {
  --theme-neutral-ink: #e8e6e1;
  --theme-neutral-muted: #9b9b96;
  --theme-neutral-line: rgba(255,255,255,.10);
  --theme-neutral-soft: #191c22;
  --brand-color: #e8e6e1;
  --brand-color-ink: #e8e6e1;
  background: var(--dusk-page) !important;
}

/* Ink. The neutral layer sets a lot of near-black text through #app, and
   the same reach is needed to lift it off a dark ground. */

/* The dashboard title carries the household's own colour in dark mode
   too, using the lightened companion branding.js derives against this
   card - the light-mode ink is darkened toward black, which is the one
   thing that cannot work here. */
body.hub-personalized[data-hub-appearance="dark"] #app .dashboard-hero .brand-title {
  color: var(--brand-color-ink-dark, var(--dusk-ink)) !important;
}
body.hub-personalized[data-hub-appearance="dark"]:is([data-hub-theme="gallery"],[data-hub-theme="notebook"],[data-hub-theme="mosaic"]) #app :is(.pill,.priority-tag,.zone-status-btn) {
  background-color: rgba(255,255,255,.07) !important;
  border-color: var(--dusk-line) !important;
  color: var(--dusk-ink-2) !important;
}
body.hub-personalized[data-hub-appearance="dark"]:is([data-hub-theme="gallery"],[data-hub-theme="notebook"],[data-hub-theme="mosaic"]) #scripture-banner,
body.hub-personalized[data-hub-appearance="dark"]:is([data-hub-theme="gallery"],[data-hub-theme="notebook"],[data-hub-theme="mosaic"]) #scripture-banner * {
  background: var(--dusk-page) !important;
  color: var(--dusk-ink-2) !important;
  border-color: var(--dusk-line) !important;
}

/* Stragglers: classes the lists above did not name, plus Mosaic's own
   muted literal (set both as a token and as a hardcoded value, so both
   need answering). */
body.hub-personalized[data-hub-appearance="dark"]:is([data-hub-theme="gallery"],[data-hub-theme="notebook"],[data-hub-theme="mosaic"]) {
  --hub-muted: var(--dusk-muted);
}
/* Small stat captions are rendered as bare spans in several modules, so
   there is no class to aim at - inherit from the darkened card instead. */

/* Two last holdouts, both scoped tightly enough in their own layers to
   need naming directly: Mosaic's live-chip captions, and the purge stat
   gauges, which take their fill from an nth-child rule reading the
   module's own soft tokens. */
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme="mosaic"] .mosaic-live-chip span {
  color: var(--dusk-muted) !important;
}
body.hub-personalized[data-hub-appearance="dark"] #view-purge #purge-stats .gauge-sub {
  color: var(--dusk-muted);
}

/* Container surfaces these captions sit on. The text was already being
   lifted; without darkening what is behind it, light-on-light is just as
   unreadable as dark-on-dark. */
body.hub-personalized[data-hub-appearance="dark"] #app :is(
  .grocery-group-collapse-title,.meals-library-category-title
) {
  color: var(--dusk-ink) !important;
}
body.hub-personalized[data-hub-appearance="dark"] #app :is(
  .grocery-group-collapse-count,.meals-library-category-count
) {
  color: var(--dusk-muted) !important;
}

/* Mosaic sets its chip numbers in a deep navy, which is invisible on a
   dark ground; and the grocery group headers take an nth-of-type fill
   from the list-density layer, which needs the same reach to override. */
body.hub-personalized[data-hub-appearance="dark"] #app .mosaic-live-chip strong {
  color: var(--dusk-ink) !important;
}
body.hub-personalized[data-hub-appearance="dark"] #meals-subview-grocery #grocery-list .grocery-group .grocery-group-collapse-head,
body.hub-personalized[data-hub-appearance="dark"] #meals-subview-grocery #grocery-list .grocery-group:nth-of-type(3n + 1) .grocery-group-collapse-head,
body.hub-personalized[data-hub-appearance="dark"] #meals-subview-grocery #grocery-list .grocery-group:nth-of-type(3n + 2) .grocery-group-collapse-head,
body.hub-personalized[data-hub-appearance="dark"] #meals-subview-grocery #grocery-list .grocery-group:nth-of-type(3n + 3) .grocery-group-collapse-head {
  background: var(--dusk-inset) !important;
  background-image: none !important;
  border-color: var(--dusk-line) !important;
}

/* ---- theme surfaces that outrank the dark ground --------------------
   Dark mode paints surfaces with
     body.hub-personalized[data-hub-appearance="dark"] .card
   which is (0,3,1). Several themes paint the same surfaces white with a
   selector that is simply more specific, and !important on both sides
   does not break that tie - specificity decides it first:

     [data-hub-theme="mosaic"] .view > .card          (0,3,2)  wins
     [data-hub-theme="gallery"] #view-purge .purge-…  (1,3,1)  wins

   So on those themes the card stayed white while the text inside it went
   white with the rest of dark mode. Measured on the dashboard at
   1280x900 with prefers-color-scheme dark, counting cards whose computed
   background is lighter than mid-grey:

     soft-glow 0/19   marker 0/19   glacier 0/19
     notebook  2/19   gallery 2/19  mosaic  12/19

   Mosaic was not a contrast nit. The dashboard widgets render a grey
   label and a white value, so "Your capacity", "Next on schedule" and
   "Today's meals" each kept their heading and lost their answer -
   #ffffff on #ffffff - and the screen read as three empty rows.

   Matching the theme layer's own reach rather than editing twenty-odd
   theme rules: adding [data-hub-theme] takes the appearance selector to
   (0,4,1), and the #view-purge variant to (1,4,2), so the dark ground
   wins on every theme including ones added later. */
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme] .view > .card,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme] .subview > .card,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme] .tasks-open-shell,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme] .chores-preview-card,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme] .chores-items-card,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme] .chores-add-card,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme] .meals-planner-card,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme] .budget-lineup-surface,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme] .budget-compact-collapse-card,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme] .budget-insight-collapse-card,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme] .purge-lineup-surface,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme] #view-purge .purge-session-refresh,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme] #view-purge .purge-session-refresh.target-hit,
body.hub-personalized[data-hub-appearance="dark"][data-hub-theme] #view-purge #purge-upnext-card {
  background: var(--dusk-card) !important;
  border-color: var(--dusk-line) !important;
  color: var(--dusk-ink) !important;
}

/* ====================================================================
   design-system-refresh.css
   ==================================================================== */
/* ====================================================================
   design-system-refresh.css

   Last on purpose. Holds the Hub and the Budget to the type and radius
   scales in tokens.css, which means beating the per-theme sections above
   that each grew their own page-title size and card radius.

   Merged from: readable-type, design-system
   Cascade order within this file is exactly the order those files
   were concatenated in before, so the shipped bundle is unchanged.
   ==================================================================== */

/* ====================================================================
   was readable-type-refresh.css
   ==================================================================== */

/* Readable type floor.
   ------------------------------------------------------------------
   A note on the standard, because it is easy to get wrong: WCAG 2.x AA
   sets no minimum font size. It sets contrast ratios (1.4.3), a lower
   ratio for "large" text (>=24px, or >=18.66px bold), and the ability to
   scale to 200% without loss (1.4.4). So there is no AA number to hit
   here. What there was instead is a real problem: the app had 48 pieces
   of live text below 12px and the smallest was 8.3px, which is smaller
   than anything a phone OS will render for its own UI - iOS and Android
   both put their smallest system label at ~11-12px and body text at
   16-17px.

   This layer sets a floor rather than a redesign: nothing below 12px,
   supporting labels at 12-13px, and body copy at 14px. Sizes already at
   or above the floor are left alone, so the visual hierarchy the themes
   establish is unchanged - the small end is simply no longer squinting
   territory. It loads last so it wins over the accumulated !important
   in the earlier layers.

   Note the second-order effect: raising a size can change which contrast
   rule applies (>=18.66px bold drops the requirement from 4.5:1 to
   3:1), so this file and the contrast work belong together. */

/* ---- micro-labels: the 8-10px band ---- */
.meals-completion-label,
.gauge-sub,
.tasks-stat-label,
.purge-refresh-hero-meta,
.meals-summary-detail,
.purge-progress-label,
.tasks-week-progress-top span,
.meals-day-progress {
  font-size: 12px;
  line-height: 1.35;
}

/* ---- supporting labels: the 10-11.5px band ---- */
.chores-command-eyebrow,
.today-tasks-remaining,
.pill.is-tinted,
.purge-refresh-hero-status,
.tasks-open-meta,
.tasks-open-meta span,
.task-meta,
.meal-tag,
.slipped-task-sub,
.capture-proposal-sub,
.day-plan-title,
.meal-day,
.routine-day,
.product-calendar-time,
.cal-event-source {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}

/* ---- controls and body copy: readable at arm's length ---- */
.subtab-btn,
.swap-toggle-btn,
.btn,
.btn-primary {
  font-size: 14px !important;
}

.notifications-note,
.empty-state,
.tagline,
.chores-how-copy,
.status-msg,
.display-setting-help {
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* Pills and chips carry short strings in tight rows; they get the label
   floor rather than the body size so the rows do not reflow. */
.pill,
.owner-pill,
.eater-badge,
.priority-tag {
  font-size: 12.5px !important;
}

/* The gauge/stat numbers are the reason those micro-labels existed: they
   are the figure, the label is the caption. Keeping the figure clearly
   larger preserves that relationship now the caption has grown. */
.gauge-value,
.tasks-stat-value,
.meals-completion-pct,
.purge-progress-percent {
  font-size: 19px;
  line-height: 1.1;
}

/* Small screens: the floor holds, but the widest labels get a hair less
   so three-up stat rows do not wrap mid-word. */
@media (max-width: 380px) {
  .gauge-sub,
  .tasks-stat-label {
    font-size: 12px;
    letter-spacing: 0;
  }
}

/* ====================================================================
   was design-system-refresh.css
   ==================================================================== */

/* ============================================================
   design-system — the layer that makes the three apps agree
   ============================================================

   tokens.css declares the scales. This is where the Hub and the Budget
   are held to them, last in the cascade so it beats the per-theme
   layers that each grew their own numbers. The Display consumes the
   same tokens directly in display.css and needs nothing here.

   Measured before this layer existed, same household, same theme, same
   session:

     page title   Hub dashboard  Quicksand      17.28px
                  Hub tasks      Luckiest Guy   21.12px
                  Hub routines   Luckiest Guy   17.28px
                  Budget         Luckiest Guy   26.40px

   Four sizes and two faces for the same piece of furniture, three of
   them inside the Hub alone. Nobody decided that; it is what four
   passes over four stylesheets adds up to.

   What is deliberately NOT unified: the display face itself. Each
   theme sets --hub-display-font, and that is the personality the
   household picked - marker gets Baloo, notebook gets Playfair. The
   rule is that every page title uses whatever that theme chose, at one
   size. And the brand title on the Dashboard keeps the household's own
   --brand-font, because it is the household's name rather than a page
   heading.
   ============================================================ */

/* ---- page titles -------------------------------------------------
   One face, one size, every tab of the Hub and the Budget's own
   header. */
/* .hub-responsive is on the body of every page here; it is named only to
   match the specificity of product-polish-refresh's own !important rule
   on the same headings, which this layer needs to beat by coming later
   rather than by being louder. */
body.hub-responsive :is(#view-tasks, #view-schedule, #view-meals, #view-purge, #view-routines, #view-budget) > .view-header h1,
body.hub-responsive .budget-title-row h1,
body.hub-responsive .budget-refresh-hero-title {
  font-family: var(--hub-display-font, var(--font-sans));
  font-size: var(--type-page-title);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* The Dashboard's brand title is the household's name, not a page
   heading, so it keeps the font they chose - held to the same step so
   the two do not disagree on size. */
body.hub-responsive #view-dashboard .dashboard-hero .dashboard-hero-copy .brand-title {
  font-family: var(--brand-font, var(--font-sans)) !important;
  font-size: var(--type-page-title) !important;
  line-height: 1.12 !important;
}

/* On a phone the page title steps down once rather than to an
   unrelated number. */
@media (max-width: 560px) {
  :root {
    --type-page-title: var(--step-1);
  }
}

/* ---- card geometry ------------------------------------------------
   Radius was 18px on the Hub and the Budget and 28px on the Display -
   two numbers, no scale. All three now sit on --card-radius, which the
   Display steps up because its cards are four times the size. */
body :is(.card, .budget-refresh-card, .settings-panel > .card) {
  border-radius: var(--card-radius);
}

/* ============================================================
   VIS-02 — one primary surface per screen
   ============================================================

   Measured on the Dashboard before this: six surfaces at the top level
   of the view, all carrying the same 0 6px 18px shadow, the same 18px
   radius and the same white fill - the hero, tonight's window, refills,
   slipped tasks, widgets and the calendar. Every screen in the Hub was
   the same shape. When six things are equally prominent, none of them
   is, and the eye has nowhere to start. For someone who opened the app
   precisely because they could not decide where to start, that is the
   whole product failing quietly.

   The rule: one surface per view answers "what now?" and keeps the
   elevation and an accent-tinted edge. Everything else on the screen
   drops to a hairline on a flat fill. Nothing is hidden and nothing
   moves - the page keeps all its content and loses the competition
   between it. design-system-refresh.js decides which surface that is,
   per view, and marks it. */

/* Top-level cards only. `.view .card` caught the Budget's Income and
   Expenses columns as well - they are .card elements nested inside a
   section - and gave them the same edge as the section containing them,
   which is the cards-inside-cards problem this file exists to end. The
   :not() lists the nested ones by name rather than relying on depth,
   because "is this card inside another card" is not something a selector
   can ask when the wrapper is not itself a card. */
/* .dashboard-hero and .purge-refresh-hero are deliberately absent: they
   are page titles, not surfaces, and this rule's `border` is !important,
   so leaving them in meant the edge came back no matter what the
   "page titles are not cards" rule below said. */
body.hub-responsive .view > :is(.card, .tasks-command-card, .chores-command-card, .purge-lineup-surface, .tasks-open-shell),
body[data-page="budget"] .view .card:not(.budget-income-card, .budget-expense-card, .budget-context-card) {
  box-shadow: var(--shadow-0) !important;
  border: 1px solid var(--line) !important;
}

/* The view id is in the selector to clear the per-view !important rules
   above it (lineup-surface and dashboard-refresh each set this card's
   shadow directly); it is not there to scope anything. */
body.hub-responsive :is(#view-dashboard, #view-tasks, #view-schedule, #view-meals, #view-purge, #view-budget) .is-primary-surface {
  box-shadow: var(--card-shadow-primary) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)) !important;
  border-radius: var(--card-radius) !important;
}

/* A list inside the primary surface is a list, not a stack of cards.
   Six white rounded rectangles inside one white rounded rectangle is
   what made the Dashboard read as boxes-in-boxes; hairlines say the
   same thing about separation and let the card be one object. */
body.hub-responsive #view-dashboard #today-tasks-list .tonight-task-item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  padding: 8px 2px !important;
}
body.hub-responsive #view-dashboard #today-tasks-list .tonight-task-item:last-child {
  border-bottom: 0 !important;
  padding-bottom: 2px !important;
}
/* The actions strip was drawn as the bottom half of the row's card -
   its own fill and a border with the top edge removed. With the row
   flat it was left as a white band floating under each task. */
body.hub-responsive #view-dashboard #today-tasks-list .tonight-task-actions {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* A surface inside a surface is not a second card. The gauges, the
   nested rows and the collapsible sub-cards keep their fill and their
   corners and give up the shadow, which is the only thing that was
   claiming they sit on their own plane. */

/* Radius on the scale. It was 16, 17 and 18px on one screen - three
   values for one idea. Cards take --card-radius; anything nested inside
   one steps down, because a radius that does not shrink with the shape
   reads as a mistake at the corner. */
body.hub-responsive :is(.card, .tasks-command-card, .chores-command-card, .tasks-open-shell),
body[data-page="budget"] .card {
  border-radius: var(--card-radius) !important;
}

/* ====================================================================
   ONE SURFACE DEEP
   ====================================================================

   A card is a surface. Everything inside it is a region, not another
   card. Before this, "Your dashboard" was a card holding a Weekly
   Capacity card holding two gauge cards, each with its own fill, border,
   radius and shadow - three nested rounded boxes in three tints for one
   idea, and the same shape repeated on Tasks, Meals, Declutter and
   Budget. Reading it, you cannot tell which boxes are grouped and which
   are merely inside something, because the treatment says "separate
   object" at every level.

   The chrome on those inner components has been deleted from the layers
   above rather than overridden here, so this is the only place that
   decides how a nested region looks - and it decides by NOT drawing one.
   Separation comes from a hairline and space, which is enough, because
   the outer card already said where the group starts and stops.

   Controls are deliberately exempt below: a button or an input should
   look like its own object, since that is what makes it look pressable. */

/* --region-gap lived here, one step down from --card-padding. Nothing
   reads it: the flatten below separates regions with a hairline and the
   card's own spacing rather than a gap of its own. */

/* The regions themselves: no fill, no edge, no corner, no shadow. */
.card :is(
  .dashboard-widget, .gauge, .tasks-stat, .chores-stat, .budget-metric,
  .card, .tasks-filter-shell, .subtabbar, .calendar-week-strip
),
/* No `.card` ancestor required: the "Income and expenses" wrapper is not
   itself a .card, so a descendant selector matched nothing. These two are
   .card elements sitting in a .budget-detail-grid inside a section, which
   is the nesting to remove. */
body[data-page="budget"] :is(.budget-income-card, .budget-expense-card, .budget-context-card) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---- page titles are not cards -------------------------------------
   Every view opened with its own name inside a card: a fill, an edge, a
   radius and a shadow wrapped around one line of text that says where
   you already know you are. Four of them stacked down the dashboard
   before the first task, and on a phone the first card cost about a
   fifth of the screen to tell you the app is called what you tapped.

   A title is not an object on the page - it names the page. So it sits
   on the ground with nothing behind it, and the first surface you see
   is the first thing that actually holds content.

   No !important anywhere below, deliberately. Nothing shouts these
   particular properties at these particular elements, and this layer is
   last and more specific than the rules that set them - so ordinary
   cascade is enough. The one place that did shout (the hero's radius
   and shadow, in hub-polish) is fixed where it is written instead of
   being argued with from here. */
#view-dashboard .dashboard-hero,
#view-tasks > .view-header,
#view-schedule > .view-header,
#view-meals > .view-header,
#view-budget > .view-header,
#view-purge .purge-refresh-hero,
#view-budget .budget-refresh-hero {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The decorative shapes these carried were positioned against a box
   edge that no longer exists, so they would sit over the page. */
#view-dashboard .dashboard-hero::after,
#view-purge .purge-refresh-hero::after,
#view-budget .budget-refresh-hero::after {
  display: none;
}

/* Repeated regions in a row get a single hairline between them rather
   than four separate boxes. `+` so the first has no rule above it. */
.card .tasks-stat + .tasks-stat,
.card .chores-stat + .chores-stat,
.card .budget-metric + .budget-metric {
  border-left: 1px solid var(--line);
}

/* The dashboard widgets are the exception, because they do not sit in a
   row. `.dashboard-widgets-list` is `flex-direction: column`, so the
   border-left above put a 1px vertical line down the left of the second
   and third widget, separating them from nothing - a stray mark rather
   than a separator. A stack wants a rule between its rows. */
.card .dashboard-widget + .dashboard-widget {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* Rows in a list: a hairline between, not a stack of floating chips.
   The row keeps its padding - what it loses is the impression that each
   line item is its own document. */
:is(#tasks-list, #cal-list-view, #grocery-list, #purge-zones-list, #chores-today-list)
  > :is(.task-row, .product-task-row, .product-lineup-row, .product-simple-row,
        .cal-agenda-row, .product-calendar-row, .grocery-row, .chores-today-row) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}
:is(#tasks-list, #cal-list-view, #grocery-list, #purge-zones-list, #chores-today-list)
  > :is(.task-row, .product-task-row, .product-lineup-row, .product-simple-row,
        .cal-agenda-row, .product-calendar-row, .grocery-row, .chores-today-row):last-child {
  border-bottom: 0;
}

/* Controls keep their surface. Listed rather than left to fall through,
   because the rules above are broad on purpose and a button that loses
   its fill stops reading as a button. */
.card :is(button, .btn, input, select, textarea, .swap-toggle-btn, .subtab-btn, .filter-select, .dump-input, .form-input) {
  border-radius: var(--radius-md, 10px);
}

/* ====================================================================
   THE CAPACITY GAUGE SAYS WHAT THE NUMBER SAYS
   ====================================================================

   A household with nothing scheduled saw a bar filled end to end next to
   the words "17.5h free". The JS was right all along - the fill is
   committed time, and it was correctly 0% - but the TRACK was painted in
   a solid warm tone close enough to the fill colour to read as one, so
   an empty week looked like a full one.

   For a product whose whole argument is not overloading people, the one
   place the picture must not contradict the words is here.

   The track is now a trough: recessed, low-contrast, obviously the empty
   state. The fill is the only saturated thing in the component, so a
   short bar reads as a light week and a long one as a full week without
   anyone having to read the caption. */

.gauge-track {
  /* Derived from the ink rather than named per appearance, so the trough
     is a faint tint of the text colour in both. --surface-sunken resolves
     light in dark mode, which put a solid white bar across a dark card -
     the same "empty reads as full" problem this component was fixed for,
     reintroduced in the appearance nobody was screenshotting. */
  background: color-mix(in srgb, var(--ink, #2a2320) 15%, transparent);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
  width: 100%;
}
.gauge-track > .gauge-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent, #0e7c6b);
  transition: width .3s ease;
  min-width: 0;
}
/* Committed time crossing the line the household set for itself is the
   one thing here worth a colour change. */
.gauge-track > .gauge-fill.warn { background: #b8791f; }
.gauge-track > .gauge-fill.over,
.gauge-track > .gauge-fill.full { background: #b3402c; }

/* The number is the point of the component; the caption under it is not.
   They were within a step of each other, so neither led. */
.gauge-value {
  font-size: var(--step-2, 24px);
  font-weight: var(--weight-bold, 700);
  line-height: 1.1;
  color: var(--ink);
}
.gauge-label {
  font-size: var(--step--1, 13px);
  font-weight: var(--weight-medium, 500);
  color: var(--ink-secondary);
}
.gauge { display: flex; flex-direction: column; gap: 6px; }
.gauge-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5, 20px); }

/* ====================================================================
   THE LAST OF THE DECORATION
   ====================================================================

   Rings stay: a conic or radial gradient drawing a progress arc is the
   data, not decoration. What goes is the tint on things that repeat -
   the seven day cards, the task rows, the page-title band - where every
   instance wore the same wash, so it separated nothing and only made the
   two gradients that DO mean something harder to spot. */

#week-plan-list > .day-plan-card,
#tasks-list > .task-row,
#tasks-list > .product-lineup-row,
.meals-refresh-summary,
.view-header {
  background-image: none;
}

/* ====================================================================
   THE WEEK IS SEVEN ROWS, NOT A THREE-COLUMN GRID
   ====================================================================

   Seven days in a three-column grid leaves Sunday alone beside two empty
   columns, and because each card sizes to its own content the cards in a
   row ended at different heights - the kind of misalignment that reads
   as "something is wrong here" without being nameable.

   A week is a sequence, so it reads as a list. One row per day, one
   hairline between them, the day name in a fixed column so the eye can
   run straight down it. No orphan, nothing to align, and the whole week
   is visible without the horizontal scan. */

body.product-polish-active #week-plan-list {
  display: block;
}
body.product-polish-active #week-plan-list > .day-plan-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  padding: var(--space-3, 12px) 0;
  border-bottom: 1px solid var(--line);
}
body.product-polish-active #week-plan-list > .day-plan-card:last-child { border-bottom: 0; }
body.product-polish-active #week-plan-list .day-plan-title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: 0;
  background: none;
  border-radius: 0;
}
body.product-polish-active #week-plan-list .day-plan-title > span:first-child {
  min-width: 8.5em;
  font-size: var(--step-0, 16px);
  font-weight: var(--weight-bold, 700);
  letter-spacing: 0;
  text-transform: none;
}
body.product-polish-active #week-plan-list .section-collapse-body { padding: 0; }

/* "NOTHING PLANNED" seven times in grey capitals is a harsh way to greet
   somebody who has not planned their week yet - and shouting is exactly
   wrong for the households this is built for. Same words, said quietly. */
.slot-empty-row,
#week-plan-list .slot-empty-label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--weight-regular, 400);
  color: var(--ink-muted);
}

/* One line per day. The row was a stacked block - day name, then a gap,
   then the meal and the button on a second line - which is a lot of
   vertical space for "nothing planned yet" seven times over.

   Every part of the row is placed explicitly. The day title element is
   display:contents so its three children join the row's own grid rather
   than being squeezed into one 9em column, which is what left the
   progress pill and the chevron sitting on top of the meal text. */
body.product-polish-active #view-meals #week-plan-list > .day-plan-card {
  background: none;
  display: grid;
  grid-template-columns: 9em 1fr auto auto;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) 0;
}
body.product-polish-active #view-meals #week-plan-list .day-plan-title {
  display: contents;
}
body.product-polish-active #view-meals #week-plan-list .day-plan-title > span:first-child {
  grid-area: 1 / 1;
  color: var(--ink);
  font-weight: var(--weight-bold, 700);
  text-transform: none;
  letter-spacing: 0;
}
body.product-polish-active #view-meals #week-plan-list .meals-day-progress {
  grid-area: 1 / 3;
  justify-self: end;
}
body.product-polish-active #view-meals #week-plan-list .section-collapse-btn {
  grid-area: 1 / 4;
  justify-self: end;
}
body.product-polish-active #view-meals #week-plan-list .section-collapse-body {
  grid-area: 1 / 2;
  padding: 0;
  min-width: 0;
}

/* The page-title band. Every view had its own two- or three-stop wash
   here - peach on Tasks, orange on Declutter, and so on - so the one
   element that appears identically on every screen was the least
   consistent thing in the product. It is a title; it takes the card
   surface like everything else, and the view's identity is carried by
   the icon and the words, which is enough. */
body.hub-personalized :is(#view-tasks, #view-meals, #view-schedule, #view-purge, #view-dashboard) .view-header,
body.hub-personalized #view-tasks.tasks-refresh-active .view-header,
body.hub-personalized #view-purge .purge-refresh-hero {
  background: var(--hub-surface);
  background-image: none;
}

/* ====================================================================
   TWO CONTROLS THAT WERE SHOUTING
   ====================================================================

   The sort control was a native <select> stretched to the full 1,040px
   of the card, sitting 8px under a row of custom-styled filter pills -
   two design languages touching. It is one short value, so it takes the
   width of one short value and matches the pills it sits with. */
body.hub-personalized .tasks-filter-shell select,
body.hub-personalized #view-tasks .filter-select {
  width: auto;
  min-width: 12ch;
  max-width: 20ch;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill, 999px);
  padding: 6px 30px 6px 12px;
  font-size: var(--step--1, 13px);
  background-color: var(--surface);
}

/* "Export CSV" was rendered as the primary action on the Tasks screen -
   solid fill, same weight as "Sort it out" - attached to an empty
   Completed section. Weight should track importance, and this is a
   convenience on a section most people never open. */

/* ====================================================================
   ROW BUTTONS
   ====================================================================

   .meal-card-head is a <button> - it is the clickable head of a
   collapsible row, used for the meal library in the Hub and for the
   income and expense categories in the Budget. Stripping card chrome
   from it took its background and border with them, and a button with no
   background does not fall back to "plain": it falls back to the
   browser's own 2px outset grey, which is how the Budget's category list
   briefly looked like a Windows 95 dialog.

   A row that happens to be a button still looks like a row. What makes
   it feel pressable is the hover and the focus ring, not a raised edge. */
:is(.card, .budget-income-card, .budget-expense-card) :is(.meal-card-head, .section-collapse-head) {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  width: 100%;
  text-align: left;
  padding: var(--space-3, 12px) 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
:is(.card, .budget-income-card, .budget-expense-card) .meal-card + .meal-card > .meal-card-head {
  border-top: 1px solid var(--line);
}
:is(.card, .budget-income-card, .budget-expense-card) :is(.meal-card-head, .section-collapse-head):hover {
  background: var(--surface-sunken, rgba(120, 100, 92, .06));
}
:is(.card, .budget-income-card, .budget-expense-card) :is(.meal-card-head, .section-collapse-head):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* The Budget's two columns were cards inside a card, and their contents
   were cards again - three levels, same as the Hub dashboard before this.
   The column heading and a rule are enough to say where Income stops and
   Expenses starts. */
body[data-page="budget"] .card :is(.budget-income-card, .budget-expense-card, .budget-context-card) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}