:root {
    --color-sage-green: #5b6f52;
    --color-olive: #7d8c6e;
    --color-warm-brown: #9b8367;
    --color-light-sage: #a8b99e;
    --color-cream: #f5f0e8;
    --color-warm-beige: #e8dfd0;
    --color-light-gray: #d4cfc9;
    --color-medium-gray: #8a857f;
    --color-charcoal: #3d3d3d;
    --color-near-black: #1e1e1e;
    --color-white: #ffffff;
    --color-danger: #b95a5a;
    --color-danger-hover: #9f4d4d;
    --color-danger-soft: #f1dddd;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --font-family-base: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-size-sm: 13px;
    --font-size-base: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 28px;
    --line-height-base: 1.5;
    --line-height-heading: 1.2;
    --shadow-card: 0 14px 32px rgba(30, 30, 30, 0.08);
    --shadow-soft: 0 8px 20px rgba(30, 30, 30, 0.06);
    --background: var(--color-cream);
    --surface: var(--color-white);
    --surface-muted: var(--color-warm-beige);
    --text: var(--color-charcoal);
    --muted: var(--color-medium-gray);
    --border: var(--color-light-gray);
    --primary: var(--color-sage-green);
    --primary-dark: var(--color-olive);
    --danger: var(--color-danger);
    --danger-soft: var(--color-danger-soft);
    --success-soft: var(--color-light-sage);
    --warning-soft: var(--color-warm-beige);
    --absence-bg: #d8efe1;
    --absence-border: #89b89d;
    --absence-text: #2e5b3f;
    --shadow: var(--shadow-soft);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    background: var(--background);
    color: var(--text);
    line-height: var(--line-height-base);
    min-height: 100vh;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--color-white);
    cursor: pointer;
    font-weight: 700;
    min-height: 40px;
    padding: 0 var(--space-5);
    box-shadow: none;
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

button:hover {
    background: var(--primary-dark);
}

button:active {
    background: var(--primary);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(120, 145, 124, 0.42);
    outline-offset: 2px;
}

button:disabled {
    cursor: not-allowed;
    background: var(--color-light-sage);
    color: var(--surface);
    opacity: 0.72;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--text);
    min-height: 48px;
    padding: 0 var(--space-4);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

textarea {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(91, 111, 82, 0.18);
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--surface-muted);
    color: var(--muted);
}

textarea {
    resize: vertical;
}

input[type="checkbox"] {
    accent-color: var(--primary);
    border-color: var(--border);
    cursor: pointer;
    width: 20px;
    height: 20px;
}

input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

label {
    display: grid;
    gap: var(--space-2);
    color: var(--text);
    font-size: var(--font-size-sm);
    font-weight: 700;
    min-width: 0;
}

.auth-screen {
    display: grid;
    align-content: start;
    justify-items: center;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 0, rgba(168, 185, 158, 0.18), transparent 34%),
        var(--color-cream);
    padding: 64px var(--space-4) var(--space-6);
}

.auth-logo-image {
    display: block;
    width: min(220px, 62vw);
    height: auto;
    margin-bottom: var(--space-4);
    object-fit: contain;
}

.auth-card {
    width: min(560px, 100%);
    border: 1px solid rgba(155, 131, 103, 0.16);
    border-radius: 28px;
    background: var(--surface);
    box-shadow: 0 22px 48px rgba(30, 30, 30, 0.06);
    padding: 48px;
}

.auth-progress {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    margin-bottom: 10px;
}

.auth-progress span {
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--border);
}

.auth-progress .is-active {
    background: var(--primary);
}

.auth-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 34px;
    text-align: center;
}

.auth-steps .is-active {
    color: var(--text);
}

.auth-card h1 {
    margin: 0 0 var(--space-3);
    color: var(--color-charcoal);
    font-size: 32px;
    line-height: var(--line-height-heading);
}

.auth-intro {
    max-width: 360px;
    color: #52635b;
    font-size: 18px;
    line-height: 1.55;
    margin-bottom: var(--space-6);
}

.auth-card-logo {
    display: block;
    width: min(180px, 56vw);
    height: auto;
    margin: 0 auto var(--space-5);
}

.auth-form {
    display: grid;
    gap: var(--space-4);
}

.auth-field {
    display: grid;
    gap: var(--space-2);
}

.auth-form input {
    min-height: 52px;
    border-radius: 12px;
    background: #fbf8f3;
    font-size: 16px;
}

.auth-password-field {
    position: relative;
}

.auth-password-field input {
    padding-right: 96px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    transform: translateY(-50%);
    min-height: 36px;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--primary);
    font-size: 13px;
    font-weight: 900;
    margin: 0;
    padding: 0 var(--space-3);
}

.password-toggle:hover,
.password-toggle:focus-visible {
    background: rgba(91, 111, 82, 0.12);
    color: var(--primary-dark);
}

.password-help-list {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    list-style: none;
    margin: calc(var(--space-3) * -1) 0 0;
    padding: 0;
}

.password-help-list li::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-pill);
    background: var(--color-light-sage);
    margin-right: var(--space-2);
    vertical-align: middle;
}

.password-help-list li.is-complete {
    color: var(--primary-dark);
}

.password-help-list li.is-complete::before {
    background: var(--primary);
}

.auth-form button {
    min-height: 56px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    font-size: 18px;
    margin-top: var(--space-3);
}

.auth-form button:hover,
.auth-form button:focus-visible {
    background: var(--primary-dark);
}

.auth-form .password-toggle {
    min-height: 36px;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--primary);
    font-size: 13px;
    margin: 0;
    padding: 0 var(--space-3);
}

.auth-form .password-toggle:hover,
.auth-form .password-toggle:focus-visible {
    background: rgba(91, 111, 82, 0.12);
    color: var(--primary-dark);
}

.auth-status {
    color: var(--muted);
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin: 0;
    min-height: 20px;
    text-align: center;
}

.register-field-status {
    margin-top: calc(var(--space-3) * -1);
    text-align: left;
}

.auth-switch {
    color: var(--muted);
    font-size: 15px;
    margin: var(--space-2) 0 0;
    text-align: center;
}

