/* ============================================================
   ADHD Home — Feature styles (v2): welcome panel + illustration,
   Home Calm, Focus Room, calendar, laundry, pile sort, family,
   habits, search, sync, print. Colours from theme tokens only.
   ============================================================ */

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .header-search { display: none; } }

/* ---------- Home welcome panel ----------
   The section is the size container; the grid inside lays out by the
   panel's own width (the sidebar takes a varying share of the screen).
   Phones keep the picture small beside the message so Today's Top 3
   stays near the top. */
.ah-hero {
  container-type: inline-size;
  position: relative; overflow: hidden;
  background: var(--hero-bg, var(--surface));
  border: 1.5px solid var(--hero-border, var(--border));
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
}
.ah-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  grid-template-areas: "text art" "foot foot";
  gap: 10px 12px;
  align-items: center;
  padding: 16px;
}
.ah-hero__text { grid-area: text; min-width: 0; }
.ah-hero__art { grid-area: art; line-height: 0; }
.ah-hero__art svg { width: 100%; height: auto; display: block; }
.ah-hero__foot { grid-area: foot; min-width: 0; }
.ah-hero__eyebrow { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--hero-eyebrow-bg); color: var(--hero-eyebrow-text); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; }
.ah-hero__greeting { margin-top: 8px; font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); color: var(--heading); overflow-wrap: anywhere; }
.ah-hero__title { margin: 6px 0 0; font-weight: 700; color: var(--heading); font-size: 1rem; }
.ah-hero__line { margin: 2px 0 0; color: var(--text); font-size: 0.92rem; line-height: 1.45; }
.ah-tiles { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ah-tile { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 9px 11px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.ah-tile__label { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.ah-tile__value { font-size: 1.05rem; color: var(--heading); line-height: 1.25; overflow-wrap: anywhere; }
.ah-tile__sub { font-size: 0.75rem; color: var(--text-muted); overflow-wrap: anywhere; }
@media (hover: hover) { .ah-tile:hover { border-color: var(--border-accent); } }
@container (max-width: 380px) {
  .ah-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); }
}
@container (min-width: 600px) {
  .ah-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: 14px 22px; padding: 22px 26px; }
  .ah-hero__title { font-size: 1.1rem; }
  .ah-hero__line { font-size: 1rem; }
}
@container (min-width: 880px) {
  .ah-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); grid-template-areas: "text art" "foot art"; }
  .ah-hero__art { align-self: end; }
}
html[data-calm="on"] .ah-hero { background: var(--surface); border-color: var(--border); }
html[data-calm="on"] .ah-hero__art { display: none; }
html[data-calm="on"] .ah-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "foot"; }

