/* demo.css - Dayreef demo wall + parent phone (brand/DESIGN-EN.md, English / LTR).
   Colours, fonts and type sizes: var(--fh-*) tokens from theme.css only.
   Wall type is two-tier (CEO, 10 Nov 2026): event titles, times and the next event
   >= 24px (titles 40 / dense 32, times 28, clock 88, date 72); secondary labels
   (chips, captions, meta) may go to 18px; nothing on the wall is below 18px.
   The phone view uses normal phone sizes (it is not the wall). */
.demo-body { margin: 0; background: var(--fh-color-bg-alt); color: var(--fh-color-text); font-family: var(--fh-font-sans); overflow-x: hidden; }
.demo-body *, .demo-body *::before, .demo-body *::after { box-sizing: border-box; }
.dr-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- demo chrome (outside the wall) */
.demo-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 8px 12px; }
.demo-note { margin: 0; font-size: var(--fh-text-md); color: var(--fh-color-text-muted); }
.demo-note a, .demo-caption a { color: var(--fh-color-primary-on-bg); font-weight: var(--fh-weight-semibold); }
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.seg { display: inline-flex; background: var(--fh-wall-surface-2); border-radius: var(--fh-radius-lg); padding: 3px; gap: 2px; }
.seg button, .ctl { font: inherit; font-size: var(--fh-text-md); min-height: var(--fh-target); padding: 6px 14px; border-radius: var(--fh-radius-md); border: 0; background: transparent; color: var(--fh-toggle-inactive); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--fh-color-primary); color: var(--fh-color-primary-text); font-weight: var(--fh-weight-semibold); }
.ctl { background: var(--fh-color-surface); border: 1px solid var(--fh-color-border); color: var(--fh-color-text); }
.phone-toggle { display: none; }
.demo-caption { text-align: center; margin: 8px 0 12px; font-size: var(--fh-text-md); color: var(--fh-color-text-muted); }
.embed .standalone-only { display: none; }
.embed .demo-caption { display: none; }
button:focus-visible { outline: 3px solid var(--fh-color-focus); outline-offset: 2px; }

.stage-outer { margin: 0 auto; position: relative; overflow: hidden; }
.stage { display: flex; gap: 40px; align-items: flex-start; transform-origin: 0 0; width: max-content; }

/* ---------- shared app styles (phone scale; the wall overrides below) */
.dr-app { line-height: 1.55; background: var(--fh-wall-bg); color: var(--fh-wall-text); font-family: var(--fh-font-sans); display: flex; flex-direction: column; overflow: hidden; position: relative; -webkit-font-smoothing: antialiased; }
.dr-app button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.dr-app h1, .dr-app h2, .dr-app h3, .dr-app p { margin: 0; font-family: var(--fh-font-sans); }
.dr-app ol, .dr-app ul { list-style: none; margin: 0; padding: 0; }
.dr-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.dr-avatar { display: inline-flex; flex-shrink: 0; width: var(--fh-avatar-phone); height: var(--fh-avatar-phone); border-radius: 50%; overflow: hidden; background: var(--fh-color-bg-alt); }
.dr-avatar img { width: 100%; height: 100%; display: block; }