.link-button {
    display: inline;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    min-height: 0;
    padding: 0;
    text-decoration: underline;
}

.auth-form .link-button {
    min-height: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: inherit;
    margin-top: 0;
    padding: 0;
}

.link-button:hover,
.link-button:focus-visible {
    background: transparent;
    color: var(--primary);
}

.auth-card-loading {
    display: grid;
}

.auth-card-loading .secondary-button {
    justify-self: stretch;
    min-height: 52px;
    border-radius: var(--radius-pill);
}

.auth-card-actions {
    display: grid;
    gap: var(--space-3);
}

.auth-card-actions button {
    width: 100%;
    min-height: 52px;
    border-radius: var(--radius-pill);
}

.email-verification-address {
    border: 1px solid rgba(155, 131, 103, 0.26);
    border-radius: var(--radius-md);
    background: #fbf8f3;
    color: var(--text);
    font-weight: 800;
    margin: calc(-1 * var(--space-4)) 0 var(--space-5);
    overflow-wrap: anywhere;
    padding: var(--space-3) var(--space-4);
    text-align: center;
}

.auth-pending #registerCard,
.auth-pending #loginCard,
.auth-pending #registerWelcomeCard,
.auth-pending #emailVerificationCard,
.auth-register #authLoadingCard,
.auth-register #loginCard,
.auth-register #registerWelcomeCard,
.auth-register #emailVerificationCard,
.auth-login #authLoadingCard,
.auth-login #registerCard,
.auth-login #registerWelcomeCard,
.auth-login #emailVerificationCard,
.auth-error #registerCard,
.auth-error #loginCard,
.auth-error #registerWelcomeCard,
.auth-error #emailVerificationCard,
.auth-welcome #authLoadingCard,
.auth-welcome #registerCard,
.auth-welcome #loginCard,
.auth-welcome #emailVerificationCard,
.auth-email-verification #authLoadingCard,
.auth-email-verification #registerCard,
.auth-email-verification #loginCard,
.auth-email-verification #registerWelcomeCard {
    display: none;
}

.auth-pending .app-shell,
.auth-register .app-shell,
.auth-error .app-shell,
.auth-login .app-shell,
.auth-welcome .app-shell,
.auth-email-verification .app-shell,
.auth-onboarding .app-shell,
.auth-ready .auth-screen,
.auth-ready .onboarding-view {
    display: none;
}

.auth-pending .onboarding-view,
.auth-register .onboarding-view,
.auth-error .onboarding-view,
.auth-login .onboarding-view,
.auth-welcome .onboarding-view,
.auth-email-verification .onboarding-view {
    display: none;
}

.onboarding-view {
    display: grid;
    align-content: start;
    justify-items: center;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 0, rgba(168, 185, 158, 0.22), transparent 34%),
        linear-gradient(180deg, var(--color-cream), #f2ece3);
    padding: 48px var(--space-4) var(--space-6);
}

.onboarding-header {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.onboarding-logo {
    width: min(210px, 58vw);
    height: auto;
    object-fit: contain;
}

.onboarding-card {
    display: grid;
    gap: var(--space-5);
    width: min(560px, 100%);
    border: 1px solid rgba(155, 131, 103, 0.16);
    border-radius: 28px;
    background: var(--surface);
    box-shadow: 0 24px 54px rgba(30, 30, 30, 0.08);
    padding: 48px;
}

.onboarding-card h1 {
    color: var(--color-charcoal);
    font-size: 34px;
    line-height: var(--line-height-heading);
    margin: 0;
}

.onboarding-intro {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.55;
    margin: calc(-1 * var(--space-3)) 0 0;
}

.onboarding-progress {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
}

.onboarding-progress-step {
    display: grid;
    gap: var(--space-2);
    justify-items: stretch;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    min-height: 0;
    padding: 0;
    text-align: center;
}

.onboarding-progress-step span {
    display: block;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--border);
}

.onboarding-progress-step.is-active {
    color: var(--text);
}

.onboarding-progress-step.is-active span,
.onboarding-progress-step.is-complete span {
    background: var(--primary);
}

.onboarding-content {
    display: grid;
    gap: var(--space-5);
}

.onboarding-list {
    display: grid;
    gap: var(--space-3);
}

.onboarding-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid rgba(155, 131, 103, 0.26);
    border-radius: var(--radius-md);
    background: #fffdf9;
    min-width: 0;
    padding: var(--space-3);
}

.onboarding-row.is-selected {
    border-color: var(--primary);
    background: #f3eee5;
}

.onboarding-row strong,
.onboarding-row p {
    margin: 0;
}

.onboarding-row p {
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.onboarding-avatar {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--color-white);
    font-weight: 900;
}

.onboarding-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.onboarding-row-actions button {
    min-height: 40px;
    padding: 0 var(--space-4);
}

.onboarding-mini-form {
    display: grid;
    gap: var(--space-4);
    border: 1px dashed rgba(155, 131, 103, 0.36);
    border-radius: var(--radius-lg);
    background: #fbf8f3;
    padding: var(--space-5);
}

.onboarding-availability-editor {
    border-style: solid;
}

.onboarding-daypart-fields {
    border: 0;
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
}

.onboarding-daypart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-radius: var(--radius-md);
    background: #fffdf9;
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
}

.onboarding-daypart-row span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 800;
}

.onboarding-daypart-row input[type="number"] {
    flex: 0 0 112px;
    width: 112px;
    min-height: 40px;
    text-align: right;
}

.onboarding-mini-form button,
.onboarding-actions button,
.onboarding-choice {
    min-height: 54px;
    border-radius: var(--radius-pill);
}

.onboarding-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.onboarding-actions button {
    flex: 1 1 180px;
}

.onboarding-choice-grid {
    display: grid;
    gap: var(--space-3);
}

.onboarding-choice {
    display: grid;
    gap: var(--space-1);
    justify-items: start;
    border-color: rgba(155, 131, 103, 0.26);
    background: var(--surface);
    color: var(--text);
    padding: var(--space-4) var(--space-5);
    text-align: left;
}

