/* FocusClean — base.css
   Structural + component styling. Colors come only from theme tokens. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
[hidden] { display: none !important; }

/* ---------- Theme bridge ----------
   The theme files hold the Luna planner palette tokens. FocusClean's
   components were written against older names; map each one onto its
   palette token here so every rule re-themes without being rewritten. */
:root, [data-theme] {
  --bg-secondary: var(--surface-alt);
  --card: var(--surface); --card-elevated: var(--surface-alt);
  --text-secondary: var(--text-muted);
  --accent: var(--accent-1);
  --accent-hover: var(--btn-primary-bg); --on-accent: var(--btn-primary-text);
  --accent-light: var(--chip-1-bg); --accent-text: var(--chip-1-text);
  --secondary: var(--accent-2);
  --secondary-hover: var(--btn-secondary-bg); --on-secondary: var(--btn-secondary-text);
  --secondary-light: var(--chip-2-bg); --secondary-text: var(--chip-2-text);
  --success: var(--success-bg); --on-success: var(--success-text);
  --warning: var(--warning-bg); --on-warning: var(--warning-text);
  --error: var(--danger-bg); --on-error: var(--danger-text); --error-text: var(--danger-text);
  --info: var(--info-bg);
  --ring-track: var(--chart-track);
}
body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s ease, color .3s ease;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; margin: 0; line-height: 1.15; color: var(--heading); }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 15px; color: var(--text); }
/* iPhone zooms into any field under 16px — keep touch fields at 16px+ */
@media (pointer: coarse) { input, select, textarea { font-size: max(16px, 1rem); } }
button, a, [data-action] { touch-action: manipulation; }
a { color: var(--link); text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------- App shell ---------- */
#app { min-height: 100vh; }
.app-shell { display: flex; min-height: 100vh; }

/* Left rail (desktop) */
.rail {
  display: none;
  flex-direction: column;
  width: 240px;
  flex-shrink: 0;
  padding: 22px 16px;
  gap: 4px;
  background: var(--nav-bg);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
}
.rail-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; }
.rail-brand .mark { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
.rail-brand .name { font-family: "DM Serif Display", serif; font-size: 21px; color: var(--nav-active-text); }
/* Signature stripe across the top of the menu (Rainbow Pastel; "none" elsewhere) */
.rail::before, .tabbar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--brand-stripe); pointer-events: none; }
.tabbar::before { height: 4px; }
.rail-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 12px;
  color: var(--nav-text); font-weight: 500; font-size: 15px;
  transition: background .15s ease, color .15s ease;
}
.rail-link svg { color: var(--nav-icon); }
.rail-link.active { background: var(--nav-active-bg); color: var(--nav-active-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent-1-deep); }
.rail-link svg { width: 20px; height: 20px; }
.rail-spacer { flex: 1; }

/* Main column */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand-mobile { display: flex; align-items: center; gap: 9px; }
.topbar .brand-mobile .mark { width: 30px; height: 30px; border-radius: 9px; }
.topbar .brand-mobile .name { font-family: "DM Serif Display", serif; font-size: 19px; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; color: var(--text-secondary);
  transition: background .15s ease, color .15s ease;
}
.icon-btn svg { width: 22px; height: 22px; }

/* View container */
/* The side menu shows only on a real desktop (wide AND mouse/trackpad).
   Every touch screen — phones, iPads in either orientation — gets the
   bottom bar, and every "keep clear of the bar" rule below uses the same
   query as the bar itself. */
:root { --bar-h: 62px; --safe-b: env(safe-area-inset-bottom, 0px); }
.view {
  flex: 1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 16px calc(150px + var(--safe-b));
}
@media (min-width: 1024px) { .view { padding-left: 32px; padding-right: 32px; padding-top: 26px; } }