/* Illustration fills (classes, not fill attributes — see hero-art.js) */
.ah-glow { fill: var(--art-glow); }
.ah-shadow { fill: var(--art-shadow); opacity: 0.08; }
.ah-spark { fill: var(--art-spark); animation: ahTwinkle 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ah-spark--b { animation-delay: 1.5s; } .ah-spark--c { animation-delay: 3s; }
.ah-spark--soft { opacity: 0.55; }
.ah-chimney { fill: var(--art-roof); }
.ah-wall { fill: var(--art-wall); }
.ah-roof { fill: var(--art-roof); stroke: var(--art-roof); stroke-width: 4; stroke-linejoin: round; }
.ah-roof-rim { fill: var(--art-ink); opacity: 0.1; }
.ah-roof-window { fill: var(--art-page); }
.ah-window { fill: var(--art-page); }
.ah-curtain { fill: var(--art-curtain); }
.ah-sill { fill: var(--art-ink); opacity: 0.14; }
.ah-door { fill: var(--art-door); }
.ah-knob { fill: var(--art-ink); opacity: 0.45; }
.ah-heart { fill: var(--art-heart); }
.ah-step { fill: var(--art-ink); opacity: 0.12; }
.ah-ink-line { fill: none; stroke: var(--art-ink); stroke-width: 2; stroke-linecap: round; opacity: 0.25; }
.ah-ink-line--soft { opacity: 0.2; }
.ah-basket { fill: var(--art-basket); }
.ah-weave { fill: none; stroke: var(--art-ink); stroke-width: 2; stroke-linecap: round; opacity: 0.13; }
.ah-towel1 { fill: var(--art-towel1); } .ah-towel2 { fill: var(--art-towel2); }
.ah-towel-stripe { fill: var(--art-page); opacity: 0.55; }
.ah-bottle { fill: var(--art-bottle); }
.ah-neck { fill: var(--art-bottle); }
.ah-cap { fill: var(--art-cap); }
.ah-label { fill: var(--art-page); opacity: 0.85; }
.ah-mist circle { fill: var(--art-mist); opacity: 0.6; animation: ahMist 3.6s ease-in-out infinite; }
.ah-mist circle:nth-child(2) { animation-delay: 0.5s; } .ah-mist circle:nth-child(3) { animation-delay: 1s; }
.ah-pot { fill: var(--art-pot); }
.ah-leaf { fill: var(--art-leaf); } .ah-leaf2 { fill: var(--art-leaf2); }
@keyframes ahTwinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.82); } }
@keyframes ahMist { 0% { transform: translateX(-2px); opacity: 0; } 40% { opacity: 0.6; } 100% { transform: translateX(6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ah-spark, .ah-mist circle { animation: none; } }
html[data-calm="on"] .ah-spark, html[data-calm="on"] .ah-mist circle { animation: none; }

/* ---------- Mode bar + notices ---------- */
.mode-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.mode-item { display: inline-flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 600; color: var(--text); }
.mode-links { margin-left: auto; }
@media (max-width: 560px) {
  .mode-links { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr auto; align-items: stretch; }
  .mode-links .btn { min-width: 0; }
}
.notices > * + * { margin-top: 0; }
.notices { display: flex; flex-direction: column; gap: 0; }
.install-card { margin-bottom: 14px; }
.install-steps { margin: 4px 0 0; padding-left: 1.3rem; }
.install-steps li { margin-bottom: 4px; }

.now-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--info-bg); color: var(--info-text); }
.now-next__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.now-next__item { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.now-next .tag.c5 { background: var(--surface); }
.rings-row { display: flex; gap: 14px; justify-content: space-around; flex-wrap: wrap; }
.quote { font-size: 1.05rem; color: var(--text); font-style: italic; line-height: 1.5; }
.is-muted { opacity: 0.6; }
.tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--chip-1-bg); color: var(--chip-1-text); font-size: 0.72rem; font-weight: 700; }
a.tab-btn { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- Filters ---------- */
.filter-card { margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.filter-label { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); min-width: 64px; }

/* ---------- Energy ---------- */
.energy-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.energy-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 12px; border: 1px solid var(--btn-ghost-border); background: var(--surface); color: var(--text); font: inherit; font-size: 0.75rem; cursor: pointer; min-width: 0; }
.energy-btn span:first-child { font-size: 1.3rem; }
.energy-btn[aria-pressed="true"] { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: transparent; font-weight: 700; }

/* ---------- Timeline ---------- */
.timeline { display: flex; flex-direction: column; gap: 2px; }
.timeline-item { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--divider); }
.timeline-item > * { min-width: 0; }
.timeline-item.past { opacity: 0.65; }
.timeline-time { min-width: 4.8rem; color: var(--chip-1-text); font-size: 0.9rem; }
.timeline-now { margin: 4px 0; padding: 4px 10px; border-radius: 999px; align-self: flex-start; background: var(--btn-secondary-bg); color: var(--btn-secondary-text); font-size: 0.78rem; font-weight: 700; }

/* ---------- Weekly Reset ---------- */
.week-step__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.week-step__head label { cursor: pointer; }
.week-step.is-step-done { border-color: var(--success-bg); }
.week-step.is-step-done .widget-title { color: var(--text-muted); }
.week-peek { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); }
.week-peek__day { padding: 8px; border-radius: 10px; background: var(--surface-alt); border: 1px solid var(--border); min-width: 0; }
.week-peek__day.is-today { border-color: var(--accent-1-deep); }
.week-peek__name { font-weight: 700; font-size: 0.82rem; margin-bottom: 4px; }
.week-peek__item { font-size: 0.82rem; overflow-wrap: anywhere; }