.onboarding-choice:hover,
.onboarding-choice:focus-visible,
.onboarding-choice.is-featured {
    border-color: var(--primary);
    background: #f3eee5;
    color: var(--text);
}

.onboarding-choice strong {
    font-size: 18px;
}

.onboarding-choice span {
    color: var(--muted);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.onboarding-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.onboarding-summary-grid article {
    border: 1px solid rgba(155, 131, 103, 0.2);
    border-radius: var(--radius-md);
    background: #fbf8f3;
    padding: var(--space-4);
}

.onboarding-summary-grid strong {
    display: block;
    color: var(--primary);
    font-size: 26px;
}

.onboarding-summary-grid span,
.onboarding-status-pill {
    color: var(--muted);
    font-size: var(--font-size-sm);
    font-weight: 800;
}

.onboarding-status-pill {
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    padding: var(--space-1) var(--space-3);
}

.onboarding-status-pill.is-ready {
    background: var(--success-soft);
    color: var(--primary);
}

.onboarding-week-field {
    border: 1px solid rgba(155, 131, 103, 0.2);
    border-radius: var(--radius-lg);
    background: #fbf8f3;
    padding: var(--space-4);
}

.page-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.app-shell {
    display: grid;
    grid-template-columns: 284px minmax(0, 1fr);
    min-height: 100vh;
}

.app-sidebar {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--space-6);
    height: 100vh;
    border-right: 1px solid var(--border);
    background: var(--surface-muted);
    padding: var(--space-6) var(--space-6);
}

.app-brand {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    text-decoration: none;
}

.app-brand-logo {
    display: block;
    width: min(184px, 100%);
    height: auto;
    max-height: 92px;
    object-fit: contain;
}

.app-nav {
    display: grid;
    align-content: start;
    gap: var(--space-2);
}

.app-nav-group {
    display: grid;
    gap: var(--space-2);
}

.app-nav-group + .app-nav-group {
    border-top: 1px solid var(--border);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
}

.app-nav-group-title {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0 var(--space-4);
    text-transform: uppercase;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 44px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-weight: 700;
    padding: 10px var(--space-4);
    text-decoration: none;
}

.app-nav-link img {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    transition: filter 0.16s ease;
}

.app-nav-link:hover,
.app-nav-link:focus-visible {
    background: var(--primary);
    color: var(--color-white);
}

.app-nav-link.is-active {
    background: var(--primary);
    color: var(--color-white);
}

.app-nav-link:hover img,
.app-nav-link:focus-visible img {
    filter: brightness(0) invert(1);
}

.app-nav-link.is-active img {
    filter: brightness(0) invert(1);
}

.app-sidebar-footer {
    display: grid;
    gap: var(--space-2);
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: var(--font-size-sm);
    padding-top: var(--space-6);
}

.app-sidebar-footer strong {
    color: var(--text);
}

.sidebar-user {
    display: grid;
    gap: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    margin-top: var(--space-3);
    padding: var(--space-4);
}

.sidebar-user-main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sidebar-user-avatar {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
}

.sidebar-user-name,
.sidebar-user-role {
    margin: 0;
}

.sidebar-user-name {
    color: var(--text);
    font-weight: 700;
}

.sidebar-user-role {
    color: var(--muted);
    font-size: 12px;
}

.sidebar-user .secondary-button {
    justify-content: center;
    width: 100%;
}

.app-main {
    min-width: 0;
}

.app-topbar {
    display: grid;
    align-items: center;
    min-height: 178px;
    border-bottom: 1px solid var(--border);
    background: var(--color-cream);
    padding: var(--space-6) clamp(var(--space-5), 4vw, var(--space-6));
}

.app-topbar-main {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(560px, 1.2fr);
    grid-template-areas:
        "title values"
        "date values";
    align-items: center;
    gap: var(--space-4) var(--space-6);
}

.app-topbar-main h1,
.app-topbar-main p {
    margin: 0;
}

.app-topbar-main h1 {
    grid-area: title;
    font-size: var(--font-size-xl);
}

.app-topbar-main p {
    grid-area: date;
    color: var(--muted);
    font-size: 18px;
}

.topbar-values {
    grid-area: values;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-self: end;
    width: min(100%, 820px);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.36);
}

.topbar-value {
    display: grid;
    grid-template-rows: 72px auto 1fr;
    align-items: start;
    justify-items: center;
    min-width: 0;
    padding: 0 var(--space-4);
    text-align: center;
}

.topbar-value + .topbar-value {
    border-left: 1px solid var(--border);
}

.topbar-value-icon {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.topbar-value-title {
    margin-top: var(--space-2);
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.topbar-value-text {
    max-width: 150px;
    margin-top: var(--space-2);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.app-content {
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
}

.mobile-nav {
    display: none;
}

.mobile-nav-title {
    display: none;
}

.dashboard {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6) 0 64px;
}

.app-page {
    display: none;
}

.app-page.is-active {
    display: block;
}

.app-page[hidden] {
    display: none !important;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: clamp(var(--space-5), 3vw, var(--space-6));
}

.eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--primary);
    font-size: var(--font-size-sm);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h2,
h3,
p {
    margin-top: 0;
}

h2 {
    margin-bottom: var(--space-2);
    font-size: clamp(24px, 3vw, var(--font-size-xl));
    line-height: var(--line-height-heading);
}

h3 {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-heading);
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.section-heading p:not(.eyebrow) {
    color: var(--muted);
    margin-bottom: 0;
}

.section-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.section-actions label {
    min-width: min(100%, 220px);
}

.section-actions > div {
    display: grid;
    gap: 6px;
}

.availability-action-help {
    margin: 6px 0 0;
}

.status-message {
    border-radius: var(--radius-pill);
    background: var(--success-soft);
    color: var(--primary);
    font-size: var(--font-size-sm);
    font-weight: 800;
    padding: var(--space-2) var(--space-3);
}

.steps-list {
    margin: 0;
    padding: 18px 18px 18px 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.steps-list li + li {
    margin-top: 8px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.task-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.availability-form {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(320px, 1fr);
    gap: var(--space-5);
    align-items: start;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--color-cream);
    margin-bottom: var(--space-5);
    padding: var(--space-5);
}

#taskForm {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--color-cream);
    padding: var(--space-5);
}

.availability-selection {
    display: grid;
    gap: var(--space-4);
}

.availability-capacity-fields {
    border: 0;
    border-radius: var(--radius-md);
    background: var(--surface);
    display: grid;
    gap: var(--space-3);
    margin: 0;
    min-width: 0;
    padding: var(--space-4);
}

.availability-daypart-row,
.availability-total-row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-md);
    background: var(--color-cream);
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
}