/* Bottom tab bar (mobile/tablet) */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  display: flex; justify-content: space-around; align-items: stretch;
  height: calc(var(--bar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--nav-bg);
  border-top: 1px solid var(--border);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: var(--nav-text); font-size: 11px; font-weight: 600;
  min-width: 44px;
}
.tab svg { color: var(--nav-icon); }
.tab svg { width: 23px; height: 23px; stroke-width: 1.7; }
.tab.active { color: var(--nav-active-text); }
.tab.active .tab-icon { background: var(--nav-active-bg); box-shadow: inset 0 0 0 1.5px var(--accent-1-deep); }

/* Rainbow Pastel: menu icons cycle through the six hues */
[data-theme="rainbow-pastel"] .rail-link:nth-of-type(6n+1) svg, [data-theme="rainbow-pastel"] .tab:nth-of-type(6n+1) svg { color: var(--chip-1-text); }
[data-theme="rainbow-pastel"] .rail-link:nth-of-type(6n+2) svg, [data-theme="rainbow-pastel"] .tab:nth-of-type(6n+2) svg { color: var(--chip-2-text); }
[data-theme="rainbow-pastel"] .rail-link:nth-of-type(6n+3) svg, [data-theme="rainbow-pastel"] .tab:nth-of-type(6n+3) svg { color: var(--chip-3-text); }
[data-theme="rainbow-pastel"] .rail-link:nth-of-type(6n+4) svg, [data-theme="rainbow-pastel"] .tab:nth-of-type(6n+4) svg { color: var(--chip-4-text); }
[data-theme="rainbow-pastel"] .rail-link:nth-of-type(6n+5) svg, [data-theme="rainbow-pastel"] .tab:nth-of-type(6n+5) svg { color: var(--chip-5-text); }
[data-theme="rainbow-pastel"] .rail-link:nth-of-type(6n) svg, [data-theme="rainbow-pastel"] .tab:nth-of-type(6n) svg { color: var(--chip-6-text); }
.tab-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 30px; border-radius: 999px; transition: background .18s ease; }

/* Floating Start-Here (overwhelm) button */
.fab-start {
  position: fixed; z-index: 46;
  right: 16px; bottom: calc(var(--bar-h) + 16px + var(--safe-b));
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-radius: 999px;
  background: var(--accent-hover); color: var(--on-accent);
  font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow-lg);
  transition: transform .15s ease, filter .15s ease;
}
.fab-start svg { width: 19px; height: 19px; }
.fab-add {
  position: fixed; z-index: 46;
  right: 16px; bottom: calc(var(--bar-h) + 78px + var(--safe-b));
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--accent-text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: transform .15s ease;
}
.fab-add svg { width: 24px; height: 24px; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .rail { display: flex; }
  .topbar .brand-mobile { visibility: hidden; }
  .tabbar { display: none; }
  .fab-start { bottom: 24px; }
  .fab-add { bottom: 88px; }
  .view { padding-bottom: 110px; }
}

/* Hover effects only where a real pointer hovers — on touch they stick
   after a tap and make the next tap look wrong. */
@media (hover: hover) {
  .rail-link:hover { background: var(--nav-hover-bg); color: var(--nav-active-text); }
  .icon-btn:hover { background: var(--card-elevated); color: var(--text); }
  .fab-start:hover { transform: translateY(-2px); filter: brightness(1.03); }
  .fab-add:hover { transform: translateY(-2px) rotate(90deg); }
  .btn-primary:hover { background: var(--btn-primary-hover); }
  .btn-secondary:hover { background: var(--btn-secondary-hover); }
  .btn-soft:hover { background: var(--accent); }
  .btn-ghost:hover { background: var(--surface-alt); color: var(--btn-ghost-text); }
  .pill:hover { background: var(--accent-light); border-color: var(--accent); }
}