/* ---------- Visual timer (Focus Room, resets) ---------- */
.timer-wrap { position: relative; width: min(260px, 70vw); aspect-ratio: 1; margin: 12px auto 4px; display: grid; place-items: center; }
.timer-wrap.small { width: min(170px, 46vw); }
.time-disc { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--accent-1) calc(var(--left, 1) * 360deg), var(--chart-track) 0); box-shadow: inset 0 0 0 2px var(--chart-edge), var(--shadow-card); }
.time-disc::after { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
.timer-digits { position: relative; z-index: 1; font-size: clamp(2rem, 1.6rem + 2vw, 2.8rem); color: var(--heading); line-height: 1.1; text-align: center; }
.timer-wrap.small .timer-digits { font-size: 1.6rem; }
.timer-wrap.breathing { animation: breatheRing 6s ease-in-out infinite; }
@keyframes breatheRing { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.focus-label { text-align: center; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); margin-top: 6px; overflow-wrap: anywhere; }
.now-step { margin-top: 14px; text-align: center; }
.now-step-text { font-size: 1.15rem; font-weight: 700; margin: 4px 0 10px; color: var(--heading); }
.checkin { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--callout-bg); border: 1.5px solid var(--callout-border); text-align: center; }
.play-step { text-align: center; font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.3rem); margin: 10px 0 16px; overflow-wrap: anywhere; }
.big-pick { font-size: 1.25rem; font-weight: 700; text-align: center; margin: 6px 0 12px; color: var(--heading); }

/* ---------- Rooms ---------- */
.room-tile { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; background: var(--surface-alt); border: 1px solid var(--border); min-width: 0; }
.room-tile__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: none; padding: 0; font: inherit; color: var(--heading); cursor: pointer; text-align: left; }
.room-tile__name { font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.photo-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.photo-box { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.photo-box img { width: 100%; border-radius: 10px; border: 1px solid var(--border); object-fit: cover; max-height: 220px; }
.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); flex-shrink: 0; }

/* ---------- Laundry ---------- */
.laundry-pipeline { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.load-card { flex-direction: column; align-items: stretch; }
.kanban-title { font-family: "DM Sans", sans-serif; font-size: 0.92rem; font-weight: 700; color: var(--heading); margin-bottom: 8px; }

/* ---------- Pile sort ---------- */
.sort-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); margin-top: 10px; }
.sort-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px; border-radius: 16px; border: 1.5px solid var(--btn-ghost-border); background: var(--surface); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.sort-btn svg { color: var(--accent-2-deep); }
.sort-count { font-size: 1.4rem; color: var(--heading); }
.sort-btn:active { background: var(--btn-secondary-bg); }
.sort-actions { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin-top: 16px; }
.sort-actions .is-suggested { box-shadow: inset 0 0 0 2px var(--accent-1-deep); }
.inbox-actions { margin-top: 8px; }
.inbox-item { flex-wrap: wrap; }
.inbox-item .task-body { flex: 1 1 220px; }

