@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;
}

:root {
    --primary: #294682;
    --light-primary: #4A67A3;
    --lighter-primary: #728bbf;
    --dark-primary: #1A2F5C;
    --dark-bg: #091639;
    --darker-bg: #050D20;
    --secondary: #4e92d3;
    --light-secondary: #5fa1d9;
    --lighter-secondary: #77b1df;
    --surface-primary: #EEF1F8;
    --white: #ffffff;
    --black: #333333;
    --gray: #f5f5f5;
    --dark-gray: #999999;
    --rz-primary: var(--light-primary);
    --rz-secondary: var(--secondary);
    --rz-on-primary-lighter: var(--light-primary);
    --rz-header-background-color: var(--dark-bg);
    --rz-profile-menu-top-item-background-color: var(--dark-bg);
    --rz-text-font-family: 'Inter', Helvetica, Arial, sans-serif;

    /* 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 Radzen material-dark'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. Values picked fresh against Radzen's own theme
       background colors, not reused from any badge-background token. */
    --color-success: #166534;
    --color-danger: #c40000;

    /* P1U-040: plain-link colour (dark override below) and the one touch-target size every
       ≥44px mobile control uses (UC-4.4/UC-7.1), instead of 2.75rem repeated per feature. */
    --dormora-link-color: #006bb7;
    --dormora-touch-target: 2.75rem;

    /* Semantic event/task colors (Phase 1 placeholders, mapped onto the existing
       palette — deliberately not new colors, since final values are a P1-052 UX
       decision, not a P1-003 one). Automatic (read-only) events get a distinct
       tone from user-created events per P1-012's distinguishability requirement. */
    --color-event: var(--secondary);
    --color-event-automatic: var(--dark-gray);
    --color-task: var(--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;
}

/* P1R-015: dark-theme overrides for the semantic feedback foreground tokens above,
   keyed off the data-theme hook ThemeAttributeSync maintains on <html>. Lighter
   shades than the light-theme values, needed for 4.5:1 against Radzen material-dark's
   ~#1e1e1e card / ~#121212 body surfaces - the light-theme values above measure well
   under 3:1 there. --color-event/--color-event-automatic/--color-task are unaffected:
   every current usage is a non-text UI element (icon/dot/fill), so only the 3:1
   graphical-object threshold applies, which the light-theme values already clear in
   both themes (verified, not just assumed - P1-051 already covers this token). */
:root[data-theme="dark"] {
    --color-success: #4ade80;
    --color-danger: #f87171;
    --dormora-link-color: #77b1df;
    /* P1U-052 (axe): material-dark's placeholder (#6c6c6c, 3.17:1 on #1e1e1e) and selected-tab title
       (primary #4a67a3, 3.35:1 on #121212) fail AA text contrast. */
    --rz-input-placeholder-color: var(--rz-text-secondary-color);
    --rz-tabs-tab-selected-color: var(--dormora-link-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. */
.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-secondary,
.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;
}

/* P1-051: restore a visible focus indicator for the sidebar social links — the existing
   rule below removed it with no replacement, leaving keyboard users unable to see which
   link is focused. */
.sidebar-social-links a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.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;
}

.sidebar-social-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    position: relative;
    padding-top: 20px;
    max-width: 200px;
}

    .sidebar-social-links::before {
        content: '';
        position: absolute;
        width: 40px;
        height: 2px;
        background-color: var(--primary);
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 2px;
    }

    .sidebar-social-links a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        background-color: var(--primary);
        color: var(--white);
        border-radius: 50%;
        font-size: 16px;
        transition: all 0.3s ease;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        border: none;
        outline: none;
        text-decoration: none;
    }

        .sidebar-social-links a:hover {
            background-color: var(--light-primary);
            transform: translateY(-3px);
            box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
            border: none;
            outline: none;
        }
/* 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 {
    --dormora-page-max-width: 1440px;
    --rz-layout-body-padding: 1.5rem 2rem;
    /* Sidebar rhythm: Radzen material's 1rem block padding gives 57px rows and forces the
       sidebar to scroll at common laptop heights; 0.625rem keeps rows at ~45px (>= 44px
       touch target) so every top-level group fits without scrolling. */
    --rz-panel-menu-item-padding-block: 0.625rem;
}

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

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

/* RadzenBody and RadzenSidebar both scroll. Reserving their scrollbar gutters stops page
   content shifting sideways: the body's scrollbar appears only on long routes, and the
   sidebar's only when an expanded group overflows it (measured as a 16px jump in P1U-003). */