/* ---------- Typography helpers ---------- */
.page-title { font-size: 27px; margin-bottom: 2px; }
.page-sub { color: var(--text-secondary); font-size: 15px; margin-bottom: 18px; }
.section-title { font-size: 19px; margin: 4px 0 12px; }
.muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.big-num { font-family: "DM Sans", sans-serif; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.card.elevated { background: var(--card-elevated); box-shadow: var(--shadow-md); }
.card + .card { margin-top: 14px; }
/* Side-by-side rows and stacks space cards with their own gap. The extra top
   margin there pushed the second card in a row down and made it shorter, so
   rows never lined up. Cards in a row also stretch to the same height. */
.grid > .card, .stack > .card, .grid > .card + .card, .stack > .card + .card { margin-top: 0; }
.grid { align-items: stretch; }
.grid > .card { height: 100%; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head h3 { font-size: 18px; }
.card-head > svg, .row > svg { flex-shrink: 0; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 18px; border-radius: 13px;
  font-weight: 600; font-size: 15px; line-height: 1;
  transition: transform .12s ease, filter .12s ease, background .15s ease;
  border: 1px solid transparent;
}
.btn:active { transform: scale(.98); }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--accent-hover); color: var(--on-accent); }
.btn-secondary { background: var(--secondary-hover); color: var(--on-secondary); }
.btn-soft { background: var(--accent-light); color: var(--accent-text); }
.btn-ghost { background: transparent; color: var(--btn-ghost-text); border-color: var(--btn-ghost-border); }
.btn-danger { background: var(--error); color: var(--on-error); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 8px 13px; font-size: 13px; border-radius: 10px; }
/* Disabled: an outline with muted text, never a faded fill with faded text */
.btn:disabled { background: transparent; color: var(--text-muted); border-color: var(--btn-ghost-border); cursor: not-allowed; }

/* Quick-start pills */
.pill-row { display: flex; gap: 9px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px; border-radius: 999px;
  background: var(--card-elevated); border: 1px solid var(--border);
  color: var(--text); font-weight: 600; font-size: 14px; min-height: 44px;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.pill:active { transform: scale(.97); }
.pill.selected { background: var(--accent-hover); color: var(--on-accent); border-color: var(--accent-hover); }
.pill svg { width: 16px; height: 16px; }

/* Status / tag chips */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  max-width: 100%; overflow-wrap: anywhere; /* chips wrap, never push the page sideways */
}
.chip svg { width: 13px; height: 13px; }
.chip-critical { background: var(--error); color: var(--on-error); }
.chip-helpful { background: var(--secondary-light); color: var(--secondary-text); }
.chip-optional { background: var(--card-elevated); color: var(--text-muted); }
.chip-low { background: var(--secondary-light); color: var(--secondary-text); }
.chip-med { background: var(--accent-light); color: var(--accent-text); }
.chip-high { background: var(--warning); color: var(--on-warning); }
.chip-time { background: var(--bg-secondary); color: var(--text-secondary); }
.chip-success { background: var(--success); color: var(--on-success); }
.chip-warn { background: var(--warning); color: var(--on-warning); }
.chip-info { background: var(--accent-light); color: var(--accent-text); }