/* ---------- Calendar ---------- */
.month-wrap { overflow-x: auto; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; min-width: 280px; }
.month-head { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); padding: 2px 0; }
.month-cell { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 64px; padding: 5px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; min-width: 0; overflow: hidden; }
.month-cell.out { opacity: 0.45; }
.month-cell.is-today { border-color: var(--accent-1-deep); box-shadow: inset 0 0 0 1px var(--accent-1-deep); }
.month-num { font-size: 0.82rem; }
.month-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.month-peek { font-size: 0.68rem; line-height: 1.2; color: var(--text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.month-grid.compact .month-cell { min-height: 48px; cursor: default; }
.month-grid.compact button.month-cell { cursor: pointer; }
.month-cell.has-bill { background: var(--warning-bg); color: var(--warning-text); border-color: transparent; }
.month-cell.has-paid { background: var(--success-bg); color: var(--success-text); border-color: transparent; }
.month-cell.has-bill .month-peek, .month-cell.has-paid .month-peek { color: inherit; }
@media (max-width: 480px) { .month-peek { display: none; } .month-cell { min-height: 46px; } }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-edge) 45%, transparent); }
.dot { width: 9px; height: 9px; box-shadow: 0 0 0 1px var(--chart-edge); }
.dot-appointment { background: var(--chart-3); } .dot-task, .dot-chore { background: var(--chart-4); } .dot-done { background: var(--chart-track); }
.dot-bill { background: var(--chart-6); } .dot-maintenance, .dot-document { background: var(--chart-2); }
.dot-birthday { background: var(--chart-1); } .dot-meal { background: var(--chart-5); }
.chore-item { flex-direction: column; align-items: stretch; gap: 8px; }
.chore-item > .btn { align-self: flex-start; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 0.82rem; color: var(--text-muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Meals ---------- */
.meal-week .kanban-col.is-today { border-color: var(--accent-1-deep); }
.meal-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; padding: 7px 9px; margin-bottom: 6px; border-radius: 10px; border: 1px dashed var(--btn-ghost-border); background: var(--surface); color: var(--text-muted); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.meal-cell.has-meal { border-style: solid; color: var(--text); }
.meal-cell.is-takeout { background: var(--chip-4-bg); color: var(--chip-4-text); border-color: transparent; }
.meal-slot { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.meal-cell.is-takeout .meal-slot { color: inherit; }
.meal-name { font-size: 0.88rem; overflow-wrap: anywhere; }
.pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; margin-top: 6px; }
.pick-item { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ing-list { padding-left: 1.2rem; margin: 4px 0; }
.ing-list li.have { color: var(--success-text); }

/* ---------- Money ---------- */
.budget-row { display: block; width: 100%; padding: 8px 0; background: none; border: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.goal-row { margin-bottom: 12px; }

/* ---------- Family ---------- */
.thanks-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); }
.thanks-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 14px; text-align: center; min-width: 0; overflow-wrap: anywhere; }
.thanks-emoji { font-size: 1.6rem; }
.thanks-points { font-size: 1.5rem; }
.tag-c1 { background: var(--chip-1-bg); color: var(--chip-1-text); } .tag-c2 { background: var(--chip-2-bg); color: var(--chip-2-text); }
.tag-c3 { background: var(--chip-3-bg); color: var(--chip-3-text); } .tag-c4 { background: var(--chip-4-bg); color: var(--chip-4-text); }
.tag-c5 { background: var(--chip-5-bg); color: var(--chip-5-text); } .tag-c6 { background: var(--chip-6-bg); color: var(--chip-6-text); }
.thanks-tile .hint { color: inherit; opacity: 0.85; }
.member-card { border-top-width: 5px; }
.member-c1 { border-top-color: var(--chip-1-bg); } .member-c2 { border-top-color: var(--chip-2-bg); } .member-c3 { border-top-color: var(--chip-3-bg); }
.member-c4 { border-top-color: var(--chip-4-bg); } .member-c5 { border-top-color: var(--chip-5-bg); } .member-c6 { border-top-color: var(--chip-6-bg); }
.note-item.is-pinned { background: var(--callout-bg); border-radius: 10px; }
.note-item [aria-pressed="true"] { color: var(--accent-1-deep); }
.print-only { display: none; }

/* ---------- Habits ---------- */
.routine-box, .habit-box { border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin-bottom: 10px; background: var(--surface); }
.habit-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.habit-day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text-muted); font: inherit; font-size: 0.72rem; cursor: pointer; min-width: 0; }
.habit-day.today { border-color: var(--accent-1-deep); color: var(--text); font-weight: 700; }
.habit-day__dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--btn-ghost-border); display: grid; place-items: center; }
.habit-day.on .habit-day__dot { background: var(--accent-2); border-color: var(--accent-2-deep); color: var(--btn-primary-text); }

/* ---------- SOS ---------- */
.sos-page { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.sos-title { font-size: 2rem; margin-bottom: 6px; }
.breath { width: 140px; height: 140px; margin: 6px auto 10px; border-radius: 50%; background: var(--callout-bg); border: 2px solid var(--callout-border); display: grid; place-items: center; }
.breath-dot { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-2); transition: transform 4s ease-in-out; }
.breath.on[data-phase="0"] .breath-dot { transform: scale(2.4); }
.breath.on[data-phase="1"] .breath-dot { transform: scale(2.4); }
.breath.on[data-phase="2"] .breath-dot { transform: scale(1); transition-duration: 6s; }
.breath.still .breath-dot { transition: none; }
.breath-words { text-align: center; font-weight: 600; min-height: 1.5em; }

