h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

:root {
    --color-bg: #f1f5f9;
    --color-surface: #ffffff;
    --color-text: #0f172a;
    --color-muted: #64748b;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-accent: #0d9488;
    --color-accent-hover: #0f766e;
    --color-accent-soft: #ccfbf1;
    --color-hero-from: #0f172a;
    --color-hero-to: #134e4a;
    --color-danger: #dc2626;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --radius: 10px;
    --radius-lg: 14px;
    --container: 1120px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--color-accent-hover);
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.site-logo:hover {
    color: var(--color-text);
}

.site-logo__mark {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--color-accent) 0%, #14b8a6 100%);
    box-shadow: 0 2px 6px rgba(13, 148, 136, 0.35);
}

.site-logo__mark--footer {
    width: 1.5rem;
    height: 1.5rem;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.site-nav-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-nav-toggle {
    display: none;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.site-nav-toggle__bars {
    display: inline-block;
    width: 1rem;
    height: 0.75rem;
    background:
        linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
}

.site-nav__link {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
}

.site-nav__link:hover {
    color: var(--color-accent);
}

.site-nav__user {
    color: var(--color-muted);
    font-size: 0.875rem;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-layout {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.site-main {
    max-width: var(--container);
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.site-main:has(> .home-page) {
    max-width: none;
    padding: 0;
}

.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 2.5rem;
    padding-bottom: 2rem;
}

.site-footer__brand {
    max-width: 20rem;
}

.site-footer__name {
    font-weight: 700;
    display: block;
    margin-bottom: 0.35rem;
}

.site-footer__tagline {
    margin: 0;
    font-size: 0.9rem;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-start;
}

.site-footer__links a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
}

.site-footer__links a:hover {
    color: var(--color-accent);
}

.site-footer__legal {
    padding-bottom: 1.5rem;
    font-size: 0.8125rem;
}

.site-footer__legal p {
    margin: 0;
}

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

.eyebrow {
    display: inline-block;
    margin: 0 0 0.75rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #99f6e4;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
}

.hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    margin-top: 0;
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 700;
}

.hero-lead {
    font-size: 1.125rem;
    line-height: 1.65;
    max-width: 36rem;
    margin: 1rem 0 1.5rem;
    color: #cbd5e1;
}

.hero-note {
    margin: 1rem 0 0;
    font-size: 0.875rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.hero--marketing {
    background: linear-gradient(155deg, var(--color-hero-from) 0%, var(--color-hero-to) 55%, #115e59 100%);
    color: #f8fafc;
    padding: 3.5rem 0 4rem;
}

.hero--marketing a:not(.btn-primary):not(.btn-secondary) {
    color: #99f6e4;
}

.hero--marketing__inner {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.home-page .section {
    padding: 3.5rem 0;
}

.section--muted {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.section-header {
    text-align: center;
    max-width: 36rem;
    margin: 0 auto 2.5rem;
}

.section-header h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    letter-spacing: -0.02em;
}

.audience-strip__inner {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 720px) {
    .audience-strip__inner {
        grid-template-columns: 1fr 1fr;
    }
}

.audience-card {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}

.audience-card__label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

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

.feature-grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.feature-card {
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.feature-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.feature-card p {
    margin: 0;
    font-size: 0.9375rem;
}

.steps-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.steps-list li {
    counter-increment: step;
    position: relative;
    padding: 0 0 1.75rem 3rem;
    border-left: 2px solid var(--color-border);
    margin-left: 0.75rem;
}

.steps-list li:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.steps-list li::before {
    content: counter(step);
    position: absolute;
    left: -0.75rem;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
}

.steps-list li strong {
    display: block;
    margin-bottom: 0.25rem;
}

.steps-list li span {
    display: block;
    font-size: 0.9375rem;
}

.cta-band {
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
    color: #f0fdfa;
}

.cta-band h2 {
    margin: 0 0 0.35rem;
    color: #fff;
}

.cta-band .muted {
    color: #ccfbf1;
}

.cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.cta-band .btn-primary {
    background: #fff;
    color: var(--color-accent-hover);
}

.cta-band .btn-primary:hover {
    background: #f0fdfa;
    color: #115e59;
}

.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
    margin: 0 0 0.35rem;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
}

.page-header p {
    margin: 0;
}

.page-shell {
    max-width: 40rem;
}

.page-shell--centered {
    text-align: center;
    margin: 2rem auto;
    padding: 2rem 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 1.25rem 0 0;
}

.error-request-id {
    font-size: 0.875rem;
    word-break: break-all;
}

.error-dev-hint {
    text-align: left;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.error-dev-hint h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.page-shell h1 {
    margin-top: 0;
}

.breadcrumb {
    margin-bottom: 1rem;
    font-size: 0.9375rem;
    color: var(--color-muted);
}

.breadcrumb a {
    text-decoration: none;
    font-weight: 500;
    color: var(--color-text);
}

.breadcrumb a:hover {
    color: var(--color-accent);
}

.breadcrumb-sep {
    margin: 0 0.35rem;
    color: var(--color-muted);
    user-select: none;
}

.auth-page {
    display: flex;
    justify-content: center;
    padding: 1rem 0 2rem;
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    padding: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.auth-card__header h1 {
    margin: 0 0 0.35rem;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

.auth-card__header p {
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
    color: var(--color-muted);
    font-size: 0.875rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--color-border);
}

.auth-code-input {
    font-size: 1.5rem;
    letter-spacing: 0.35em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.auth-hint {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
}

.workspace-switcher {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px;
    background: var(--color-surface);
}

.workspace-switcher__form {
    margin: 0;
}

.workspace-switcher__option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.85rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.workspace-switcher__option--active.workspace-switcher__option--hosting {
    background: var(--color-accent);
    color: #fff;
}

.workspace-switcher__option--active.workspace-switcher__option--cleaning {
    background: #7c3aed;
    color: #fff;
}

.workspace-switcher__badge {
    min-width: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.25rem;
    text-align: center;
}

.clean-job-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clean-job-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border);
}

.clean-job-list__property {
    font-weight: 600;
    flex: 1 1 12rem;
}

/* #71: the whole row is the tap target (44px+), not a small "Open" link. */
.clean-job-list__item:has(> .clean-job-list__link, > .clean-job-list__row) { display: block; padding: 0; }
.clean-job-list__link,
.clean-job-list__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.75rem 2rem 0.75rem 0;
    min-height: 44px;
    position: relative;
    color: inherit;
    text-decoration: none;
}
.clean-job-list__link:hover .clean-job-list__property,
.clean-job-list__link:focus-visible .clean-job-list__property { text-decoration: underline; }
.clean-job-list__chevron { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--color-muted, #64748b); }
.cleaner-job-card:target { outline: 3px solid var(--color-primary, #0d9488); outline-offset: 2px; }

.btn-primary:disabled,
.btn-secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Detect browser autofill so form-validation.js can re-enable submit buttons. */
@keyframes turnoverops-autofill-start {
    from { opacity: 1; }
    to { opacity: 1; }
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    animation: turnoverops-autofill-start 0.01s;
}

.field-invalid {
    border-color: #dc2626 !important;
    outline-color: #dc2626;
}

.field-error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: #dc2626;
}

.password-requirements {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: 0.85rem;
}

.password-requirements li {
    padding: 0.15rem 0;
    padding-left: 1.25rem;
    position: relative;
}

.password-requirements li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-muted);
    font-weight: bold;
}

.password-requirement-met {
    color: #15803d;
}

.password-requirement-met::before {
    content: "✓";
    color: #15803d;
}

.password-requirement-unmet {
    color: var(--color-muted);
}

.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: 0.55rem 1.15rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-lg {
    padding: 0.7rem 1.35rem;
    font-size: 1.05rem;
}

.btn-sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.875rem;
}

.btn-primary {
    background: var(--color-accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--color-accent-hover);
    color: #fff;
}

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
}

.btn-secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.hero--marketing .btn-secondary {
    background: transparent;
    color: #f8fafc;
    border-color: rgba(248, 250, 252, 0.45);
}

.hero--marketing .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #f8fafc;
    color: #fff;
}

.btn-link-pill {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    text-decoration: none;
}

.logout-form {
    display: inline;
    margin: 0;
}

.btn-link-nav {
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    text-decoration: underline;
    padding: 0;
}

.form-field {
    margin-bottom: 1rem;
}

.form-field label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.form-field.checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-field.checkbox label {
    display: inline;
    margin: 0;
    font-weight: inherit;
}

.form-field.checkbox input[type="checkbox"],
.form-field.checkbox input[type="radio"] {
    width: auto;
    flex-shrink: 0;
    margin: 0;
}

.form-error {
    color: var(--color-danger);
}

.form-footer {
    margin-top: 1.5rem;
    color: var(--color-muted);
}

.dashboard-org {
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.dashboard-org h2 {
    margin-top: 0;
}

.dashboard-org-header {
    margin-bottom: 0;
}

.dashboard-org-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.85rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dashboard-org-toggle__chevron {
    font-size: 0.95rem;
    color: var(--color-muted);
}

.dashboard-org-toggle__name {
    font-size: 1.35rem;
    font-weight: 600;
}

.dashboard-org-toggle__meta {
    font-size: 0.9rem;
}

.dashboard-org--collapsed {
    padding-bottom: 1rem;
}

.properties-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.properties-view-toggle {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.properties-view-toggle .is-active {
    font-weight: 700;
    text-decoration: underline;
}

.property-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.property-row-actions .btn-small,
.property-row-actions a.btn-small {
    margin-right: 0;
}

.dashboard-exceptions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    align-items: center;
    margin: 0.35rem 0 0.25rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff7ed;
}

.dashboard-exception {
    font-weight: 600;
    color: #9a3412;
}

.dashboard-turnover-backlog > summary {
    cursor: pointer;
    font-weight: 600;
}

.dashboard-section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.dashboard-section h3 {
    margin-top: 0;
}

.dashboard-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.dashboard-stat {
    flex: 1 1 7rem;
    min-width: 7rem;
    padding: 0.75rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.dashboard-stat__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.dashboard-stat__label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-top: 0.25rem;
}

.properties-page-header,
.properties-org-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.properties-org-header h2 {
    margin: 0;
}

.dashboard-section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.dashboard-section-heading h3 {
    margin-bottom: 0;
}

.cleaners-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.cleaners-org-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.cleaners-org-header h2 {
    margin: 0;
}

.cleaners-pending-section {
    background: rgba(255, 193, 7, 0.08);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    border: 1px solid rgba(255, 193, 7, 0.25);
}

.cleaners-page-header--sticky {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--color-bg, #fff);
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.cleaners-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.cleaners-workload-summary {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
}

.cleaners-workbench-table .cleaners-name {
    display: block;
    font-weight: 600;
}

.cleaners-email-secondary {
    display: block;
    font-size: 0.8rem;
    margin-top: 0.1rem;
}

.cleaners-open-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.cleaners-row--overdue {
    background: rgba(220, 38, 38, 0.04);
}

.cleaners-member-details {
    font-size: 0.85rem;
}

.cleaners-member-details summary {
    cursor: pointer;
    color: var(--color-primary, #0d9488);
}

.cleaners-member-details__dl {
    margin: 0.4rem 0 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.75rem;
}

.cleaners-member-details__dl dt {
    margin: 0;
    font-weight: 600;
    color: var(--color-muted, #6b7280);
}

.cleaners-member-details__dl dd {
    margin: 0;
}

.cleaners-empty {
    margin: 0.35rem 0 0;
}

.cleaners-invite-again {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.cleaners-invite-again__meta {
    font-size: 0.8rem;
}

.cleaners-invite-status--expired,
.cleaners-invite-status--revoked {
    color: #b45309;
    font-weight: 600;
}

.cleaners-invite-status--delivery {
    color: #6b7280;
    font-weight: 600;
}

.cleaners-invite-status--active {
    font-weight: 500;
}

.profile-org {
    margin-bottom: 2rem;
}

.dashboard-org h3 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}

.dashboard-payment-settings,
.dashboard-team,
.dashboard-notification-preferences,
.dashboard-notifications,
.dashboard-add-property {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.dashboard-payment-settings {
    margin-top: 1rem;
}

.property-list {
    margin: 0;
    padding-left: 1.25rem;
}

#blazor-error-ui {
    color-scheme: light only;
    background: #7f1d1d;
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.property-section {
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.property-section h2 {
    margin-top: 0;
    font-size: 1.25rem;
}

.property-section h3 {
    margin-top: 1.5rem;
    font-size: 1rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.data-table th,
.data-table td {
    padding: 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.data-table th {
    font-weight: 600;
    color: var(--color-muted);
    font-size: 0.875rem;
}

.btn-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    background: var(--color-accent);
    color: #fff;
    margin-right: 0.25rem;
}

.btn-small:hover {
    background: var(--color-accent-hover);
}

.btn-small:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-danger {
    background: #dc3545;
}

.btn-danger:hover {
    background: #c82333;
}

.status-active {
    color: #28a745;
}

.status-error {
    color: #dc3545;
}

.status-disabled {
    color: var(--color-muted);
}

.confidence-review {
    background: rgba(255, 193, 7, 0.15);
}

.confidence-changed {
    background: rgba(23, 162, 184, 0.1);
}

.confidence-cancelled {
    opacity: 0.6;
    text-decoration: line-through;
}

.form-success {
    color: #28a745;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.form-row > .form-field,
.form-row > .form-field-action {
    margin-bottom: 0;
}

/* Keep controls aligned when one field shows a validation message */
.form-row > .form-field:has(input, select, textarea) {
    position: relative;
    padding-bottom: 1.35rem;
}

.form-row > .form-field .field-error {
    position: absolute;
    left: 0;
    bottom: 0;
    margin-top: 0;
}

.form-row > .form-field-action {
    padding-top: 1.5rem;
}

.form-field-grow {
    flex: 1;
    min-width: 200px;
}

.form-field-action {
    margin-bottom: 1rem;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    accent-color: var(--color-accent);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.job-completed {
    opacity: 0.6;
}

.job-cancelled {
    opacity: 0.5;
    text-decoration: line-through;
}

.job-attention {
    background: rgba(255, 193, 7, 0.15);
}

.priority-high {
    color: #ffc107;
    font-weight: 600;
}

.priority-urgent {
    color: #dc3545;
    font-weight: 700;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    overflow-y: auto;
    padding: 1rem;
}

.modal {
    background: var(--color-surface);
    border-radius: 8px;
    padding: 1.5rem;
    min-width: 320px;
    max-width: 500px;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    margin: auto;
}

.modal h3 {
    margin-top: 0;
}

.modal h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.modal ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.modal ul li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
}

.on-platform-checkout-hint {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted, #f8f9fa);
}

.stripe-payment-element,
.sync-payment-element {
    margin: 0.75rem 0;
}

.sync-history-table {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

.sync-run-failed td {
    color: var(--color-danger, #b42318);
}

.sync-run-error-detail td {
    font-size: 0.875rem;
    padding-top: 0;
}

/* Cleaner Portal — progressive job card (#19) */
.job-card-summary {
    margin-bottom: 0.75rem;
}

.job-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-end;
}

.job-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.65rem 0 0.25rem;
}

.job-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.job-chip-inline {
    margin-left: 0.4rem;
    vertical-align: middle;
}

.job-chip-ok {
    color: #166534;
    background: #dcfce7;
    border-color: #86efac;
}

.job-chip-warn {
    color: #9a3412;
    background: #ffedd5;
    border-color: #fdba74;
}

.job-chip-overdue {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fca5a5;
}

.job-chip-pay-pending {
    color: #92400e;
    background: #fef3c7;
    border-color: #fcd34d;
}

.job-chip-neutral {
    color: var(--color-muted);
    background: rgba(0, 0, 0, 0.03);
}

.cleaner-job-card.job-card-overdue {
    border-left-color: #dc2626;
}

.job-due-line,
.job-status-line,
.job-slot-line {
    margin: 0.2rem 0;
}

.job-decision-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 0.85rem;
    padding: 0.65rem 0;
}

.job-decision-bar .btn-primary,
.job-decision-bar .btn-secondary {
    min-width: 7rem;
}

.job-card-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.job-card-section {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    background: rgba(0, 0, 0, 0.015);
}

.job-card-section > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.job-card-section > summary::-webkit-details-marker {
    display: none;
}

.job-card-section[open] > summary {
    margin-bottom: 0.5rem;
}

.job-card-section--warn {
    border-color: #fdba74;
    background: #fff7ed;
}

.job-access-missing {
    margin: 0;
    color: #9a3412;
    font-weight: 600;
}

.cleaner-settings-intro {
    margin: 0 0 0.85rem;
}

.cleaner-settings-subpanel {
    margin: 0.65rem 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
}

.cleaner-settings-subpanel > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.cleaner-settings-subpanel > summary::-webkit-details-marker {
    display: none;
}

.cleaner-settings-subpanel[open] > summary {
    margin-bottom: 0.65rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cleaner-job-card--progressive .job-decision-bar {
    margin-top: 0.35rem;
}

.job-summary-meta--secondary {
    margin-top: 0.35rem;
}

.job-decision-bar--sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0.35rem 0 0.65rem;
    padding: 0.75rem 0.65rem;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.job-decision-bar--sticky .btn-primary,
.job-decision-bar--sticky .btn-secondary {
    min-height: 2.75rem;
}

/* Trailing bar — desktop sticky bottom within the card. */
.job-decision-bar--sticky-end {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0.5rem 0 0;
    padding: 0.75rem 0.65rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}

.job-decision-bar--sticky-end .btn-primary,
.job-decision-bar--sticky-end .btn-secondary {
    min-height: 2.75rem;
}

/*
 * Narrow cleaner portal (#19):
 * Root cause — mid-card bar lived inside short .job-card-summary, so sticky bottom
 * could not span long details. Bar is now a direct child of the card.
 * #28 QA: one trailing bar per offer, position:sticky inside its own card (no fixed dock), so it never sits over
 * another card while scrolling.
 */
@media (max-width: 640px) {
    .cleaner-job-card--progressive {
        overflow: visible;
    }

    .job-decision-bar--sticky {
        position: sticky;
        top: auto;
        bottom: 0;
        z-index: 6;
        margin: 0.35rem -0.25rem 0.85rem;
        padding: 0.75rem 0.65rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .job-decision-bar--sticky .btn-primary,
    .job-decision-bar--sticky .btn-secondary,
    .job-decision-bar--sticky-end .btn-primary,
    .job-decision-bar--sticky-end .btn-secondary {
        flex: 1 1 auto;
    }

    /* #28 QA: the trailing bar belongs to its own offer card. It sticks to the bottom of the screen only while
       its card is on screen and scrolls away with the card, so it never sits over another card. */
    .job-decision-bar--sticky-end {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 0.5rem 0 0;
        border-radius: 8px;
    }

    .site-layout:has(.bottom-nav) .job-decision-bar--sticky-end {
        bottom: var(--bottom-nav-height);
        padding-bottom: 0.75rem;
    }



    /* Clearance under stuck/fixed Accept so checklist/end content stays readable. */
    .cleaner-job-card--progressive.job-card-pending .job-card-details {
        padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
    }


    .cleaner-portal:has(.cleaner-job-card--progressive.job-card-pending) {
        padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
    }
}

/* Cleaner Portal */
.cleaner-portal {
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem;
}

.site-header--cleaner .site-header__inner {
    justify-content: space-between;
    gap: 1rem;
}

.site-header__cleaner-label {
    margin: 0;
    font-size: 0.875rem;
}

.cleaner-settings-panel {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.cleaner-settings-panel > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    margin-bottom: 0.75rem;
}

.cleaner-settings-panel > summary::-webkit-details-marker {
    display: none;
}

.cleaner-settings-panel[open] > summary {
    margin-bottom: 1rem;
}

.cleaner-settings-panel .cleaner-calendar-settings,
.cleaner-settings-panel .cleaner-working-hours,
.cleaner-settings-panel .cleaner-time-off,
.cleaner-settings-panel .cleaner-external-calendars,
.cleaner-settings-panel .cleaner-notification-settings,
.cleaner-settings-panel .cleaner-payout-settings {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.cleaner-settings-subpanel .cleaner-calendar-settings,
.cleaner-settings-subpanel .cleaner-working-hours,
.cleaner-settings-subpanel .cleaner-time-off,
.cleaner-settings-subpanel .cleaner-external-calendars,
.cleaner-settings-subpanel .cleaner-notification-settings,
.cleaner-settings-subpanel .cleaner-payout-settings {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.external-feed-list,
.external-event-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.external-feed-list li,
.external-event-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.external-feed-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.external-event-list p {
    margin: 0.25rem 0 0;
}

.sync-history-panel {
    margin: 0.75rem 0 1rem;
}

.sync-history-panel > summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cleaner-portal > section + section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.cleaner-portal > section h2 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
}

.cleaner-settings-form .form-field.checkbox {
    margin-bottom: 0.75rem;
}

.cleaner-portal-error {
    text-align: center;
    padding-top: 3rem;
}

.cleaner-header {
    margin-bottom: 1.5rem;
}

.cleaner-header h1 {
    margin-bottom: 0.25rem;
}

.cleaner-empty {
    text-align: center;
    padding: 2rem;
    background: var(--color-surface);
    border-radius: 8px;
}

.cleaner-jobs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cleaner-job-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
}

.cleaner-job-card.job-card-pending {
    border-left: 4px solid #ffc107;
}

.cleaner-job-card.job-card-accepted {
    border-left: 4px solid #28a745;
}

.cleaner-job-card.job-card-in-progress {
    border-left: 4px solid var(--color-accent);
}

.job-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.job-type {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--color-muted);
}

.cleaner-job-card h2 {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
}

.cleaner-access-packet {
    margin-top: 0.85rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
}

.cleaner-access-packet h3 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.cleaner-access-packet p {
    margin: 0.35rem 0;
    white-space: pre-wrap;
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.property-access-packet > summary,
.property-address > summary,
.property-turnover-settings > summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.job-location {
    margin: 0 0 0.75rem 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.job-location a {
    color: inherit;
    text-decoration: underline;
}

.job-details {
    margin-bottom: 1rem;
}

.job-details p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.job-days-remaining {
    margin: 0 0 0.35rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.job-days-remaining.job-days-today {
    color: var(--color-warning, #b45309);
}

.job-days-remaining.job-days-overdue {
    color: var(--color-danger, #b91c1c);
}

.job-days-remaining.job-days-upcoming {
    color: var(--color-primary, #2563eb);
}

.due-cell .job-days-remaining {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
}

.due-cell .due-datetime {
    display: block;
    font-size: 0.85rem;
}

.accounting-year-picker {
    max-width: 20rem;
    margin-bottom: 1.5rem;
}

.accounting-table .num {
    text-align: right;
    white-space: nowrap;
}

.accounting-total-row td {
    border-top: 2px solid var(--color-border, #e5e7eb);
}

.job-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* "Share job link" on the Manage assignment panel (#23); the URL itself is never shown. */
.share-job-link__status {
    margin-left: 0.35rem;
    font-size: 0.85rem;
}

/* Checklist Templates */
.template-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.template-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.template-card.template-default {
    border-color: var(--color-accent);
}

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

.template-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.template-name {
    font-weight: 600;
}

.template-actions {
    display: flex;
    gap: 0.5rem;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    background: var(--color-accent);
    color: #fff;
    border-radius: 4px;
}

.badge-small {
    padding: 0.1rem 0.35rem;
    font-size: 0.7rem;
}

.modal-assign {
    max-width: 560px;
}

.modal-wide {
    min-width: 400px;
    max-width: 600px;
}

.checklist-item-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.template-card .checklist-item-list {
    margin-bottom: 0;
}

.template-card > .form-row {
    width: 100%;
    margin-bottom: 0;
}

.template-area {
    padding: 0.65rem 0;
    border-top: 1px solid var(--color-border);
}

.template-area:first-of-type {
    border-top: none;
    padding-top: 0;
}

.template-area-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.template-area h4 {
    margin: 0 0 0.4rem 0;
    font-size: 0.95rem;
}

.area-photo-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.35rem 0 0.6rem;
}

.area-photo-strip img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}

.area-photo-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.cleaner-checklist .checklist-area-heading {
    list-style: none;
    padding: 0.75rem 0 0.35rem;
    border-bottom: none;
}

.cleaner-checklist .checklist-area-heading h4 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
}

.cleaner-checklist .checklist-area-heading:first-child {
    padding-top: 0;
}

.checklist-item-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.checklist-item-list .item-title {
    flex: 1;
}

textarea {
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* Cleaner Checklist */
.job-checklist {
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.job-checklist h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
}

.cleaner-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cleaner-checklist li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.cleaner-checklist li:last-child {
    border-bottom: none;
}

.cleaner-checklist label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.cleaner-checklist input[type="checkbox"] {
    width: auto;
    margin-top: 0.25rem;
}

.cleaner-checklist .item-text {
    flex: 1;
}

.cleaner-checklist .item-description {
    margin: 0.25rem 0 0 1.5rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.cleaner-checklist .checklist-done .item-text {
    text-decoration: line-through;
    opacity: 0.7;
}

.checklist-progress {
    margin: 0.75rem 0 0 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* Photo Upload */
.badge-photo {
    background: #2563eb;
    color: white;
}

.checklist-photo-section {
    margin: 0.5rem 0 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.photo-count {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.photo-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem;
    background: var(--color-accent);
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.2s;
}

.photo-upload-btn:hover {
    background: #0a8060;
}

/* Photo Modal & Gallery */
.photo-modal {
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}

.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.photo-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #1c2534;
}

.photo-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.photo-item .photo-date {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    font-size: 0.75rem;
    color: #fff;
    text-align: center;
}

/* Host Photo Gallery */
.host-photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.host-photo-item {
    border-radius: 8px;
    overflow: hidden;
    background: #1c2534;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.host-photo-item a {
    display: block;
}

.host-photo-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}

.host-photo-item:hover img {
    transform: scale(1.05);
}

.host-photo-item .photo-meta {
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--color-muted);
}

/* Issue Reporting */
.btn-warning {
    background: #f59e0b;
    color: #1a1a2e;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-warning:hover {
    background: #d97706;
}

.issue-modal {
    max-width: 480px;
}

.issue-modal .form-field {
    margin-bottom: 1rem;
}

.issue-modal label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.issue-modal select,
.issue-modal textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #1c2534;
    color: #e8e8e8;
    font-size: 1rem;
}

.issue-modal textarea {
    resize: vertical;
    min-height: 100px;
}

/* Issue List Styles */
.issue-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.issue-item {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin-bottom: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
}

.issue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.issue-category {
    font-weight: 600;
}

.issue-severity {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.issue-severity.severity-low {
    background: #374151;
    color: #9ca3af;
}

.issue-severity.severity-medium {
    background: #1e3a5f;
    color: #60a5fa;
}

.issue-severity.severity-high {
    background: #7c2d12;
    color: #fb923c;
}

.issue-severity.severity-critical {
    background: #7f1d1d;
    color: #fca5a5;
}

.issue-description {
    margin: 0.5rem 0;
    color: var(--color-muted);
}

.issue-meta {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.issue-status {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
}

.issue-status.status-open {
    background: #1e3a5f;
    color: #60a5fa;
}

.issue-status.status-in-progress {
    background: #365314;
    color: #a3e635;
}

.issue-status.status-resolved {
    background: #14532d;
    color: #86efac;
}

.issue-status.status-dismissed {
    background: #374151;
    color: #9ca3af;
}

.issue-actions {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.issue-resolution {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(20, 83, 45, 0.3);
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Property Readiness */
.property-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.property-item:last-child {
    border-bottom: none;
}

.property-info {
    flex: 1;
    min-width: 200px;
}

.readiness-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.readiness-ready {
    background: #14532d;
    color: #86efac;
}

.readiness-not-ready {
    background: #7f1d1d;
    color: #fca5a5;
}

.readiness-at-risk {
    background: #7c2d12;
    color: #fb923c;
}

.readiness-on-track {
    background: #1e3a5f;
    color: #93c5fd;
}

.readiness-unknown {
    background: #374151;
    color: #9ca3af;
}

.readiness-factors {
    width: 100%;
    font-size: 0.8rem;
    color: var(--color-muted);
    padding-left: 0.5rem;
    border-left: 2px solid #4a5568;
}

.dashboard-readiness-meta {
    width: 100%;
    margin: 0;
    font-size: 0.85rem;
}

.dashboard-notifications {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.dashboard-notifications-table {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.dashboard-notification-preferences {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.notification-pref-list {
    list-style: none;
    margin: 0.75rem 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.notification-pref-list .form-field.checkbox {
    justify-content: flex-start;
}

.notification-preferences-form .form-field.checkbox {
    margin: 0;
}

.quiet-hours-fieldset {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-muted, #f4f5f7);
}

.quiet-hours-fieldset legend {
    font-weight: 600;
    padding: 0 0.25rem;
}

.quiet-hours-times {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.dashboard-web-push {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--color-border);
}

.dashboard-web-push h4 {
    margin: 0 0 0.35rem;
}

@media (min-width: 640px) {
    .quiet-hours-times {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-link, #2563eb);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

/* Property Detail Readiness Section */
.readiness-section {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.readiness-section.ready {
    background: rgba(20, 83, 45, 0.2);
    border: 1px solid #14532d;
}

.readiness-section.not-ready {
    background: rgba(127, 29, 29, 0.2);
    border: 1px solid #7f1d1d;
}

.readiness-section.at-risk {
    background: rgba(124, 45, 18, 0.2);
    border: 1px solid #7c2d12;
}

.readiness-section.unknown {
    background: rgba(55, 65, 81, 0.2);
    border: 1px solid #374151;
}

.readiness-section h3 {
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.readiness-section .status-icon {
    font-size: 1.25rem;
}

.readiness-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.readiness-stat {
    display: flex;
    flex-direction: column;
}

.readiness-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 600;
}

.readiness-stat .stat-label {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.blocking-factors {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.blocking-factors h4 {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: var(--color-muted);
}

.blocking-factors ul {
    margin: 0;
    padding-left: 1.25rem;
}

.blocking-factors li {
    margin-bottom: 0.25rem;
}

/* Scrollable tables on narrow screens */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

.table-scroll .data-table {
    margin-bottom: 0;
}

.assign-inline-form {
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.assign-inline-form select {
    min-width: 10rem;
    flex: 1 1 10rem;
}

.assign-inline-form--picker {
    flex-direction: column;
    align-items: stretch;
    min-width: min(100%, 22rem);
}

.assign-member-picker {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: min(100%, 20rem);
}

.assign-member-picker__label {
    font-weight: 600;
    font-size: 0.9rem;
}

.assign-member-picker__search {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 0.5rem);
}

.assign-member-picker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 14rem;
    overflow: auto;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: var(--radius-md, 0.5rem);
    background: #fff;
}

.assign-member-picker__option {
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.assign-member-picker__option:last-child {
    border-bottom: none;
}

.assign-member-picker__option.is-selected {
    background: rgba(13, 148, 136, 0.08);
}

.assign-member-picker__option.is-disabled {
    opacity: 0.72;
}

.assign-member-picker__btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.7rem;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.assign-member-picker__btn:disabled {
    cursor: not-allowed;
}

.assign-member-picker__primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}

.assign-member-picker__name {
    font-weight: 600;
}

.assign-member-picker__meta {
    font-size: 0.8rem;
}

.assign-member-picker__pending {
    font-size: 0.75rem;
    font-weight: 600;
    color: #b45309;
    background: rgba(245, 158, 11, 0.15);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
}

.role-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #e5e7eb;
    color: #374151;
}

.role-badge--cleaner {
    background: rgba(13, 148, 136, 0.15);
    color: #0f766e;
}

.role-badge--owner,
.role-badge--admin {
    background: rgba(79, 70, 229, 0.12);
    color: #4338ca;
}

.assign-member-picker__empty {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
}

.assign-modal-form .assign-member-picker {
    min-width: 100%;
}


/* Mobile / phone layouts */
@media (max-width: 639px) {
    .site-header__inner {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .site-nav-toggle {
        display: inline-flex;
    }

    .site-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        padding-top: 0.35rem;
    }

    .site-nav-toggle-input:checked ~ .site-nav {
        display: flex;
    }

    .site-nav__link,
    .site-nav .btn-primary,
    .site-nav .btn-sm,
    .site-nav button {
        width: 100%;
        text-align: left;
        padding: 0.65rem 0.25rem;
    }

    .site-nav__user {
        max-width: none;
        padding: 0.35rem 0.25rem 0.15rem;
    }

    .site-main {
        padding: 1.25rem 1rem 2rem;
    }

    .modal-backdrop {
        padding: 1rem;
        align-items: center;
    }

    .modal,
    .modal-wide {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 2rem);
        overflow-y: auto;
    }

    .modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-actions .btn-primary,
    .modal-actions .btn-secondary {
        width: 100%;
    }

    .job-card-header {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .btn-small {
        min-height: 2.25rem;
        padding: 0.35rem 0.65rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn-lg {
        width: 100%;
        text-align: center;
    }
}

@supports (padding: env(safe-area-inset-top)) {
    .site-header {
        padding-top: env(safe-area-inset-top);
    }

    .site-header__inner,
    .site-main,
    .site-footer__inner,
    .site-footer__legal,
    .cleaner-portal {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Host property page — mobile-friendly tables as cards */
.property-page h1 {
    font-size: clamp(1.35rem, 5vw, 1.85rem);
    letter-spacing: -0.02em;
}

.property-page .breadcrumb {
    margin-bottom: 0.75rem;
}

@media (max-width: 639px) {
    .property-page .property-section {
        margin-bottom: 2rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid var(--color-border);
    }

    .property-page .property-section:last-child {
        border-bottom: none;
    }

    .property-page .readiness-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .property-page .readiness-stat .stat-value {
        font-size: 1.25rem;
    }

    .property-page .readiness-section h3 {
        flex-wrap: wrap;
    }

    .property-responsive-table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .property-responsive-table thead {
        display: none;
    }

    .property-responsive-table tbody tr:not(.sync-run-error-detail) {
        display: block;
        margin-bottom: 0.85rem;
        padding: 0.85rem;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
    }

    .property-responsive-table tbody tr.sync-run-error-detail {
        display: block;
        margin: -0.35rem 0 0.85rem;
        padding: 0.65rem 0.85rem;
        border-radius: var(--radius);
        background: rgba(220, 38, 38, 0.08);
        border: 1px solid rgba(220, 38, 38, 0.2);
    }

    .property-responsive-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.35rem 0;
        border: none;
        text-align: right;
    }

    .property-responsive-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.8rem;
        color: var(--color-muted);
        text-align: left;
        flex: 0 0 38%;
    }

    .property-responsive-table .sync-run-error-detail td {
        display: block;
        text-align: left;
    }

    .property-responsive-table .sync-run-error-detail td::before {
        content: none;
    }

    .property-row-actions {
        flex-direction: column;
        align-items: stretch !important;
        text-align: left !important;
    }

    .property-row-actions::before {
        margin-bottom: 0.15rem;
    }

    .property-row-actions form,
    .property-row-actions .btn-small,
    .property-row-actions a.btn-small {
        width: 100%;
        margin: 0.15rem 0 0;
    }

    .property-row-actions .assign-inline-form {
        width: 100%;
    }

    .property-row-actions .assign-inline-form select {
        width: 100%;
        min-width: 0;
    }

    .property-page .issue-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .property-page .issue-actions form,
    .property-page .issue-actions .btn-small {
        width: 100%;
    }

    .property-page .issue-resolve-form {
        display: block !important;
        width: 100%;
    }

    .property-page .template-actions {
        flex-wrap: wrap;
    }
}

/* Multi-org context switcher + day-one onboarding (#13) */
.host-org-context {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.host-org-context__crumb {
    margin: 0;
}

.host-org-context__label {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.host-org-context__name {
    font-size: 1.05rem;
}

.host-org-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0;
}

.host-org-switcher__label {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
}

.host-org-switcher__select {
    min-width: 12rem;
    max-width: 100%;
}

.host-org-switcher__single {
    margin: 0;
    font-size: 0.875rem;
}


.org-onboarding--compact {
    padding: 0.55rem 0.85rem 0.65rem;
    margin-bottom: 1rem;
}

.org-onboarding__summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.85rem;
}

.org-onboarding__summary::-webkit-details-marker {
    display: none;
}

.org-onboarding__summary .org-onboarding__title {
    margin: 0;
    font-size: 1rem;
}

.org-onboarding__summary .org-onboarding__subtitle {
    font-size: 0.85rem;
}

.org-onboarding__compact-body {
    margin-top: 0.65rem;
}

.org-onboarding__header--compact {
    margin-bottom: 0.5rem;
}

.org-onboarding {
    margin: 0 0 1.5rem;
    padding: 1rem 1.15rem 1.15rem;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: var(--radius-lg);
}

.org-onboarding__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.org-onboarding__title {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
}

.org-onboarding__subtitle {
    margin: 0;
}

.org-onboarding__dismiss {
    margin: 0;
}

.org-onboarding__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.org-onboarding__item {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.55rem 0.65rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 0.5rem);
}

.org-onboarding__item--done {
    opacity: 0.72;
}

.org-onboarding__check {
    flex: 0 0 auto;
    width: 1.25rem;
    text-align: center;
    font-weight: 700;
    color: var(--color-accent);
}

.org-onboarding__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.org-onboarding__item-title {
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text);
}

a.org-onboarding__item-title:hover {
    color: var(--color-accent);
}

.org-onboarding__item-desc {
    font-size: 0.875rem;
}

.org-onboarding-restore {
    margin: 0 0 1.25rem;
}

.org-onboarding-restore__form {
    display: inline;
    margin: 0;
}

/* Property detail tabbed shell (MT-016) */
.property-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 1rem 0 1.25rem;
    padding: 0.25rem;
    background: var(--color-surface-muted, #f4f5f7);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.property-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-text-muted, #5c6570);
    font: inherit;
    font-weight: 600;
    padding: 0.55rem 0.85rem;
    border-radius: calc(var(--radius-lg) - 2px);
    cursor: pointer;
    line-height: 1.2;
    /* Tabs are links (?tab=...); keep the button look. */
    display: inline-block;
    text-decoration: none;
}

.property-tab:hover,
.property-tab:focus-visible {
    color: var(--color-text, #1a1f24);
    background: rgba(255, 255, 255, 0.7);
    outline: none;
}

.property-tab:focus-visible {
    box-shadow: 0 0 0 2px var(--color-focus, #3b82f6);
}

.property-tab--active {
    background: var(--color-surface, #fff);
    color: var(--color-text, #1a1f24);
    box-shadow: var(--shadow-sm);
}

.property-tab-label-short {
    display: none;
}

.property-tab-panel[hidden] {
    display: none !important;
}

.property-jobs-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem 1rem;
    margin: 0 0 1rem;
}

.property-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}

.completeness-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.completeness-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-border);
    background: var(--color-surface, #fff);
}

.completeness-ok {
    border-color: color-mix(in srgb, var(--color-success, #15803d) 35%, var(--color-border));
}

.completeness-missing {
    border-color: color-mix(in srgb, var(--color-danger, #b91c1c) 35%, var(--color-border));
}

@media (max-width: 639px) {
    .property-tabs {
        gap: 0.2rem;
        padding: 0.2rem;
    }

    .property-tab {
        flex: 1 1 auto;
        text-align: center;
        padding: 0.5rem 0.45rem;
        font-size: 0.9rem;
    }

    .property-tab-label-full {
        display: none;
    }

    .property-tab-label-short {
        display: inline;
    }
}


/* Profile Billing | Notifications | Delivery (MT-018) */
.profile-tabs {
    margin-top: 0.75rem;
}

.profile-org__title {
    margin-bottom: 0.25rem;
}

.profile-tab-panel {
    margin-top: 1rem;
}

.profile-billing-ledger-link {
    margin-top: 1rem;
}

/* Live quiet-hours banner: follow Enable checkbox (SSR-friendly :has), not only saved state. */
.quiet-hours-fieldset:has(.quiet-hours-enabled:checked) {
    border-color: var(--color-warning, #c9852c);
    background: rgba(201, 133, 44, 0.08);
}

.quiet-hours-status {
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-md, 6px);
    font-size: 0.95rem;
}

.quiet-hours-status--active {
    display: none;
    background: rgba(201, 133, 44, 0.15);
    color: var(--color-text, #1a1f24);
}

.quiet-hours-status--inactive {
    display: block;
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-muted, #5c6570);
}

.quiet-hours-fieldset:has(.quiet-hours-enabled:checked) .quiet-hours-status--active {
    display: block;
}

.quiet-hours-fieldset:has(.quiet-hours-enabled:checked) .quiet-hours-status--inactive {
    display: none;
}

/* Keep legacy modifier classes harmless if referenced elsewhere. */
.quiet-hours-fieldset--active {
    border-color: var(--color-warning, #c9852c);
    background: rgba(201, 133, 44, 0.08);
}

.quiet-hours-fieldset--inactive {
    border-color: var(--color-border);
    background: var(--color-surface-muted, #f4f5f7);
}

.notification-pref-group {
    margin: 1rem 0;
    padding: 0.75rem 1rem 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 6px);
}

.notification-pref-group legend {
    font-weight: 700;
    padding: 0 0.35rem;
}

.delivery-failure-summary {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-danger, #b42318);
    border-radius: var(--radius-md, 6px);
    background: rgba(180, 35, 24, 0.08);
}

.delivery-failure-summary__title {
    margin: 0 0 0.35rem;
    color: var(--color-danger, #b42318);
}

.delivery-failure-summary__hint {
    margin: 0 0 0.5rem;
}

.delivery-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin: 0 0 1rem;
}

.delivery-filters .form-field {
    margin: 0;
    min-width: 10rem;
}

.delivery-row--failed {
    background: rgba(180, 35, 24, 0.06);
}

.delivery-failure-reason {
    display: block;
    color: var(--color-danger, #b42318);
    font-weight: 600;
}

.delivery-next-action {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.875rem;
}

/* Properties portfolio — mobile cards vs desktop table */
.properties-portfolio-cards {
    display: none;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    gap: 0.75rem;
}

.properties-portfolio-card {
    margin: 0;
    padding: 0.9rem 1rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.properties-portfolio-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.65rem;
}

.properties-portfolio-card__property {
    flex: 1 1 12rem;
    min-width: 0;
}

.properties-portfolio-card__name {
    display: block;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.properties-portfolio-card__location {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.properties-portfolio-card__meta {
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

.properties-portfolio-card__row {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.properties-portfolio-card__row dt {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.properties-portfolio-card__row dd {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.properties-portfolio-card__row--action dd a {
    display: inline;
    font-weight: 600;
}

.properties-view-toggle .btn-link {
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.properties-view-toggle .btn-link.is-active {
    font-weight: 700;
    text-decoration: none;
    color: var(--color-primary, #0f766e);
    background: rgba(15, 118, 110, 0.1);
    border-color: rgba(15, 118, 110, 0.35);
}

@media (max-width: 639px) {
    .properties-portfolio-desktop {
        display: none;
    }

    .properties-portfolio-cards {
        display: grid;
    }

    .properties-org-header {
        flex-direction: column;
        align-items: stretch;
    }

    .properties-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .properties-view-toggle {
        width: 100%;
        justify-content: stretch;
    }

    .properties-view-toggle .btn-link {
        flex: 1 1 auto;
        text-align: center;
    }

    .properties-toolbar .btn-primary {
        width: 100%;
        text-align: center;
    }
}

/* Delivery log: mobile cards (<=640px) + desktop table */
.delivery-event-cards {
    display: none;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    flex-direction: column;
    gap: 0.75rem;
}

.delivery-event-card {
    margin: 0;
    padding: 0.85rem 0.95rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-sm);
}

.delivery-event-card--failed {
    border-color: color-mix(in srgb, var(--color-danger, #b42318) 45%, var(--color-border));
    background: rgba(180, 35, 24, 0.06);
}

.delivery-event-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.45rem;
}

.delivery-event-card__when {
    font-size: 0.875rem;
    color: var(--color-text-muted, #5c6570);
}

.delivery-event-card__event {
    margin: 0 0 0.5rem;
    font-weight: 650;
    font-size: 1rem;
    line-height: 1.3;
}

.delivery-event-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.65rem;
    margin: 0 0 0.35rem;
    font-size: 0.9rem;
    word-break: break-word;
}

.delivery-event-card__label {
    flex: 0 0 auto;
    min-width: 4.25rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--color-muted, #5c6570);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.delivery-event-card__details {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--color-border);
    word-break: break-word;
}

.delivery-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text, #1a1f24);
}

.delivery-status-badge--failed {
    background: rgba(180, 35, 24, 0.14);
    color: var(--color-danger, #b42318);
}

.delivery-status-badge--sent {
    background: rgba(21, 128, 61, 0.14);
    color: var(--color-success, #15803d);
}

.delivery-status-badge--pending {
    background: rgba(201, 133, 44, 0.18);
    color: #92400e;
}

.delivery-status-badge--suppressed {
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-text-muted, #5c6570);
}

@media (max-width: 640px) {
    .delivery-event-cards {
        display: flex;
    }

    .delivery-table-desktop {
        display: none;
    }

    .delivery-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .delivery-filters .form-field {
        min-width: 0;
        width: 100%;
    }

    .delivery-filters select {
        width: 100%;
    }

    .delivery-failure-summary .btn-secondary {
        display: inline-flex;
        width: auto;
        max-width: 100%;
    }
}

@media (min-width: 641px) {
    .delivery-event-cards {
        display: none !important;
    }
}

/* Workspace navigation shell (#23 added scope): active nav item, header org switcher, breadcrumbs, phone bottom bar. */
.site-header .site-logo {
    flex-shrink: 0;
    white-space: nowrap;
}

.site-header--hosting .site-nav,
.site-header--cleaning .site-nav {
    gap: 0.5rem 0.85rem;
}

.site-header--hosting .site-nav__user,
.site-header--cleaning .site-nav__user {
    max-width: 10rem;
}

.site-nav__link--active {
    color: var(--color-accent);
    font-weight: 600;
}

.site-header--cleaning .site-nav__link--active {
    color: #7c3aed;
}

.header-org {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin-right: auto;
    font-size: 0.875rem;
}

.header-org__name {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-muted);
}

.header-org__form {
    margin: 0;
}

.header-org__select {
    max-width: 11rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.breadcrumb__item [aria-current="page"] {
    color: var(--color-text);
}

.bottom-nav {
    display: none;
}

/* Top-nav "More" (#51 item 3): only from 768px to 1024px, where Money and Settings move into it so the Hosting header
   stays on one row. Hidden at other widths, where the links show inline (or the phone bottom bar takes over). */
.site-nav__more {
    display: none;
    position: relative;
}

.site-nav__more > summary {
    list-style: none;
    cursor: pointer;
}

.site-nav__more > summary::-webkit-details-marker {
    display: none;
}

.site-nav__more-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 120;
    display: flex;
    flex-direction: column;
    min-width: 10rem;
    padding: 0.35rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.site-nav__more-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.75rem;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
}

.site-nav__more-link--active {
    color: var(--color-accent);
    font-weight: 600;
}

.site-nav__more-user {
    display: block;
    padding: 0.4rem 0.75rem;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.25rem;
}

/* 768px to 1024px (#51 item 3): one header row. Money, Settings and the user name move into "More"; the logo shows
   its mark only (the name stays for screen readers); tighter gaps. */
@media (min-width: 768px) and (max-width: 1024px) {
    .site-header--hosting .site-nav__link--tablet-more,
    .site-header--hosting .site-nav > .site-nav__user {
        display: none;
    }

    .site-header--hosting .site-logo__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .site-header--hosting .site-nav {
        gap: 0.5rem 0.6rem;
    }

    .site-header--hosting .header-org__name,
    .site-header--hosting .header-org__select {
        max-width: 12rem;
    }

    /* Keep a typical org name readable at tablet widths (820px cut "Coastal Keys Realty" to "Coastal Keys Re"). */
    .site-header--hosting .header-org__select {
        min-width: 11.5rem;
    }

    .site-header--hosting .header-org {
        flex-shrink: 0;
    }

    .site-header--hosting .site-nav__more {
        display: inline-block;
    }

    .site-header--hosting .site-header__inner {
        flex-wrap: nowrap;
    }

    .site-header--hosting .site-nav {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

}

/* 768-819px: the 11.5rem org select (kept readable at 820, !160) pushed the one-row header to 803px at 768. Below
   820 the select gives back that room, and long org names ellipsize; the full name stays in the dropdown. */
@media (min-width: 768px) and (max-width: 819.98px) {
    .site-header--hosting .header-org__select {
        min-width: 0;
    }

    .site-header--hosting .header-org__name,
    .site-header--hosting .header-org__select {
        max-width: 8.5rem;
    }

    .site-header--hosting .site-nav {
        gap: 0.5rem 0.4rem;
    }
}

/* Height of the fixed bottom bar (items + top border + safe area); fixed UI above it is offset by this. */
:root {
    --bottom-nav-height: calc(3.25rem + 1px + env(safe-area-inset-bottom, 0px));
}

/* Below 768px: both workspaces use the bottom bar (no hamburger); the header keeps the logo (and, in Hosting, the org
   switcher). From 768px the top nav shows every item, so the signed-in chrome has no hamburger at any width. */
@media (max-width: 767.98px) {
    .site-header--hosting .site-nav,
    .site-header--cleaning .site-nav {
        display: none;
    }

    .site-header--hosting .site-header__inner {
        flex-wrap: nowrap;
    }

    .site-header--hosting .header-org {
        margin-left: auto;
        margin-right: 0;
    }

    .site-header--hosting .header-org__name,
    .site-header--hosting .header-org__select {
        max-width: 9.5rem;
    }

    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 110;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .site-layout:has(.bottom-nav) .site-main,
    .site-layout:has(.bottom-nav) .site-footer {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    }

    .bottom-nav__item {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 3.25rem;
        padding: 0 0.25rem;
        color: var(--color-text);
        font-size: 0.8125rem;
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        list-style: none;
    }

    .bottom-nav__item::-webkit-details-marker {
        display: none;
    }

    .bottom-nav__item--active {
        color: var(--color-accent);
        font-weight: 600;
        box-shadow: inset 0 2px 0 var(--color-accent);
    }

    .bottom-nav__more {
        flex: 1 1 0;
        display: flex;
    }

    .bottom-nav__more > summary {
        width: 100%;
    }

    .bottom-nav__sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.75rem 1rem;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
    }

    .bottom-nav__sheet-link {
        padding: 0.65rem 0.25rem;
        color: var(--color-text);
        font-weight: 500;
        text-decoration: none;
    }

    .bottom-nav__sheet-link--active {
        color: var(--color-accent);
        font-weight: 600;
    }

    .bottom-nav--cleaning .bottom-nav__item--active,
    .bottom-nav--cleaning .bottom-nav__sheet-link--active {
        color: #7c3aed;
        box-shadow: inset 0 2px 0 #7c3aed;
    }

    .bottom-nav--cleaning .bottom-nav__sheet-link--active {
        box-shadow: none;
    }

    .bottom-nav__account {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-top: 0.35rem;
        padding-top: 0.65rem;
        border-top: 1px solid var(--color-border);
    }

    .bottom-nav__user {
        font-size: 0.875rem;
    }
}

/*
 * Signed-in job link (/c/{token}) on a phone: the Cleaning bottom bar is fixed to the bottom of the screen, so the
 * sticky decision bar sits on top of the bar instead of under it. The bar already carries the safe-area inset.
 */
@media (max-width: 640px) {
    .site-layout:has(.bottom-nav) .job-decision-bar--sticky {
        bottom: var(--bottom-nav-height);
        padding-bottom: 0.75rem;
    }
}

/*
 * 641-767px with the bottom bar (a phone held sideways, a small tablet): the card's sticky trailing bar sticks above
 * the bottom bar while its card is on screen.
 */
@media (min-width: 641px) and (max-width: 767.98px) {
    /* A clipping card would make the card itself the sticky container; let the bar stick against the screen. */
    .site-layout:has(.bottom-nav) .cleaner-job-card--progressive {
        overflow: visible;
    }

    .site-layout:has(.bottom-nav) .job-decision-bar--sticky-end {
        bottom: var(--bottom-nav-height);
        padding-bottom: 0.75rem;
    }
}

/* Host Dashboard status board (#25, docs/ux/host-experience.md Screen 1). Phone first: one column, vertical scroll only;
   every link and button is at least 44x44px with at least 8px between neighbours. */
/* The #23 layout already pads .site-main for the phone bottom bar, so the last card is never covered. */
.status-board {
    margin: 0 0 1.5rem;
}

.status-board__strip {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 1rem;
    min-width: 0;
}

.status-board__headline {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.status-board__sync {
    margin: 0;
}

.status-board__needs {
    margin: 0 0 1.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid #fed7aa;
    border-radius: var(--radius);
    background: #fff7ed;
}

.status-board__needs-heading {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.status-board__needs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.status-board__needs-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    min-width: 0;
}

.status-board__needs-text {
    margin: 0;
    flex: 1 1 14rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.status-board__needs-property {
    margin-right: 0.4rem;
}

.status-board__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

.status-board__healthy {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: #dcfce7;
    color: #14532d;
}

.status-board-error {
    margin: 0 0 1.5rem;
    padding: 1rem;
    border: 1px solid #fecaca;
    border-radius: var(--radius);
    background: #fef2f2;
}

.status-board-error p {
    margin: 0 0 0.75rem;
}

.status-board__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .status-board__strip {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.25rem 1.25rem;
    }
}

@media (min-width: 900px) {
    .status-board__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .status-board__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.status-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    min-width: 0;
    overflow-wrap: anywhere;
}

.status-card > * {
    max-width: 100%;
}

.status-card__property {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text);
}

.status-card__initial {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: #1f2937;
    color: #e5e7eb;
    font-size: 0.95rem;
}

.status-card__verdict {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.status-card__badge {
    /* Spec wording ("At risk"), not the uppercase table badge. */
    text-transform: none;
    font-size: 0.85rem;
    letter-spacing: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    text-decoration: none;
}

.status-card__reason,
.status-card__occupancy,
.status-card__cleaner,
.status-card__reports,
.status-card__checkin {
    margin: 0;
}

.status-card__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.turnover-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
}

.turnover-chip--active {
    background: #1e3a5f;
    color: #bfdbfe;
}

.turnover-chip--waiting {
    background: #3f3f12;
    color: #fde047;
}

.turnover-chip--blocked {
    background: #7f1d1d;
    color: #fecaca;
}

.turnover-chip--done {
    background: #14532d;
    color: #bbf7d0;
}

.turnover-chip--exceptions {
    background: #7c2d12;
    color: #fed7aa;
}

.status-card__progress {
    display: grid;
    gap: 0.25rem;
    width: 100%;
    font-size: 0.9rem;
}

.status-card__progress-track {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}

.status-card__progress-bar {
    height: 100%;
    background: var(--color-accent);
}

/* Loading skeleton, sized like real cards so the board does not jump in. */
.status-card--skeleton {
    min-height: 15rem;
    gap: 0.75rem;
}

.skeleton {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton--line {
    height: 1rem;
    width: 80%;
}

.skeleton--headline {
    width: min(22rem, 90%);
    height: 1.25rem;
}

.skeleton--sync {
    width: min(12rem, 60%);
}

.skeleton--title {
    width: 60%;
    height: 1.4rem;
}

.skeleton--short {
    width: 50%;
}

.skeleton--badge {
    width: 6rem;
    height: 44px;
}

.skeleton--chip {
    width: 75%;
    height: 44px;
    border-radius: 999px;
}

@keyframes skeleton-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

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

/* Confirm slot outside working hours (#33): a warning, not a block. */
.slot-warning {
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--color-warning, #c9852c);
    background: rgba(201, 133, 44, 0.08);
    color: var(--color-warning, #b45309);
}

/* Short slot labels on phones (#34 follow-up): the zone moves to its own line instead of breaking the time range. */
.slot-button {
    text-align: left;
}

.slot-range,
.slot-zone {
    display: inline-block;
}

.slot-zone {
    font-weight: normal;
    opacity: 0.85;
}

/* Manual time picker (#33 follow-up). */
.cleaner-manual-time {
    margin-top: 0.75rem;
}

/* #55: the Manage dialog takes focus for Escape; the container itself needs no ring. */
.modal-assign:focus { outline: none; }

/* #28: one decision bar per offer, buttons side by side and ≥48px (the #19 dock rules keep it above the Tier 2 bottom bar). */
.job-decision-bar--sticky-end {
    flex-wrap: nowrap;
}
.job-decision-bar--sticky-end form {
    flex: 1;
    display: flex;
}
.job-decision-bar--sticky-end .btn-primary,
.job-decision-bar--sticky-end .btn-secondary {
    flex: 1;
    min-height: 3rem;
}
.job-offer-facts {
    list-style: none;
    margin: 0.35rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.job-prep {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.35rem 0;
}
.job-prep__countdown {
    font-weight: 600;
    margin: 0;
}
.job-prep__directions {
    align-self: flex-start;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
}

/* #29 offline queue: Finish stays blocked while ticks or photos are waiting to upload. */
[data-mt-queue-pending="true"] [data-mt-finish],
[data-mt-queue-pending="true"] [data-mt-review-finish] { pointer-events: none; opacity: 0.5; }
.room-flow__queue { margin: 0 0 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: #fff7e0; color: #5c4400; font-weight: 600; }
[data-mt-queued="true"] .room-task__row { outline: 2px dashed #b7791f; outline-offset: 2px; }
/* #28 slot confirm: alternatives are one tap each (≥44px); the zone wraps, never truncates. */
.slot-alternatives {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.slot-button--alt {
    min-height: 2.75rem;
    white-space: normal;
    text-align: left;
}
.cleaner-confirm-schedule__title {
    font-size: 1rem;
    margin: 0 0 0.25rem;
}
/* #28: the sheet scrolled to after Accept lands below the sticky header. */
[data-mt-slot-sheet] { scroll-margin-top: 5rem; }
.job-host { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--color-text-muted, #4a5568); }
.cleaner-confirm-schedule:target {
    outline: 2px solid var(--color-accent, #2b6cb0);
    outline-offset: 4px;
    border-radius: 0.5rem;
}
.entry-reveal summary {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
}

/* #62: read/unread state in History → Notifications. */
.history-notifications__item--unread > a { font-weight: 600; }
.history-notifications__item--read > a { font-weight: 400; }
.history-notifications__new {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--color-primary, #1d4ed8);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Host Turnover page (#38). Single column; fits 390x844 without horizontal scroll. */
.turnover-page { display: grid; gap: 1rem; max-width: 52rem; }
.turnover-section { border: 1px solid var(--border, #e2e2e2); border-radius: 8px; padding: 0.75rem 1rem; min-width: 0; }
.turnover-section h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.turnover-stages { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.turnover-stage { display: flex; flex-direction: column; padding: 0.35rem 0.6rem; border-radius: 6px; background: #f3f3f3; font-size: 0.9rem; }
.turnover-stage--done { background: #e3f4e8; }
.turnover-stage__time { font-size: 0.8rem; color: #555; }
.turnover-room { margin-top: 0.75rem; }
.turnover-room h3 { font-size: 0.95rem; margin: 0 0 0.25rem; }
.turnover-room__missing-item { color: #a33; }
.turnover-room__photos > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.25rem 0; }
.turnover-photo img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; }
.turnover-history { padding-left: 1rem; }
.turnover-page__window span { white-space: normal; }

/* #59 follow-up: an assign that changed nothing (cleaner already on the job) is not an error. */
.form-notice {
    color: var(--color-text-muted, #555);
    font-style: italic;
}

/* #47: advisory under Parking / Cleaner notes when the text looks like an entry code. */
.form-hint--warning {
    margin: 0.25rem 0 0;
    padding: 0.35rem 0.6rem;
    border-left: 3px solid #b45309;
    background: #fff7ed;
    color: #7c2d12;
    font-size: 0.875rem;
}

/* #43 Cleaning Earnings: week/month toggle */
.clean-earnings__period { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.clean-earnings__period button { min-height: 44px; }

/* #43 Save your profile offer on the done screen */
.save-profile-offer { margin-top: 1rem; }
.save-profile-offer .btn-primary { min-height: 44px; }