/* ---------- Task rows ---------- */
.task-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px;
  position: relative;
  touch-action: pan-y;
}
.task-row + .task-row { border-top: 1px solid var(--divider); }
.task-check {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid var(--accent-2-deep); background: var(--card);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.task-check svg { width: 16px; height: 16px; color: var(--on-accent); opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .25s cubic-bezier(.2,1.4,.5,1); }
.task-row.done .task-check { background: var(--accent-2); border-color: var(--accent-2-deep); }
.task-row.done .task-check svg { opacity: 1; transform: scale(1); }
.task-body { flex: 1; min-width: 0; }
.task-title { font-weight: 500; font-size: 15px; overflow-wrap: anywhere; }
.task-row.done .task-title { text-decoration: line-through; text-decoration-color: var(--border-accent); color: var(--text-muted); }
.task-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.task-actions { display: flex; gap: 2px; flex-shrink: 0; }
.task-row.removing { animation: collapseRow .35s ease forwards; }
@keyframes collapseRow { to { opacity: 0; transform: translateX(30px); max-height: 0; padding-top: 0; padding-bottom: 0; } }

/* ---------- Progress ring ---------- */
.ring-wrap { display: inline-flex; align-items: center; justify-content: center; position: relative; }
.ring-wrap svg { transform: rotate(-90deg); }
.ring-track { stroke: var(--ring-track); fill: none; }
.ring-fill { stroke: var(--mark-today); fill: none; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.3,1,.5,1); }
.ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring-label .val { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.ring-label .cap { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

/* Progress bar */
.bar { height: 9px; border-radius: 999px; background: var(--progress-track); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: var(--mark-fresh); box-shadow: inset 0 0 0 1.5px var(--mark-edge); transition: width .5s ease; }

/* ---------- Empty & skeleton ---------- */
.empty { text-align: center; padding: 34px 18px; }
.empty img, .empty .empty-art { width: 118px; height: 118px; margin: 0 auto 14px; }
.empty h3 { font-size: 21px; margin-bottom: 6px; }
.empty p { color: var(--text-secondary); max-width: 320px; margin: 0 auto 16px; }
.skeleton { background: linear-gradient(100deg, var(--card-elevated) 30%, var(--bg-secondary) 50%, var(--card-elevated) 70%); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; border-radius: 12px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-line { height: 14px; margin: 8px 0; }
.skel-card { height: 84px; margin-bottom: 12px; border-radius: 18px; }

/* ---------- Stat tiles ---------- */
.stat { text-align: center; padding: 14px; }
.stat .num { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1; }
.stat .cap { font-size: 12px; color: var(--text-secondary); margin-top: 5px; }

/* ---------- Modal / sheet ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: var(--overlay);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; animation: fadeIn .2s ease forwards;
}
@keyframes fadeIn { to { opacity: 1; } }
.modal {
  width: 100%; max-width: 640px;
  background: var(--card); border-radius: 24px 24px 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0));
  box-shadow: var(--shadow-lg);
  max-height: 90vh; max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - 8px);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(20px); animation: sheetUp .28s cubic-bezier(.2,1,.4,1) forwards;
}
@keyframes sheetUp { to { transform: translateY(0); } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: -22px -20px 14px; padding: 22px 20px 10px; position: sticky; top: -22px; z-index: 2; background: var(--card); }
.modal-head h3 { font-size: 22px; }
@media (min-width: 640px) {
  .modal-backdrop { align-items: center; }
  .modal { border-radius: 24px; margin: 20px; }
}

/* ---------- Toast ---------- */
#toast-host { position: fixed; left: 0; right: 0; bottom: calc(var(--bar-h) + 16px + var(--safe-b)); z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast {
  pointer-events: auto; max-width: 440px; width: fit-content;
  background: var(--text); color: var(--bg);
  padding: 12px 18px; border-radius: 14px; font-weight: 600; font-size: 14px;
  box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease, toastOut .3s ease forwards;
  animation-delay: 0s, 2.6s;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.input, .textarea, .select {
  width: 100%; padding: 12px 14px; border-radius: 13px;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent-hover); box-shadow: 0 0 0 3px var(--accent-light); }
.textarea { min-height: 92px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B817C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }

/* Toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { width: 46px; height: 27px; border-radius: 999px; background: var(--chart-track); box-shadow: inset 0 0 0 1.5px var(--text-muted); transition: background .2s ease; position: relative; flex-shrink: 0; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s ease; }
.switch input:checked + .track { background: var(--accent-2-deep); box-shadow: none; }
.switch input:checked + .track::after { transform: translateX(19px); }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-top: 1px solid var(--divider); }
.setting-row:first-child { border-top: none; }
.setting-row .label { font-weight: 500; }
.setting-row .hint { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Theme swatch preview */
.swatch-group { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { flex: 1; min-width: 92px; border: 2px solid var(--border); border-radius: 14px; padding: 10px; text-align: left; transition: border-color .15s ease; }
.swatch.selected { border-color: var(--accent-hover); }
.swatch .dots { display: flex; gap: 4px; margin-bottom: 8px; }
.swatch .dots span { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border); }
.swatch .name { font-size: 13px; font-weight: 600; }

/* Sub-tab navigation (for grouped modules) — wraps so no tab is ever hidden */
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; margin-bottom: 16px; }
.subtab { flex-shrink: 0; padding: 9px 15px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--text-secondary); background: var(--card-elevated); white-space: nowrap; min-height: 40px; }
.subtab.active { background: var(--accent-hover); color: var(--on-accent); }