/* ---------- Search ---------- */
.search-results { margin-top: 10px; }
.search-hit { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border: none; border-bottom: 1px solid var(--divider); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.search-hit .nav-icon { color: var(--accent-2-deep); display: inline-flex; }
.search-hit .grow { display: flex; flex-direction: column; min-width: 0; }
.search-hit-title { font-weight: 600; overflow-wrap: anywhere; }
@media (hover: hover) { .search-hit:hover { background: var(--surface-alt); } }
.more-list { display: flex; flex-direction: column; gap: 2px; }
.more-list .nav-link { color: var(--text); }
.more-list .nav-link .nav-icon { color: var(--accent-2-deep); }
.more-list .nav-link[aria-current="page"] { background: var(--surface-alt); box-shadow: inset 3px 0 0 var(--accent-1-deep); }
.more-search { border: none; background: var(--surface-alt); font: inherit; width: 100%; }

/* ---------- Sync ---------- */
.sync-code { font-size: 2.4rem; font-weight: 700; letter-spacing: 0.12em; text-align: center; margin: 14px 0 6px; color: var(--heading); font-variant-numeric: lining-nums tabular-nums; }
.sync-code-input { font-size: 1.4rem !important; letter-spacing: 0.12em; text-align: center; }
.sync-pics { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 12px 0; }
.sync-pic { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 4rem; }
.sync-pic-emoji { font-size: 2.3rem; }
.sync-key { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.02rem; word-break: break-all; background: var(--surface-alt); border: 1px solid var(--border); padding: 12px; border-radius: 10px; margin-top: 10px; }

/* ---------- Misc ---------- */
.plain-list { margin: 8px 0 0; padding-left: 1.2rem; }
.plain-list li { margin-bottom: 4px; }
.help-guide h4 { font-family: "DM Sans", sans-serif; font-weight: 700; margin: 14px 0 4px; font-size: 1rem; }
.help-guide p { color: var(--text); }
.help-guide .lead { font-size: 1.05rem; }
.cal-item { gap: 10px; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; }
details[open] > summary::before { content: "▾ "; }
.project-tile { margin-bottom: 8px; }

/* ---------- Print ---------- */
@media print {
  .print-only { display: block !important; }
  body.printing-chart .app-main > #page-root > .page-view > div > *:not(.stack):not(div) { display: none; }
  body.printing-chart #page-root .app-header, body.printing-chart #page-root .widget-grid, body.printing-chart .ah-hero { display: none !important; }
  .chore-chart table { width: 100%; border-collapse: collapse; margin: 10px 0; }
  .chore-chart th, .chore-chart td { border: 1px solid #999; padding: 6px 8px; text-align: left; font-size: 11pt; }
  .chore-chart td:nth-child(n+3), .chore-chart th:nth-child(n+3) { text-align: center; width: 9%; }
  body:not(.printing-chart) .chore-chart { display: none !important; }
  .month-cell { break-inside: avoid; }
  .timeline-now, .mode-bar, .notices, .now-next, .filter-card, .inline-add { display: none !important; }
  .tag { border: 1px solid #bbb; background: #fff !important; color: #111 !important; }
}

/* Narrow columns (dopamine menu, declutter lists): smaller icon buttons so they stay on the row. */
.kanban-col .list-item { padding: 8px 2px; gap: 4px 8px; }
.kanban-col .list-item > .grow { flex-basis: 5rem; }
.kanban-col .btn-icon { width: 32px; height: 32px; min-height: 32px; }

/* Horizontal bars (charts with many categories, and every chart on phones). */
.hbar-chart { display: grid; grid-template-columns: fit-content(9rem) minmax(3rem, 1fr) auto; align-items: center; gap: 8px 10px; font-size: 0.9rem; }
.hbar-row { display: contents; }
.hbar-chart .chart-summary { grid-column: 1 / -1; }
.hbar-label { overflow-wrap: break-word; hyphens: auto; color: var(--text); }
.hbar-track { height: 12px; border-radius: 999px; background: var(--chart-track); overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-edge) 35%, transparent); }
.hbar-value { color: var(--text); font-size: 0.88rem; }
@media (max-width: 420px) { .hbar-chart { gap: 8px; font-size: 0.85rem; } }