.dr-masthead { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 6px 18px 0; min-height: 46px; }
.dr-brand { display: flex; align-items: center; gap: 9px; font-weight: var(--fh-weight-semibold); font-size: var(--fh-text-md); }
.dr-brand img { width: 22px; height: 22px; display: block; }
.dr-mast-end { display: flex; align-items: center; gap: 8px; }
.dr-clock { font-size: var(--fh-text-md); color: var(--fh-wall-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dr-menu { display: grid; place-items: center; width: var(--fh-target); height: var(--fh-target); border: 1px solid var(--fh-menu-border) !important; border-radius: 50%; background: var(--fh-menu-bg) !important; }

.dr-date { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 6px 18px 0; flex-shrink: 0; position: relative; }
.dr-eyebrow { display: flex; align-items: center; gap: 6px; color: var(--fh-wall-text-muted); font-size: var(--fh-text-sm); margin-bottom: 4px; line-height: var(--fh-leading-normal); }
.dr-eyebrow .dr-icon { width: 18px; height: 18px; }
.dr-date-title { display: flex; align-items: center; gap: 7px; }
.dr-date h1 { font-size: 1.625rem; line-height: var(--fh-leading-tight); font-weight: var(--fh-weight-semibold); letter-spacing: var(--fh-tracking-wall); }
.dr-day-symbol { width: 25px; height: 25px; color: var(--fh-sun); }
.dr-day { display: flex; align-items: center; background: var(--fh-wall-surface-2); border-radius: var(--fh-radius-md); padding: 3px; flex-shrink: 0; }
.dr-day button { min-height: var(--fh-target); min-width: var(--fh-target); padding: 7px; border-radius: var(--fh-radius-md); font-size: var(--fh-text-sm); color: var(--fh-toggle-inactive); }
.dr-day button[aria-pressed="true"] { background: var(--fh-wall-surface); color: var(--fh-wall-text); font-weight: var(--fh-weight-semibold); box-shadow: var(--fh-shadow-sm); }

.dr-household { display: flex; align-items: center; gap: 4px; margin: 4px 18px 2px; justify-content: space-between; flex-shrink: 0; }
.dr-chip { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: var(--fh-target); min-width: var(--fh-target); padding: 2px 4px; border-radius: 25px; font-size: var(--fh-text-sm); line-height: 1.2; border: 1px solid transparent !important; }
.dr-chip small { display: none; color: var(--fh-wall-text-muted); }
.dr-chip[aria-pressed="true"]:not(.all) { background: var(--fh-chip-all-bg) !important; border-color: var(--fh-chip-all-border) !important; }
.dr-chip.all { min-width: 48px; min-height: 48px; justify-content: center; background: var(--fh-chip-all-bg) !important; border-color: var(--fh-chip-all-border) !important; color: var(--fh-chip-all-ink); font-weight: var(--fh-weight-semibold); }
.dr-chip.all[aria-pressed="false"] { background: transparent !important; }
.dr-hint { display: none; margin-inline-start: auto; color: var(--fh-hint); }

.dr-main { margin-inline: 18px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dr-agenda-sec { flex-shrink: 0; }
.dr-sec-head { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; border-bottom: 1px solid var(--fh-color-border); }
.dr-sec-head h2 { font-size: var(--fh-text-2xl); font-weight: var(--fh-weight-semibold); letter-spacing: -.02em; line-height: 1.3; }
.dr-sec-meta { margin-inline-start: auto; color: var(--fh-meta); font-size: var(--fh-text-sm); }
.dr-add { display: flex; align-items: center; gap: 4px; color: var(--fh-chip-all-ink) !important; font-size: var(--fh-text-sm); min-height: var(--fh-target); }
.dr-add .dr-icon { width: 16px; height: 16px; }

.dr-agenda { padding-top: 4px; }
.dr-event { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 8px; align-items: center; position: relative; min-height: 44px; padding: 4px 4px; border-bottom: 1px solid var(--fh-color-border); }
.dr-event:last-child { border-bottom: 0; }
.dr-time { font-size: var(--fh-text-lg); font-weight: var(--fh-weight-medium); color: var(--fh-wall-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dr-event-text { display: block; min-width: 0; }
.dr-event-title { font-size: var(--fh-text-2xl); line-height: 1.3; font-weight: var(--fh-weight-medium); }
.dr-event-title .dr-icon { width: 20px; height: 20px; vertical-align: -3px; margin-inline-end: 5px; color: var(--fh-wall-text-muted); }
.dr-participants { display: flex; align-items: center; justify-content: flex-end; gap: 9px; color: var(--fh-wall-text-muted); }
.dr-avatars { display: flex; flex-shrink: 0; }
.dr-avatars .dr-avatar { width: 27px; height: 27px; border: 2px solid var(--fh-wall-bg); }
.dr-avatars .dr-avatar + .dr-avatar { margin-inline-start: -10px; }
.dr-names { display: none; text-align: end; line-height: var(--fh-leading-normal); }
.dr-next-label { display: block; width: fit-content; font-size: var(--fh-text-xs); color: var(--fh-next-label); margin-top: 3px; }
.dr-tag-new { display: inline-block; margin-top: 3px; font-size: var(--fh-text-xs); font-weight: var(--fh-weight-semibold); color: var(--fh-color-primary-text); background: var(--fh-color-primary); border-radius: var(--fh-radius-full); padding: 1px 8px; }
.dr-event.next { background: var(--fh-next-bg); border-color: transparent; border-radius: 12px; margin: 2px 0; padding-block: 6px; }
.dr-event.next::before { content: ""; position: absolute; width: 4px; border-radius: 3px; inset-block: 10px; inset-inline-start: 0; background: var(--fh-next-bar); }
.dr-event.next .dr-time, .dr-event.next .dr-event-title { color: var(--fh-next-ink); font-weight: var(--fh-weight-semibold); }
.dr-event.next .dr-avatar { border-color: var(--fh-next-bg); }
.dr-event.fresh { animation: dr-fresh 2.4s ease-out; }
@keyframes dr-fresh { 0% { background: var(--fh-chip-all-bg); transform: translateY(-6px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .dr-event.fresh, .dr-meal.fresh { animation: none; } }
.dr-empty { padding: 12px 4px; color: var(--fh-wall-text-muted); }

.dr-cooking { display: flex; gap: 7px; align-items: center; padding: 8px; margin-top: 4px; color: var(--fh-cooking-ink); border-radius: 9px; background: var(--fh-cooking-bg); }
.dr-cooking .dr-icon { width: 18px; height: 18px; }
.dr-cooking-title { font-size: var(--fh-text-md); font-weight: var(--fh-weight-medium); }
.dr-cooking-meta { margin-inline-start: auto; font-size: var(--fh-text-xs); color: var(--fh-cooking-meta); }

.dr-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 6px; flex-shrink: 0; }
.dr-lower h2 { display: flex; align-items: center; gap: 6px; font-size: var(--fh-text-md); font-weight: var(--fh-weight-semibold); margin-bottom: 8px; }
.dr-lower h2 .dr-icon { width: 17px; height: 17px; color: var(--fh-wall-text-muted); }
.dr-meals { border-inline-start: 1px solid var(--fh-color-border); padding-inline-start: 14px; }
.dr-counter { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 50%; font-size: var(--fh-text-xs); background: var(--fh-counter-bg); color: var(--fh-counter-ink); }
.dr-task-list { display: grid; gap: 9px; }
.dr-task { display: flex; gap: 7px; align-items: flex-start; }
.dr-checkbox { display: block; min-width: 19px; width: 19px; height: 19px; border: 1.5px solid var(--fh-checkbox-border); border-radius: 5px; margin-top: 2px; }
.dr-task-title { font-size: var(--fh-text-md); line-height: 1.3; }
.dr-task-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; font-size: var(--fh-text-xs); color: var(--fh-task-detail); }
.dr-task-detail .dr-avatar { width: 17px; height: 17px; }
.dr-tonight { color: var(--fh-tonight-ink); background: var(--fh-tonight-bg); border-radius: 4px; padding: 1px 5px; }
.dr-meal-list { display: grid; gap: 4px; }
.dr-meal { display: block; }
.dr-meal.fresh { animation: dr-fresh 2.4s ease-out; }
.dr-meal-slot { display: block; font-size: var(--fh-text-xs); color: var(--fh-meal-slot); }
.dr-dish { display: block; font-size: var(--fh-text-md); line-height: 1.3; }
.dr-meal-state { display: flex; align-items: center; gap: 4px; width: fit-content; font-size: var(--fh-text-xs); line-height: 1.4; padding: 2px 4px; border-radius: 5px; margin-top: 2px; white-space: nowrap; }
.dr-meal-state .dr-icon { width: 13px; height: 13px; }
.dr-meal-state.ready { color: var(--fh-meal-ready-ink); background: var(--fh-meal-ready-bg); }
.dr-meal-state.prepare { color: var(--fh-meal-prepare-ink); background: var(--fh-meal-prepare-bg); }
.dr-meal-state.no-cook { color: var(--fh-meal-nocook-ink); }
.dr-footer { display: none; margin-top: auto; padding: 4px 0 2px; color: var(--fh-footer); text-align: center; flex-shrink: 0; }

.dr-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: auto 18px 0; border-top: 1px solid var(--fh-color-border); min-height: 56px; flex-shrink: 0; background: var(--fh-wall-bg); }
.dr-nav button { min-width: 80px; min-height: 46px; display: flex; gap: 6px; align-items: center; justify-content: center; position: relative; font-size: var(--fh-text-sm); color: var(--fh-nav-ink) !important; }
.dr-nav .dr-icon { width: 20px; height: 20px; }
.dr-nav .active { color: var(--fh-nav-active) !important; font-weight: var(--fh-weight-semibold); }
.dr-nav .active::after { content: ""; position: absolute; inset-block-start: -6px; height: 2px; width: 22px; background: var(--fh-nav-underline); border-radius: 3px; }

/* Quiet day hero */
.quiet .dr-agenda-sec { flex: 1; display: flex; flex-direction: column; }
.dr-quiet-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; flex: 1; gap: 16px; padding: 14px 6px; }
.dr-quiet-label { color: var(--fh-quiet-label); font-size: var(--fh-text-sm); margin-bottom: 8px !important; }
.dr-quiet-time { display: block; font-size: 2.5rem; line-height: 1.15; color: var(--fh-quiet-time); letter-spacing: -.03em; }
.dr-quiet-title { font-size: var(--fh-text-3xl); font-weight: var(--fh-weight-medium); line-height: 1.3; margin-top: 6px !important; }
.dr-quiet-people { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--fh-wall-text-muted); }
.dr-quiet-note { font-size: var(--fh-text-sm); margin-top: 12px !important; color: var(--fh-quiet-note); }
.dr-plant { width: 100%; max-height: 250px; }

/* Evening / Tomorrow: the distinct evening header field */
.evening .dr-date { background: var(--fh-evening-bg); color: var(--fh-evening-ink); border-radius: var(--fh-radius-xl); padding: 12px; margin-top: 10px; align-items: center; overflow: hidden; }
.evening .dr-date::before { content: ""; width: 210px; height: 210px; border: 1px solid var(--fh-evening-track); border-radius: 50%; position: absolute; inset-inline-end: 16%; inset-block-start: -134px; pointer-events: none; }
.evening .dr-date::after { content: ""; width: 140px; height: 140px; border: 1px solid var(--fh-evening-track); border-radius: 50%; position: absolute; inset-inline-end: 11%; inset-block-start: -80px; pointer-events: none; }
.evening .dr-eyebrow { color: var(--fh-evening-muted); font-weight: var(--fh-weight-medium); }
.evening .dr-day-symbol, .evening .dr-eyebrow .dr-icon { color: var(--fh-evening-symbol); }
.evening .dr-day { background: var(--fh-evening-track); position: relative; z-index: 1; }
.evening .dr-day button { color: var(--fh-evening-track-ink); }
.evening .dr-day button[aria-pressed="true"] { background: var(--fh-evening-active); color: var(--fh-evening-active-ink); }
.evening .dr-date .dr-clock { color: var(--fh-evening-ink); position: relative; z-index: 1; }

/* =========================================================== WALL (1194 x 834) */
.dr-app--wall { width: var(--fh-wall-width); height: var(--fh-wall-height); flex-shrink: 0; border-radius: 18px; box-shadow: var(--fh-shadow-lg); }
.dr-app--wall .dr-masthead { padding: 6px 38px 0; min-height: 54px; }
.dr-app--wall .dr-brand { font-size: var(--fh-text-wall-meta); gap: 10px; }
.dr-app--wall .dr-brand img { width: 30px; height: 30px; }
.dr-app--wall .dr-mast-end { gap: 14px; }
.dr-app--wall .dr-menu { width: 46px; height: 46px; }
.dr-app--wall .dr-menu .dr-icon { width: 26px; height: 26px; }
.dr-app--wall .dr-day { border-radius: var(--fh-radius-lg); padding: 4px; gap: 4px; }
.dr-app--wall .dr-day button { min-width: 82px; min-height: var(--fh-target); padding: 2px 18px; font-size: var(--fh-text-wall-meta); }

.dr-app--wall .dr-date { margin: 4px 38px 0; align-items: flex-end; gap: 24px; }
.dr-app--wall .dr-eyebrow { font-size: var(--fh-text-wall-meta); margin-bottom: 0; gap: 8px; }
.dr-app--wall .dr-eyebrow .dr-icon { width: 24px; height: 24px; }
.dr-app--wall .dr-date-title { gap: 16px; }
.dr-app--wall .dr-date h1 { font-size: var(--fh-text-wall-heading-lg); line-height: 1.08; letter-spacing: -.03em; white-space: nowrap; }
.dr-app--wall .dr-day-symbol { width: 52px; height: 52px; }
.dr-app--wall .dr-date .dr-clock { font-size: var(--fh-text-wall-display); line-height: .95; font-weight: var(--fh-weight-regular); color: var(--fh-wall-text); letter-spacing: -.03em; }

.dr-app--wall .dr-household { margin: 6px 38px 4px; gap: 6px; justify-content: flex-start; }
.dr-app--wall .dr-chip { flex-direction: row; gap: 7px; min-height: 48px; padding: 4px 10px 4px 5px; font-size: var(--fh-text-wall-meta); }
.dr-app--wall .dr-chip small { display: inline; font-size: var(--fh-text-xl); }
.dr-app--wall .dr-chip .dr-avatar { width: var(--fh-avatar-wall-lg); height: var(--fh-avatar-wall-lg); }
.dr-app--wall .dr-chip.all { min-width: 76px; padding-inline: 14px; margin-inline-end: 2px; }
.dr-app--wall .dr-hint { display: block; font-size: var(--fh-text-xl); line-height: 1.2; max-width: 150px; text-align: end; }

.dr-app--wall .dr-main { margin-inline: 38px; }
.dr-app--wall .dr-sec-head { padding-bottom: 4px; }
.dr-app--wall .dr-sec-head h2 { font-size: var(--fh-text-wall-heading); line-height: 1.2; }
.dr-app--wall .dr-sec-meta { font-size: var(--fh-text-wall-meta); }
.dr-app--wall .dr-agenda { padding-top: 2px; }
.dr-app--wall .dr-event { grid-template-columns: 150px minmax(0, 1fr) auto; gap: 16px; min-height: 52px; padding: 2px 4px 2px 14px; }
.dr-app--wall .dr-time { font-size: var(--fh-text-wall-time); }
.dr-app--wall .dr-event-text { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.dr-app--wall .dr-event-title { font-size: var(--fh-text-wall-event-lg); line-height: 1.15; letter-spacing: -.02em; }
.dr-app--wall .dr-event-title .dr-icon { width: 34px; height: 34px; vertical-align: -5px; margin-inline-end: 8px; }
.dr-app--wall .dr-participants { gap: 10px; font-size: var(--fh-text-3xl); }
.dr-app--wall .dr-avatars .dr-avatar { width: var(--fh-avatar-wall-lg); height: var(--fh-avatar-wall-lg); }
.dr-app--wall .dr-avatars .dr-avatar + .dr-avatar { margin-inline-start: -6px; }
.dr-app--wall .dr-names { display: block; max-width: 170px; font-size: var(--fh-text-wall-meta); }
.dr-app--wall .dr-event.next .dr-names { color: var(--fh-next-ink); }
.dr-app--wall .dr-next-label { font-size: var(--fh-text-wall-meta); margin: 0; border: 1px solid var(--fh-next-border); border-radius: 20px; padding: 0 12px; white-space: nowrap; }
.dr-app--wall .dr-tag-new { font-size: var(--fh-text-wall-meta); margin: 0; padding: 0 12px; }
.dr-app--wall .dr-event.next { padding-block: 6px; margin: 2px 0; }
.dr-app--wall .dr-empty { font-size: var(--fh-text-wall-meta); }

.dr-app--wall .dr-cooking { padding: 3px 14px; gap: 11px; margin-top: 2px; }
.dr-app--wall .dr-cooking .dr-icon { width: 26px; height: 26px; }
.dr-app--wall .dr-cooking-title { font-size: var(--fh-text-wall-meta); }
.dr-app--wall .dr-cooking-meta { font-size: var(--fh-text-xl); }

.dr-app--wall .dr-lower { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; margin-top: 8px; }
.dr-app--wall .dr-lower h2 { font-size: var(--fh-text-wall-heading); gap: 10px; margin-bottom: 6px; line-height: 1.2; }
.dr-app--wall .dr-lower h2 .dr-icon { width: 28px; height: 28px; }
.dr-app--wall .dr-meals { padding-inline-start: 24px; }
.dr-app--wall .dr-counter { min-width: 34px; height: 34px; font-size: var(--fh-text-xl); }
.dr-app--wall .dr-task-list { gap: 6px; }
.dr-app--wall .dr-task { gap: 12px; }
.dr-app--wall .dr-checkbox { min-width: 28px; width: 28px; height: 28px; border-radius: 7px; margin-top: 3px; }
.dr-app--wall .dr-task-title { font-size: var(--fh-text-wall-meta); line-height: 1.25; }
.dr-app--wall .dr-task-detail { font-size: var(--fh-text-xl); margin-top: 1px; gap: 8px; }
.dr-app--wall .dr-task-detail .dr-avatar { width: 24px; height: 24px; }
.dr-app--wall .dr-tonight { padding: 0 8px; }
/* meals: Breakfast / Lunch / Dinner side by side so all three fit at wall sizes */
.dr-app--wall .dr-meal-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dr-app--wall .dr-meal-slot { font-size: var(--fh-text-xl); line-height: 1.2; }
.dr-app--wall .dr-dish { font-size: var(--fh-text-wall-meta); line-height: 1.15; margin-top: 0; }
.dr-app--wall .dr-meal-state { font-size: var(--fh-text-xl); white-space: normal; margin-top: 4px; padding: 1px 8px; gap: 6px; line-height: 1.15; }
.dr-app--wall .dr-meal-state.no-cook { padding-inline: 0; }
.dr-app--wall .dr-meal-state .dr-icon { width: 18px; height: 18px; }

/* wall: the footer line sits at the start of the nav row (saves a row at wall type sizes) */
.dr-app--wall .dr-footer { display: block; position: absolute; inset-inline-start: 38px; bottom: 13px; font-size: var(--fh-text-xl); padding: 0; text-align: start; max-width: 520px; line-height: 1.2; }
.dr-app--wall .dr-nav { margin: 0 38px; gap: 24px; min-height: 52px; justify-content: flex-end; }
.dr-app--wall .dr-nav button { min-width: 100px; font-size: var(--fh-text-wall-meta); gap: 10px; }
.dr-app--wall .dr-nav .dr-icon { width: 26px; height: 26px; }

/* wall: evening */
.dr-app--wall.evening .dr-date { padding: 4px 24px; margin-top: 2px; align-items: center; }
.dr-app--wall.evening .dr-date .dr-clock { color: var(--fh-evening-ink); }
.dr-app--wall.evening .dr-date h1 { font-size: calc(var(--fh-text-wall-heading-lg) * .84); }
.dr-app--wall.evening .dr-day-symbol { width: 44px; height: 44px; }
.dr-app--wall.evening .dr-household { margin-top: 6px; }

/* wall: quiet */
.dr-app--wall .dr-quiet-hero { padding: 6px 18px; gap: 24px; }
.dr-app--wall .dr-quiet-label { font-size: var(--fh-text-wall-meta); margin-bottom: 0 !important; }
.dr-app--wall .dr-quiet-time { font-size: var(--fh-text-wall-display); line-height: 1.05; }
.dr-app--wall .dr-quiet-title { font-size: var(--fh-text-wall-event-lg); line-height: 1.2; margin-top: 0 !important; }
.dr-app--wall .dr-quiet-people { font-size: var(--fh-text-3xl); margin-top: 10px; }
.dr-app--wall .dr-quiet-people .dr-avatar { width: var(--fh-avatar-wall-lg); height: var(--fh-avatar-wall-lg); }
.dr-app--wall .dr-quiet-note { font-size: var(--fh-text-wall-meta); margin-top: 10px !important; }
.dr-app--wall .dr-plant { max-height: 230px; }

/* wall: dense (>5 events) and busy (two columns, morning on the left) */
.dr-app--wall.dense .dr-event-title { font-size: var(--fh-text-wall-event); }
.dr-app--wall.dense .dr-event { min-height: 48px; padding-block: 2px; }
.dr-app--wall.dense .dr-avatars .dr-avatar { width: var(--fh-avatar-wall); height: var(--fh-avatar-wall); }
.dr-eyebrow--mast { display: none; }
.dr-app--wall.busy .dr-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; align-items: start; }
/* busy wall only: the eyebrow moves up into the masthead row so ten dense events fit */
.dr-app--wall.busy .dr-eyebrow--mast { display: block; margin: 0 auto 0 28px !important; font-size: var(--fh-text-wall-meta); }
.dr-app--wall.busy .dr-date .dr-eyebrow { display: none; }
.dr-app--wall.busy .dr-event { grid-template-columns: 136px minmax(0, 1fr) auto; gap: 10px; padding-inline-start: 12px; min-height: var(--fh-target); }
.dr-app--wall.busy .dr-event-title { line-height: 1.1; }
.dr-app--wall.busy .dr-names, .dr-app--wall.busy .dr-next-label { display: none; }
.dr-app--wall.busy .dr-avatars .dr-avatar { width: 28px; height: 28px; }
.dr-app--wall.busy .dr-avatars .dr-avatar + .dr-avatar { margin-inline-start: -10px; }
.dr-app--wall.busy .dr-task-list { gap: 2px; }
.dr-app--wall.busy .dr-task > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.dr-app--wall.busy .dr-task-title { font-size: var(--fh-text-3xl); line-height: 1.15; }
.dr-app--wall.busy .dr-lower { margin-top: 4px; }
.dr-app--wall.busy .dr-lower h2 { margin-bottom: 2px; }
.dr-app--wall.busy .dr-task-detail { margin-top: 0; }
/* busy day + the scripted edit (11 events): task detail lines step aside so nothing is clipped */
.dr-app--wall.crowded .dr-task-detail { display: none; }

.dr-toast { position: absolute; inset-inline: 0; margin: 0 auto; top: 10px; width: fit-content; max-width: 80%; background: var(--fh-color-primary); color: var(--fh-color-primary-text); font-size: var(--fh-text-wall-meta); font-weight: var(--fh-weight-semibold); padding: 10px 22px; border-radius: var(--fh-radius-full); opacity: 0; transform: translateY(-12px); transition: opacity .3s, transform .3s; pointer-events: none; z-index: 5; }
.dr-toast.show { opacity: 1; transform: none; }

/* =========================================================== PHONE frame (390 x 844) */
.phone { flex-shrink: 0; width: calc(var(--fh-phone-width) + 24px); height: calc(var(--fh-phone-height) + 24px); padding: 12px; background: var(--fh-phone-body); border-radius: 48px; box-shadow: var(--fh-shadow-lg); }
.stage { align-items: center; }
.phone-screen { position: relative; width: var(--fh-phone-width); height: var(--fh-phone-height); border-radius: 36px; overflow: hidden; background: var(--fh-phone-screen); }
.dr-app--phone { width: var(--fh-phone-width); height: var(--fh-phone-height); }
.ph-close { display: none; }
.ph-sent { position: absolute; inset-inline: 12px; bottom: 64px; margin: 0; text-align: center; font-size: var(--fh-text-sm); color: var(--fh-color-success-text); pointer-events: none; }
.ph-sent:empty { display: none; }
.sheet { position: absolute; inset: auto 0 0 0; max-height: 92%; overflow-y: auto; background: var(--fh-color-surface); border-radius: 22px 22px 0 0; box-shadow: var(--fh-shadow-md); padding: 14px 16px 18px; z-index: 4; border-top: 1px solid var(--fh-color-border); }
.sheet[hidden] { display: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet h3 { margin: 0; font-size: var(--fh-text-2xl); }
.sheet-h2 { margin-top: 16px !important; padding-top: 12px; border-top: 1px solid var(--fh-color-border); }
.sheet-close { font: inherit; font-size: var(--fh-text-md); min-height: var(--fh-target); padding: 0 12px; border: 0; background: transparent; color: var(--fh-color-primary-on-bg); cursor: pointer; }
.sheet-who { margin: 2px 0 6px; font-size: var(--fh-text-sm); color: var(--fh-color-text-muted); }
.ph-lbl { margin: 10px 0 6px; font-size: var(--fh-text-sm); font-weight: var(--fh-weight-semibold); color: var(--fh-color-text-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: var(--fh-text-md); min-height: var(--fh-target); display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--fh-radius-full); border: 1px solid var(--fh-color-border); background: var(--fh-wall-bg); color: var(--fh-color-text); cursor: pointer; }
.chip small { color: var(--fh-color-text-muted); font-size: var(--fh-text-xs); }
.chip[aria-pressed="true"] { background: var(--fh-color-primary); border-color: var(--fh-color-primary); color: var(--fh-color-primary-text); }
.chip[aria-pressed="true"] small { color: var(--fh-color-primary-text); }
.chip .dr-avatar { width: 28px; height: 28px; }
.ph-send { display: block; width: 100%; margin-top: 12px; font: inherit; font-weight: var(--fh-weight-semibold); font-size: var(--fh-text-lg); min-height: 48px; border-radius: var(--fh-radius-lg); border: 0; background: var(--fh-color-primary); color: var(--fh-color-primary-text); cursor: pointer; }
.ph-send--alt { background: var(--fh-wall-surface-2); color: var(--fh-color-text); }

/* =========================================================== narrow screens: wall only, phone as overlay */
.narrow .stage .phone { display: none; }
.narrow .phone-toggle { display: inline-flex; align-items: center; background: var(--fh-color-primary); color: var(--fh-color-primary-text); border-color: var(--fh-color-primary); font-weight: var(--fh-weight-semibold); }
body > .phone { display: none; }
.phone-open > .phone { display: block; position: fixed; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%) scale(var(--ps, 1)); z-index: 20; }
.phone-open .ph-close { display: grid; place-items: center; position: absolute; top: 8px; inset-inline-end: 10px; width: var(--fh-target); height: var(--fh-target); border-radius: 50%; border: 0; background: var(--fh-wall-surface-2); color: var(--fh-color-text); font-size: 1.5rem; z-index: 6; cursor: pointer; }
.phone-backdrop { position: fixed; inset: 0; background: var(--fh-color-overlay); z-index: 15; }
.phone-backdrop[hidden] { display: none; }

/* =========================================================== solo views (?view=wall|phone): one screen at 1:1 */
.solo .demo-top, .solo .demo-caption { display: none; }
.solo .stage-outer { margin: 0; overflow: visible; }
.solo .stage { display: block; transform: none !important; }
.solo-wall .phone { display: none !important; }
.solo-wall .dr-app--wall { border-radius: 0; box-shadow: none; }
.solo-phone .wall { display: none; }
.solo-phone .phone { display: block !important; width: auto; height: auto; padding: 0; margin: 0 !important; border-radius: 0; background: none; box-shadow: none; }
.solo-phone .phone-screen { border-radius: 0; }
.solo.demo-body { background: var(--fh-wall-bg); }