.availability-daypart-row span,
.availability-total-row span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 800;
    min-width: 0;
}

.availability-daypart-row input[type="number"],
.availability-total-row input {
    flex: 0 0 112px;
    width: 112px;
    min-height: 40px;
    text-align: right;
}

.availability-total-row {
    border-top: 1px solid var(--border);
    font-weight: 700;
    margin-top: var(--space-1);
}

.availability-form .form-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

.scheduler-settings-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: start;
}

.scheduler-card {
    display: grid;
    gap: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--color-cream);
    min-width: 0;
    padding: var(--space-5);
}

.scheduler-card h3 {
    margin-bottom: 0;
}

.toggle-row {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    font-weight: 800;
}

.toggle-row input {
    flex: 0 0 auto;
    min-height: auto;
    width: auto;
}

.scheduler-run-summary {
    display: grid;
    gap: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--muted);
    min-height: 72px;
    padding: var(--space-3) var(--space-4);
}

.scheduler-run-summary strong {
    color: var(--text);
}

.scheduler-run-error {
    color: var(--danger);
    font-weight: 800;
}

.scheduler-systemd-note,
.scheduler-actions {
    grid-column: 1 / -1;
}

.availability-form-help {
    margin-bottom: var(--space-1);
}

#availability.card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: var(--space-5);
}

.availability-empty-state {
    grid-column: 1 / -1;
}

.availability-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.availability-card-header,
.availability-day-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    min-width: 0;
}

.availability-card-header h3,
.availability-day-card-header h4 {
    margin: 0 0 var(--space-1);
    line-height: var(--line-height-heading);
}

.availability-card-header p {
    color: var(--muted);
    margin: 0;
}

.availability-card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.availability-status-badge,
.availability-daypart-chip {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    min-height: 24px;
    padding: 0 var(--space-3);
    text-transform: uppercase;
    white-space: nowrap;
}

.availability-status-ready,
.availability-daypart-on {
    background: var(--success-soft);
    color: var(--primary);
}

.availability-status-empty,
.availability-daypart-off {
    background: var(--surface-muted);
    color: var(--muted);
}

.availability-day-card {
    display: grid;
    gap: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-cream);
    padding: var(--space-4);
}

.availability-daypart-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.availability-delete-button {
    justify-self: start;
}

.wide-field {
    grid-column: span 3;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
}

.form-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    margin: 0;
    min-width: 0;
    padding: var(--space-4);
}

.form-section legend {
    color: var(--text);
    font-size: var(--font-size-sm);
    font-weight: 800;
    padding: 0 6px;
}

.preference-badge {
    display: inline-flex;
    justify-self: start;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-warm-beige);
    color: var(--color-warm-brown);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-top: var(--space-2);
    padding: var(--space-1) var(--space-3);
    text-transform: uppercase;
}

.checkbox-list {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.checkbox-option {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    display: flex;
    gap: var(--space-3);
    min-height: 40px;
    padding: var(--space-3) var(--space-4);
}

.checkbox-option input {
    flex: 0 0 auto;
}

.secondary-button {
    background: var(--surface);
    border-color: var(--primary);
    color: var(--primary);
}

.secondary-button:hover,
.secondary-button:focus-visible {
    background: var(--color-cream);
    color: var(--primary);
}

.danger-button {
    background: var(--danger);
    border-color: transparent;
    color: var(--color-white);
}

.danger-button:hover {
    background: var(--color-danger-hover);
    color: var(--color-white);
}

.icon-button {
    min-width: 44px;
    padding: 10px 12px;
}

.form-actions button,
.section-actions button,
.planning-controls button,
.card-actions button,
.room-action-row button,
.person-action-row button,
.personal-task-actions button,
.task-actions button,
.message-actions button,
.message-preview-actions button,
.availability-card-actions button {
    min-height: 40px;
}

.hidden {
    display: none !important;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-5);
}

.card,
.assignment,
.task-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    min-width: 0;
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

.room-card {
    display: grid;
    align-content: start;
    gap: var(--space-5);
    overflow: hidden;
    padding: var(--space-5);
}

#roomForm {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--color-cream);
    padding: var(--space-5);
}

#rooms.card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: var(--space-5);
}

.rooms-empty-state {
    grid-column: 1 / -1;
}

.room-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    min-width: 0;
}

.room-card-header h3 {
    margin: 0 0 var(--space-2);
    font-size: 24px;
    line-height: var(--line-height-heading);
}

.room-card-header p {
    color: var(--muted);
    margin: 0;
    overflow-wrap: anywhere;
}

.room-status-badge,
.room-chip {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    min-height: 24px;
    padding: 0 var(--space-3);
    text-transform: uppercase;
    white-space: nowrap;
}

.room-status-active {
    background: var(--success-soft);
    color: var(--primary);
}

.room-status-inactive {
    background: var(--surface-muted);
    color: var(--muted);
}

.room-section {
    display: grid;
    gap: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-cream);
    padding: var(--space-4);
    min-width: 0;
}

.room-section h4,
.room-actions h4 {
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
    margin: 0;
}

.room-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.room-chip {
    background: var(--color-warm-beige);
    color: var(--color-warm-brown);
}

.room-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.room-actions {
    display: grid;
    gap: var(--space-3);
    border-top: 1px solid var(--border);
    padding-top: var(--space-4);
}

.room-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
}

.room-action-row button {
    min-width: 112px;
}