.rz-body,
.rz-sidebar {
    scrollbar-gutter: stable;
}

.dormora-page {
    width: 100%;
    max-width: var(--dormora-page-max-width);
    margin-inline: 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(--primary);
        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;
}

/* ---------------------------------------------------------------------------------------
   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 (+ --fullscreen 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);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.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);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.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 full-screen mobile dialogs and above the keyboard (UC-8.3). */
.dormora-dialog-footer {
    position: sticky;
    bottom: calc(-1 * var(--rz-dialog-content-padding, 1.5rem));
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 calc(-1 * var(--rz-dialog-content-padding, 1.5rem));
    padding: 1rem 0 var(--rz-dialog-content-padding, 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;
}

/* Full-screen mobile dialogs (UC-8.3). */
.rz-dialog.dormora-dialog--fullscreen {
    border-radius: 0;
    max-height: 100%;
}

/* ---------------------------------------------------------------------------------------
   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.
   --------------------------------------------------------------------------------------- */

:root {
    --dormora-bottom-nav-height: 4rem;
}

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

/* Top app bar */
.dormora-topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.25rem 0.5rem;
    padding-top: calc(0.25rem + env(safe-area-inset-top, 0px));
}

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

    .dormora-topbar__back:hover,
    .dormora-topbar__back:focus-visible {
        background-color: rgba(255, 255, 255, 0.12);
        color: var(--white);
    }

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

.dormora-topbar__logo {
    width: 2.25rem;
    height: auto;
    flex: 0 0 auto;
}

.dormora-topbar__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--white);
}

/* One visible title per presentation (UC-2.2): on mobile 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 .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. */
.dormora-shell--mobile .rz-body {
    padding-bottom: calc(var(--dormora-bottom-nav-height) + 1rem + env(safe-area-inset-bottom, 0px));
}

/* Bottom navigation */
.dormora-bottom-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: var(--dormora-bottom-nav-height);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: var(--rz-base-background-color);
    border-top: 1px solid var(--rz-base-300);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.dormora-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 3.5rem;
    padding: 0.35rem 0.25rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--rz-text-secondary-color);
    text-decoration: none;
    cursor: pointer;
}

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

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

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

/* Active tab: title-colour label (--rz-primary measured ~3.0:1 on the dark bar, below AA for 12px
   text) plus bold weight and the icon pill, so the state is not carried by colour alone. */
.dormora-bottom-nav__item--active {
    color: var(--rz-text-title-color);
    font-weight: 700;
}

    .dormora-bottom-nav__item--active .rzi {
        background-color: var(--rz-primary-lighter);
        border-radius: 1rem;
        padding: 0 0.9rem;
    }

/* More sheet */
.dormora-more-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dormora-more-menu__link,
.dormora-more-menu__group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.5rem 0.25rem;
    color: var(--rz-text-title-color);
    text-decoration: none;
}

.dormora-more-menu__link {
    border-radius: var(--rz-border-radius, 4px);
}

    .dormora-more-menu__link:hover,
    .dormora-more-menu__link:focus-visible {
        background-color: var(--rz-base-100);
        text-decoration: none;
        color: var(--rz-text-title-color);
    }

    .dormora-more-menu__link:focus-visible {
        outline: 2px solid var(--primary);
    }

.dormora-more-menu__group {
    font-weight: 600;
}

.dormora-more-menu__item--depth-0 {
    border-bottom: 1px solid var(--rz-base-200);
}

.dormora-more-menu__item--depth-1 {
    padding-left: 2.25rem;
}

.dormora-more-menu__item--depth-2 {
    padding-left: 1.5rem;
}

.dormora-more-menu__item--depth-1 .dormora-more-menu__link,
.dormora-more-menu__item--depth-2 .dormora-more-menu__link {
    min-height: var(--dormora-touch-target);
    font-size: 0.9375rem;
}

/* ---------------------------------------------------------------------------------------
   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;
    }

    .dormora-row--mobile .dormora-row__actions {
        align-self: center;
    }

/* Larger tap target for the row's overflow trigger on touch (≥44px). */
.dormora-row--mobile .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;
}

/* 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-height) + 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;
    background-color: var(--rz-primary);
    color: var(--rz-on-primary, #fff);
    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;
    }

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

/* Mobile list toolbar (UC-6.5): search + Filters toggle on one line, filters as a stacked panel. */
.dormora-list-toolbar__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dormora-list-toolbar__row > .rz-button {
    flex: 0 0 auto;
}