/* Banner (recovery / overdue) */
.banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 16px; margin-bottom: 16px;
  background: var(--callout-bg); border: 1.5px solid var(--callout-border); color: var(--text);
}
.banner > svg { color: var(--accent-1-deep); }
.banner.amber { background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning-text) 35%, var(--warning-bg)); }
.banner.amber > svg { color: var(--warning-text); }
.banner > svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.banner .b-body { flex: 1; min-width: 0; }
.banner .row { flex-wrap: wrap; }
.banner .b-title { font-weight: 700; margin-bottom: 3px; overflow-wrap: anywhere; }
.banner .b-text { font-size: 14px; color: var(--text); overflow-wrap: anywhere; } /* tinted banner: full-strength text */

/* Coach mark */
.coachmark { position: fixed; z-index: 70; background: var(--text); color: var(--bg); padding: 12px 15px; border-radius: 14px; max-width: 240px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow-lg); }
.coachmark button { margin-top: 8px; font-weight: 700; color: var(--bg); text-decoration: underline; }

/* Room status mini cards */
.room-strip { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-snap-type: x proximity; }
.room-strip > * { scroll-snap-align: start; }
.room-strip-hint { font-size: 12px; color: var(--text-muted); text-align: right; margin-top: -4px; }
/* Wider screens: the room cards share the full width evenly instead of
   stopping short, and there's nothing to swipe, so no hint. */
@media (min-width: 640px) {
  .room-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); overflow: visible; }
  .room-strip > .room-mini { width: auto; }
  .room-strip-hint { display: none; }
}
.room-mini { color: var(--text); flex-shrink: 0; width: 118px; text-align: center; padding: 14px 10px; border-radius: 16px; background: var(--card-elevated); border: 1px solid var(--border); }
.room-mini .rname { font-size: 13px; font-weight: 600; margin-top: 8px; overflow-wrap: anywhere; }

/* Celebration overlay */
.celebrate {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  text-align: center; padding: 24px;
  animation: fadeIn .25s ease;
}
.celebrate h2 { font-size: 40px; margin-bottom: 6px; }
.celebrate .sub { color: var(--text-secondary); font-size: 16px; }
.confetti-piece { position: absolute; width: 9px; height: 14px; border-radius: 2px; animation: confettiFall linear forwards; }
@keyframes confettiFall { to { transform: translateY(105vh) rotate(540deg); opacity: 0; } }
.pop { animation: pop .4s cubic-bezier(.2,1.5,.5,1); }
@keyframes pop { 0% { transform: scale(1);} 45% { transform: scale(1.16);} 100% { transform: scale(1);} }

/* Timer display */
.timer-face { text-align: center; padding: 20px 0; }
.timer-face .time { font-size: 68px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -1px; }

/* Update banner (PWA) */
#update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--accent-hover); color: var(--on-accent);
  padding: 11px 16px; text-align: center; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