.meta-list {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 14px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.person-card-form {
    display: grid;
    gap: var(--space-5);
}

.person-card,
.person-card-form {
    gap: var(--space-5);
    min-width: 0;
}

.person-card {
    display: grid;
    align-content: start;
    padding: var(--space-6);
    overflow-wrap: anywhere;
}

#personForm {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--color-cream);
    padding: var(--space-5);
}

#people.card-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

.people-empty-state {
    grid-column: 1 / -1;
}

.person-card-hero {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-2) 0 var(--space-4);
    text-align: left;
}

.person-avatar-wrap {
    display: grid;
    gap: var(--space-1);
    justify-items: center;
}

.person-card-hero h3 {
    margin: 0;
    font-size: 24px;
    line-height: var(--line-height-heading);
}

.person-avatar {
    display: inline-grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    color: var(--primary);
    font-size: 24px;
    font-weight: 800;
    box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.62);
}

.person-avatar-placeholder {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.person-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--color-warm-beige);
    color: var(--color-warm-brown);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    min-height: 24px;
    padding: 0 var(--space-3);
    text-transform: uppercase;
}

.person-section-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    min-width: 0;
}

.person-section {
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-cream);
    margin: 0;
    min-width: 0;
    padding: var(--space-4);
    overflow-wrap: anywhere;
}

.person-section h4,
.person-section legend,
.person-actions h4 {
    color: var(--text);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 var(--space-3);
}

.person-section legend {
    padding: 0;
}

.person-fields {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    min-width: 0;
}

.person-field {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.person-field dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.person-field dd {
    color: var(--text);
    font-size: var(--font-size-base);
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.person-field dd,
.future-control {
    display: grid;
    gap: 5px;
}

.person-absence-field {
    gap: var(--space-3);
}

.person-absence-title {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin: 0;
    text-transform: uppercase;
}

.person-absence-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.person-absence-form button {
    grid-column: 1 / -1;
    justify-self: start;
}

.person-absence-list {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.person-absence-item {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
}

.person-absence-item button {
    min-height: 36px;
    padding: 0 var(--space-3);
}

.future-field dd,
.future-control {
    color: var(--muted);
}

.future-control input:disabled {
    border-color: transparent;
}

.field-help {
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

.future-badge {
    align-self: start;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-warm-beige);
    color: var(--color-warm-brown);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    justify-self: start;
    padding: var(--space-1) var(--space-3);
    text-transform: uppercase;
}

.future-control input:disabled {
    background: var(--surface-muted);
    color: var(--muted);
}

.person-availability-link {
    color: var(--muted);
    font-size: 14px;
}

.person-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    margin-top: 2px;
    min-height: 40px;
    padding: 0 var(--space-4);
    text-decoration: none;
@media (max-width: 720px) {
    .person-absence-form {
        grid-template-columns: 1fr;
    }
}
}

.person-actions {
    display: grid;
    gap: var(--space-3);
    border-top: 1px solid var(--border);
    padding-top: var(--space-4);
}

.person-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-3);
}

.person-action-row button {
    min-width: 112px;
    text-align: center;
}

.account-dialog {
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    max-width: min(440px, calc(100vw - 32px));
    padding: 0;
    width: 100%;
}

.account-dialog::backdrop {
    background: rgba(26, 34, 31, 0.42);
}

.account-dialog-panel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.account-dialog-header {
    align-items: center;
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
}

.account-dialog-header h3 {
    font-size: 20px;
    margin: 0;
}

.account-dialog-close {
    min-height: 36px;
    padding: 0 var(--space-3);
}

.form-error {
    color: var(--danger);
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    min-height: 20px;
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-light-sage);
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: var(--space-1) var(--space-3);
    text-transform: uppercase;
}

.task-list,
.planning-list {
    display: grid;
    gap: var(--space-4);
}

.task-group {
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.task-group + .task-group {
    margin-top: 12px;
}

.task-group-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 0;
    color: var(--text);
    min-height: 56px;
    padding: var(--space-4) var(--space-5);
    text-align: left;
}

.task-group-toggle:hover,
.task-group-toggle:focus-visible {
    background: var(--color-cream);
}

.task-group-toggle::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid var(--primary);
    transition: transform 0.15s ease;
}

.task-group-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.task-group-title {
    color: var(--text);
    font-weight: 800;
    min-width: 0;
}

.task-group-meta {
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    justify-self: end;
    padding: var(--space-1) var(--space-3);
    text-transform: uppercase;
    white-space: nowrap;
}

.task-group-body {
    display: grid;
    gap: var(--space-4);
    border-top: 1px solid var(--border);
    background: var(--color-cream);
    padding: var(--space-4);
}

.task-group-body[hidden] {
    display: none;
}

.task-card {
    display: grid;
    gap: var(--space-4);
    border: 0;
    box-shadow: none;
}

.task-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-4);
}

.task-card-header h3 {
    margin: 0 0 var(--space-1);
    font-size: 20px;
}

.task-card-header p {
    color: var(--muted);
    margin: 0;
}

.task-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.task-chip,
.task-inline-meta {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
    min-height: 24px;
    padding: 0 var(--space-3);
    text-transform: uppercase;
    white-space: nowrap;
}

.task-chip-active {
    background: var(--success-soft);
    color: var(--primary);
}

.task-chip-paused {
    background: var(--color-warm-beige);
    color: var(--color-warm-brown);
}

.task-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.detail-pill {
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    min-width: 0;
    padding: 11px 12px;
    overflow-wrap: anywhere;
}

.detail-pill span {
    display: block;
    color: var(--color-olive);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.list-block {
    display: grid;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-cream);
    padding: var(--space-4);
}

.list-block strong {
    font-size: var(--font-size-sm);
    font-weight: 800;
}

.list-block ul,
.reason-list {
    margin: 0;
    padding-left: 20px;
}

.task-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
    border-top: 1px solid var(--border);
    padding-top: var(--space-4);
}

.task-actions button {
    min-width: 112px;
}

.empty-state {
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--muted);
    padding: 18px;
}

.time-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 46px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 10px 12px;
}

.time-blocks legend {
    padding: 0 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.time-blocks label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
}

.time-blocks input {
    accent-color: var(--primary);
    width: auto;
}