.dormora-list-toolbar__filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--rz-border-radius, 4px);
    background-color: var(--rz-base-100);
}

    .dormora-list-toolbar__filters > * {
        width: 100% !important;
    }

/* 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;
    }
}

/* ---------------------------------------------------------------------------------------
   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);
    }

/* P3-002: the current-household chip in the desktop header (and, as a block row, atop the mobile More sheet).
   Colours follow the surrounding text (white on the navy header, the title colour in the sheet), 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;
}

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

.dormora-household-chip--block {
    display: flex;
    color: var(--rz-text-title-color);
    max-width: none;
    min-height: 3rem;
    margin: 0 0 0.75rem;
    border-radius: var(--rz-border-radius, 4px);
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
}

/* 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,
.dormora-module-list__summary.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;
}

/* UC-5.5 "View X →" footer link. */
.dormora-view-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: var(--rz-border-radius, 4px);
    font-weight: 600;
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    color: var(--rz-text-title-color);
    text-decoration: none;
}

    .dormora-view-link:hover {
        background-color: var(--rz-base-100);
        text-decoration: none;
        color: var(--rz-text-title-color);
    }

    .dormora-view-link:focus-visible {
        outline: 2px solid var(--primary);
    }

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

/* 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);
    }

/* Compact mobile module list: one tappable line per module. */
.dormora-module-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

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

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

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

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

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

.dormora-module-list__summary {
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    color: var(--rz-text-secondary-color);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

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

/* ---------------------------------------------------------------------------------------
   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: "Who's free?" — one row per member: name + summary, a decorative day bar, and the busy periods as text. */
.dormora-availability__note {
    margin: 0;
    color: var(--rz-text-secondary-color);
}

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

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

.dormora-availability__name {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dormora-availability__bar {
    position: relative;
    height: 0.75rem;
    margin-top: 0.375rem;
    border-radius: 999px;
    background: var(--rz-success-lighter);
    overflow: hidden;
}

.dormora-availability__busy {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--rz-warning);
}

.dormora-availability__periods {
    margin: 0.375rem 0 0;
    padding-left: 1.25rem;
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
}

.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(--primary);
        outline-offset: 1px;
    }

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

    .dormora-date-strip__day.is-selected,
    .dormora-month-grid__day.is-selected {
        background-color: var(--rz-primary);
        color: var(--rz-on-primary, #fff);
    }

        .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: 44px;
}

    .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;
}

.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(--primary);
            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: 44px;
}

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

/* 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-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .dormora-stat-grid--wide {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
}

.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: ledger switch left, period navigator pushed right on wide screens, own line on phones. */
.dormora-budget-context__period {
    margin-left: auto;
}

@media (max-width: 767.98px) {
    /* Ledger switch: full width, two equal one-line segments (labels stay "… ledger", D-021). */
    .dormora-budget-context > .rz-selectbar {
        display: flex;
        flex: 1 1 100%;
    }

        .dormora-budget-context > .rz-selectbar > .rz-button {
            flex: 1 1 0;
            min-width: 0;
            min-height: var(--dormora-touch-target);
            padding-inline: 0.25rem;
            font-size: 0.8125rem;
            letter-spacing: 0;
            line-height: 1.2;
            white-space: normal; /* one line from ~360px; wraps (never clips) at 320px */
        }

    /* 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 {
        flex-basis: 100%;
        display: flex;
        justify-content: center;
        margin-left: 0;
    }
}

/* Mobile section selector: four equal segments across the full width. */
.dormora-budget-sections {
    display: flex;
    width: 100%;
}

    .dormora-budget-sections > .rz-button {
        flex: 1 1 0;
        min-width: 0;
        min-height: var(--dormora-touch-target);
        padding-inline: 0.125rem;
        font-size: 0.75rem;
        letter-spacing: 0; /* "EXPENSES" must fit a 69px segment at 320px */
        white-space: nowrap;
    }

.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-diet-preferences {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.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);
}

.dormora-stat-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 767.98px) {
    .dormora-stat-grid--four {
        gap: 0.375rem;
    }

        .dormora-stat-grid--four .dormora-stat {
            padding: 0.375rem 0.5rem;
        }

        .dormora-stat-grid--four .dormora-stat__label {
            font-size: 0.75rem;
        }

        .dormora-stat-grid--four .dormora-stat__value {
            font-size: 1rem;
        }
}

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

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

.dormora-week-matrix__day {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.5rem;
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius, 4px);
}

    .dormora-week-matrix__day.is-today {
        /* P1U-050: border only, like the date strip; --rz-base-50 is a light grey in the dark theme too. */
        border: 2px solid var(--rz-primary);
    }

