@font-face {
    font-family: 'Inter';
    src: url('fonts/InterVariable.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/InterVariable-Italic.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

html, body {
    font-family: 'Inter', Helvetica, Arial, sans-serif;
}

/* P2X-017: the host pages set data-theme="dark" from the cached theme before Blazor starts. Until Radzen's dark theme
   loads, this keeps the page dark (material-dark's base background) instead of flashing white. */
:root[data-theme="dark"] {
    color-scheme: dark;
    background-color: var(--rz-base-background-color, #121212);
}

/* P1U-052: the only rules the app actually used from bootstrap.min.css (its reboot), measured by diffing every
   element's computed style with Bootstrap on vs off (0 differences with just these). Bootstrap itself is no longer
   loaded; Radzen is the component system (CLAUDE.md core stack). */
*, ::before, ::after {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

[role=button] {
    cursor: pointer;
}

table {
    caption-side: bottom;
    border-collapse: collapse;
}

/* ---------------------------------------------------------------------------------------
   P4U-003 (D-073): Dormora's Material 3 colour scheme, shapes and sentence case, on Radzen's
   free `material` theme. Radzen's own `material3` theme is a paid (Pro) theme, so the owner chose
   to restyle the free one here (2026-10-13). The values are the signed-off mockups'
   (docs/mockups: `.ph`/`.d` light, `.ph.dk`/`.d.dk` dark), seeded from the logo's navy #294682 with
   the leaf teal as tertiary. Feature CSS uses the `--dormora-*` roles or Radzen's `--rz-*`
   variables, never a raw brand hex.
   --------------------------------------------------------------------------------------- */
:root {
    /* The brand itself, the same in both themes: the logo's navy (also the splash and app icon since
       P4U-052), and the deep navy of the desktop shell header until P4U-D replaces it (phones have a
       light bar since P4U-010). */
    --dormora-brand: #294682;
    --dormora-brand-hover: #4a67a3;
    --dormora-brand-deep: #091639;
    --dormora-on-brand: #ffffff;
    /* P4U-041: secondary text on the brand navy (the sign-in brand panel), as the splash's tagline: 7.9:1. */
    --dormora-on-brand-variant: #c4ecf6;

    /* M3 colour roles, light. */
    --dormora-primary: #294682;
    --dormora-on-primary: #ffffff;
    --dormora-primary-container: #dbe2f6;
    --dormora-on-primary-container: #14275a;
    --dormora-tertiary: #00799a;
    --dormora-on-tertiary: #ffffff;
    --dormora-tertiary-container: #c4ecf6;
    --dormora-on-tertiary-container: #003544;
    --dormora-surface: #f8f9fe;
    --dormora-surface-card: #ffffff;
    --dormora-page-panel: #ffffff; /* P4U-099: the page's rounded panel on desktop (the mockup's --c) */
    --dormora-surface-container: #eef1f8;
    --dormora-surface-container-high: #e6eaf4;
    --dormora-on-surface: #191c22;
    --dormora-on-surface-variant: #454a57;
    /* P4U-022: the snackbar's inverse surface (M3). */
    --dormora-inverse-surface: #2e3037;
    --dormora-inverse-on-surface: #eff0f7;
    --dormora-inverse-primary: #b1c5ff;
    /* P4I-084 (R7-51): the control boundary. An unselected chip, poll option, reaction chip, choice card, input, dropdown, checkbox
       and radio draw their outline in it: 3:1 or more on every surface token (3.7 to 4.5:1). Dividers keep outline-variant. */
    --dormora-outline: #757780;
    --dormora-outline-variant: #c4c8d4;
    --dormora-focus-ring: var(--dormora-primary);
    /* P4U-011: the M3 error role, for badges (white on it 6.5:1). */
    --dormora-error: #ba1a1a;
    --dormora-on-error: #ffffff;
    --dormora-error-container: #ffdad6; /* P4U-026: ErrorState's surface (M3 error container) */
    --dormora-on-error-container: #410002;
    /* P4U-030: the success container behind a swipe to done ("✓ Done"), from the mockups' --okc/--ok. */
    --dormora-success: #1d6b35;
    --dormora-on-success: #ffffff;
    --dormora-success-container: #c9efcf;
    --dormora-on-success-container: #1d6b35;
    /* P4I-017c (D-089): the warning roles, from the mockups' --warn/--warnc. Clash warnings, the dietary needs flag, the chat's
       pinned banner and the snackbar's warning use them; no feature CSS keeps a raw amber hex. Measured (WCAG): the warning
       on the container 5.0:1, on the card 6.5, the page 6.1, the container surfaces 5.7 and 5.4; on-warning on it 6.5;
       on-warning-container on the container 10.7. */
    --dormora-warning: #7a5900;
    --dormora-on-warning: #ffffff;
    --dormora-warning-container: #ffdf9e;
    --dormora-on-warning-container: #3b2a00;

    /* Radzen's colour variables, from the roles. */
    --rz-primary: var(--dormora-primary);
    --rz-primary-light: #3d5a96;
    --rz-primary-lighter: rgba(41, 70, 130, 0.12);
    --rz-primary-dark: #1f3868;
    --rz-primary-darker: #14275a;
    --rz-on-primary: var(--dormora-on-primary);
    --rz-on-primary-light: var(--dormora-on-primary);
    --rz-on-primary-lighter: var(--dormora-primary);
    --rz-on-primary-dark: var(--dormora-on-primary);
    --rz-on-primary-darker: var(--dormora-on-primary);
    --rz-secondary: var(--dormora-tertiary);
    --rz-secondary-light: #2a8fab;
    --rz-secondary-lighter: rgba(0, 121, 154, 0.12);
    --rz-secondary-dark: #00607a;
    --rz-secondary-darker: #004d62;
    --rz-on-secondary: var(--dormora-on-tertiary);
    --rz-on-secondary-lighter: #00607a;
    --rz-body-background-color: var(--dormora-surface);
    --rz-base-background-color: var(--dormora-surface-card);
    --rz-text-title-color: var(--dormora-on-surface);
    --rz-text-color: var(--dormora-on-surface);
    --rz-text-secondary-color: var(--dormora-on-surface-variant);
    --rz-link-color: var(--dormora-primary);
    /* P4I-084 (R7-51): text boxes, dropdowns, date pickers, checkboxes and radios (the input border and its block-end, which the
       checkbox and radio box use) and the select bar (SegmentedButtons, ScopeField) draw their boundary in --dormora-outline, 3:1 or
       more on their ground in both themes. Set here once: --dormora-outline is the dark value under :root[data-theme="dark"]. */
    --rz-input-border: 1px solid var(--dormora-outline);
    --rz-input-border-block-end: 1px solid var(--dormora-outline);
    --rz-selectbar-border: 1px solid var(--dormora-outline);
    /* P4U-080 (UC-M.D1, D1): the desktop top bar is light, on the page's surface, as the phone's (no navy header). */
    --rz-header-background-color: var(--dormora-surface);
    --rz-header-color: var(--dormora-on-surface);
    --rz-text-font-family: 'Inter', Helvetica, Arial, sans-serif;
    /* Today in the scheduler: the primary tint instead of Radzen's yellow, which left the dark theme's grey day
       numbers at 3.87:1 (axe, Planner). */
    --rz-scheduler-highlight-background-color: var(--rz-primary-lighter);
    /* The month view's "+3 more": the primary, not the tertiary teal (4.1:1 on the today tint). */
    --rz-scheduler-event-list-button-color: var(--dormora-primary);

    /* UC-M.10.1: sentence case everywhere (Material 2's uppercase buttons, tabs, badges and headers go), with
       M3's label letter spacing. */
    --rz-text-button-text-transform: none;
    --rz-text-button-letter-spacing: 0.1px;
    --rz-tabs-tab-text-transform: none;
    --rz-tabs-tab-letter-spacing: 0.1px;
    --rz-badge-text-transform: none;
    --rz-badge-letter-spacing: 0.1px;
    --rz-text-overline-text-transform: none;
    --rz-datepicker-calendar-header-text-transform: none;
    --rz-scheduler-header-text-transform: none;
    --rz-scheduler-today-button-text-transform: none;

    /* UC-M.10.3: M3 shapes. Buttons are fully rounded (icon buttons become circles), cards 12px, chips 8px,
       the FAB 16px; dialogs and sheets are 28px (--dormora-dialog-radius, below). Filled buttons are flat. */
    --rz-button-border-radius: 1.25rem;
    --rz-button-shadow: none;
    --rz-button-hover-shadow: var(--rz-shadow-1);
    --rz-button-focus-shadow: none;
    --rz-button-active-shadow: none;
    --rz-card-border-radius: 0.75rem;
    --rz-chip-border-radius: 0.5rem;
    --rz-badge-border-radius: 0.5rem;
    --rz-fab-border-radius: 1rem;

    /* Semantic feedback colors (P1R-015). These are the light-theme values - a single
       fixed color cannot pass WCAG AA text contrast (4.5:1) against both a near-white
       light-theme surface and the dark theme's #1e1e1e card surface at once
       (the old #26b050/#e50000 measured ~2.83:1/~4.85:1 against white, the former a
       real failure). :root[data-theme="dark"] below overrides both for the dark
       theme; data-theme is synced onto <html> by the shared ThemeAttributeSync
       component/themeAttributeHelper.js, kept live with Radzen's ThemeService/
       RadzenAppearanceToggle. */
    --color-success: #166534;
    --color-danger: #c40000;

    /* P1U-040: plain-link colour (P4U-003: the brand primary, 9.4:1 on white; dark override below) and the one
       touch-target size every mobile control uses (UC-4.4/UC-7.1). P4U-060 (owner): 48px, Material 3's minimum (was 44px). */
    --dormora-link-color: var(--dormora-primary);
    --dormora-touch-target: 3rem;

    /* Semantic event/task colors (Phase 1 placeholders; final values were a P1-052 UX decision). Automatic
       (read-only) events get a distinct tone from user-created events per P1-012's distinguishability
       requirement. P4U-003 kept the event colours as they were (they sit behind black text, P1-051); the task
       colour follows the theme's primary so it still clears 3:1 on the dark surfaces. */
    --color-event: #4e92d3;
    --color-event-automatic: #999999;
    /* D-059: public holidays, green as in Google Calendar. It is only ever a fill behind black text (P1-051's event-pill
       rule): 10.4:1. The title and the "Bank holiday"/"Observance" badge carry the meaning, not the colour. */
    --color-event-holiday: #81c784;
    --color-task: var(--dormora-primary);
    /* P2-033: care due (calendar/daily overview). #2e7d32 is ~5.1:1 on white and ~3.7:1 on #121212, so it clears
       the 3:1 non-text threshold in both themes (it is only used for icons and outlines). */
    --color-care: #2e7d32;

    /* Calendar source colours (R7-W51): placeholders until the owner's values. One fill token and one darker bar token per source, in this one block: the
       month's pills, the agenda's rows, the desktop blocks and the Key all read these and nothing else (no raw colour anywhere else in the calendar rules).
       Text and icons on a fill are always black (--color-cal-on), 4.6:1 or better on every fill in both themes (CalendarSourceColourTests holds whatever values
       are chosen to 4.5:1); the fills differ in lightness as well as hue, and every source also has its own icon, so colour is never the only signal.
       The values are the same in dark mode (a fill is a coloured chip with its own black text, not a surface); a dark override, if the owner wants one, goes
       in the dark block under the same names. */
    --color-cal-on: #000000;
    --color-cal-your: #4e92d3;
    --color-cal-your-bar: #2a5074;
    --color-cal-household: #c3dcf7;
    --color-cal-household-bar: #6b7987;
    --color-cal-task: #b2a6ee;
    --color-cal-task-bar: #615b82;
    --color-cal-care: #2fa386;
    --color-cal-care-bar: #195949;
    --color-cal-workout: #e58a2c;
    --color-cal-workout-bar: #7d4b18;
    --color-cal-birthday: #999999;
    --color-cal-birthday-bar: #545454;
    --color-cal-holiday: #81c784;
    --color-cal-holiday-bar: #466d48;
    --color-cal-bill: #f0c93e;
    --color-cal-bill-bar: #846e22;
    --color-cal-release: #a259b5;
    --color-cal-release-bar: #593063;
    --color-cal-pet: #f4a9bb;
    --color-cal-pet-bar: #865c66;
    /* P4I-100b: the source of a followed calendar's events, until piece c gives each subscription its own colour (sub-1 to sub-5). */
    --color-cal-subscribed: #7fb8c9;
    --color-cal-subscribed-bar: #3f6471;
    /* P4I-100c (R9-100-7): the five colours a person gives a followed calendar (CalendarSubscriptionRules.Colours); black text on each is 7:1 or better. */
    --color-cal-sub-1: #e0788a;
    --color-cal-sub-1-bar: #7a1f2e;
    --color-cal-sub-2: #d4e157;
    --color-cal-sub-2-bar: #6b7a00;
    --color-cal-sub-3: #5fc4c4;
    --color-cal-sub-3-bar: #1f6b6b;
    --color-cal-sub-4: #c58bd9;
    --color-cal-sub-4-bar: #6a3a7a;
    --color-cal-sub-5: #e8b07a;
    --color-cal-sub-5-bar: #7a5126;
}

/* P4U-003: the true dark mode (owner, 2026-10-13). Neutral near-black and grey surfaces, off-white text, and the
   brand only as muted accents: a soft brand blue for buttons, links and the selected item, a dark navy tint for
   selected and tonal backgrounds, a dark teal for the tertiary. Pop-ups and dialogs sit one grey step above the
   page. The old navy header token is retired here; the logo is unchanged. */
:root[data-theme="dark"] {
    --dormora-primary: #a7b8e0;
    --dormora-on-primary: #141a29;
    /* P4I-084 (R7-50): neutral, not navy-tinted (was #26324d); the on-colour holds 10.6:1 on it. Radzen's select bar and scheduler follow it. */
    --dormora-primary-container: #2a2a2a;
    --dormora-on-primary-container: #d6def2;
    --dormora-tertiary: #8fc7d3;
    --dormora-on-tertiary: #00363f;
    --dormora-tertiary-container: #18383f;
    --dormora-on-tertiary-container: #b6dde5;
    --dormora-surface: #121212;
    --dormora-surface-card: #1e1e1e;
    --dormora-page-panel: #181818;
    --dormora-surface-container: #1e1e1e;
    --dormora-surface-container-high: #2a2a2a;
    --dormora-on-surface: #e6e6e6;
    --dormora-on-surface-variant: #a3a3a3;
    --dormora-inverse-surface: #e2e2e9;
    --dormora-inverse-on-surface: #2e3037;
    --dormora-inverse-primary: #294682;
    /* P4I-084 (R7-51): the control boundary, dark; 4.4 to 5.7:1 on every surface token. Dividers keep outline-variant. */
    --dormora-outline: #8e8e8e;
    --dormora-outline-variant: #3a3a3a;
    --dormora-error: #f2b8b5;
    --dormora-on-error: #601410;
    --dormora-error-container: #4a1d1b;
    --dormora-on-error-container: #f9dedc;
    --dormora-success: #a3d4ab;
    --dormora-on-success: #0b2611;
    --dormora-success-container: #1d2e21;
    --dormora-on-success-container: #a3d4ab;
    /* P4I-017c: the warning roles, dark. The warning on the container 8.2:1, on the page 11.1, the card 9.9, the raised
       surface 8.5; on-warning on it 8.0; on-warning-container on the container 10.9. data-theme is "dark" for System too. */
    --dormora-warning: #e3c483;
    --dormora-on-warning: #3b2d00;
    --dormora-warning-container: #332c1c;
    --dormora-on-warning-container: #f6e3b8;

    --rz-primary-light: #b9c7e7;
    --rz-primary-lighter: var(--dormora-primary-container);
    --rz-primary-dark: #8d9fcb;
    --rz-primary-darker: #7487b8;
    --rz-on-primary-lighter: var(--dormora-on-primary-container);
    --rz-secondary-light: #a5d3dd;
    --rz-secondary-lighter: var(--dormora-tertiary-container);
    --rz-secondary-dark: #72adba;
    --rz-secondary-darker: #5a96a3;
    --rz-on-secondary-lighter: var(--dormora-on-tertiary-container);
    --rz-dialog-background-color: var(--dormora-surface-container);
    --rz-header-background-color: var(--dormora-surface);
    --rz-header-color: var(--dormora-on-surface);

    --color-success: #4ade80;
    --color-danger: #f87171;
    /* P1U-052 (axe): material-dark's placeholder (#6c6c6c, 3.17:1 on #1e1e1e) fails AA text contrast. */
    --rz-input-placeholder-color: var(--rz-text-secondary-color);
    --rz-tabs-tab-selected-color: var(--dormora-primary);
}

/* P4U-003 (UC-M.10.1): Radzen's material theme writes uppercase and wide letter spacing into
   its button size classes (and a few labels) rather than through --rz-text-button-text-transform, so sentence
   case needs the classes themselves. Same specificity as Radzen's rules; app.css loads after the theme. */
.rz-button,
.rz-button-xs,
.rz-button-sm,
.rz-button-md,
.rz-button-lg,
.rz-pager-element,
.rz-timepicker .rz-button-md,
.rz-color-box,
.rz-timespanpicker-unit-label {
    text-transform: none;
    letter-spacing: 0.1px;
}

/* P4U-003 (axe): month-view day numbers in Radzen's tertiary grey (#757575) fell to 3.78:1 on the today tint. */
.rz-scheduler .rz-slot-title {
    color: var(--rz-text-secondary-color);
}

/* P1U-052 (axe): Radzen draws scheduler weekend day numbers in the *disabled* text colour (1.79:1 light,
   2.91:1 dark), but weekends aren't disabled. */
:root {
    --rz-scheduler-weekend-color: var(--rz-text-secondary-color);
}

/* P1U-040: plain links use a theme-aware token (the old fixed #006bb7 measured ~3.3:1 on the dark
   theme's #121212). The .btn/.btn-primary/.form-control rules from the Bootstrap template were removed:
   nothing in the app renders those classes. */
a {
    color: var(--dormora-link-color);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* P1-051 accessibility audit: Radzen's default white badge/event text fails WCAG AA
   contrast against several of its own filled-variant background colors (as low as
   2.15:1 for Warning). Dark text meets AA (>=4.5:1) against every one of these
   backgrounds without changing any theme color, so this is scoped to text color only.
   BadgeStyle.Primary/Light already pass with white/default text and are untouched. P4U-003: Secondary is now the
   tertiary teal, which keeps Radzen's own --rz-on-secondary (white, 5.0:1; dark text on the dark theme's light teal). */
.rz-badge.rz-variant-filled.rz-badge-danger,
.rz-badge.rz-variant-filled.rz-badge-warning,
.rz-badge.rz-variant-filled.rz-badge-info,
.rz-badge.rz-variant-filled.rz-badge-success {
    color: #000000;
}

/* P1-051: the Dashboard's Today/Upcoming agenda RadzenLinks use --rz-secondary (#4e92d3),
   which fails AA on white (3.29:1). --rz-text-color is Radzen's own theme-swapped body
   text color, so this stays correct in both light and dark mode (unlike a hardcoded hex,
   which can't pass contrast against both a near-white and a near-black background). The
   underline keeps it recognizable as a link without relying on color alone. */
.rz-link-text {
    color: var(--rz-text-color);
    text-decoration: underline;
}

/* P1-051: same contrast gap on RadzenScheduler's default/automatic/Birthday-special-case
   event pills (white text on #2196f3/#999999/red all fail AA); dark text passes against
   every color currently used for an event pill. */
.rz-scheduler .rz-event-content {
    color: #000000;
}

/* The template's green outline on every edited-and-valid field is gone (M1 gate): the mockups' fields stay neutral; only
   an invalid one is marked. */

.invalid {
    outline: 1px solid var(--color-danger);
}

.validation-message {
    color: var(--color-danger);
}

/* P1R-015: Radzen's own built-in validators (e.g. RadzenRequiredValidator, used by every
   Add/Edit dialog's required-field messages) render through .rz-message.rz-messages-error,
   colored via --rz-form-error-color -> --rz-danger (#f44336) - a fixed value in both
   Radzen themes, not routed through this app's semantic tokens at all. Measured live: only
   3.68:1 against a light-theme white card (fails AA) and a borderline 4.53:1 against
   material-dark's #1e1e1e card. Re-pointing at the app's own theme-aware --color-danger
   (already used by .validation-message above) fixes both. */
.rz-message.rz-messages-error {
    color: var(--color-danger);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.rz-form-field-content {
    border-radius: 15px;
    margin-block: 0;
}

.rz-form-field {
    margin-block: 0;
}

.rz-form-field-start {
    padding-top: 0rem !important;
}

.rz-fieldset-toggler.rzi-plus:before {
    content: 'chevron_right' !important;
}

.rz-fieldset-toggler.rzi-minus:before {
    content: 'keyboard_arrow_down' !important;
}

/* P1U-003 — shared desktop content container and page rhythm (docs/10-UI-CONTRACT.md UC-2.7).
   Every route renders inside MainLayout's .dormora-page, so all pages share the same
   margins and max-width; feature pages must not set their own outer padding/max-width.
   Breakpoints follow D-023 / UC-1.3 (only 767.98px and 1279.98px are permitted). */
:root {
    /* P4U-099 (owner's check): no cap; the page fills the rounded panel at any width, as the desktop mockup. */
    --dormora-page-max-width: none;
    --rz-layout-body-padding: 1.5rem 2rem;
    --dormora-body-pad-bottom: 1.5rem; /* the body's bottom padding alone (the shorthand above can't go in a calc): a sticky bar's offset is measured inside it */
}

@media (max-width: 1279.98px) {
    :root {
        --rz-layout-body-padding: 1.25rem 1.5rem;
        --dormora-body-pad-bottom: 1.25rem;
    }
}

@media (max-width: 767.98px) {
    :root {
        --rz-layout-body-padding: 1rem;
        --dormora-body-pad-bottom: 1rem;
    }
}

/* RadzenBody scrolls. Reserving its scrollbar gutter stops page content shifting sideways: the scrollbar appears only
   on long routes (measured as a 16px jump in P1U-003). P4U-081: the drawer no longer reserves one; with no expanding
   groups it scrolls only in a very short window, and the gutter took 15px from its labels. */
.rz-body {
    scrollbar-gutter: stable;
}

.dormora-page {
    width: 100%;
    max-width: var(--dormora-page-max-width);
    margin-inline: 0 auto;
}

/* ---------------------------------------------------------------------------------------
   P1U-004 — shared list / card / detail-page primitives (docs/10-UI-CONTRACT.md UC-2.4,
   UC-3.8, UC-4.2, UC-5.2/5.3). Components live in Components/Shared: ListRow, RowAction,
   EntityCard, BackLink, OverflowMenu. Feature pages must not restyle these per page.
   --------------------------------------------------------------------------------------- */

/* Desktop list row (UC-4.2). Rows sit flush with the toolbar/header edges; separated by a
   divider rather than individual cards. */
.dormora-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--rz-base-200);
    min-width: 0;
}

.dormora-row__leading {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.dormora-row__body {
    flex: 1 1 auto;
    min-width: 0;
}

.dormora-row__body--clickable {
    cursor: pointer;
}

.dormora-row__title {
    font-size: var(--rz-text-body1-font-size, 1rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--rz-text-title-color);
    overflow-wrap: anywhere;
}

.dormora-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-top: 0.15rem;
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    color: var(--rz-text-secondary-color);
    overflow-wrap: anywhere;
}

    .dormora-row__meta .rzi {
        font-size: 0.9rem;
    }

.dormora-row__description {
    margin-top: 0.15rem;
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    color: var(--rz-text-color);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.dormora-row__badges,
.dormora-row__trailing,
.dormora-row__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dormora-row__trailing {
    text-align: right;
}

.dormora-row__actions {
    gap: 0.1rem;
}

/* Completed/checked items (replaces the old page-local .task-done, which lived in
   MainDashboard.razor's inline <style> and was reused by class name only). Secondary rather
   than disabled text colour, so struck-through titles stay readable. */
.dormora-row--done .dormora-row__title {
    text-decoration: line-through;
    font-weight: 400;
    color: var(--rz-text-secondary-color);
}

/* Card grid (UC-5.3): 3 columns desktop, 2 compact, 1 mobile — D-023 breakpoints only. */
.dormora-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 1279.98px) {
    .dormora-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .dormora-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Clickable entity card (UC-5.2): the whole card is one link. */
.dormora-entity-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--rz-transition, 0.2s);
}

    .dormora-entity-card:hover {
        box-shadow: var(--rz-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.15));
        text-decoration: none;
        color: inherit;
    }

    .dormora-entity-card:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-entity-card__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.dormora-entity-card__icon {
    flex: 0 0 auto;
    color: var(--rz-text-secondary-color);
}

.dormora-entity-card__title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dormora-entity-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dormora-entity-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    color: var(--rz-text-secondary-color);
    overflow-wrap: anywhere;
}

    .dormora-entity-card__meta .rzi {
        font-size: 0.9rem;
        vertical-align: middle;
    }

/* Side-by-side detail sections (e.g. Care schedule | history), stacked on mobile. */
.dormora-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

@media (max-width: 767.98px) {
    .dormora-two-column {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Two-line clamp for description excerpts inside cards. */
.dormora-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Detail-page back link (UC-2.4). */
.dormora-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
    font-size: var(--rz-text-caption-font-size, 0.75rem);
    color: var(--rz-text-secondary-color);
    text-decoration: none;
}

    .dormora-back-link:hover {
        color: var(--rz-text-title-color);
        text-decoration: underline;
    }

    .dormora-back-link .rzi {
        font-size: 1.1rem;
    }

/* Overflow (more_vert) menu (UC-3.8): renders as a plain icon button, not a menu bar. */
/* Row actions and the overflow trigger use Radzen's Base text-button style: the Light/Text
   combination renders #eee icons on a near-white surface (measured in P1U-004), far below
   the 3:1 non-text contrast icons need. */
.dormora-overflow-menu.rz-menu {
    /* Radzen styles a menu's top item as a primary bar (white on --rz-primary); this is a
       lone icon trigger on the page surface, so re-point its top-item tokens. */
    --rz-menu-top-item-background-color: transparent;
    --rz-menu-top-item-color: var(--rz-text-secondary-color);
    --rz-menu-top-item-icon-color: var(--rz-text-secondary-color);
    --rz-menu-top-item-hover-color: var(--rz-text-title-color);
    --rz-menu-top-item-icon-hover-color: var(--rz-text-title-color);
    --rz-menu-top-item-selected-color: var(--rz-text-title-color);
}

/* A single ⋮ trigger, not a dropdown: hide Radzen's submenu caret. */
.dormora-overflow-menu > li > .rz-navigation-item-wrapper .rz-navigation-item-icon-children,
.dormora-overflow-menu > li > .rz-navigation-item-wrapper .rz-navigation-item-text:empty {
    display: none;
}

.dormora-overflow-menu.rz-menu {
    background: transparent;
    border: none;
    padding: 0;
    min-height: 0;
}

    .dormora-overflow-menu.rz-menu > ul > li > .rz-navigation-item-wrapper .rz-navigation-item-link {
        padding: 0.5rem;
    }

.dormora-menu-item--danger,
.dormora-menu-item--danger .rzi {
    color: var(--color-danger) !important;
}

/* P4I-016 (MK-16 frame a): the Meals menu sets its menu items apart under a divider (Copy last week, Save as a menu, Use a menu). */
.dormora-menu-item--divided {
    margin-top: 0.25rem;
    border-top: 1px solid var(--dormora-outline-variant);
}

/* ---------------------------------------------------------------------------------------
   P1U-005 — forms and dialogs (docs/10-UI-CONTRACT.md UC-8). Every dialog's form root carries
   .dormora-form; dialogs open via FocusPreservingDialogService.OpenFormAsync, which adds
   .dormora-dialog (+ --floating, or --sheet below 768px); footers use the shared DialogFooter.
   --------------------------------------------------------------------------------------- */

.dormora-form {
    --dormora-form-label-width: 8rem;
    --dormora-form-gap: 1rem;
}

/* Field rows: label left at a fixed 8rem (UC-8.6 — normalises the old 6rem outliers),
   field fills the rest of the row, validator directly under the field (UC-8.9). */
.dormora-form .rz-stack.rz-flex-row > .rz-label:first-child {
    flex: 0 0 var(--dormora-form-label-width);
    width: var(--dormora-form-label-width) !important;
}

.dormora-form .rz-stack.rz-flex-row > .rz-label:first-child ~ :is(.rz-textbox, .rz-textarea, .rz-dropdown, .rz-datepicker, .rz-numeric, .rz-colorpicker) {
    flex: 1 1 12rem;
    width: auto !important;
    min-width: 0;
}

.dormora-form .rz-stack.rz-flex-row > .rz-message {
    flex-basis: 100%;
    margin: -0.5rem 0 0 calc(var(--dormora-form-label-width) + var(--dormora-form-gap));
}

/* Mobile: label above field, full-width fields, one field per row (UC-8.6/8.7) — CSS reflow,
   no separate mobile dialog components. Checkbox/switch rows stay inline. */
@media (max-width: 767.98px) {
    /* !important: Radzen's material-base.css declares .rz-flex-row { flex-direction: row !important },
       which silently defeated this rule from P1U-005 until P1U-040 (rows only looked stacked when the
       field happened to wrap). */
    .dormora-form .rz-stack.rz-flex-row:has(> .rz-label:first-child):not(:has(> .rz-chkbox, > .rz-switch)) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.35rem;
    }

    .dormora-form .rz-stack.rz-flex-row > .rz-label:first-child {
        flex-basis: auto;
        width: auto !important;
        margin-top: 0 !important;
    }

    .dormora-form .rz-stack.rz-flex-row > .rz-label:first-child:empty {
        display: none;
    }

    /* !important: fields carry inline flex: 1 1 12rem for the desktop row; in the (now genuinely) vertical
       mobile row that basis would become a 12rem height. */
    .dormora-form .rz-stack.rz-flex-row > .rz-label:first-child ~ :is(.rz-textbox, .rz-textarea, .rz-dropdown, .rz-datepicker, .rz-numeric, .rz-colorpicker) {
        flex: 0 0 auto !important;
        width: 100% !important;
    }

    .dormora-form .rz-stack.rz-flex-row > .rz-message {
        margin: 0;
    }
}

/* Section headings inside long forms (UC-8.11: Recipe, Event). */
.dormora-form .dormora-form-section {
    margin: 0.75rem 0 -0.25rem;
    color: var(--rz-text-secondary-color);
}

.dormora-form .dormora-form-section:first-child {
    margin-top: 0;
}

/* P3-010: an event's RSVPs (EventAttendancePanel), above the event form; the heading matches the form's sections. */
.dormora-attendance {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dormora-attendance .dormora-form-section {
    margin: 0;
    color: var(--rz-text-secondary-color);
}

.dormora-attendance__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dormora-attendance__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

/* Footer (UC-8.5): [Delete] … [Cancel] [Save], pinned to the bottom of the dialog's scroll
   area so it stays reachable in long forms and above the keyboard (UC-8.3). Its bottom offsets
   follow the content's bottom padding, which the mobile sheet grows by the safe-area inset. */
.dormora-dialog-footer {
    position: sticky;
    bottom: calc(-1 * var(--dormora-dialog-pad-bottom, 1.5rem));
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Full width of the sheet (M1 gate): the dialog's own side padding is taken back and given to the footer's, so its
       background covers rows that run to the sheet's edge (the template and menu editors' lists). Outside a dialog (the
       side panel) the variable is unset and the footer stays inside its parent. */
    margin: 0.5rem calc(-1 * var(--dormora-dialog-pad-inline, 0px)) calc(-1 * var(--dormora-dialog-pad-bottom, 1.5rem));
    padding: 1rem var(--dormora-dialog-pad-inline, 0px) var(--dormora-dialog-pad-bottom, 1.5rem);
    border-top: 1px solid var(--rz-base-200);
    background-color: var(--rz-dialog-background-color, var(--rz-base-background-color));
}

.dormora-dialog-footer__end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* ---------------------------------------------------------------------------------------
   Dialog presentation (UC-8.3/8.13). Every dialog sits over a translucent dark scrim that keeps
   the launching page visible. Desktop: a floating, rounded, elevated card. Mobile: form dialogs
   are a content-sized bottom sheet with a drag handle (DialogSheetHelper.js adds swipe-down to
   close and lifts the sheet above the virtual keyboard); confirmations stay a small floating card.
   --------------------------------------------------------------------------------------- */

:root {
    --dormora-dialog-radius: 1.75rem;
    --dormora-dialog-scrim: rgba(0, 0, 0, 0.32); /* P4U-023: the M3 scrim (black at 32%) */
    --dormora-dialog-shadow: 0 1.5rem 3rem -0.75rem rgba(0, 0, 0, 0.35), 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.2);
    --dormora-dialog-easing: cubic-bezier(0.2, 0, 0, 1);
}

:root[data-theme="dark"] {
    --dormora-dialog-scrim: rgba(0, 0, 0, 0.6);
    --dormora-dialog-shadow: 0 1.5rem 3rem -0.75rem rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Radzen's mask is base-800 at 50% opacity, which reads grey on the dark theme; a true black
   scrim at a fixed alpha dims both themes the same way. */
.rz-dialog-mask {
    background-color: var(--dormora-dialog-scrim);
    opacity: 1;
    animation: dormora-scrim-in 0.2s ease-out;
}

.rz-dialog.dormora-dialog {
    border-radius: var(--dormora-dialog-radius);
    box-shadow: var(--dormora-dialog-shadow);
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 4rem);
    min-height: 0;
}

.rz-dialog.dormora-dialog.rz-open {
    animation: dormora-dialog-in 0.22s var(--dormora-dialog-easing);
}

/* P4I-F01: the title strip takes the dialog's own background. Radzen paints it with
   --rz-dialog-title-background-color (base-900 in dark) while the dialog body takes
   --rz-dialog-background-color (surface-container, overridden above), which left the strip about
   8 grey levels darker than the body. The phone sheet inherits this rule. */
.dormora-dialog .rz-dialog-titlebar {
    background-color: var(--rz-dialog-background-color);
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1.5rem 0.25rem;
}

.dormora-dialog .rz-dialog-title {
    font-size: 1.375rem;
    line-height: 1.75rem;
    letter-spacing: 0;
}

/* The X becomes a round 40px icon button with a hover/focus state layer. */
.dormora-dialog .rz-dialog-titlebar-close {
    flex: 0 0 auto;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: -0.5rem -0.5rem -0.5rem 0;
    border-radius: 50%;
    transition: background-color 0.15s ease;
}

    .dormora-dialog .rz-dialog-titlebar-close:hover,
    .dormora-dialog .rz-dialog-titlebar-close:focus-visible {
        background-color: var(--rz-base-200);
    }

.dormora-dialog .rz-dialog-content {
    --dormora-dialog-pad-bottom: var(--rz-dialog-content-padding, 1.5rem);
    --dormora-dialog-pad-inline: var(--rz-dialog-content-padding, 1.5rem);
    padding-bottom: var(--dormora-dialog-pad-bottom);
}

/* Confirmations (ConfirmDeleteAsync/ConfirmActionAsync): narrow, message in the secondary text
   colour, buttons right-aligned with the action last — the same order as DialogFooter. */
.rz-dialog.dormora-dialog--confirm {
    width: calc(100vw - 3rem) !important;
    max-width: 25rem;
    min-width: 0;
    margin: 0;
}

.dormora-dialog--confirm .rz-dialog-content {
    padding-top: 1rem;
}

.dormora-dialog--confirm .rz-dialog-confirm-message {
    color: var(--rz-text-secondary-color);
    margin-block-end: 1.5rem;
}

.dormora-dialog--confirm .rz-dialog-confirm-buttons {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

    .dormora-dialog--confirm .rz-dialog-confirm-buttons .rz-button {
        flex: 0 0 auto;
        min-width: 5.5rem;
    }

@media (max-width: 767.98px) {
    .dormora-dialog-wrapper--sheet {
        align-items: flex-end;
    }

    /* Radzen's own phone rule (.rz-dialog:not(.rz-dialog-confirm):not(.rz-dialog-alert)) pins every
       other dialog to the top at full width with no radius, with !important on the inset and width;
       the doubled class out-ranks it. --dormora-keyboard-inset is set by DialogSheetHelper.js from
       the visual viewport, so the sheet rides above the keyboard. */
    .rz-dialog.dormora-dialog.dormora-dialog--sheet:not(.rz-dialog-confirm) {
        inset: auto 0 var(--dormora-keyboard-inset, 0px) 0 !important;
        width: 100% !important;
        max-width: 40rem;
        max-height: calc(100dvh - var(--dormora-keyboard-inset, 0px) - env(safe-area-inset-top, 0px) - 1.5rem);
        margin-inline: auto;
        border-radius: var(--dormora-dialog-radius) var(--dormora-dialog-radius) 0 0;
    }

    .rz-dialog.dormora-dialog--sheet.rz-open {
        animation: dormora-sheet-in 0.3s var(--dormora-dialog-easing);
    }

    /* P4I-014 (MK-14 "Check the recipe"): the sheet is as tall as the screen allows, not as tall as its content. */
    .rz-dialog.dormora-dialog.dormora-dialog--sheet.dormora-dialog--full:not(.rz-dialog-confirm) {
        height: calc(100dvh - var(--dormora-keyboard-inset, 0px) - env(safe-area-inset-top, 0px) - 1.5rem);
    }

    /* Drag handle. */
    .rz-dialog.dormora-dialog--sheet::before {
        content: "";
        position: absolute;
        top: 0.75rem;
        left: 50%;
        width: 2rem;
        height: 0.25rem;
        border-radius: 0.125rem;
        background-color: var(--rz-base-400);
        transform: translateX(-50%);
    }

    /* The title bar, which includes the handle strip above the title, is the swipe target;
       touch-action keeps the browser from panning while the sheet is dragged. */
    .dormora-dialog--sheet .rz-dialog-titlebar {
        padding: 1.75rem 1.25rem 0.25rem 1.5rem;
        touch-action: none;
    }

    .dormora-dialog--sheet .rz-dialog-title {
        font-size: 1.25rem;
    }

    .dormora-dialog--sheet .rz-dialog-content {
        --dormora-dialog-pad-bottom: calc(var(--rz-dialog-content-padding, 1.5rem) + env(safe-area-inset-bottom, 0px));
        padding-top: 1rem;
        overscroll-behavior: contain;
    }

    .rz-dialog.dormora-dialog--sheet.dormora-dialog--dragging {
        transition: none;
    }

    .rz-dialog.dormora-dialog--sheet.dormora-dialog--settling {
        transition: transform 0.2s var(--dormora-dialog-easing);
    }
}

/* ---------------------------------------------------------------------------------------
   P4U-023 — form sheets refined to Material 3 (sentence case comes from the theme, UC-M.10.1). Cancel a
   text button and Save filled (DialogFooter); rows with a leading icon; choice chips (ChoiceChips, DateQuickPicks); "Just me" /
   "Household" segmented buttons (ScopeField); "Add details" (AddDetails); and, on phones, the
   pickers (dropdown and date picker panels) as bottom sheets.
   --------------------------------------------------------------------------------------- */

.dormora-dialog-footer__save {
    min-width: 5.5rem;
}

.dormora-form-row {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
}

.dormora-form-row__icon {
    color: var(--rz-text-secondary-color);
    font-size: 1.5rem;
    line-height: 2.5rem;
}

.dormora-form-row__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.dormora-form-row__label {
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
}

.dormora-choice-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* The chips themselves are P4U-020's .dormora-chip (FilterChip, below); a form adds only the disabled state. */
.dormora-chip:disabled {
    opacity: 0.38;
    cursor: default;
}

/* M5 gate fix 1a (D6): a read-only chip (the days of a plan someone else shared) keeps its full colours: on-surface-variant on the page and on-primary-container on
   primary-container are 4.5:1 or more in both themes, where a faded chip was about 2.3:1. It looks as it does but does not react to a hover. */
.dormora-chip--readonly,
.dormora-chip--readonly:hover {
    cursor: default;
}

.dormora-chip--readonly:not(.dormora-chip--selected):hover {
    background-color: transparent;
}

.dormora-chip--readonly.dormora-chip--selected:hover {
    background-color: var(--dormora-primary-container);
}


.dormora-date-picks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Segmented buttons: rounded ends and a tonal selected segment. */
.dormora-segmented.rz-selectbar {
    border-radius: 1.25rem;
}

    .dormora-segmented.rz-selectbar .rz-button {
        min-height: 2.5rem;
        padding-inline: 1rem;
    }

/* In a form row's column the control is as wide as its segments, not the row, so its focus ring fits it (M5 gate fix 2: p-mk62-e). */
.dormora-form-row__body > .dormora-segmented.rz-selectbar {
    width: fit-content;
    max-width: 100%;
}

    .dormora-segmented.rz-selectbar .rz-button.rz-state-active {
        background-color: var(--dormora-primary-container);
        color: var(--dormora-on-primary-container);
    }

        /* P4U-119: M3's check on the selected segment, as in the mockups' sheets ("✓ Household"). Decoration: the
           selection is already the button's aria-checked. */
        .dormora-segmented.rz-selectbar .rz-button.rz-state-active .rz-button-text::before,
        .dormora-segmented__option--on::before {
            content: 'check';
            font-family: var(--rz-icon-font-family);
            font-feature-settings: "liga";
            font-size: 1.125rem;
            line-height: 1;
            margin-inline-end: 0.375rem;
            vertical-align: -0.2em;
            speak: never;
        }

    .dormora-segmented.rz-selectbar .rz-button:first-child {
        border-radius: 1.25rem 0 0 1.25rem;
    }

    .dormora-segmented.rz-selectbar .rz-button:last-child {
        border-radius: 0 1.25rem 1.25rem 0;
    }

/* P4U-119: the M3 switch, as in the mockups (Settings' "Modules you use", Members' module switches): a 52 × 32 track,
   outlined with a small outline-coloured thumb when off, filled primary with a larger on-primary thumb when on. Radzen's
   material theme still drew the Material 2 switch (a thin track under an overhanging thumb). */
.rz-switch {
    width: 3.25rem;
    min-width: 3.25rem;
    height: 2rem;
    border-radius: 1rem;
}

    .rz-switch .rz-switch-circle {
        background: var(--dormora-surface-container-high);
        border: 2px solid var(--dormora-on-surface-variant);
        border-radius: 1rem;
    }

    .rz-switch.rz-switch-checked .rz-switch-circle {
        background: var(--dormora-primary);
        border-color: var(--dormora-primary);
    }

    .rz-switch .rz-switch-circle:before {
        width: 1rem;
        height: 1rem;
        margin-block-start: -0.5rem;
        inset-inline-start: 0.375rem;
        border-radius: 50%;
        background: var(--dormora-on-surface-variant);
        box-shadow: none;
        transition: transform .2s ease, width .2s ease, height .2s ease, margin .2s ease;
    }

    .rz-switch.rz-switch-checked .rz-switch-circle:before {
        width: 1.5rem;
        height: 1.5rem;
        margin-block-start: -0.75rem;
        background: var(--dormora-on-primary);
        transform: translateX(1.125rem);
    }

    *[dir=rtl] .rz-switch.rz-switch-checked .rz-switch-circle:before {
        transform: translateX(-1.125rem);
    }

    .rz-switch .rz-switch-circle:hover:not(.rz-disabled):before,
    .rz-switch.rz-switch-checked .rz-switch-circle:hover:not(.rz-disabled):before {
        box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
    }

    .rz-switch:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

@media (prefers-reduced-motion: reduce) {
    .rz-switch .rz-switch-circle:before {
        transition: none;
    }
}

.dormora-add-details__toggle {
    display: grid;
    grid-template-columns: 1.5rem auto minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
    width: 100%;
    min-height: var(--dormora-touch-target);
    padding: 0;
    border: 0;
    background: none;
    color: var(--rz-primary);
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

    .dormora-add-details__toggle:focus-visible {
        outline: 2px solid var(--rz-primary);
        outline-offset: 2px;
        border-radius: 0.25rem;
    }

.dormora-add-details__summary {
    justify-self: end;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .dormora-segmented.rz-selectbar .rz-button {
        min-height: var(--dormora-touch-target, 44px);
    }

    /* Pickers as bottom sheets: Radzen positions the panel under its field with inline styles, so the
       sheet needs !important. Above the keyboard, as the form sheet is. */
    .rz-dropdown-panel:not(.rz-editor-dropdown-panel),
    .rz-datepicker-popup-container {
        position: fixed !important;
        inset: auto 0 var(--dormora-keyboard-inset, 0px) 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 40rem;
        max-height: 60dvh;
        margin-inline: auto;
        overflow: auto;
        padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px));
        border-radius: var(--dormora-dialog-radius, 1.75rem) var(--dormora-dialog-radius, 1.75rem) 0 0;
        box-shadow: var(--dormora-dialog-shadow);
    }

    .rz-datepicker-popup-container .rz-calendar,
    .rz-datepicker-popup-container .rz-datepicker {
        margin-inline: auto;
    }

    .rz-dropdown-panel .rz-dropdown-item {
        min-height: var(--dormora-touch-target, 44px);
        padding-inline: 1.5rem;
    }
}

@keyframes dormora-scrim-in {
    from { opacity: 0; }
}

@keyframes dormora-dialog-in {
    from { opacity: 0; transform: translateY(0.5rem) scale(0.96); }
}

@keyframes dormora-sheet-in {
    from { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .rz-dialog-mask,
    .rz-dialog.dormora-dialog.rz-open,
    .rz-dialog.dormora-dialog--sheet.rz-open {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------------------
   P1U-010 — mobile application shell (< 768px, D-023). MainLayout swaps the sidebar for a
   compact top app bar + bottom navigation when ShellState.IsMobile; everything below is keyed
   off .dormora-shell--mobile so desktop/compact are untouched.
   --------------------------------------------------------------------------------------- */

/* P4U-011: the bar is 72px (the mockups); --dormora-bottom-nav-offset is the space it takes, 0 where it isn't shown
   (pushed screens, desktop) or is hidden while the keyboard is open. Content, the FAB and its menu keep clear of it. */
:root {
    --dormora-bottom-nav-height: 4.5rem;
    --dormora-bottom-nav-offset: 0px;
}

/* P4U-022: the snackbar keeps clear of the FAB (3.5rem and its 1rem gap) as well. */
:root {
    --dormora-fab-clearance: 0px;
}

:root:has(.dormora-fab) {
    --dormora-fab-clearance: 4.5rem;
}

:root:has(.dormora-bottom-nav) {
    --dormora-bottom-nav-offset: var(--dormora-bottom-nav-height);
}

:root.dormora-keyboard-open {
    --dormora-bottom-nav-offset: 0px;
}

.dormora-notifications-button {
    position: relative;
    display: flex;
}

/* Top app bar. P4U-010 (UC-M.1, F1): Material 3, on the page's own surface (the header tokens above; desktop's too since
   P4U-080). The status bar takes the same colour on MAUI (ISystemBarsTheme, UC-M.1.6). */
    .dormora-shell--mobile .rz-header {
        box-shadow: none;
        transition: box-shadow 150ms ease;
        /* P4I-M1 gate (owner, 2026-10-19: the Meals ⋮ opened behind the page): Radzen gives the header z-index 2, which makes it a
           stacking context, so the ⋮ menu inside it (z-index 3) is only ever above the page's own layers up to 2. P4I-002i's sticky
           tab row (z-index 4) and anything else in the page painted over the open menu. 5 puts every page's ⋮ and bar menus above
           the tab row (4), the composer bars (2) and the rows; the pull-to-refresh indicator (5) follows the header in the
           document and stays above it, and the FAB (101), its scrim (100), the bottom bar and the sheets are well above. */
        z-index: 5;
    }

    /* A divider once the content has scrolled under the bar (TopAppBarHelper.js). */
    .dormora-shell--mobile .rz-header:has(.dormora-topbar--collapsed) {
        box-shadow: inset 0 -1px 0 var(--dormora-outline-variant);
    }

.dormora-topbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    min-height: 4rem;
    padding: 0.5rem 0.25rem;
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
    color: var(--dormora-on-surface);
}

.dormora-topbar__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dormora-touch-target);
    height: var(--dormora-touch-target);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dormora-on-surface);
    text-decoration: none;
    cursor: pointer;
    flex: 0 0 auto;
}

    .dormora-topbar__back:hover,
    .dormora-topbar__back:focus-visible {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
        color: var(--dormora-on-surface);
    }

/* P4U-031 (found): Radzen's ".rz-header a" (on-primary, for its filled header) made a Back link white on the phone's light
   bar, on every pushed screen with a back target. */
.rz-header a.dormora-topbar__back {
    color: var(--dormora-on-surface);
}

    .dormora-topbar__back:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

/* UC-M.11.1: the mark alone, small, on Home only. */
.dormora-topbar__mark {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    margin-inline: 0.5rem 0.25rem;
    flex: 0 0 auto;
}

.dormora-topbar__spacer {
    flex: 1 1 auto;
}

/* UC-M.10.2 title-large. UC-M.1.4: a title never truncates at 360 px; a long name (a list, a note) wraps to a second
   line and only then is clipped. */
.dormora-topbar__title {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline-start: 0.5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: 400;
    color: var(--dormora-on-surface);
}

/* Root screens: the bar's title shows only once the large title has scrolled under it. */
.dormora-shell--root .dormora-topbar__title {
    -webkit-line-clamp: 1;
    opacity: 0;
    transition: opacity 150ms ease;
}

.dormora-shell--root .dormora-topbar--collapsed .dormora-topbar__title,
.dormora-shell--bar-title .dormora-topbar__title {
    opacity: 1;
}

/* P4U-031: Calendar's month in the bar opens the month picker; a button that looks like the title. */
.dormora-topbar__title--button {
    display: block;
    flex: 1 1 auto;
    min-height: var(--dormora-touch-target);
    margin: 0;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    font-family: inherit;
    text-align: start;
    /* P4I-M7 gate fix 4 (p-mkw05-a, blocking): the month shows in full; beside the Key, today, search and the avatar a long
       name ("September 2027") wraps to a second line (as every other bar title does) rather than ellipsising to "Octob...". */
    white-space: normal;
    max-height: 3.5rem;
    cursor: pointer;
}

    .dormora-topbar__title--button:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

/* P4U-031 (UC-M.1.1): a page's icons in the bar (Calendar's today, Event detail's share and edit). */
.dormora-topbar__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dormora-touch-target);
    height: var(--dormora-touch-target);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dormora-on-surface-variant);
    cursor: pointer;
    flex: 0 0 auto;
}

    .dormora-topbar__action:hover,
    .dormora-topbar__action:focus-visible {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
    }

    .dormora-topbar__action:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

    /* P4U-037: a toggle that's on (Note detail's pin). */
    .dormora-topbar__action--on {
        color: var(--dormora-primary);
    }

        .dormora-topbar__action--on .rzi {
            font-variation-settings: 'FILL' 1;
        }

/* Home's household switcher (G7): the name and a drop-down arrow, no outline. */
.dormora-household-chip.dormora-household-chip--topbar {
    gap: 0;
    min-height: var(--dormora-touch-target);
    min-width: 0;
    max-width: none;
    flex: 0 1 auto;
    margin: 0;
    padding: 0 0.25rem 0 0.5rem;
    border: 0;
    border-radius: 999px;
    color: var(--dormora-on-surface);
    font-size: 0.875rem;
    font-weight: 600;
}

/* UC-M.10.2 headline-medium: on a root screen the page's <h1> is the large title, under the bar. It wraps rather than
   truncating (UC-M.1.4). */
.dormora-shell--mobile.dormora-shell--root .dormora-page-title {
    font-size: 1.75rem;
    line-height: 2.25rem;
    font-weight: 400;
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .dormora-shell--mobile .rz-header,
    .dormora-shell--root .dormora-topbar__title {
        transition: none;
    }
}

/* One visible title per presentation (UC-2.2): on a pushed screen the top bar shows it, so the page's
   <h1> is visually hidden but stays in the DOM for headings navigation and FocusOnNavigate. */
.dormora-shell--mobile:not(.dormora-shell--root) .dormora-page-title,
.dormora-shell--bar-title .dormora-page-title {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Back lives in the top bar on mobile (UC-2.4), not above the page header. */
.dormora-shell--mobile .dormora-back-link {
    display: none;
}

/* Keep page content clear of the fixed bottom navigation. P4U-015: a screen sliding in never scrolls sideways. */
.dormora-shell--mobile .rz-body {
    padding-bottom: calc(var(--dormora-bottom-nav-offset) + 1rem + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    /* M4 polish: a phone's scrollbar overlays the page, so no gutter is reserved; where one is kept (a narrow desktop window, a capture
       with its bars hidden) it took 16px from the right, so the tab strip's hairline stopped short of the edge. */
    scrollbar-gutter: auto;
}

/* P4I-002i: Radzen's material theme gives .rz-body transform: translateZ(0) (.rz-layout .rz-body), which makes it the
   containing block of every position: fixed element inside it, so a screen's pinned bar (the list's add field, a note's,
   Mark done) scrolled with the page. On a phone there is no transform at rest, so those bars are fixed to the screen.
   Pull to refresh moves .dormora-ptr-content (its own element), not .rz-body, so its rules are unaffected. Three classes
   beat the theme's two whatever the load order. */
.rz-layout.dormora-shell--mobile .rz-body {
    transform: none;
}

/* P4U-015 (UC-M.12.1): how a phone's screen arrives (MainLayout.PageClass). A pushed screen slides in from the end edge
   and Back reverses it; another bottom-bar tab fades through. M3's emphasised decelerate easing. Each movement has two
   names, alternated, so the next change of the same kind restarts it. Desktop has no page movement (UC-M.D14), and
   reduced motion none at all (UC-M.12.2). */
@keyframes dormora-forward-0 { from { opacity: 0; transform: translateX(2.5rem); } to { opacity: 1; transform: none; } }
@keyframes dormora-forward-1 { from { opacity: 0; transform: translateX(2.5rem); } to { opacity: 1; transform: none; } }
@keyframes dormora-back-0 { from { opacity: 0; transform: translateX(-2.5rem); } to { opacity: 1; transform: none; } }
@keyframes dormora-back-1 { from { opacity: 0; transform: translateX(-2.5rem); } to { opacity: 1; transform: none; } }
@keyframes dormora-tab-0 { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes dormora-tab-1 { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

.dormora-shell--mobile .dormora-page--forward-0 { animation: dormora-forward-0 300ms cubic-bezier(0.05, 0.7, 0.1, 1); }
.dormora-shell--mobile .dormora-page--forward-1 { animation: dormora-forward-1 300ms cubic-bezier(0.05, 0.7, 0.1, 1); }
.dormora-shell--mobile .dormora-page--back-0 { animation: dormora-back-0 300ms cubic-bezier(0.05, 0.7, 0.1, 1); }
.dormora-shell--mobile .dormora-page--back-1 { animation: dormora-back-1 300ms cubic-bezier(0.05, 0.7, 0.1, 1); }
.dormora-shell--mobile .dormora-page--tab-0 { animation: dormora-tab-0 250ms cubic-bezier(0.05, 0.7, 0.1, 1); }
.dormora-shell--mobile .dormora-page--tab-1 { animation: dormora-tab-1 250ms cubic-bezier(0.05, 0.7, 0.1, 1); }

@media (prefers-reduced-motion: reduce) {
    .dormora-shell--mobile .dormora-page {
        animation: none;
    }
}

/* Bottom navigation. P4U-011 (UC-M.2.1): the Material 3 navigation bar on the surface container, flat. Each item is the
   active indicator (a 64x32 pill round the icon) over a label; the selected one has the indicator in the primary
   container, a filled icon, and the label in the text colour and heavier, so the state isn't carried by colour alone. */
.dormora-bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 100;
    display: grid;
    /* One equal column per item: normally five, fewer when too few modules are on to fill it (D-061). */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    min-height: var(--dormora-bottom-nav-height);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: var(--dormora-surface-container);
}

.dormora-keyboard-open .dormora-bottom-nav {
    display: none;
}

.dormora-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 0;
    min-height: var(--dormora-bottom-nav-height);
    padding: 0.625rem 0 0.75rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 500;
    color: var(--dormora-on-surface-variant);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.dormora-bottom-nav__indicator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    max-width: 100%;
    height: 2rem;
    border-radius: 1rem;
    transition: background-color 150ms ease;
}

    .dormora-bottom-nav__indicator .rzi {
        font-size: 1.5rem;
        --rz-icon-fill: 0;
    }

.dormora-bottom-nav__label {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .dormora-bottom-nav__item:hover {
        color: var(--dormora-on-surface);
        text-decoration: none;
    }

        .dormora-bottom-nav__item:hover .dormora-bottom-nav__indicator {
            background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
        }

    .dormora-bottom-nav__item:focus-visible {
        outline: none;
    }

        .dormora-bottom-nav__item:focus-visible .dormora-bottom-nav__indicator {
            outline: 2px solid var(--dormora-focus-ring);
            outline-offset: 2px;
        }

.dormora-bottom-nav__item--active {
    color: var(--dormora-on-surface);
    font-weight: 700;
}

    .dormora-bottom-nav__item--active .dormora-bottom-nav__indicator,
    .dormora-bottom-nav__item--active:hover .dormora-bottom-nav__indicator {
        background-color: var(--dormora-primary-container);
        color: var(--dormora-on-primary-container);
    }

        .dormora-bottom-nav__item--active .dormora-bottom-nav__indicator .rzi {
            --rz-icon-fill: 1;
        }

/* The badge slot: a count at the icon's top right, or a small dot. Its number is in the item's accessible name. */
.dormora-bottom-nav__badge {
    position: absolute;
    top: 0.125rem;
    left: calc(50% + 0.25rem);
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 0.5rem;
    background-color: var(--dormora-error);
    color: var(--dormora-on-error);
    font-size: 0.6875rem;
    line-height: 1rem;
    font-weight: 500;
    text-align: center;
}

    .dormora-bottom-nav__badge--dot {
        top: 0.25rem;
        left: calc(50% + 0.5rem);
        min-width: 0.375rem;
        width: 0.375rem;
        height: 0.375rem;
        padding: 0;
    }

@media (prefers-reduced-motion: reduce) {
    .dormora-bottom-nav__indicator {
        transition: none;
    }
}

/* P4U-012 (UC-M.2.3): the More screen. A three-column grid of module tiles on the surface container (the mockups), then
   the Household and App sections as rows under title-small headings. */
.dormora-more ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dormora-more__tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.dormora-more__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 5rem;
    padding: 0.75rem 0.375rem 0.625rem;
    border-radius: 1rem;
    background-color: var(--dormora-surface-container);
    color: var(--dormora-on-surface);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}

    .dormora-more__tile .rzi {
        font-size: 1.625rem;
        color: var(--dormora-primary);
    }

    .dormora-more__tile:hover,
    .dormora-more__tile:focus-visible {
        background-color: var(--dormora-surface-container-high);
        color: var(--dormora-on-surface);
        text-decoration: none;
    }

    .dormora-more__tile:focus-visible,
    .dormora-more__row:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-more__badge {
    position: absolute;
    top: 0.375rem;
    right: 0.5rem;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 0.625rem;
    background-color: var(--dormora-error);
    color: var(--dormora-on-error);
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.dormora-more__heading {
    margin: 1.25rem 0 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--dormora-primary);
}

.dormora-more__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.75rem;
    color: var(--dormora-on-surface);
    font-size: 1rem;
    text-decoration: none;
}

    .dormora-more__row .rzi {
        font-size: 1.5rem;
        color: var(--dormora-on-surface-variant);
    }

    .dormora-more__row:hover,
    .dormora-more__row:focus-visible {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
        color: var(--dormora-on-surface);
        text-decoration: none;
    }

/* ---------------------------------------------------------------------------------------
   P4U-014 (G6) — Notifications' own screen: New and Earlier, each headed like More's sections.
   --------------------------------------------------------------------------------------- */
.dormora-notifications__heading {
    margin: 1.25rem 0 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--dormora-primary);
}

/* P4U-119: no line between the phone's rows, as the mockup and every other list (desktop's rows have none either). */
.dormora-notifications .dormora-row--mobile {
    border-bottom: 0;
}

.dormora-notifications__note {
    margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------------------------
   P4U-013 (UC-M.2.4) — the phone's account sheet, opened by the avatar (and Home's switcher, its household part).
   A bottom sheet like every other (the handle, swipe and scrim come from .dormora-dialog--sheet); its title is the
   wordmark (UC-M.11.1).
   --------------------------------------------------------------------------------------- */

/* The avatar and Home's switcher are buttons on a phone: no button chrome. */
.dormora-topbar__account,
button.dormora-household-chip--topbar {
    background: none;
    font: inherit;
    cursor: pointer;
}

.dormora-topbar__account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--dormora-touch-target);
    min-height: var(--dormora-touch-target);
    padding: 0 0.25rem;
    border: 0;
    border-radius: 999px;
    color: inherit;
}

    .dormora-topbar__account:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-account-sheet__title {
    display: flex;
    align-items: center;
}

    /* Logo.png is the mark beside the wordmark, so it needs this width for the name to read. */
    .dormora-account-sheet__title img {
        width: 6rem;
        height: auto;
    }

.dormora-account-sheet {
    display: flex;
    flex-direction: column;
}

.dormora-account-sheet__who {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem 1rem;
    border-radius: 1.25rem;
    background-color: var(--dormora-surface-container);
}

.dormora-account-sheet__person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--dormora-touch-target);
    color: var(--dormora-on-surface);
    text-decoration: none;
}

    .dormora-account-sheet__person:hover,
    .dormora-account-sheet__person:focus-visible {
        color: var(--dormora-on-surface);
        text-decoration: none;
    }

.dormora-account-sheet__person-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dormora-account-sheet__name {
    font-weight: 600;
}

.dormora-account-sheet__email {
    color: var(--dormora-on-surface-variant);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

/* An M3 outlined button. */
.dormora-account-sheet__manage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 999px;
    color: var(--dormora-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

    .dormora-account-sheet__manage:hover,
    .dormora-account-sheet__manage:focus-visible {
        background-color: color-mix(in srgb, var(--dormora-primary) 8%, transparent);
        color: var(--dormora-primary);
        text-decoration: none;
    }

.dormora-account-sheet__heading {
    margin: 1rem 0 0.25rem;
    padding-inline: 0.25rem;
    color: var(--dormora-on-surface-variant);
    font-size: 0.875rem;
    font-weight: 500;
}

.dormora-account-sheet__list {
    display: flex;
    flex-direction: column;
}

.dormora-account-sheet__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.5rem 0.25rem;
    border: 0;
    border-radius: 0.75rem;
    background: none;
    color: var(--dormora-on-surface);
    font: inherit;
    font-size: 1rem;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

    .dormora-account-sheet__row .rzi {
        flex: none;
        font-size: 1.5rem;
        color: var(--dormora-on-surface-variant);
    }

    .dormora-account-sheet__row .rzi.dormora-account-sheet__radio--on {
        color: var(--dormora-primary);
    }

    .dormora-account-sheet__row:hover,
    .dormora-account-sheet__row:focus-visible {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
        color: var(--dormora-on-surface);
        text-decoration: none;
    }

    .dormora-account-sheet__row:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

    .dormora-account-sheet__row:disabled {
        cursor: default;
        opacity: 0.6;
    }

.dormora-account-sheet__row-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dormora-account-sheet__row-detail {
    color: var(--dormora-on-surface-variant);
    font-size: 0.875rem;
}

.dormora-account-sheet__note {
    margin: 0.5rem 0.25rem;
    color: var(--dormora-on-surface-variant);
    font-size: 0.875rem;
}

.dormora-account-sheet__divider {
    margin: 0.5rem 0;
    border: 0;
    border-top: 1px solid var(--dormora-outline-variant);
    opacity: 1;
}

/* ---------------------------------------------------------------------------------------
   P1U-011 — shared mobile primitives (docs/10-UI-CONTRACT.md UC-4.4, UC-3.4, UC-6.5, UC-7,
   UC-9.7). Presentation-aware components (ListRow, PageHeader, ListToolbar) switch markup via
   the cascaded ShellState; these rules style the mobile variants and the shared navigator.
   --------------------------------------------------------------------------------------- */

/* Mobile list cell (UC-4.4): ≥56px, one metadata line carrying badges/amounts, one trailing ⋮. */
.dormora-row--mobile {
    min-height: 3.5rem;
    align-items: flex-start;
    gap: 0.5rem;
}

    .dormora-row--mobile .dormora-row__leading {
        min-width: var(--dormora-touch-target);
        min-height: var(--dormora-touch-target);
        justify-content: center;
    }

    .dormora-row--mobile .dormora-row__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .dormora-row--mobile .dormora-row__meta {
        row-gap: 0.35rem;
    }

/* P4U-021 (UC-M.5, UC-M.6): the phone row. Its own surface covers the swipe backgrounds; vertical scrolling stays the
   browser's (pan-y), sideways drags are the swipe's (dormoraRows in TopAppBarHelper.js). No text selection or callout, so
   a long press opens the actions sheet. */
.dormora-swipe {
    --dormora-row-surface: var(--rz-body-background-color);
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.rz-dialog .dormora-swipe {
    --dormora-row-surface: var(--rz-dialog-background-color, var(--rz-base-background-color));
}

    .dormora-swipe > .dormora-row {
        position: relative;
        z-index: 1;
        background-color: var(--dormora-row-surface);
        transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
    }

    .dormora-swipe--active > .dormora-row {
        transition: none;
    }

    .dormora-swipe a,
    .dormora-swipe img {
        -webkit-user-drag: none;
    }

/* The revealed background: the action's icon and label (UC-M.6.2), tonal, then filled once armed. */
.dormora-swipe__bg {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding-inline: 1.25rem;
    font-weight: 500;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

.dormora-swipe__bg--end {
    justify-content: flex-end;
}

.dormora-swipe[data-side="start"] > .dormora-swipe__bg--start,
.dormora-swipe[data-side="end"] > .dormora-swipe__bg--end {
    display: flex;
}

.dormora-swipe--armed > .dormora-swipe__bg {
    background-color: var(--dormora-primary);
    color: var(--dormora-on-primary);
}

/* P4U-030 (P4U-3 rule 1): a swipe to done ("check") shows the success container with "✓ Done", filled once armed. */
.dormora-swipe__bg--success {
    background-color: var(--dormora-success-container);
    color: var(--dormora-on-success-container);
}

.dormora-swipe--armed > .dormora-swipe__bg--success {
    background-color: var(--dormora-success);
    color: var(--dormora-on-success);
}

.dormora-swipe__bg--danger {
    background-color: color-mix(in srgb, var(--dormora-error) 16%, var(--dormora-row-surface));
    color: var(--dormora-error);
}

.dormora-swipe--armed > .dormora-swipe__bg--danger {
    background-color: var(--dormora-error);
    color: var(--dormora-on-error);
}

@media (prefers-reduced-motion: reduce) {
    .dormora-swipe > .dormora-row,
    .rz-chkbox-box { /* P4U-061: Radzen's tick eases over 100ms (transition: all) */
        transition: none;
    }
}

/* P4U-061: a phone row's body is the button that opens it (ListRow). */
.dormora-row__body[role="button"]:focus-visible {
    outline: 2px solid var(--dormora-focus-ring);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* The actions button (UC-M.6.4): hidden until a keyboard focuses it, then a 48px ⋮ at the row's end. */
.dormora-row__more {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    background: transparent;
    color: inherit;
}

    .dormora-row__more:focus-visible {
        position: static;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        clip: auto;
        border-radius: 50%;
        align-self: center;
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

/* The one trailing value (UC-M.5.1), an amount or a time. */
.dormora-row--mobile .dormora-row__trailing {
    align-self: center;
}

/* UC-M.5.3 to UC-M.5.5: the badges in words on the supporting line. The status comes first; only a warning is coloured. */
.dormora-row-status {
    order: -1;
    font-weight: 500;
}

.dormora-row-status--danger {
    color: var(--color-danger);
}

.dormora-row-fact {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.dormora-row-fact--strong {
    font-weight: 600;
    color: var(--rz-text-color);
}

/* A destructive item in a row's actions sheet. */
.dormora-menu-sheet__item--danger,
.dormora-menu-sheet__item--danger .dormora-menu-sheet__check {
    color: var(--color-danger);
}

/* Floating action button (UC-3.4): extended (icon + label), above the bottom navigation. */
.dormora-fab {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--dormora-bottom-nav-offset) + 1rem + env(safe-area-inset-bottom, 0px));
    z-index: 101;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.5rem;
    padding: 0 1.25rem 0 1rem;
    border: 0;
    border-radius: 1rem;
    /* P4U-030 (the P4U-3 shared anatomy): the M3 extended FAB is primary container, as in the mockups (light and dark). */
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    box-shadow: 0 3px 8px rgba(10, 20, 50, 0.22);
    font: inherit;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

    .dormora-fab .rzi {
        font-size: 1.5rem;
    }

    .dormora-fab:focus-visible {
        outline: 3px solid var(--rz-text-title-color);
        outline-offset: 2px;
    }

    .dormora-fab:disabled {
        opacity: 0.6;
        cursor: default;
    }

    /* P4U-025 (UC-M.7.1): the extended FAB shrinks to its icon while the page scrolls down and extends again on scrolling
       up (TopAppBarHelper.js sets the class on <html>). The label stays in the accessible name (aria-label). */
    .dormora-fab .dormora-fab__label {
        overflow: hidden;
        max-width: 12rem;
        white-space: nowrap;
        transition: max-width 200ms ease, opacity 150ms ease;
    }

    .dormora-fab {
        transition: padding 200ms ease, gap 200ms ease;
    }

.dormora-fab-collapsed .dormora-fab:not([aria-expanded="true"]) {
    gap: 0;
    padding: 0 1rem;
}

    .dormora-fab-collapsed .dormora-fab:not([aria-expanded="true"]) .dormora-fab__label {
        max-width: 0;
        opacity: 0;
    }

@media (prefers-reduced-motion: reduce) {
    .dormora-fab,
    .dormora-fab .dormora-fab__label {
        transition: none;
    }
}

/* FAB menu: several page actions behind one "Add" FAB, stacked above it (right-aligned, thumb-reachable). */
.dormora-fab-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.32);
}

.dormora-fab-menu {
    position: fixed;
    right: 1rem;
    bottom: calc(var(--dormora-bottom-nav-offset) + 1rem + 3.5rem + 0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 101;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.dormora-fab-menu__item {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0 1rem 0 1.25rem;
    border: 0;
    border-radius: 1.5rem;
    background-color: var(--rz-base-background-color);
    color: var(--rz-text-title-color);
    font: inherit;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

    .dormora-fab-menu__item .rzi {
        font-size: 1.25rem;
        color: var(--rz-primary);
    }

    .dormora-fab-menu__item:focus-visible {
        outline: 3px solid var(--rz-primary);
        outline-offset: 2px;
    }

    .dormora-fab-menu__item:disabled {
        opacity: 0.6;
        cursor: default;
    }

/* Keep the last list items reachable above the FAB. */
.dormora-shell--mobile:has(~ .dormora-fab) .rz-body {
    padding-bottom: calc(var(--dormora-bottom-nav-offset) + 6rem + env(safe-area-inset-bottom, 0px));
}

/* Mobile list toolbar: the search box on its own line, under the chip row (P4U-020). */
.dormora-list-toolbar__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* P3X-031: a labelled checkbox among the list filters ("Assigned to me"); the label makes the row a 44px target. */
.dormora-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--dormora-touch-target);
}

    .dormora-filter-check .rz-label {
        cursor: pointer;
        white-space: nowrap;
    }

/* Period navigator (UC-7): one compact line at 320px. */
.dormora-period-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
}

.dormora-period-nav__step {
    min-width: var(--dormora-touch-target);
    min-height: var(--dormora-touch-target);
}

.dormora-period-nav__label {
    min-width: 0;
    padding-inline: 0.25rem;
    font-size: var(--rz-text-subtitle1-font-size, 1rem);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dormora-period-nav__today {
    margin-left: 0.25rem;
    white-space: nowrap;
}

/* Loading / empty feedback (UC-9, P1U-041). The mobile values are UC-9.7's "doesn't fill the screen":
   a phone EmptyState is ~140px tall instead of ~190px. */
.dormora-feedback {
    padding: 2rem 1rem;
    text-align: center;
}

.dormora-feedback__icon.rzi {
    font-size: 2.5rem;
    color: var(--rz-text-disabled-color);
}

@media (max-width: 767.98px) {
    .dormora-feedback {
        padding-block: 1rem;
    }

    .dormora-feedback__icon.rzi {
        font-size: 2rem;
    }
}

/* P4U-026 (UC-M.8.5, UC-M.11.1): the inviting true empty. The brand mark, faded, in a tonal circle; a headline that
   invites; one line on what the area is for; one filled action. */
.dormora-feedback--invite {
    padding: 2rem 1.75rem;
}

.dormora-feedback__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: var(--dormora-surface-container);
}

.dormora-feedback__mark img {
    width: 4.75rem;
    opacity: 0.55;
}

.dormora-feedback__title {
    margin: 0.25rem 0 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--dormora-on-surface);
}

.dormora-feedback--invite .dormora-feedback__message {
    max-width: 22rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 767.98px) {
    .dormora-feedback--invite {
        padding: 1.5rem 1.25rem;
    }

    .dormora-feedback__mark {
        width: 6.5rem;
        height: 6.5rem;
    }

    .dormora-feedback__mark img {
        width: 3.75rem;
    }
}

/* P4U-026 (UC-M.8.1): skeleton rows for first loads, shaped like ListRow (a leading circle and two lines). The shimmer
   is decoration only; under reduced motion the shapes stay still. */
.dormora-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-block: 0.5rem;
}

.dormora-skeleton__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0.5rem 1rem;
}

.dormora-skeleton__lead,
.dormora-skeleton__line,
.dormora-skeleton__block {
    background: var(--dormora-surface-container-high);
    animation: dormora-skeleton-pulse 1.4s ease-in-out infinite;
}

.dormora-skeleton__lead {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
}

.dormora-skeleton__lines {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
}

.dormora-skeleton__line {
    display: block;
    height: 0.75rem;
    border-radius: 0.375rem;
}

.dormora-skeleton__line--short {
    width: 32%;
    height: 0.625rem;
}

.dormora-skeleton__block {
    border-radius: 0.75rem;
    margin: 0 1rem 0.75rem;
}

.dormora-skeleton__block--title {
    width: 45%;
    height: 1.5rem;
}

.dormora-skeleton__block--card {
    height: 6rem;
}

@keyframes dormora-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .dormora-skeleton__lead,
    .dormora-skeleton__line,
    .dormora-skeleton__block {
        animation: none;
    }
}

/* P4U-026 (UC-M.8.4): ErrorState as an M3 error-container card, Retry as its text button. */
.dormora-error-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-block: 0.5rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: var(--dormora-error-container);
    color: var(--dormora-on-error-container);
}

.dormora-error-state__icon.rzi {
    flex: none;
    font-size: 1.5rem;
    color: var(--dormora-on-error-container);
}

.dormora-error-state__text {
    flex: 1 1 12rem;
    min-width: 0;
}

.dormora-error-state__title {
    margin: 0;
    font-weight: 600;
}

.dormora-error-state__message {
    margin: 0.125rem 0 0;
    font-size: 0.875rem;
}

.dormora-error-state .dormora-error-state__retry.rz-button {
    margin-inline-start: auto;
    color: var(--dormora-on-error-container);
}

/* P4U-033 (the mockup's "Offline and errors"): a page's whole read failed, on a phone. The sync_problem circle (96px, error
   container), the headline (17px, 600), what to do, and a filled "Try again". */
.dormora-error-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1.75rem 0;
    text-align: center;
}

.dormora-error-screen__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: var(--dormora-error-container);
    color: var(--dormora-error);
}

    .dormora-error-screen__mark .rzi {
        font-size: 2.5rem;
    }

.dormora-error-screen__title {
    margin: 1rem 0 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--dormora-on-surface);
}

.dormora-error-screen__message {
    margin: 0.375rem 0 1rem;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

/* P4U-041 (the mockups' "Offline and errors" and desktop "States"): OfflineBanner, under the top bar while the device is
   offline. A tonal surface (the mockups' --s2), rounded 12px, cloud_off and the line; on desktop, Retry at the end. */
.dormora-offline-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.625rem;
    max-width: var(--dormora-page-max-width, none);
    margin: 0 auto 0.875rem 0;
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    background: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.dormora-offline-banner__icon.rzi {
    flex: none;
    font-size: 1.125rem;
}

.dormora-offline-banner__text {
    flex: 1;
    min-width: 0;
}

.dormora-offline-banner .dormora-offline-banner__retry.rz-button {
    flex: none;
    margin-inline-start: auto;
}

@media (max-width: 767.98px) {
    .dormora-offline-banner {
        margin: 0 -0.25rem 0.375rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.78125rem;
    }
}

/* ---------------------------------------------------------------------------------------
   P1U-020 — Dashboard. Context bar (UC-6.3), module summary cards with UC-5.5 footer links,
   and the compact mobile module list. The context-bar rule is generic for later reuse.
   --------------------------------------------------------------------------------------- */

/* Context bar (UC-2 region 4 / UC-6.3): visible "Viewing" label + a context switch. */
.dormora-context-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

    .dormora-context-bar > .rz-label {
        font-weight: 600;
        color: var(--rz-text-secondary-color);
    }

/* D-058: a page-level All/Mine/Household ScopeFilter with no ListToolbar to sit in (the Dashboard), top right. */
.dormora-scope-bar {
    display: flex;
    justify-content: flex-end;
}

/* P4U-020 (UC-M.3.1, UC-M.3.4): one row of M3 filter chips under the top bar, scrolling sideways when it doesn't fit.
   The row's block padding holds each chip's 48px touch target, so nothing overflows it vertically. */
.dormora-chip-row,
.dormora-shell--mobile .dormora-scope-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-block: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}

    .dormora-chip-row::-webkit-scrollbar,
    .dormora-shell--mobile .dormora-scope-bar::-webkit-scrollbar {
        display: none;
    }

.dormora-chip-row {
    margin-bottom: 0.25rem;
}

/* A single-scope page shows no scope control on phones (UC-M.3.2), so its scope bar is empty: no gap left behind. */
.dormora-shell--mobile .dormora-scope-bar:not(:has(*)) {
    display: none;
}

.dormora-scope-chips {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

.dormora-chip {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    height: 2rem;
    padding: 0 1rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 8px;
    background-color: transparent;
    color: var(--dormora-on-surface-variant);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;
    cursor: pointer;
}

    /* The 48px touch target, above and below the 32px chip. */
    .dormora-chip::before {
        content: "";
        position: absolute;
        inset: -0.5rem 0;
    }

    .dormora-chip:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface-variant) 8%, transparent);
    }

    .dormora-chip:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-chip--selected {
    padding-inline-start: 0.5rem;
    border-color: transparent;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

    .dormora-chip--selected:hover {
        background-color: color-mix(in srgb, var(--dormora-on-primary-container) 8%, var(--dormora-primary-container));
    }

.dormora-chip:has(> .dormora-chip__icon) {
    padding-inline-start: 0.5rem;
}

.dormora-chip__icon {
    font-size: 1.125rem;
}

/* A menu chip ("Day ▾"): the arrow at the end. */
.dormora-chip--menu {
    padding-inline-end: 0.5rem;
}

.dormora-chip--menu.dormora-chip--selected {
    padding-inline-start: 1rem;
}

/* A menu chip's sheet (UC-M.9.4): one 48px row per choice, the current one checked. */
.dormora-menu-sheet {
    display: flex;
    flex-direction: column;
    margin-inline: -0.5rem;
}

.dormora-menu-sheet__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--dormora-on-surface);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-menu-sheet__item:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
    }

    .dormora-menu-sheet__item:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

    /* P4I-M7 gate fix 4 and 5: a sheet's first item is focused on open; it shows a ring only after a real key press
       (DialogSheetHelper.js sets html[data-modality="keyboard"] on keydown), so a tap, a click or a programmatic open shows none. */
    html:not([data-modality="keyboard"]) .dormora-dialog--sheet .dormora-menu-sheet__item:focus-visible,
    html:not([data-modality="keyboard"]) .dormora-dialog--sheet .dormora-status-sheet__option:focus-visible {
        outline: none;
    }

    /* P4I-M7 gate fix 6 (d-mk31-b, d-mk19-a): the same for desktop's dialog lists (the Later dialog's first row), the row and cell context menus (the Meals cell menu's first
       item, .dormora-row__context) and the anchored menus: the first item is focused on open and shows its ring only after a key press. */
    html:not([data-modality="keyboard"]) .dormora-dialog .dormora-menu-sheet__item:focus-visible,
    html:not([data-modality="keyboard"]) .dormora-dialog .dormora-status-sheet__option:focus-visible,
    html:not([data-modality="keyboard"]) .dormora-row__context .dormora-menu-sheet__item:focus-visible,
    html:not([data-modality="keyboard"]) .dormora-menu__item:focus-visible {
        outline: none;
    }

    .dormora-menu-sheet__item[aria-checked="true"] {
        font-weight: 600;
    }

.dormora-menu-sheet__check {
    display: inline-flex;
    width: 1.5rem;
    color: var(--dormora-primary);
}

/* P4I-082a (R7-67, p-mk82-f): the "More" item closes the list of main actions with a divider; its extras open in place under it. */
.dormora-menu-sheet__item--more {
    margin-top: 0.25rem;
    border-top: 1px solid var(--dormora-outline-variant);
    border-radius: 0 0 8px 8px;
}

/* P4U-020 (UC-M.5.4): a Household item's mark on a phone row: the home icon, in the supporting line's colour. */
.dormora-scope-mark {
    display: inline-flex;
    align-items: center;
    color: var(--dormora-on-surface-variant);
}

    .dormora-scope-mark > .rzi {
        font-size: 1.125rem;
    }

/* P4U-020 (UC-M.3.3): a list's filters in a bottom sheet, stacked full width, with Done at the end. */
.dormora-filter-sheet {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .dormora-filter-sheet > * {
        width: 100% !important;
    }

/* D-058: a single-scope page's filter: one always-selected "Personal" or "Household" segment, nothing to change. */
.dormora-scope-filter--fixed .rz-button {
    cursor: default;
}

/* P3-002: the current-household chip in the desktop header (P4U-010: and, as --topbar, in Home's phone top bar).
   Colours follow the surrounding text, so the border and hover tint stay visible on either surface and in both themes. */
.dormora-household-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    max-width: 16rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
    margin-inline-end: 0.5rem;
}

    .dormora-household-chip:hover,
    .dormora-household-chip:focus-visible {
        background-color: color-mix(in srgb, currentColor 14%, transparent);
        color: inherit;
        text-decoration: none;
    }

    .dormora-household-chip:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

.dormora-household-chip__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dormora-household-chip__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Module summary card body: summary, optional flag badge, footer link pinned to the bottom. */
.dormora-card-grid > .rz-card {
    display: flex;
    flex-direction: column;
}

.dormora-module-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 1 1 auto;
}

.dormora-module-card__summary,
.dormora-module-card__empty {
    margin: 0;
    font-size: var(--rz-text-body2-font-size, 0.875rem);
}

.dormora-module-card__empty {
    color: var(--rz-text-secondary-color);
}

/* P2X-001: a module whose own load failed says so (its empty text would be untrue). The theme-aware danger token,
   as .validation-message; the icon is decorative, the text carries the meaning. */
.dormora-module--failed {
    color: var(--color-danger);
}

p.dormora-module--failed {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

p.dormora-module--failed .rzi {
    font-size: 1.125rem;
}

/* P2X-010 (D-043): the person's initials, drawn locally (no Gravatar request). The same primary/on-primary pair as the
   app's other filled elements, so it keeps its contrast in both themes. */
.dormora-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--rz-primary);
    color: var(--rz-on-primary, #fff);
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

.dormora-avatar--small {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.875rem;
}

.dormora-avatar--large {
    width: 4rem;
    height: 4rem;
    font-size: 1.5rem;
}

.dormora-avatar .rzi {
    font-size: 1.25em;
}

.dormora-module-card__footer {
    align-self: stretch;
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Agenda titles are links but read as row titles (contrast: title colour, underline on hover). */
.dormora-agenda-link {
    color: var(--rz-text-title-color);
    text-decoration: none;
}

    .dormora-agenda-link:hover,
    .dormora-agenda-link:focus-visible {
        text-decoration: underline;
        color: var(--rz-text-title-color);
    }

/* P4U-030 (UC-M.14.1, UC-M.14.2): At a glance on the phone's Home, below Coming up: a two-column grid of cards, each the
   area's icon and name, then one or two lines of its state, the whole card a link to the area. M3 cards (12px), the
   section header as UC-M.10.2's title-small in the primary colour. */
.dormora-glance {
    margin-top: 1rem;
}

.dormora-glance__heading {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--dormora-primary);
}

.dormora-glance__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.dormora-glance__card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 5.5rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-surface-container);
    color: var(--dormora-on-surface);
    text-decoration: none;
    overflow-wrap: anywhere;
}

    .dormora-glance__card:hover,
    .dormora-glance__card:focus-visible {
        background-color: var(--dormora-surface-container-high);
        color: var(--dormora-on-surface);
        text-decoration: none;
    }

    .dormora-glance__card:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-glance__title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
}

    .dormora-glance__title .rzi {
        font-size: 1.25rem;
        color: var(--dormora-primary);
    }

.dormora-glance__value {
    font-size: 0.9375rem;
    font-weight: 500;
}

.dormora-glance__value--empty,
.dormora-glance__detail {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--dormora-on-surface-variant);
}

.dormora-glance__detail--warning {
    color: var(--color-danger);
}

/* ---------------------------------------------------------------------------------------
   P1U-021 — Calendar. View selector + scope filter toolbar (both presentations); mobile date
   strip, month grid and agenda (the phone never gets the 7-column scheduler).
   --------------------------------------------------------------------------------------- */

.dormora-calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.dormora-calendar-toolbar__end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* P3-011, P4U-031 (the mockup's Who's free sheet): the day and the privacy line; names (52px) beside one bar each on a shared
   time axis, busy blocks in primary; the first free hour in the success container; then the day before, "New event at …"
   and the day after. */
.dormora-availability {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dormora-availability__note {
    margin: 0;
    font-size: 0.78125rem;
    line-height: 1.125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-availability__grid {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    align-items: center;
    gap: 0.375rem 0.5rem;
    font-size: 0.75rem;
}

.dormora-availability__axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.65625rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-availability__name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--dormora-on-surface);
}

.dormora-availability__bar {
    position: relative;
    height: 1.125rem;
    border-radius: 4px;
    background: var(--dormora-surface-container-high);
    overflow: hidden;
}

.dormora-availability__busy {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 4px;
    background: var(--dormora-primary);
}

.dormora-availability__free {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    border-radius: 16px;
    background: var(--dormora-success-container);
    color: var(--dormora-on-success-container);
    font-size: 0.8125rem;
}

    .dormora-availability__free b {
        font-weight: 600;
    }

.dormora-availability__free--none {
    background: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface-variant);
}

.dormora-availability__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

    .dormora-availability__actions .dormora-chip {
        padding-inline: 0.5rem 0.75rem;
    }

        .dormora-availability__actions .dormora-chip:last-child {
            padding-inline: 0.75rem 0.5rem;
        }

    .dormora-availability__actions .dormora-availability__new.rz-button {
        flex: 0 1 auto;
        min-width: 0;
        border-radius: 999px;
        white-space: nowrap;
    }

.dormora-calendar-period {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* Event marker under a day number; the "none" variant keeps every cell the same height. */
.dormora-calendar-dot {
    display: block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: var(--color-event);
}

.dormora-calendar-dot--none {
    visibility: hidden;
}

/* Week strip above the day agenda: 7 equal ≥44px buttons, fits 320px. */
.dormora-date-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.dormora-date-strip__day,
.dormora-month-grid__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width: 100%;
    min-height: var(--dormora-touch-target);
    padding: 0.25rem 0;
    border: 1px solid transparent;
    border-radius: var(--rz-border-radius, 4px);
    background: none;
    color: var(--rz-text-color);
    font: inherit;
    cursor: pointer;
}

.dormora-date-strip__day {
    min-height: 3.75rem;
}

.dormora-date-strip__weekday {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.dormora-date-strip__number {
    font-weight: 600;
}

    .dormora-date-strip__day:hover,
    .dormora-month-grid__day:hover {
        background-color: var(--rz-base-100);
    }

    .dormora-date-strip__day:focus-visible,
    .dormora-month-grid__day:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 1px;
    }

    .dormora-date-strip__day.is-today,
    .dormora-month-grid__day.is-today {
        border-color: var(--rz-primary);
    }

    /* P4I-M7 gate fix 4 (p-mkw05-a): the app's selected-state token in both themes (the primary container, as a selected list card and a
       selected row use), not the filled primary (the Day view's week strip keeps its filled day, as drawn); a source pill in a selected cell gets its own bar colour as an edge so it stays distinct. */
    .dormora-date-strip__day.is-selected {
        background-color: var(--rz-primary);
        color: var(--rz-on-primary, #fff);
    }

    .dormora-month-grid__day.is-selected {
        background-color: var(--dormora-primary-container);
        color: var(--dormora-on-primary-container);
        font-weight: 600;
    }

        .dormora-month-grid__day.is-selected .dormora-pill {
            box-shadow: 0 0 0 1px var(--dormora-src-bar);
        }

        .dormora-date-strip__day.is-selected .dormora-date-strip__weekday {
            color: inherit;
        }

        .dormora-date-strip__day.is-selected .dormora-calendar-dot,
        .dormora-month-grid__day.is-selected .dormora-calendar-dot {
            background-color: currentColor;
        }

/* Month grid (mobile Planner): a real table, one ≥44px button per day. */
.dormora-month-grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

    .dormora-month-grid th {
        padding-bottom: 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        text-align: center;
        color: var(--rz-text-secondary-color);
    }

    .dormora-month-grid td {
        padding: 1px;
    }

.dormora-month-grid__day.is-outside:not(.is-selected) {
    color: var(--rz-text-secondary-color);
}

/* Day headings in the mobile week list and above the Planner's day agenda. */
.dormora-calendar-day + .dormora-calendar-day {
    margin-top: 0.75rem;
}

.dormora-calendar-day__heading {
    margin: 0 0 0.25rem;
    font-size: var(--rz-text-subtitle2-font-size, 0.875rem);
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.dormora-calendar-day__open {
    min-height: var(--dormora-touch-target);
    min-width: var(--dormora-touch-target); /* P1U-051: "Today" alone was 41px wide */
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    .dormora-calendar-day__open:hover,
    .dormora-calendar-day__open:focus-visible {
        text-decoration: underline;
    }

.dormora-calendar-day__none {
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rz-base-200);
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    color: var(--rz-text-secondary-color);
}

/* Agenda row leading slot: start time / "All day" / "Cont.". */
.dormora-calendar-time {
    min-width: 3rem;
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--rz-text-title-color);
}

/* ---------------------------------------------------------------------------------------
   P1U-022 — Tasks. The leading complete checkbox gets a ≥44px hit area on mobile cells (UC-4.4);
   the whole square toggles, not just the 20px box.
   --------------------------------------------------------------------------------------- */

.dormora-row--mobile .dormora-row__leading .rz-chkbox.dormora-row__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dormora-touch-target);
    height: var(--dormora-touch-target);
    cursor: pointer;
}

    /* Radzen's box fills its parent; keep the visible square at its normal size inside the larger target. */
    .dormora-row--mobile .dormora-row__leading .rz-chkbox.dormora-row__toggle > .rz-chkbox-box {
        flex: none;
        width: 1.5rem;
        height: 1.5rem;
    }

/* P2-011/P2-013 — RecurrenceEditor weekday toggles (aria-pressed buttons; the start's own day is
   locked on) and its summary line; the task dialog's "Recent completions" (D-029). */
.dormora-weekdays {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.dormora-weekdays__day {
    min-width: var(--dormora-touch-target);
    min-height: var(--dormora-touch-target);
    padding: 0 0.5rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    .dormora-weekdays__day.is-on {
        border-color: var(--rz-primary);
        background: var(--rz-primary);
        color: var(--rz-on-primary, #fff);
    }

    .dormora-weekdays__day:disabled {
        cursor: default;
    }

    .dormora-weekdays__day:focus-visible {
        outline: 2px solid var(--rz-primary);
        outline-offset: 2px;
    }

.dormora-recurrence__summary,
.dormora-task-history__hint {
    margin: 0;
    color: var(--rz-text-secondary-color);
}

.dormora-task-history {
    margin: 0;
    padding-left: 1.25rem;
}

/* P3-012: who a task is assigned to, in the row's metadata line. */
.dormora-task-assignee {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

    .dormora-task-assignee .rzi {
        font-size: 1rem;
    }

/* P3-012: the "Take turns" rotation picker in the task dialogs (≥44px rows for touch, UC-2). */
.dormora-task-rotation {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .dormora-task-rotation legend {
        padding: 0;
        margin-bottom: 0.25rem;
        font-weight: 600;
    }

.dormora-task-rotation__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--dormora-touch-target);
}

    .dormora-task-rotation__option input {
        width: 1.25rem;
        height: 1.25rem;
        accent-color: var(--rz-primary);
    }

/* ---------------------------------------------------------------------------------------
   P1U-023 — Shopping. Shared QuickAddBar (UC-3.14) and the collapsible section header
   (UC-4.5) used by the list editor's "Purchased (n)" group.
   --------------------------------------------------------------------------------------- */

.dormora-quick-add {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* P4I-002h: the sending state. The ring replaces the button's icon at the icon's size (1.25rem), so the button keeps its size. */
.dormora-quick-add .dormora-quick-add__ring {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

    .dormora-quick-add .dormora-quick-add__ring svg {
        width: 100%;
        height: 100%;
    }

/* The ring sits on a filled button, so it takes the button's own text colour (Radzen's primary stroke is the button's colour). */
.dormora-quick-add .dormora-quick-add__ring .rz-progressbar-circular-value {
    stroke: currentColor;
}

.dormora-quick-add .dormora-quick-add__ring .rz-progressbar-circular-background {
    stroke: currentColor;
    stroke-opacity: 0.25;
}

.dormora-quick-add__plain .rz-button-text {
    margin-inline-start: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .dormora-quick-add .dormora-quick-add__ring,
    .dormora-quick-add .dormora-quick-add__ring * {
        animation: none !important;
    }
}

.dormora-quick-add__input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Mobile: stuck to the bottom of the scroll area, just above the bottom navigation. .rz-body (the scroller)
   already reserves the nav height + 1rem as padding-bottom, and sticky offsets are measured inside that
   padding, so -1rem lands the bar exactly on the nav's top edge. */
.dormora-quick-add--mobile {
    position: sticky;
    bottom: -1rem;
    z-index: 2;
    margin: 0.75rem -1rem 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--rz-base-200);
    background-color: var(--rz-base-background-color, var(--rz-body-background-color));
}

    .dormora-quick-add--mobile .rz-button,
    .dormora-quick-add--mobile .dormora-quick-add__input {
        min-height: var(--dormora-touch-target);
    }

/* Collapsible group header ("Purchased (4)"): an h2 wrapping a full-width disclosure button. */
.dormora-section-toggle {
    margin-left: 0;
    margin-right: 0;
    font-size: var(--rz-text-subtitle2-font-size, 0.875rem);
    font-weight: 600;
}

    /* Shared base with .dormora-disclosure (P1U-040): both are text disclosure buttons. */
    .dormora-section-toggle > button,
    .dormora-disclosure {
        align-items: center;
        gap: 0.25rem;
        min-height: var(--dormora-touch-target);
        padding: 0;
        border: 0;
        background: none;
        color: var(--rz-text-title-color);
        font: inherit;
        cursor: pointer;
    }

        .dormora-section-toggle > button:focus-visible,
        .dormora-disclosure:focus-visible {
            outline: 2px solid var(--dormora-focus-ring);
            outline-offset: 2px;
        }

    .dormora-section-toggle > button {
        display: flex;
        width: 100%;
        text-align: left;
    }

/* P2-022: a group heading inside the budget template dialog (Income / Bills / Planned expenses). */
.dormora-template-heading {
    margin: 0;
    font-size: var(--rz-text-subtitle2-font-size, 0.875rem);
    font-weight: 600;
    color: var(--rz-text-title-color);
}

/* P2-040: an attachment's web link (opens in a new tab); the icon sits on the text line. */
.dormora-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--dormora-link-color);
    overflow-wrap: anywhere;
}

    .dormora-attachment-link .rzi {
        font-size: 1rem;
    }

/* P2-031: the recipe → shopping list ingredient checklist. Each row is a 44px target; long names wrap. */
.dormora-ingredient-picker {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.dormora-ingredient-picker__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--dormora-touch-target);
}

.dormora-ingredient-picker__row label {
    min-width: 0;
    overflow-wrap: anywhere;
    cursor: pointer;
}

/* P4I-012a (MK-12): "Add the week to a list". The list picker and "Meals from" stack on a phone (the label beside its chips) and
   share one row in the desktop dialog (the label over its chips). The lines are one list, in two columns in the desktop dialog (a
   column fills before the next, so the alphabetical order reads down the page). Roles only; text on them keeps 4.5:1 in both
   themes (on-primary-container on primary-container, on-surface-variant on surface-container-high). */
.dormora-week-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dormora-week-head__list {
    flex: 1;
    min-width: 0;
}

/* P4I-019b (MK-19): "New list…" at the foot of a list picker (RadzenDropDown FooterTemplate): a divider above, the primary colour, a 48 px target. */
.dormora-picker-new {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--dormora-touch-target);
    padding: 0 1rem;
    border: 0;
    border-top: 1px solid var(--dormora-outline-variant);
    background: transparent;
    color: var(--dormora-primary);
    font: inherit;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}

.dormora-picker-new:hover,
.dormora-picker-new:focus-visible {
    background: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

.dormora-week-scope {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.dormora-week-scope__label {
    flex: none;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-dialog--floating .dormora-week-head {
    flex-direction: row;
    align-items: flex-end;
    gap: 1rem;
}

.dormora-dialog--floating .dormora-week-scope {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.dormora-dialog--floating .dormora-week-lines {
    column-count: 2;
    column-gap: 1.75rem;
}

/* The history note on a week added before (the frame's note: a bold lead, then the rest). */
.dormora-week-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface-variant);
}

    .dormora-week-note > .rzi {
        flex: none;
        color: var(--dormora-primary);
    }

    .dormora-week-note strong {
        font-weight: 600;
        color: var(--dormora-on-surface);
    }

/* A line: its checkbox, then one label holding the title with its tags and the meals it is for. */
.dormora-week-line {
    align-items: flex-start;
    padding-block: 0.25rem;
    break-inside: avoid;
}

    .dormora-week-line > .rz-chkbox {
        flex: none;
        margin-top: 0.25rem;
    }

.dormora-week-line__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    color: var(--dormora-on-surface);
    overflow-wrap: anywhere;
}

label.dormora-week-line__text {
    cursor: pointer;
}

.dormora-week-line__title {
    font-size: 1rem;
    line-height: 1.5rem;
}

.dormora-week-line__note {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--dormora-on-surface-variant);
}

/* An unticked line ("We have this") is dimmed by its colour role, not by opacity, so its text keeps its contrast. */
.dormora-week-line--off .dormora-week-line__title {
    color: var(--dormora-on-surface-variant);
}

.dormora-week-tag {
    display: inline-block;
    margin-inline-start: 0.25rem;
    padding: 0 0.5rem;
    border-radius: 0.5rem;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    /* The design system's "label" step (14 / 20 at 500), which this app's chips use too. */
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;
    vertical-align: 0.0625rem;
}

.dormora-week-tag--neutral {
    background-color: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface-variant);
}

/* A line the meals no longer need: shown, not offered (an icon, never a checkbox that does nothing). */
.dormora-week-gone {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: var(--dormora-touch-target);
    padding-block: 0.25rem;
}

    .dormora-week-gone > .rzi {
        flex: none;
        margin-top: 0.125rem;
        color: var(--dormora-on-surface-variant);
    }

    .dormora-week-gone .dormora-week-line__title {
        color: var(--dormora-on-surface-variant);
    }

/* "Already added (n)": a collapsed row (done_all, the title and the first names, a chevron) that opens the rest. */
.dormora-week-added {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.5rem 0;
    border: 0;
    border-radius: 0.5rem;
    background-color: transparent;
    color: var(--dormora-on-surface);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-week-added:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
    }

    .dormora-week-added:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

    .dormora-week-added > .rzi {
        flex: none;
        color: var(--dormora-on-surface-variant);
    }

.dormora-week-added__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

/* The design system's "row-title" step (16 at 600). */
.dormora-week-added__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
}

.dormora-week-added__names {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--dormora-on-surface-variant);
    overflow-wrap: anywhere;
}

/* P2-020: a section toggle with an action beside it (Shopping's "Purchased (n)" + "Clear purchased"). */
.dormora-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .dormora-section-header > .dormora-section-toggle {
        flex: 1;
        margin: 0;
    }

    .dormora-section-header > .rz-button {
        min-height: var(--dormora-touch-target);
        flex-shrink: 0;
    }

/* ---------------------------------------------------------------------------------------
   P1U-024 — Budget. StatTile grid (shared), budget summary, context bar with the period
   navigator, mobile section selector, and a generic disclosure button.
   --------------------------------------------------------------------------------------- */

.dormora-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--rz-border-radius, 4px);
    background-color: var(--rz-base-background-color, var(--rz-base-50));
    border: 1px solid var(--rz-base-200);
}

.dormora-stat__label {
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    color: var(--rz-text-secondary-color);
}

.dormora-stat__value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
    overflow-wrap: anywhere;
}

.dormora-stat--emphasis .dormora-stat__value {
    font-size: 1.5rem;
}

.dormora-stat__caption {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.dormora-budget-summary {
    padding: 1rem;
    border-radius: var(--rz-border-radius, 4px);
    background-color: var(--rz-panel-background-color, var(--rz-base-background-color));
    box-shadow: var(--rz-card-shadow, none);
}

.dormora-budget-summary__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.dormora-budget-summary__title,
.dormora-budget-insight-heading {
    margin: 0;
    font-size: var(--rz-text-h6-font-size, 1.125rem);
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.dormora-budget-insight-heading {
    margin-bottom: 0.75rem;
}

.dormora-budget-summary__group {
    margin: 0.75rem 0 0.5rem;
    font-size: var(--rz-text-subtitle2-font-size, 0.875rem);
    font-weight: 600;
    color: var(--rz-text-title-color);
}

    .dormora-budget-summary__group span {
        font-weight: 400;
        color: var(--rz-text-secondary-color);
    }

/* Context bar (D-058): period navigator left, ledger switch top right like the other pages' scope filter; on phones the
   ledger chips come first (the shared ScopeFilter chips), and the period gets its own line. */
.dormora-budget-context__ledger {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.dormora-budget-context__period {
    order: -1;
}

@media (max-width: 767.98px) {
    .dormora-budget-context__ledger {
        flex: 1 1 100%;
        margin-left: 0;
    }

    /* Compact summary on phones: the working list should start near the top (phase doc). */
    .dormora-budget-summary {
        padding: 0.75rem;
    }

    .dormora-budget-summary__head {
        margin-bottom: 0.5rem;
    }

    .dormora-stat {
        padding: 0.5rem 0.75rem;
    }

    .dormora-stat--emphasis .dormora-stat__value {
        font-size: 1.25rem;
    }

    .dormora-budget-context__period {
        order: 0;
        flex-basis: 100%;
        display: flex;
        justify-content: center;
    }
}

.dormora-amount {
    font-weight: 600;
    color: var(--rz-text-title-color);
    white-space: nowrap;
}

/* Generic disclosure button ("Show breakdown"); base shared with .dormora-section-toggle (P1U-040). */
.dormora-disclosure {
    display: inline-flex;
    margin-top: 0.25rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------------------
   P1U-025 — Diet planning. Desktop week matrix (7 columns ≥1280px, 4 in the compact band),
   compact meal slots, mobile slot sections and week list. Reuses the P1U-021 date strip.
   --------------------------------------------------------------------------------------- */

.dormora-nutrition__title {
    margin: 0 0 0.5rem;
    font-size: var(--rz-text-subtitle2-font-size, 0.875rem);
    font-weight: 600;
    color: var(--rz-text-title-color);
}

/* P2X-015: a linked meal's recipe. Desktop: an icon link beside the meal (row-action sized). Phones: a text link on the
   row's metadata line. */
.dormora-meal-slot__recipe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: var(--rz-border-radius, 4px);
    color: var(--rz-text-secondary-color);
}

    .dormora-meal-slot__recipe:hover,
    .dormora-meal-slot__recipe:focus-visible {
        color: var(--dormora-link-color);
        background: var(--rz-base-200);
    }

    .dormora-meal-slot__recipe:focus-visible {
        outline: 2px solid var(--dormora-link-color);
        outline-offset: 1px;
    }

.dormora-meal-recipe-link {
    color: var(--dormora-link-color); /* theme-aware (P1R-015): --primary is only ~2:1 on the dark theme */
    overflow-wrap: anywhere;
}

/* Mobile day view: one section per slot. */
.dormora-meal-section + .dormora-meal-section {
    margin-top: 0.5rem;
}

.dormora-meal-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dormora-meal-section__title {
    margin: 0;
    font-size: var(--rz-text-subtitle2-font-size, 0.875rem);
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.dormora-meal-section__add {
    min-width: var(--dormora-touch-target);
    min-height: var(--dormora-touch-target);
}

.dormora-diet-views {
    display: flex;
    width: 100%;
}

    .dormora-diet-views > .rz-button {
        flex: 1 1 0;
        min-height: var(--dormora-touch-target);
    }

.dormora-diet-week__kcal {
    font-weight: 400;
    color: var(--rz-text-secondary-color);
}

.dormora-diet-week__meals {
    margin: 0;
    padding: 0 0 0.5rem;
    list-style: none;
    border-bottom: 1px solid var(--rz-base-200);
    font-size: var(--rz-text-body2-font-size, 0.875rem);
}

    .dormora-diet-week__meals li + li {
        margin-top: 0.15rem;
    }

.dormora-diet-week__type {
    display: inline-block;
    min-width: 4.75rem;
    color: var(--rz-text-secondary-color);
}

/* ---------------------------------------------------------------------------------------
   P1U-026 — Repeating-row editors (UC-8.11): recipe ingredients, workout exercises.
   Desktop: one grid row per item under a shared column header (the per-field labels are
   visually hidden but still name each input). Phones: each item is a bordered block with its
   fields stacked under visible labels; never tiny horizontally packed fields.
   --------------------------------------------------------------------------------------- */

.dormora-row-editor {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dormora-row-editor__columns,
.dormora-row-editor__item {
    display: grid;
    gap: 0.5rem;
    align-items: center;
}

/* P4I-011: amount, unit, ingredient, note, remove. */
.dormora-row-editor--ingredients .dormora-row-editor__columns,
.dormora-row-editor--ingredients .dormora-row-editor__item {
    grid-template-columns: 5rem 7.5rem minmax(0, 3fr) minmax(0, 2fr) 2.75rem;
}

.dormora-row-editor__select {
    width: 100%;
    min-height: var(--dormora-touch-target);
    padding: 0 0.5rem;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius, 4px);
    background: var(--rz-base-background-color);
    color: inherit;
    font: inherit;
}

.dormora-row-editor__error {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--rz-danger);
}

/* P2-032: name, sets, reps, weight, rest, notes, remove. */
.dormora-row-editor--exercises .dormora-row-editor__columns,
.dormora-row-editor--exercises .dormora-row-editor__item {
    grid-template-columns: minmax(0, 3fr) 4.5rem 4.5rem 5.5rem 5rem minmax(0, 2fr) 2.75rem;
}

.dormora-row-editor__columns {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.dormora-row-editor__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .dormora-row-editor__field > .rz-textbox,
    .dormora-row-editor__field > .rz-numeric {
        width: 100%;
    }

/* Visually hidden on desktop (the column header shows it), visible on phones; hidden rules shared with
   .dormora-sr-only (P1U-040). */
.dormora-row-editor__label,
.dormora-row-editor__remove {
    min-width: var(--dormora-touch-target);
    min-height: var(--dormora-touch-target);
}

/* P2X-012: the "visually hidden on desktop" above was never applied, so every row repeated its labels under the column
   headers. The .dormora-sr-only rules, desktop only; phones show the labels (below). */
@media (min-width: 768px) {
    .dormora-row-editor__label {
        position: absolute;
        width: 1px;
        height: 1px;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .dormora-row-editor__columns {
        display: none;
    }

    .dormora-row-editor--ingredients .dormora-row-editor__item,
    .dormora-row-editor--exercises .dormora-row-editor__item {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.75rem;
        align-items: end;
        padding: 0.75rem;
        border: 1px solid var(--rz-base-200);
        border-radius: var(--rz-border-radius, 4px);
    }

    /* P4I-011 (MK-11): amount, unit and remove on the first line; the ingredient and its note full width under them. */
    .dormora-row-editor--ingredients .dormora-row-editor__field:nth-child(3),
    .dormora-row-editor--ingredients .dormora-row-editor__field:nth-child(4) {
        grid-column: 1 / -1;
    }

    .dormora-row-editor--ingredients .dormora-row-editor__remove {
        grid-column: 3;
        grid-row: 1;
    }

    /* Exercise: name, then sets + reps, then weight + rest (P2-032), then notes + remove. */
    .dormora-row-editor--exercises .dormora-row-editor__field--wide:first-child {
        grid-column: 1 / -1;
    }

    .dormora-row-editor--exercises .dormora-row-editor__field:nth-child(4) {
        grid-column: 1;
    }

    .dormora-row-editor--exercises .dormora-row-editor__field--wide:nth-child(6) {
        grid-column: 1 / 3;
    }

    .dormora-row-editor__label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        margin-bottom: 0.25rem;
        font-size: 0.8125rem;
        font-weight: 600;
    }
}

/* ---------------------------------------------------------------------------------------
   P1U-027 — Care. "Next up" callout on the profile detail and the next-care line on cards.
   --------------------------------------------------------------------------------------- */

.dormora-care-next-up {
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--rz-primary);
    border-radius: var(--rz-border-radius, 4px);
    background-color: var(--rz-panel-background-color, var(--rz-base-background-color));
    box-shadow: var(--rz-card-shadow, none);
}

    .dormora-care-next-up.is-overdue {
        border-left-color: var(--color-danger);
    }

.dormora-care-next-up__label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.dormora-care-next-up__title {
    margin: 0.15rem 0 0.25rem;
    font-size: var(--rz-text-h6-font-size, 1.125rem);
    font-weight: 600;
    color: var(--rz-text-title-color);
    overflow-wrap: anywhere;
}

.dormora-care-next-up__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    color: var(--rz-text-secondary-color);
}

.dormora-care-next {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

    .dormora-care-next-up__meta .rzi {
        font-size: 1rem;
        vertical-align: text-bottom;
    }

/* ---------------------------------------------------------------------------------------
   P1U-029 — Notes. One compact metadata line under the note title; a readable measure for
   long note bodies.
   --------------------------------------------------------------------------------------- */

.dormora-note-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    color: var(--rz-text-secondary-color);
}

    .dormora-note-meta .rzi {
        font-size: 1rem;
        vertical-align: text-bottom;
    }

.dormora-note-meta__type,
.dormora-note-meta__pinned,
.dormora-note-meta__updated {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.dormora-note-meta__type {
    font-weight: 600;
    color: var(--rz-text-title-color);
}

    /* DateTimeSummary carries its own calendar icon; "Updated" already says what the date is. */
    .dormora-note-meta__updated .rzi {
        display: none;
    }

.dormora-note-body {
    max-width: 70ch;
    font-size: var(--rz-text-body1-font-size, 1rem);
    line-height: 1.6;
    color: var(--rz-text-color);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------------------
   P1U-030 — Household. Mobile per-role permission summary; a shared visually-hidden utility.
   --------------------------------------------------------------------------------------- */

.dormora-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* P4U-080 (found): the shell's live region follows the layout, so in the flow it sat 1px below the window and gave the
   whole document a scrollbar, which narrowed the top bar by its width and moved the search 7.5px off centre. */
.dormora-live-region {
    position: fixed;
    top: 0;
    left: 0;
}

/* P3-003: the enforced role matrix on Household Settings (desktop). A plain table: row and column headers are real. */
/* P4U-083: the desktop table (.dormora-table, below) gives it its look; these are its own column rules. */
.dormora-permission-table th,
.dormora-permission-table td {
    white-space: nowrap;
}

/* P3X-010: what deleting a household does, in the confirmation dialog. */
.dormora-delete-household__list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    color: var(--rz-text-secondary-color);
}

.dormora-delete-household__list li + li {
    margin-top: 0.25rem;
}

/* P3X-014: a row per permission; long permission names and grants wrap so the four role columns fit narrow desktop widths. */
.dormora-permission-table tbody th {
    white-space: normal;
    min-width: 8rem;
    font-weight: 500;
}

.dormora-permission-table tbody td {
    white-space: normal;
    padding-inline: 0.5rem;
}

.dormora-permission-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.dormora-role-summary {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dormora-role-summary__role {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rz-base-200);
}

    .dormora-role-summary__role:first-child {
        padding-top: 0;
    }

.dormora-role-summary__name {
    margin: 0 0 0.35rem;
    font-size: inherit;
}

.dormora-role-summary__line {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0.15rem 0 0;
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    overflow-wrap: anywhere;
}

    .dormora-role-summary__line .rzi {
        font-size: 1.1rem;
        flex: 0 0 auto;
    }

/* ---------------------------------------------------------------------------------------
   P1U-031 — Communication. Chat thread (Messages).
   --------------------------------------------------------------------------------------- */

.dormora-chat__thread {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.dormora-chat__earlier {
    align-self: center;
    min-height: var(--dormora-touch-target);
}

.dormora-chat__row {
    display: flex;
    justify-content: flex-start;
}

    .dormora-chat__row.is-mine {
        justify-content: flex-end;
    }

.dormora-chat__bubble {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-width: 80%;
    padding: 0.5rem 0.75rem;
    border-radius: 1rem 1rem 1rem 0.25rem;
    background-color: var(--rz-base-200);
    color: var(--rz-text-color);
    overflow-wrap: anywhere;
}

.dormora-chat__row.is-mine .dormora-chat__bubble {
    border-radius: 1rem 1rem 0.25rem 1rem;
    background-color: var(--rz-primary-lighter);
}

.dormora-chat__sender {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.dormora-chat__body {
    font-size: var(--rz-text-body1-font-size, 1rem);
    white-space: pre-wrap;
}

.dormora-chat__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.dormora-chat__delete {
    min-width: 1.75rem;
    min-height: 1.75rem;
}

@media (max-width: 767.98px) {
    .dormora-chat__delete {
        min-width: var(--dormora-touch-target);
        min-height: var(--dormora-touch-target);
    }
}

/* ---------------------------------------------------------------------------------------
   P1U-032 — Settings. Mobile settings list (row → section screen) and the shared setting row
   used by both presentations.
   --------------------------------------------------------------------------------------- */

.dormora-settings-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: var(--rz-border-radius, 4px);
    background-color: var(--rz-panel-background-color, var(--rz-base-background-color));
    box-shadow: var(--rz-card-shadow, none);
}

    .dormora-settings-list li + li {
        border-top: 1px solid var(--rz-base-200);
    }

.dormora-settings-list__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.5rem 1rem;
    color: inherit;
    text-decoration: none;
}

    .dormora-settings-list__row:hover,
    .dormora-settings-list__row:focus-visible {
        color: inherit;
        text-decoration: none;
        background-color: var(--rz-base-100);
    }

    .dormora-settings-list__row:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

.dormora-settings-list__icon,
.dormora-settings-list__chevron {
    flex: 0 0 auto;
    color: var(--rz-text-secondary-color);
}

.dormora-settings-list__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.dormora-settings-list__title {
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.dormora-settings-list__summary {
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    color: var(--rz-text-secondary-color);
    overflow-wrap: anywhere;
}

.dormora-settings-note {
    margin: 0.75rem 0 0;
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    color: var(--rz-text-secondary-color);
}

.dormora-settings-note--intro {
    margin: 0 0 0.75rem;
}

/* D-060: an invite code, large enough to read out, and selectable to copy by hand. */
.dormora-invite-code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-align: center;
    padding: 0.75rem 1rem;
    border: 1px dashed var(--rz-base-400);
    border-radius: var(--rz-border-radius);
    user-select: all;
    overflow-wrap: anywhere;
}

/* D-061: a member's module switches: a plain fieldset (no browser frame), its ticks in two columns where they fit
   (RadzenCheckBoxList puts its items in an inner stack, so that is the grid). */
.dormora-module-switches {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dormora-module-switches__legend {
    padding: 0;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.dormora-module-switches__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.25rem 1rem;
}

.dormora-module-switches__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--dormora-touch-target);
}

    .dormora-module-switches__option input {
        flex: none;
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
        accent-color: var(--dormora-primary);
    }

    .dormora-module-switches__option label {
        cursor: pointer;
    }

.dormora-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--dormora-touch-target);
    padding-block: 0.25rem;
}

    .dormora-setting-row + .dormora-setting-row {
        border-top: 1px solid var(--rz-base-200);
    }

.dormora-setting-row__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dormora-setting-row__title {
    color: var(--rz-text-title-color);
}

.dormora-setting-row__description {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* ---------------------------------------------------------------------------------------
   P1U-040 — shared utilities replacing repeated inline styles.
   --------------------------------------------------------------------------------------- */

/* Secondary (muted) text colour; replaces 40 inline Style="color: var(--rz-text-secondary-color);". */
.dormora-text-secondary {
    color: var(--rz-text-secondary-color);
}

/* P1U-040: the page ⋮ in the mobile top app bar (ShellOverflowHost). P4U-010: on the light surface bar. */
.dormora-topbar__overflow {
    flex: 0 0 auto;
}

    .dormora-topbar__overflow .dormora-overflow-menu.rz-menu > li > .rz-navigation-item-wrapper .rz-navigation-item-link {
        min-width: var(--dormora-touch-target);
        min-height: var(--dormora-touch-target);
        justify-content: center;
        background: none;
    }

    .dormora-topbar__overflow .dormora-overflow-menu.rz-menu {
        background: none;
    }

    /* Only the top-level ⋮ trigger: the opened popup keeps its own colours (incl. the red danger item). */
    .dormora-topbar__overflow .dormora-overflow-menu.rz-menu > li > .rz-navigation-item-wrapper .rzi {
        color: var(--dormora-on-surface-variant) !important;
    }

    .dormora-topbar__overflow .dormora-overflow-menu .rz-navigation-item-link:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

/* ---------------------------------------------------------------------------------------
   P1U-050 — desktop consistency walkthrough fixes.
   --------------------------------------------------------------------------------------- */

/* UC-2.1/UC-3.2: when a long title or subtitle wraps the header, the action group stays right-aligned
   (it used to drop to the left edge at 1024px on Diet / Communication / Members, and on long recipe titles). */
.dormora-page-header > .rz-stack:last-child:not(:first-child) {
    margin-left: auto;
}

/* Keyboard focus on the Radzen scheduler's own toolbar (prev / next / Today / view buttons) had no visible ring. */
.rz-scheduler .rz-button:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
}

/* Desktop Day/Week: all-day events sit in a strip above the time grid instead of drawing full-height blocks
   (Radzen's Day/Week views have no all-day lane; P1U-021 → decided in P1U-050). */
.dormora-allday {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.dormora-allday__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    margin-right: 0.25rem;
}

.dormora-allday__event {
    border: 0;
    border-radius: var(--rz-border-radius, 4px);
    padding: 0.25rem 0.625rem;
    min-height: 2rem;
    font: inherit;
    font-size: 0.8125rem;
    color: #fff;
    /* P1U-052 (axe): the scheduler's #2196f3 gave white text 3.12:1; the brand primary gives ~9:1. */
    background-color: var(--dormora-brand);
    cursor: pointer;
}

    .dormora-allday__event.is-automatic {
        background-color: #616161; /* --color-event-automatic (#999) is only 2.8:1 with white text */
    }

    /* D-059: a public holiday, in the holiday colour with black text (10.4:1), as on the scheduler grid. */
    .dormora-allday__event.is-holiday {
        color: #000;
        background-color: var(--color-event-holiday);
    }

    /* P2-014: a task due that day is outlined in the task colour (never mistaken for an event); body text keeps AA in both themes. */
    .dormora-allday__event.is-task {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        color: var(--rz-text-color);
        background-color: var(--rz-base-background-color);
        box-shadow: inset 0 0 0 2px var(--color-task);
    }

        .dormora-allday__event.is-task .rzi {
            font-size: 1rem;
            color: var(--color-task);
        }

    /* P2-033: care due, outlined in the care colour (as tasks are in theirs). */
    .dormora-allday__event.is-care {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        color: var(--rz-text-color);
        background-color: var(--rz-base-background-color);
        box-shadow: inset 0 0 0 2px var(--color-care);
    }

        .dormora-allday__event.is-care .rzi {
            font-size: 1rem;
            color: var(--color-care);
        }

    .dormora-allday__event:focus-visible {
        outline: 2px solid var(--rz-primary);
        outline-offset: 2px;
    }

    .dormora-allday__event span {
        font-weight: 400;
        margin-left: 0.375rem;
    }

/* P3X-032: the shared-with-household and RSVP icons beside an event's title in the grids; shape and name carry the meaning, not colour. */
.dormora-event-marker {
    display: inline-flex;
    vertical-align: text-bottom;
    margin-left: 0.25rem;
}

    .dormora-event-marker .rzi {
        font-size: 1rem;
    }

/* P2-014: tasks in the desktop Planner's month grid, outlined like the strip's task buttons. */
.rz-scheduler .rz-event-content.dormora-calendar-task {
    color: var(--rz-text-color);
    background-color: var(--rz-base-background-color);
    box-shadow: inset 0 0 0 2px var(--color-task);
}

.rz-scheduler .rz-event-content.dormora-calendar-care {
    color: var(--rz-text-color);
    background-color: var(--rz-base-background-color);
    box-shadow: inset 0 0 0 2px var(--color-care);
}

/* ---------------------------------------------------------------------------------------
   P1U-051 — mobile walkthrough: every phone tap target reaches --dormora-touch-target (44px, UC-1/UC-4.4).
   The walkthrough measured 36px top-bar buttons, 28px segmented controls and 36px in-content buttons.
   --------------------------------------------------------------------------------------- */

/* Agenda rows: the whole row opens the item (the title link was a 20px-tall text target). */
.dormora-row:has(> .dormora-row__body .dormora-agenda-link),
.dormora-row:has(.dormora-agenda-link) {
    position: relative;
}

.dormora-agenda-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* P4U-060: the row's own controls (the tick, the trailing mark, the actions button) sit above that link, so tapping the tick
   on Home completes the task instead of opening it. */
.dormora-row:has(.dormora-agenda-link) > :is(.dormora-row__leading, .dormora-row__trailing, .dormora-row__more) {
    position: relative;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .dormora-topbar .rz-button {
        min-height: var(--dormora-touch-target);
        min-width: var(--dormora-touch-target);
    }

    .dormora-shell--mobile .rz-selectbar .rz-button,
    .dormora-shell--mobile .dormora-page .rz-button {
        min-height: var(--dormora-touch-target);
    }

    .dormora-shell--mobile .dormora-page .rz-button.rz-button-icon-only {
        min-width: var(--dormora-touch-target);
    }

    /* The list search field. */
    .dormora-shell--mobile .dormora-list-toolbar .rz-textbox,
    .dormora-shell--mobile .dormora-list-toolbar input.rz-inputtext {
        min-height: var(--dormora-touch-target);
    }
}

/* P1U-051: chat auto-scroll (ScrollHelper.js) keeps the newest message clear of the sticky composer (and, on phones,
   the bottom bar) instead of sliding it underneath them. */
.dormora-chat__row {
    scroll-margin-bottom: 6rem;
}

@media (max-width: 767.98px) {
    .dormora-chat__row {
        scroll-margin-bottom: calc(var(--dormora-bottom-nav-offset) + 6rem);
    }
}

/* P1U-052 (axe): other people's chat bubbles in dark used --rz-base-200 (#6c6c6c): body text 3.97:1, time 2.0:1. */
:root[data-theme="dark"] .dormora-chat__bubble {
    background-color: #2c2c2c;
}

:root[data-theme="dark"] .dormora-chat__row.is-mine .dormora-chat__bubble {
    background-color: var(--rz-primary-lighter);
}

/* P4U-022 (UC-M.7.2, UC-M.D11): the snackbar. On phones, full width above the FAB and the bottom bar; from 768px, bottom
   left. The host is the live region and lets clicks through; only the snackbar itself takes them. */
.dormora-snackbar-host {
    position: fixed;
    inset-inline: 1rem;
    bottom: calc(var(--dormora-bottom-nav-offset) + var(--dormora-fab-clearance) + 1rem + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.dormora-snackbar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 42rem;
    min-height: 3rem;
    padding: 0.25rem 0.5rem 0.25rem 1rem;
    border-radius: 4px;
    background-color: var(--dormora-inverse-surface);
    color: var(--dormora-inverse-on-surface);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 1px 18px rgba(0, 0, 0, 0.12);
    animation: dormora-snackbar-in 150ms cubic-bezier(0.2, 0, 0, 1);
}

.dormora-snackbar__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-block: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.dormora-snackbar__summary {
    font-weight: 500;
}

.dormora-snackbar__action {
    flex: 0 0 auto;
    min-height: var(--dormora-touch-target);
    padding: 0 0.75rem;
    border: 0;
    border-radius: 1.25rem;
    background: transparent;
    color: var(--dormora-inverse-primary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

    .dormora-snackbar__action:hover {
        background-color: color-mix(in srgb, var(--dormora-inverse-primary) 8%, transparent);
    }

    .dormora-snackbar__action:focus-visible {
        outline: 2px solid var(--dormora-inverse-primary);
        outline-offset: 2px;
    }

@keyframes dormora-snackbar-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dormora-snackbar {
        animation: none;
    }
}

@media (min-width: 768px) {
    .dormora-snackbar-host {
        inset-inline: 1.5rem auto;
        bottom: 1.5rem;
        justify-content: flex-start;
    }

    .dormora-snackbar {
        width: auto;
        min-width: 18rem;
    }
}

/* P3X-041: the desktop income grid never scrolls sideways. Below these widths (of the grid itself, so the sidebar and the
   page padding are already accounted for) the Type and Source columns are hidden and shown under the name (.dormora-grid-sub),
   then Expected too. Columns: 1 Name, 2 Type, 3 Source, 4 Expected, 5 Amount, 6 Actions. */
.dormora-budget-grid--income {
    container-type: inline-size;
}

.dormora-grid-sub {
    display: none;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

@container (max-width: 700px) {
    .dormora-budget-grid--income col:nth-child(2),
    .dormora-budget-grid--income th:nth-child(2),
    .dormora-budget-grid--income td:nth-child(2),
    .dormora-budget-grid--income col:nth-child(3),
    .dormora-budget-grid--income th:nth-child(3),
    .dormora-budget-grid--income td:nth-child(3) {
        display: none;
    }

    .dormora-budget-grid--income .dormora-grid-sub {
        display: block;
    }
}

@container (max-width: 500px) {
    .dormora-budget-grid--income col:nth-child(4),
    .dormora-budget-grid--income th:nth-child(4),
    .dormora-budget-grid--income td:nth-child(4) {
        display: none;
    }
}

/* ---------------------------------------------------------------------------------------
   P4-011 / P4U-041 — the sign-in layout (SignInLayout, SignInPanel): the onboarding mockup's Welcome
   (docs/mockups/onboarding-material3.html, step 0). Phone: the whole screen is brand navy, the mark on a white tile at
   the top, the three cards to swipe with their dots, and the buttons at the bottom within thumb reach (white "Create an
   account", a text "I already have an account"). From 768px (D-023): the navy brand panel beside a plain panel with the
   logo, "Welcome", "Create an account" filled and "Sign in" outlined. The brand is the same in both themes, like the
   splash; only the desktop panel follows the theme.
   --------------------------------------------------------------------------------------- */
.dormora-signin-layout {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    background-color: var(--dormora-brand);
    color: var(--dormora-on-brand);
}

.dormora-signin-layout__brand,
.dormora-signin-layout__logo,
.dormora-signin-panel__desktop-only {
    display: none;
}

.dormora-signin-layout__panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1.375rem calc(env(safe-area-inset-bottom, 0px) + 1.125rem);
}

.dormora-signin-layout__card {
    flex: 1;
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
}

.dormora-signin-layout__mark {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background-color: var(--dormora-on-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.dormora-signin-layout__mark img {
    width: 2.5rem;
    height: auto;
}

/* P4U-050: hidden until SignInPanel knows whether this device has signed in before, so the welcome never flashes up. */
.dormora-signin-panel--checking {
    visibility: hidden;
}

.dormora-signin-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* The welcome's heading and line are for screen readers on a phone: the cards say it. */
.dormora-signin-panel--welcome .dormora-signin-panel__heading,
.dormora-signin-panel--welcome .dormora-signin-panel__message {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.dormora-signin-panel--welcome .dormora-signin-panel__note {
    display: none;
}

/* Signed out, or the session ended, on a phone: the heading and line on the navy, the buttons at the bottom. */
.dormora-signin-panel__heading.rz-text-h5 {
    margin-top: auto !important;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--dormora-on-brand);
}

.dormora-signin-panel__message,
.dormora-signin-panel__note.rz-text-body2 {
    color: var(--dormora-on-brand-variant);
}

/* Signed out or ended, on a phone: the splash's brand block, centred, with the heading and line under it. The layout's
   small tile at the top gives way to it. */
.dormora-signin-layout__panel:has(.dormora-signin-panel__brand) .dormora-signin-layout__mark--phone {
    display: none;
}

.dormora-signin-panel__brand {
    margin-top: auto;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dormora-signin-panel__brand-mark {
    width: 6rem;
    height: 6rem;
    border-radius: 1.625rem;
    background-color: var(--dormora-on-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}

.dormora-signin-panel__brand-mark img {
    width: 4.25rem;
    height: auto;
}

.dormora-signin-panel__brand-name {
    margin-top: 1rem;
    font-size: 1.75rem;
    font-weight: 600;
}

.dormora-signin-panel__brand-tagline {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    letter-spacing: 2px;
    color: var(--dormora-on-brand-variant);
}

/* Above the welcome's cards the block is smaller, centred between the top of the screen and the cards: the spare height
   is shared equally above the block, between it and the cards, and between the cards and the buttons. */
.dormora-signin-panel--welcome .dormora-signin-panel__brand {
    margin-top: auto;
    margin-bottom: auto;
}

.dormora-signin-panel--welcome .dormora-welcome {
    flex: none;
}

.dormora-signin-panel--welcome .dormora-signin-panel__brand-mark {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.25rem;
}

.dormora-signin-panel--welcome .dormora-signin-panel__brand-mark img {
    width: 3.125rem;
}

.dormora-signin-panel--welcome .dormora-signin-panel__brand-name {
    margin-top: 0.625rem;
    font-size: 1.375rem;
}

.dormora-signin-panel:has(.dormora-signin-panel__brand) .dormora-signin-panel__heading.rz-text-h5 {
    margin-top: 0 !important;
}

.dormora-signin-panel:has(.dormora-signin-panel__brand) .dormora-signin-panel__heading,
.dormora-signin-panel:has(.dormora-signin-panel__brand) .dormora-signin-panel__message {
    text-align: center;
}

.dormora-signin-panel__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
}

.dormora-signin-panel__actions .rz-button {
    width: 100%;
    min-height: 2.625rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.dormora-signin-panel__actions .rz-button.dormora-signin-panel__lead {
    background-color: var(--dormora-on-brand);
    color: var(--dormora-brand);
}

.dormora-signin-panel__actions .rz-button.rz-variant-outlined.dormora-signin-panel__second {
    background-color: transparent;
    box-shadow: none;
    color: var(--dormora-on-brand);
}

/* Hover and press keep each button's own text colour: Radzen's outlined primary turns its text navy on a pale fill,
   which on the navy left "I already have an account" (and the signed-out "Create an account") blank. A state layer
   instead: brand-tinted on the white button, white on the text one. */
.dormora-signin-panel__actions .rz-button.dormora-signin-panel__lead:not(.rz-state-disabled):hover,
.dormora-signin-panel__actions .rz-button.dormora-signin-panel__lead:not(.rz-state-disabled):active {
    background-color: var(--dormora-on-brand);
    background-image: linear-gradient(rgba(41, 70, 130, 0.08), rgba(41, 70, 130, 0.08));
    color: var(--dormora-brand);
}

.dormora-signin-panel__actions .rz-button.rz-variant-outlined.dormora-signin-panel__second:not(.rz-state-disabled):hover,
.dormora-signin-panel__actions .rz-button.rz-variant-outlined.dormora-signin-panel__second:not(.rz-state-disabled):active {
    background-color: rgba(255, 255, 255, 0.12);
    background-image: none;
    color: var(--dormora-on-brand);
}

.dormora-signin-panel__note.rz-text-body2 {
    font-size: 0.8125rem;
    text-align: center;
}

/* The three cards (SignInPanel): a track that moves a card's width per swipe or dot. */
.dormora-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.dormora-welcome__viewport {
    overflow: hidden;
    touch-action: pan-y;
}

.dormora-welcome__track {
    display: flex;
    transition: transform 0.3s var(--dormora-dialog-easing, ease);
}

.dormora-welcome__card {
    flex: 0 0 100%;
    min-width: 0;
}

.dormora-welcome__art {
    height: 11.5rem;
    margin-bottom: 1.375rem;
    border-radius: 1.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A small, light picture of the feature, the same in both themes (it sits on the brand navy), so it keeps the light
   theme's roles. */
.dormora-welcome__preview {
    --dormora-primary-container: #dbe2f6;
    --dormora-success: #1d6b35;
    --dormora-success-container: #c9efcf;
    width: min(15.5rem, 85%);
    padding: 0.625rem 0.75rem;
    border-radius: 0.875rem;
    background-color: var(--dormora-on-brand);
    color: var(--dormora-brand-deep);
    font-size: 0.75rem;
    line-height: 1.3;
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dormora-welcome__preview b {
    font-weight: 600;
}

.dormora-welcome__preview small {
    display: block;
    font-size: 0.625rem;
    opacity: 0.7;
}

.dormora-welcome__preview .rzi {
    font-size: 1rem;
    color: var(--dormora-brand);
}

.dormora-welcome__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dormora-welcome__row > span:nth-child(2) {
    flex: 1;
    min-width: 0;
}

.dormora-welcome__row s {
    opacity: 0.7;
}

.dormora-welcome__tick {
    flex: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0.75;
}

.dormora-welcome__tick.is-done {
    border-color: var(--dormora-brand);
    background-color: var(--dormora-brand);
    opacity: 1;
}

/* Who's free: an hour scale, a lane per person with their busy times, and the hour everyone is free. */
.dormora-welcome__hours,
.dormora-welcome__who {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: center;
}

.dormora-welcome__hours {
    grid-template-columns: 2.5rem repeat(5, 1fr);
    font-size: 0.5625rem;
    opacity: 0.7;
}

.dormora-welcome__hours span:first-child {
    grid-column: 2;
}

.dormora-welcome__who i {
    position: relative;
    height: 0.75rem;
    border-radius: 0.25rem;
    background-color: rgba(9, 22, 57, 0.08);
}

.dormora-welcome__who b {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 0.25rem;
    background-color: var(--dormora-brand);
}

.dormora-welcome__free {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    background-color: var(--dormora-success-container);
    color: var(--dormora-success);
    font-weight: 600;
}

.dormora-welcome__preview .dormora-welcome__free .rzi {
    color: inherit;
}

.dormora-welcome__money {
    display: flex;
    flex-direction: column;
}

.dormora-welcome__money b {
    font-size: 1rem;
}

.dormora-welcome__bar {
    height: 0.375rem;
    border-radius: 0.1875rem;
    background-color: rgba(9, 22, 57, 0.12);
}

.dormora-welcome__bar i {
    display: block;
    width: 62%;
    height: 100%;
    border-radius: inherit;
    background-color: var(--dormora-brand);
}

.dormora-welcome__tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;
}

.dormora-welcome__tiles span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0.125rem;
    border-radius: 0.5rem;
    background-color: var(--dormora-primary-container);
    font-size: 0.5625rem;
    font-weight: 600;
}

.dormora-welcome__headline,
.dormora-welcome__text {
    text-align: center;
}

.dormora-welcome__headline {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.dormora-welcome__text {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--dormora-on-brand-variant);
}

.dormora-welcome__dots {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

/* Each dot is a 24px target around the 6px mark; the current one is the long one. */
.dormora-welcome__dot {
    width: 1.125rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dormora-welcome__dot::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 0.1875rem;
    background-color: rgba(255, 255, 255, 0.4);
}

.dormora-welcome__dot.is-on {
    width: 1.5rem;
}

.dormora-welcome__dot.is-on::before {
    width: 1.125rem;
    background-color: var(--dormora-on-brand);
}

.dormora-welcome__dot:focus-visible {
    outline: 2px solid var(--dormora-on-brand);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .dormora-welcome__track {
        transition: none;
    }
}

@media (min-width: 768px) {
    .dormora-signin-layout {
        background-color: var(--dormora-surface-card);
        color: var(--dormora-on-surface);
    }

    .dormora-signin-layout__brand {
        display: flex;
        flex-direction: column;
        flex: none;
        width: clamp(18rem, 42vw, 35rem);
        padding: 3rem clamp(2rem, 4vw, 3.25rem);
        background-color: var(--dormora-brand);
        color: var(--dormora-on-brand);
    }

    .dormora-signin-layout__mark {
        width: 3rem;
        height: 3rem;
        border-radius: 0.875rem;
    }

    .dormora-signin-layout__mark img {
        width: 2.125rem;
    }

    .dormora-signin-layout__mark--phone,
    .dormora-signin-panel__brand,
    .dormora-welcome,
    .dormora-signin-panel__phone-only {
        display: none;
    }

    .dormora-signin-panel__desktop-only {
        display: inline;
    }

    .dormora-signin-layout__panel {
        justify-content: center;
        padding: 2rem;
    }

    .dormora-signin-layout__card {
        flex: none;
        max-width: 25rem;
    }

    .dormora-signin-layout__logo {
        display: block;
        width: auto;
        height: 2.875rem;
        align-self: flex-start;
        margin-bottom: 1.625rem;
    }

    .dormora-signin-panel {
        flex: none;
        gap: 0;
    }

    .dormora-signin-panel--welcome .dormora-signin-panel__heading,
    .dormora-signin-panel--welcome .dormora-signin-panel__message {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .dormora-signin-panel__heading.rz-text-h5,
    .dormora-signin-panel:has(.dormora-signin-panel__brand) .dormora-signin-panel__heading.rz-text-h5 {
        margin: 0.25rem 0 0.375rem !important;
        font-size: 1.625rem;
        line-height: 1.25;
        color: var(--dormora-on-surface);
    }

    .dormora-signin-panel__message {
        margin-bottom: 1rem !important;
        font-size: 0.875rem;
    }

    .dormora-signin-panel:has(.dormora-signin-panel__brand) .dormora-signin-panel__heading,
    .dormora-signin-panel:has(.dormora-signin-panel__brand) .dormora-signin-panel__message {
        text-align: start;
    }

    .dormora-signin-panel__message,
    .dormora-signin-panel__note.rz-text-body2 {
        color: var(--dormora-on-surface-variant);
    }

    .dormora-signin-panel__actions {
        margin-top: 0;
        padding-top: 0;
        gap: 0.625rem;
    }

    .dormora-signin-panel__actions .rz-button.dormora-signin-panel__lead {
        background-color: var(--dormora-primary);
        color: var(--dormora-on-primary);
    }

    .dormora-signin-panel__actions .rz-button.rz-variant-outlined.dormora-signin-panel__second {
        box-shadow: inset 0 0 0 1px var(--dormora-outline-variant);
        color: var(--dormora-primary);
    }

    .dormora-signin-panel__actions .rz-button.dormora-signin-panel__lead:not(.rz-state-disabled):hover,
    .dormora-signin-panel__actions .rz-button.dormora-signin-panel__lead:not(.rz-state-disabled):active {
        background-color: var(--dormora-primary);
        background-image: linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08));
        color: var(--dormora-on-primary);
    }

    .dormora-signin-panel__actions .rz-button.rz-variant-outlined.dormora-signin-panel__second:not(.rz-state-disabled):hover,
    .dormora-signin-panel__actions .rz-button.rz-variant-outlined.dormora-signin-panel__second:not(.rz-state-disabled):active {
        background-color: var(--dormora-primary-container);
        color: var(--dormora-on-primary-container);
    }

    .dormora-signin-panel--welcome .dormora-signin-panel__note,
    .dormora-signin-panel__note.rz-text-body2 {
        display: block;
        margin-top: 1.125rem !important;
        text-align: start;
    }
}

.dormora-signin-layout__brand-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.375rem;
    font-weight: 600;
}

.dormora-signin-layout__pitch {
    margin-block: auto;
    padding-block: 2rem;
}

.dormora-signin-layout__headline {
    margin: 0;
    font-size: clamp(1.75rem, 2.6vw, 2.125rem);
    font-weight: 600;
    line-height: 1.15;
}

.dormora-signin-layout__lede,
.dormora-signin-layout__tagline {
    margin: 0;
    color: var(--dormora-on-brand-variant);
}

.dormora-signin-layout__lede {
    margin-top: 0.75rem;
    max-width: 40ch;
    font-size: 1rem;
}

.dormora-signin-layout__points {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.dormora-signin-layout__points li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.dormora-signin-layout__tagline {
    font-size: 0.8125rem;
    letter-spacing: 2px;
}

/* ---------------------------------------------------------------------------------------
   P4-010, P4U-050 — onboarding (Layout/Onboarding): a new sign-up's first stop. The shell drops its top bar, navigation
   and FAB while it shows (dormora-shell--onboarding), so the walkthrough has the whole screen.
   - Phone (the mockup's frame): a progress bar and "n of 4" at the top, one question, and the primary button at the
     bottom within thumb reach with the quiet ones under it.
   - Desktop: a numbered stepper above a centred card on the surface container, Back on the left of the card's footer.
   --------------------------------------------------------------------------------------- */
.dormora-shell--onboarding .rz-body {
    padding: 0;
    background-color: var(--dormora-surface);
}

.dormora-shell--onboarding:not(.dormora-shell--mobile) .rz-body {
    background-color: var(--dormora-surface-container);
}

.dormora-shell--onboarding .dormora-page {
    max-width: none;
}

.dormora-onboarding {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    color: var(--dormora-on-surface);
}

.dormora-onboarding--phone {
    padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
}

.dormora-onboarding--desktop {
    align-items: center;
    padding: 1.5rem 1.5rem 3rem;
}

/* The card: on a phone the screen itself, its footer pushed to the bottom; on desktop a white card in the middle. */
.dormora-onboarding__card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.dormora-onboarding--desktop .dormora-onboarding__card {
    flex: 0 0 auto;
    width: min(100%, 38.75rem);
    margin-block: auto;
    padding: 1.875rem 2.5rem 1.625rem;
    border-radius: 1.75rem;
    background-color: var(--dormora-surface-card);
}

.dormora-onboarding--desktop .dormora-onboarding__card--wide {
    width: min(100%, 51.25rem);
}

.dormora-onboarding__form {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.75rem;
}

.dormora-onboarding__title {
    margin: 0.25rem 0 0.375rem;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--dormora-on-surface);
}

    .dormora-onboarding__title:focus {
        outline: none;
    }

    .dormora-onboarding__title:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-onboarding--desktop .dormora-onboarding__title {
    font-size: 1.625rem;
}

.dormora-onboarding__title--quiet {
    color: var(--dormora-on-surface-variant);
}

.dormora-onboarding__lede {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-onboarding__hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-onboarding__field-error {
    font-size: 0.75rem;
    color: var(--dormora-error);
}

.dormora-onboarding__mark {
    width: 2.5rem;
    height: auto;
    margin: 0.5rem 0 0.625rem;
}

.dormora-onboarding__center {
    align-self: center;
}

/* Progress: segments on a phone (the mockup's .steps), a numbered stepper on desktop. */
.dormora-onboarding__progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.dormora-onboarding__bar {
    display: flex;
    flex: 1;
    gap: 0.375rem;
}

    .dormora-onboarding__bar i {
        flex: 1;
        height: 4px;
        border-radius: 2px;
        background-color: var(--dormora-surface-container-high);
    }

        .dormora-onboarding__bar i.is-on {
            background-color: var(--dormora-primary);
        }

.dormora-onboarding__count {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
    white-space: nowrap;
}

.dormora-onboarding__stepper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin: 0.5rem 0 1.5rem;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

    .dormora-onboarding__stepper li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .dormora-onboarding__stepper li + li::before {
            content: "";
            width: 2.5rem;
            border-top: 1.5px solid var(--dormora-outline-variant);
            margin-inline-end: 0.125rem;
        }

    .dormora-onboarding__stepper b {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border: 1.5px solid var(--dormora-outline-variant);
        border-radius: 50%;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .dormora-onboarding__stepper .is-on {
        color: var(--dormora-on-surface);
        font-weight: 600;
    }

        .dormora-onboarding__stepper .is-on b {
            border-color: var(--dormora-primary);
            background-color: var(--dormora-primary);
            color: var(--dormora-on-primary);
        }

    .dormora-onboarding__stepper .is-done b {
        border-color: var(--dormora-primary-container);
        background-color: var(--dormora-primary-container);
        color: var(--dormora-on-primary-container);
    }

/* Back: an icon at the top of a phone's screen, a text button in desktop's footer. */
.dormora-onboarding__back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dormora-touch-target, 48px);
    height: var(--dormora-touch-target, 48px);
    margin: -0.5rem 0 0 -0.75rem;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dormora-on-surface);
    cursor: pointer;
}

    .dormora-onboarding__back-icon:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
    }

    .dormora-onboarding__back-icon:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

.dormora-onboarding__footer {
    display: flex;
    margin-top: auto;
    padding-top: 1.25rem;
}

.dormora-onboarding__footer-end {
    display: flex;
    gap: 0.625rem;
    margin-inline-start: auto;
    align-items: center;
}

/* Phone: the primary full width at the bottom, the quiet buttons under it. */
.dormora-onboarding--phone .dormora-onboarding__footer-end {
    flex: 1;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.5rem;
}

.dormora-onboarding--phone .dormora-onboarding__footer .rz-button {
    min-height: 2.625rem;
    border-radius: 1.3125rem;
}

.dormora-onboarding--desktop .dormora-onboarding__back {
    margin-inline-start: -1rem;
}

/* Step 2: the invitation (tertiary container), and the two ways in as outlined option cards. */
.dormora-onboarding__invitation {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.625rem;
    align-items: center;
    margin-bottom: 0.875rem;
    padding: 0.75rem 0.875rem;
    border-radius: 1rem;
    background-color: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
}

.dormora-onboarding__invitation-text {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
}

    .dormora-onboarding__invitation-text strong {
        font-size: 0.875rem;
        font-weight: 600;
    }

.dormora-onboarding__invitation-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.5rem;
}

    .dormora-onboarding__invitation-actions .rz-button:first-child {
        flex: 1;
    }

    .dormora-onboarding__invitation-actions .rz-button.rz-variant-text {
        color: var(--dormora-on-tertiary-container);
    }

.dormora-onboarding--desktop .dormora-onboarding__invitation {
    grid-template-columns: auto 1fr auto;
    margin-bottom: 1rem;
}

.dormora-onboarding--desktop .dormora-onboarding__invitation-actions {
    grid-column: auto;
}

.dormora-onboarding__options {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.dormora-onboarding--desktop .dormora-onboarding__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.dormora-onboarding__option,
.dormora-onboarding__switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--dormora-touch-target, 48px);
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 1rem;
    background-color: var(--dormora-surface-card);
    color: var(--dormora-on-surface);
    font: inherit;
    text-align: start;
}

.dormora-onboarding__option {
    cursor: pointer;
}

    .dormora-onboarding__option:hover {
        background-color: color-mix(in srgb, var(--dormora-primary) 6%, var(--dormora-surface-card));
    }

    .dormora-onboarding__option:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-onboarding--desktop .dormora-onboarding__option {
    flex-direction: column;
    align-items: flex-start;
}

.dormora-onboarding__option-icon {
    color: var(--dormora-primary);
}

.dormora-onboarding__option-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

    .dormora-onboarding__option-text strong {
        font-weight: 600;
    }

    .dormora-onboarding__option-text span {
        font-size: 0.75rem;
        color: var(--dormora-on-surface-variant);
    }

.dormora-onboarding__option-chevron {
    color: var(--dormora-on-surface-variant);
}

.dormora-onboarding--desktop .dormora-onboarding__option-chevron {
    display: none;
}

.dormora-onboarding__switch .dormora-onboarding__option-text strong {
    font-weight: 500;
}

.dormora-onboarding__switch > .rzi {
    color: var(--dormora-on-surface-variant);
}

/* 2A: "… is ready", the code card and the email row. Desktop puts create and invite side by side. */
.dormora-onboarding__ready {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.375rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dormora-success);
}

    .dormora-onboarding__ready .rzi {
        font-size: 1.125rem;
        font-variation-settings: 'FILL' 1;
    }

.dormora-onboarding__code-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--dormora-surface-container);
    text-align: center;
}

.dormora-onboarding__code {
    margin: 0.25rem 0 0.625rem;
    padding: 0;
    border: 0;
    font-size: 1.625rem;
}

.dormora-onboarding__code-actions {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    justify-content: center;
}

.dormora-onboarding--phone .dormora-onboarding__code-actions .rz-button {
    flex: 1;
}

.dormora-onboarding__email {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.875rem;
}

.dormora-onboarding__email-row {
    display: flex;
    gap: 0.5rem;
}

    .dormora-onboarding__email-row .rz-textbox {
        flex: 1;
        min-width: 0;
    }

.dormora-onboarding__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem;
}

.dormora-onboarding__invite-column {
    padding-inline-start: 2.25rem;
    border-inline-start: 1px solid var(--dormora-outline-variant);
}

.dormora-onboarding__inline-actions {
    margin-top: 0.5rem;
}

/* 2B: the code field, large and spaced for reading aloud; then "You're in" with the household's members. */
.dormora-onboarding__code-field.rz-textbox {
    height: 3.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-align: center;
}

.dormora-onboarding__household-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0.625rem 0 0.875rem;
    border-radius: 1.125rem;
    background-color: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
    font-size: 1.5rem;
    font-weight: 700;
}

.dormora-onboarding__members {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .dormora-onboarding__members li {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0;
    }

.dormora-onboarding__member {
    display: flex;
    flex-direction: column;
}

    .dormora-onboarding__member small {
        font-size: 0.75rem;
        color: var(--dormora-on-surface-variant);
    }

/* Step 4: the big title field, the ideas and the kind chips. */
.dormora-onboarding__big-field.rz-textbox {
    font-size: 0.9375rem;
}

.dormora-onboarding__chips,
.dormora-onboarding__kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dormora-onboarding__kinds {
    margin-bottom: 0.875rem;
}

.dormora-onboarding__chips {
    margin-bottom: 0.5rem;
}

@media (max-width: 767.98px) {
    .dormora-onboarding__columns {
        grid-template-columns: 1fr;
    }

    .dormora-onboarding__invite-column {
        padding-inline-start: 0;
        border-inline-start: 0;
    }
}

/* ---------------------------------------------------------------------------------------
   P4U-024 — pull to refresh (PullToRefresh.js, MainLayout), moving as a native app's does: the page follows the finger
   down (with a rubber-band resistance), the indicator turns in the gap it leaves at the top, and on release the page
   springs back up with a small overshoot, or holds open while the reload runs and then springs back.
   PullToRefresh.js puts the state classes on .rz-body (the scroller) and sets --dormora-ptr-offset (px the page has
   moved) and --dormora-ptr-progress (0 to 1, the threshold) there. The page only carries a transform during a pull, so
   at rest nothing changes for its fixed or sticky children. The browser's own pull to refresh and overscroll glow are
   switched off, so the two never compete.
   --------------------------------------------------------------------------------------- */
html,
body,
.rz-body {
    overscroll-behavior-y: contain;
}

:root {
    --dormora-ptr-hold-easing: cubic-bezier(0.2, 0, 0, 1);
    /* Overshoots a little past the top, then settles: the "flick" back up. */
    --dormora-ptr-spring-easing: cubic-bezier(0.34, 1.45, 0.64, 1);
}

.dormora-ptr {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.dormora-ptr__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-top: -2.5rem;
    border-radius: 50%;
    background-color: var(--rz-base-background-color);
    color: var(--dormora-primary); /* the brand colour; P4U-003 gives it a lighter dark-theme value */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
    opacity: var(--dormora-ptr-progress, 0);
    /* Just above the page's top edge while the gap is small, then centred in it. */
    transform: translateY(min(var(--dormora-ptr-offset, 0px), calc(var(--dormora-ptr-offset, 0px) / 2 + 1.25rem)))
               rotate(calc(var(--dormora-ptr-progress, 0) * 270deg));
    visibility: hidden;
}

.dormora-ptr--pulling .dormora-ptr__indicator,
.dormora-ptr--refreshing .dormora-ptr__indicator,
.dormora-ptr--settling .dormora-ptr__indicator {
    visibility: visible;
}

.dormora-ptr--pulling .dormora-ptr-content,
.dormora-ptr--refreshing .dormora-ptr-content,
.dormora-ptr--settling .dormora-ptr-content {
    transform: translateY(var(--dormora-ptr-offset, 0px));
    will-change: transform;
}

/* Let go past the threshold: ease to the hold position, where the indicator spins until the reload returns. */
.dormora-ptr--refreshing .dormora-ptr__indicator,
.dormora-ptr--refreshing .dormora-ptr-content {
    transition: transform 0.22s var(--dormora-ptr-hold-easing);
}

.dormora-ptr--refreshing .dormora-ptr__indicator {
    opacity: 1;
}

    .dormora-ptr--refreshing .dormora-ptr__indicator .rzi {
        animation: dormora-ptr-spin 0.8s linear infinite;
    }

/* Let go short of the threshold, or the reload finished: spring back up. */
.dormora-ptr--settling .dormora-ptr-content {
    transition: transform 0.45s var(--dormora-ptr-spring-easing);
}

.dormora-ptr--settling .dormora-ptr__indicator {
    transition: transform 0.45s var(--dormora-ptr-spring-easing), opacity 0.2s;
}

@keyframes dormora-ptr-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    /* The page still follows the finger (direct manipulation), but returns without the bounce or the spin. */
    .dormora-ptr--settling .dormora-ptr-content,
    .dormora-ptr--settling .dormora-ptr__indicator {
        transition: transform 0.15s linear, opacity 0.15s linear;
    }

    .dormora-ptr--refreshing .dormora-ptr__indicator .rzi {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------------------
   P4U-025 — ModuleTabs (UC-M.4.1): Material 3 primary tabs for a module's parts, the same on every size. Sentence case,
   a 3px indicator under the selected label, and a sideways scroll when the labels don't fit.
   --------------------------------------------------------------------------------------- */

.dormora-tabs__list {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--rz-base-300);
}

    .dormora-tabs__list::-webkit-scrollbar {
        display: none;
    }

/* P4I-002i: on a phone the section tabs of every ModuleTabs stay under the top app bar while the page scrolls (the chat
   thread, a long list). The sticky element is the tab row only; its parent .dormora-tabs also holds the panel, so it
   stays stuck for the whole panel. .rz-body (the scroller) has 1rem of padding and sticky offsets are measured inside
   it, so top: -1rem puts the row flush under the bar with nothing showing above it; the inline margin and padding bleed
   the opaque surface across the 1rem side padding so no content shows beside the row. z-index 4 is above the composer
   and quick-add bars (2) and the rows, below the pull-to-refresh indicator (5), the FAB and the sheets. */
.dormora-shell--mobile .dormora-tabs__list {
    position: sticky;
    top: -1rem;
    z-index: 4;
    margin-inline: -1rem;
    padding-inline: 1rem;
    background-color: var(--rz-body-background-color);
}

.dormora-tabs__tab {
    position: relative;
    flex: 1 0 auto;
    min-height: 3rem;
    padding: 0 1rem;
    border: 0;
    background: none;
    color: var(--rz-text-secondary-color);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.00625rem;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
}

    .dormora-tabs__tab:hover {
        background-color: color-mix(in srgb, var(--rz-text-title-color) 8%, transparent);
    }

    .dormora-tabs__tab:focus-visible {
        outline: 3px solid var(--dormora-primary, var(--rz-primary));
        outline-offset: -3px;
    }

.dormora-tabs__tab--selected {
    color: var(--dormora-primary, var(--rz-primary));
}

    .dormora-tabs__tab--selected .dormora-tabs__label::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: max(1.5rem, calc(100% - 2rem));
        height: 3px;
        border-radius: 3px 3px 0 0;
        background-color: currentColor;
        transform: translateX(-50%);
    }

.dormora-tabs__panel {
    padding-top: 1rem;
}

    .dormora-tabs__panel:focus-visible {
        outline: 2px solid var(--dormora-primary, var(--rz-primary));
        outline-offset: 2px;
    }

/* P4U-073 (G11): onboarding's "What will you use?": a tile per area, three to a row, pressed when chosen (the mockup's
   tiles, More's shape). */
.dormora-area-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
}

.dormora-area-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 5rem;
    padding: 0.75rem 0.375rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 1rem;
    background-color: var(--dormora-surface-container);
    color: var(--dormora-on-surface);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

    .dormora-area-tile .rzi {
        font-size: 1.5rem;
        color: var(--dormora-on-surface-variant);
    }

    .dormora-area-tile--on {
        border-color: var(--dormora-primary);
        background-color: var(--dormora-primary-container);
        color: var(--dormora-on-primary-container);
    }

        .dormora-area-tile--on .rzi {
            color: var(--dormora-primary);
        }

    .dormora-area-tile:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

/* P4U-050: onboarding's Light or dark, two larger tiles with a line under each name. */
.dormora-area-tiles--looks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

    .dormora-area-tiles--looks .dormora-area-tile {
        min-height: 7rem;
        font-size: 0.9375rem;
    }

        .dormora-area-tiles--looks .dormora-area-tile .rzi {
            font-size: 2rem;
        }

    .dormora-area-tiles--looks small {
        font-size: 0.75rem;
        font-weight: 400;
        color: var(--dormora-on-surface-variant);
        text-align: center;
    }

    .dormora-area-tiles--looks .dormora-area-tile--on small {
        color: inherit;
    }

/* P4U-076 (G17): Workouts' "Today" card, the mockup's tertiary container. */
.dormora-workout-today {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
}

.dormora-workout-today__label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
}

.dormora-workout-today__name {
    font-size: 1.0625rem;
    font-weight: 600;
}

.dormora-workout-today__open {
    align-self: flex-start;
    margin-top: 0.625rem;
}

.dormora-chip-row--wrap {
    flex-wrap: wrap;
    overflow-x: visible;
}

/* P4U-070: a row's progress bar (ListRow Progress: a TV season's episodes), and the "+1 ep" tonal button. */
.dormora-row__progress {
    width: 7.5rem;
    max-width: 100%;
    height: 4px;
    margin-top: 0.375rem;
    border-radius: 2px;
    background-color: var(--dormora-surface-container-high);
    overflow: hidden;
}

    .dormora-row__progress > span {
        display: block;
        height: 100%;
        border-radius: 2px;
        background-color: var(--dormora-primary);
    }

.dormora-episode-button.rz-button {
    min-height: 2rem;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    white-space: nowrap;
}

/* P4U-070: Season, Episode and Of side by side in the edit sheet. */
.dormora-episode-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

    .dormora-episode-fields .rz-numeric {
        width: 100%;
    }

/* P4U-110 (UC-M.14.1): At a glance's header (the title and Edit or Customise) and, on desktop, a wider grid (the side
   column is P4U-084's). */
.dormora-glance__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

    .dormora-glance__header .dormora-glance__heading {
        margin: 0;
    }

.dormora-glance__grid--row {
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
    gap: 0.75rem;
}

.dormora-glance__card .dormora-row__progress {
    width: 100%;
}

/* P4U-110: the editor's rows: handle, icon, name and description (or the list), Move up and down, and the switch. */
.dormora-glance-editor {
    display: flex;
    flex-direction: column;
}

.dormora-glance-editor__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.5rem;
    padding: 0.25rem 0;
    background-color: var(--dormora-surface-card, var(--rz-base-background-color));
}

.dormora-glance-editor__handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 3rem;
    color: var(--dormora-on-surface-variant);
    cursor: grab;
    touch-action: none;
}

.dormora-glance-editor__icon {
    color: var(--dormora-on-surface-variant);
}

.dormora-glance-editor__icon--on {
    color: var(--dormora-primary);
}

.dormora-glance-editor__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.dormora-glance-editor__name {
    font-weight: 500;
}

.dormora-glance-editor__description {
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-glance-editor__list {
    max-width: 100%;
}

    /* P4U-119: the list choice reads as the row's second line with its arrow ("Weekly Groceries ▾"), as in the mockup,
       not a boxed field squeezing the row. */
    .dormora-glance-editor__list.rz-dropdown {
        display: inline-flex;
        flex-direction: row; /* Radzen's base stacks the label and the arrow */
        align-items: center;
        align-self: flex-start;
        width: fit-content;
        max-width: 100%;
        min-width: 0;
        height: auto;
        min-height: 1.5rem;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }

        .dormora-glance-editor__list.rz-dropdown .rz-dropdown-label,
        .dormora-glance-editor__list.rz-dropdown .rz-placeholder {
            flex: 0 1 auto;
            min-width: 0;
            width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0;
            font-size: 0.8125rem;
            color: var(--dormora-on-surface-variant);
        }

        .dormora-glance-editor__list.rz-dropdown > .rz-helper-hidden-accessible {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

        .dormora-glance-editor__list.rz-dropdown .rz-dropdown-trigger {
            position: static;
            width: auto;
            padding-inline-start: 0.125rem;
            color: var(--dormora-on-surface-variant);
        }

        .dormora-glance-editor__list.rz-dropdown:is(:hover, :focus, :focus-within, .rz-state-focused):not(.rz-state-disabled) {
            border: 0;
            box-shadow: none;
            background: none;
        }

        .dormora-glance-editor__list.rz-dropdown:focus-visible,
        .dormora-glance-editor__list.rz-dropdown:has(:focus-visible) {
            outline: 2px solid var(--dormora-focus-ring);
            outline-offset: 2px;
            border-radius: 0.25rem;
        }

.dormora-glance-editor__heading {
    margin: 1rem 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dormora-on-surface-variant);
}

.dormora-reorder--dragging {
    position: relative;
    z-index: 1;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(10, 20, 50, 0.18);
    background-color: var(--dormora-surface-container-high);
}

@media (prefers-reduced-motion: reduce) {
    .dormora-reorder--dragging {
        box-shadow: none;
    }
}

/* ---------------------------------------------------------------------------------------
   P4U-030 — Home on a phone (the mockup's Home and the P4U-3 shared anatomy). Today and Coming up are section labels
   (sentence case, 12.5px, weight 600, primary), each item its own full-width row on the page surface (padding 9/16, no
   card), one supporting line of 12px in on-surface-variant (error when overdue). A task leads with a 20px round tick,
   red-ringed when overdue; care and events with a 36px tonal circle. The chip row sits 10px above the first label.
   --------------------------------------------------------------------------------------- */
.dormora-home,
.dormora-flat-list {
    margin-inline: calc(-1 * var(--rz-layout-body-padding, 1rem));
}

.dormora-section-label {
    margin: 0;
    padding: 0.625rem 1rem 0.25rem;
    font-size: 0.78125rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--dormora-primary);
}

:is(.dormora-home, .dormora-flat-list) .dormora-row--mobile {
    min-height: 3.5rem;
    align-items: center;
    gap: 0.875rem;
    padding: 0.5625rem 1rem;
    border: 0;
    border-radius: 0;
}

    :is(.dormora-home, .dormora-flat-list) .dormora-row--mobile .dormora-row__leading {
        min-width: 2.25rem;
        min-height: 0;
    }

    /* Owner (2026-10-13): the 20px tick is centred in a 36px column, on the care and event circles' centre, so every title
       starts at the same place. Its 48px target overlaps the row's padding. */
    :is(.dormora-home, .dormora-flat-list) .dormora-row--mobile .dormora-row__leading:has(.dormora-row__toggle--round) {
        min-width: 2.25rem;
        justify-content: center;
    }

    :is(.dormora-home, .dormora-flat-list) .dormora-row--mobile .dormora-row__leading .rz-chkbox.dormora-row__toggle--round {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        margin: -0.875rem -0.375rem;
    }

        :is(.dormora-home, .dormora-flat-list) .dormora-row--mobile .dormora-row__leading .rz-chkbox.dormora-row__toggle--round > .rz-chkbox-box {
            margin: 0.875rem;
        }

    :is(.dormora-home, .dormora-flat-list) .dormora-row--mobile .dormora-row__title {
        font-size: 0.875rem;
        line-height: 1.25rem;
        -webkit-line-clamp: 1;
    }

    :is(.dormora-home, .dormora-flat-list) .dormora-row--mobile .dormora-row__title .dormora-agenda-link {
        color: inherit;
        text-decoration: none;
    }

.dormora-home__line {
    display: block;
    line-height: 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-home__line--warning {
    color: var(--dormora-error);
}

.dormora-home__empty {
    margin: 0;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-home__error,
.dormora-home .dormora-skeleton {
    padding-inline: 1rem;
}

/* The round tick (tasks), inside its 48px target; filled in primary with a check when done. */
.dormora-row__toggle--round > .rz-chkbox-box {
    border-radius: 50% !important;
}

.dormora-row__toggle--round > .rz-chkbox-box:not(.rz-state-active) {
    border: 2px solid var(--dormora-on-surface-variant);
}

.dormora-row--mobile .dormora-row__leading .rz-chkbox.dormora-row__toggle--round > .rz-chkbox-box {
    width: 1.25rem;
    height: 1.25rem;
}

.dormora-row__toggle--overdue > .rz-chkbox-box {
    border-color: var(--dormora-error) !important;
}

/* The tonal circle (events and money: surface-container-high with a primary icon; care: tertiary container). */
.dormora-lead-circle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--dormora-surface-container-high);
    color: var(--dormora-primary);
}

    .dormora-lead-circle .rzi {
        font-size: 1.125rem;
    }

.dormora-lead-circle--care {
    background-color: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
}

:is(.dormora-home, .dormora-flat-list) .dormora-scope-mark {
    color: var(--dormora-on-surface-variant);
}

/* The chip row directly under the greeting, 10px above Today. */
.dormora-shell--mobile .dormora-scope-bar:has(+ .dormora-home) {
    padding-bottom: 0;
}

/* At a glance on the phone (the mockup's section 8): the header as a section label with Edit in primary; each card's name
   12px 600 with its icon in primary, an amount at 18px 600, a text value at 12px, the detail at 11px. */
.dormora-shell--mobile .dormora-glance {
    margin-top: 0.25rem;
}

.dormora-shell--mobile .dormora-glance__header {
    margin-bottom: 0.375rem;
}

    .dormora-shell--mobile .dormora-glance__header .dormora-glance__heading {
        font-size: 0.78125rem;
    }

    .dormora-shell--mobile .dormora-glance__header .dormora-glance__edit.rz-button {
        color: var(--dormora-primary);
        font-size: 0.78125rem;
        font-weight: 600;
    }

.dormora-shell--mobile .dormora-glance__card {
    min-height: 0;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    border-radius: 1rem;
    background-color: var(--dormora-surface-container);
}

.dormora-shell--mobile .dormora-glance__title {
    font-size: 0.75rem;
    font-weight: 600;
}

    .dormora-shell--mobile .dormora-glance__title .rzi {
        font-size: 1.125rem;
        color: var(--dormora-primary);
    }

.dormora-shell--mobile .dormora-glance__value {
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

.dormora-shell--mobile .dormora-glance__value--amount {
    font-size: 1.125rem;
    font-weight: 600;
}

.dormora-shell--mobile .dormora-glance__detail {
    font-size: 0.6875rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-shell--mobile .dormora-glance__detail--warning {
    color: var(--dormora-error);
}

/* ---------------------------------------------------------------------------------------
   P4U-031 — Calendar on a phone (the mockup's Calendar, Event detail and Who's free; the P4U-3 shared anatomy).
   The bar's title is the month, with no large title under it; the week strip, then the chips, then the day list: a
   primary-colour section label with the full date, then each entry with a 42px time column. Events are blocks in primary
   container (12px radius), care blocks in tertiary container; the day's tasks share one entry labelled "Tasks", each with a
   small round tick. Swiping the strip moves a week, the list a day (dormoraPager), unless it starts on a task or care row.
   --------------------------------------------------------------------------------------- */
.dormora-shell--bar-title .dormora-page-header,
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-event-detail) {
    margin-bottom: 0 !important;
}

/* Previous and next (week, day): for keyboards and screen readers, visible only while focused. */
[data-dormora-pager] {
    position: relative;
    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
    [data-dormora-pager] {
        transition: none;
    }
}

.dormora-sr-only-focusable:not(:focus-visible) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.dormora-pager__prev:focus-visible,
.dormora-pager__next:focus-visible {
    position: absolute;
    z-index: 2;
    top: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dormora-touch-target);
    height: var(--dormora-touch-target);
    border: 0;
    border-radius: 50%;
    background: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface);
    outline: 2px solid var(--dormora-focus-ring);
    outline-offset: 2px;
}

.dormora-pager__prev:focus-visible {
    inset-inline-start: 0;
}

.dormora-pager__next:focus-visible {
    inset-inline-end: 0;
}

/* P4U-061: pull to refresh's alternative (MainLayout), shown while a keyboard focuses it. */
.dormora-refresh-button:focus-visible {
    position: absolute;
    z-index: 3;
    top: 0.5rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--dormora-touch-target);
    padding: 0 1.25rem;
    border: 0;
    border-radius: 1.5rem;
    background: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface);
    font: inherit;
    outline: 2px solid var(--dormora-focus-ring);
    outline-offset: 2px;
}

/* The week strip: seven columns, the short day over the date; the selected date in a filled primary circle. */
.dormora-week-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    padding: 0.375rem 0 0.625rem;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.dormora-week-strip__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-height: var(--dormora-touch-target);
    padding: 0;
    border: 0;
    background: none;
    color: var(--dormora-on-surface-variant);
    font-family: inherit;
    cursor: pointer;
}

    .dormora-week-strip__day:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
        border-radius: 8px;
    }

.dormora-week-strip__weekday {
    font-size: 0.6875rem;
    line-height: 1rem;
    font-weight: 500;
}

.dormora-week-strip__date {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--dormora-on-surface);
}

.dormora-week-strip__day.is-today .dormora-week-strip__date {
    color: var(--dormora-primary);
    font-weight: 600;
}

.dormora-week-strip__day.is-selected {
    color: var(--dormora-primary);
}

    .dormora-week-strip__day.is-selected .dormora-week-strip__date {
        background: var(--dormora-primary);
        color: var(--dormora-on-primary);
        font-weight: 600;
    }

/* The chip row under the strip, 10px above the day's label. */
.dormora-week-strip + .dormora-chip-row {
    padding-top: 0;
}

/* The day list: edge to edge, swiped left or right for the next or previous day. */
.dormora-day-list {
    margin-inline: calc(-1 * var(--rz-layout-body-padding, 1rem));
    padding-bottom: 5rem;
    touch-action: pan-y;
}

    .dormora-day-list > .dormora-empty-state,
    .dormora-day-list .dormora-skeleton {
        margin-inline: 1rem;
    }

.dormora-day-entry {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.5625rem 1rem;
}

.dormora-day-entry__time {
    flex: 0 0 2.625rem;
    padding-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--dormora-on-surface-variant);
    font-variant-numeric: tabular-nums;
}

.dormora-day-entry__item {
    flex: 1 1 auto;
    min-width: 0;
}

/* An event block. */
.dormora-event-block {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0.4375rem 0.625rem;
    border: 0;
    border-radius: 12px;
    background: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-event-block:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-event-block--automatic,
.dormora-event-block--holiday {
    background: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface);
}

.dormora-event-block__title {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dormora-event-block__line {
    font-size: 0.71875rem;
    line-height: 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The day's tasks: each its own row, an 18px round tick, the title, home at the end. */
.dormora-day-tasks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dormora-day-task > .dormora-row--mobile,
.dormora-care-block > .dormora-row--mobile {
    min-height: 0;
    align-items: center;
    gap: 0.625rem;
    border: 0;
}

.dormora-day-task > .dormora-row--mobile {
    padding: 0;
}

    /* P4U-119: the 24px tick of every other list (D-073 decision 16; the mockup's Calendar), not 18px. */
    .dormora-day-task > .dormora-row--mobile .dormora-row__leading {
        min-width: 1.5rem;
        min-height: 1.5rem;
    }

    .dormora-day-task > .dormora-row--mobile .dormora-row__leading .rz-chkbox.dormora-row__toggle--round {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        margin: -0.75rem;
    }

        /* Centred in its 48px target by margin, as on Home (Radzen's hidden input is a flex item beside it). */
        .dormora-day-task > .dormora-row--mobile .dormora-row__leading .rz-chkbox.dormora-row__toggle--round > .rz-chkbox-box {
            width: 1.5rem;
            height: 1.5rem;
            margin: 0.75rem;
        }

    .dormora-day-task > .dormora-row--mobile .dormora-row__title {
        font-weight: 400;
    }

    /* The 48px target overlaps the row's own height, so the row mustn't clip it (the swipe still slides the whole row). */
    .dormora-day-task.dormora-swipe {
        overflow: visible;
        overflow-x: clip;
    }

    .dormora-day-task > .dormora-row--mobile .dormora-row__title,
    .dormora-care-block > .dormora-row--mobile .dormora-row__title {
        font-size: 0.875rem;
        line-height: 1.25rem;
        -webkit-line-clamp: 1;
    }

    .dormora-day-task > .dormora-row--mobile .dormora-scope-mark {
        color: var(--dormora-on-surface-variant);
    }

/* A care block: the row's own surface is the tertiary container, so the swipe reveals behind it. */
.dormora-care-block {
    --dormora-row-surface: var(--dormora-tertiary-container);
    border-radius: 12px;
}

    .dormora-care-block > .dormora-row--mobile {
        padding: 0.4375rem 0.625rem;
        color: var(--dormora-on-tertiary-container);
    }

        .dormora-care-block > .dormora-row--mobile .dormora-row__title {
            font-weight: 500;
        }

        .dormora-care-block > .dormora-row--mobile .dormora-row__meta {
            margin-top: 0;
        }

.dormora-care-block__line {
    font-size: 0.71875rem;
    line-height: 1rem;
}

.dormora-care-block__line--warning {
    color: var(--dormora-error);
    font-weight: 500;
}

/* The month picker sheet: the year with previous and next, then its twelve months. */
.dormora-month-picker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
}

.dormora-month-picker__year {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 500;
}

.dormora-month-picker__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dormora-touch-target);
    height: var(--dormora-touch-target);
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dormora-on-surface-variant);
    cursor: pointer;
}

    .dormora-month-picker__step:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-month-picker__months {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 0.5rem;
}

    .dormora-month-picker__months .dormora-chip {
        justify-content: center;
        padding-inline: 0.5rem;
    }

/* Event detail: the title (22px) with its colour square, when under it, then rows of icon and text, edge to edge. */
.dormora-shell--mobile .dormora-event-detail {
    margin-inline: calc(-1 * var(--rz-layout-body-padding, 1rem));
}

.dormora-event-detail__head {
    padding: 0.25rem 1rem 0.75rem;
}

.dormora-event-detail__title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.dormora-event-detail__swatch {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 4px;
    background: var(--dormora-primary);
}

.dormora-event-detail__swatch--holiday {
    background: var(--color-event-holiday);
}

.dormora-event-detail__swatch--automatic {
    background: var(--color-event-automatic);
}

.dormora-event-detail__when {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-shell--mobile .dormora-event-detail__when {
    margin-inline-start: 1.5rem;
}

.dormora-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dormora-detail-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 3rem;
    padding: 0.5625rem 1rem;
    font-size: 0.875rem;
}

.dormora-detail-row__icon {
    flex: none;
    color: var(--dormora-on-surface-variant);
}

.dormora-detail-row__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-detail-row__secondary {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dormora-detail-row__secondary--wrap {
    white-space: normal;
}

.dormora-detail-row__trailing {
    flex: none;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-detail-row__avatar .dormora-avatar {
    width: 1.875rem;
    height: 1.875rem;
    font-size: 0.75rem;
}

.dormora-detail-row__avatar--other .dormora-avatar {
    background: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
}

.dormora-detail-empty {
    margin: 0;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-attendance.dormora-attendance--chips {
    gap: 0;
}

.dormora-attendance__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1rem 0.625rem;
}

.dormora-attendance--chips .dormora-skeleton,
.dormora-attendance--chips .dormora-error-state {
    margin-inline: 1rem;
}

/* ---------------------------------------------------------------------------------------
   P4U-032 — Tasks on a phone (the mockup's Tasks, Filter sheet and Task detail). The rows are Home's flat rows
   (.dormora-flat-list); the groups are section labels, Overdue in the error colour and "Completed (n)" a muted toggle.
   --------------------------------------------------------------------------------------- */
.dormora-flat-list {
    padding-bottom: 5rem;
}

/* M4 gate fix (p-mk48-b): the Bills tab's own list is followed by "Shared with you", so it keeps no FAB clearance (the shared list has it). */
.dormora-flat-list:has(+ .dormora-shared-section) {
    padding-bottom: 0;
}

/* M5 gate fix 1a (p-mk64-b, p-mk01-a): the same for any list followed by the shared "Shared with you" section (Workouts' Your plans); and a shared
   section's own list keeps none when Workouts' Recent follows it. */
.dormora-flat-list:has(+ .dormora-shared-with-you),
.dormora-shared-with-you:has(+ .dormora-workouts__recent-head) .dormora-flat-list {
    padding-bottom: 0;
}

/* The FAB's clearance belongs under the last list on a page, not between lists (M1 gate): the Templates list's "Built in"
   follows its stored templates closely, and an editor sheet's day groups and items sit one under another. */
.dormora-flat-list.dormora-templates:has(+ .dormora-section-label),
.dormora-dialog .dormora-flat-list.dormora-template-items {
    padding-bottom: 0;
}

/* P4I-030 fix (p-mk30-h): a long subtask list scrolls inside the editor, so "Add a subtask…" under it is always reachable. */
.dormora-dialog .dormora-flat-list.dormora-template-items {
    max-height: 40dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* P4I-030 fix (p-mk30-a, d-mk30-a): a subtask's tick is a round tick like a task row's (the scoped rule never reached Radzen's box). */
.dormora-subtask__tick > .rz-chkbox-box {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50% !important;
}

.dormora-subtask__tick > .rz-chkbox-box:not(.rz-state-active) {
    border: 2px solid var(--dormora-on-surface-variant);
}

.dormora-flat-list__error {
    padding-inline: 1rem;
}

/* M6 gate (p-mk74-c): a label outside a flat list (Templates' "Built in") bleeds across the body's padding as the list's rows do, so it lines up with their icons. */
.dormora-section-label--bleed {
    margin-inline: calc(-1 * var(--rz-layout-body-padding, 1rem));
}

.dormora-section-label--error {
    color: var(--dormora-error);
}

.dormora-section-label--muted {
    color: var(--dormora-on-surface-variant);
}

.dormora-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: var(--dormora-touch-target);
    margin-block: -0.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

    .dormora-section-toggle .rzi {
        font-size: 1.125rem;
    }

    .dormora-section-toggle:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
        border-radius: 4px;
    }

.dormora-home__line-icon.rzi {
    font-size: 0.8125rem;
    vertical-align: -2px;
}

/* The filter sheet: Clear at the top end, the groups as section labels, then "Show n tasks" full width. */
.dormora-task-filters {
    display: flex;
    flex-direction: column;
    gap: 0;
}

    .dormora-task-filters > .dormora-task-filters__clear {
        width: auto !important;
    }

    .dormora-task-filters .dormora-section-label {
        padding-inline: 0;
    }

    .dormora-task-filters .dormora-chip-row {
        padding-block: 0.25rem 0.5rem;
    }

.dormora-task-filters__clear {
    align-self: flex-end;
    margin-inline-start: auto;
    min-height: var(--dormora-touch-target);
    margin-top: -0.75rem;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: var(--dormora-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

    .dormora-task-filters__clear:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-task-filters .dormora-filter-sheet__done.rz-button {
    width: 100%;
    margin-top: 0.5rem;
}

/* Task detail: a large round tick beside the title, the rows, then a full-width Mark done. */
.dormora-task-detail__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* P4U-119: centred in its 48px hit area (the row toggle's box is absolute, so it sat at the top, above the title's
   line), and the mockup's larger tick. */
.dormora-task-detail__tick.rz-chkbox > .rz-chkbox-box {
    width: 2rem;
    height: 2rem;
    inset: 0;
    margin: auto;
}

.dormora-task-detail__title--done {
    text-decoration: line-through;
    color: var(--dormora-on-surface-variant);
}

.dormora-task-detail__action {
    padding: 0.625rem 1rem 1rem;
}

/* On a phone, Mark done sits at the bottom of the screen, as in the mockup (a pushed screen has no bottom bar). */
.dormora-shell--mobile .dormora-task-detail {
    padding-bottom: 5rem;
}

.dormora-shell--mobile .dormora-task-detail__action {
    position: fixed;
    z-index: 2;
    inset-inline: 0;
    bottom: 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    background: var(--rz-body-background-color);
}

    .dormora-task-detail__action .rz-button {
        width: 100%;
    }

/* P4I-021 (MK-21): "Claim it" above Mark done; the pair stacks, and the phone's fixed bar makes room for both. */
.dormora-task-detail__action {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dormora-shell--mobile .dormora-task-detail:has(.dormora-task-detail__action > .rz-button + .rz-button) {
    padding-bottom: 9rem;
}

/* P4I-031 (MK-31 p-mk31-e): Snooze, outlined, beside Mark done. */
.dormora-task-detail__action--pair {
    flex-direction: row;
    gap: 0.75rem;
}

.dormora-task-detail__action--pair .dormora-task-detail__snooze {
    flex: 0 0 40%;
    width: auto;
}

.dormora-task-detail__action--pair .rz-button:not(.dormora-task-detail__snooze) {
    flex: 1;
}

.dormora-shell--mobile .dormora-task-detail:has(.dormora-task-detail__action--pair) {
    padding-bottom: 5rem;
}

/* The jobs board's Claim (MK-21): a tonal 30px pill on the row's end, inside a 44px tap target. */
.dormora-claim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.dormora-claim__pill {
    display: inline-flex;
    align-items: center;
    height: 1.875rem;
    padding: 0 0.875rem;
    border-radius: 0.9375rem;
    font-size: 0.78125rem;
    font-weight: 600;
    background: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

.dormora-claim:hover .dormora-claim__pill {
    filter: brightness(0.96);
}

.dormora-claim:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
    border-radius: 999px;
}

/* A hint under the chips on the jobs board (Up for grabs). */
.dormora-board-hint {
    margin: 0 1rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

/* "away until 28 Oct" on a member's row and the Away part of the member pane. */
.dormora-away-badge {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--dormora-warning-container);
    color: var(--dormora-warning);
}

.dormora-away-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.dormora-away-fields__label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

/* ---------------------------------------------------------------------------------------
   P4U-071 — List templates (the mockup's "New list from a template"). The New list sheet's "Start from" radio rows (icon,
   name and detail, the radio at the end; the chosen one in primary), the icon picker, the empty state's starter link, and
   the template screen's summary line.
   --------------------------------------------------------------------------------------- */
.dormora-new-list__name {
    width: 100%;
}

.dormora-new-list__from {
    display: flex;
    flex-direction: column;
}

    .dormora-new-list__from .dormora-section-label {
        padding-inline: 0;
    }

.dormora-choice-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    min-height: var(--dormora-touch-target);
    padding: 0.5rem 0;
    border: 0;
    background: none;
    color: var(--dormora-on-surface);
    font: inherit;
    font-size: 0.875rem;
    text-align: start;
    cursor: pointer;
}

    .dormora-choice-row:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
        border-radius: 8px;
    }

.dormora-choice-row__icon,
.dormora-choice-row__radio {
    flex: none;
    color: var(--dormora-on-surface-variant);
}

.dormora-choice-row--chosen .dormora-choice-row__icon,
.dormora-choice-row--chosen .dormora-choice-row__radio {
    color: var(--dormora-primary);
}

.dormora-choice-row__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-choice-row__detail {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

/* P4U-087 (the desktop mockup's "New list"): on desktop "Start from" is a grid of outlined cards, three to a row: the icon in
   primary above the name and its line; the chosen card has a primary border on primary container, with no radio. */
.dormora-new-list__from--cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

    .dormora-new-list__from--cards > :not(.dormora-choice-row) {
        grid-column: 1 / -1;
    }

    .dormora-new-list__from--cards .dormora-choice-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
        padding: 0.75rem;
        border: 1px solid var(--dormora-outline);
        border-radius: 12px;
    }

    .dormora-new-list__from--cards .dormora-choice-row__icon {
        color: var(--dormora-primary);
    }

    .dormora-new-list__from--cards .dormora-choice-row__text > span:first-child {
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .dormora-new-list__from--cards .dormora-choice-row--chosen {
        border: 2px solid var(--dormora-primary);
        padding: calc(0.75rem - 1px);
        background: var(--dormora-primary-container);
    }

        .dormora-new-list__from--cards .dormora-choice-row--chosen .dormora-choice-row__icon {
            color: var(--dormora-on-primary-container);
        }

.dormora-icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.dormora-icon-picker__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 8px;
    background: none;
    color: var(--dormora-on-surface-variant);
    cursor: pointer;
}

    .dormora-icon-picker__icon:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-icon-picker__icon--chosen {
    border-color: transparent;
    background: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

.dormora-empty-link {
    display: flex;
    justify-content: center;
    margin-top: -0.5rem;
}

.dormora-template-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

    .dormora-template-summary .rzi {
        color: var(--dormora-primary);
    }

/* ---------------------------------------------------------------------------------------
   P4U-033 — Lists on a phone (the mockup's Lists and List detail). One card per list (surface container low, 16px radius):
   the icon in primary, the name (14.5px, 600) and home; "3 of 5 left" and the last change; a bar of what's bought, green
   when all done. A list's items are flat rows with a square tick; the quick-add field is pinned at the bottom.
   --------------------------------------------------------------------------------------- */
.dormora-list-cards {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.25rem 0 5rem;
}

.dormora-list-card {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.875rem;
    border-radius: 16px;
    background: var(--dormora-surface-container);
    color: var(--dormora-on-surface);
    text-decoration: none;
}

    .dormora-list-card:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-list-card__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.dormora-list-card__icon {
    color: var(--dormora-primary);
}

.dormora-list-card__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.90625rem;
    font-weight: 600;
}

.dormora-list-card__home.rzi {
    font-size: 1rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-list-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.5rem 0 0.375rem;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-list-card__change {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dormora-list-card__bar {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: var(--dormora-surface-container-high);
    overflow: hidden;
}

    .dormora-list-card__bar > span {
        display: block;
        height: 100%;
        border-radius: 2px;
        background: var(--dormora-primary);
    }

.dormora-list-card__bar--done > span {
    background: var(--dormora-success);
}

/* The square tick (list items), centred in its 48px target as the round one is. */
.dormora-flat-list .dormora-row--mobile .dormora-row__leading .rz-chkbox.dormora-row__toggle--square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: -0.875rem -0.375rem;
}

    .dormora-flat-list .dormora-row--mobile .dormora-row__leading .rz-chkbox.dormora-row__toggle--square > .rz-chkbox-box {
        width: 1.25rem;
        height: 1.25rem;
        margin: 0.875rem;
        border-radius: 4px;
    }

.dormora-flat-list .dormora-row__toggle--square > .rz-chkbox-box:not(.rz-state-active) {
    border: 2px solid var(--dormora-on-surface-variant);
}

/* The list's items leave room for the pinned quick-add field. */
.dormora-list-detail {
    padding-bottom: 5.5rem;
}

.dormora-list-detail__add {
    position: fixed;
    z-index: 2;
    inset-inline: 0;
    bottom: 0;
    padding: 0.5rem 0.625rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--dormora-surface-container);
}

    .dormora-list-detail__add .dormora-quick-add {
        position: static;
        margin: 0;
        padding: 0;
        background: none;
        box-shadow: none;
    }

/* The snackbar ("Milk bought · Undo") keeps clear of the pinned bar (4rem), as it does of a FAB. */
:root:has(.dormora-list-detail__add) {
    --dormora-fab-clearance: 4rem;
}

/* The pill (QuickAddBar Pill): one 44px rounded field, add at the start; the submit sits inside its end once there's text. */
.dormora-quick-add--pill {
    position: relative;
    display: flex;
    align-items: center;
}

    .dormora-quick-add--pill .dormora-quick-add__lead.rzi {
        position: absolute;
        inset-inline-start: 0.875rem;
        font-size: 1.25rem;
        color: var(--dormora-on-surface-variant);
        pointer-events: none;
    }

    .dormora-quick-add--pill .dormora-quick-add__input.rz-textbox {
        height: var(--dormora-touch-target);
        padding-inline: 2.625rem 3.25rem;
        border: none;
        border-radius: 22px;
        background: var(--rz-body-background-color);
        box-shadow: none;
    }

        .dormora-quick-add--pill .dormora-quick-add__input.rz-textbox:focus {
            outline: 2px solid var(--dormora-focus-ring);
            outline-offset: 0;
        }

    .dormora-quick-add--pill .dormora-quick-add__send.rz-button {
        position: absolute;
        inset-inline-end: 0.25rem;
        width: 2.25rem;
        min-width: 0;
        height: 2.25rem;
        padding: 0;
        border-radius: 50%;
    }

    .dormora-quick-add--pill:not(.dormora-quick-add--has-text) .dormora-quick-add__send {
        visibility: hidden;
    }

/* A pushed list: its title is in the bar, so the chips sit just under it (as Event detail's rows do). */
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-list-detail__chips) {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------------------
   P4U-034 — Budget on a phone (the mockup's Budget and Budget Insights). One chip row (the ledger chips, then the borderless
   month at the end), the position card in primary, flat rows led by a tonal circle, and the six-month chart.
   --------------------------------------------------------------------------------------- */
/* Pushed: the title is in the bar, so the chips sit just under it, as on a list. */
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-budget-chips) {
    margin-bottom: 0 !important;
}

.dormora-budget-chips .dormora-period-nav--chip {
    margin-inline-start: auto;
}

.dormora-period-nav--chip {
    flex: 0 0 auto;
    gap: 0;
    height: 2rem;
    color: var(--dormora-on-surface-variant);
}

    /* M4 polish: 1.5rem wide (its 48px hit area is the ::before below), so "‹ September ›" fits a 390px chip row after Mine and Household. */
    .dormora-period-nav--chip .dormora-period-nav__step.rz-button {
        min-width: 1.5rem;
        min-height: 2rem;
        width: 1.5rem;
        height: 2rem;
        padding: 0;
        color: inherit;
    }

    .dormora-period-nav--chip .dormora-period-nav__label {
        padding-inline: 0;
        font-size: 0.875rem;
        font-weight: 500;
    }

.dormora-budget-position {
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: 16px;
    background-color: var(--dormora-primary);
    color: var(--dormora-on-primary);
}

.dormora-budget-position__toggle {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-budget-position__toggle:focus-visible {
        outline: 2px solid var(--dormora-on-primary);
        outline-offset: 2px;
        border-radius: 4px;
    }

.dormora-budget-position__label {
    font-size: 0.75rem;
    opacity: 0.85;
}

.dormora-budget-position__amount {
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 2.125rem;
}

.dormora-budget-position__chevron.rzi {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: -0.25rem;
    font-size: 1.25rem;
    opacity: 0.85;
}

.dormora-budget-position__spent {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.5rem 0 0.375rem;
    font-size: 0.75rem;
}

.dormora-budget-position__bar {
    height: 6px;
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--dormora-on-primary) 25%, transparent);
    overflow: hidden;
}

    .dormora-budget-position__bar > span {
        display: block;
        height: 100%;
        border-radius: 3px;
        background-color: var(--dormora-tertiary-container);
    }

.dormora-budget-position__breakdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
}

    .dormora-budget-position__breakdown dt {
        opacity: 0.85;
    }

    .dormora-budget-position__breakdown dd {
        margin: 0;
        font-size: 0.875rem;
        font-weight: 600;
    }

.dormora-home__line--success {
    color: var(--dormora-success);
}

/* P4I-050 (MK-50): the position card's three figures as a headline over a number (Received, Spent, Saved so far), with each one's
   "of ..." line under it when the card is opened; desktop's four figures beside the card use .dormora-budget-figure below. */
.dormora-budget-position__subline {
    margin: 0.125rem 0 0;
    font-size: 0.75rem;
    opacity: 0.9;
}

.dormora-budget-position__figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    margin: 0.625rem 0 0;
    padding-top: 0.625rem;
    border-top: 1px solid color-mix(in srgb, var(--dormora-on-primary) 35%, transparent);
}

    .dormora-budget-position__figures dt {
        font-size: 0.75rem;
        opacity: 0.9;
    }

    .dormora-budget-position__figures dd {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
    }

        .dormora-budget-position__figures dd.dormora-budget-position__figure-note {
            font-size: 0.75rem;
            font-weight: 400;
            opacity: 0.9;
        }

/* P4I-050 (MK-50): the summary at the top of a Budget tab: the total and what it is, a bar, and two notes under it (desktop: one line). */
.dormora-tab-summary {
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    background-color: var(--dormora-surface-container);
}

.dormora-tab-summary__headline {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
}

.dormora-tab-summary__amount {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
}

.dormora-tab-summary__caption {
    font-size: 0.875rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-tab-summary__bar {
    height: 6px;
    margin: 0.5rem 0 0.375rem;
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--dormora-primary) 15%, transparent);
    overflow: hidden;
}

    .dormora-tab-summary__bar > span {
        display: block;
        height: 100%;
        border-radius: 3px;
        background-color: var(--dormora-primary);
    }

.dormora-tab-summary__notes {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-tab-summary--desk {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
}

    .dormora-tab-summary--desk .dormora-tab-summary__headline {
        flex: 0 0 auto;
    }

    .dormora-tab-summary--desk .dormora-tab-summary__amount {
        font-size: 1.125rem;
    }

    .dormora-tab-summary--desk .dormora-tab-summary__bar {
        flex: 1 1 8rem;
        margin: 0;
    }

    .dormora-tab-summary--desk .dormora-tab-summary__notes {
        flex: 0 0 auto;
        font-size: 0.875rem;
    }

/* The tabs sit right under the card; the rows start under the tabs. */
.dormora-shell--mobile .dormora-budget-position + .dormora-tabs,
.dormora-shell--mobile .dormora-budget-position + * {
    margin-top: 0 !important;
}

.dormora-budget-list .dormora-row--mobile .dormora-amount {
    font-size: 0.875rem;
}

/* Insights' rows: the amounts in one column, so the bars line up. */
.dormora-budget-list .dormora-row--mobile:has(.dormora-row__progress) .dormora-row__trailing {
    min-width: 5.5rem;
    justify-content: flex-end;
    text-align: end;
}

.dormora-budget-list .dormora-row__progress {
    width: 100%;
    height: 6px;
    border-radius: 3px;
}

/* Insights: "Last six months", income (primary) beside outgoings (tertiary) per month. */
.dormora-budget-chart {
    margin: 0.625rem 0 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: 16px;
    background-color: var(--dormora-surface-container);
}

.dormora-budget-chart__title {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

/* P4I-051 (R4-50; p-mk51-a, d-mk51-a): an amount scale (whole thousands) at the start, a line across the plot for each, each month a
   button (tap, hover or focus reads it) whose chosen one is tinted, its net under its label and a read-out of it below. */
.dormora-budget-chart {
    --dormora-chart-axis: 2.25rem;
}

.dormora-budget-chart__body {
    display: flex;
}

.dormora-budget-chart__axis {
    position: relative;
    flex: 0 0 var(--dormora-chart-axis);
}

    .dormora-budget-chart__axis > span {
        position: absolute;
        inset-inline-end: 0.375rem;
        transform: translateY(50%);
        font-size: 0.75rem;
        line-height: 1;
        color: var(--dormora-on-surface-variant);
    }

.dormora-budget-chart__plot {
    position: relative;
    flex: 1;
    min-width: 0;
}

.dormora-budget-chart__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

    .dormora-budget-chart__grid > i {
        position: absolute;
        inset-inline: 0;
        height: 1px;
        background-color: color-mix(in srgb, var(--dormora-outline-variant) 60%, transparent);
    }

.dormora-budget-chart__bars {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 110px;
    border-bottom: 1px solid var(--dormora-outline-variant);
}

.dormora-budget-chart__month {
    flex: 1;
    height: 100%;
    border-radius: 8px 8px 0 0;
}

.dormora-budget-chart__month--chosen {
    background-color: var(--dormora-surface-container-high);
}

.dormora-budget-chart__pick {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 0.25rem;
    border: 0;
    border-radius: 8px 8px 0 0;
    background: none;
    cursor: pointer;
}

    .dormora-budget-chart__pick:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 1px;
    }

    .dormora-budget-chart__pick > i {
        flex: 1;
        border-radius: 3px 3px 0 0;
    }

.dormora-budget-chart__in {
    background-color: var(--dormora-primary);
}

/* M4 gate fix: the tertiary container is a tint of the card (1.2 to 1.5:1 on it); Out is the tertiary itself, 4.4:1 on the light card and 8.9:1 on the dark. */
.dormora-budget-chart__out {
    background-color: var(--dormora-tertiary);
}

.dormora-budget-chart__labels {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.65625rem;
    color: var(--dormora-on-surface-variant);
}

    .dormora-budget-chart__labels > span {
        flex: 1;
        text-align: center;
    }

.dormora-budget-chart__labels,
.dormora-budget-chart__nets {
    padding-inline-start: var(--dormora-chart-axis);
}

.dormora-budget-chart__labels > .dormora-budget-chart__chosen {
    font-weight: 700;
    color: var(--dormora-primary);
}

.dormora-budget-chart__nets {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.125rem;
    color: var(--dormora-on-surface-variant);
}

    .dormora-budget-chart__nets > span {
        flex: 1;
        min-height: 1.125rem;
        text-align: center;
        white-space: nowrap; /* "+£1,549" stays on one line (P4I-090e gate fix 2) */
    }

.dormora-budget-chart__net--saved {
    color: var(--dormora-success);
}

.dormora-budget-chart__net--over {
    color: var(--dormora-error);
}

.dormora-budget-chart__read {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--dormora-outline-variant);
    font-size: 0.875rem;
    color: var(--dormora-on-surface);
}

    .dormora-budget-chart__read b {
        font-weight: 600;
    }

    .dormora-budget-chart__read .dormora-budget-chart__net {
        font-weight: 600;
    }

.dormora-budget-chart__hint {
    color: var(--dormora-on-surface-variant);
}

.dormora-budget-chart__legend {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    color: var(--dormora-on-surface-variant);
}

    .dormora-budget-chart__legend > span {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
    }

    .dormora-budget-chart__legend i {
        width: 0.625rem;
        height: 0.625rem;
        border-radius: 2px;
    }

/* P4I-060 (R5-88): BarChart's groups are plain slots when the chart can't be picked (the Diary's Last 7 days). A day's bar is the primary, amber (the warning
   colour, 3:1 against the card in both themes) when it is over a calorie target that is set; a day not logged has no bar. */
.dormora-budget-chart__pick--static {
    cursor: default;
}

.dormora-diary-chart__bar {
    background-color: var(--dormora-primary);
}

.dormora-diary-chart__bar--over {
    background-color: var(--dormora-warning);
}

/* ---------------------------------------------------------------------------------------
   P4U-035 — Meals and Workouts on a phone (the mockup's Meals, Recipe, Workouts and Workout plan). Meals' days as section
   labels over cards (a tertiary circle with the slot's icon, the slot line above the dish, the kcal or home), today's
   unplanned slots as dashed cards; the Recipe line and its two buttons; Workouts' Today card and plan rows; a plan's day
   chips and numbered exercises.
   --------------------------------------------------------------------------------------- */
.dormora-lead-circle--tertiary {
    background-color: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
}

.dormora-lead-circle__number {
    font-size: 0.875rem;
    font-weight: 600;
}

/* The week chip at the start of the row under the tabs. */
.dormora-meals-chips {
    padding-bottom: 0;
}

.dormora-meals-week .dormora-section-label {
    padding-inline: 0.125rem;
}

.dormora-swipe.dormora-meal-card {
    margin-bottom: 0.625rem;
    border-radius: 16px;
    overflow: hidden;
}

    .dormora-swipe.dormora-meal-card .dormora-row--mobile {
        align-items: center;
        gap: 0.75rem;
        min-height: 0;
        padding: 0.75rem 0.875rem;
        border: 0;
        border-radius: 16px;
        background-color: var(--dormora-surface-container);
    }

    /* The slot line sits above the dish, as in the mockup. */
    .dormora-swipe.dormora-meal-card .dormora-row__body {
        display: flex;
        flex-direction: column;
    }

    .dormora-swipe.dormora-meal-card .dormora-row__meta {
        order: -1;
        margin: 0;
    }

    .dormora-swipe.dormora-meal-card .dormora-row__title {
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.25rem;
    }

.dormora-meal-card__slot {
    font-size: 0.71875rem;
    line-height: 1rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-meal-card__kcal {
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--dormora-on-surface-variant);
}

.dormora-meal-card--plan {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 0.625rem;
    padding: 0.75rem 0.875rem;
    border: 1.5px dashed var(--dormora-outline);
    border-radius: 16px;
    background: transparent;
    color: var(--dormora-on-surface);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-meal-card--plan:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-meal-card__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dormora-meal-card__plan {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    color: var(--dormora-primary);
}

/* P4I-014 (MK-14 frame e): "From weeknightkitchen.example", a link out under the facts line. */
.dormora-recipe__source {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0.625rem;
    font-size: 0.75rem;
    line-height: 1rem;
    overflow-wrap: anywhere;
}

.dormora-recipe__source .rz-icon {
    font-size: 1rem;
    color: var(--dormora-primary);
}

.dormora-recipe__source a {
    color: var(--dormora-primary);
    font-weight: 500;
    text-decoration: none;
}

.dormora-recipe__source a:hover,
.dormora-recipe__source a:focus-visible {
    text-decoration: underline;
}

/* Recipe: the facts line, then "Add to a list" (tonal) and "Plan it" (outlined) side by side over the tabs. */
.dormora-recipe__line,
.dormora-recipe__description {
    margin: 0 0 0.625rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--dormora-on-surface-variant);
    overflow-wrap: anywhere;
}

.dormora-recipe__description {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--dormora-on-surface);
}

.dormora-recipe__actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

    .dormora-recipe__actions .rz-button {
        flex: 1 1 0;
        min-width: 0;
        min-height: 2.25rem;
        border-radius: 1.125rem;
        font-size: 0.8125rem;
    }

    .dormora-recipe__actions .dormora-recipe__tonal.rz-button {
        background-color: var(--dormora-primary-container);
        color: var(--dormora-on-primary-container);
    }

    .dormora-recipe__actions .dormora-recipe__outlined.rz-button {
        border: 1px solid var(--dormora-outline);
        background: transparent;
        color: var(--dormora-primary);
        box-shadow: none;
    }

.dormora-recipe__method {
    margin: 0.75rem 0;
    font-size: 0.875rem;
    line-height: 1.375rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dormora-recipe__nutrition {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

/* Workouts: the Today card's button in on-tertiary-container, and the plans' chevrons. */
.dormora-shell--mobile .dormora-workout-today {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    padding: 0.75rem 0.875rem;
    border-radius: 16px;
}

.dormora-shell--mobile .dormora-workout-today__label {
    font-size: 0.75rem;
    font-weight: 400;
}

.dormora-shell--mobile .dormora-workout-today__name {
    font-size: 0.9375rem;
}

.dormora-shell--mobile .dormora-workout-today > span:not(.dormora-workout-today__name) {
    font-size: 0.75rem;
}

.dormora-workout-today .rz-button.rz-base.dormora-workout-today__open {
    position: relative;
    min-height: 2.125rem;
    padding-inline: 1.25rem;
    border-radius: 1.0625rem;
    background-color: var(--dormora-on-tertiary-container);
    color: var(--dormora-tertiary-container);
}

.dormora-workouts__plans {
    padding-inline: 0.125rem;
}

.dormora-row__chevron.rzi {
    color: var(--dormora-on-surface-variant);
}

/* Workout plan: the day chips under the bar. */
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-workout-days) {
    margin-bottom: 0 !important;
}

/* The exercise sheet: sets and reps, then weight and rest, two to a row. */
.dormora-exercise-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

    .dormora-exercise-fields .rz-numeric {
        width: 100%;
    }

/* Meals is pushed and its tabs are first: they sit just under the bar. */
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-meals-tabs) {
    margin-bottom: 0 !important;
}

.dormora-shell--mobile .dormora-meals-tabs {
    margin-top: -0.5rem;
}

/* Recipe and Workouts are pushed with the title in the bar: their first line or card sits just under it. */
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-recipe__line),
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-workout-today),
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-workouts__plans) {
    margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------------------
   P4U-036 — Care on a phone (the mockup's Care). The profiles as a row of 52px tertiary circles with their names (like
   Stories; each opens its profile), then a dashed "Add"; the chips Due, Schedule and History; flat rows under "Luna ·
   today" labels. A profile's page: its circle and line under the bar, the notes, then the tabs.
   --------------------------------------------------------------------------------------- */
/* Pushed: the title is in the bar, so the profiles sit just under it. */
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-care-profiles) {
    margin-bottom: 0 !important;
}

.dormora-care-profiles {
    display: flex;
    gap: 0.875rem;
    margin-inline: calc(-1 * var(--rz-layout-body-padding, 1rem));
    padding: 0.25rem 1rem 0.75rem;
    overflow-x: auto;
    scrollbar-width: none;
}

    .dormora-care-profiles::-webkit-scrollbar {
        display: none;
    }

.dormora-care-profile {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    min-width: 3.5rem;
    max-width: 4.5rem;
    padding: 0.25rem 0 0;
    border: 0;
    background: none;
    color: var(--dormora-on-surface);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    text-decoration: none;
    cursor: pointer;
}

.dormora-care-profile__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
}

    .dormora-care-profile__avatar .rzi {
        font-size: 1.5rem;
    }

.dormora-care-profile__name {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dormora-care-profile--add {
    color: var(--dormora-on-surface-variant);
}

    .dormora-care-profile--add .dormora-care-profile__avatar {
        border: 1.5px dashed var(--dormora-on-surface-variant);
        background-color: transparent;
        color: var(--dormora-on-surface-variant);
    }

.dormora-care-profile:focus-visible {
    outline: none;
}

    .dormora-care-profile:focus-visible .dormora-care-profile__avatar {
        outline: 2px solid var(--dormora-primary);
        outline-offset: 4px;
    }

/* A profile's page: the circle and its line under the bar (pushed, so the title is in the bar). */
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-care-hero) {
    margin-bottom: 0 !important;
}

.dormora-care-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

    .dormora-care-hero__avatar {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
        background-color: var(--dormora-tertiary-container);
        color: var(--dormora-on-tertiary-container);
    }

        .dormora-care-hero__avatar .rzi {
            font-size: 1.75rem;
        }

    .dormora-care-hero__text {
        min-width: 0;
    }

    .dormora-care-hero__line,
    .dormora-care-hero__meta {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .dormora-care-hero__line {
        font-size: 0.875rem;
        line-height: 1.25rem;
        color: var(--dormora-on-surface);
    }

    .dormora-care-hero__meta {
        font-size: 0.8125rem;
        line-height: 1.25rem;
        color: var(--dormora-on-surface-variant);
    }

.dormora-care-hero__notes {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--dormora-on-surface-variant);
    overflow-wrap: anywhere;
}

.dormora-care-chips {
    padding-bottom: 0;
}

.dormora-care-pick {
    margin-inline: 0;
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4U-037 — Notes on a phone (the mockup's Notes and Note detail). Notes: outlined 14px tiles in two columns (or one) under
   "Pinned" and "Others": the title, three lines of text or the first items with their ticks, and home or description at
   the foot. Note detail: the title as a 22px field, the edited line, the text as a borderless field that grows, square-tick
   rows, "Add item" inline, bordered attachment rows, and "Saved" at the foot.
   --------------------------------------------------------------------------------------------------------------------- */
/* Pushed: the title is in the bar (or the page's own), so the chips and the note sit just under it. */
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-notes-chips),
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-note-page) {
    margin-bottom: 0 !important;
}

.dormora-note-section + .dormora-note-section {
    margin-top: 0.25rem;
}

.dormora-note-section .dormora-section-label {
    padding-inline: 0;
}

.dormora-note-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.5rem;
}

.dormora-note-tiles--one {
    grid-template-columns: minmax(0, 1fr);
}

.dormora-note-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 3.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 14px;
    color: var(--dormora-on-surface);
    text-decoration: none;
    overflow-wrap: anywhere;
}

    .dormora-note-tile:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 4%, transparent);
    }

    .dormora-note-tile:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-note-tile__title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
}

.dormora-note-tile__body {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1.125rem;
    color: var(--dormora-on-surface-variant);
    white-space: pre-line;
}

.dormora-note-tile__items {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.dormora-note-tile__item {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

    .dormora-note-tile__item .rzi {
        flex: 0 0 auto;
        font-size: 1rem;
        line-height: 1.125rem;
        color: var(--dormora-on-surface-variant);
    }

    .dormora-note-tile__item > span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.dormora-note-tile__item--done > span:last-child {
    text-decoration: line-through;
    color: var(--dormora-on-surface-variant);
}

.dormora-note-tile__more,
.dormora-note-tile__empty {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-note-tile__icons {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.25rem;
    color: var(--dormora-on-surface-variant);
}

    .dormora-note-tile__icons .rzi {
        font-size: 0.9375rem;
    }

/* Note detail */
.dormora-note-page {
    display: flex;
    flex-direction: column;
}

.dormora-note-page__title {
    width: 100%;
    margin: 0.25rem 0 0.125rem;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    font: inherit;
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: 500;
    color: var(--dormora-on-surface);
    overflow-wrap: anywhere;
}

.dormora-note-page__title:focus-visible,
.dormora-note-page__body:focus-visible {
    outline: 2px solid var(--dormora-focus-ring);
    outline-offset: 2px;
}

.dormora-note-page__meta {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--dormora-on-surface-variant);
}

    .dormora-note-page__meta .rzi {
        font-size: 0.875rem;
    }

.dormora-note-page__body {
    width: 100%;
    min-height: 8rem;
    field-sizing: content;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: none;
    resize: none;
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.5rem;
    color: var(--dormora-on-surface);
}

    .dormora-note-page__body::placeholder {
        color: var(--dormora-on-surface-variant);
    }

.dormora-note-page__text {
    font-size: 0.9375rem;
    line-height: 1.5rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* No FAB here, so no room kept for one under the items. */
.dormora-note-page__items.dormora-flat-list {
    margin-inline: -1rem;
    padding-bottom: 0;
}

.dormora-note-page__add .dormora-quick-add {
    margin: 0;
}

/* P4I-002i: a checklist's add field is fixed to the foot of the screen on a phone, as a list's add bar is
   (.dormora-list-detail__add): it never rides up with the page, so the attachments and the Saved line scroll clear above
   it (the page keeps 5.5rem of bottom padding for it). The bottom offset is the bottom navigation's when one shows
   (0 on a pushed screen, as the list's bar). */
.dormora-shell--mobile .dormora-note-page {
    padding-bottom: 5.5rem;
}

.dormora-shell--mobile .dormora-note-page__add {
    position: fixed;
    z-index: 2;
    inset-inline: 0;
    bottom: var(--dormora-bottom-nav-offset, 0px);
    margin: 0;
    padding: 0.5rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background-color: var(--rz-body-background-color);
}

    .dormora-note-page__add .dormora-quick-add--pill .dormora-quick-add__lead.rzi {
        inset-inline-start: 0.375rem;
    }

    .dormora-note-page__add .dormora-quick-add--pill .dormora-quick-add__input.rz-textbox {
        padding-inline-start: 2.25rem;
        background: none;
    }

.dormora-note-page__label {
    margin: 1rem 0 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: var(--dormora-on-surface-variant);
}

.dormora-note-attachment {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.25rem 0.5rem 0.625rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 12px;
}

.dormora-note-attachment__icon.rzi {
    flex: 0 0 auto;
    color: var(--dormora-primary);
}

.dormora-note-attachment__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

a.dormora-note-attachment__text:focus-visible {
    outline: 2px solid var(--dormora-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

.dormora-note-attachment__name {
    font-size: 0.8125rem;
    line-height: 1.125rem;
    overflow-wrap: anywhere;
}

.dormora-note-attachment__line {
    font-size: 0.6875rem;
    line-height: 1rem;
    color: var(--dormora-on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dormora-note-attachment__delete,
.dormora-note-page__add-attachment {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    color: var(--dormora-on-surface-variant);
    cursor: pointer;
}

.dormora-note-attachment__delete {
    flex: 0 0 auto;
    justify-content: center;
    width: var(--dormora-touch-target);
    height: var(--dormora-touch-target);
    margin-block: -0.5rem;
    padding: 0;
    border-radius: 50%;
}

.dormora-note-page__add-attachment {
    gap: 0.5rem;
    align-self: flex-start;
    min-height: var(--dormora-touch-target);
    padding: 0 0.375rem;
    font: inherit;
    font-size: 0.875rem;
    border-radius: 8px;
}

    .dormora-note-attachment__delete:focus-visible,
    .dormora-note-page__add-attachment:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-note-page__saved {
    min-height: 1rem;
    margin: 1rem 0 0;
    font-size: 0.71875rem;
    line-height: 1rem;
    text-align: center;
    color: var(--dormora-on-surface-variant);
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4U-038 — the Watchlist on a phone (the mockup's Watchlist). One screen: tabs for TV shows and Movies, the status chips, and
   rows led by a tonal 44 x 62 poster block (primary container for TV, tertiary container for films), with "+1 ep" tonal.
   --------------------------------------------------------------------------------------------------------------------- */
/* Pushed: the title is in the bar, so the tabs sit just under it. */
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-watchlist-tabs) {
    margin-bottom: 0 !important;
}

/* The three chips fit a 390px phone without scrolling, as in the mockup. */
.dormora-watchlist-chips {
    gap: 0.375rem;
    padding-top: 0.625rem;
}

    .dormora-watchlist-chips .dormora-chip {
        padding-inline: 0.625rem;
    }

/* "+1 ep" is tonal (the shared button is Radzen's grey Base). */
.dormora-watchlist .dormora-episode-button.rz-button.rz-base {
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

.dormora-poster {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 3.875rem;
    border-radius: 8px;
    background: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

.dormora-poster--movie {
    background: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
}

.dormora-watchlist .dormora-row--mobile {
    min-height: 5rem;
}

.dormora-watchlist .dormora-row__progress,
.dormora-watchlist .rz-progressbar {
    max-width: 7.5rem;
}

/* ---------------------------------------------------------------------------------------
   P4U-039 — the household on a phone (the mockup's Chat and announcements, Members and invites, Household settings).
   --------------------------------------------------------------------------------------- */

/* Chat: the pinned announcement as a warning-container banner, names above runs, rounded bubbles, the round send. */
.dormora-chat__pinned {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0.375rem 0 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 12px;
    background: var(--dormora-warning-container); /* P4I-017c: the warning roles (was Radzen's wash and #6b3f00) */
    color: var(--dormora-on-warning-container);
    font: inherit;
    font-size: 0.75rem;
    text-align: start;
    cursor: pointer;
}

    .dormora-chat__pinned .rzi {
        flex: 0 0 auto;
        font-size: 1.125rem;
    }

    .dormora-chat__pinned strong {
        font-weight: 600;
    }

.dormora-chat__pinned-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dormora-chat__row--run {
    flex-direction: column;
    align-items: flex-start;
}

    .dormora-chat__row--run.is-mine {
        align-items: flex-end;
    }

    .dormora-chat__row--run.starts-run {
        margin-top: 0.25rem;
    }

.dormora-chat__who {
    margin: 0 0 0.125rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--dormora-on-surface-variant);
}

.dormora-chat__row--run .dormora-chat__bubble {
    max-width: 78%;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 18px 18px 18px 6px;
    background: var(--dormora-surface-container-high);
    color: var(--rz-text-color);
    font: inherit;
    text-align: start;
}

.dormora-chat__row--run.is-mine .dormora-chat__bubble {
    border-radius: 18px 18px 6px 18px;
    background: var(--dormora-primary);
    color: var(--dormora-on-primary);
}

    .dormora-chat__row--run.is-mine .dormora-chat__bubble .dormora-chat__meta {
        color: inherit;
        opacity: 0.8;
    }

/* P1U-052's dark bubbles set every bubble's background; a phone's own are primary, with on-primary text, in dark too. */
:root[data-theme="dark"] .dormora-chat__row--run.is-mine .dormora-chat__bubble {
    background-color: var(--dormora-primary);
}

.dormora-chat__bubble--actionable {
    cursor: pointer;
}

    .dormora-chat__bubble--actionable:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-chat__row--run .dormora-chat__meta {
    font-size: 0.6875rem;
}

/* P4I-002d: on phones the FAB floats above the composer (nav + 5.75rem up, 3.5rem tall: its top is nav + 9.25rem). The
   composer is 4rem tall under 1rem of body padding, with 0.5rem above it, so the thread keeps 4.5rem below it: the newest
   row ends at nav + 10rem, 0.75rem clear of the FAB. Auto-scroll lands the row on the same line. */
.dormora-shell--mobile .dormora-chat__thread {
    gap: 0.375rem;
    margin-bottom: 4.5rem;
}

.dormora-shell--mobile .dormora-chat__row {
    scroll-margin-bottom: calc(var(--dormora-bottom-nav-offset) + 10rem + var(--dormora-chat-reply-bar, 0rem));
}

/* The composer sits at the foot of the screen even when the chat is short (the bar, the tabs and the padding above it). */
.dormora-shell--mobile .dormora-chat:has(.dormora-quick-add--chat) {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 10.125rem - var(--dormora-bottom-nav-offset, 0px));
}

    .dormora-shell--mobile .dormora-chat .dormora-quick-add--chat {
        margin-top: auto;
    }

/* The composer: pinned to the bottom of the screen, a 44px rounded field and a 44px round primary send. */
.dormora-quick-add--chat {
    position: sticky;
    bottom: -1rem;
    z-index: 2;
    gap: 0.5rem;
    margin: 0.5rem -1rem 0;
    padding: 0.5rem 0.625rem 0.75rem;
    background-color: var(--rz-body-background-color);
}

    .dormora-quick-add--chat .dormora-quick-add__input.rz-textbox {
        height: var(--dormora-touch-target);
        padding-inline: 1rem;
        border: none;
        border-radius: 22px;
        background: var(--dormora-surface-container);
        box-shadow: none;
        text-overflow: ellipsis; /* P4I-090e gate fix 3b (C3): a long placeholder ends in an ellipsis at 390px */
    }

        .dormora-quick-add--chat .dormora-quick-add__input.rz-textbox:focus {
            outline: 2px solid var(--dormora-focus-ring);
            outline-offset: 0;
        }

    .dormora-quick-add--chat .dormora-quick-add__round.rz-button {
        flex: 0 0 auto;
        width: var(--dormora-touch-target);
        min-width: 0;
        height: var(--dormora-touch-target);
        padding: 0;
        border-radius: 50%;
    }

:root:has(.dormora-quick-add--chat) {
    --dormora-fab-clearance: 4rem;
}

/* Tabs under the bar, as the mockup's (no page title row on a pushed screen). */
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-communication-tabs),
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-members),
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-household-settings) {
    margin-bottom: 0 !important;
}

/* Members and invites: the invite card, then flat rows led by an avatar. */
.dormora-members,
.dormora-household-settings {
    margin-inline: calc(-1 * var(--rz-layout-body-padding, 1rem));
}

    .dormora-members .dormora-flat-list {
        margin-inline: 0;
        padding-bottom: 0;
    }

    .dormora-members .dormora-settings-note,
    .dormora-household-settings .dormora-settings-note {
        margin: 0.25rem 1rem 0.5rem;
        font-size: 0.75rem;
    }

.dormora-invite-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 1rem 0.25rem;
    padding: 0.875rem 1rem;
    border-radius: 16px;
    background: var(--dormora-surface-container);
}

.dormora-invite-card__icon.rzi {
    flex: 0 0 auto;
    color: var(--dormora-primary);
}

.dormora-invite-card__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-invite-card__title {
    font-weight: 600;
}

.dormora-invite-card__summary {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-invite-card__button.rz-button {
    flex: 0 0 auto;
    height: 2.125rem;
    padding-inline: 0.875rem;
    border-radius: 17px;
}

.dormora-member-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
    background: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    font-size: 0.8125rem;
    font-weight: 600;
}

    .dormora-member-avatar .rzi {
        font-size: 1.125rem;
    }

.dormora-member-avatar--other {
    background: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
}

.dormora-member-avatar--guest {
    background: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface-variant);
}

.dormora-members .dormora-row__chevron {
    color: var(--dormora-on-surface-variant);
}

/* "Jobs done this month" (P4I-022, MK-22): the section head with its month stepper, and each member's plain count. */
.dormora-chore-counts {
    margin-top: 0.75rem;
}

.dormora-chore-counts__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-inline-end: 0.75rem;
}

.dormora-month-step {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.8125rem;
}

.dormora-month-step__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dormora-on-surface-variant);
    cursor: pointer;
}

    .dormora-month-step__button:disabled {
        opacity: 0.38;
        cursor: default;
    }

    .dormora-month-step__button:focus-visible {
        outline: 2px solid var(--rz-primary);
        outline-offset: -2px;
    }

.dormora-member-avatar--small {
    width: 1.875rem;
    height: 1.875rem;
    font-size: 0.6875rem;
}

.dormora-chore-row__count {
    min-width: 1.75rem;
    text-align: end;
    font-size: 1.25rem;
    font-weight: 600;
}

.dormora-chore-note {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-chore-sheet {
    padding: 0 1rem 1rem;
}

.dormora-chore-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.5rem 2rem;
    max-width: 40rem;
}

    .dormora-chore-breakdown > .dormora-chore-note {
        grid-column: 1 / -1;
    }

.dormora-chore-group__label {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dormora-on-surface-variant);
}

.dormora-chore-group__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dormora-chore-job {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--dormora-outline-variant);
}

.dormora-chore-job__times {
    flex: 0 0 auto;
    color: var(--dormora-on-surface-variant);
    font-size: 0.8125rem;
}

/* Tasks' Household chip: the one-line summary that opens Members (P4I-022, p-mk22-c). */
.dormora-chore-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: calc(100% - 1.75rem);
    margin: 0 0.875rem 0.375rem;
    padding: 0.625rem 0.75rem;
    border: 0;
    border-radius: 14px;
    background: var(--dormora-surface-container);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-chore-summary:focus-visible {
        outline: 2px solid var(--rz-primary);
        outline-offset: 2px;
    }

.dormora-chore-summary__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-chore-summary__title {
    font-size: 0.8125rem;
    font-weight: 500;
}

.dormora-chore-summary__detail {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

/* Household settings: flat grouped rows (an M3 list), the destructive one in the error colour. */
.dormora-settings-list--flat {
    border-radius: 0;
    background: none;
    box-shadow: none;
}

    .dormora-settings-list--flat li + li {
        border-top: 0;
    }

    .dormora-settings-list--flat .dormora-settings-list__row {
        width: 100%;
        border: 0;
        background: none;
        font: inherit;
        text-align: start;
        cursor: pointer;
    }

    .dormora-settings-list--flat div.dormora-settings-list__row {
        cursor: default;
    }

    .dormora-settings-list--flat .dormora-settings-list__title {
        font-weight: 400;
    }

.dormora-settings-list__row--danger .dormora-settings-list__title {
    color: var(--dormora-error);
}

.dormora-roles-sheet .dormora-role-summary {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------------------
   P4U-040 — Settings (the mockup's Settings): flat groups to the screen's edges on a phone, module switches led by their
   area's icon, "N more" in primary, the mark on About's row, and About itself. P4U-079 (a): the Theme sheet's choices
   carry a line each.
   --------------------------------------------------------------------------------------- */

.dormora-shell--mobile .dormora-page-header:has(+ .dormora-settings),
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-help) {
    margin-bottom: 0 !important;
}

.dormora-settings,
.dormora-help {
    margin-inline: calc(-1 * var(--rz-layout-body-padding, 1rem));
}

    .dormora-settings .dormora-settings-note {
        margin: 0.5rem 1rem;
        font-size: 0.75rem;
    }

    .dormora-settings .dormora-settings-modules {
        padding-inline: 1rem;
    }

.dormora-settings-list__mark {
    width: 1.5rem;
    height: auto;
}

.dormora-setting-row--icon {
    justify-content: flex-start;
}

    .dormora-setting-row--icon .dormora-setting-row__text {
        flex: 1 1 auto;
    }

    .dormora-setting-row--icon + .dormora-setting-row,
    .dormora-settings-modules .dormora-setting-row + .dormora-setting-row {
        border-top: 0;
    }

.dormora-setting-row__icon.rzi {
    flex: 0 0 auto;
    color: var(--dormora-on-surface-variant);
}

.dormora-settings-modules__more {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: var(--dormora-touch-target);
    padding: 0;
    border: 0;
    background: none;
    color: var(--dormora-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-settings-modules__more .rzi {
        color: var(--dormora-on-surface-variant);
    }

    .dormora-settings-modules__more:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
        border-radius: 8px;
    }

.dormora-setting-row--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.dormora-menu-sheet__text {
    display: flex;
    flex-direction: column;
}

.dormora-menu-sheet__description {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--dormora-on-surface-variant);
}

.dormora-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1.5rem 1rem;
    text-align: center;
}

.dormora-about__logo {
    width: 10rem;
    max-width: 60%;
    height: auto;
    margin-bottom: 0.75rem;
}

.dormora-about__version,
.dormora-about__build,
.dormora-about__tagline {
    margin: 0;
}

/* P4I-T04 (R2-61): the build line under the version, smaller and quieter (p-t04-a, d-t04-a). */
.dormora-about__build {
    color: var(--dormora-on-surface-variant);
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.dormora-about__version {
    color: var(--dormora-on-surface);
}

.dormora-about__tagline {
    color: var(--dormora-on-surface-variant);
}

.dormora-about__help {
    display: inline-flex;
    align-items: center;
    min-height: var(--dormora-touch-target);
    margin-top: 0.5rem;
    color: var(--dormora-primary);
}

/* ---------------------------------------------------------------------------------------
   P4U-072 — Help and feedback (the mockup's Help): Getting started as a primary-container card with the mark, flat guide
   rows, a guide's paragraphs, Questions people ask opening in place, and the feedback sheet's chips.
   --------------------------------------------------------------------------------------- */

.dormora-help-start {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 1rem 0.25rem;
    padding: 0.875rem 1rem;
    border-radius: 16px;
    background: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    text-decoration: none;
}

    .dormora-help-start:hover,
    .dormora-help-start:focus-visible {
        color: var(--dormora-on-primary-container);
        text-decoration: none;
        background: color-mix(in srgb, var(--dormora-on-primary-container) 8%, var(--dormora-primary-container));
    }

    .dormora-help-start:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-help-start__mark {
    flex: 0 0 auto;
    width: 2.125rem;
    height: auto;
}

.dormora-help-start__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-help-start__title {
    font-weight: 600;
}

.dormora-help-start__summary {
    font-size: 0.75rem;
}

.dormora-help-start__chevron.rzi {
    flex: 0 0 auto;
}

.dormora-help-guide {
    max-width: 40rem;
}

.dormora-help-guide__summary {
    margin: 0 0 1rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-help-guide__heading {
    margin: 1.25rem 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dormora-on-surface);
}

.dormora-help-guide__text {
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.dormora-help-questions {
    max-width: 40rem;
}

.dormora-help-question {
    border-bottom: 1px solid var(--dormora-outline-variant, var(--rz-base-200));
}

.dormora-help-question__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--dormora-touch-target);
    padding-block: 0.5rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

    .dormora-help-question__q::-webkit-details-marker {
        display: none;
    }

    .dormora-help-question__q:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
        border-radius: 4px;
    }

.dormora-help-question__chevron.rzi {
    flex: 0 0 auto;
    color: var(--dormora-on-surface-variant);
    transition: transform 0.2s ease;
}

.dormora-help-question[open] .dormora-help-question__chevron.rzi {
    transform: rotate(180deg);
}

.dormora-help-question__a {
    margin: 0 0 0.75rem;
    line-height: 1.5;
    color: var(--dormora-on-surface-variant);
}

@media (prefers-reduced-motion: reduce) {
    .dormora-help-question__chevron.rzi {
        transition: none;
    }
}

.dormora-form.dormora-feedback .dormora-setting-row {
    border-top: 0;
}

/* The sheet's text starts at the edge (the dialog centres by default), and its three chips wrap rather than scroll: at
   390 px "Other" would otherwise be cut off. P4U-041: on the form only; EmptyState and LoadingState share the
   .dormora-feedback class, and a bare rule here left-aligned every empty state's line. */
.dormora-form.dormora-feedback {
    text-align: start;
}

    .dormora-form.dormora-feedback .dormora-feedback__kinds {
        flex-wrap: wrap;
        overflow-x: visible;
        margin-bottom: 0;
        padding-block: 0;
    }

/* P4U-051 (G21, UC-M.15.2): Home's "Get set up" checklist, as the onboarding mockup's first Home: a card on the surface
   container with the title, "3 of 5" and close, a progress bar, then each item with a round tick (filled when done, its label
   quiet) or, still to do, a link with a chevron; Getting started under it. Phones: above Today, inside the page's padding.
   Desktop: in At a glance's place, at the width of the mockup's side column. */
.dormora-setup {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-surface-container);
    color: var(--dormora-on-surface);
}

.dormora-shell:not(.dormora-shell--mobile) .dormora-setup {
    max-width: 22rem;
    padding: 1rem 1.125rem;
}

.dormora-home__setup {
    /* The card sits on the column's edge, where the greeting and the banners start (it was inset a second 1rem). */
    padding: 0 0 0.5rem;
}

.dormora-setup__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.dormora-setup__heading {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 600;
}

.dormora-setup__count {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-setup__close.rz-button {
    min-width: var(--dormora-touch-target);
    min-height: var(--dormora-touch-target);
    margin: -0.5rem -0.75rem -0.5rem 0;
    color: var(--dormora-on-surface-variant);
}

.dormora-setup .dormora-setup__bar {
    display: block;
    width: 100%;
    margin: 0 0 0.5rem;
}

.dormora-setup__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dormora-setup__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--dormora-touch-target);
    color: var(--dormora-on-surface);
    font-size: 0.875rem;
    text-decoration: none;
}

    a.dormora-setup__item:hover {
        color: var(--dormora-primary);
        text-decoration: none;
    }

    a.dormora-setup__item:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
        border-radius: 0.5rem;
    }

.dormora-setup__item--done {
    color: var(--dormora-on-surface-variant);
}

.dormora-setup__label {
    flex: 1 1 auto;
}

.dormora-setup__tick {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--dormora-on-surface-variant);
    border-radius: 50%;
}

.dormora-setup__tick--done {
    border-color: var(--dormora-primary);
    background-color: var(--dormora-primary);
    color: var(--dormora-on-primary);
}

    .dormora-setup__tick--done .rzi {
        font-size: 0.875rem;
    }

.dormora-setup__chevron.rzi {
    font-size: 1.125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-setup__help {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

    .dormora-setup__help a {
        color: var(--dormora-primary);
        font-weight: 600;
    }

/* P4U-051 (UC-M.6.6): the one-time swipe tip under the first swipeable task row: the snackbar's inverse surface, inset to
   the page's padding, "Got it" in the inverse primary. */
.dormora-swipe-tip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 1rem 0.25rem;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-inverse-surface);
    color: var(--dormora-inverse-on-surface);
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.dormora-swipe-tip__icon.rzi {
    font-size: 1.125rem;
}

.dormora-swipe-tip__text {
    flex: 1 1 auto;
    padding-block: 0.5rem;
}

/* P4I-M7 gate fix 6 (p-mk31-c/f dark): the tip's inverse surface is light grey in dark, and a sheet's scrim turned it dull with a low-contrast "Got it"; it stays out of sight
   (its place held) while a sheet or dialog is open, and is back, in its own colours, when that closes. */
html:has(.rz-dialog-wrapper) .dormora-swipe-tip {
    visibility: hidden;
}

.dormora-swipe-tip__action.dormora-snackbar__action {
    font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4I-080 (MK-80) — global quick add. The sheet (phone) and the panel under the top bar's "+" (desktop) share one content: a
   highlighted box, kind chips, "Who's it for", a preview line saying what will be saved, and Cancel / Add. The hold tip (p-mk80-e)
   is the swipe tip's inverse surface above the FAB; the "+" is the deskbar's round primary button (d-mk80-a).
   --------------------------------------------------------------------------------------------------------------------- */
.dormora-addsheet {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.dormora-addsheet__box {
    --rz-input-border: 2px solid var(--dormora-primary);
    --rz-input-border-radius: 0.875rem;
    min-width: 0;
}

    .dormora-addsheet__box .dormora-read-title__field .rz-textbox {
        min-height: 2.875rem;
        border-radius: 0.875rem;
    }

.dormora-addsheet__kinds .dormora-choice-chips {
    gap: 0.3125rem;
}

.dormora-addsheet__note {
    margin: 0;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

/* "Who's it for" on one line: the icon, the label and the segmented choice at the end (the frame's row). */
.dormora-addsheet__who .dormora-form-row {
    align-items: center;
}

.dormora-addsheet__who .dormora-form-row__body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    white-space: nowrap;
}

.dormora-addsheet__who .dormora-form-row__icon {
    line-height: 1.5rem;
}

.dormora-addsheet__preview {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5625rem 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-surface-container);
    font-size: 0.8125rem;
}

/* P4I-M7 gate fix 4 (p-mk80-a/b/c dark): the sheet is the container colour in dark, so the preview card takes the next step up. */
:root[data-theme="dark"] .dormora-addsheet__preview {
    background-color: var(--dormora-surface-container-high);
}

.dormora-addsheet__preview-icon.rzi {
    flex: none;
    color: var(--dormora-primary);
}

.dormora-addsheet__preview--hint .dormora-addsheet__preview-icon.rzi {
    color: var(--dormora-on-surface-variant);
}

.dormora-addsheet__preview-text {
    flex: 1 1 auto;
    min-width: 0;
}

.dormora-addsheet__preview-title {
    overflow-wrap: anywhere;
}

.dormora-addsheet__preview-line {
    font-size: 0.71875rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-addsheet__more {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--dormora-touch-target);
    padding: 0 0.5rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--dormora-primary);
    font: inherit;
    font-size: 0.78125rem;
    font-weight: 600;
    cursor: pointer;
}

    .dormora-addsheet__more:disabled {
        opacity: 0.6;
        cursor: default;
    }

    .dormora-addsheet__more:focus-visible,
    .dormora-addsheet__link:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-addsheet__lists {
    padding-inline: 0.75rem;
}

.dormora-addsheet__link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: var(--dormora-touch-target);
    padding: 0 0.5rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--dormora-primary);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

    .dormora-addsheet__link .rzi {
        font-size: 1.125rem;
    }

.dormora-addsheet__keys {
    margin-inline-end: auto;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-kbd {
    display: inline-block;
    padding: 0 0.375rem;
    border: 1px solid var(--dormora-outline-variant);
    border-bottom-width: 2px;
    border-radius: 0.3125rem;
    font: inherit;
    font-size: 0.71875rem;
    color: var(--dormora-on-surface-variant);
}

/* The panel (desktop): a Radzen dialog presented under the top bar's "+", right-aligned, with no dimming; a click outside closes it. */
.dormora-dialog-wrapper--addsheet .rz-dialog-mask {
    background-color: transparent;
    animation: none;
}

.rz-dialog.dormora-dialog.dormora-dialog--addsheet {
    position: absolute;
    inset: 4.25rem 7.5rem auto auto;
    margin: 0;
    max-width: calc(100vw - 2rem);
    border-radius: 1.25rem;
}

.dormora-dialog--addsheet .rz-dialog-titlebar {
    padding: 1rem 1.125rem 0.25rem;
}

.dormora-dialog--addsheet .rz-dialog-title {
    font-size: 1.0625rem;
    font-weight: 500;
}

.dormora-dialog--addsheet .rz-dialog-content {
    --dormora-dialog-pad-inline: 1.125rem;
    padding: 0.5rem 1.125rem 1rem;
}

/* "N from anywhere" sits on the title's line, before the close button. */
.dormora-dialog--addsheet .dormora-addsheet__hint {
    position: absolute;
    inset: 1.1rem 3.75rem auto auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-deskbar__add,
.rz-header .dormora-deskbar__add {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    margin-inline-end: 0.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--dormora-primary);
    color: var(--dormora-on-primary);
    cursor: pointer;
}

    .dormora-deskbar__add:hover {
        background-color: color-mix(in srgb, var(--dormora-primary) 88%, var(--dormora-on-primary));
    }

    .dormora-deskbar__add:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

    .dormora-deskbar__add .rzi {
        color: inherit;
    }

.dormora-addtip {
    position: fixed;
    inset-inline: 0.75rem;
    bottom: calc(var(--dormora-bottom-nav-offset) + 1rem + 3.5rem + 0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 102;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-inverse-surface);
    color: var(--dormora-inverse-on-surface);
    font-size: 0.78125rem;
    line-height: 1.125rem;
}

.dormora-addtip__icon.rzi {
    font-size: 1.125rem;
}

.dormora-addtip__text {
    flex: 1 1 auto;
    padding-block: 0.5rem;
}

.dormora-addtip__action.dormora-snackbar__action {
    font-weight: 600;
}

/* A held FAB must not select its label or raise the browser's long-press menu. */
.dormora-fab[data-hold-add] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4U-074 — Search (the mockups' Search, D-086). The phone's field fills the pushed bar (Back, then a round tonal field);
   desktop's is the mockup's centred 640px pill with its dropdown of quick results under it. Matched words are bold.
   --------------------------------------------------------------------------------------------------------------------- */
.dormora-topbar__content {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 0.25rem 0.5rem;
}

.dormora-search-input {
    display: flex;
    align-items: center;
    height: 2.5rem;
    border-radius: 1.25rem;
    background-color: var(--dormora-surface-container-high);
    padding-inline: 1rem 0.25rem;
}

.dormora-search-input__field,
.dormora-search-field__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--dormora-on-surface);
    /* 16px, so a phone doesn't zoom in on focus. */
    font: inherit;
    font-size: 1rem;
}

    .dormora-search-input__field::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

    .dormora-search-input__field::placeholder,
    .dormora-search-field__input::placeholder {
        color: var(--dormora-on-surface-variant);
    }

.dormora-search-input:focus-within,
.dormora-search-field__box:focus-within {
    outline: 2px solid var(--dormora-primary);
    outline-offset: -2px;
}

/* P4U-080: focused, the bar's field turns to the surface inside its ring (the mockup's Search). */
.dormora-search-field__box:focus-within {
    background-color: var(--dormora-surface);
}

.dormora-search-input__clear,
.dormora-search-field__clear {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--dormora-touch-target);
    height: var(--dormora-touch-target);
    margin-block: -0.25rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--dormora-on-surface-variant);
    cursor: pointer;
}

.dormora-search-field {
    position: relative;
    width: 100%;
    max-width: 40rem;
}

.dormora-search-field__box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 2.875rem;
    border-radius: 1.4375rem;
    background-color: var(--dormora-surface-container-high);
    padding-inline: 1.125rem 0.25rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-search-field__dropdown {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 70vh;
    overflow-y: auto;
    padding-block: 0.5rem;
    border-radius: 1rem;
    background-color: var(--dormora-surface);
    box-shadow: var(--dormora-dialog-shadow);
}

.dormora-search-field__group {
    padding: 0.375rem 1.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dormora-on-surface-variant);
}

.dormora-search-field__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--dormora-touch-target);
    padding: 0.5rem 1.125rem;
    color: var(--dormora-on-surface);
    cursor: pointer;
}

    .dormora-search-field__option .rzi {
        color: var(--dormora-on-surface-variant);
    }

.dormora-search-field__option--active,
.dormora-search-field__option:hover,
.dormora-search-field__all:hover {
    background-color: var(--dormora-surface-container-high);
}

.dormora-search-field__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dormora-search-field__meta {
    flex: none;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-search-field__all {
    margin-top: 0.25rem;
    padding: 0.625rem 1.125rem 0.375rem;
    border-top: 1px solid var(--dormora-outline-variant);
    color: var(--dormora-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
}

.dormora-search-field__note {
    padding: 0.75rem 1.125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-search__match {
    font-weight: 700;
}

.dormora-search__link {
    color: inherit;
    text-decoration: none;
}

.dormora-search__group + .dormora-search__group {
    margin-top: 0.5rem;
}

/* The mockup's rows: the title in regular weight, so the matched words stand out in bold. */
.dormora-search__results .dormora-row__title {
    font-weight: 400;
}

/* A pushed screen: the chips sit just under the bar. */
.dormora-shell--mobile .dormora-page-header:has(+ .dormora-search__status) {
    margin-bottom: 0 !important;
}

.dormora-search__more,
.dormora-search__failed {
    margin: 0.5rem 1rem;
    font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4U-060 — the mobile gate's walkthrough: every phone tap target is at least 48px (--dormora-touch-target). These were
   smaller than the token: the chip-sized period steps (a 48px hit area around the 32px button), Today's workout button, the
   chat's pinned banner, page dropdowns, the search field, Task detail's tick and Note detail's title field.
   --------------------------------------------------------------------------------------------------------------------- */
.dormora-period-nav--chip .dormora-period-nav__step.rz-button {
    position: relative;
}

    .dormora-period-nav--chip .dormora-period-nav__step.rz-button::before {
        content: "";
        position: absolute;
        inset: -0.5rem -0.75rem;
    }

.dormora-chat__pinned,
.dormora-note-page__title,
.dormora-shell--mobile .dormora-page .rz-dropdown {
    min-height: var(--dormora-touch-target);
}

.dormora-search-input {
    height: var(--dormora-touch-target);
    border-radius: calc(var(--dormora-touch-target) / 2);
}

    .dormora-search-input__field {
        align-self: stretch;
    }

.dormora-task-detail__tick.rz-chkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--dormora-touch-target);
    min-height: var(--dormora-touch-target);
}

/* The mockup's 34px "Open plan" pill keeps its look; its hit area is 48px. */
.dormora-workout-today .rz-button.dormora-workout-today__open::before {
    content: "";
    position: absolute;
    inset: -0.4375rem 0;
}

/* ---------------------------------------------------------------------------------------
   P4U-080 — the desktop top bar (UC-M.D1) and the avatar's menu. Three columns, the outer two the same width so the
   search is centred on the window: 264 px from 1280 (the drawer's 248 plus its gutter), 200 px on the rail (the mockup's
   "Rail at 1024"). The logo is the full one from 1280 and the mark below, each with its light version in dark mode.
   --------------------------------------------------------------------------------------- */

/* A logo's light-mode (navy) or dark-mode (off-white) version: the navy is 10.3:1 on the light surface but 1.7:1 on the
   dark one; the off-white is 16.7:1 there. */
:root[data-theme="dark"] .dormora-on-light,
:root:not([data-theme="dark"]) .dormora-on-dark {
    display: none !important;
}

/* Flat on the page's surface, as the phone's bar: no Radzen header shadow. */
.dormora-shell:not(.dormora-shell--mobile) .rz-header {
    box-shadow: none;
}

.dormora-deskbar {
    --dormora-deskbar-side: 16.5rem;
    display: grid;
    grid-template-columns: var(--dormora-deskbar-side) minmax(0, 1fr) var(--dormora-deskbar-side);
    align-items: center;
    width: 100%;
    min-height: 4rem;
    padding-inline: 0.5rem;
}

.dormora-deskbar__start,
.dormora-deskbar__end {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.dormora-deskbar__end {
    justify-content: flex-end;
}

.dormora-deskbar__search {
    display: flex;
    justify-content: center;
    min-width: 0;
    padding-inline: 1rem;
}

.dormora-deskbar__logo {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 0.5rem;
}

    .dormora-deskbar__logo img {
        display: block;
        height: auto;
    }

    .dormora-deskbar__logo .dormora-deskbar__logo-full {
        width: 7.5rem;
    }

    .dormora-deskbar__logo .dormora-deskbar__logo-mark {
        display: none;
        width: 2.25rem;
    }

@media (max-width: 1279.98px) {
    .dormora-deskbar {
        --dormora-deskbar-side: 12.5rem;
    }

    .dormora-deskbar__logo .dormora-deskbar__logo-full {
        display: none;
    }

    .dormora-deskbar__logo .dormora-deskbar__logo-mark {
        display: block;
    }
}

/* The menu button and Help: plain icon buttons on the light bar (the bell is the phone's text button). Radzen's
   ".rz-header a" is on-primary, so the link's colour is set here. */
.dormora-deskbar__icon,
.rz-header a.dormora-deskbar__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dormora-on-surface-variant);
    text-decoration: none;
    cursor: pointer;
}

    .dormora-deskbar__icon:hover,
    .dormora-deskbar__account:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
    }

.dormora-deskbar__icon:focus-visible,
.dormora-deskbar__account:focus-visible,
.dormora-menu__item:focus-visible {
    outline: 2px solid var(--dormora-focus-ring);
    outline-offset: 2px;
}

.dormora-deskbar .dormora-notifications-button .rz-button {
    color: var(--dormora-on-surface-variant);
}

/* P4U-080, P4U-081: the anchored menu (AnchoredMenu): under its button, start-aligned, or end-aligned at the window's edge. */
.dormora-menu {
    position: relative;
    display: flex;
}

.dormora-deskbar__account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-inline-start: 0.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

.dormora-menu__scrim {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.dormora-menu__popup {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 1001;
    min-width: 17.5rem;
    max-width: 22rem;
    padding-block: 0.5rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-surface-container);
    color: var(--dormora-on-surface);
    box-shadow: var(--dormora-dialog-shadow);
}

    .dormora-menu__popup--end {
        right: 0;
        left: auto;
    }

.dormora-menu__item,
.rz-header a.dormora-menu__item,
.rz-sidebar a.dormora-menu__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.5rem 1rem;
    border: 0;
    background: none;
    color: var(--dormora-on-surface);
    font: inherit;
    font-size: 0.875rem;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

    .dormora-menu__item:hover,
    .dormora-menu__item:focus-visible {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
        text-decoration: none;
    }

    .dormora-menu__item .rzi {
        color: var(--dormora-on-surface-variant);
    }

.dormora-account-menu__person {
    padding-block: 0.75rem;
}

.dormora-account-menu__person-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dormora-account-menu__name {
    font-size: 1rem;
    font-weight: 600;
}

.dormora-account-menu__email {
    overflow: hidden;
    color: var(--dormora-on-surface-variant);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dormora-menu__divider {
    margin-block: 0.5rem;
    border-top: 1px solid var(--dormora-outline-variant);
}

@media (prefers-reduced-motion: no-preference) {
    .dormora-menu__popup {
        animation: dormora-menu-in 120ms var(--dormora-dialog-easing, ease-out);
    }
}

@keyframes dormora-menu-in {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }
}

/* ---------------------------------------------------------------------------------------
   P4U-081 — the navigation drawer (UC-M.D2): 264 px (the mockup's "about 248", widened to the top bar's left column so the
   two line up and "Chat and announcements" fits), on the page's surface, no border; the household line, then flat
   items with the M3 indicator (the bottom bar's selected colours, a filled icon) and count badges at their end.
   --------------------------------------------------------------------------------------- */

.rz-sidebar.dormora-sidebar {
    --rz-sidebar-width: 16.5rem;
    --rz-sidebar-background-color: var(--dormora-surface);
    --rz-sidebar-border-inline-end: none;
    border: none;
}

.dormora-drawer {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.5rem 1rem;
}

.dormora-drawer__household {
    margin-bottom: 0.5rem;
}

.dormora-drawer__household-line,
.rz-sidebar a.dormora-drawer__household-line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
    border: 0;
    border-radius: 0.75rem;
    background: none;
    color: var(--dormora-on-surface);
    font: inherit;
    font-weight: 600;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

    .dormora-drawer__household-line:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
    }

    .dormora-drawer__household-line > .rzi {
        margin-inline-start: auto;
        color: var(--dormora-on-surface-variant);
    }

.dormora-drawer__household-line--loading {
    cursor: default;
}

.dormora-drawer__household-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background-color: var(--dormora-primary);
    color: var(--dormora-on-primary);
    font-size: 0.875rem;
    font-weight: 700;
}

    .dormora-drawer__household-badge .rzi {
        font-size: 1.125rem;
    }

/* A long name takes a second line rather than being cut off (then an ellipsis). */
.dormora-drawer__household-name,
.dormora-drawer__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.dormora-drawer__household .dormora-menu__popup {
    right: 0;
    min-width: 0;
}

.dormora-drawer__tick {
    color: var(--dormora-primary);
}

.dormora-menu__item .dormora-drawer__tick {
    color: var(--dormora-primary);
}

.dormora-drawer__tick--off {
    visibility: hidden;
}

.dormora-drawer__option-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dormora-drawer__option-detail {
    color: var(--dormora-on-surface-variant);
    font-size: 0.8125rem;
}

.dormora-drawer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dormora-drawer__item,
.rz-sidebar a.dormora-drawer__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    margin-block: 0.125rem;
    padding: 0 0.5rem 0 0.75rem;
    border: 0;
    border-radius: 1.375rem;
    background: none;
    color: var(--dormora-on-surface-variant);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

    .dormora-drawer__item:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
        color: var(--dormora-on-surface);
        text-decoration: none;
    }

    .dormora-drawer__item:focus-visible,
    .dormora-drawer__household-line:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-drawer__indicator {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 2rem;
}

.dormora-drawer__label {
    flex: 1 1 auto;
    min-width: 0;
    padding-block: 0.25rem;
    line-height: 1.25;
}

/* The selected item: the whole row takes the indicator (M3's drawer), as the bottom bar's selected tab. */
.dormora-drawer__item--active,
.rz-sidebar a.dormora-drawer__item--active,
.dormora-drawer__item--active:hover {
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    font-weight: 700;
}

    .dormora-drawer__item--active .rzi {
        --rz-icon-fill: 1;
    }

.dormora-drawer__count {
    flex: none;
    margin-inline-start: -0.25rem;
    min-width: 1.5rem;
    padding: 0 0.375rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-primary);
    color: var(--dormora-on-primary);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-align: center;
}

.dormora-drawer__section {
    margin: 0.75rem 0 0.25rem;
    padding-inline: 0.75rem;
    color: var(--dormora-primary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.dormora-drawer__divider {
    margin: 0.5rem 0.75rem;
    border: 0;
    border-top: 1px solid var(--dormora-outline-variant);
    opacity: 1;
}

.dormora-drawer__more {
    display: block;
}

/* ---------------------------------------------------------------------------------------
   P4U-082 — the navigation rail (UC-M.D3), 768 to 1279 px: 84 px (the mockup's "Rail at 1024"), the household badge alone,
   items as an indicator (56 x 32, the drawer's selected colours) over a short label, More's flat grid as a side menu; and the
   whole drawer over the content when the menu button opens it.
   --------------------------------------------------------------------------------------- */

.rz-sidebar.dormora-sidebar--rail {
    --rz-sidebar-width: 5.25rem;
}

.dormora-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0 1rem;
}

.dormora-drawer__household-line.dormora-drawer__household-line--compact,
.rz-sidebar a.dormora-drawer__household-line--compact {
    width: auto;
    min-height: var(--dormora-touch-target);
    justify-content: center;
    padding: 0.375rem;
}

    .dormora-drawer__household-line--compact .dormora-drawer__household-badge {
        width: 2.25rem;
        height: 2.25rem;
    }

.dormora-rail__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .dormora-rail__list > li {
        display: flex;
        justify-content: center;
        width: 100%;
    }

.dormora-rail__item,
.rz-sidebar a.dormora-rail__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 4.5rem;
    min-height: 3.5rem;
    padding: 0.25rem 0;
    border: 0;
    border-radius: 0.75rem;
    background: none;
    color: var(--dormora-on-surface-variant);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

    .dormora-rail__item:hover {
        color: var(--dormora-on-surface);
        text-decoration: none;
    }

        .dormora-rail__item:hover .dormora-rail__indicator {
            background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
        }

    .dormora-rail__item:focus-visible {
        outline: none;
    }

        .dormora-rail__item:focus-visible .dormora-rail__indicator {
            outline: 2px solid var(--dormora-focus-ring);
            outline-offset: 2px;
        }

.dormora-rail__indicator {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 2rem;
    border-radius: 1rem;
}

.dormora-rail__label {
    max-width: 100%;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.dormora-rail__item--active,
.rz-sidebar a.dormora-rail__item--active {
    color: var(--dormora-on-surface);
    font-weight: 700;
}

    .dormora-rail__item--active .dormora-rail__indicator,
    .dormora-rail__item--active:hover .dormora-rail__indicator {
        background-color: var(--dormora-primary-container);
        color: var(--dormora-on-primary-container);
    }

    .dormora-rail__item--active .rzi {
        --rz-icon-fill: 1;
    }

/* The bottom bar's badge slot: a count at the icon's top right, or a dot. */
.dormora-rail__badge {
    position: absolute;
    top: -0.125rem;
    left: calc(50% + 0.25rem);
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 0.5rem;
    background-color: var(--dormora-error);
    color: var(--dormora-on-error);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

.dormora-rail__badge--dot {
    min-width: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    top: 0.25rem;
}

/* An anchored menu beside its button (the rail's household badge and More). */
.dormora-menu__popup.dormora-menu__popup--side {
    top: 0;
    left: calc(100% + 0.5rem);
    right: auto;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
}

/* The side menus reach past the rail. */
.rz-sidebar.dormora-sidebar--rail {
    overflow: visible;
}

/* More sits low on the rail, so its menu lines up with the button's bottom and grows upward. */
.dormora-rail__more .dormora-menu__popup.dormora-menu__popup--side {
    top: auto;
    bottom: 0;
}

/* Radzen's "max-width: 768px" makes the body 100vw, which at exactly 768 (desktop here, D-023) slid it under the rail. */
@media (max-width: 768px) {
    .dormora-shell:not(.dormora-shell--mobile) .rz-body {
        width: auto;
    }
}

/* More's flat grid: the tiles three to a row, then the rows across the menu (the phone's More). */
.dormora-rail__more [role=menu] {
    display: grid;
    grid-template-columns: repeat(3, 6rem);
    padding-inline: 0.5rem;
}

    .dormora-rail__more [role=menu] > * {
        grid-column: 1 / -1;
    }

        .dormora-rail__more [role=menu] > .dormora-rail__tile {
            grid-column: auto;
            flex-direction: column;
            justify-content: center;
            gap: 0.25rem;
            min-height: 4.5rem;
            padding: 0.5rem 0.25rem;
            border-radius: 0.75rem;
            text-align: center;
            font-size: 0.8125rem;
        }

/* The whole drawer over the content (the menu button, at rail widths), with the dialog scrim. */
.dormora-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
}

.dormora-drawer-overlay__scrim {
    position: absolute;
    inset: 0;
    background-color: var(--dormora-dialog-scrim, rgba(0, 0, 0, 0.32));
}

.dormora-drawer-overlay__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 16.5rem;
    overflow-y: auto;
    padding-top: 0.75rem;
    border-radius: 0 1rem 1rem 0;
    background-color: var(--dormora-surface);
    box-shadow: var(--dormora-dialog-shadow);
}

    .dormora-drawer-overlay__panel:focus {
        outline: none;
    }

@media (prefers-reduced-motion: no-preference) {
    .dormora-drawer-overlay__panel {
        animation: dormora-drawer-in 200ms var(--dormora-dialog-easing, ease-out);
    }
}

@keyframes dormora-drawer-in {
    from {
        transform: translateX(-100%);
    }
}

/* ---------------------------------------------------------------------------------------
   P4U-083 — desktop presentations of the shared primitives (UC-M.D4 to UC-M.D10): the header's "New ▾", rows' revealed
   actions and context menu, the fixed scope as plain text, the menu chip's anchored menu, and the desktop table.
   --------------------------------------------------------------------------------------- */

/* UC-M.D7: a desktop row's title is one line, as the phone's supporting line is. */
.dormora-row:not(.dormora-row--mobile) {
    position: relative;
}

    .dormora-row:not(.dormora-row--mobile) .dormora-row__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* UC-M.D7, UC-M.D13: Edit and Delete show on hover and on keyboard focus within the row; where nothing hovers (a touch
   screen at desktop width) they stay. */
@media (hover: hover) {
    .dormora-row:not(.dormora-row--mobile):not(:hover):not(:focus-within) .dormora-row-action--reveal {
        opacity: 0;
    }
}

.dormora-row__context-scrim {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.dormora-row__context {
    z-index: 1001;
    width: max-content; /* a menu opened near the right edge keeps its width (it is then moved inside the window) */
    min-width: 12rem;
    max-width: 20rem;
    padding-block: 0.5rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-surface-container);
    box-shadow: var(--dormora-dialog-shadow);
}

    .dormora-row__context .dormora-menu-sheet__item {
        min-height: 2.75rem;
        padding-inline: 1rem;
    }

@media (prefers-reduced-motion: no-preference) {
    .dormora-row__context {
        animation: dormora-menu-in 120ms var(--dormora-dialog-easing, ease-out);
    }
}

/* D9: a page with a fixed scope says so in plain text. */
.dormora-scope-only {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    color: var(--dormora-on-surface-variant);
    font-size: 0.875rem;
}

    .dormora-scope-only .rzi {
        font-size: 1.125rem;
    }

/* UC-M.D4: "New ▾", the filled primary button holding the page's creates. */
.dormora-new-menu__button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.5rem;
    padding: 0 0.75rem 0 1rem;
    border: 0;
    border-radius: 1.25rem;
    background-color: var(--dormora-primary);
    color: var(--dormora-on-primary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

    .dormora-new-menu__button:hover {
        background-color: color-mix(in srgb, var(--dormora-primary) 88%, var(--dormora-on-primary));
    }

    .dormora-new-menu__button:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

/* The menu chip's menu: a tick on the current choice only. */
.dormora-chip-menu .dormora-menu__item[aria-checked="false"] .dormora-chip-menu__tick {
    visibility: hidden;
}

.dormora-chip-menu .dormora-menu__popup {
    min-width: 11rem;
}

/* UC-M.D7 (P4U-083 work item 8): the desktop table, flat, with a header row in the variant colour (Budget's lists and a
   workout plan's exercises take it in their tasks; Household settings' permissions first). */
.dormora-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .dormora-table th,
    .dormora-table td {
        padding: 0.625rem 0.75rem;
        text-align: start;
        border-bottom: 1px solid var(--dormora-outline-variant);
    }

    .dormora-table thead th {
        background-color: var(--dormora-surface-container);
        color: var(--dormora-on-surface-variant);
        font-size: 0.8125rem;
        font-weight: 600;
    }

        .dormora-table thead th:first-child {
            border-start-start-radius: 0.5rem;
        }

        .dormora-table thead th:last-child {
            border-start-end-radius: 0.5rem;
        }

    .dormora-table tbody tr:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 4%, transparent);
    }

/* P4U-083 (b, UC-M.D9; the mockup's Tasks): desktop's side panel. About 420px at the window's right, under the top bar:
   beside the content from 1280px (the body makes room for it), over it with a scrim on the rail (768 to 1279). The
   header is the leading control, the title, the record's actions and close; the body scrolls. */
:root {
    --dormora-side-panel-width: 26.25rem;
}

/* P4I-013 (M1 gate): the favourite's star. Gold, as the mockups' #c48a00, but deep enough to read 3:1 on the light surfaces
   (3.7:1 on white); filled when it is on. A global rule: scoped CSS can't reach a RadzenIcon's own root. */
:root {
    --dormora-star: #b07a00;
}

:root[data-theme="dark"] {
    --dormora-star: #f2b94a;
}

.dormora-star {
    color: var(--dormora-on-surface-variant);
    font-variation-settings: 'FILL' 0;
}

.dormora-star.dormora-star--on {
    color: var(--dormora-star);
    font-variation-settings: 'FILL' 1;
}

.dormora-side-panel {
    position: fixed;
    top: var(--dormora-side-panel-top, 4rem);
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    width: min(var(--dormora-side-panel-width), 100vw);
    border-radius: 1.5rem 0 0 0;
    background-color: var(--dormora-surface-container);
    color: var(--rz-text-color);
}

.dormora-side-panel--overlay {
    top: 0;
    z-index: 1100;
    border-radius: 1.5rem 0 0 1.5rem;
    box-shadow: var(--dormora-dialog-shadow);
}

.dormora-side-panel__scrim {
    position: fixed;
    inset: 0;
    z-index: 1099;
    background-color: var(--dormora-dialog-scrim, rgba(0, 0, 0, 0.32));
}

.dormora-side-panel__header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 0.75rem 0.5rem 1.25rem;
}

.dormora-side-panel__leading {
    display: flex;
    align-items: center;
    margin-inline-end: 0.5rem;
}

.dormora-side-panel__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

    .dormora-side-panel__title:focus {
        outline: none;
    }

.dormora-side-panel__title--done {
    text-decoration: line-through;
    color: var(--rz-text-secondary-color);
}

.dormora-side-panel__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

    .dormora-side-panel__more:hover {
        background-color: var(--rz-base-200);
    }

    .dormora-side-panel__more:focus-visible {
        outline: 2px solid var(--rz-primary);
        outline-offset: 2px;
    }

.dormora-side-panel__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1.25rem 1.5rem;
}

    .dormora-side-panel__body .dormora-detail-list {
        margin-top: 0;
    }

    /* A footer in the panel sits on the panel's own surface, not a white box (Buy again). */
    .dormora-side-panel__body .dormora-dialog-footer {
        border-top: 0;
        background-color: var(--dormora-surface-container);
    }

.rz-body.dormora-body--panel {
    margin-inline-end: var(--dormora-side-panel-width);
}

.dormora-row--selected {
    background-color: var(--rz-primary-lighter);
}

@media (prefers-reduced-motion: no-preference) {
    .dormora-side-panel--overlay {
        animation: dormora-side-panel-in 200ms var(--dormora-dialog-easing, ease-out);
    }
}

@keyframes dormora-side-panel-in {
    from {
        transform: translateX(2rem);
        opacity: 0;
    }
}

/* P4U-083 (c, UC-M.D8; the mockup's Lists): desktop's list–detail. From 1280px the list (about 360px) and the detail side by
   side, the detail behind a divider; on the rail one pane at a time, the detail under a back link. The list pane's header
   is the page's (h1); the detail pane's is an h2 (PageHeader InPane), as large as the mockup's 24px. The selected card is in
   the primary container. */
.dormora-panes {
    display: grid;
    grid-template-columns: 22.5rem minmax(0, 1fr);
    align-items: start;
}

.dormora-panes--one {
    grid-template-columns: minmax(0, 1fr);
}

.dormora-panes__list {
    min-width: 0;
}

.dormora-panes:not(.dormora-panes--one) .dormora-panes__list {
    padding-inline-end: 1.5rem;
}

.dormora-panes__list .dormora-list-cards {
    padding-bottom: 0.5rem;
}

.dormora-panes__detail {
    min-width: 0;
}

.dormora-panes:not(.dormora-panes--one) .dormora-panes__detail {
    min-height: calc(100vh - 8rem);
    padding-inline-start: 1.75rem;
    border-inline-start: 1px solid var(--dormora-outline-variant, var(--rz-base-300));
}

.dormora-panes__back {
    margin-bottom: 0.75rem;
}

.dormora-panes__choose {
    margin: 4rem 0 0;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

.dormora-panes__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding-inline: 0.375rem;
    color: var(--rz-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
}

    .dormora-panes__link:hover {
        text-decoration: underline;
    }

    .dormora-panes__link .rzi {
        font-size: 1.125rem;
    }

    /* P4U-087: Templates open in the detail pane, so the link is selected as a list card is. */
    .dormora-panes__link--selected {
        padding-inline: 0.75rem;
        border-radius: 999px;
        background-color: var(--dormora-primary-container);
        color: var(--dormora-on-primary-container);
    }

.dormora-page-title.dormora-pane-title {
    font-size: 1.5rem;
}

.dormora-list-card:not(.dormora-list-card--selected):hover {
    background-color: var(--dormora-surface-container-high);
}

.dormora-list-card--selected {
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

    .dormora-list-card--selected .dormora-list-card__icon,
    .dormora-list-card--selected .dormora-list-card__meta,
    .dormora-list-card--selected .dormora-list-card__change {
        color: inherit;
    }

/* P4U-084 (UC-M.D12, the desktop mockup's Home), P4I-086 (d-mk86-a): the greeting and the chips, then At a glance as one row of tiles across the top (Most important and Who's
   home are two tiles wide), then Today and Coming up side by side, each with one header. With less room (the rail, or the side panel open beside Home) Coming up folds under Today.
   A container query, so it follows the content's width whatever takes the rest. */
.dormora-home-desk {
    container-type: inline-size;
}

.dormora-home-desk .dormora-home {
    margin-inline: 0;
}

/* The chips under the greeting, left (the mockup); and the phone's flat rows: no dividers, the title in regular weight, a
   tonal tint under the pointer. */
.dormora-home-desk .dormora-scope-bar {
    justify-content: flex-start;
}

.dormora-home-desk .dormora-home .dormora-row {
    min-height: 3.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 0;
    border-radius: 0.75rem;
}

    .dormora-home-desk .dormora-home .dormora-row:hover {
        background-color: var(--dormora-surface-container);
    }

    .dormora-home-desk .dormora-home .dormora-row__title {
        font-size: 0.9375rem;
        font-weight: 400;
    }

    .dormora-home-desk .dormora-home .dormora-row__leading {
        min-width: 2.25rem;
        justify-content: center;
    }

.dormora-home-desk .dormora-section-label {
    padding-inline: 0.75rem;
}

.dormora-home-desk .dormora-home__empty,
.dormora-home-desk .dormora-home__error,
.dormora-home-desk .dormora-home .dormora-skeleton {
    padding-inline: 0;
}

.dormora-home-desk .dormora-glance {
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
}

    .dormora-home-desk .dormora-glance__heading {
        font-size: 0.8125rem;
        color: var(--dormora-on-surface-variant);
    }

.dormora-home-desk .dormora-glance__edit.rz-button {
    color: var(--dormora-primary);
}

.dormora-home-desk .dormora-glance__card {
    min-height: 0;
    padding: 0.875rem 1rem;
}

.dormora-home-desk .dormora-glance__chevron.rzi {
    margin-inline-start: auto;
    color: var(--dormora-on-surface-variant);
}

.dormora-home-desk .dormora-glance__value--amount {
    font-size: 1.125rem;
    font-weight: 600;
}

.dormora-home-desk .dormora-home__setup {
    margin-bottom: 1rem;
}

.dormora-home__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@container (min-width: 56rem) {
    .dormora-home__cols--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dormora-glance-editor__reset {
    margin-inline-start: -0.75rem;
}

/* P4U-085 (D5; the desktop mockup's Calendar): desktop's one toolbar line: Today (outlined), ‹ ›, the range as the title,
   the view menu chip, the scope chips and Who's free, the colour key behind info, and the filled "Event" at the end. With
   room (58rem of content: the drawer at 1280) it is one line and the title wraps its own words, as the mockup ("12 – 18
   October / 2026"); with less (the rail) the line itself wraps rather than overflowing. A container query on its width. */
.dormora-cal-bar-wrap {
    container-type: inline-size;
    margin-bottom: 1rem;
}

.dormora-cal-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
}

/* P4U-099: 57rem (the line needs about 56.5 with its gaps), since the page's rounded panel took 1rem at 1280. */
@container (max-width: 57rem) {
    .dormora-cal-bar {
        flex-wrap: wrap;
    }

        .dormora-cal-bar .dormora-cal-bar__title {
            flex: 1 1 auto;
        }
}

/* The title wraps before the controls do, as the mockup at 1280 ("12 – 18 October / 2026"). */
.dormora-cal-bar__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 0.25rem 0 0;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.75rem;
    color: var(--rz-text-title-color);
}

.dormora-cal-bar__today.rz-button {
    border-radius: 1.25rem;
}

.dormora-cal-bar__chips {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.375rem; /* P4U-099: 0.5rem clipped "Event" at 1280 once the page sat on its rounded panel */
}

    .dormora-cal-bar__chips .dormora-scope-chips {
        margin: 0;
    }

.dormora-cal-bar__key {
    position: relative;
    margin-inline-start: auto;
}

.dormora-cal-key {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 1001;
    /* P4I-M7 gate fix 4 (d-mkw05-a): wide enough that "Read-only" and its hint, and "Birthdays and anniversaries", keep their lines. */
    width: 23rem;
    max-width: calc(100vw - 2rem);
    min-width: 17rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-surface-container);
    box-shadow: var(--dormora-dialog-shadow);
}

.dormora-cal-bar__new.rz-button {
    border-radius: 1.25rem;
}

/* P4U-085 (the desktop mockup's Calendar): Day's and Week's head, in the time grid's columns (Radzen's 80px hour axis, the
   day columns, the scrollbar's gutter): the day name over the date, today's date in a filled primary circle; then the All
   day row, a multi-day event one bar across its days (primary container; automatic events surface-container-high; the
   holiday its green). Radzen's own day header is hidden. Events are rounded primary-container blocks, the title then the
   time. */
.dormora-cal-head {
    padding-inline: 1px;
    overflow-y: hidden;
    scrollbar-gutter: stable;
}

.dormora-cal-head__row {
    display: flex;
    align-items: stretch;
}

.dormora-cal-head__axis {
    flex: 0 0 80px;
    align-self: center;
    padding-inline-end: 0.5rem;
    text-align: end;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-cal-head__cells {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(var(--dormora-cal-days, 7), minmax(0, 1fr));
}

.dormora-cal-head__cells--packed {
    grid-auto-flow: row dense;
    row-gap: 2px;
    padding-block: 0.25rem 0.375rem;
}

.dormora-cal-head__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0;
    border: 0;
    border-radius: 0.75rem;
    background: none;
    font: inherit;
    color: var(--rz-text-color);
}

button.dormora-cal-head__day {
    cursor: pointer;
}

    button.dormora-cal-head__day:hover {
        background-color: var(--dormora-surface-container);
    }

    button.dormora-cal-head__day:focus-visible {
        outline: 2px solid var(--dormora-focus-ring, var(--rz-primary));
        outline-offset: -2px;
    }

.dormora-cal-head__dow {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dormora-on-surface-variant);
}

.dormora-cal-head__date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1.125rem;
}

.dormora-cal-head__day--today .dormora-cal-head__dow {
    color: var(--dormora-primary);
}

.dormora-cal-head__day--today .dormora-cal-head__date {
    background-color: var(--dormora-primary);
    color: var(--dormora-on-primary, #fff);
}

.dormora-cal-allday {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    min-height: 1.5rem;
    margin-inline: 2px;
    padding: 0.125rem 0.5rem;
    border: 0;
    border-radius: 0.375rem;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    font: inherit;
    font-size: 0.75rem;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

    .dormora-cal-allday:focus-visible {
        outline: 2px solid var(--dormora-focus-ring, var(--rz-primary));
        outline-offset: 1px;
    }

    .dormora-cal-allday .rzi {
        flex: none;
        font-size: 0.9375rem;
    }

.dormora-cal-allday__title {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.dormora-cal-allday__span {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.85;
}

.dormora-cal-allday.is-automatic {
    background-color: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface);
}

.dormora-cal-allday.is-holiday {
    background-color: var(--color-event-holiday);
    color: #000;
}

.dormora-cal-allday--task,
.dormora-cal-allday--care {
    background-color: transparent;
    color: var(--rz-text-color);
    box-shadow: inset 0 0 0 1.5px var(--color-task);
}

.dormora-cal-allday--care {
    box-shadow: inset 0 0 0 1.5px var(--color-care);
}

.dormora-cal-grid--times .rz-view-header {
    display: none;
}

.dormora-cal-grid .rz-event-content {
    border-radius: 0.5rem;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

.dormora-cal-grid--times .rz-event-content {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
    line-height: 1rem;
}

.dormora-cal-event__title {
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: none;
}

.dormora-cal-event__time {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0.85;
}

/* P4U-085 (b; the desktop mockup's Calendar): the To do row under All day: per day, small counts ("2 tasks" outlined, "1 care"
   in the care colour), one button that opens the day's to-do popover, a small card under it with the day's tasks and care
   jobs as rows with a round tick. The Planner's per-day entry is outlined the same way. */
.dormora-cal-head__row--todo {
    border-top: 1px solid var(--dormora-outline-variant);
}

.dormora-cal-todo-cell {
    min-width: 0;
    padding: 0.25rem 2px;
}

.dormora-cal-todo {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.125rem;
    border: 0;
    border-radius: 0.75rem;
    background: none;
    font: inherit;
    color: var(--rz-text-color);
    cursor: pointer;
}

    .dormora-cal-todo:hover .dormora-cal-todo__count,
    .dormora-cal-todo[aria-expanded="true"] .dormora-cal-todo__count {
        background-color: var(--dormora-surface-container);
    }

    .dormora-cal-todo:hover .dormora-cal-todo__count--care,
    .dormora-cal-todo[aria-expanded="true"] .dormora-cal-todo__count--care {
        background-color: var(--dormora-tertiary-container);
        filter: brightness(0.96);
    }

    .dormora-cal-todo:focus-visible {
        outline: 2px solid var(--dormora-focus-ring, var(--rz-primary));
        outline-offset: 1px;
    }

.dormora-cal-todo__count {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    max-width: 100%;
    overflow: hidden;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.625rem;
    box-shadow: inset 0 0 0 1px var(--dormora-outline-variant);
    font-size: 0.75rem;
    line-height: 1.125rem;
    white-space: nowrap;
}

    .dormora-cal-todo__count .rzi {
        font-size: 0.875rem;
    }

.dormora-cal-todo__count--care {
    background-color: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
    box-shadow: none;
}

.rz-scheduler .rz-event-content.dormora-calendar-todo {
    color: var(--rz-text-color);
    background-color: var(--rz-base-background-color);
    box-shadow: inset 0 0 0 1px var(--dormora-outline-variant);
}

.dormora-cal-todo-popover {
    position: fixed;
    top: 30%;
    left: calc(50% - 9rem);
    z-index: 1001;
    width: 18rem;
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
    padding: 0.5rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-surface-container);
    color: var(--rz-text-color);
    box-shadow: var(--dormora-dialog-shadow);
}

.dormora-cal-todo-popover__head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.125rem 0.25rem 0.375rem;
}

.dormora-cal-todo-popover__title {
    flex: 1;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

    .dormora-cal-todo-popover__title:focus {
        outline: none;
    }

    .dormora-cal-todo-popover__title:focus-visible {
        outline: 2px solid var(--dormora-focus-ring, var(--rz-primary));
    }

.dormora-cal-todo-popover__none {
    margin: 0.25rem 0.375rem 0.5rem;
    font-size: 0.875rem;
    color: var(--dormora-on-surface-variant);
}

/* The popover's rows are flat as Home's desktop rows: no dividers, the title in regular weight, a tint under the pointer. */
.dormora-cal-todo-popover .dormora-row {
    min-height: 2.75rem;
    padding: 0.25rem 0.375rem;
    border-bottom: 0;
    border-radius: 0.5rem;
    background-color: transparent;
}

    .dormora-cal-todo-popover .dormora-row:hover {
        background-color: var(--dormora-surface-container-high);
    }

    .dormora-cal-todo-popover .dormora-row__title {
        font-size: 0.875rem;
        font-weight: 400;
    }

/* P4U-085 (b): the event side panel's colour square, as the phone's Event detail title has. */
.dormora-side-panel__leading .dormora-event-detail__swatch {
    width: 1rem;
    height: 1rem;
}

.dormora-event-detail--panel .dormora-event-detail__head {
    margin-bottom: 0.5rem;
}

/* P4U-085 (c; the desktop mockup's Who's free): "Everyone ▾" on both sizes (a menu of checkboxes); in desktop's side panel
   the privacy line, then ‹, the day and › with Everyone ▾ on one line, wider names and taller bars, and "New event at 17:00"
   at the end of the free card. */
.dormora-availability__who,
.dormora-availability__days {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.dormora-availability__who-menu .dormora-menu__popup {
    min-width: 12rem;
}

.dormora-availability__days .dormora-chip:not(.dormora-availability__day) {
    padding-inline: 0.375rem;
}

.dormora-availability__day {
    cursor: default;
}

.dormora-availability--panel {
    gap: 1rem;
}

    .dormora-availability--panel .dormora-availability__grid {
        grid-template-columns: 4.375rem 1fr;
        gap: 0.625rem;
        font-size: 0.8125rem;
    }

    .dormora-availability--panel .dormora-availability__axis {
        font-size: 0.6875rem;
    }

    .dormora-availability--panel .dormora-availability__bar {
        height: 1.375rem;
        border-radius: 5px;
        background: var(--dormora-surface);
    }

    .dormora-availability--panel .dormora-availability__free {
        flex-wrap: wrap;
        font-size: 0.875rem;
    }

    .dormora-availability--panel .dormora-availability__new.rz-button {
        margin-inline-start: auto;
        border-radius: 999px;
        white-space: nowrap;
    }

/* P4U-086 (the desktop mockup's Tasks): one chip line (scope, Assigned to me, Category ▾, Filters), with the filters in an
   anchored panel under their chip (Show and Priority, a live count, Clear and Done); the phone's grouped list with
   Home's flat desktop rows: no dividers, the title in regular weight, a tonal tint under the pointer. */
/* It wraps rather than scrolling sideways, so the filters panel under its chip isn't clipped (found live). */
.dormora-task-chips {
    flex-wrap: wrap;
    padding-inline: 0;
    overflow: visible;
}

.dormora-task-filters-wrap {
    position: relative;
    display: flex;
}

.dormora-task-filters-pop {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 1001;
    width: 20rem;
    padding: 0.5rem 0.75rem 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-surface-container);
    color: var(--rz-text-color);
    box-shadow: var(--dormora-dialog-shadow);
}

    .dormora-task-filters-pop:focus {
        outline: none;
    }

    .dormora-task-filters-pop .dormora-section-label {
        padding-inline: 0.25rem;
    }

    .dormora-task-filters-pop .dormora-chip-row {
        padding-inline: 0;
    }

.dormora-task-filters-pop__foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

    .dormora-task-filters-pop__foot > span {
        flex: 1;
    }

.dormora-tasks-desk .dormora-flat-list {
    margin-inline: 0;
    padding-bottom: 1rem;
}

.dormora-tasks-desk .dormora-section-label {
    padding-inline: 0.75rem;
}

.dormora-tasks-desk .dormora-row {
    min-height: 3.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 0;
    border-radius: 0.75rem;
}

    .dormora-tasks-desk .dormora-row:hover {
        background-color: var(--dormora-surface-container);
    }

    .dormora-tasks-desk .dormora-row__title {
        font-size: 0.9375rem;
        font-weight: 400;
    }

    .dormora-tasks-desk .dormora-row__leading {
        min-width: 2.25rem;
        justify-content: center;
    }

/* P4U-086 (the mockups' New task): who does it on one row: "Assigned to" with "Anyone", and "Take turns" as a text action. */
.dormora-assign-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.dormora-assign-row__turns {
    min-height: var(--dormora-touch-target, 44px);
    padding: 0 0.25rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dormora-primary);
    cursor: pointer;
}

    .dormora-assign-row__turns:focus-visible {
        outline: 2px solid var(--dormora-focus-ring, var(--rz-primary));
        outline-offset: 2px;
        border-radius: 0.25rem;
    }

/* P4U-087 (the desktop mockup's Lists): the open list on desktop: the quick-add pill at the top (not pinned), the chips, then
   the groups to buy and, when the pane has room, Bought beside them; Home's flat rows (no dividers, regular weight, a tint
   under the pointer); the header's Household label is a label, not a button. */
.dormora-shell:not(.dormora-shell--mobile) .dormora-list-detail__add {
    position: static;
    padding: 0 0 0.5rem;
    background: none;
}

    .dormora-shell:not(.dormora-shell--mobile) .dormora-list-detail__add .dormora-quick-add--pill .dormora-quick-add__input.rz-textbox {
        height: 3rem;
        border-radius: 24px;
        background: var(--dormora-surface-container);
    }

.dormora-shell:not(.dormora-shell--mobile) .dormora-list-detail-host {
    container-type: inline-size;
}

.dormora-list-detail--desk {
    margin-inline: 0;
    padding-bottom: 1rem;
}

@container (min-width: 32rem) {
    .dormora-list-detail--desk:has(.dormora-list-detail__bought) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 1.75rem;
        align-items: start;
    }
}

.dormora-list-detail--desk .dormora-section-label {
    padding-inline: 0.75rem;
}

.dormora-list-detail--desk .dormora-row {
    min-height: 3.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 0;
    border-radius: 0.75rem;
}

    .dormora-list-detail--desk .dormora-row:hover {
        background-color: var(--dormora-surface-container);
    }

    .dormora-list-detail--desk .dormora-row__title {
        font-size: 0.9375rem;
        font-weight: 400;
    }

.dormora-chip--static {
    cursor: default;
}

.dormora-list-detail__scope {
    margin-inline-end: 0.25rem;
}

/* The phone's pinned bar makes the field static; on desktop it stays the pill's own box, so its add icon sits inside it. */
.dormora-shell:not(.dormora-shell--mobile) .dormora-list-detail__add .dormora-quick-add {
    position: relative;
}

/* In two columns a line ("1 dozen · added by Jamie", "Bought by Jamie · £2.30") wraps rather than being cut off. */
.dormora-list-detail--desk .dormora-home__line {
    white-space: normal;
}

/* P4U-088 (the desktop mockup's Notes and "Rail at 1024"): the phone's tiles beside the open note. The grid pane is the mockup's
   440px, two tiles across; on the rail the grid is alone, three across. The open note's tile has the primary outline. The note
   is the phone's, its title field in the header beside push_pin, the Household label, share and the ⋮; its text keeps a
   readable measure. */
.dormora-panes--notes:not(.dormora-panes--one) {
    grid-template-columns: 27.5rem minmax(0, 1fr);
}

.dormora-panes--notes.dormora-panes--one .dormora-note-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dormora-shell:not(.dormora-shell--mobile) .dormora-note-tile {
    padding: 0.75rem;
}

.dormora-shell:not(.dormora-shell--mobile) .dormora-note-tile__body,
.dormora-shell:not(.dormora-shell--mobile) .dormora-note-tile__items {
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.dormora-note-tile--selected {
    border: 2px solid var(--dormora-primary);
}

.dormora-shell:not(.dormora-shell--mobile) .dormora-note-tile--selected {
    padding: calc(0.75rem - 1px);
}

.dormora-page-header__title-field {
    flex: 1 1 8rem;
    min-width: 0;
}

    .dormora-page-header__title-field .dormora-note-page__title {
        margin: 0;
        text-overflow: ellipsis; /* a long title at 1280: the tile and the focused field show it whole */
    }

.dormora-note-head__pin--on .rzi {
    color: var(--dormora-primary);
    font-variation-settings: 'FILL' 1;
}

.dormora-note-page--desk .dormora-note-page__meta {
    margin-top: -0.5rem;
}

.dormora-note-page--desk .dormora-note-page__body,
.dormora-note-page--desk .dormora-note-page__text,
.dormora-note-page--desk .dormora-note-page__items,
.dormora-note-page--desk .dormora-note-page__add,
.dormora-note-page--desk .dormora-note-attachment {
    max-width: 40rem;
}

.dormora-note-page--desk .dormora-note-page__body,
.dormora-note-page--desk .dormora-note-page__text {
    line-height: 1.7;
}

.dormora-note-page--desk .dormora-note-page__items.dormora-flat-list {
    margin-inline: 0;
}

.dormora-note-page--desk .dormora-note-page__saved {
    max-width: 40rem;
    text-align: start;
}

/* P4U-088 step b (G12): Notes' Files, the note's bordered attachment rows as links to their notes; the open note's outlined. */
.dormora-note-files__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

a.dormora-note-file {
    min-height: var(--dormora-touch-target);
    padding-right: 0.625rem;
    color: inherit;
    text-decoration: none;
}

    a.dormora-note-file:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 4%, transparent);
    }

    a.dormora-note-file:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-note-file--selected {
    padding: calc(0.5rem - 1px) calc(0.625rem - 1px);
    border: 2px solid var(--dormora-primary);
}

/* P4U-089 step a: desktop's chat is the phone's (names above runs, yours in the brand colour, the round composer), with the
   composer at the foot of the page; a phone's FAB ("Announcement") sits above the composer. */
.dormora-shell:not(.dormora-shell--mobile) .dormora-chat:has(.dormora-quick-add--chat) {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 16rem);
}

    .dormora-shell:not(.dormora-shell--mobile) .dormora-chat .dormora-quick-add--chat {
        margin: auto 0 0;
        padding-inline: 0;
        /* M6 gate: .rz-body's bottom padding (1.5rem, 1.25rem under 1280) is inside the sticky offset, so bottom: 0 left a strip under the
           composer where the thread scrolled past it. A negative offset of that padding puts the composer flush with the panel's foot (as the
           phone's); the same again as padding keeps the field where it was. */
        bottom: calc(-1 * var(--dormora-body-pad-bottom, 1.5rem));
        padding-bottom: calc(0.75rem + var(--dormora-body-pad-bottom, 1.5rem));
    }

.dormora-shell:not(.dormora-shell--mobile) .dormora-chat__thread {
    gap: 0.375rem;
}

.dormora-shell--mobile:has(.dormora-quick-add--chat) .rz-body {
    padding-bottom: calc(var(--dormora-bottom-nav-offset) + 1rem + env(safe-area-inset-bottom, 0px));
}

:root:has(.dormora-quick-add--chat) .dormora-fab {
    bottom: calc(var(--dormora-bottom-nav-offset) + 5.75rem + var(--dormora-chat-reply-bar, 0rem) + env(safe-area-inset-bottom, 0px)); /* P4I-070: and the reply bar's height */
}

/* P4U-089 step b: from 1280 the chat has the mockup's 320px side column (Pinned in the warning container, Latest
   announcement, House rules), each part a card that opens its tab. Your message's Edit and Delete sit beside it, shown on
   hover and keyboard focus (where nothing hovers, they stay). */
.dormora-chat-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.5rem;
    align-items: start;
}

.dormora-chat-side {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

    .dormora-chat-side .dormora-section-label {
        margin: 0.375rem 0 0;
    }

.dormora-chat-side__card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 12px;
    background: var(--dormora-surface-container-lowest, transparent);
    color: var(--dormora-on-surface);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-chat-side__card:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 4%, transparent);
    }

    .dormora-chat-side__card:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-chat-side__card--pinned {
    border-color: transparent;
    background: var(--dormora-warning-container); /* P4I-017c: the warning roles */
    color: var(--dormora-on-warning-container);
}

    .dormora-chat-side__card--pinned:hover {
        background: var(--dormora-warning-container);
        filter: brightness(0.97);
    }

.dormora-chat-side__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

    .dormora-chat-side__title .rzi {
        font-size: 1.125rem;
    }

.dormora-chat-side__line {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-chat-side__card--pinned .dormora-chat-side__line {
    color: inherit;
}

.dormora-chat-side__rules {
    font-size: 0.875rem;
    line-height: 1.375rem;
}

.dormora-chat__row--actions {
    position: relative;
}

.dormora-chat__line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    max-width: 78%;
}

    .dormora-chat__line .dormora-chat__bubble {
        max-width: 100%;
    }

.dormora-chat__actions {
    display: inline-flex;
    flex: 0 0 auto;
}

@media (hover: hover) {
    .dormora-chat__row--actions:not(:hover):not(:focus-within) .dormora-row-action--reveal {
        opacity: 0;
    }
}

/* ---------------------------------------------------------------------------------------
   P4I-070 (MK-70) — replies and polls in the chat. A tap on any message opens its sheet; a reply carries the quote of what it
   answers; a poll is a card of option bars; the composer gains a "+" (New poll) and, while replying, the "Replying to" bar.
   --------------------------------------------------------------------------------------- */

/* The composer: the reply bar takes a full line above the "+", the field and the send; the field shares the second line. */
.dormora-quick-add--chat {
    flex-wrap: wrap;
}

    .dormora-quick-add--chat .dormora-quick-add__input.rz-textbox {
        flex: 1 1 0;
    }

    .dormora-quick-add--chat .dormora-quick-add__lead-button.rz-button {
        flex: 0 0 auto;
        width: var(--dormora-touch-target);
        min-width: 0;
        height: var(--dormora-touch-target);
        padding: 0;
        border-radius: 50%;
    }

        .dormora-quick-add--chat .dormora-quick-add__lead-button.rz-button .rzi {
            font-size: 1.75rem;
        }

/* The "Replying to" bar (p-mk70-a): 48px, the surface container with the primary's 3px edge, as the mockup draws it. It is part of the pinned
   composer, which grows by exactly its height (the margin takes back the row gap), so the newest row's scroll margin and the FAB, both measured
   from the screen's foot, rise by it (--dormora-chat-reply-bar, set while it shows); the gap between the thread and the composer stays 4.5rem. */
:root:has(.dormora-chat__reply-bar) {
    --dormora-chat-reply-bar: 3rem;
    --dormora-fab-clearance: calc(4rem + var(--dormora-chat-reply-bar));
}

.dormora-chat__reply-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 calc(100% - 0.5rem);
    min-width: 0;
    max-width: calc(100% - 0.5rem);
    min-height: 3rem;
    margin: 0 0.25rem -0.5rem;
    padding-inline: 0.75rem 0.125rem;
    border-radius: 12px 12px 0 0;
    border-inline-start: 3px solid var(--dormora-primary);
    background: var(--dormora-surface-container);
    color: var(--dormora-on-surface);
    font-size: 0.75rem;
}

    .dormora-chat__reply-bar > .rzi {
        flex: 0 0 auto;
        color: var(--dormora-primary);
        font-size: 1.25rem;
    }

    .dormora-chat__reply-bar .rz-button {
        flex: 0 0 auto;
        width: var(--dormora-touch-target);
        min-width: 0;
        height: var(--dormora-touch-target);
        padding: 0;
        border-radius: 50%;
        color: var(--dormora-on-surface-variant);
    }

.dormora-chat__reply-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* A reply's bubble holds the quote and the tap area (two controls, so the bubble itself is not a button). */
.dormora-chat__row--run .dormora-chat__bubble--parts {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.dormora-chat__tap {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-chat__tap:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

div.dormora-chat__tap {
    cursor: default;
}

/* The quote: the answered message's sender and a line or two of it; a tap jumps to it. Yours sit on the brand colour, others' on the grey. */
.dormora-chat__quote {
    display: flex;
    flex-direction: column;
    margin: 0.375rem 0.5rem 0;
    padding: 0.1875rem 0.5rem;
    border: 0;
    border-inline-start: 3px solid var(--dormora-primary);
    border-radius: 6px;
    background: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
    color: inherit;
    font: inherit;
    font-size: 0.71875rem;
    text-align: start;
}

button.dormora-chat__quote {
    cursor: pointer;
}

    button.dormora-chat__quote:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 1px;
    }

    .dormora-chat__quote b {
        font-size: 0.6875rem;
        font-weight: 600;
    }

.dormora-chat__quote-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

.dormora-chat__quote--gone {
    font-style: italic;
    color: var(--dormora-on-surface-variant);
}

.dormora-chat__row--run.is-mine .dormora-chat__quote {
    border-inline-start-color: var(--dormora-on-primary);
    background: color-mix(in srgb, var(--dormora-on-primary) 16%, transparent);
}

.dormora-chat__row--run.is-mine .dormora-chat__quote--gone {
    color: inherit;
}

/* Jumping to a quoted message outlines it for a moment. */
.dormora-chat__row.is-target .dormora-chat__bubble,
.dormora-chat__row.is-target .dormora-chat__poll {
    outline: 2px solid var(--dormora-primary);
    outline-offset: 2px;
}

/* A poll (p-mk70-c, p-mk70-d, p-mk70-g): a card of the grey bubble's colour, its question with the poll icon, "n of m voted · closes …", and a
   bar per option: a 1px outline, the primary container filled to the option's share, your choice ticked and in a 2px primary outline. */
.dormora-chat__poll {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: min(86%, 22rem);
    padding: 0.625rem 0.75rem;
    border-radius: 16px;
    background: var(--dormora-surface-container-high);
    color: var(--rz-text-color);
    text-align: start;
    cursor: pointer;
}

.dormora-chat__row--actions .dormora-chat__line:has(.dormora-chat__poll) {
    width: min(100%, 30rem);
    max-width: none;
}

.dormora-chat__row--actions .dormora-chat__poll {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    cursor: default;
}

.dormora-chat__poll-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: start;
}

button.dormora-chat__poll-head {
    cursor: pointer;
}

    button.dormora-chat__poll-head:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
        border-radius: 6px;
    }

    .dormora-chat__poll-head .rzi {
        flex: 0 0 auto;
        color: var(--dormora-primary);
        font-size: 1.25rem;
    }

.dormora-chat__poll-question {
    overflow-wrap: anywhere;
}

.dormora-chat__poll-meta {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-chat__poll-options {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}

.dormora-chat__poll-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--dormora-touch-target);
    padding: 0.4375rem 0.625rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 10px;
    overflow: hidden;
    background: var(--dormora-surface);
    color: var(--rz-text-color);
    font: inherit;
    font-size: 0.8125rem;
    text-align: start;
}

button.dormora-chat__poll-option {
    cursor: pointer;
}

    button.dormora-chat__poll-option:hover {
        background: color-mix(in srgb, var(--dormora-primary) 6%, var(--dormora-surface));
    }

    button.dormora-chat__poll-option:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-chat__poll-option.is-mine {
    border: 2px solid var(--dormora-primary);
    padding: calc(0.4375rem - 1px) calc(0.625rem - 1px);
}

.dormora-chat__poll-bar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    background: var(--dormora-primary-container);
}

.dormora-chat__poll-option > :not(.dormora-chat__poll-bar) {
    position: relative;
}

.dormora-chat__poll-option .dormora-chat__poll-tick {
    flex: 0 0 auto;
    color: var(--dormora-primary);
    font-size: 1.125rem;
}

.dormora-chat__poll-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

    .dormora-chat__poll-text.is-winner {
        font-weight: 700;
    }

.dormora-chat__poll-voters {
    display: inline-flex;
    flex: 0 0 auto;
    padding-inline-start: 0.25rem;
}

    .dormora-chat__poll-voters .dormora-avatar {
        width: 1.5rem;
        height: 1.5rem;
        margin-inline-start: -0.1875rem;
        border: 2px solid var(--dormora-surface);
        font-size: 0.5625rem;
    }

.dormora-chat__poll-count {
    flex: 0 0 auto;
    min-width: 0.75rem;
    text-align: end;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-chat__poll > .dormora-chat__meta {
    align-self: flex-end;
    margin-top: 0.125rem;
}

/* P4I-W06b (MK-W06 p-mkw06-d): under a closed When poll's options, "Event made: Pizza night · Sat 18:30 · 4 going" with Open (or, for a tie, "Pick"): a tonal row of its own. */
.dormora-chat__poll-event {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.375rem;
    padding: 0.25rem 0.25rem 0.25rem 0.625rem;
    border-radius: 12px;
    background: var(--dormora-surface-container);
    font-size: 0.8125rem;
}

    .dormora-chat__poll-event .rzi {
        flex: 0 0 auto;
        color: var(--dormora-primary);
        font-size: 1.25rem;
    }

.dormora-chat__poll-event-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dormora-chat__poll-event-open {
    flex: 0 0 auto;
    min-height: var(--dormora-touch-target);
    padding: 0 0.625rem;
    border: 0;
    background: none;
    color: var(--dormora-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .dormora-chat__poll-event-open:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
        border-radius: 6px;
    }

/* On desktop (d-mk70-a) every message has the hover pill: Reply and ⋯, beside the bubble; yours sit on its left. Others' keep the left. */
.dormora-chat__row--actions:not(.is-mine) .dormora-chat__line {
    justify-content: flex-start;
}

.dormora-chat__actions {
    align-items: center;
    padding: 0.125rem 0.25rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 18px;
    background: var(--dormora-surface);
}

/* The New poll sheet: an option per row, each with its ×, and "Add an option (up to 6)". */
.dormora-poll-edit__options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dormora-poll-edit__option {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dormora-poll-edit__add {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
}

/* Where nothing hovers the pill stays; with a pointer it is drawn only while the row is hovered or has focus. */
@media (hover: hover) {
    .dormora-chat__row--actions:not(:hover):not(:focus-within) .dormora-chat__actions {
        border-color: transparent;
        background: transparent;
    }
}

/* P4U-090 step a: Members and invites on desktop, list–detail (the mockup's 360px list). The list: avatar rows with the
   phone's line, "Waiting to join" with Withdraw, and the invite code row (key, the code, copy, share). The member's pane: a
   large avatar beside the name, the role as a segmented button, the relationship, and a switch per module. */
.dormora-panes--members:not(.dormora-panes--one) {
    grid-template-columns: 22.5rem minmax(0, 1fr);
}

.dormora-members--desk {
    margin-inline: 0;
}

.dormora-invite-code-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.25rem 0.5rem 0.875rem;
    border: 1px solid var(--dormora-outline-variant);
    border-radius: 12px;
}

.dormora-invite-code-row__icon.rzi {
    color: var(--dormora-primary);
}

.dormora-invite-code-row__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-invite-code-row__label {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-invite-code-row__code {
    font-weight: 600;
    letter-spacing: 0.125rem;
}

.dormora-member-head {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
}

.dormora-member-avatar--large {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.0625rem;
}

.dormora-member-pane {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.25rem 2rem;
    max-width: 52rem;
}

.dormora-member-pane__part .dormora-section-label {
    margin: 0 0 0.5rem;
}

.dormora-member-pane__value {
    margin: 0;
}

.dormora-member-pane__note {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-member-pane__relationship {
    width: 100%;
    max-width: 18rem;
}

fieldset.dormora-segmented {
    display: inline-flex;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--dormora-on-surface-variant);
    border-radius: 999px;
    overflow: hidden;
}

.dormora-segmented__option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.5rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

    .dormora-segmented__option + .dormora-segmented__option {
        border-left: 1px solid var(--dormora-on-surface-variant);
    }

    .dormora-segmented__option input {
        position: absolute;
        opacity: 0;
        inset: 0;
        margin: 0;
        cursor: pointer;
    }

    .dormora-segmented__option .rzi {
        font-size: 1.125rem;
    }

    .dormora-segmented__option:has(input:focus-visible) {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

.dormora-segmented__option--on {
    background: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

.dormora-member-modules {
    margin: 0;
    padding: 0.25rem 1rem;
    list-style: none;
    border: 1px solid var(--dormora-outline-variant);
    border-radius: 12px;
}

/* P4U-090 step b: Household settings on desktop, the mockup's settings list: 760px, each group an outlined card with
   dividers, Leave and Delete said at the row's end. */
.dormora-household-settings--desk {
    max-width: 47.5rem;
    margin-inline: 0;
}

    .dormora-household-settings--desk .dormora-settings-list--flat {
        border: 1px solid var(--dormora-outline-variant);
        border-radius: 12px;
        overflow: hidden;
    }

        .dormora-household-settings--desk .dormora-settings-list--flat li + li {
            border-top: 1px solid var(--dormora-outline-variant);
        }

.dormora-settings-list__action {
    flex: 0 0 auto;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dormora-primary);
}

.dormora-settings-list__row--danger .dormora-settings-list__action {
    color: var(--color-danger);
}

.dormora-households-note {
    max-width: 47.5rem;
}

.dormora-roles-sheet__table {
    max-height: min(60vh, 34rem);
    overflow: auto;
}

    .dormora-roles-sheet__table:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

/* P4U-091 step a: Budget on desktop. The header line (the ledger chips and the month beside the title); the position card
   beside four figures; the bills as the desktop table, "Mark paid" on unpaid rows, Edit and Delete on hover and focus. */
.dormora-budget-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .dormora-budget-head .dormora-scope-chips {
        display: inline-flex;
        gap: 0.5rem;
    }

.dormora-budget-overview {
    display: grid;
    grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dormora-budget-position--desk {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0.875rem 1rem;
}

.dormora-budget-figures {
    display: contents;
}

.dormora-budget-figure {
    margin: 0;
    padding: 0.875rem 1rem;
    border: 1px solid var(--dormora-outline-variant);
    border-radius: 16px;
}

    .dormora-budget-figure dt {
        font-size: 0.75rem;
        color: var(--dormora-on-surface-variant);
    }

    .dormora-budget-figure dd {
        margin: 0.25rem 0 0;
        font-size: 1.25rem;
        font-weight: 600;
    }

        .dormora-budget-figure dd.dormora-budget-figure__note {
            margin-top: 0.125rem;
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--dormora-error);
        }

.dormora-budget-figure--savings dd {
    color: var(--dormora-success);
}

@media (max-width: 1279.98px) {
    .dormora-budget-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dormora-budget-position--desk {
        grid-column: 1 / -1;
    }
}

.dormora-budget-table td {
    vertical-align: middle;
}

.dormora-budget-table__item {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.dormora-budget-table__text {
    display: flex;
    flex-direction: column;
}

.dormora-budget-table__name {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.dormora-budget-table__home.rzi,
.dormora-budget-table__reminder.rzi {
    font-size: 0.9375rem;
    color: var(--dormora-on-surface-variant);
    vertical-align: text-bottom;
}

.dormora-budget-table__sub {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-budget-table__amount {
    text-align: end !important;
    font-weight: 600;
    white-space: nowrap;
}

/* P4U-099: the cell starts with its state action, so "Mark paid" lines up on every row, whether or not the row has
   Edit and Delete (waiting for hover) after it. */
.dormora-budget-table__actions {
    width: 1%;
    text-align: start !important;
    white-space: nowrap;
}

@media (hover: hover) {
    .dormora-budget-table tbody tr:not(:hover):not(:focus-within) .dormora-row-action--reveal {
        opacity: 0;
    }
}

/* P4U-091 step b: desktop's Insights, the chart card beside "Where it went" (the mockup's 1.4 to 1); the phone keeps them
   stacked. The chart is taller on desktop. */
.dormora-budget-chart__sub {
    margin: -0.375rem 0 0.5rem;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-budget-insights--desk {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

    .dormora-budget-insights--desk .dormora-budget-chart {
        margin: 0;
        padding: 1rem 1.25rem;
        border: 1px solid var(--dormora-outline-variant);
        background: none;
    }

    .dormora-budget-insights--desk .dormora-budget-chart__bars {
        height: 13.75rem;
    }

    .dormora-budget-insights--desk > .dormora-budget-list {
        margin-inline: 0;
        padding: 0.5rem 1rem 0.75rem;
        border: 1px solid var(--dormora-outline-variant);
        border-radius: 16px;
    }

@media (max-width: 1279.98px) {
    .dormora-budget-insights--desk {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* P4I-051 (R4-52; p-mk51-a, p-mk51-b, d-mk51-a): the Breakdown. A phone stacks its heading, the Outgoings | Income choice (full width) and
   the month's summary line over the rows; desktop puts the choice at the heading's end. "Manage categories" ends the outgoings (R4-26). */
.dormora-breakdown__head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

    .dormora-breakdown__head .rz-selectbar {
        display: flex;
        margin: 0.25rem 1rem 0.5rem;
    }

        .dormora-breakdown__head .rz-selectbar .rz-button {
            flex: 1;
            justify-content: center;
        }

.dormora-budget-insights--desk .dormora-breakdown__head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.25rem;
}

    .dormora-budget-insights--desk .dormora-breakdown__head .rz-selectbar {
        display: inline-flex;
        margin: 0;
    }

        .dormora-budget-insights--desk .dormora-breakdown__head .rz-selectbar .rz-button {
            flex: none;
        }

.dormora-breakdown__summary {
    margin: 0;
    padding: 0.25rem 1rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

    .dormora-breakdown__summary b {
        font-weight: 600;
        color: var(--dormora-on-surface);
    }

.dormora-breakdown__manage {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--dormora-touch-target);
    margin: 0;
    padding: 0 1rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dormora-primary);
    cursor: pointer;
}

    .dormora-breakdown__manage:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

/* P4I-046 (R4-A0; p-mk51-b, p-mk46-a): a limited Breakdown row's bar measures against its limit (amber from 80%, red over) and its line can wrap
   ("87% of £300 · £40 left for 13 days"); a row with none says "No limit" and "Set a limit" in the link colour. */
.dormora-limit--warn .dormora-row__progress > span {
    background-color: var(--dormora-warning);
}

.dormora-limit--over .dormora-row__progress > span {
    background-color: var(--dormora-error);
}

.dormora-limit__line {
    white-space: normal;
    line-height: 1.125rem;
}

.dormora-limit__line--warn {
    color: var(--dormora-warning);
}

.dormora-limit__line--over {
    color: var(--dormora-error);
}

.dormora-limit__set {
    font-weight: 600;
    color: var(--dormora-primary);
}

/* P4I-046 (R4-A3, R4-A4; p-mk46-a, d-mk46-a): the review card above Insights' chart: the tonal container, its icon, two lines and, on a phone, a chevron
   (desktop's spans both columns and ends in "Open review"). */
.dormora-review-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--dormora-touch-target);
    margin: 0.5rem 0 0.25rem;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    text-decoration: none;
}

    .dormora-review-card:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-review-card__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    font-size: 0.8125rem;
}

    .dormora-review-card__text b {
        font-size: 0.875rem;
        font-weight: 600;
    }

.dormora-review-card__open {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.dormora-budget-insights--desk > .dormora-review-card {
    grid-column: 1 / -1;
    margin: 0;
}

.dormora-budget-insights--desk .dormora-review-card__text {
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
}

/* P4I-046 (R4-A3; p-mk46-d, d-mk46-b): the review screen. A phone: the saved headline in the primary colour, then the rows; desktop: that headline and cards
   across the top, then a table of every category against last month and its limit. */
.dormora-review__saved {
    margin: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    background-color: var(--dormora-primary);
    color: var(--dormora-on-primary);
}

.dormora-review__label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 400;
}

.dormora-review__big {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
    text-wrap: balance;
}

/* M4 polish: "None marked received yet" is words, not a figure: smaller, and balanced over two lines when it still doesn't fit. */
.dormora-review__big--words {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

/* M4 polish: the review's lists are not above a FAB (the review has none), so the 5rem a flat list keeps under its last row is not left as a gap before "Also". */
.dormora-flat-list.dormora-review__list {
    padding-bottom: 0;
}

.dormora-review__neutral {
    color: var(--dormora-on-surface-variant);
}

.dormora-review__small {
    margin: 0;
    font-size: 0.75rem;
}

.dormora-review__cards {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

    .dormora-review__cards > .dormora-review__saved {
        margin: 0;
    }

.dormora-review__card {
    padding: 0.75rem 1rem;
    border: 1px solid var(--dormora-outline-variant);
    border-radius: 16px;
}

.dormora-review__value {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.dormora-review__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .dormora-review__table th,
    .dormora-review__table td {
        padding: 0.625rem 0.75rem;
        text-align: start;
        font-weight: 400;
        border-bottom: 1px solid var(--dormora-outline-variant);
    }

    .dormora-review__table thead th {
        background-color: var(--dormora-surface-container);
        font-size: 0.75rem;
        font-weight: 600;
    }

    .dormora-review__table tfoot th,
    .dormora-review__table tfoot td {
        font-weight: 600;
    }

.dormora-review__num {
    text-align: end !important;
    font-variant-numeric: tabular-nums;
}

.dormora-review__up {
    color: var(--dormora-error);
}

.dormora-review__down {
    color: var(--dormora-success);
}

.dormora-review__over {
    color: var(--dormora-error);
}

.dormora-review__amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.dormora-review__change {
    font-size: 0.6875rem;
}

.dormora-review__switch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.dormora-review__month {
    min-width: 6rem;
    text-align: center;
    font-weight: 500;
}

/* A chip that clears a filter: its words, then the ✕. */
.dormora-chip--clear.dormora-chip--selected {
    padding-inline: 1rem 0.5rem;
}

/* P4U-092 (the desktop mockup's Meals): the header line's week and "Add week to a list"; outlined and tonal header buttons. */
.dormora-meals-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dormora-page-header .dormora-header-outlined.rz-button {
    border: 1px solid var(--dormora-outline);
    background: transparent;
    color: var(--dormora-primary);
    box-shadow: none;
}

.dormora-page-header .dormora-header-tonal.rz-button {
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    box-shadow: none;
}

/* This week: a column per day and a row per slot, with the day's calories. Below the drawer's width it scrolls sideways
   inside its region, never the page. */
.dormora-week-grid {
    overflow-x: auto;
    /* P4I-M7 gate fix 5: the grid itself moves up by the table's border-spacing (it is a scroll container, so what sits above its
       top edge is clipped); the table keeps all of its top spacing, so the day headers are never cut by the row above. */
    margin: -0.5rem 0 1rem;
    border-radius: 12px;
}

    .dormora-week-grid:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-week-grid__table {
    width: 100%;
    min-width: 50rem;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0.5rem;
    margin: 0 -0.5rem -0.5rem;
    font-size: 0.8125rem;
}

    .dormora-week-grid__table td,
    .dormora-week-grid__table th {
        padding: 0;
        vertical-align: top;
    }

.dormora-week-grid__corner {
    width: 5.625rem;
}

.dormora-week-grid__day {
    font-weight: 400;
    text-align: center;
    color: var(--dormora-on-surface-variant);
}

    .dormora-week-grid__day.is-today {
        font-weight: 600;
        color: var(--dormora-primary);
    }

.dormora-week-grid__slot {
    padding-top: 0.625rem !important;
    font-weight: 400;
    text-align: start;
    color: var(--dormora-on-surface-variant);
}

.dormora-week-grid__meal {
    position: relative;
    border-radius: 12px;
    background: var(--dormora-surface-container);
}

    .dormora-week-grid__meal + .dormora-week-grid__meal {
        margin-top: 0.375rem;
    }

    .dormora-week-grid__meal.is-today {
        background: var(--dormora-primary-container);
        color: var(--dormora-on-primary-container);
    }

.dormora-week-grid__open {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: 12px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-week-grid__open:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 1px;
    }

.dormora-week-grid__name {
    overflow-wrap: anywhere;
}

.dormora-week-grid__home.rzi {
    font-size: 0.875rem;
    vertical-align: text-bottom;
    color: var(--dormora-on-surface-variant);
}

.dormora-week-grid__kcal {
    font-size: 0.6875rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-week-grid__meal.is-today .dormora-week-grid__kcal,
.dormora-week-grid__meal.is-today .dormora-week-grid__home.rzi {
    color: inherit;
}

/* The recipe and Delete sit in the card's corner, shown on hover and on keyboard focus within it (UC-M.D7). */
.dormora-week-grid__actions {
    position: absolute;
    top: 0.125rem;
    right: 0.125rem;
    display: flex;
    border-radius: 8px;
    background: var(--dormora-surface-card);
}

    .dormora-week-grid__actions:empty {
        display: none;
    }

    .dormora-week-grid__actions .dormora-meal-slot__recipe,
    .dormora-week-grid__actions .rz-button {
        width: 1.75rem;
        height: 1.75rem;
        min-width: 0;
        padding: 0;
    }

@media (hover: hover) {
    .dormora-week-grid__meal:not(:hover):not(:focus-within) .dormora-week-grid__actions {
        opacity: 0;
    }
}

.dormora-week-grid__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    min-height: 2.5rem;
    border: 1.5px dashed var(--dormora-outline);
    border-radius: 12px;
    background: none;
    color: var(--dormora-on-surface-variant);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

    .dormora-week-grid__add:hover {
        background: var(--dormora-surface-container);
    }

    .dormora-week-grid__add:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 1px;
    }

    .dormora-week-grid__add--plan {
        border-color: var(--dormora-primary);
        color: var(--dormora-primary);
    }

    .dormora-week-grid__add .rzi {
        font-size: 1.125rem;
    }

.dormora-week-grid__totals td {
    text-align: center;
    color: var(--dormora-on-surface-variant);
}

    .dormora-week-grid__totals td.is-today {
        font-weight: 600;
        color: var(--dormora-on-surface);
    }

.dormora-week-grid__totals .dormora-week-grid__slot {
    padding-top: 0 !important;
}

/* The recipe beside the list: Ingredients and Method side by side (owner), one column on the rail. */
.dormora-recipe__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 1.5rem;
    align-items: start;
}

.dormora-recipe__part {
    margin: 0.25rem 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dormora-on-surface);
}

/* Ingredients wrap in the narrow column rather than being cut short. */
.dormora-recipe__columns .dormora-row .dormora-row__title,
.dormora-recipe__columns .dormora-row .dormora-home__line {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

@media (max-width: 1279.98px) {
    .dormora-recipe__columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* P4U-092 (the desktop mockup's plan): the day chips with "45 min · Mine", the exercise table, "Add exercise". */
.dormora-workout-plan__days {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.75rem;
}

    .dormora-workout-plan__days .dormora-workout-days {
        flex: 0 1 auto;
        min-width: 0;
        margin: 0;
    }

.dormora-workout-plan__facts {
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-workout-table td {
    vertical-align: middle;
}

@media (hover: hover) {
    .dormora-workout-table tbody tr:not(:hover):not(:focus-within) .dormora-row-action--reveal {
        opacity: 0;
    }
}

.dormora-workout-plan__add.rz-button {
    margin: 0.5rem 0 1rem;
}

/* P4U-093 (the desktop mockup's profile): the circle beside the name in the pane's header, the line under it. */
.dormora-care-pane__title {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

    .dormora-care-pane__title .dormora-care-hero__avatar {
        width: 3rem;
        height: 3rem;
    }

        .dormora-care-pane__title .dormora-care-hero__avatar .rzi {
            font-size: 1.5rem;
        }

.dormora-page-header:has(+ .dormora-care-pane__facts) {
    margin-bottom: 0.25rem !important;
}

.dormora-care-pane__facts {
    margin: 0 0 0.75rem;
}

    .dormora-care-pane__facts p {
        margin: 0;
    }

/* P4U-094 (the desktop mockup's Watchlist): a row's next step and Edit, side by side on the right. */
.dormora-watchlist__buttons {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* P4U-094: Start and Mark watched are tonal, as "+1 episode" is. */
.dormora-watchlist__step.rz-button.rz-base {
    min-height: 2rem;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    white-space: nowrap;
}

/* P4U-095 (the desktop mockup's Notifications, on both sizes): each row's kind in a tonal circle (care's is tertiary, as
   Care's rows); an invitation's Accept (tonal) and Decline (text) on its row; a chip with nothing in it says so. */
.dormora-lead-circle--notification {
    color: var(--dormora-primary);
}

.dormora-row-buttons {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.dormora-row-buttons__tonal.rz-button.rz-base {
    min-height: 2rem;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    white-space: nowrap;
}

.dormora-notification-chips {
    margin-bottom: 0.25rem;
}

.dormora-notifications__none {
    margin: 1.5rem 0;
    color: var(--dormora-on-surface-variant);
}

/* P4U-095 (the desktop mockup's Settings): a short index on the left, then the sections, each a heading over an outlined
   card; the index's current item is tonal, as the navigation's. */
.dormora-settings-desk {
    display: grid;
    grid-template-columns: 13rem minmax(0, 47.5rem);
    gap: 2rem;
    align-items: start;
}

.dormora-settings-index {
    position: sticky;
    top: 1rem;
}

    .dormora-settings-index ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

.dormora-settings-index__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 1.375rem;
    background: none;
    color: var(--dormora-on-surface-variant);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
}

    .dormora-settings-index__item:hover {
        background-color: var(--dormora-surface-container-high);
    }

.dormora-settings-index__item--current,
.dormora-settings-index__item--current:hover {
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

.dormora-settings-section {
    scroll-margin-top: 1rem;
}

    .dormora-settings-section .dormora-section-label {
        padding: 1rem 0 0.5rem;
        scroll-margin-top: 1rem;
    }

    .dormora-settings-section .dormora-section-label:focus {
        outline: none;
    }

    .dormora-settings-section .dormora-section-label:focus-visible {
        outline: 2px solid var(--dormora-primary);
        outline-offset: 2px;
    }

.dormora-settings-card {
    padding: 0.25rem 1rem;
    border: 1px solid var(--dormora-outline-variant);
    border-radius: 0.75rem;
    background-color: var(--dormora-surface-card);
}

    .dormora-settings-card .dormora-settings-note--intro {
        margin-top: 0.75rem;
    }

.dormora-settings-desk .dormora-settings-modules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.5rem;
}

.dormora-settings-desk .dormora-settings-list {
    box-shadow: none;
    background: none;
}

    .dormora-settings-desk .dormora-settings-list .dormora-settings-list__row {
        padding-inline: 0;
    }

@media (max-width: 1100px) {
    .dormora-settings-desk {
        grid-template-columns: 11rem minmax(0, 1fr);
        gap: 1.25rem;
    }

    .dormora-settings-desk .dormora-settings-modules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* P4U-095 (the desktop mockup's Help and feedback): list–detail; the list is the guides with their icons (as Settings'
   index), then a tonal Send feedback; the guide reads at a comfortable width beside it. */
.dormora-help-index ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a.dormora-settings-index__item {
    text-decoration: none;
}

.dormora-help-feedback.rz-button.rz-base {
    width: 100%;
    margin-top: 0.875rem;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

.dormora-panes--help .dormora-panes__list .dormora-settings-note {
    padding-inline: 1rem;
}

.dormora-panes--help .dormora-panes__detail .dormora-help-guide,
.dormora-panes--help .dormora-panes__detail .dormora-help-questions {
    max-width: 45rem;
}

/* ---------------------------------------------------------------------------------------
   P4U-099 (the desktop gate; the owner's choices against the desktop mockup, 2026-10-17)
   --------------------------------------------------------------------------------------- */

/* The page sits on a rounded panel of its own (white; a step lighter in dark), apart from the navigation's and top
   bar's tinted background, as the mockup draws it. Desktop and the rail; phones and onboarding are unchanged. */
.dormora-shell:not(.dormora-shell--mobile):not(.dormora-shell--onboarding) .rz-body {
    background-color: var(--dormora-page-panel);
    border-start-start-radius: 1.75rem;
    border-start-end-radius: 1.75rem;
}

    .dormora-shell:not(.dormora-shell--mobile):not(.dormora-shell--onboarding) .rz-body:not(.dormora-body--panel) {
        margin-inline-end: 1rem;
    }

/* Tabs sit at the start on desktop, each as wide as its words (the phone's fill the width). */
.dormora-shell:not(.dormora-shell--mobile) .dormora-tabs__tab {
    flex: 0 0 auto;
}

/* A list pane's create button is tonal (+ List, + Recipe, + Plan, + Profile, + Note); the page's own stays filled. */
.dormora-panes:not(.dormora-panes--one) .dormora-panes__list .dormora-page-header__primary.rz-button {
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    box-shadow: none;
}

/* The round tick is 24px on both sizes, as the mockups draw it. */
.dormora-row .dormora-row__leading .rz-chkbox.dormora-row__toggle--round > .rz-chkbox-box,
.dormora-row--mobile .dormora-row__leading .rz-chkbox.dormora-row__toggle--round > .rz-chkbox-box {
    width: 1.5rem;
    height: 1.5rem;
}

/* Desktop rows have no line between them (the mockup draws none; Home and Tasks already had none). Tables and the
   settings lists keep theirs. */
.dormora-shell:not(.dormora-shell--mobile) .dormora-row {
    border-bottom: 0;
}

/* The household badge is tonal, as drawn. */
.dormora-drawer__household-badge {
    background-color: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
}

/* Who's free beside the Calendar's grid, under the toolbar (from 1280px). */
.dormora-cal-body {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.dormora-cal-body__grid {
    flex: 1 1 auto;
    min-width: 0;
}

.dormora-side-panel.dormora-side-panel--inline {
    position: static;
    z-index: auto;
    flex: 0 1 24rem;
    min-width: 22rem;
    width: auto;
    border-radius: 1.5rem;
    padding-bottom: 1rem;
}

/* Buy again's header button is tonal while its panel is open, as the mockup draws it (d-mk13-a). Radzen's text button sets
   its fill and colour with .rz-button.rz-variant-text.rz-primary(.rz-shade-default), so the open state repeats those classes. */
.rz-button.rz-variant-text.rz-primary.rz-shade-default.dormora-list-detail__buy-again-header--open {
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

/* With Buy again open beside the list, the lists pane gives up width first (17rem from 1280px). The detail needs its main column
   (22rem) and the panel (22rem) plus gap, padding and divider (about 4.5rem) = 48.5rem, so beside the 17rem pane and the nav rail
   that fits only from 1400px; below that the lists pane is hidden while the panel is open (the frame manifest's 1280 caption) and
   the detail takes the whole width. */
@media (min-width: 1280px) {
    .dormora-panes:has(.dormora-side-panel--inline) {
        grid-template-columns: 17rem minmax(0, 1fr);
    }
}

@media (min-width: 1280px) and (max-width: 1399.98px) {
    .dormora-panes:has(.dormora-side-panel--inline) {
        grid-template-columns: minmax(0, 1fr);
    }

    .dormora-panes:has(.dormora-side-panel--inline) > .dormora-panes__list {
        display: none;
    }

    .dormora-panes:has(.dormora-side-panel--inline) > .dormora-panes__detail {
        padding-inline-start: 0;
        border-inline-start: 0;
    }
}

div.dormora-list-with-panel:has(.dormora-side-panel--inline) > .dormora-list-with-panel__main {
    min-width: 22rem;
}

.dormora-list-with-panel .dormora-page-header > .rz-stack:last-child:not(:first-child) {
    flex-wrap: nowrap;
}

.dormora-list-with-panel .dormora-list-detail__buy-again-header {
    white-space: nowrap;
    flex: none;
}

/* The week and day grid sits on the page, not in a box; the day names are capitals, as drawn. */
.dormora-shell:not(.dormora-shell--mobile) .dormora-cal-grid .rz-scheduler {
    border: 0;
}

/* The week's day names are written in capitals (CalendarWorkspace; the owner's choice from the desktop mockup). */
.dormora-shell:not(.dormora-shell--mobile) .dormora-cal-head__dow {
    letter-spacing: 0.03rem;
}

/* Members: role and relationship, the module switches beside them in an outlined card when there's room. */
.dormora-shell:not(.dormora-shell--mobile) .dormora-member-pane {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem 1.25rem;
}

    .dormora-shell:not(.dormora-shell--mobile) .dormora-member-pane__main {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        max-width: 19.5rem;
    }

    /* Role's four segments need about 19rem; the modules card takes the rest (12rem up), else it wraps under. */
    .dormora-shell:not(.dormora-shell--mobile) .dormora-member-pane > .dormora-member-pane__main {
        flex: 0 0 auto;
        min-width: 0;
    }

    .dormora-shell:not(.dormora-shell--mobile) .dormora-member-pane > .dormora-member-pane__part {
        flex: 1 1 12rem;
        min-width: 0;
    }

.dormora-shell:not(.dormora-shell--mobile) .dormora-member-modules {
    padding: 0.25rem 1rem;
    border: 1px solid var(--dormora-outline-variant);
    border-radius: 0.75rem;
}

/* Customise At a glance: one grid of cards (two columns in the wide dialog, one in the phone's sheet), each an outlined
   card; Move up and Move down show while the card has the keyboard's focus; Reset to default leads the footer's line. */
.dormora-glance-editor--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 0.625rem;
    margin-top: 0.5rem;
}

.dormora-glance-editor--grid .dormora-glance-editor__row {
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    border: 1px solid var(--dormora-outline-variant);
    border-radius: 0.875rem;
}

.dormora-glance-editor__row:not(:focus-within) .dormora-glance-editor__move {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.dormora-glance-editor--grid .dormora-glance-editor__row--off {
    padding-inline-start: 2.25rem;
}


/* Chat's composer bar masks the messages scrolling under it in the page panel's colour. */
.dormora-shell:not(.dormora-shell--mobile) .dormora-quick-add--chat {
    background: var(--dormora-page-panel);
}

/* P4U-099: on the phone an invitation's Accept and Decline go under its lines, so the title keeps the row's width. */
.dormora-row--mobile:has(> .dormora-row__trailing .dormora-row-buttons) {
    flex-wrap: wrap;
}

    .dormora-row--mobile > .dormora-row__trailing:has(.dormora-row-buttons) {
        flex: 1 0 100%;
        order: 3;
        padding-inline-start: 3.5rem;
        padding-bottom: 0.5rem;
    }

/* P4I-003 (D-088, MK-01 frames b, c and d): the plain line about who can see a record and who can change it, for a kind only
   its owner changes. A tonal surface (the mockups' --s2), rounded 12px, a leading icon and the sentence, whose first part is
   bold. ScopeField's line under "Who's it for" and SharedRecordNotice share it. */
.dormora-shared-note {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0 0 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface-variant);
    font-size: 0.75rem;
    line-height: 1.4;
}

.dormora-shared-note__icon.rzi {
    flex: none;
    font-size: 1.125rem;
    color: var(--dormora-primary);
}

.dormora-shared-note__text {
    flex: 1;
    min-width: 0;
    margin: 0;
}

    .dormora-shared-note__text b {
        color: var(--dormora-on-surface);
        font-weight: 600;
    }

/* Desktop (the d-mk01 frames' .note): 13px text, a 14px radius, 12px 16px padding and a 12px gap, the line centred against
   the larger icon. The phone values above are unchanged. */
@media (min-width: 768px) {
    .dormora-shared-note {
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.875rem;
        padding: 0.75rem 1rem;
        border-radius: 0.875rem;
        font-size: 0.8125rem;
    }

    .dormora-shared-note__icon.rzi {
        font-size: 1.375rem;
    }
}

/* In a form the dialog's own gap spaces it; on desktop it sits in the value column, under the choice (icon column plus gap). */
.dormora-scope-field__readonly {
    margin: 0;
}

.dormora-scope-field__readonly--indented {
    margin-inline-start: 2.5rem;
}

@media (max-width: 767.98px) {
    .dormora-scope-field__readonly--indented {
        margin-inline-start: 0;
    }
}

/* P4I-072 (MK-72 p-mk72-b, p-mk72-c): Make a task. The "From your message" line under the title is the shared note's tonal pill, one line that ends in an
   ellipsis; the personal-note warning is the same block in the warning roles (the container, the on-container text, the amber icon: 5.0:1 or better in both themes). */
.dormora-source-line {
    margin: 0;
    align-items: center;
}

.dormora-source-line__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dormora-source-line__hint {
    margin: 0;
}

/* P4I-W06a (MK-W06 p-mkw06-b): Add to calendar's "From Jamie's message · "..."" line wraps (the quote can run to two lines on a phone), unlike Make a task's one-line pill. */
.dormora-source-line__text--wrap {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.dormora-shared-note--warning {
    background: var(--dormora-warning-container);
    color: var(--dormora-on-warning-container);
}

    .dormora-shared-note--warning .dormora-shared-note__icon.rzi {
        color: var(--dormora-warning);
    }

    .dormora-shared-note--warning .dormora-shared-note__text {
        font-size: 0.8125rem;
    }

/* ---------------------------------------------------------------------------------------
   P4I-011 (MK-11) - the recipe's servings stepper: "Servings - 2 +" with "Reset to n" once scaled, and the note that text
   ingredients don't scale. Scaled amounts are in the brand colour. 48px targets.
   --------------------------------------------------------------------------------------- */

.dormora-servings {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
}

.dormora-servings__stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--rz-base-300);
    border-radius: 999px;
}

.dormora-servings__stepper--scaled {
    border-color: var(--rz-primary);
}

.dormora-servings__button.rz-button {
    min-width: var(--dormora-touch-target);
    min-height: var(--dormora-touch-target);
    border-radius: 999px;
}

.dormora-servings__value {
    min-width: 1.75rem;
    text-align: center;
    font-weight: 600;
}

.dormora-servings__reset {
    min-height: var(--dormora-touch-target);
    margin-left: auto;
    padding: 0 0.5rem;
    border: 0;
    background: none;
    color: var(--rz-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.dormora-recipe__scaled {
    color: var(--rz-primary);
    font-weight: 700;
}

.dormora-servings__notice {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

/* ---------------------------------------------------------------------------------------
   P4I-015 (MK-15) - cooking mode. One step at a time in large type, the step's ingredients as tick chips, timers pinned above
   the step, and Back / Next fixed at the foot of a phone. Desktop keeps the shell: the steps, the current step, then the timers
   and every ingredient. Material 3 roles; 48px targets; no movement under prefers-reduced-motion.
   --------------------------------------------------------------------------------------- */

.dormora-cook {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    outline: none;
}

.dormora-cook--phone {
    padding-bottom: 6rem;
}

.dormora-cook__progress {
    display: flex;
    gap: 0.25rem;
}

    .dormora-cook__progress > i {
        flex: 1 1 0;
        height: 0.25rem;
        border-radius: 999px;
        background: var(--dormora-outline-variant);
    }

        .dormora-cook__progress > i.is-on {
            background: var(--dormora-primary);
        }

.dormora-cook__step {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dormora-cook__count {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dormora-primary);
}

.dormora-cook__text {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.35;
    font-weight: 500;
    color: var(--dormora-on-surface);
}

.dormora-cook__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dormora-cook__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: var(--dormora-touch-target);
    padding: 0 0.875rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 0.5rem;
    background: none;
    color: var(--dormora-on-surface);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

    .dormora-cook__chip .rzi {
        font-size: 1.125rem;
    }

.dormora-cook__chip--done {
    background: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    border-color: transparent;
}

    .dormora-cook__chip--done span:last-child {
        text-decoration: line-through;
    }

.dormora-cook__chip:focus-visible,
.dormora-cook__icon:focus-visible,
.dormora-cook__step-button:focus-visible,
.dormora-cook__check input:focus-visible {
    outline: 2px solid var(--dormora-focus-ring);
    outline-offset: 2px;
}

/* The timer to start, and the timers going: a tonal card with the time large and the label under it. */
.dormora-cook__start,
.dormora-cook__timer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    border-radius: 1rem;
    background: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface);
}

.dormora-cook__timer {
    background: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
}

.dormora-cook__timer--paused {
    background: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface);
}

.dormora-cook__timer--ended {
    background: var(--dormora-success-container);
    color: var(--dormora-on-success-container);
}

.dormora-cook__timers {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dormora-cook__timer-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dormora-cook__clock {
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dormora-cook__timer-label {
    font-size: 0.75rem;
    color: inherit;
    opacity: 0.85;
}

.dormora-cook__start .dormora-cook__timer-label {
    color: var(--dormora-on-surface-variant);
    opacity: 1;
}

.dormora-cook__start-button.rz-button {
    min-height: var(--dormora-touch-target);
}

.dormora-cook__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: var(--dormora-touch-target);
    min-height: var(--dormora-touch-target);
    border: 0;
    border-radius: 999px;
    background: none;
    color: inherit;
    cursor: pointer;
}

.dormora-cook__awake {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-cook__servings {
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--dormora-outline-variant);
    border-radius: 999px;
    font-size: 0.8125rem;
}

.dormora-cook__hint {
    margin: 0.25rem 0;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

/* A phone's Back / Next step, fixed to the screen (P4I-002i: .rz-body has no transform on a phone). */
.dormora-cook__bar {
    position: fixed;
    z-index: 2;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem 1rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
    background: var(--rz-body-background-color);
}

    .dormora-cook__bar .rz-button {
        min-height: var(--dormora-touch-target);
        flex: 1 1 0;
    }

        .dormora-cook__bar .rz-button.rz-primary {
            flex: 2 1 0;
        }

.dormora-cook__end {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem 1.5rem;
    text-align: center;
}

.dormora-cook__end-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 999px;
    background: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
}

    .dormora-cook__end-icon .rzi {
        font-size: 2.25rem;
    }

.dormora-cook__end-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
}

.dormora-cook__end-text {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-cook__end-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 1rem;
}

    .dormora-cook__end-actions .rz-button {
        min-height: var(--dormora-touch-target);
        width: 100%;
    }

.dormora-cook--desktop .dormora-cook__end-actions {
    align-self: center;
    width: 20rem;
}

/* Every ingredient: a square tick, the name and its amount. */
.dormora-cook__checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dormora-cook__check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--dormora-touch-target);
    cursor: pointer;
}

    .dormora-cook__check input {
        flex: none;
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
        accent-color: var(--dormora-primary);
    }

.dormora-cook__check-text {
    display: flex;
    flex-direction: column;
}

.dormora-cook__check-amount {
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-cook__check--done .dormora-cook__check-text {
    text-decoration: line-through;
    color: var(--dormora-on-surface-variant);
}

/* The phone's All ingredients sheet. */
.dormora-cook__scrim {
    position: fixed;
    z-index: 20;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.dormora-cook__sheet {
    position: fixed;
    z-index: 21;
    inset-inline: 0;
    bottom: 0;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    border-radius: 1.75rem 1.75rem 0 0;
    background: var(--dormora-surface-container);
    color: var(--dormora-on-surface);
    animation: dormora-cook-sheet 250ms cubic-bezier(0.05, 0.7, 0.1, 1);
}

@keyframes dormora-cook-sheet {
    from { transform: translateY(2rem); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.dormora-cook__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .dormora-cook__sheet-head h2 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 500;
    }

/* Desktop: the steps, the current step, the timers and ingredients. */
.dormora-cook__grid {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr) 18.75rem;
    gap: 0;
    min-height: 32rem;
}

.dormora-cook__steps {
    margin: 0;
    padding: 0.25rem 0.75rem 0 0;
    list-style: none;
    border-right: 1px solid var(--dormora-outline-variant);
}

.dormora-cook__step-button {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--dormora-touch-target);
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: 0.75rem;
    background: none;
    color: var(--dormora-on-surface-variant);
    font: inherit;
    font-size: 0.8125rem;
    text-align: start;
    cursor: pointer;
}

    .dormora-cook__step-button .rzi {
        color: var(--dormora-success);
        font-size: 1.125rem;
    }

.dormora-cook__step-button--current {
    background: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    font-weight: 600;
}

.dormora-cook__number {
    flex: none;
    width: 1.125rem;
    text-align: center;
    font-weight: 600;
    color: var(--dormora-primary);
}

.dormora-cook__main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.625rem 2rem;
}

.dormora-cook--desktop .dormora-cook__text {
    font-size: 1.875rem;
}

.dormora-cook--desktop .dormora-cook__start {
    max-width: 26rem;
}

.dormora-cook__nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
}

    .dormora-cook__nav .rz-button {
        min-height: var(--dormora-touch-target);
    }

.dormora-cook__keys {
    margin-inline-start: auto;
    font-size: 0.78rem;
    color: var(--dormora-on-surface-variant);
    white-space: nowrap;
}

.dormora-cook__side {
    padding: 0.25rem 0 0 1.125rem;
    border-left: 1px solid var(--dormora-outline-variant);
}

.dormora-cook__side-title {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

    .dormora-cook__side-title:not(:first-child) {
        margin-top: 1rem;
    }

@media (prefers-reduced-motion: reduce) {
    .dormora-cook__sheet {
        animation: none;
    }
}

/* P4I-018 (MK-18): "What's for dinner?" on At a glance. It spans both phone columns (the desktop side column is one already),
   and is a box rather than a link because it holds buttons: the title links to Meals, stretched over the card so a tap anywhere
   opens Meals as it did, with the recipe link and the buttons above that. Planned, it is in the tertiary container colour;
   the dinner's name is 16px (the mockup's .gt), the buttons small. */
.dormora-glance__card--dinner {
    position: relative;
}

.dormora-glance__stretch {
    color: inherit;
    text-decoration: none;
}

    .dormora-glance__stretch::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
    }

    .dormora-glance__stretch:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
        border-radius: 0.5rem;
    }

.dormora-glance .dormora-glance__card.dormora-glance__card--planned {
    background-color: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
}

    .dormora-glance .dormora-glance__card.dormora-glance__card--planned:hover {
        background-color: var(--dormora-tertiary-container);
        filter: brightness(0.97);
    }

    .dormora-glance__card--planned .dormora-glance__title .rzi,
    .dormora-glance__card--planned .dormora-glance__detail {
        color: inherit;
    }

.dormora-glance__dinner {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.dormora-glance__dinner-row {
    display: flex;
    align-items: flex-end;
    gap: 0.625rem;
}

.dormora-glance__dinner-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.dormora-glance__card--dinner .dormora-glance__value {
    font-size: 1rem;
    font-weight: 500;
    color: inherit;
}

.dormora-glance__recipe {
    position: relative;
    z-index: 1;
    text-decoration: none;
}

    .dormora-glance__recipe:hover,
    .dormora-glance__recipe:focus-visible {
        text-decoration: underline;
    }

.dormora-glance__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.dormora-glance__actions,
.dormora-glance__dinner-row .dormora-glance__action {
    position: relative;
    z-index: 1;
}

/* P4I-023 (MK-23): the household info sheet on Chat and announcements. A section is a card with a heading and lines; the phone
   stacks them, desktop puts three across. */
.dormora-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.dormora-shell:not(.dormora-shell--mobile) .dormora-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.875rem;
}

.dormora-info-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background: var(--dormora-primary-container);
    color: var(--rz-text-title-color);
    font-size: 0.875rem;
}

.dormora-info-section {
    padding: 0.75rem 1rem;
    border: 1px solid var(--dormora-outline-variant);
    border-radius: 0.75rem;
    background: var(--dormora-surface-card);
}

.dormora-info-section__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    color: var(--dormora-primary);
}

.dormora-info-section__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--rz-text-title-color);
}

.dormora-info-section__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-info-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    font-size: 0.9375rem;
}

.dormora-info-line__key {
    flex: 0 0 5.5rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-info-line__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dormora-info-line__act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: var(--dormora-touch-target);
    min-height: var(--dormora-touch-target);
    margin-block: -0.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dormora-primary);
    cursor: pointer;
}

    .dormora-info-line__act:hover,
    .dormora-info-line__act:focus-visible {
        background: var(--dormora-surface-container-high);
    }

/* P4I-085 (MK-23, MK-85): a Bin days section's lines are read from the bin tasks; Change opens the task. */
.dormora-info-bin {
    align-items: flex-start;
    padding-block: 0.125rem;
}

.dormora-info-bin__icon {
    flex: 0 0 auto;
    margin-top: 0.125rem;
    color: var(--dormora-primary);
}

.dormora-info-bin__line {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--dormora-touch-target);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

    .dormora-info-bin__line:hover,
    .dormora-info-bin__line:focus-visible {
        text-decoration: underline;
    }

.dormora-info-bin__source {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    color: var(--dormora-on-surface-variant);
    font-size: 0.875rem;
}

.dormora-info-bin__source-text {
    flex: 1 1 auto;
}

.dormora-info-bin__change {
    flex: 0 0 auto;
    min-height: var(--dormora-touch-target);
    padding: 0 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--dormora-primary-container);
    color: var(--dormora-primary);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

    .dormora-info-bin__change:hover,
    .dormora-info-bin__change:focus-visible {
        background: var(--dormora-surface-container-high);
    }

.dormora-info-edit__lines {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.dormora-info-edit__line {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--dormora-outline-variant);
}

.dormora-info-edit__value {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.dormora-info-edit__options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.dormora-info-edit__hide {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* P4I-025 (MK-25): a care job's choices sheet (the lede under the job's title), the history's outcome circles, a Due row's chevron and
   hint, and a profile's supplies: rows on a phone (p-mk25-d), a strip of chips on desktop (d-mk25-a). */
.dormora-menu-sheet__lede {
    margin: 0 0.5rem 0.5rem;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-lead-circle--outcome {
    background-color: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface-variant);
}

.dormora-row__chevron {
    color: var(--dormora-on-surface-variant);
}

.dormora-care-hint {
    margin: 0.625rem 1rem 0;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-supplies {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}

.dormora-supplies__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.25rem 1rem 0.125rem;
}

.dormora-supplies__title {
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--dormora-primary);
}

.dormora-supplies__edit,
.dormora-supplies__add {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.75rem;
    padding: 0 0.5rem;
    border: 0;
    background: transparent;
    color: var(--dormora-primary);
    font: inherit;
    font-size: 0.78125rem;
    font-weight: 600;
    cursor: pointer;
}

    .dormora-supplies__edit:focus-visible,
    .dormora-supplies__add:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

.dormora-supplies__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0 0.5rem 0 1rem;
}

.dormora-supplies__icon {
    color: var(--dormora-on-surface-variant);
}

.dormora-supplies__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
}

.dormora-supplies__state {
    padding-inline-end: 0.5rem;
    font-size: 0.71875rem;
    color: var(--dormora-on-surface-variant);
}

/* P4I-W04 (R7-W40, p-mkw04-b): a supply's row is the name over its state ("On Weekly groceries") or the "Add to Weekly groceries" link, with the
   list item's star at the end (the one regular flag; the gold is .dormora-star's, global). */
.dormora-supplies__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    padding-block: 0.25rem;
}

.dormora-supplies__text .dormora-supplies__name {
    flex: none;
    max-width: 100%;
}

.dormora-supplies__text .dormora-supplies__state {
    padding-inline-end: 0;
}

.dormora-supplies__add--link {
    min-height: 2rem;
    padding: 0;
    font-size: 0.75rem;
}

.dormora-supplies__add--link .rzi {
    font-size: 0.9375rem;
}

.dormora-supplies__star {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

    .dormora-supplies__star:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface-variant) 8%, transparent);
    }

    .dormora-supplies__star:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 0;
    }

.dormora-supplies__star .rzi {
    font-size: 1.5rem;
}

.dormora-supplies__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

.dormora-supplies__chip .dormora-supplies__star {
    width: 2rem;
    height: 2rem;
}

.dormora-supplies__chip .dormora-supplies__star .rzi {
    font-size: 1.125rem;
}

.dormora-supplies--strip {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    margin: -0.25rem 0 0.75rem;
}

.dormora-supplies--strip .dormora-supplies__title {
    font-size: 0.84375rem;
    color: var(--dormora-on-surface);
}

.dormora-supplies-editor {
    display: flex;
    flex-direction: column;
}

.dormora-supplies-editor__row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.75rem;
}

.dormora-supplies-editor__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------------------
   P4I-020 (D-090, MK-20) - bill splitting and shared expenses: the Balances tab (p-mk20-a, d-mk20-a), the shared expense and split
   sheets (p-mk20-b, p-mk20-c, d-mk20-b), the balance's breakdown (p-mk20-d), settle up (p-mk20-e) and the Edit sheet's Split row
   (p-mk20-g).
   --------------------------------------------------------------------------------------- */
.dormora-split-intro {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

/* Balances: phone, one column; desktop, the balances beside the table. */
.dormora-balances {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dormora-balances--desk {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
}

.dormora-balance {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
    border-radius: 16px;
    background-color: var(--dormora-surface-container);
}

.dormora-balances--desk .dormora-balance {
    border: 1px solid var(--dormora-outline-variant);
    background-color: transparent;
}

.dormora-balance__open {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.25rem;
    border: 0;
    border-radius: 12px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-balance__open:focus-visible {
        outline: 2px solid var(--dormora-primary);
        outline-offset: 2px;
    }

.dormora-balance__avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    font-size: 0.75rem;
    font-weight: 600;
}

.dormora-balance__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dormora-balance__label {
    font-size: 0.8125rem;
    color: var(--dormora-on-surface);
}

.dormora-balance__amount {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.dormora-balance__amount--owe {
    color: var(--dormora-error);
}

.dormora-balance__amount--get {
    color: var(--dormora-success);
}

.dormora-balance__action {
    flex: none;
}

.dormora-balance__chevron.rzi {
    flex: none;
    color: var(--dormora-on-surface-variant);
}

.dormora-balances__link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-balances__link:hover {
        text-decoration: underline;
    }

    .dormora-balances__link:focus-visible {
        outline: 2px solid var(--dormora-primary);
        outline-offset: 2px;
        border-radius: 4px;
    }

.dormora-balances__tag {
    margin-inline-start: 0.5rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background-color: var(--dormora-surface-container-high);
    font-size: 0.6875rem;
    color: var(--dormora-on-surface-variant);
}

/* A balance's breakdown (opened from Balances): the position card, the shared expenses, then Settled. */
.dormora-balance-card {
    display: flex;
    flex-direction: column;
}

.dormora-balance-card__sub {
    margin-top: 0.125rem;
    font-size: 0.71875rem;
    opacity: 0.85;
}

.dormora-balance-list {
    display: flex;
    flex-direction: column;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.dormora-balance-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.375rem 0.25rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
}

button.dormora-balance-row {
    cursor: pointer;
}

    button.dormora-balance-row:focus-visible {
        outline: 2px solid var(--dormora-primary);
        outline-offset: -2px;
        border-radius: 12px;
    }

.dormora-balance-row__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-balance-row__text--struck {
    text-decoration: line-through;
    color: var(--dormora-on-surface-variant);
}

.dormora-balance-row__title {
    overflow: hidden;
    font-size: 0.9375rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dormora-balance-row__sub {
    overflow: hidden;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dormora-balance-row__amount {
    flex: none;
    font-size: 0.875rem;
    font-weight: 600;
}

.dormora-balance-row__amount--owe {
    color: var(--dormora-error);
}

.dormora-balance-row__amount--good {
    color: var(--dormora-success);
}

.dormora-lead-circle--success {
    background-color: var(--dormora-success-container);
    color: var(--dormora-success);
}

/* The shared expense and split sheets. */
.dormora-split-form__what {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.5rem;
    gap: 0.5rem;
}

.dormora-split-form__summary {
    margin: 0;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-split-form__people {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dormora-split-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
}

.dormora-split-row__name {
    flex: 1 1 auto;
    min-width: 0;
}

.dormora-split-row__share {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dormora-split-row__input {
    flex: none;
    width: 6.5rem;
}

.dormora-split-row__unit {
    color: var(--dormora-on-surface-variant);
}

.dormora-split-form__total {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}

.dormora-split-form__total--ok {
    color: var(--dormora-success);
}

.dormora-split-form__total--off {
    color: var(--dormora-error);
}

.dormora-split-form__hint {
    margin: 0;
    font-size: 0.71875rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-split-form__problem {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dormora-error);
}

.dormora-split-form__note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 12px;
    background-color: var(--dormora-surface-container);
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

    .dormora-split-form__note .rzi {
        flex: none;
        font-size: 1.125rem;
        color: var(--dormora-primary);
    }

.dormora-split-form__settle input {
    font-size: 1.125rem;
    font-weight: 600;
}

/* The Edit sheet's "Split between members" row (p-mk20-g). */
.dormora-split-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 0;
    border-radius: 14px;
    background-color: var(--dormora-surface-container);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-split-link:focus-visible {
        outline: 2px solid var(--dormora-primary);
        outline-offset: 2px;
    }

.dormora-split-link__icon.rzi,
.dormora-split-link__chevron.rzi {
    flex: none;
    color: var(--dormora-on-surface-variant);
}

.dormora-split-link__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-split-link__title {
    font-size: 0.9375rem;
    font-weight: 500;
}

.dormora-split-link__sub {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

/* P4I-032 (MK-32 p-mk32-c): a repeating task's actions sit in the flow (History follows them, Mark done stays near the top): Skip this time
   and Snooze share a row above the full-width Mark done. */
.dormora-task-detail__secondary-actions {
    display: flex;
    gap: 0.75rem;
}

    .dormora-task-detail__secondary-actions .rz-button {
        flex: 1;
        width: auto;
    }

.dormora-shell--mobile .dormora-task-detail__action--stack,
.dormora-shell--mobile .dormora-task-detail__action--inline {
    position: static;
    padding-bottom: 1rem;
}

.dormora-shell--mobile .dormora-task-detail:has(.dormora-task-detail__action--stack),
.dormora-shell--mobile .dormora-task-detail:has(.dormora-task-detail__action--inline) {
    padding-bottom: 1rem !important;
}

/* P4I-032 (correction sheet, p-mk32-b, p-mk32-d): the three answers as rows, the people as chips under "done", and the note. */
.dormora-correct__sub {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-correct__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: var(--dormora-touch-target);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-correct__row:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

    .dormora-correct__row .rzi {
        color: var(--dormora-primary);
    }

.dormora-correct__label {
    flex: 1;
}

.dormora-correct__hint {
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-correct__people {
    padding: 0 0 0.5rem 2.25rem;
}

.dormora-correct__note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-surface-container-high);
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

/* P4I-033 (MK-33): the tinted countdown row on an event's detail (the Countdowns card is Coming up now, P4I-086). */
.dormora-event-detail__countdown {
    margin: 0.75rem 1rem; /* P4I-M7 gate fix 4 (p-mkw06-f): the page's gutter, as the detail rows' 1rem */
}

.dormora-cal-allday__kind.rzi,
.dormora-event-block__kind.rzi {
    margin-inline-end: 0.25rem;
    font-size: 1rem;
    vertical-align: text-bottom;
}


/* P4I-034 (MK-34): "Who's home" status. */

/* The account sheet's "Your status" row (p-mk34-a). */
.dormora-account-sheet__status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: calc(100% - 0.5rem);
    margin: 0.25rem;
    padding: 0.625rem 0.75rem;
    border: 0;
    border-radius: 0.875rem;
    background: var(--dormora-surface-container);
    color: var(--dormora-on-surface);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-account-sheet__status .rzi {
        flex: none;
        color: var(--dormora-on-surface-variant);
    }

    .dormora-account-sheet__status .dormora-account-sheet__row-text {
        flex: 1 1 auto;
    }

.dormora-account-sheet__status--set {
    background: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

    .dormora-account-sheet__status--set .rzi,
    .dormora-account-sheet__status--set .dormora-account-sheet__row-detail {
        color: var(--dormora-on-primary-container);
    }

    .dormora-account-sheet__status:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

/* The status sheet (p-mk34-b). */
.dormora-status-sheet__for {
    margin: 0 0 0.25rem;
    color: var(--dormora-on-surface-variant);
    font-size: 0.875rem;
}

.dormora-status-sheet__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.5rem 0.75rem 0.5rem 0.5rem; /* P4I-M7 gate fix 4 (p-mk86-f): the detail ("until midnight") clears the chosen row's edge */
    border: 0;
    border-radius: 0.75rem;
    background: none;
    color: var(--dormora-on-surface);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-status-sheet__option:hover,
    .dormora-status-sheet__option:focus-visible {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
    }

    .dormora-status-sheet__option:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

.dormora-status-sheet__icon {
    flex: none;
    color: var(--dormora-on-surface-variant);
}

.dormora-status-sheet__icon--home {
    color: var(--dormora-success);
}

.dormora-status-sheet__text {
    flex: 1 1 auto;
}

.dormora-status-sheet__detail {
    color: var(--dormora-on-surface-variant);
    font-size: 0.875rem;
}

.dormora-status-sheet__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0 0 0.5rem 2.25rem;
}

.dormora-status-sheet__note {
    margin: 0.5rem 0.25rem;
    color: var(--dormora-on-surface-variant);
    font-size: 0.75rem;
}

.dormora-status-sheet__error {
    margin: 0.25rem;
    color: var(--dormora-danger, #b3261e);
    font-size: 0.875rem;
}

/* The desktop avatar menu's status chips (d-mk34-a, d-mk34-b): menu items that sit in a row. */
.dormora-menu__heading {
    padding: 0.375rem 1rem 0.25rem;
}

.dormora-menu__heading-text {
    display: block;
    color: var(--dormora-primary);
    font-size: 0.78125rem;
    font-weight: 600;
}

.dormora-menu__heading-error {
    display: block;
    color: var(--dormora-danger, #b3261e);
    font-size: 0.75rem;
}

.dormora-menu__item.dormora-menu__item--chip {
    display: inline-flex;
    width: auto;
    min-height: 2rem;
    margin: 0 0 0.375rem 1rem;
    padding: 0.25rem 0.75rem;
    gap: 0.25rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
}

    .dormora-menu__item.dormora-menu__item--chip[aria-checked="true"] {
        background: var(--dormora-primary-container);
        border-color: transparent;
        color: var(--dormora-on-primary-container);
    }

    .dormora-menu__item.dormora-menu__item--chip .rzi {
        font-size: 1rem;
    }

.dormora-menu__item.dormora-menu__item--primary {
    background: var(--dormora-primary);
    border-color: transparent;
    color: var(--dormora-on-primary);
}

/* The one status pill on a member (p-mk34-f). */
.dormora-status-pill {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
}

.dormora-status-pill--home {
    background: var(--dormora-success-container);
    color: var(--dormora-success);
}

.dormora-status-pill--out {
    background: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface-variant);
}

.dormora-status-pill--away {
    background: var(--dormora-warning-container);
    color: var(--dormora-warning);
}

/* Who's free: a dot before a name that has a status, and one key line (p-mk34-e). */
.dormora-availability__dot {
    display: inline-block;
    width: 0.5625rem;
    height: 0.5625rem;
    margin-inline-end: 0.375rem;
    border-radius: 50%;
}

.dormora-availability__dot--home {
    background: var(--dormora-success);
}

.dormora-availability__dot--out {
    background: var(--dormora-on-surface-variant);
}

.dormora-availability__dot--away {
    background: var(--dormora-warning);
}

.dormora-availability__key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.25rem 0 0.5rem;
    color: var(--dormora-on-surface-variant);
    font-size: 0.71875rem;
}

    .dormora-availability__key .dormora-availability__dot {
        width: 0.5rem;
        height: 0.5rem;
        margin-inline-end: 0.25rem;
    }

/* Quick RSVP on an unanswered household event (p-mk34-d). */
.dormora-event-block-wrap--reply {
    border-radius: 12px;
    background: var(--dormora-primary-container);
}

    .dormora-event-block-wrap--reply .dormora-event-block {
        border-radius: 12px 12px 0 0;
    }

.dormora-event-reply {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem 0.5rem;
    color: var(--dormora-on-primary-container);
}

.dormora-event-reply__option {
    min-height: 1.75rem;
    padding: 0 0.75rem;
    border: 1px solid color-mix(in srgb, var(--dormora-on-primary-container) 40%, transparent);
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

    .dormora-event-reply__option:hover,
    .dormora-event-reply__option:focus-visible {
        background-color: color-mix(in srgb, var(--dormora-on-primary-container) 12%, transparent);
    }

    .dormora-event-reply__option:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 1px;
    }

.dormora-event-reply--compact {
    padding: 0.125rem 0 0;
    gap: 0.25rem;
}

    .dormora-event-reply--compact .dormora-event-reply__option {
        min-height: 1.25rem;
        padding: 0 0.5rem;
        font-size: 0.6875rem;
    }

/* Day-list rows (the phone week): the reply sits under the row. */
[role="listitem"] > .dormora-event-reply {
    color: var(--dormora-on-surface);
}

/* ---------------------------------------------------------------------------------------
   P4I-060 (R5-11 to R5-17, D-116; MK-60 p-mk60-a to p-mk60-h, d-mk60-a, d-mk60-b) - the Diary, the third tab of Meals. Colours are the stylesheet's tokens
   (4.5:1 for text and 3:1 for icons and bars in both themes); the amber is the warning role, only ever against a target that is set.
   --------------------------------------------------------------------------------------- */
.dormora-diary-daychip {
    align-items: center;
    padding-bottom: 0;
}

.dormora-diary-daychip__spacer {
    flex: 1;
}

/* Who the day is shared with, beside the day chip (a button on your own day, a plain label on someone else's). */
.dormora-diary-sharing {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: var(--dormora-touch-target, 3rem);
    margin: 0;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
    white-space: nowrap;
    cursor: pointer;
}

    .dormora-diary-sharing .rzi {
        font-size: 1rem;
    }

    .dormora-diary-sharing:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 1px;
    }

.dormora-diary-sharing--static {
    min-height: 0;
    padding-inline: 0;
    cursor: default;
}

/* Desktop's header chip: a bordered chip beside the day chip (d-mk60-a). */
.dormora-meals-head .dormora-diary-sharing {
    min-height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
}

.dormora-meals-head .dormora-diary-sharing--static {
    border-color: var(--dormora-outline-variant);
}

.dormora-diary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dormora-diary--columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 1rem;
    align-items: start;
    margin-top: 0.875rem;
}

.dormora-diary__left,
.dormora-diary__right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

@media (max-width: 1279.98px) {
    .dormora-diary--columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The totals card. */
.dormora-diary-totals {
    padding: 0.625rem 0.875rem;
    border-radius: 16px;
    background-color: var(--dormora-surface-container);
}

.dormora-diary-totals__big {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

    .dormora-diary-totals__big b {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--dormora-on-surface);
    }

    .dormora-diary-totals__big span {
        font-size: 0.78125rem;
        color: var(--dormora-on-surface-variant);
    }

.dormora-diary-totals__bar {
    height: 6px;
    margin-top: 0.375rem;
    border-radius: 3px;
    background-color: var(--dormora-surface-container-highest, var(--dormora-surface-container-high));
    overflow: hidden;
}

    .dormora-diary-totals__bar > i {
        display: block;
        height: 100%;
        border-radius: 3px;
        background-color: var(--dormora-primary);
    }

.dormora-diary-totals--over .dormora-diary-totals__bar:not(.dormora-diary-totals__bar--macro) > i {
    background-color: var(--dormora-warning);
}

.dormora-diary-totals--over .dormora-diary-totals__big span {
    color: var(--dormora-warning);
}

.dormora-diary-totals__macros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.dormora-diary-totals__macros--line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    white-space: nowrap;
}

.dormora-diary-totals__macro {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-diary-totals__macros--line .dormora-diary-totals__macro {
    flex-direction: row;
    gap: 0.25rem;
    font-size: inherit;
}

.dormora-diary-totals__macro-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dormora-on-surface);
}

.dormora-diary-totals__macros--line .dormora-diary-totals__macro-name {
    font-size: inherit;
}

.dormora-diary-totals__macro .dormora-diary-totals__bar--macro {
    margin-top: 0.25rem;
}

.dormora-diary-totals__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.875rem;
    margin-top: 0.25rem;
}

.dormora-diary-totals__link {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    min-height: var(--dormora-touch-target, 3rem);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--dormora-primary);
    cursor: pointer;
}

    .dormora-diary-totals__link .rzi {
        font-size: 1rem;
        color: var(--dormora-primary);
    }

    .dormora-diary-totals__link:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-diary--columns .dormora-diary-totals {
    padding: 0.875rem 1rem;
    border: 1px solid var(--dormora-outline-variant);
    background: none;
}

.dormora-diary--columns .dormora-diary-totals__big b {
    font-size: 1.75rem;
}

.dormora-diary--columns .dormora-diary-totals__big span {
    font-size: 0.8125rem;
}

.dormora-diary--columns .dormora-diary-totals__links {
    margin-top: 0.5rem;
}

.dormora-diary--columns .dormora-diary-totals__link {
    font-size: 0.8125rem;
}

/* Water: the label, then a glass for each to tap. */
.dormora-diary-water {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 0.25rem;
    padding: 0 0.75rem;
    border-radius: 14px;
    background-color: var(--dormora-surface-container);
}

/* The label is as tall as a glass, so it sits level with the first row whatever the number of rows. */
.dormora-diary-water__label {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: var(--dormora-touch-target, 3rem);
    font-size: 0.78125rem;
    white-space: nowrap;
}

/* The glasses start beside the label (on the line below it only when the screen is too narrow for both); FoodDiaryView.GlassRows splits them into rows of nearly equal length (48px each), so none is left alone on a second line.
   Each glass is a real 48x48 target: a fixed width that never shrinks (min-width 0 let the rows size from the 17px icon: M5 gate fix 3). */
.dormora-diary-water__glasses {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
}

.dormora-diary-water__row {
    display: flex;
}

.dormora-diary-water__glass {
    flex: 0 0 var(--dormora-touch-target, 3rem);
    width: var(--dormora-touch-target, 3rem);
    min-width: var(--dormora-touch-target, 3rem);
    min-height: var(--dormora-touch-target, 3rem);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--dormora-on-surface-variant);
}

    .dormora-diary-water__glass .rzi {
        font-size: 1.0625rem;
        color: inherit;
    }

.dormora-diary-water__glass--on {
    color: var(--dormora-primary);
}

    /* Drunk glasses are filled, the rest outlined, so the state is not the colour alone. */
    .dormora-diary-water__glass--on .rzi {
        font-variation-settings: "FILL" 1;
    }

.dormora-diary-water__glass:disabled {
    cursor: default;
}

.dormora-diary-water__glass:focus-visible {
    outline: 2px solid var(--dormora-focus-ring);
    outline-offset: -2px;
    border-radius: 0.5rem;
}

.dormora-diary--columns .dormora-diary-water {
    padding: 0 1rem;
    border: 1px solid var(--dormora-outline-variant);
    background: none;
}

.dormora-diary--columns .dormora-diary-water__label {
    font-size: 0.84375rem;
}

/* Activity (P4I-W10, p-mkw10-a): the day's cardio and steps as one read-only line under the totals; a tap opens the activity. */
.dormora-diary-activity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: var(--dormora-touch-target, 3rem);
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 14px;
    background-color: var(--dormora-surface-container);
    color: var(--dormora-on-surface);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.dormora-diary-activity__icon .rzi,
.dormora-diary-activity__icon.rzi {
    font-size: 1.25rem;
    color: var(--dormora-primary);
}

.dormora-diary-activity__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-diary-activity__line {
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

    .dormora-diary-activity__line b {
        font-weight: 600;
    }

.dormora-diary-activity__note {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-diary-activity .dormora-diary-activity__chevron {
    flex: 0 0 auto;
    color: var(--dormora-on-surface-variant);
}

.dormora-diary-activity:focus-visible {
    outline: 2px solid var(--dormora-focus-ring);
    outline-offset: 2px;
}

.dormora-diary--columns .dormora-diary-activity {
    padding-inline: 1rem;
    border: 1px solid var(--dormora-outline-variant);
    background: none;
}

/* A meal slot: a card, dashed while only a planned meal waits in it. */
.dormora-diary-slot {
    padding: 0.625rem 0.75rem;
    border-radius: 16px;
    background-color: var(--dormora-surface-container);
}

/* A slot with a logged row: the row is already 56px with its text centred (its own air), so the card keeps only a thin edge below it and the head is a tight line:
   the card is about 84px, not the 94 that the full padding made (M5 gate fix 2). */
.dormora-diary-slot:has(.dormora-diary-entry) {
    padding-block: 0.5rem 0.125rem;
}

.dormora-diary-slot--plan {
    background: transparent;
    border: 1px dashed var(--dormora-outline-variant);
}

.dormora-diary-slot__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.25;
    color: var(--dormora-on-surface-variant);
}

.dormora-diary-slot__title {
    flex: 1;
    margin: 0;
    font: inherit;
    font-weight: 600;
}

.dormora-diary-slot__kcal {
    white-space: nowrap;
}

.dormora-diary-slot__empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: var(--dormora-touch-target, 3rem);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    text-align: start;
    color: var(--dormora-on-surface-variant);
    cursor: pointer;
}

.dormora-diary-slot__empty--add {
    font-weight: 500;
    color: var(--dormora-primary);
}

    .dormora-diary-slot__empty--add .rzi {
        font-size: 1.125rem;
        color: var(--dormora-primary);
    }

    .dormora-diary-slot__empty:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

/* A logged entry: the card's own row, a tick before the name. */
.dormora-diary-entry .dormora-row--mobile,
.dormora-diary-entry.dormora-row {
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* The tick and the name share one line (the row centres its parts, not top-aligns them) and the leading column is only the tick wide, so a card is compact:
   the row is still at least 56px, and its body fills that height so the tap (a phone's sheet) has a 48px target. */
.dormora-diary-entry .dormora-row--mobile {
    align-items: center;
    padding-block: 0.25rem;
    padding-inline: 0;
}

    .dormora-diary-entry .dormora-row--mobile .dormora-row__leading {
        min-width: 1.5rem;
        min-height: 0;
    }

    .dormora-diary-entry .dormora-row--mobile .dormora-row__body {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: var(--dormora-touch-target, 3rem);
    }

.dormora-diary-entry .dormora-row__title {
    font-size: 0.875rem;
    font-weight: 400;
}

.dormora-diary-entry__tick.rzi {
    font-size: 1.25rem;
    color: var(--dormora-success);
}

/* A planned meal that nothing has been logged from: its name (the built choices), then "I ate this" (and, on desktop, "Something else"). */
.dormora-diary-plan {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.25rem 0;
}

.dormora-diary-plan__open {
    display: inline-flex;
    align-items: center;
    flex: 1 1 8rem;
    gap: 0.375rem;
    min-height: var(--dormora-touch-target, 3rem);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    text-align: start;
    color: var(--dormora-on-surface);
    cursor: pointer;
}

    .dormora-diary-plan__open:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-diary-plan__home.rzi {
    font-size: 1rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-diary-plan__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.dormora-diary-plan__ate,
.dormora-diary-plan__else {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 1.125rem;
    font: inherit;
    font-size: 0.78125rem;
    font-weight: 600;
    cursor: pointer;
}

    /* A touch target of at least 48px without a taller pill. */
    .dormora-diary-plan__ate::after,
    .dormora-diary-plan__else::after {
        content: "";
        position: absolute;
        inset: -0.375rem -0.125rem;
    }

    .dormora-diary-plan__ate:focus-visible,
    .dormora-diary-plan__else:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-diary-plan__ate {
    background-color: var(--dormora-primary);
    color: var(--dormora-on-primary);
}

    .dormora-diary-plan__ate .rzi {
        font-size: 1rem;
        color: inherit;
    }

.dormora-diary-plan__else {
    background: none;
    color: var(--dormora-primary);
}

.dormora-diary--columns .dormora-diary-slot {
    padding: 0.75rem 0.875rem;
}

.dormora-diary--columns .dormora-diary-slot__head {
    font-size: 0.78125rem;
}

/* Shared with you, last on the Diary: a phone's rows run edge to edge under a heading that does too; desktop's sit in the column. */
.dormora-diary-shared-list .dormora-section-label {
    margin-inline: calc(-1 * var(--rz-layout-body-padding, 1rem));
}

.dormora-diary--columns .dormora-diary-shared-list .dormora-section-label {
    margin-inline: 0;
    padding-inline: 0;
}

.dormora-diary--columns .dormora-diary-shared-list .dormora-flat-list {
    margin-inline: 0;
    padding-bottom: 0;
}

.dormora-diary-shared-list .dormora-shared-row {
    opacity: 0.85;
}

/* Someone else's shared day. */
.dormora-diary-shared {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dormora-diary-shared__day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.dormora-diary-shared__none {
    margin: 0;
    font-size: 0.875rem;
    color: var(--dormora-on-surface-variant);
}

/* Last 7 days: desktop's card (the shared BarChart) and the full view's rows. */
.dormora-diary--columns .dormora-diary-week {
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--dormora-outline-variant);
    background: none;
}

.dormora-diary-week .dormora-budget-chart__bars {
    height: 7.5rem;
}

.dormora-diary-week__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.dormora-diary-week__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.dormora-diary-week__open {
    min-height: var(--dormora-touch-target, 3rem);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

    .dormora-diary-week__open:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-diary-week__average {
    margin: 0;
    font-size: 0.78125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-diary-week__none {
    margin: 0;
    font-size: 0.875rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-diary-week__rows {
    display: flex;
    flex-direction: column;
}

.dormora-diary-week__row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    font-size: 0.8125rem;
}

.dormora-diary-week__day {
    flex: 0 0 4.5rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-diary-week__bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background-color: var(--dormora-surface-container-highest, var(--dormora-surface-container-high));
    overflow: hidden;
}

    .dormora-diary-week__bar > i {
        display: block;
        height: 100%;
        border-radius: 4px;
        background-color: var(--dormora-primary);
    }

.dormora-diary-week__row--over .dormora-diary-week__bar > i {
    background-color: var(--dormora-warning);
}

.dormora-diary-week__value {
    flex: 0 0 4.5rem;
    text-align: end;
    font-size: 0.75rem;
}

.dormora-diary-week__value--none {
    color: var(--dormora-on-surface-variant);
}

/* Add food, Edit entry and Daily targets: rows with an icon, two lines and a trailing icon; fields in a grid. */
.dormora-add-food__option,
.dormora-add-food__recipe {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.5rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 12px;
    background-color: var(--dormora-surface-container);
    font: inherit;
    text-align: start;
    color: var(--dormora-on-surface);
    cursor: pointer;
}

/* Dark: the dialog is the same grey as the container token, so the rows take the step above it to stay visible as cards (M5 gate fix 2). */
:root[data-theme="dark"] .dormora-add-food__option,
:root[data-theme="dark"] .dormora-add-food__recipe {
    background-color: var(--dormora-surface-container-high);
}

    .dormora-add-food__option .rzi,
    .dormora-add-food__recipe .rzi {
        flex: none;
        color: var(--dormora-primary);
    }

    .dormora-add-food__option:focus-visible,
    .dormora-add-food__recipe:focus-visible,
    .dormora-add-food__back:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-add-food__recipe--chosen {
    outline: 2px solid var(--dormora-primary);
    outline-offset: -2px;
}

.dormora-add-food__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    font-size: 0.875rem;
}

    .dormora-add-food__text small {
        font-size: 0.75rem;
        color: var(--dormora-on-surface-variant);
    }

.dormora-add-food__recipes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 40dvh;
    overflow-y: auto;
}

.dormora-add-food__heading {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dormora-primary);
}

.dormora-add-food__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.dormora-add-food__grid--two {
    grid-template-columns: 2fr 1fr;
}

.dormora-add-food__grid--halves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dormora-add-food__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dormora-add-food__hint {
    margin: 0;
    font-size: 0.78125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-add-food__error {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dormora-error);
}

.dormora-add-food__back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    min-height: var(--dormora-touch-target, 3rem);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--dormora-primary);
    cursor: pointer;
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4I-061 (MK-61) — workout sessions and the exercise library. Workouts' "Session in progress" card and Today's Start; the plan's
   Start session and Last time; the library in the Add exercise dialog; the session itself (phone: the clock, the current exercise's
   sets, the other exercises, the rest bar at the foot; desktop: the exercises on the left, the sets table on the right); Session done.
   Colours are the dormora-* roles only, in both themes; controls reach 48px on a phone.
   --------------------------------------------------------------------------------------------------------------------- */

/* Workouts: the card that offers the session kept on this device. */
.dormora-workout-resume {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.875rem;
    border-radius: 16px;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

/* Dark: no navy surface (the design system); the neutral card token with a quiet border, and the accent kept in the heading's icon and words. */
:root[data-theme="dark"] .dormora-workout-resume {
    border: 1px solid var(--dormora-outline-variant);
    background-color: var(--dormora-surface-card);
    color: var(--dormora-on-surface);
}

:root[data-theme="dark"] .dormora-workout-resume__heading {
    color: var(--dormora-primary);
}

.dormora-workout-resume__heading {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

    .dormora-workout-resume__heading .rzi {
        font-size: 1.125rem;
        color: inherit;
    }

.dormora-workout-resume__line {
    margin: 0;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.dormora-workout-resume__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

    .dormora-workout-resume__actions .rz-button {
        position: relative;
        min-height: 2.125rem;
        padding-inline: 1.25rem;
        border-radius: 1.0625rem;
    }

        /* The pill stays 34px tall; its hit area is 48px. */
        .dormora-workout-resume__actions .rz-button::before {
            content: "";
            position: absolute;
            inset: -0.4375rem 0;
        }

/* Today's card: Open plan and Start side by side. */
.dormora-workout-today__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.625rem;
}

    .dormora-workout-today__actions .dormora-workout-today__open {
        align-self: auto;
        margin-top: 0;
    }

.dormora-workout-today .rz-button.dormora-workout-today__start {
    position: relative;
    min-height: 2.125rem;
    padding-inline: 1.25rem;
    border-radius: 1.0625rem;
}

    .dormora-workout-today .rz-button.dormora-workout-today__start::before {
        content: "";
        position: absolute;
        inset: -0.4375rem 0;
    }

/* The plan screen: Start session under the description (a phone), and Last time on desktop's table. */
.dormora-workout-plan__start {
    margin-bottom: 0.625rem;
}

.dormora-workout-plan__start-button.rz-button {
    width: 100%;
    justify-content: center;
    min-height: var(--dormora-touch-target, 3rem);
}

.dormora-workout-table__last {
    color: var(--dormora-on-surface-variant);
}

/* The exercise library: a search field, the kind chips, then the exercises by body area. */
.dormora-picker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.dormora-picker__search {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.875rem;
    padding-inline: 1rem;
    border-radius: 1.4375rem;
    background-color: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface-variant);
}

    .dormora-picker__search:focus-within {
        outline: 2px solid var(--dormora-primary);
        outline-offset: -2px;
    }

.dormora-picker__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.75rem;
    border: none;
    outline: none;
    background: transparent;
    color: var(--dormora-on-surface);
    /* 16px, so a phone doesn't zoom in on focus. */
    font: inherit;
    font-size: 1rem;
}

    .dormora-picker__input::placeholder {
        color: var(--dormora-on-surface-variant);
    }

    .dormora-picker__input::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
    }

.dormora-picker__list {
    min-width: 0;
}

@media (min-width: 768px) {
    .dormora-picker__list {
        column-width: 12rem;
        column-gap: 1.5rem;
    }
}

.dormora-picker__group {
    break-inside: avoid;
    margin-bottom: 0.5rem;
}

.dormora-picker__heading {
    margin: 0.5rem 0 0.125rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dormora-primary);
}

.dormora-picker__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.5rem;
    margin: 0;
    padding: 0.25rem 0.125rem;
    border: 0;
    border-radius: 0.75rem;
    background: none;
    font: inherit;
    text-align: start;
    color: var(--dormora-on-surface);
    cursor: pointer;
}

    .dormora-picker__row:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
    }

    .dormora-picker__row:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-picker__row--own {
    color: var(--dormora-primary);
    font-weight: 600;
}

    .dormora-picker__row--own .dormora-picker__icon {
        background-color: transparent;
    }

.dormora-picker__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dormora-picker__name {
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.dormora-picker__line {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-picker__none {
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: var(--dormora-on-surface-variant);
}

/* A phone's rows keep the lead circle and the line under the name; desktop's columns are text, one line each: the name, with a mark where the measure is not weight x reps ("Push-up (reps)"). */
@media (min-width: 768px) {
    .dormora-picker__icon,
    .dormora-picker__area,
    .dormora-picker__measure--default {
        display: none;
    }

    .dormora-picker__row {
        min-height: 2rem;
        padding-inline: 0.5rem;
    }

    /* The name and its mark flow as one line of text (inline, not two flex boxes), so a name that wraps keeps the mark right after its last word (M5 gate fix 2: d-mk61-c). */
    .dormora-picker__text {
        display: block;
    }

    /* The gap between the name and its mark is the name's own end padding, so a mark that wraps onto the next line starts flush with the name (a margin on the mark kept a 6px indent there). */
    .dormora-picker__name {
        padding-inline-end: 0.375rem;
    }

    .dormora-picker__measure::before {
        content: "(";
    }

    .dormora-picker__measure::after {
        content: ")";
    }

    .dormora-picker__heading {
        margin-top: 0.75rem;
    }
}

/* The session: the clock row, shared by both sizes. */
.dormora-session-clock {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.dormora-session-clock__time {
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--dormora-on-surface);
}

.dormora-session-clock__progress {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-session-clock__pause {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--dormora-touch-target, 3rem);
    height: var(--dormora-touch-target, 3rem);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dormora-on-surface-variant);
    cursor: pointer;
}

    .dormora-session-clock__pause:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-session-paused {
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background-color: var(--dormora-warning-container);
    color: var(--dormora-on-warning-container);
    font-size: 0.8125rem;
}

/* The current exercise's card. */
.dormora-session-card {
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: 16px;
    background-color: var(--dormora-surface-container);
}

.dormora-session-card__head,
.dormora-session-detail__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dormora-session-card__name,
.dormora-session-detail__name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dormora-session-card__last {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

/* Sets: a phone's rows. */
.dormora-session-sets {
    display: flex;
    flex-direction: column;
}

.dormora-session-set {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 3.5rem;
}

.dormora-session-set__n {
    flex: none;
    width: 3rem;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-session-set__cells {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

    /* A weight beside reps gets the wider cell. */
    .dormora-session-set__cells .dormora-session-cell:first-child:not(:last-child) {
        flex-grow: 1.4;
    }

.dormora-session-set__times {
    color: var(--dormora-on-surface-variant);
}

/* A ticked set is quieter by colour, not by opacity: opacity would pull the 12px unit text under 4.5:1. The text stays on-surface-variant on the field, and the bottom edge keeps its 3:1. */
.dormora-session-set--done .dormora-session-cell {
    background-color: var(--dormora-surface-container);
    color: var(--dormora-on-surface-variant);
}

.dormora-session-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--dormora-touch-target, 3rem);
    padding-inline: 0.5rem;
    border-radius: 0.75rem 0.75rem 0 0;
    /* A filled field's bottom edge is its boundary (3:1 against the card in both themes). */
    border-bottom: 2px solid var(--dormora-on-surface-variant);
    background-color: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface);
}

    .dormora-session-cell:focus-within {
        outline: 2px solid var(--dormora-primary);
        outline-offset: -2px;
    }

.dormora-session-cell__input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    /* 16px, so a phone doesn't zoom in on focus. */
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.dormora-session-cell__unit {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-session-table .dormora-session-cell {
    flex: none;
    min-height: 2.25rem;
}

.dormora-session-table .dormora-session-cell__input {
    width: 4.5rem;
    min-height: 2rem;
}

/* The tick: a 32px circle in a 48px hit area. */
.dormora-session-tick {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--dormora-touch-target, 3rem);
    height: var(--dormora-touch-target, 3rem);
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dormora-on-primary);
    cursor: pointer;
}

    .dormora-session-tick::before {
        content: "";
        position: absolute;
        width: 2rem;
        height: 2rem;
        border: 2px solid var(--dormora-on-surface-variant);
        border-radius: 50%;
    }

    .dormora-session-tick .rzi {
        position: relative;
        font-size: 1.25rem;
        color: inherit;
    }

.dormora-session-tick--on::before {
    border-color: var(--dormora-primary);
    background-color: var(--dormora-primary);
}

.dormora-session-tick:focus-visible {
    outline: 2px solid var(--dormora-focus-ring);
    outline-offset: -2px;
    border-radius: 50%;
}

.dormora-session-add {
    align-self: flex-start;
    min-height: var(--dormora-touch-target, 3rem);
    margin: 0;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dormora-primary);
    cursor: pointer;
}

    .dormora-session-add:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-session-problem {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--dormora-error);
}

/* The other exercises: small cards on a phone. */
.dormora-session-others {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.dormora-session-other,
.dormora-session-row-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.5rem;
    margin: 0;
    padding: 0.5rem 0.875rem;
    border: 0;
    border-radius: 16px;
    background-color: var(--dormora-surface-container);
    font: inherit;
    text-align: start;
    color: var(--dormora-on-surface);
    cursor: pointer;
}

    .dormora-session-other:focus-visible,
    .dormora-session-row-button:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-session-other__num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface);
    font-size: 0.8125rem;
    font-weight: 600;
}

    .dormora-session-other__num .rzi {
        font-size: 1.125rem;
        color: inherit;
    }

.dormora-session-other__num--done {
    background-color: var(--dormora-success-container);
    color: var(--dormora-on-success-container);
}

.dormora-session-other__num--current {
    background-color: var(--dormora-primary);
    color: var(--dormora-on-primary);
}

.dormora-session-other__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .dormora-session-other__text small {
        font-size: 0.75rem;
        color: var(--dormora-on-surface-variant);
    }

.dormora-session-other__name {
    font-size: 0.9375rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.dormora-session-add--exercise {
    margin-bottom: 0.25rem;
}

/* Finish, then clear space for the rest bar docked at a phone's foot. */
.dormora-session-finish {
    margin: 0.5rem 0 5.5rem;
}

.dormora-session-finish__button.rz-button {
    width: 100%;
    justify-content: center;
    min-height: var(--dormora-touch-target, 3rem);
}

/* The rest bar: the inverse surface, +30 s and Skip in the inverse primary. */
.dormora-rest {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.5rem 0.25rem 1rem;
    border-radius: 1rem;
    background-color: var(--dormora-inverse-surface);
    color: var(--dormora-inverse-on-surface);
}

    .dormora-rest .rzi {
        color: inherit;
    }

.dormora-rest__clock {
    font-size: 1.375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dormora-rest__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
}

.dormora-rest__action {
    min-width: var(--dormora-touch-target, 3rem);
    min-height: var(--dormora-touch-target, 3rem);
    margin: 0;
    padding: 0 0.5rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--dormora-inverse-primary);
    cursor: pointer;
}

    .dormora-rest__action:focus-visible {
        outline: 2px solid var(--dormora-inverse-primary);
        outline-offset: -2px;
        border-radius: 0.75rem;
    }

.dormora-session-rest-dock {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 5;
    padding: 0 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
}

    .dormora-session-rest-dock .dormora-rest {
        pointer-events: auto;
        box-shadow: var(--dormora-dialog-shadow);
    }

/* Desktop: the Workouts split becomes the session. */
.dormora-session-split {
    display: grid;
    grid-template-columns: 20.625rem minmax(0, 1fr);
    min-height: 28rem;
}

.dormora-session-pane {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-inline-end: 1.25rem;
}

.dormora-session-pane__head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.dormora-session-pane__name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.dormora-session-pane__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dormora-on-surface-variant);
    cursor: pointer;
}

    .dormora-session-pane__close:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-session-pane .dormora-session-clock__time {
    font-size: 1.875rem;
}

.dormora-session-pane .dormora-session-clock__progress {
    font-size: 0.78125rem;
}

.dormora-session-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dormora-session-row-button {
    border-radius: 0.75rem;
    background: none;
}

    .dormora-session-row-button:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
    }

.dormora-session-row-button--current {
    background-color: var(--dormora-surface-container-high);
}

.dormora-session-pane__finish.rz-button {
    margin-top: 0.75rem;
    justify-content: center;
}

.dormora-session-detail {
    min-width: 0;
    padding-inline-start: 1.5rem;
    border-inline-start: 1px solid var(--dormora-outline-variant);
}

.dormora-session-detail__head {
    margin-bottom: 0.25rem;
}

.dormora-session-detail__name {
    font-size: 1.5rem;
    font-weight: 500;
}

.dormora-session-detail .dormora-session-card__last {
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
}

.dormora-session-detail .dormora-rest {
    margin-top: 0.75rem;
    padding-block: 0.5rem;
}

.dormora-session-table {
    width: 100%;
}

.dormora-session-table__tick {
    width: 4rem;
}

.dormora-session-table__last {
    color: var(--dormora-on-surface-variant);
}

.dormora-session-row--done .dormora-session-cell {
    background-color: var(--dormora-surface-container);
    color: var(--dormora-on-surface-variant);
}

/* The Warm-up checkbox: a 24px box (WCAG 2.5.8), 48px where the pointer is a finger. */
.dormora-session-warmup {
    width: 1.5rem;
    height: 1.5rem;
    accent-color: var(--dormora-primary);
}

@media (pointer: coarse) {
    .dormora-session-warmup {
        width: 3rem;
        height: 3rem;
    }
}

@media (hover: hover) {
    .dormora-session-table tbody tr:not(:hover):not(:focus-within) .dormora-row-action--reveal {
        opacity: 0;
    }
}

/* The session's ⋮: "Vibrate when rest ends" is a menu row with its explanation and a switch. */
.dormora-session-vibrate .rz-navigation-item-link {
    gap: 0.75rem;
    align-items: flex-start;
    max-width: 20rem;
    white-space: normal;
}

.dormora-session-vibrate__icon.rzi {
    margin-top: 0.125rem;
    color: var(--dormora-primary);
}

.dormora-session-vibrate__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

    .dormora-session-vibrate__text small {
        max-width: 12.5rem;
        font-size: 0.75rem;
        white-space: normal;
        color: var(--dormora-on-surface-variant);
    }

.dormora-session-vibrate__switch {
    flex: none;
    position: relative;
    width: 2.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    border: 2px solid var(--dormora-on-surface-variant);
    border-radius: 0.625rem;
}

    .dormora-session-vibrate__switch::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0.125rem;
        width: 0.75rem;
        height: 0.75rem;
        transform: translateY(-50%);
        border-radius: 50%;
        background-color: var(--dormora-on-surface-variant);
    }

.dormora-session-vibrate__switch--on {
    border-color: var(--dormora-primary);
    background-color: var(--dormora-primary);
}

    .dormora-session-vibrate__switch--on::after {
        left: 1.125rem;
        background-color: var(--dormora-on-primary);
    }

/* Session done. */
.dormora-session-done__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
}

.dormora-session-done__when {
    margin: 0 0 0.75rem;
    font-size: 0.78125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-session-done__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

    .dormora-session-done__grid > div {
        padding: 0.5rem 0.625rem;
        border-radius: 0.75rem;
        background-color: var(--dormora-surface-container);
    }

    .dormora-session-done__grid dt {
        font-size: 0.6875rem;
        color: var(--dormora-on-surface-variant);
    }

    .dormora-session-done__grid dd {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

.dormora-session-done__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dormora-session-done__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    border-bottom: 1px solid var(--dormora-outline-variant);
}

.dormora-session-done__num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--dormora-success-container);
    color: var(--dormora-on-success-container);
    font-size: 0.8125rem;
    font-weight: 600;
}

.dormora-session-done__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dormora-session-done__sets {
    font-size: 0.78125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-session-done__note {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

@media (max-width: 767.98px) {
    /* A phone's library has the three kind chips; tapping the chosen one again shows everything (desktop's has All). */
    .dormora-picker .dormora-choice-chips .dormora-chip:first-child:nth-last-child(4) {
        display: none;
    }

    /* The session's page header: the plan screen's title sits in the bar, so the clock is the first line under it. */
    .dormora-shell--mobile .dormora-page-header:has(+ .dormora-session-clock) {
        margin-bottom: 0 !important;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4I-062 (MK-62, R5-81) - starter routines and cardio. Workouts' rest-day card ("Nothing planned today", the next plan, "Start an empty session"), the "Log an activity" chip and Recent with its "See all".
   Colours are the dormora-* roles only, in both themes; controls reach 48px on a phone.
   --------------------------------------------------------------------------------------------------------------------- */

/* A day with nothing planned: a neutral card instead of the tertiary Today card (phone: "Today" is a section label above it, desktop: inside it). */
.dormora-workout-rest {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem 0.875rem;
    border-radius: 16px;
    background-color: var(--dormora-surface-container);
    color: var(--dormora-on-surface);
}

.dormora-workout-rest__label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--dormora-on-surface-variant);
}

.dormora-workout-rest__name {
    font-size: 0.9375rem;
    font-weight: 600;
}

.dormora-workout-rest__line {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-workout-rest__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

    .dormora-workout-rest__actions .rz-button {
        position: relative;
        min-height: 2.125rem;
        padding-inline: 1.25rem;
        border-radius: 1.0625rem;
    }

        /* The pill stays 34px tall; its hit area is 48px. */
        .dormora-workout-rest__actions .rz-button::before {
            content: "";
            position: absolute;
            inset: -0.4375rem 0;
        }

/* "Log an activity": a chip under the Today card. */
.dormora-workouts__log {
    display: flex;
    padding: 0.5rem 1rem;
}

/* Recent: the section label with "See all" at its end. The plans list above it keeps no FAB clearance (the Recent list has it). */
.dormora-workouts__recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline-end: 0.125rem;
}

.dormora-flat-list:has(+ .dormora-workouts__recent-head) {
    padding-bottom: 0;
}

.dormora-workouts__see-all {
    display: inline-flex;
    align-items: center;
    min-height: var(--dormora-touch-target, 3rem);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dormora-primary);
    text-decoration: none;
}

    .dormora-workouts__see-all:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
        border-radius: 4px;
    }

/* Log an activity: When gets more of its row than Pace so the date and the time both show on a phone. */
.dormora-activity-when {
    grid-template-columns: 3fr 2fr;
}

/* Log an activity: the pace is worked out, so its field reads as a result, not an input. */
.dormora-activity-pace.rz-textbox {
    background-color: var(--dormora-surface-container);
    color: var(--dormora-on-surface);
    -webkit-text-fill-color: var(--dormora-on-surface);
    opacity: 1;
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4I-063 (MK-63, R5-50 to R5-54, R5-82) - workout history and personal bests. The Best tag, the celebration card on Session done, an exercise's bests and chart, History's weeks, the past session page,
   the exercise link in the plan's table and the empty state's second action. Colours are the dormora-* roles only, in both themes: amber is the warning role (its text on its container 10.7:1 light and
   10.9:1 dark, its icon and bars 3:1 or more against the card and the container).
   --------------------------------------------------------------------------------------------------------------------- */

/* "Best": a small amber tag after a name. */
.dormora-best-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    margin-inline-start: 0.375rem;
    padding: 1px 0.375rem;
    border-radius: 6px;
    background-color: var(--dormora-warning-container);
    color: var(--dormora-on-warning-container);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    vertical-align: 1px;
    white-space: nowrap;
}

    .dormora-best-tag .rzi {
        font-size: 0.875rem;
        color: var(--dormora-warning);
    }

/* The celebration at the top of Session done. */
.dormora-new-best {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: 16px;
    background-color: var(--dormora-warning-container);
    color: var(--dormora-on-warning-container);
}

.dormora-new-best__icon {
    flex: none;
    font-size: 1.625rem;
    color: var(--dormora-warning);
}

.dormora-new-best__text {
    min-width: 0;
}

    .dormora-new-best__text b {
        display: block;
        font-size: 0.90625rem;
        font-weight: 600;
    }

    .dormora-new-best__text p {
        margin: 0.125rem 0 0;
        font-size: 0.8125rem;
        overflow-wrap: anywhere;
    }

/* An exercise's bests: three cards (label, value, line); a phone's are smaller. */
.dormora-exercise-bests {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.dormora-exercise-bests__heading {
    margin-bottom: 0.25rem;
}

.dormora-exercise-bests__card {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    padding: 1rem;
    border-radius: 16px;
    background-color: var(--dormora-surface-container);
}

.dormora-exercise-bests__label,
.dormora-exercise-bests__detail {
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-exercise-bests__value {
    font-size: 1.5rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* An exercise's chart: the shared BarChart in a card; the record's bar is amber. */
.dormora-exercise-chart {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    background-color: var(--dormora-surface-container);
}

.dormora-exercise-chart__title {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.dormora-exercise-chart .dormora-budget-chart__bars {
    height: 7.5rem;
}

/* The top tick's label is centred on the top line, half above it: room above the chart area keeps it off the title, on a phone and on desktop (M5 gate fix 2). */
.dormora-exercise-chart .dormora-budget-chart__body {
    padding-top: 0.5rem;
}

.dormora-exercise-chart__bar {
    background-color: var(--dormora-primary);
}

.dormora-exercise-chart__bar--best {
    background-color: var(--dormora-warning);
}

/* The exercise's kind and body area beside its name (desktop). */
.dormora-exercise-kind {
    cursor: default;
}

/* History: the chips, then each week with its total at the end of its heading. */
.dormora-history-chips {
    padding-block-end: 0.25rem;
}

.dormora-history-week__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.dormora-history-week__total {
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

/* History, an exercise's sessions and a past session have no FAB, so the flat list keeps none of its clearance under the last row of a week. */
.dormora-history-week .dormora-flat-list {
    padding-bottom: 0;
}

.dormora-history-more {
    min-height: var(--dormora-touch-target, 3rem);
    margin: 0.25rem 0 0.5rem;
    padding: 0 1rem;
    border: 0;
    background: none;
    color: var(--dormora-primary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

    .dormora-history-more:disabled {
        opacity: 0.6;
        cursor: default;
    }

    .dormora-history-more:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
        border-radius: 4px;
    }

/* A past session: its day and times, the desktop table's picked exercise, and Correct it's footer. */
.dormora-past-session__when {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-past-session__row--picked {
    background-color: var(--dormora-surface-container);
}

.dormora-past-session__pick {
    min-height: 3rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
}

    .dormora-past-session__pick:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
        border-radius: 4px;
    }

.dormora-past-session__correct {
    margin-bottom: 1rem;
}

.dormora-past-session__save {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* The plan table's exercise name, a link to its page. */
.dormora-workout-table__link {
    color: var(--dormora-primary);
    text-decoration: none;
}

    .dormora-workout-table__link:hover {
        text-decoration: underline;
    }

    .dormora-workout-table__link:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
        border-radius: 4px;
    }

/* EmptyState's second action: both actions stacked and as wide as the state. */
.dormora-feedback__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 20rem;
}

.dormora-feedback__actions .rz-button.rz-light {
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

@media (max-width: 767.98px) {
    .dormora-exercise-bests {
        gap: 0.375rem;
    }

    .dormora-exercise-bests__card {
        padding: 0.5rem;
        border-radius: 12px;
    }

    .dormora-exercise-bests__value {
        font-size: 0.9375rem;
    }

    .dormora-exercise-chart {
        padding: 0.625rem 0.75rem;
        border-radius: 14px;
    }

    .dormora-exercise-chart .dormora-budget-chart__bars {
        height: 4.375rem;
        gap: 0.375rem;
    }
}

/* P4I-064 (R5-62, R5-83; MK-64 p-mk64-e, p-mk64-h, p-mk64-c): the "Who can see it" row under a session's date (Session done, a past session) and the copy button under someone else's session. */
.dormora-session-sharing {
    margin: 0 0 0.75rem;
}

.dormora-shared-session__copy {
    padding: 0.625rem 0 0;
}

/* M5 gate fix 1a (p-mk64-c): the page has no FAB, so the rows keep no clearance and the button sits directly under them. */
.dormora-flat-list:has(+ .dormora-shared-session__copy) {
    padding-bottom: 0;
}

/* P4I-M7 gate fix 4 (p-mk23-b): "Set up bin day", the same full-width tonal button. */
.dormora-info-edit__setup.rz-button {
    width: 100%;
    justify-content: center;
    font-weight: 600;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

.dormora-shared-session__copy-button.rz-button {
    width: 100%;
    justify-content: center;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

/* ---------------------------------------------------------------------------------------
   P4I-071 (MK-71) — reactions, "Read by" and @mentions in the household chat and announcements. Reactions: a row of six round buttons at the top of a
   message's sheet and menu, small counted chips under the bubble (yours filled; a tap toggles, a long press lists who), three quick ones and "more" in
   the desktop hover pill. Read by: a line on an announcement row and its sheet. @mentions: the list above the composer and the name highlighted in
   the bubble. The colours are the theme roles, so dark follows without its own rules (4.5:1 text, 3:1 icons in both themes).
   --------------------------------------------------------------------------------------- */

/* The row of six in a message's sheet or menu: round 44px buttons on the surface container, yours in the primary container with a primary ring. */
.dormora-reaction-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.25rem 0.5rem 0.75rem;
}

.dormora-reaction-row__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: var(--dormora-touch-target, 3rem);
    max-width: 3.5rem;
    height: var(--dormora-touch-target, 3rem);
    padding: 0;
    border: 1px solid var(--dormora-outline);
    border-radius: 50%;
    background: var(--dormora-surface-container);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

    .dormora-reaction-row__button.is-mine {
        border-width: 2px;
        border-color: var(--dormora-primary);
        background: var(--dormora-primary-container);
    }

    .dormora-reaction-row__button:hover {
        background: var(--dormora-surface-container-high);
    }

    .dormora-reaction-row__button:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

/* The chips under a bubble (22px in the mockup, 32px here so a thumb finds them; yours filled). They sit under the bubble on its side. */
.dormora-chat__reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.1875rem 0 0 0.125rem;
}

.dormora-chat__row.is-mine .dormora-chat__reactions {
    justify-content: flex-end;
}

.dormora-chat__reaction {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    min-height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 1rem;
    background: var(--dormora-surface-container);
    color: var(--dormora-on-surface);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

    .dormora-chat__reaction.is-mine {
        border-color: var(--dormora-primary);
        background: var(--dormora-primary-container);
        color: var(--dormora-on-primary-container);
        font-weight: 600;
    }

    .dormora-chat__reaction:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

    /* The 48px touch target, above and below the 32px chip (the gap between chips is 4px, so the sides reach it and no further). */
    .dormora-chat__reaction::before {
        content: "";
        position: absolute;
        inset: -0.5rem -0.125rem;
    }

    .dormora-chat__reaction .dormora-chat__reaction-emoji {
        font-size: 0.9375rem;
        line-height: 1;
    }

/* A Guest only reads them: the same chip, not a control. */
span.dormora-chat__reaction {
    cursor: default;
}

/* The desktop hover pill: three quick reactions, "more", Reply, ⋯ (d-mk71-a). */
.dormora-chat__quick {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 1.0625rem;
    line-height: 1;
    cursor: pointer;
}

    .dormora-chat__quick:hover,
    .dormora-chat__quick.is-mine {
        background: var(--dormora-primary-container);
    }

    .dormora-chat__quick:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 1px;
    }

    /* The 48px touch target, above and below the 32px button (the buttons touch in the pill, so the sides stay at 32px). */
    .dormora-chat__quick::before {
        content: "";
        position: absolute;
        inset: -0.5rem 0;
    }

@media (hover: hover) {
    .dormora-chat__row--actions:not(:hover):not(:focus-within) .dormora-chat__quick {
        opacity: 0;
    }
}

/* A mentioned name in a bubble: the primary on someone else's bubble, a light tint on your own primary one (3:1 on both). */
.dormora-chat__mention {
    color: var(--dormora-primary);
    font-weight: 600;
}

.dormora-chat__row.is-mine .dormora-chat__mention {
    color: var(--dormora-on-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The @ list above the composer (p-mk71-e): a card on the surface with the heading "Mention", a 28px avatar and the name per row, greyed when Chat is off. */
.dormora-mention-picker {
    position: absolute;
    inset-inline: 0.625rem;
    bottom: 100%;
    z-index: 5;
    padding-block: 0.25rem;
    border-radius: 14px 14px 0 0;
    background-color: var(--dormora-surface-card);
    box-shadow: var(--dormora-dialog-shadow);
    color: var(--dormora-on-surface);
    max-height: 40vh;
    overflow-y: auto;
}

.dormora-mention-picker__heading {
    padding: 0.25rem 1rem 0.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dormora-on-surface-variant);
}

.dormora-mention-picker__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: var(--dormora-touch-target, 3rem);
    padding: 0.25rem 1rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

    .dormora-mention-picker__row:hover:not(.is-off),
    .dormora-mention-picker__row:focus-visible {
        background-color: var(--dormora-surface-container);
    }

    .dormora-mention-picker__row:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

    .dormora-mention-picker__row.is-off {
        opacity: 0.5;
        cursor: default;
    }

    .dormora-mention-picker__row .dormora-avatar--small {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.6875rem;
        background: var(--dormora-tertiary-container);
        color: var(--dormora-on-tertiary-container);
    }

    .dormora-mention-picker__row.is-off .dormora-avatar--small {
        background: var(--dormora-surface-container-high);
        color: var(--dormora-on-surface-variant);
    }

.dormora-mention-picker__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dormora-mention-picker__name {
    font-size: 0.9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dormora-mention-picker__note {
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

/* The phone's FAB floats above the composer; the @ list takes that place while it is open (p-mk71-e draws none). */
:root:has(.dormora-mention-picker) .dormora-fab {
    display: none;
}

/* A sheet of people (who reacted, who has read): avatar, name and a line under it, the × or the double tick trailing. */
.dormora-people {
    display: flex;
    flex-direction: column;
}

.dormora-people__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0.25rem 0.5rem;
}

    .dormora-people__row .dormora-avatar--small {
        width: 2.5rem;
        height: 2.5rem;
        background: var(--dormora-tertiary-container);
        color: var(--dormora-on-tertiary-container);
    }

    .dormora-people__row.is-unread .dormora-avatar--small {
        background: var(--dormora-surface-container-high);
        color: var(--dormora-on-surface-variant);
    }

.dormora-people__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-people__name {
    font-size: 1rem;
}

.dormora-people__note {
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-people__done {
    flex: 0 0 auto;
    color: var(--dormora-success);
}

.dormora-people__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--dormora-touch-target, 3rem);
    height: var(--dormora-touch-target, 3rem);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dormora-on-surface-variant);
    cursor: pointer;
}

    .dormora-people__action:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

/* "Read by 3 of 4" under an announcement's text (p-mk71-c): the double tick and the count in the primary, bold. A button on desktop (it opens the list). */
.dormora-readby {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dormora-primary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
}

button.dormora-readby {
    cursor: pointer;
}

    button.dormora-readby:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

    .dormora-readby .rzi {
        font-size: 1rem;
    }

.dormora-chat-side__readby {
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4I-073 (MK-73, R6-46) — a note's history. The note's "edited by ..." line is a link to it (a 48px hit area around the 12px
   line; the title field above keeps its own taps), the list is dot, who and when, the one-line summary and a chevron, and a version
   opens read-only under a banner with Restore, what differs from the note now on a marked row.
   --------------------------------------------------------------------------------------------------------------------- */
.dormora-note-page__edited {
    position: relative;
    color: var(--dormora-primary);
    font-weight: 600;
    text-decoration: underline;
}

    .dormora-note-page__edited::before {
        content: "";
        position: absolute;
        inset: -1rem -0.5rem;
    }

    .dormora-note-page__edited:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
        border-radius: 4px;
    }

/* Above the link's hit area, so a tap on the title's lower edge still lands in the title. */
.dormora-note-page__title {
    position: relative;
    z-index: 1;
}

.dormora-note-history {
    display: flex;
    flex-direction: column;
}

.dormora-note-history__head {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.dormora-note-history__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dormora-touch-target);
    height: var(--dormora-touch-target);
    margin-inline-start: -0.75rem;
    border-radius: 50%;
    color: var(--dormora-on-surface);
    text-decoration: none;
}

    .dormora-note-history__close:hover {
        background: var(--dormora-surface-container);
    }

    .dormora-note-history__close:focus-visible,
    .dormora-note-history__row:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-note-history__title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 500;
}

.dormora-note-history__sub {
    margin: 0 0 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-note-history__visibility {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-note-history__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dormora-note-history__row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: var(--dormora-touch-target);
    padding: 0.5rem 0.5rem 0.5rem 0.25rem;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
}

a.dormora-note-history__row:hover {
    background: var(--dormora-surface-container);
}

.dormora-note-history__row--selected,
a.dormora-note-history__row--selected:hover {
    background: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

.dormora-note-history__dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.4375rem;
    border-radius: 50%;
    background: var(--dormora-outline-variant);
}

.dormora-note-history__dot--now {
    background: var(--dormora-primary);
}

.dormora-note-history__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-note-history__who {
    font-size: 0.875rem;
    line-height: 1.25rem;
    overflow-wrap: anywhere;
}

.dormora-note-history__summary {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--dormora-on-surface-variant);
    overflow-wrap: anywhere;
}

.dormora-note-history__row--selected .dormora-note-history__summary {
    color: inherit;
}

.dormora-note-history__chevron.rzi {
    flex: 0 0 auto;
    align-self: center;
    font-size: 1.25rem;
    color: var(--dormora-on-surface-variant);
}

/* The desktop pane has no chevrons: the chosen version is the highlighted row. */
.dormora-note-history--desk .dormora-note-history__chevron {
    display: none;
}

.dormora-note-history__foot {
    margin: 0.625rem 0 0;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-note-version {
    display: flex;
    flex-direction: column;
}

.dormora-note-version__banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    padding: 0.625rem 0.875rem;
    border-radius: 14px;
    background: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
}

.dormora-note-version__banner-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.dormora-note-version__banner-line {
    display: block;
}

/* The mockup's 36px pill keeps its look; its hit area is 48px. */
.dormora-note-version__restore.rz-button {
    position: relative;
    flex: 0 0 auto;
    height: 2.25rem;
    padding-inline: 1rem;
    border-radius: 1.125rem;
}

    .dormora-note-version__restore.rz-button::before {
        content: "";
        position: absolute;
        inset: -0.375rem -0.25rem;
    }

.dormora-note-version__title {
    margin: 0 0 0.5rem;
    font-size: 1.3125rem;
    line-height: 1.75rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.dormora-note-version__mark {
    margin-inline-start: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    color: var(--dormora-on-surface-variant);
}

.dormora-note-version__mark--line {
    display: block;
    margin: 0.5rem 0 0;
}

.dormora-note-version__text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.dormora-note-version__changed,
.dormora-note-version__item--changed {
    border-radius: 8px;
    background: var(--dormora-error-container);
    color: var(--dormora-on-error-container);
}

.dormora-note-version__changed {
    padding: 0.5rem 0.625rem;
}

.dormora-note-version__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--dormora-touch-target);
    padding: 0 0.5rem;
}

.dormora-note-version__box.rzi {
    flex: 0 0 auto;
    color: var(--dormora-on-surface-variant);
}

.dormora-note-version__item--changed .dormora-note-version__box.rzi {
    color: inherit;
}

.dormora-note-version__item-text {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.dormora-note-version__item-text--done {
    text-decoration: line-through;
    color: var(--dormora-on-surface-variant);
}

.dormora-note-version__item--changed .dormora-note-version__item-text--done {
    color: inherit;
}

.dormora-note-version__item-label {
    flex: 0 0 auto;
    max-width: 45%;
    font-size: 0.75rem;
    line-height: 1rem;
    overflow-wrap: anywhere;
}

.dormora-note-version__attachments {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-note-version--desk .dormora-note-version__title {
    font-size: 1.375rem;
}

.dormora-note-version--desk .dormora-note-version__text,
.dormora-note-version--desk .dormora-note-version__items,
.dormora-note-version--desk .dormora-note-version__attachments {
    max-width: 40rem;
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4I-074 (R6-51, R6-55, R6-115, R6-117; MK-74 p-mk74-a to p-mk74-g) — note templates and the note tiles' selection. The pin beside "Pinned"; a tile's
   wrapper, its hidden select/menu button and a selected tile; the shared SelectionBar; a template's page; "Start from"'s group headings.
   --------------------------------------------------------------------------------------------------------------------- */
.dormora-note-section__pin {
    margin-inline-end: 0.25rem;
    font-size: 1rem;
    vertical-align: -0.2em;
}

/* "Start from" gains group headings ("Your templates", "Built in"): a little air above each run. */
.dormora-new-list__group {
    margin-top: 0.5rem;
}

.dormora-note-tile-wrap {
    position: relative;
    min-width: 0;
}

/* A long press must not start a text selection or the browser's link menu; the tile selects instead (TopAppBarHelper.js). */
.dormora-shell--mobile .dormora-note-tile {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* The selected tile (a phone, with the bar up): primary border on primary container (p-mk74-e). The title and the text keep the normal on-surface colour (not the
   container's blue on-colour): on-surface and the muted variant both hold 4.5:1 on the container in both themes (NoteTileChosenCssGuardTests). */
.dormora-note-tile--chosen {
    padding: calc(0.625rem - 1px);
    border: 2px solid var(--dormora-primary);
    background: var(--dormora-primary-container);
    color: var(--dormora-on-surface);
}

    .dormora-note-tile--chosen .dormora-note-tile__body {
        color: var(--dormora-on-surface);
    }

/* The tile's hidden control: out of sight and out of the way until a keyboard focuses it, then a 48px button at the tile's corner. */
.dormora-note-tile__menu {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    background: transparent;
    color: inherit;
}

    .dormora-note-tile__menu:focus-visible {
        inset-block-start: 0.25rem;
        inset-inline-end: 0.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--dormora-touch-target);
        height: var(--dormora-touch-target);
        clip: auto;
        border-radius: 50%;
        background: var(--dormora-surface);
        color: var(--dormora-on-surface);
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

/* The shared SelectionBar (R6-117): over the phone's top bar (z-index 5), the bar's own surface and height. */
.dormora-selection-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 4rem;
    padding: 0.5rem 0.25rem;
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
    background: var(--dormora-surface);
    color: var(--dormora-on-surface);
    box-shadow: inset 0 -1px 0 var(--dormora-outline-variant);
}

.dormora-selection-bar__count {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline-start: 0.5rem;
    font-size: 1.375rem;
    line-height: 1.75rem;
    font-weight: 400;
}

.dormora-selection-bar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--dormora-touch-target);
    height: var(--dormora-touch-target);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dormora-on-surface);
    cursor: pointer;
}

    .dormora-selection-bar__button:hover,
    .dormora-selection-bar__button:focus-visible {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
    }

    .dormora-selection-bar__button:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-selection-bar .dormora-overflow-menu {
    flex: 0 0 auto;
}

/* P4I-083a (d-mk82-a): desktop's bar sits in the page where its header is: rounded, on the primary container, the actions with their words, Select all last. A phone's is the
   fixed one above (over the top bar), on the same container so the rows' chosen tint reads against the page (p-mk82-c). */
.dormora-selection-bar {
    background: var(--dormora-primary-container);
}

.dormora-selection-bar--inline {
    position: static;
    z-index: auto;
    min-height: 3.5rem;
    margin-block-end: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    box-shadow: none;
}

.dormora-selection-bar__button--text {
    width: auto;
    gap: 0.5rem;
    padding-inline: 0.75rem;
    border-radius: 1.25rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
}

/* P4I-083a (D-112 3, R7-75): rows being selected. The leading mark is a button: a circle on a phone (the tick's place), a rounded square on desktop; a long press or a
   Shift-click must not start a text selection. Chosen rows are tinted with the primary container (the notes' chosen tile, p-mk74-e); swipes and hover buttons rest. */
.dormora-row--selecting {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.dormora-row--chosen {
    /* P4I-M7 gate fix 4 (p-mk82-c): the phone row's own surface (.dormora-swipe > .dormora-row) paints over the tint unless it is the row surface. */
    --dormora-row-surface: var(--dormora-primary-container);
    background-color: var(--dormora-primary-container);
}

.dormora-row__select-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 2px solid var(--dormora-outline);
    border-radius: 0.375rem;
    background: transparent;
    color: var(--dormora-on-primary);
    cursor: pointer;
}

.dormora-row__select-mark--round {
    border-radius: 50%;
}

.dormora-row__select-mark--chosen {
    border-color: var(--dormora-primary);
    background: var(--dormora-primary);
}

    .dormora-row__select-mark .rzi {
        font-size: 1rem;
    }

    .dormora-row__select-mark:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-row--selecting .dormora-row__actions {
    visibility: hidden;
}

.dormora-menu-sheet__separator {
    height: 1px;
    margin: 0.25rem 0;
    background: var(--dormora-outline-variant);
}

.dormora-row__select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* A note template's page: the text's sections (a heading, then its lines) and the checklist's unticked boxes; "Use this template" at a phone's foot. */
.note-template__sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 40rem;
}

.note-template__heading {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.375rem;
    font-weight: 600;
    color: var(--dormora-on-surface);
}

.note-template__line {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: var(--dormora-on-surface-variant);
}

.note-template__box {
    color: var(--dormora-on-surface-variant);
}

.note-template__use {
    padding-block: 1.25rem 0.5rem;
}

.note-template__use-button {
    width: 100%;
    min-height: var(--dormora-touch-target);
}

.note-template-editor__text {
    width: 100%;
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4I-075 (MK-75) — Entertainment's Mine / Together. The switch is the app's segmented control (a check on the chosen segment), full
   width over the tabs on a phone (p-mk75-a) and in the header beside the add button on desktop (d-mk75-a); each segment keeps a 48px
   hit area. A Together row's "who moved it on" line is a small secondary line under the progress bar (desktop: at the row's end, before
   its buttons); a Guest's plain line sits under the tabs (p-mk75-c).
   --------------------------------------------------------------------------------------------------------------------- */
.dormora-watchlist-switch {
    padding: 0.5rem 0;
}

    .dormora-watchlist-switch .dormora-segmented.rz-selectbar {
        display: flex;
        width: 100%;
    }

        .dormora-watchlist-switch .dormora-segmented.rz-selectbar .rz-button {
            position: relative;
            flex: 1 1 0;
            justify-content: center;
        }

            .dormora-watchlist-switch .dormora-segmented.rz-selectbar .rz-button::before,
            .dormora-page-header .dormora-segmented.rz-selectbar .rz-button::before {
                content: "";
                position: absolute;
                inset: -0.25rem 0;
            }

.dormora-shell--mobile .dormora-page-header:has(+ .dormora-watchlist-switch) {
    margin-bottom: 0 !important;
}

.dormora-watchlist-note {
    margin-top: 0.5rem;
}

.dormora-watchlist__who {
    font-size: 0.75rem;
    line-height: 1.25;
    color: var(--dormora-on-surface-variant);
}

.dormora-watchlist__who--desk {
    margin-inline-end: 0.5rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4I-076 (D-117, R6-123, MK-76) — ratings, collections and the viewing history.
   StarRating: the stars are the --dormora-star gold (3:1 on both surfaces, app.css's .dormora-star); a star that is on is filled and one
   that is off is outlined, so the state is never colour alone. To give a rating the stars are native radios under the icons (arrow keys, a
   radio group for a screen reader), each a 48px target (docs/03): small = a row's line (read-only), medium = the edit sheet, large = the
   rating prompt (p-mk76-a).
   --------------------------------------------------------------------------------------------------------------------- */
.dormora-stars {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

    .dormora-stars .rzi {
        font-size: inherit;
        line-height: 1;
    }

.dormora-stars--small {
    font-size: 1rem;
    gap: 0.0625rem;
}

.dormora-stars--medium {
    font-size: 1.5rem;
}

.dormora-stars--large {
    font-size: 2.5rem;
}

.dormora-stars__choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--dormora-touch-target);
    min-height: var(--dormora-touch-target);
    cursor: pointer;
}

.dormora-stars--large .dormora-stars__choice {
    min-width: 3.5rem;
    min-height: 3.5rem;
}

.dormora-stars__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

    .dormora-stars__input:focus-visible + .dormora-stars__star {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 4px;
        border-radius: 50%;
    }

.dormora-stars--interactive .dormora-stars__star {
    transition: transform 0.1s ease;
}

.dormora-stars__choice:hover .dormora-stars__star {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .dormora-stars--interactive .dormora-stars__star {
        transition: none;
    }

    .dormora-stars__choice:hover .dormora-stars__star {
        transform: none;
    }
}

/* A Watched row's line (p-mk76-b): the stars, a dot, then the words; a rewatched title's "Last ..." under it on a phone. */
.dormora-watchlist__rating {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.5rem;
}

.dormora-watchlist__last {
    display: block;
}

/* The collections' tile (p-mk76-d): the movie poster's tonal block, a bookmark on it. */
.dormora-poster--collection {
    height: 2.75rem;
    background: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
}

.dormora-watchlist-collections__chevron {
    color: var(--dormora-on-surface-variant);
}

/* The list's own room for the FAB moves below "+ New collection" (p-mk76-d draws it straight under the rows). */
.dormora-watchlist-collections {
    padding-bottom: 0;
}

.dormora-watchlist-collections__new {
    margin-bottom: 5rem;
    min-height: var(--dormora-touch-target);
    padding: 0 1rem;
    border: 0;
    background: none;
    color: var(--dormora-primary);
    font: inherit;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
}

/* An opened collection: back, its name and what is in it, its ⋮. */
.dormora-watchlist-collection__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.dormora-watchlist-collection__heading {
    flex: 1 1 auto;
    min-width: 0;
}

.dormora-watchlist-collection__name {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.dormora-watchlist-collection__count {
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-watchlist-collection__back,
.dormora-watchlist-collection__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--dormora-touch-target);
    height: var(--dormora-touch-target);
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dormora-on-surface);
    cursor: pointer;
}

    .dormora-watchlist-collection__back:hover,
    .dormora-watchlist-collection__more:hover {
        background: color-mix(in srgb, var(--dormora-on-surface-variant) 8%, transparent);
    }

/* The edit sheet's rating, collections and dates (p-mk76-c, p-mk76-f). */
.dormora-watchlist-sheet__section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dormora-watchlist-sheet__label {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-watchlist-sheet__raters,
.dormora-watchlist-sheet__dates {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dormora-watchlist-sheet__rater {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
}

.dormora-watchlist-sheet__rater-name {
    flex: 1 1 auto;
    min-width: 0;
}

.dormora-watchlist-sheet__rater--guest .dormora-watchlist-sheet__rater-name {
    color: var(--dormora-on-surface-variant);
}

.dormora-watchlist-sheet__date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--dormora-touch-target);
}

.dormora-watchlist-sheet__date-icon {
    color: var(--dormora-on-surface-variant);
}

.dormora-watchlist-sheet__date-text {
    flex: 1 1 auto;
}

.dormora-watchlist-sheet__date-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dormora-touch-target);
    height: var(--dormora-touch-target);
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dormora-on-surface-variant);
    cursor: pointer;
}

    .dormora-watchlist-sheet__date-remove[aria-disabled="true"] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.dormora-watchlist-sheet__again {
    align-self: flex-start;
    min-height: var(--dormora-touch-target);
    padding: 0;
    border: 0;
    background: none;
    color: var(--dormora-primary);
    font: inherit;
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
}

.dormora-collection-chips__none {
    color: var(--dormora-on-surface-variant);
}

.dormora-collection-sheet__lede {
    margin: 0 0 0.5rem;
    color: var(--dormora-on-surface-variant);
}

/* The rating prompt (p-mk76-a): centred, the stars big, a hint under them. */
.dormora-rating-prompt {
    text-align: center;
}

.dormora-rating-prompt__lede,
.dormora-rating-prompt__hint {
    margin: 0;
    font-size: 0.78125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-rating-prompt__stars {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.dormora-rating-prompt .dormora-dialog-footer {
    text-align: start;
}

/* P4I-077 (R6-94, p-mk77-e): the Entertainment card's second row, the soonest show waiting for its next season: its title and "Back on 3 March", under the show being watched. */
.dormora-glance__waiting {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-top: 0.375rem;
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4I-077 (D-117, MK-77) - the next season's date. A show between seasons waits in its own group under the Watching rows (p-mk77-b, d-mk77-a) with a
   tertiary-container tag ("Season 3 back 3 Mar", 7:1 on both themes) under its line on a phone and beside its title on desktop; the edit sheet's "Season 2
   finished" line is the success colour (4.5:1) and its date field has a quiet line saying what the date does (p-mk77-a).
   --------------------------------------------------------------------------------------------------------------------- */
.dormora-watchlist__waiting-heading {
    margin: 0.875rem 0 0;
    padding-inline: 0;
}

/* The Watching rows keep no FAB clearance when the waiting group follows them (it has it). */
.dormora-flat-list:has(+ .dormora-watchlist__waiting-heading) {
    padding-bottom: 0;
}

.dormora-watchlist__back {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    padding: 0.0625rem 0.5rem;
    border-radius: 0.375rem;
    background-color: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
}

    .dormora-watchlist__back .rzi {
        font-size: 0.875rem;
    }

.dormora-watchlist__back--desk {
    margin-top: 0;
    margin-inline-start: 0.5rem;
    vertical-align: middle;
}

.dormora-watchlist-sheet__finished {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78125rem;
    color: var(--dormora-success);
}

    .dormora-watchlist-sheet__finished .rzi {
        font-size: 1rem;
    }

.dormora-watchlist-sheet__hint {
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4I-078 (D-117, MK-78) - books and games. "Coming out" is the group above To read or To play (p-mk78-i, d-mk78-c): its heading is the waiting group's, without the space above it when it leads. A book's
   Page and Of are two narrow boxes (p-mk78-g), not the show's three.
   --------------------------------------------------------------------------------------------------------------------- */
.dormora-watchlist__waiting-heading--first {
    margin-top: 0.25rem;
}

.dormora-episode-fields--pages {
    grid-template-columns: repeat(2, minmax(0, 7rem));
}

/* ---------------------------------------------------------------------------------------------------------------------
   P4I-081 (MK-81) - the daily digest. Settings > Notifications' Daily digest group (p-mk81-a): a small heading, the switch and Time rows, a note under Time, a hairline before the household switches.
   "Your day" (p-mk81-c, d-mk81-a): phone, an icon heading over link rows with a chevron; desktop, a card per section with each line's detail at its right.
   --------------------------------------------------------------------------------------------------------------------- */
.dormora-settings-digest__heading {
    padding-inline: 0;
    padding-top: 0.5rem;
}

.dormora-settings-digest__note {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
}

.dormora-settings-digest__rule {
    margin: 0.25rem 0 0.5rem;
    border: 0;
    border-top: 1px solid var(--dormora-outline-variant);
}

.dormora-digest__date {
    margin: 0 0 0.25rem;
    font-size: 0.78125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-digest__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.625rem 1rem 0.25rem;
    font-size: 0.78125rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--dormora-primary);
}

    .dormora-digest__heading .rzi {
        font-size: 1.125rem;
    }

.dormora-digest__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* P4I-M7 gate fix 4 (p-mk81-c): the height of a two-line row, so a one-line event row sits in the same rhythm. */
    min-height: 3.5625rem;
    padding: 0.4375rem 1rem;
    color: inherit;
    text-decoration: none;
}

    .dormora-digest__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-digest__title {
    overflow-wrap: anywhere;
    color: var(--rz-text-title-color);
}

.dormora-digest__detail {
    font-size: 0.78125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-digest__chevron.rzi {
    flex: 0 0 auto;
    color: var(--dormora-on-surface-variant);
}

/* P4I-M7 gate fix 4 (d-mk81-a): the mockup's card grid, three across on a wide page (one column when narrow), the cards of a row as tall as the tallest (gate fix 5). */
.dormora-digest--cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    align-items: stretch;
    gap: 1rem;
}

.dormora-digest__line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
    color: inherit;
    text-decoration: none;
}

    .dormora-digest__line:hover .dormora-digest__title {
        text-decoration: underline;
    }

    .dormora-digest__line .dormora-digest__detail {
        flex: 0 0 auto;
        font-size: 0.8125rem;
    }

/* P4I-M7 polish (W03): Radzen draws the clear icon (the cross in a dropdown or date picker that allows clearing) at 40% opacity of the text colour, about 2.5:1.
   It is a control glyph, so it takes the control outline at full opacity: 3:1 or more on every control ground in both themes. */
.rz-dropdown-clear-icon {
    color: var(--dormora-outline);
    opacity: 1;
}

    .rz-dropdown-clear-icon:hover {
        color: var(--dormora-on-surface);
    }


/* ---------------------------------------------------------------------------------------
   P4I-W05 (R7-W50, R7-W51): the Calendar's sources by colour. Every rule below reads the --color-cal-* tokens in :root (the one block the owner's colours
   replace) and nothing else for colour; text and icons on a fill are black (--color-cal-on). A source also has its own icon wherever it shows.
   --------------------------------------------------------------------------------------- */
.dormora-src--your { --dormora-src-fill: var(--color-cal-your); --dormora-src-bar: var(--color-cal-your-bar); }
.dormora-src--household { --dormora-src-fill: var(--color-cal-household); --dormora-src-bar: var(--color-cal-household-bar); }
.dormora-src--task { --dormora-src-fill: var(--color-cal-task); --dormora-src-bar: var(--color-cal-task-bar); }
.dormora-src--care { --dormora-src-fill: var(--color-cal-care); --dormora-src-bar: var(--color-cal-care-bar); }
.dormora-src--workout { --dormora-src-fill: var(--color-cal-workout); --dormora-src-bar: var(--color-cal-workout-bar); }
.dormora-src--birthday { --dormora-src-fill: var(--color-cal-birthday); --dormora-src-bar: var(--color-cal-birthday-bar); }
.dormora-src--holiday { --dormora-src-fill: var(--color-cal-holiday); --dormora-src-bar: var(--color-cal-holiday-bar); }
.dormora-src--bill { --dormora-src-fill: var(--color-cal-bill); --dormora-src-bar: var(--color-cal-bill-bar); }
.dormora-src--release { --dormora-src-fill: var(--color-cal-release); --dormora-src-bar: var(--color-cal-release-bar); }
.dormora-src--pet { --dormora-src-fill: var(--color-cal-pet); --dormora-src-bar: var(--color-cal-pet-bar); }
.dormora-src--subscribed { --dormora-src-fill: var(--color-cal-subscribed); --dormora-src-bar: var(--color-cal-subscribed-bar); }
.dormora-src--sub-1 { --dormora-src-fill: var(--color-cal-sub-1); --dormora-src-bar: var(--color-cal-sub-1-bar); }
.dormora-src--sub-2 { --dormora-src-fill: var(--color-cal-sub-2); --dormora-src-bar: var(--color-cal-sub-2-bar); }
.dormora-src--sub-3 { --dormora-src-fill: var(--color-cal-sub-3); --dormora-src-bar: var(--color-cal-sub-3-bar); }
.dormora-src--sub-4 { --dormora-src-fill: var(--color-cal-sub-4); --dormora-src-bar: var(--color-cal-sub-4-bar); }
.dormora-src--sub-5 { --dormora-src-fill: var(--color-cal-sub-5); --dormora-src-bar: var(--color-cal-sub-5-bar); }

.dormora-src {
    --dormora-row-surface: var(--dormora-src-fill);
    background-color: var(--dormora-src-fill);
    color: var(--color-cal-on);
}

/* The phone's Planner: a pill per source in the day's cell (the icon in black on the fill), two at most, then "+n". */
.dormora-month-grid__day {
    justify-content: flex-start;
    gap: 0.125rem;
}

.dormora-month-grid__pills {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    width: 100%;
    padding-inline: 0.125rem;
    min-height: 2.125rem;
}

.dormora-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.9375rem;
    border-radius: 0.4375rem;
}

    .dormora-pill .rzi {
        font-size: 0.75rem;
        line-height: 1;
        color: var(--color-cal-on);
    }

.dormora-pill-more {
    font-size: 0.625rem;
    line-height: 0.75rem;
    text-align: center;
}

/* The day's rows (phone): the source's fill, a darker bar at the start, its icon, the title and the line saying where it comes from. */
.dormora-event-block.dormora-src {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-inline-start: 6px solid var(--dormora-src-bar);
}

.dormora-event-block__src.rzi {
    flex: none;
    font-size: 1.5rem;
    color: var(--color-cal-on);
}

.dormora-event-block__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.dormora-event-block.dormora-src .dormora-event-block__title,
.dormora-event-block.dormora-src .dormora-event-block__line {
    color: var(--color-cal-on);
}

.dormora-event-block--generated {
    cursor: pointer;
}

.dormora-care-block.dormora-src,
.dormora-day-task.dormora-src {
    --dormora-row-surface: var(--dormora-src-fill);
    border-inline-start: 6px solid var(--dormora-src-bar);
}

    .dormora-care-block.dormora-src > .dormora-row--mobile,
    .dormora-day-task.dormora-src > .dormora-row--mobile {
        padding: 0.4375rem 0.75rem 0.4375rem 0.625rem;
        color: var(--color-cal-on);
    }

    .dormora-day-task.dormora-src > .dormora-row--mobile .dormora-row__leading {
        margin-inline-start: 0.25rem;
    }

    /* P4I-M7 gate fix 4 (p-mkw05-b): a care row's icon gutter is the other source rows' (24px icon, 4px in), not the 48px target, so its title lines up with theirs. */
    .dormora-care-block.dormora-src > .dormora-row--mobile .dormora-row__leading {
        min-width: 1.5rem;
        min-height: 1.5rem;
        margin-inline-start: 0.25rem;
    }

    .dormora-src .dormora-row__title,
    .dormora-src .dormora-row__meta,
    .dormora-src .dormora-scope-mark,
    .dormora-src .dormora-care-block__line,
    .dormora-src .dormora-care-block__line--warning {
        color: var(--color-cal-on);
    }

    .dormora-src .dormora-row__toggle .rz-chkbox-box {
        border-color: var(--color-cal-on);
    }

.dormora-row__src-icon.rzi {
    font-size: 1.5rem;
    color: var(--color-cal-on);
}

/* The desktop grids: a block, the all-day bar and the Planner's entry in the source's fill with its bar at the start. */
.dormora-cal-grid .rz-event-content.dormora-src,
.rz-scheduler .rz-event-content.dormora-src {
    background-color: var(--dormora-src-fill);
    color: var(--color-cal-on);
    border-inline-start: 4px solid var(--dormora-src-bar);
    box-shadow: none;
}

    .rz-scheduler .rz-event-content.dormora-src .rzi {
        color: var(--color-cal-on);
    }

.dormora-cal-event__src.rzi {
    flex: none;
    font-size: 0.9375rem;
    vertical-align: text-bottom;
    margin-inline-end: 0.125rem;
}

.dormora-cal-allday.dormora-src {
    background-color: var(--dormora-src-fill);
    color: var(--color-cal-on);
    border-inline-start: 4px solid var(--dormora-src-bar);
    box-shadow: none;
}

    .dormora-cal-allday.dormora-src .rzi {
        color: var(--color-cal-on);
    }

.dormora-cal-todo__count.dormora-src {
    box-shadow: none;
    border-inline-start: 3px solid var(--dormora-src-bar);
}

    .dormora-cal-todo:hover .dormora-cal-todo__count.dormora-src,
    .dormora-cal-todo[aria-expanded="true"] .dormora-cal-todo__count.dormora-src {
        background-color: var(--dormora-src-fill);
        filter: brightness(0.95);
    }

/* The Key: every source with its colour and icon (the phone's sheet and the desktop's popover), then the two marks that are not colours. */
.dormora-key {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dormora-key__sub {
    margin: 0 0 0.25rem;
    font-size: 0.875rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-key__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.25rem;
}

.dormora-key__swatch {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
}

    .dormora-key__swatch .rzi {
        font-size: 1.375rem;
        color: var(--color-cal-on);
    }

.dormora-key__mark {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-key__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
}

.dormora-key__hint {
    flex: 0 1 auto;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
    text-align: end;
}

.dormora-key__sep {
    margin-top: 0.125rem;
}

/* P4I-W05b (D-119.18): "Show on calendar", a switch on each source's row. The label and its hint stack beside it; the head names the column; the off switch's
   boundary is --dormora-outline (3:1 against the surface in both themes), the text keeps the on-surface colours (4.5:1). */
.dormora-key__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dormora-key__head {
    align-self: flex-end;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dormora-on-surface-variant);
}

.dormora-key__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

    .dormora-key__text .dormora-key__hint {
        text-align: start;
    }

.dormora-key__row:has(> .dormora-key__switch) {
    min-height: 2.75rem;
}

.dormora-key__switch {
    flex: none;
}

    .dormora-key__switch .rz-switch-circle {
        border-color: var(--dormora-outline);
    }

/* The Key button's dot while any source is hidden (the phone's pill by TopBarAction.Dot, P4I-M7 polish 2; the desktop's button by a class). */
.dormora-topbar__action--dot .dormora-topbar__pill,
.dormora-cal-bar__key .rz-button.dormora-cal-key-btn--dot {
    position: relative;
}

    .dormora-topbar__action--dot .dormora-topbar__pill::after,
    .dormora-cal-bar__key .rz-button.dormora-cal-key-btn--dot::after {
        content: "";
        position: absolute;
        top: -0.125rem;
        inset-inline-end: -0.125rem;
        width: 0.625rem;
        height: 0.625rem;
        border: 2px solid var(--dormora-surface);
        border-radius: 50%;
        background-color: var(--dormora-primary);
        box-sizing: content-box;
        pointer-events: none;
    }

/* Calendar's Key in the phone's top bar: the icon and the word in an outlined pill; the button is the 48px target. */
.dormora-topbar__action--text {
    width: auto;
    padding-inline: 0.25rem;
    border-radius: 1.5rem;
    color: var(--dormora-on-surface);
}

.dormora-topbar__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding-inline: 0.75rem;
    border: 1px solid var(--dormora-outline);
    border-radius: 1.125rem;
    font-size: 0.875rem;
    font-weight: 500;
}

    .dormora-topbar__pill .rzi {
        font-size: 1.125rem;
    }

/* P4I-M7 gate fix 4 (p-mkw05-a, blocking): on a phone the Key is the icon in its outlined pill (still named "Colour key" by its
   aria-label and title), so the month beside it is never cut; the word returns from 440px, where it fits. */
@media (max-width: 439.98px) {
    .dormora-topbar__pill {
        padding-inline: 0.4375rem;
        gap: 0;
    }

    .dormora-topbar__pill-text {
        display: none;
    }
}


/* ---------------------------------------------------------------------------------------
   P4I-086 (R7-H1 to R7-H9; p-mk86-c, p-mk86-f, p-mk86-g, d-mk86-a): Home and At a glance, revamped.
   --------------------------------------------------------------------------------------- */

/* Today scrolls to under the top bar. */
#dormora-home-today {
    scroll-margin-top: 4rem;
}

/* Today's and Coming up's headers: the label at the start, its counts at the end; everything else under them. */
.dormora-home__section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

    .dormora-home__section > :not(.dormora-section-label):not(.dormora-home__counts):not(.dormora-home__scope) {
        grid-column: 1 / -1;
    }

.dormora-home__counts {
    padding: 0.625rem 1rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: var(--dormora-on-surface-variant);
    text-align: end;
}

.dormora-home-desk .dormora-home__counts {
    padding-inline: 0.75rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Gate fix (d-mk33-b): the heading keeps its own width and the counts take the rest, so a long line shortens instead of running into "Today". */
.dormora-home-desk .dormora-home__section {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.5rem;
}

.dormora-home__more {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 0.25rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 0;
    background: none;
    color: var(--dormora-primary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.dormora-home-desk .dormora-home__more {
    padding-inline: 0.75rem;
}

    .dormora-home__more:focus-visible,
    .dormora-next5:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
        border-radius: 0.5rem;
    }

    .dormora-home__more .rzi {
        font-size: 1.25rem;
    }

/* The "Next 5 days" row (phones): the old Coming up rows folded into one. */
.dormora-next5 {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.5625rem 1rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.dormora-next5__icon.rzi {
    flex: none;
    width: 2.25rem;
    font-size: 1.375rem;
    text-align: center;
    color: var(--dormora-primary);
}

.dormora-next5__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-next5__title {
    font-size: 1rem;
    line-height: 1.375rem;
}

.dormora-next5__line {
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--dormora-on-surface-variant);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dormora-next5__chevron.rzi {
    flex: none;
    color: var(--dormora-on-surface-variant);
}

/* The tiles: a card with an action is a box (its title links, stretched over it); Who's home and a dinner idea take the whole row on a phone; the tile row on desktop. */
.dormora-glance__card--wide,
.dormora-glance__card--home {
    grid-column: 1 / -1;
}

.dormora-glance__card--action,
.dormora-glance__card--home,
.dormora-glance__card--important {
    position: relative;
}

.dormora-glance__grid--row .dormora-glance__card--wide,
.dormora-glance__grid--row .dormora-glance__card--home,
.dormora-glance__grid--row .dormora-glance__card--important {
    grid-column: span 2;
}

.dormora-glance__card--action .dormora-glance__actions {
    margin-top: auto;
    padding-top: 0.25rem;
}

.dormora-glance__card--important {
    gap: 0;
}

/* P4I-086: the desktop Most important tile's lines: icon, title over detail, and Done or Open. */
.dormora-important__line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--dormora-outline-variant);
}

.dormora-important__icon.rzi {
    flex: none;
    font-size: 1.375rem;
    color: inherit;
}

.dormora-important__icon--warning.rzi {
    color: var(--dormora-error);
}

.dormora-important__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-important__name {
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dormora-important__detail {
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.dormora-important__detail--warning {
    color: var(--dormora-error);
}

.dormora-important__done.rz-button {
    position: relative;
    z-index: 1;
    flex: none;
    min-width: 4rem;
    min-height: 2.5rem;
    border-radius: 1.25rem;
}

.dormora-glance__stretch--button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}

.dormora-glance__home-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .dormora-glance__home-head .dormora-glance__title {
        flex: 1 1 auto;
    }

.dormora-glance__set.rz-button {
    position: relative;
    z-index: 1;
    flex: none;
}

.dormora-whome {
    display: flex;
    justify-content: space-around;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.dormora-whome__member {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    min-width: 0;
    text-align: center;
}

.dormora-whome__avatar {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    font-size: 0.75rem;
    font-weight: 600;
}

.dormora-whome__dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid var(--dormora-surface-container);
    border-radius: 50%;
}

.dormora-whome__dot--home { background-color: var(--dormora-success); }
.dormora-whome__dot--out { background-color: var(--dormora-on-surface-variant); }
.dormora-whome__dot--away { background-color: var(--dormora-warning); }
.dormora-whome__dot--none { display: none; }

.dormora-whome__name {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dormora-whome__status {
    font-size: 0.6875rem;
    line-height: 0.875rem;
    color: var(--dormora-on-surface-variant);
}

/* Who's home's sheet (p-mk86-f): everyone with the one status they set, then the person's own to set. */
.dormora-whosheet__note {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-whosheet__member {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0;
}

.dormora-whosheet__name {
    flex: 1 1 auto;
    font-weight: 500;
}

.dormora-whosheet__status {
    padding: 0.125rem 0.625rem;
    border-radius: 1rem;
    background-color: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface);
    font-size: 0.75rem;
    font-weight: 500;
}

.dormora-whosheet__status--home {
    background-color: var(--dormora-success-container);
    color: var(--dormora-success);
}

.dormora-whosheet__status--away {
    background-color: var(--dormora-warning-container);
    color: var(--dormora-warning);
}

.dormora-whosheet__status--none {
    background: none;
    color: var(--dormora-on-surface-variant);
}

/* Coming up's rows (the page and desktop's column): the source's colour in a square with its icon in black, the title and the line, then the day (desktop) or a chevron. */
.dormora-comingup {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.5rem 1rem;
    color: inherit;
    text-decoration: none;
}

    .dormora-comingup:hover {
        background-color: var(--dormora-surface-container);
        color: inherit;
        text-decoration: none;
    }

    .dormora-comingup:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

.dormora-comingup--wide {
    padding-inline: 0.75rem;
    border-radius: 0.75rem;
}

.dormora-comingup__swatch {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
}

    .dormora-comingup__swatch.dormora-src .rzi {
        font-size: 1.25rem;
        color: var(--color-cal-on);
    }

.dormora-comingup__swatch--neutral {
    background-color: var(--dormora-surface-container-high);
    color: var(--dormora-on-surface);
}

    .dormora-comingup__swatch--neutral .rzi {
        font-size: 1.25rem;
        color: var(--dormora-primary);
    }

.dormora-comingup__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-comingup__title {
    font-size: 0.9375rem;
    line-height: 1.25rem;
    overflow-wrap: anywhere;
}

.dormora-comingup__line,
.dormora-comingup__when {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-comingup__when {
    flex: none;
    font-size: 0.8125rem;
}

.dormora-comingup__chevron.rzi {
    flex: none;
    color: var(--dormora-on-surface-variant);
}

.dormora-comingup-page__range {
    margin: 0;
    padding: 0 0 0.25rem; /* P4I-M7 gate fix 4 (p-mk86-g): the page's own edge, as the week headings */
    font-size: 0.75rem;
    color: var(--dormora-on-surface-variant);
}

/* P4I-100c (MK-100): the calendars the person follows. A swatch is the calendar's own fill and bar (the .dormora-src--sub-n classes above); the other calendars' side of the Colour key (P4I-100d)
   sits in the phone's Key sheet and the desktop's popover; Manage and the pickers use the same swatch. Text is the surface's own colours, never on a fill except the swatch's tick (black, 7:1 or better). */
.dormora-subs-swatch {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid var(--dormora-src-bar);
    background-color: var(--dormora-src-fill);
    color: var(--color-cal-on);
}

.dormora-subs-swatch--large {
    width: 2rem;
    height: 2rem;
}

    .dormora-subs-swatch--large .rzi {
        font-size: 1.25rem;
    }

.dormora-subs-head {
    padding: 0.75rem 0.5rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dormora-on-surface-variant);
}

.dormora-subs-menu {
    display: flex;
    flex-direction: column;
}

.dormora-subs-menu__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0 0.5rem;
}

.dormora-subs-menu__toggle,
.dormora-subs-menu__action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--dormora-on-surface);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.dormora-subs-menu__toggle {
    flex: 1 1 auto;
    min-width: 0;
}

.dormora-subs-menu__action {
    width: 100%;
}

    .dormora-subs-menu__toggle:hover,
    .dormora-subs-menu__action:hover {
        background-color: color-mix(in srgb, var(--dormora-on-surface) 8%, transparent);
    }

    .dormora-subs-menu__toggle:focus-visible,
    .dormora-subs-menu__action:focus-visible,
    .dormora-subs-menu__retry:focus-visible,
    .dormora-subs-picker__option:focus-visible,
    .dormora-subs-help:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

.dormora-subs-menu__text,
.dormora-subs-manage__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-subs-menu__name,
.dormora-subs-manage__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dormora-subs-menu__state,
.dormora-subs-manage__state {
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-subs-menu__state--bad,
.dormora-subs-manage__state--bad {
    color: var(--dormora-error);
}

.dormora-subs-menu__tick {
    flex: none;
    color: var(--dormora-primary);
}

.dormora-subs-menu__retry {
    flex: none;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--dormora-primary);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

    .dormora-subs-menu__retry:hover {
        background-color: color-mix(in srgb, var(--dormora-primary) 8%, transparent);
    }

.dormora-subs-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.dormora-subs-picker__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

    .dormora-subs-picker__option[aria-checked="true"] .dormora-subs-swatch {
        border-color: var(--dormora-on-surface);
    }

.dormora-subs-label {
    font-size: 0.875rem;
    font-weight: 500;
}

.dormora-subs-status {
    min-height: 1.5rem;
    font-size: 0.875rem;
}

.dormora-subs-status__text {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.dormora-subs-status__text--bad {
    color: var(--dormora-error);
}

.dormora-subs-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-subs-help {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    padding: 0 0.25rem;
    border: 0;
    background: transparent;
    color: var(--dormora-primary);
    font: inherit;
    cursor: pointer;
}

.dormora-subs-help__steps {
    font-size: 0.875rem;
    color: var(--dormora-on-surface-variant);
}

    .dormora-subs-help__steps p {
        margin: 0.25rem 0;
    }

.dormora-subs-manage {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dormora-subs-manage__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.25rem 0.5rem;
}

.dormora-subs-manage__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--dormora-on-surface-variant);
    cursor: pointer;
}

    /* Gate fix (p-mk100-d, dark): the browser's own ring was dark on the dark sheet; the app's focus token is light there. */
    .dormora-subs-manage__more:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

/* Gate fix (p-mk101-a): "Make a private address" is the tonal button, not a bare row. */
.dormora-subs-menu__action--tonal {
    width: auto;
    justify-content: center;
    align-self: flex-start;
    padding-inline: 1.25rem;
    border: 1px solid var(--dormora-outline);
    background: var(--dormora-primary-container);
    color: var(--dormora-on-primary-container);
    font-weight: 500;
}

/* Gate fix (p-mk100-b, p-mk101-b): the key's and the address sheet's two or three-way choice fills its row, as Mine / Household does. */
.dormora-key > .dormora-segmented.rz-selectbar,
.feed-sheet__section > .dormora-segmented.rz-selectbar {
    display: flex;
    width: 100%;
}

    .dormora-key > .dormora-segmented.rz-selectbar .rz-button,
    .feed-sheet__section > .dormora-segmented.rz-selectbar .rz-button {
        flex: 1 1 0;
        justify-content: center;
    }

.dormora-subs-manage__empty,
.dormora-subs-manage__note {
    margin: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-subs-manage__section {
    margin: 0.75rem 0 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dormora-on-surface-variant);
}

    .dormora-subs-manage__section:first-child {
        margin-top: 0;
    }

/* P4I-102 (MK-102): the TV search in the add sheet, the chosen show, and a poster image. */
.dormora-title-search__box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dormora-title-search__box .rz-textbox {
    flex: 1 1 auto;
}

.dormora-title-search__results {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dormora-title-search__result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.25rem;
    border: 0;
    background: none;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.dormora-title-search__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dormora-title-search__chosen {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dormora-title-search__chosen .dormora-title-search__text {
    flex: 1 1 auto;
}

.dormora-poster--image {
    object-fit: cover;
}

/* ---------------------------------------------------------------------------------------
   P4I-087 (R9-H1 to R9-H6; p-mk87-a to d, d-mk87-a): Home on phones is Today first, with "N from earlier" and Catch up, then "Around the home".
   --------------------------------------------------------------------------------------- */

/* The date under the greeting. */
.dormora-home__date {
    margin: -0.25rem 0 0.25rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--dormora-on-surface-variant);
}

/* Today's scope: one menu chip at the end of its header. */
.dormora-home__scope {
    display: flex;
    justify-content: flex-end;
    padding: 0.25rem 1rem 0;
}

/* "N from earlier": one amber row at the top of Today, on both sizes. */
.dormora-earlier {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 1rem 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 1rem;
    background-color: var(--dormora-warning-container);
    color: var(--dormora-on-warning-container);
}

.dormora-home-desk .dormora-earlier {
    margin-inline: 0.75rem;
}

.dormora-earlier__icon.rzi {
    flex: none;
    font-size: 1.375rem;
    color: var(--dormora-on-warning-container);
}

.dormora-earlier__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.dormora-earlier__title {
    font-size: 0.9375rem;
    line-height: 1.25rem;
    font-weight: 600;
}

.dormora-earlier__line {
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dormora-earlier__action.rz-button {
    flex: none;
    min-height: 2.5rem;
    border-radius: 1.25rem;
    color: var(--dormora-on-warning-container);
    border-color: var(--dormora-on-warning-container);
}

/* P4I-088 (R9-H11 to R9-H13, MK-88): At a glance on the phone, a column of full-width widgets under Today. A widget is a box whose title is the area's link, stretched over it
   (dormora-glance__stretch); its rows and buttons are their own links and buttons above that. */
.dormora-widgets {
    margin-top: 0.5rem;
}

.dormora-widgets__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline-end: 0.5rem;
}

.dormora-widgets__edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 1.375rem;
    background: none;
    color: var(--dormora-primary);
    cursor: pointer;
}

    .dormora-widgets__edit:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-widgets__note {
    margin: 0;
    padding: 0.25rem 1rem;
}

.dormora-widgets__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 1rem 0.5rem;
}

.dormora-widget {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.5625rem 0.75rem 0.625rem;
    border-radius: 1rem;
    background-color: var(--dormora-surface-container);
    color: var(--dormora-on-surface);
}

.dormora-widget__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.dormora-widget .dormora-widget__title {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    min-height: 1.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dormora-on-surface-variant);
}

    .dormora-widget .dormora-widget__title .rzi {
        flex: none;
        font-size: 1.0625rem;
        color: var(--dormora-primary);
    }

.dormora-widget__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dormora-widget__figure {
    flex: none;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dormora-on-surface-variant);
}

.dormora-widget__headline {
    font-size: 0.90625rem;
    line-height: 1.375rem;
    font-weight: 600;
    color: var(--dormora-on-surface);
}

    .dormora-widget__headline small {
        font-size: 0.71875rem;
        font-weight: 400;
        color: var(--dormora-on-surface-variant);
    }

.dormora-widget__headline--over {
    color: var(--dormora-error);
}

.dormora-widget__line {
    font-size: 0.71875rem;
    line-height: 1.125rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-widget__link {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    max-width: 100%;
    text-decoration: none;
}

    .dormora-widget__link:hover,
    .dormora-widget__link:focus-visible {
        text-decoration: underline;
    }

    .dormora-widget__link:focus-visible,
    .dormora-widget__row:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: 2px;
    }

.dormora-widget__row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
    padding: 0.25rem 0;
    color: inherit;
    font-size: 0.78125rem;
    text-decoration: none;
}

    .dormora-widget__row + .dormora-widget__row {
        border-top: 1px solid var(--dormora-outline-variant);
    }

.dormora-widget__row-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dormora-widget__row-detail {
    flex: none;
    font-size: 0.71875rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-widget__chevron.rzi {
    flex: none;
    font-size: 1rem;
    color: var(--dormora-on-surface-variant);
}

.dormora-widget__swatch.dormora-comingup__swatch {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
}

    .dormora-widget__swatch.dormora-comingup__swatch .rzi {
        font-size: 1rem;
    }

.dormora-widget__bar {
    display: block;
    height: 0.3125rem;
    margin: 0.25rem 0;
    overflow: hidden;
    border-radius: 0.1875rem;
    background-color: var(--dormora-surface-container-high);
}

    .dormora-widget__bar > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background-color: var(--dormora-primary);
    }

.dormora-widget__dinner,
.dormora-widget__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dormora-widget__split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
}

    .dormora-widget__split .dormora-widget__text {
        flex: 1 1 auto;
    }

.dormora-widget__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.dormora-widget__action,
.dormora-glance__set.dormora-widget__action {
    position: relative;
    z-index: 1;
    flex: none;
}

.dormora-widget--planned {
    background-color: var(--dormora-tertiary-container);
    color: var(--dormora-on-tertiary-container);
}

    .dormora-widget--planned .dormora-widget__title,
    .dormora-widget--planned .dormora-widget__title .rzi,
    .dormora-widget--planned .dormora-widget__headline,
    .dormora-widget--planned .dormora-widget__line {
        color: inherit;
    }

.dormora-widget--home .dormora-whome {
    margin-top: 0.25rem;
}

.dormora-widget .dormora-whome__dot--out,
.dormora-widget .dormora-whome__dot--away {
    background-color: var(--dormora-warning);
}

.dormora-widget .dormora-whome__dot--none {
    display: block;
    background-color: var(--dormora-on-surface-variant);
}

/* Catch up: the rows of the sheet (or dialog), then "Move the rest to". */
.dormora-catchup__care {
    border: 0;
    cursor: pointer;
}

    .dormora-catchup__care:disabled {
        cursor: default;
    }

.dormora-catchup__later {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 1.375rem;
    background: none;
    color: var(--dormora-on-surface-variant);
    cursor: pointer;
}

    .dormora-catchup__later:focus-visible {
        outline: 2px solid var(--dormora-focus-ring);
        outline-offset: -2px;
    }

.dormora-catchup__chevron.rzi {
    color: var(--dormora-on-surface-variant);
}

.dormora-catchup__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0 0.25rem;
}

.dormora-catchup__foot-label {
    margin-inline-end: auto;
    font-size: 0.875rem;
    color: var(--dormora-on-surface-variant);
}

/* P4I-088 (R9-H18): desktop's tile row draws the same widgets (HomeWidget) as tiles: the grid cell sets the width, and Dinner and Who's home take two cells as before. */
.dormora-widget--tile {
    padding: 0.875rem 1rem;
    gap: 0.25rem;
    overflow-wrap: anywhere;
}

/* Row names keep the space: the detail wraps under the name rather than cutting it short. */
.dormora-widget--tile .dormora-widget__row {
    flex-wrap: wrap;
    row-gap: 0;
}

.dormora-widget--tile .dormora-widget__row-title {
    flex: 1 1 5rem;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.dormora-widget--tile .dormora-widget__row-detail {
    flex: 0 1 auto;
}

/* In a narrow tile the chevron would wrap onto a line of its own; the row is a link either way. */
.dormora-widget--tile .rzi.dormora-widget__chevron {
    display: none;
}

/* Tiles take the height of their content (no blank area under a short tile), and icons hold their box before the icon font loads so a row's height does not move with it. */
.dormora-glance__grid--row > .dormora-widget {
    align-self: start;
}

.dormora-widget .rzi {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    line-height: 1.25em;
    overflow: hidden;
    white-space: nowrap;
}

.dormora-glance__grid--row .dormora-widget--dinner,
.dormora-glance__grid--row .dormora-widget--home {
    grid-column: span 2;
}