.planning-controls {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
}

.planning-controls label {
    width: min(260px, 100%);
}

.planning-week-label {
    color: var(--muted);
    font-weight: 700;
    margin-top: calc(var(--space-3) * -1);
}

.assignment {
    background: var(--surface);
}

.planner-summary-box {
    display: grid;
    gap: var(--space-4);
}

.planner-summary-box h3,
.planner-summary-box p {
    margin-bottom: 0;
}

.planner-assignment-card {
    border: 0;
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.planner-assignment-card-compact {
    box-shadow: var(--shadow-soft);
    padding: var(--space-4);
}

.assignment-title {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 0;
}

.assignment-title > div {
    min-width: 0;
}

.assignment-status-badges {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: max-content;
}

.assignment-title h3 {
    margin: 0 0 var(--space-1);
}

.assignment-task-label {
    color: var(--muted);
    margin: 0;
    overflow-wrap: anywhere;
}

.reason-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    margin-top: 14px;
    padding: 14px;
}

.planner-reason-box {
    background: var(--color-cream);
    color: var(--muted);
    margin-top: 0;
}

.planner-reason-box h3,
.reason-box h4 {
    margin: 0 0 8px;
}

.planner-reason-box p {
    margin: 0 0 var(--space-2);
}

.planner-reason-box-compact {
    padding: var(--space-3);
}

.planner-open-items {
    border-color: rgba(198, 161, 109, 0.55);
    background: var(--warning-soft);
}

.person-tasks-panel {
    border-color: var(--color-light-sage);
}

.personal-task-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 18px;
}

.personal-task-card {
    background: var(--surface);
}

.personal-task-card-completed {
    border-color: var(--primary);
    background: var(--color-light-sage);
}

.personal-task-card-skipped {
    border-color: rgba(198, 161, 109, 0.55);
    background: var(--warning-soft);
}

.personal-task-check {
    align-items: center;
    display: flex;
    gap: 10px;
    font-size: 18px;
    font-weight: 800;
}

.personal-task-check input {
    accent-color: var(--primary);
    width: auto;
}

.personal-task-actions {
    align-items: center;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: flex-end;
    padding-top: var(--space-4);
}

.personal-task-actions button {
    min-width: 120px;
}

.personal-task-feedback {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    margin: 12px 0 0;
}

.personal-task-feedback-success {
    color: var(--primary);
}

.personal-task-feedback-error {
    color: var(--danger);
}

.today-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.today-status-card {
    background: var(--surface-muted);
}

.today-person-group {
    margin-bottom: var(--space-4);
}

.today-person-toggle {
    min-height: 64px;
}

.today-person-title {
    font-size: var(--font-size-lg);
}

.today-person-meta {
    text-transform: none;
}

.today-person-body {
    display: grid;
    gap: var(--space-3);
    animation: todayAccordionReveal 0.18s ease;
}

@keyframes todayAccordionReveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.today-complete-card {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    border: 1px solid var(--color-light-sage);
    border-radius: var(--radius-lg);
    background: var(--success-soft);
    text-align: center;
    padding: var(--space-6);
}

.today-complete-card h3,
.today-complete-card p {
    margin: 0;
}

.today-complete-emoji {
    font-size: 32px;
}

.today-task-card .personal-task-actions button {
    min-width: 132px;
}

.today-person-group .inline-link-button {
    min-height: 40px;
    white-space: nowrap;
}

.today-person-link-row {
    margin-bottom: var(--space-4);
}

.today-person-link-row {
    margin: 0;
}

.inline-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.today-task-card {
    box-shadow: var(--shadow-soft);
}

.assignment-task-why {
    margin: 0;
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.task-extra-details {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    margin-top: var(--space-2);
    padding: var(--space-4);
}

.task-extra-details summary {
    cursor: pointer;
    color: var(--text);
    font-weight: 700;
    min-height: 24px;
}

.task-extra-details-body {
    display: grid;
    gap: var(--space-3);
    border-top: 1px solid var(--border);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
}

.task-extra-details-body h4,
.task-extra-details-body p {
    margin: 0;
}

.task-extra-details-body ul {
    margin: var(--space-2) 0 0;
    padding-left: 20px;
}

.task-extra-details-body li + li {
    margin-top: 4px;
}

.person-day-quick-links {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.compact-title {
    margin: 0;
    font-size: 18px;
}

.person-day-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.person-day-chip {
    display: grid;
    gap: var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text);
    min-width: 152px;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
}

.person-day-chip strong {
    color: var(--primary);
}

.person-day-chip span {
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.week-day-group .assignment {
    box-shadow: var(--shadow-soft);
}

.calendar-controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.calendar-month-label {
    margin: 0;
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}

.calendar-nav-help {
    margin: 0 0 var(--space-4);
    color: var(--muted);
    font-size: var(--font-size-sm);
    line-height: 1.55;
}

.calendar-controls button:disabled {
    border-color: var(--border);
    background: var(--surface-muted);
    box-shadow: none;
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.72;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-2);
}

.calendar-weekday {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

.calendar-day {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 104px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text);
    padding: 10px;
    text-align: left;
}

.calendar-day span {
    font-size: 13px;
    font-weight: 700;
}

.calendar-day small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.calendar-day-current-month {
    background: var(--surface);
}

.calendar-day-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(91, 111, 82, 0.18);
}

.calendar-day-today {
    border-color: var(--primary);
}

.calendar-day-unknown {
    background: var(--surface-muted);
    color: var(--muted);
}

.calendar-day-details {
    display: grid;
    gap: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    margin-top: var(--space-4);
    padding: var(--space-4);
}

.calendar-day-details h3,
.calendar-day-details p {
    margin: 0;
}

.calendar-day-list {
    display: grid;
    gap: var(--space-2);
}

.calendar-day-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    padding: 10px;
}

.calendar-day-item-absence {
    background: var(--absence-bg);
    border-color: var(--absence-border);
}

.calendar-absence-badge {
    background: var(--absence-bg);
    color: var(--absence-text);
    border: 1px solid var(--absence-border);
}