#update-banner { flex-wrap: wrap; padding-top: calc(11px + env(safe-area-inset-top, 0px)); }
#update-banner button { background: var(--card); color: var(--accent-text); padding: 7px 14px; border-radius: 9px; font-weight: 700; font-size: 13px; min-height: 36px; }
#update-banner button.later { background: transparent; color: var(--on-accent); text-decoration: underline; }
#boot-rescue { position: fixed; inset: auto 16px 50% 16px; z-index: 110; max-width: 420px; margin: 0 auto; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-lg); }
#boot-rescue p { margin-bottom: 10px; }
#boot-rescue button { background: var(--accent-hover); color: var(--on-accent); padding: 10px 14px; border-radius: 12px; font-weight: 700; margin-top: 4px; }

/* Kids: picture chores and the reward shop */
.kid-avatar { font-size: 52px; line-height: 1; }
.kid-points { font-size: 22px; font-weight: 700; color: var(--heading); }
.kid-chores, .kid-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.kid-chore, .kid-reward { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; border-radius: 18px; border: 2px solid var(--btn-ghost-border); background: var(--surface); color: var(--text); text-align: center; min-height: 140px; }
.kid-chore-emoji { font-size: 44px; line-height: 1.1; }
.kid-chore-title { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.kid-chore-pts { font-weight: 700; font-size: 14px; color: var(--chip-4-text); background: var(--chip-4-bg); border-radius: 999px; padding: 2px 10px; }
.kid-chore.done { background: var(--success-bg); border-color: var(--success-text); }
.kid-chore.done .kid-chore-title { color: var(--success-text); }
.kid-reward { border-style: dashed; }
.kid-reward.locked { opacity: 1; color: var(--text-muted); background: var(--surface-alt); cursor: not-allowed; }
.emoji-pill { font-size: 20px; min-width: 44px; justify-content: center; padding: 6px 10px; }

/* Sprout, the growing plant */
.grower-card { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.grower-plant { flex: 0 0 auto; margin: 0 auto; }
.grower-card > div:last-child { flex: 1 1 220px; }

/* Before / after photo pair */
.ba-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ba-pair figure { margin: 0; position: relative; }
.ba-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); }
.ba-pair figcaption { position: absolute; left: 8px; bottom: 8px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }

/* "What can you see?" picker */
.seen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.seen { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; border: 1.5px solid var(--btn-ghost-border); background: var(--surface); color: var(--text); font-weight: 600; font-size: 13px; text-align: center; min-height: 84px; }
.seen-emoji { font-size: 28px; line-height: 1; }
.seen.on { background: var(--chip-2-bg); border-color: var(--accent-2-deep); color: var(--chip-2-text); box-shadow: inset 0 0 0 1.5px var(--accent-2-deep); }

/* Clean-with-me buddy: a slow bob and a sweeping broom (still when motion is reduced) */
.buddy .buddy-body { animation: buddyBob 2.4s ease-in-out infinite; transform-origin: 56px 100px; }
.buddy .buddy-broom { animation: buddySweep 1.6s ease-in-out infinite; transform-origin: 88px 40px; }
@keyframes buddyBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes buddySweep { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }

/* Free demo (all inert in the paid app: .is-demo is only ever set by the demo) */
html.is-demo .demo-hide { display: none !important; }
.demo-bar { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); background: var(--chip-2-bg); color: var(--chip-2-text); font-weight: 600; font-size: 14px; text-align: center; border-bottom: 1px solid var(--border); }
.demo-card { border: 1.5px solid var(--border-accent); background: var(--callout-bg); }

/* Luna Sync card */
.sync-code { font-size: 40px; font-weight: 700; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; margin: 6px 0 4px; color: var(--heading); }
.sync-code-input { font-size: 24px !important; letter-spacing: 4px; text-align: center; font-variant-numeric: tabular-nums; }
.sync-pics { display: flex; justify-content: center; gap: 18px; margin: 12px 0; flex-wrap: wrap; }
.sync-pics > span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sync-pic { font-size: 40px; line-height: 1.1; }
.sync-key { display: block; width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: 1px; text-align: left; padding: 12px 14px; border-radius: 12px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text); overflow-wrap: anywhere; }
.sync-key-hidden { color: transparent; text-shadow: 0 0 9px var(--text-muted); cursor: pointer; }