.dormora-week-matrix__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem;
    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-week-matrix__heading span {
        font-size: 0.75rem;
        font-weight: 400;
        color: var(--rz-text-secondary-color);
    }

.dormora-meal-slot {
    padding: 0.25rem 0.375rem;
    border-radius: var(--rz-border-radius, 4px);
    background-color: var(--rz-panel-background-color, var(--rz-base-background-color));
}

    /* Empty slots collapse to a single caption line (UC-9.5 cell exemption). */
    .dormora-meal-slot.is-empty {
        background: none;
        border: 1px dashed var(--rz-base-300);
    }

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

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

.dormora-meal-slot__meal {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* 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;
}

.dormora-meal-slot__open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.125rem 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .dormora-meal-slot__open:hover .dormora-meal-slot__name,
    .dormora-meal-slot__open:focus-visible .dormora-meal-slot__name {
        text-decoration: underline;
    }

    .dormora-meal-slot__open:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 1px;
    }

.dormora-meal-slot__name {
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    color: var(--rz-text-title-color);
    overflow-wrap: anywhere;
}

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

/* 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;
}

.dormora-row-editor--ingredients .dormora-row-editor__columns,
.dormora-row-editor--ingredients .dormora-row-editor__item {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) 2.75rem;
}

/* 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);
    }

    /* Ingredient: name full width, quantity + remove on the second line. */
    .dormora-row-editor--ingredients .dormora-row-editor__field:first-child {
        grid-column: 1 / -1;
    }

    .dormora-row-editor--ingredients .dormora-row-editor__field:nth-child(2) {
        grid-column: 1 / 3;
    }

    /* 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;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    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-028 — Entertainment. Media type / list switcher, linked status tiles, and the
   leading status action on watch-list rows.
   --------------------------------------------------------------------------------------- */

.dormora-media-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.dormora-media-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dormora-media-tile {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--rz-border-radius, 4px);
}

    .dormora-media-tile:hover .dormora-stat {
        border-color: var(--rz-primary);
    }

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

.dormora-media-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dormora-status-action {
    min-width: var(--dormora-touch-target);
    min-height: var(--dormora-touch-target);
}

    .dormora-status-action .rzi {
        font-size: 1.75rem;
        color: var(--rz-primary);
    }

.dormora-status-done {
    display: inline-flex;
    justify-content: center;
    width: var(--dormora-touch-target);
    font-size: 1.5rem;
    color: var(--color-success);
}

/* ---------------------------------------------------------------------------------------
   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;
}

/* P3-003: the enforced role matrix on Household Settings (desktop). A plain table: row and column headers are real. */
.dormora-permission-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.dormora-permission-table th,
.dormora-permission-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--rz-base-200);
}

.dormora-permission-table thead th {
    font-weight: 600;
    color: var(--rz-text-secondary-color);
}

.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) and the mobile section selector.
   --------------------------------------------------------------------------------------- */

.dormora-comm-sections > .rz-dropdown {
    min-height: var(--dormora-touch-target);
}

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

.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(--primary);
        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;
}

.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), white on the dark 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;
    }

    /* The shared overflow-menu rules colour the icon for light surfaces; the top bar is dark. 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(--white) !important;
    }

    .dormora-topbar__overflow .dormora-overflow-menu .rz-navigation-item-link:focus-visible {
        outline: 2px solid var(--white);
        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;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    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(--primary);
    cursor: pointer;
}

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

    /* 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;
    }

/* 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;
}

@media (max-width: 767.98px) {
    .dormora-topbar .rz-button,
    .dormora-topbar .rz-profile-menu .rz-navigation-item-link,
    .dormora-topbar .rz-profile-menu > .rz-navigation-item > .rz-navigation-item-wrapper {
        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);
    }

    /* "View …" footer links and the list search field. */
    .dormora-shell--mobile .dormora-view-link {
        display: inline-flex;
        align-items: center;
        min-height: var(--dormora-touch-target);
    }

    .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-height) + 6rem);
    }
}

/* P1U-052 (axe + Tab walk): Radzen's collapsed PanelMenu groups are aria-hidden but their links stayed focusable,
   so Tab walked through ~15 invisible sidebar items. visibility:hidden removes them from the tab order and the
   accessibility tree until the group expands. */
.rz-panel-menu .rz-expander.rz-state-collapsed {
    visibility: hidden;
}

/* 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);
}