.calendar-day-item p {
    color: var(--muted);
    font-size: var(--font-size-sm);
}

.summary-box,
.planning-day {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    padding: 18px;
}

.planning-day {
    overflow: hidden;
}

.planning-day summary {
    cursor: pointer;
    color: var(--text);
    font-weight: 800;
    list-style-position: inside;
    padding: var(--space-1) 0;
}

.planning-day summary::marker {
    color: var(--primary);
}

.planner-day-body {
    display: grid;
    gap: var(--space-4);
    border-top: 1px solid var(--border);
    margin-top: var(--space-3);
    padding-top: var(--space-4);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.message-preview {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.message-preview-summary {
    align-items: start;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
}

.message-preview-summary h3,
.message-preview-summary p {
    margin-bottom: 0;
}

.message-preview-controls {
    align-items: flex-end;
    display: grid;
    gap: 12px;
    justify-items: end;
}

.message-preview-actions {
    align-items: flex-end;
    display: grid;
    gap: 8px;
    justify-items: end;
}

.message-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.message-card-no-tasks-today {
    background: var(--surface-muted);
}

.message-card-unplanned-warning {
    border-color: rgba(198, 161, 109, 0.55);
    background: var(--warning-soft);
}

.message-title,
.message-body {
    margin-bottom: 0;
}

.message-title {
    color: var(--muted);
}

.message-body {
    font-size: 16px;
    color: var(--text);
}

.message-details {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.message-tasks {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.message-actions {
    align-items: center;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 12px;
}

.message-send-status {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.message-send-status-success {
    color: var(--primary);
}

.message-send-status-error {
    color: var(--danger);
}

.compact-empty-state {
    margin: 0;
    padding: 12px;
}

.warning-badge {
    background: var(--color-warm-beige);
    color: var(--color-warm-brown);
}

.stat-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-muted);
    padding: 18px;
    min-width: 0;
}

.stat-card span {
    display: block;
    color: var(--primary);
    font-size: 30px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.stat-card p {
    margin: 4px 0 0;
    color: var(--muted);
}

.system-status-card {
    display: grid;
    gap: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-muted);
    margin-top: var(--space-5);
    padding: var(--space-5);
}

.system-status-card.hidden {
    display: none;
}

.system-status-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

.system-status-header h3 {
    margin: 0;
}

.system-status-badge {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    padding: 6px 10px;
}

.system-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.system-status-group {
    display: grid;
    gap: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    min-width: 0;
    padding: var(--space-4);
}

.system-status-group-wide {
    grid-column: 1 / -1;
}

.system-status-group h4 {
    margin: 0;
}

.system-status-group dl {
    display: grid;
    gap: var(--space-2);
    margin: 0;
}

.system-status-group dl div {
    align-items: baseline;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-2);
}

.system-status-group dl div:first-child {
    border-top: 0;
    padding-top: 0;
}

.system-status-group dt {
    color: var(--muted);
    font-weight: 700;
}

.system-status-group dd {
    color: var(--text);
    font-weight: 800;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.system-status-message {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

/* Sitewide layout scale and alignment polish */
:root {
    --layout-sidebar-width: 340px;
    --layout-content-max: 1600px;
    --layout-content-gutter: clamp(20px, 2.8vw, 44px);
    --layout-section-gap: clamp(24px, 2vw, 34px);
}

.app-shell {
    grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr);
}

.app-sidebar {
    padding: var(--space-6) calc(var(--space-5) + 4px);
}

.app-nav-link {
    gap: var(--space-5);
    white-space: nowrap;
}

.sidebar-user {
    padding: var(--space-4) var(--space-4) var(--space-5);
}

.app-topbar {
    padding-inline: var(--layout-content-gutter);
}

.app-topbar-main {
    width: min(var(--layout-content-max), calc(100% - 2px));
    margin: 0 auto;
    grid-template-columns: minmax(320px, 0.9fr) minmax(520px, 1.1fr);
    gap: var(--space-4) clamp(var(--space-5), 2.4vw, 42px);
}

.app-topbar-main h1 {
    font-size: clamp(36px, 2.6vw, 42px);
}

.app-topbar-main p {
    font-size: clamp(20px, 1.35vw, 24px);
}

.topbar-values {
    justify-self: center;
    width: min(100%, 760px);
}

.app-content {
    width: min(var(--layout-content-max), calc(100% - (var(--layout-content-gutter) * 2)));
}

.dashboard {
    gap: var(--layout-section-gap);
}

.panel {
    padding: clamp(var(--space-5), 2.4vw, 42px);
}

#rooms.card-grid,
#availability.card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
}

#people.card-grid {
    max-width: 1320px;
}

#personForm,
#roomForm,
#taskForm,
.availability-form,
.scheduler-settings-form,
.planning-controls {
    max-width: 1320px;
}

@media (max-width: 1400px) {
    :root {
        --layout-sidebar-width: 324px;
        --layout-content-max: 1500px;
    }

    .app-topbar-main {
        grid-template-columns: minmax(280px, 1fr) minmax(460px, 1fr);
    }

    .topbar-values {
        width: min(100%, 700px);
    }
}

@media (max-width: 991px) {
    .app-topbar {
        min-height: 132px;
        padding: var(--space-5) var(--space-4) var(--space-4);
    }

    .app-topbar-main {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title values"
            "date values";
        gap: var(--space-3) var(--space-4);
    }

    .topbar-values {
        width: auto;
        min-width: 0;
        padding: 0;
        gap: clamp(8px, 2vw, 16px);
        background: transparent;
        border-radius: 0;
    }

    .topbar-value {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .topbar-value + .topbar-value {
        border-left: 0;
    }

    .topbar-value-icon {
        width: clamp(32px, 5vw, 40px);
        height: clamp(32px, 5vw, 40px);
    }

    .topbar-value-title,
    .topbar-value-text {
        display: none;
    }
}

@media (max-width: 840px) {
    body {
        padding-bottom: 92px;
    }

    body.auth-pending,
    body.auth-login,
    body.auth-email-verification {
        padding-bottom: 0;
    }

    .app-shell {
        display: block;
        min-height: 100vh;
    }

    .app-sidebar {
        display: none;
    }

    .app-topbar {
        min-height: 132px;
        padding: var(--space-5) var(--space-4) var(--space-4);
    }

    .app-topbar-main {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "date"
            "values";
    }

    .app-topbar-main p {
        font-size: var(--font-size-base);
    }

    .topbar-values {
        justify-self: start;
        margin-top: var(--space-2);
    }

    .app-content {
        width: min(100% - 32px, 720px);
    }

    .mobile-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        gap: var(--space-1);
        border-top: 1px solid var(--border);
        background: var(--surface);
        box-shadow: 0 -6px 18px rgba(30, 30, 30, 0.08);
        overflow-x: auto;
        scrollbar-width: thin;
        padding: var(--space-3) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
    }

    .mobile-nav a {
        display: grid;
        width: 88px;
        justify-items: center;
        gap: var(--space-1);
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        min-width: 0;
        overflow-wrap: anywhere;
        padding: var(--space-2) var(--space-1);
        text-align: center;
        text-decoration: none;
    }

    .mobile-nav-title {
        align-self: center;
        color: var(--muted);
        display: inline-block;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.08em;
        padding: 0 var(--space-2);
        text-transform: uppercase;
        white-space: nowrap;
    }

    .mobile-nav a img {
        width: 20px;
        height: 20px;
    }

    .mobile-nav a:hover,
    .mobile-nav a:focus-visible {
        color: var(--primary);
    }

    .mobile-nav a.is-active {
        color: var(--primary);
    }

    .auth-screen {
        padding-top: 40px;
    }

    .auth-card,
    .onboarding-card {
        padding: 36px;
    }

    .form-grid,
    .task-form,
    .availability-form,
    .scheduler-settings-form {
        grid-template-columns: 1fr;
    }

    .wide-field {
        grid-column: auto;
    }

    .task-details,
    .stats-grid,
    .system-status-grid,
    .person-section-grid,
    .personal-task-meta,
    .today-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-controls {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .calendar-month-label {
        text-align: left;
    }

    .calendar-grid {
        grid-template-columns: repeat(7, minmax(44px, 1fr));
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .planning-controls,
    .assignment-title,
    .task-card-header,
    .message-preview-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .planning-controls button,
    .message-preview-actions button {
        width: 100%;
        min-height: 44px;
    }

    .message-preview-controls,
    .message-preview-actions {
        justify-items: stretch;
    }

    .task-card-header {
        display: grid;
        grid-template-columns: 1fr;
    }

    .task-chip-row {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .auth-screen {
        padding: 28px var(--space-4);
    }

    .auth-card,
    .onboarding-card {
        border-radius: 28px;
        padding: 30px 24px;
    }

    .auth-steps,
    .onboarding-progress-step {
        font-size: 10px;
        gap: 4px;
    }

    .auth-card h1,
    .onboarding-card h1 {
        font-size: 30px;
    }

    .auth-intro,
    .onboarding-intro {
        font-size: 17px;
    }

    .onboarding-view {
        padding: 28px var(--space-4);
    }

    .onboarding-summary-grid {
        grid-template-columns: 1fr;
    }

    .onboarding-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .onboarding-row-actions {
        grid-column: 2;
        justify-content: flex-start;
    }

    .onboarding-status-pill {
        grid-column: 2;
        justify-self: start;
    }

    .app-topbar h1 {
        font-size: 24px;
    }

    #roomForm,
    #taskForm,
    .room-card,
    #personForm,
    .person-card {
        padding: var(--space-4);
    }

    .task-group-toggle {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .task-group-meta {
        grid-column: 2;
        justify-self: start;
        white-space: normal;
    }

    .task-actions {
        justify-content: stretch;
    }

    .task-actions button {
        flex: 1 1 140px;
        min-height: 44px;
    }

    .today-status-grid,
    .personal-task-meta {
        grid-template-columns: 1fr;
    }

    .calendar-day {
        min-height: 94px;
        padding: 8px;
    }

    .calendar-day small {
        font-size: 10px;
    }

    .calendar-day-item {
        align-items: stretch;
        flex-direction: column;
    }

    .today-person-header {
        align-items: stretch;
        flex-direction: column;
    }

    .today-person-group .inline-link-button {
        width: 100%;
    }

    .today-task-card .personal-task-actions button {
        flex: 1 1 100%;
    }

    .person-day-chip {
        min-width: 100%;
    }

    .availability-form {
        padding: var(--space-4);
    }

    .availability-daypart-row,
    .availability-total-row {
        grid-template-columns: 1fr;
    }

    .availability-card-header,
    .availability-day-card-header {
        flex-direction: column;
    }

    .availability-card-actions {
        justify-content: stretch;
    }

    .availability-card-actions button,
    .availability-delete-button {
        width: 100%;
        min-height: 44px;
    }

    .room-card-header {
        flex-direction: column;
    }

    .room-detail-grid {
        grid-template-columns: 1fr;
    }

    .room-action-row {
        justify-content: stretch;
    }

    .room-action-row button {
        flex: 1 1 140px;
        min-height: 44px;
    }

    .person-card-hero {
        padding-top: 0;
    }

    .person-avatar {
        width: 64px;
        height: 64px;
        font-size: 20px;
    }

    .task-details,
    .stats-grid,
    .system-status-grid,
    .person-section-grid,
    .personal-task-meta {
        grid-template-columns: 1fr;
    }

    .system-status-header,
    .system-status-group dl div {
        align-items: flex-start;
        flex-direction: column;
    }

    .system-status-group dd {
        text-align: left;
    }

    .card-header {
        flex-direction: column;
    }

    .message-actions {
        justify-content: stretch;
    }

    .message-actions button {
        flex: 1 1 160px;
        min-height: 44px;
    }

    .personal-task-actions {
        justify-content: stretch;
    }

    .personal-task-actions button {
        flex: 1 1 140px;
        min-height: 44px;
    }

    .person-action-row {
        justify-content: stretch;
    }

    .person-action-row button {
        flex: 1 1 140px;
        min-height: 44px;
    }
}