/* SW error banner */
#sw-error-banner { position: fixed; bottom: calc(var(--bar-h) + var(--safe-b)); left: 0; right: 0; z-index: 100; background: var(--error); color: #fff; padding: 10px 16px; font-size: 13px; text-align: center; cursor: pointer; }

/* ---------- Accessibility modes ---------- */
body.dyslexia, body.dyslexia .task-title, body.dyslexia .input, body.dyslexia .btn {
  font-family: "OpenDyslexic", "Comic Sans MS", "DM Sans", sans-serif !important;
}
body.dyslexia h1, body.dyslexia h2, body.dyslexia h3, body.dyslexia h4 { font-family: "OpenDyslexic", "DM Sans", sans-serif !important; letter-spacing: .3px; }

/* Low-stimulation mode: flatten shadows, calm accents */
body.low-stim .card { box-shadow: none; }
body.low-stim .fab-start, body.low-stim .btn-primary { box-shadow: none; }
body.low-stim * { animation-duration: .001s !important; }

/* Animation intensity */
body.anim-off *, body.anim-off *::before, body.anim-off *::after { animation: none !important; transition: none !important; }
body.anim-subtle .confetti-piece { display: none; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Print: only the data, no app chrome, natural flow ---------- */
@media print {
  .rail, .tabbar, .topbar, .fab-start, .fab-add, #toast-host, .coachmark,
  #update-banner, #sw-error-banner, .subtabs, .modal-backdrop, .celebrate,
  .btn, .icon-btn, .pill, .pill-row, .switch, .task-actions { display: none !important; }
  .task-check { display: flex !important; } /* keep completion state visible */
  /* Print is always dark ink on white paper, whatever the theme */
  html[data-theme], :root { --surface: #fff; --surface-alt: #fff; --heading: #000; --link: #000; --mark-edge: #555; --text: #000; --text-secondary: #333; --text-muted: #555; --bg: #fff; --bg-secondary: #fff; --card: #fff; --card-elevated: #fff; --border: #bbb; --divider: #ddd; --accent-text: #000; --secondary-text: #000; --warning-text: #000; }
  html, body { background: #fff !important; color: #000 !important; }
  .fab-start, .fab-add, #boot-rescue, .room-strip-hint, .demo-bar { display: none !important; }
  .room-strip { flex-wrap: wrap; overflow: visible; }
  .app-shell, .main-col { display: block !important; min-height: 0 !important; height: auto !important; }
  .view { max-width: none !important; padding: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #bbb !important; break-inside: avoid; }
  .banner { border: 1px solid #bbb !important; background: #fff !important; }
  body { padding-top: 0 !important; }
  a { color: inherit !important; text-decoration: none !important; }
}

/* Utility spacing */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; }
.gap-sm { gap: 8px; } .flex-1 { flex: 1; } .text-center { text-align: center; }
.hidden { display: none !important; }
.divider { height: 1px; background: var(--divider); margin: 14px 0; border: none; }
.list-plain { list-style: none; margin: 0; padding: 0; }

/* iPhone draws date/time boxes at its own width and ignores width:100% —
   reset their look so they fit the card like any other field. */
.input[type="date"], .input[type="time"], .input[type="datetime-local"], .input[type="month"], .input[type="week"] {
  -webkit-appearance: none; appearance: none; display: block;
  min-width: 0; max-width: 100%; text-align: left; min-height: 46px;
}
.input::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.25em; }
.field > * { min-width: 0; max-width: 100%; }

/* Desktop overrides for floating bits defined above (must come last). */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  #toast-host { bottom: 24px; }
  #sw-error-banner { bottom: 0; }
}

/* While a pop-up is open the bottom bar and floating buttons step aside,
   so nothing under the sheet can catch a tap meant for Save. */
body.modal-open .tabbar, body.modal-open .fab-start, body.modal-open .fab-add { visibility: hidden; }