:root {
    --bg: #f4f7f6;
    --bg-subtle: #eef3f1;
    --surface: #ffffff;
    --surface-muted: #f8faf9;
    --text: #172522;
    --muted: #5d6d69;
    --line: #d8e2df;
    --line-strong: #bccdc8;
    --primary: #176b5d;
    --primary-dark: #0f4f45;
    --primary-soft: #e2f2ed;
    --danger: #b42318;
    --danger-soft: #fff0ee;
    --warning: #8a5a00;
    --warning-soft: #fff7e0;
    --success: #1d7047;
    --success-soft: #e9f6ef;
    --info: #22577a;
    --info-soft: #eef7ff;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(23, 37, 34, .06), 0 1px 4px rgba(23, 37, 34, .04);
    --shadow: 0 10px 28px rgba(23, 37, 34, .08);
    --focus: 0 0 0 3px rgba(23, 107, 93, .22);
    --content-width: 1180px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x:hidden
}

.icon {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
    fill: currentColor;
    vertical-align: -.16em;
}

.brand-mark .icon {
    width: 1.35rem;
    height: 1.35rem;
}

.nav a,
.nav button,
.settings-nav a,
.public-nav a {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
}

a { color: var(--primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
a:hover { color: var(--primary-dark); }
h1, h2, h3 { color: var(--text); margin: 0 0 .5rem; line-height: 1.2; letter-spacing: -.02em; }
h1 { font-size: clamp(1.65rem, 4vw, 2.15rem); }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 1rem; }
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: var(--focus);
}

/* AP-014 reusable local illustration treatments. Route placement is deferred. */
.illustration {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}
.illustration-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 8 / 5;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-muted);
    box-shadow: var(--shadow-sm);
}
.illustration-frame > .illustration {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.illustration-frame--compact { aspect-ratio: 4 / 3; }
.illustration-frame--wide { aspect-ratio: 16 / 9; }
.illustration-frame--overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 45%, rgba(15, 79, 69, .16));
}
.illustration--decorative {
    user-select: none;
    pointer-events: none;
}

@media (max-width: 520px) {
    .illustration-frame,
    .illustration-frame--wide { aspect-ratio: 4 / 3; }
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(23, 37, 34, .02);
}
.topbar-inner {
    width: 100%;
    margin: 0 auto;
    padding: .72rem clamp(.9rem, 3vw, 1.6rem);
    display: flex;
    align-items: center;
    gap: .75rem;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    width: fit-content;
    color: var(--text);
    font-weight: 800;
    letter-spacing: -.02em;
    text-decoration: none;
}
.brand:hover { color: var(--primary-dark); }
.brand-copy {
    display: grid;
    gap: .05rem;
    line-height: 1.5;
}
.brand-tagline {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 0;
}
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: #fff;
    background: var(--primary);
    box-shadow: 0 6px 14px rgba(23, 107, 93, .22);
    font-size: .72rem;
    letter-spacing: .08em;
}
.property-context {
    display: flex;
    align-items: center;
    min-width: 0;
    margin-left: .25rem;
}
.property-switcher {
    display: flex;
    gap: .45rem;
    align-items: center;
}
.property-switcher label { display: block; }
.property-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.property-select-wrap::before {
    position: absolute;
    left: .65rem;
    color: var(--primary);
    content: "▾";
    font-size: .72rem;
    pointer-events: none;
}
.property-switcher select {
    min-height: 36px;
    padding: .35rem .75rem .35rem 1.55rem;
    width: auto;
    max-width: min(260px, 28vw);
    font-size: .86rem;
    font-weight: 800;
    color: var(--primary-dark);
    border-color: transparent;
    border-radius: 999px;
    background-color: var(--primary-soft);
    text-overflow: ellipsis;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.nav {
    display: flex;
    gap: .35rem;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    min-width: 0;
    overflow: visible;
    padding: 0;
}
.nav a,
.nav-logout-form button {
    flex: 0 1 auto;
    color: var(--text);
    min-height: 40px;
    padding: .55rem .68rem;
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: .88rem;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.nav a:hover,
.nav-logout-form button:hover {
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-color: #cce5de;
}
.nav a.active {
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-color: #cce5de;
}
.public-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}
.public-nav a {
    min-height: 38px;
    padding: .5rem .75rem;
    border-radius: 999px;
    color: var(--text);
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
}
.public-nav a:hover,
.public-nav a.active {
    color: var(--primary-dark);
    background: var(--primary-soft);
}
.public-nav .public-nav-cta {
    color: #fff;
    background: var(--primary);
}
.public-nav .public-nav-cta:hover {
    color: #fff;
    background: var(--primary-dark);
}
.nav-logout-form { margin: 0; }
.nav-toggle,
.nav-backdrop {
    display: none;
}
.nav-toggle {
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 40px;
    padding: .5rem .72rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--surface);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
}
.nav-toggle-bars {
    position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    position: absolute;
    left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.settings-nav {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    margin: 0 0 1.25rem;
    padding: .3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.settings-nav a {
    flex: 0 0 auto;
    min-height: 40px;
    padding: .55rem .8rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: .88rem;
    font-weight: 700;
}
.settings-nav a:hover {
    color: var(--primary-dark);
    background: var(--primary-soft);
}
.settings-nav a.active {
    background: var(--primary);
    color: #fff;
}

.container {
    width: min(var(--content-width), 100%);
    margin: 0 auto;
    padding: 0rem 1rem 2.5rem;
}
.app-footer {
    width: min(var(--content-width), 100%);
    margin: -1.5rem auto 0;
    padding: 0 1rem 1.2rem;
    color: var(--muted);
    font-size: .84rem;
    text-align: right;
}
.page-head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin: .35rem 0 1.25rem;
}
.muted { color: var(--muted); }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .65rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
    font-size: .95rem;
    box-shadow: var(--shadow-sm);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.button:hover { border-color: var(--line-strong); background: var(--surface-muted); color: var(--text); }
.button:active { transform: translateY(1px); }
.button.primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 6px 14px rgba(23, 107, 93, .18); }
.button.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.button.small { min-height: 36px; padding: .42rem .65rem; font-size: .85rem; }
.button.danger { color: #fff; background: var(--danger); border-color: var(--danger); }
.button.success { color: #fff; background: var(--success); border-color: var(--success); }
.button.disabled {
    cursor: not-allowed;
    color: var(--muted);
    background: #edf3f1;
}

.auth-panel {
    max-width: 480px;
    margin: 1.5rem auto;
}
.panel, .task-card, .summary-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem;
    box-shadow: var(--shadow-sm);
}
.sub-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
    background: var(--surface-muted);
}
.alert {
    border-radius: var(--radius);
    padding: .85rem 1rem;
    margin: 0 0 1rem;
    background: var(--success-soft);
    border: 1px solid #b7dccd;
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}
.alert.error { background: var(--danger-soft); border-color: #f0b5ae; color: var(--danger); }
.alert.warning { background: var(--warning-soft); border-color: #efd082; color: var(--warning); }
.alert.success { color: var(--success); }
.alert.info { background: var(--info-soft); border-color: #b7d7f0; color: var(--info); }
.button.warning { color: #fff; background: var(--warning); border-color: var(--warning); }

.form {
    display: grid;
    gap: .85rem;
}
.form label {
    display: grid;
    gap: .35rem;
    font-weight: 700;
}
input, select, textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .65rem .75rem;
    font: inherit;
    background: #fff;
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 0; box-shadow: var(--focus); }
::placeholder { color: #84938f; }
textarea { min-height: 110px; resize: vertical; }
.checkbox {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .6rem !important;
}
.checkbox input { width: auto; min-height: auto; }
.form-grid, .summary-grid, .report-grid {
    display: grid;
    gap: .85rem;
}
[hidden] {
    display: none !important;
}
.task-option-group {
    display: grid;
    align-content: start;
    gap: .65rem;
    min-width: 0;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-muted);
}
.task-option-group .category-create-fields {
    grid-template-columns: minmax(0, 1fr) 98px 98px;
}
.task-form-wide {
    grid-column: 1 / -1;
}
.rich-text-field {
    display: grid;
    gap: .35rem;
    min-width: 0;
}
.rich-text-field > label {
    font-weight: 700;
}
.rich-text-enhanced {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.rich-text-enhanced:focus-within {
    border-color: var(--primary);
    box-shadow: var(--focus);
}
.rich-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .45rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface-muted);
}
.rich-text-toolbar button {
    min-height: 34px;
    padding: .35rem .55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}
.rich-text-toolbar button:hover,
.rich-text-toolbar button:focus-visible {
    border-color: var(--primary);
    background: var(--primary-soft);
    outline: 0;
}
.rich-text-editor {
    min-height: 130px;
    padding: .75rem;
    outline: 0;
}
.rich-text-editor > :first-child,
.rich-content > :first-child {
    margin-top: 0;
}
.rich-text-editor > :last-child,
.rich-content > :last-child {
    margin-bottom: 0;
}
.rich-text-editor ul,
.rich-text-editor ol,
.rich-content ul,
.rich-content ol {
    margin: .45rem 0;
    padding-left: 1.5rem;
}
.rich-text-editor h2,
.rich-text-editor h3,
.rich-content h2,
.rich-content h3 {
    margin: .7rem 0 .35rem;
}
.task-attachment-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem 1rem;
    align-items: center;
    border-style: dashed;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.task-attachment-panel h2,
.task-attachment-panel p {
    margin: 0;
}
.task-attachment-panel.is-dragover {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: var(--focus);
}
.attachment-picker {
    position: relative;
    display: inline-flex !important;
}
.attachment-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.attachment-picker:focus-within .button {
    box-shadow: var(--focus);
}
.attachment-selection-list {
    grid-column: 1 / -1;
    margin: 0;
    padding-left: 1.25rem;
    color: var(--text);
}
.attachment-selection-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.attachment-selection-list li + li {
    margin-top: .25rem;
}
.existing-attachment-list {
    grid-column: 1 / -1;
    display: grid;
    gap: .5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
}
.existing-attachment-list h3 {
    margin: 0;
}
.existing-attachment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}
.schedule-frequency {
    align-self: start;
}
.readonly-field {
    display: grid;
    gap: .2rem;
    align-content: center;
    min-height: 42px;
    padding: .72rem .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}
.readonly-field span {
    font-size: .82rem;
}
.schedule-fields {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .65rem;
    align-items: end;
}
.schedule-or {
    color: var(--muted);
    font-weight: 800;
    padding-bottom: .7rem;
}
input:disabled {
    background: var(--bg-subtle);
    color: var(--muted);
}
.category-create-fields {
    display: grid;
    grid-template-columns: 1fr 98px 98px auto;
    gap: .65rem;
}
.category-colour-list {
    display: grid;
    gap: .65rem;
}
.category-colour-row {
    display: grid;
    grid-template-columns: auto 1fr 86px 86px repeat(4, auto);
    gap: .75rem;
    align-items: center;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.category-colour-row.is-inactive,
.management-row.is-inactive,
.task-table tbody tr.is-inactive {
    opacity: .62;
    filter: grayscale(.35);
}
.category-colour-row input[type="color"] {
    padding: .2rem;
}
.category-colour-row label {
    display: grid;
    gap: .25rem;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
}

.summary-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 1rem;
}
.summary-card span {
    display: block;
    font-size: 2rem;
    font-weight: 800;
}
.summary-card small { color: var(--muted); font-weight: 700; }
.summary-card.danger span { color: var(--danger); }
a.summary-card {
    color: var(--text);
    transition: border-color .15s ease, transform .15s ease;
}
a.summary-card:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}
a.summary-card.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-sm);
}
a.summary-card.is-selected small {
    color: var(--primary-strong);
}

.filters {
    display: grid;
    gap: .65rem;
    margin-bottom: 1rem;
}
.task-grid {
    display: grid;
    gap: 1rem;
}
.task-card {
    position: relative;
}
.task-card.is-overdue { border-left: 5px solid var(--danger); }
.category-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--category-color, #7a8f89);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(31, 42, 40, .12);
}
.category-dot.large {
    width: 22px;
    height: 22px;
}
.task-card-dot {
    position: absolute;
    top: .7rem;
    left: .7rem;
}
.task-card-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding-left: 1.2rem;
}
.task-card h2 { font-size: 1.15rem; }
.task-card p { margin: .2rem 0 .8rem; }
.pill {
    align-self: flex-start;
    padding: .25rem .5rem;
    border-radius: 999px;
    background: #edf3f1;
    color: var(--text);
    font-size: .78rem;
    font-weight: 800;
}
.pill.high { background: #fff0ee; color: var(--danger); }
.pill.low { background: #eef7ff; color: #22577a; }

.meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
    margin: 0 0 1rem;
}
.meta div {
    background: #f8faf9;
    border-radius: var(--radius);
    padding: .55rem;
}
.meta dt { color: var(--muted); font-size: .78rem; }
.meta dd { margin: 0; font-weight: 800; }
.detail-list {
    display: grid;
    gap: .75rem;
    margin: 0;
}
.detail-list div {
    border-bottom: 1px solid var(--line);
    padding-bottom: .65rem;
}
.detail-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.detail-list dt {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}
.detail-list dd {
    margin: .15rem 0 0;
}
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.actions form { margin: 0; }
.confirmation-panel p {
    margin-top: 0;
}

.list { display: grid; gap: .6rem; }
.list-row {
    display: grid;
    gap: .2rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
}
.list-row time, .list-row span { color: var(--muted); }
.list-row.compact {
    grid-template-columns: 110px 1fr;
    align-items: center;
    margin-bottom: .5rem;
}
.dashboard-task-list {
    display: grid;
    gap: .75rem;
}
.dashboard-task-row {
    position: relative;
    display: grid;
    gap: .75rem;
    padding: .9rem .9rem .9rem 1.15rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.dashboard-category-indicator {
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: var(--category-color, var(--line-strong));
}
.dashboard-task-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
}
.dashboard-task-row .pill {
    align-self: center;
    justify-self: start;
}
.dashboard-task-main {
    min-width: 0;
}
.dashboard-task-main h3 {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    font-size: 1.05rem;
}
.dashboard-task-main p {
    margin: .2rem 0 0;
    color: var(--muted);
}
.dashboard-category-label { display: inline; }
.dashboard-task-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, auto));
    gap: .5rem;
    margin: 0;
}
.dashboard-task-meta div {
    background: #f8faf9;
    border-radius: var(--radius);
    padding: .55rem;
}
.dashboard-task-meta dt {
    color: var(--muted);
    font-size: .76rem;
}
.dashboard-task-meta dd {
    margin: 0;
    font-weight: 800;
}
.dashboard-task-controls {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.dashboard-task-rich {
    grid-column: 1 / -1;
    display: grid;
    gap: .5rem;
    padding: .65rem .75rem;
    border-top: 1px solid var(--line);
}
.dashboard-task-rich .rich-content {
    font-size: .92rem;
}
.dashboard-task-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.completed-list {
    display: grid;
    gap: .65rem;
}
.completed-list-row {
    min-width: 0;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}
.completed-list-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    min-width: 0;
}
.completed-list-heading h3 {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}
.completed-list-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin: .65rem 0 0;
}
.completed-list-meta div {
    min-width: 0;
    padding: .55rem;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}
.completed-list-meta dt {
    color: var(--muted);
    font-size: .76rem;
}
.completed-list-meta dd {
    margin: .1rem 0 0;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.completed-attachment-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
    text-decoration: none;
}
.dashboard-task-details-toggle {
    flex: 0 0 auto;
    min-height: 38px;
}
.dashboard-task-details-content {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(160px, 1fr);
    gap: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
}
.dashboard-task-description,
.dashboard-task-frequency div {
    padding: .65rem .75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}
.dashboard-task-description h4 {
    margin: 0 0 .35rem;
}
.dashboard-task-frequency {
    margin: 0;
}
.dashboard-task-frequency dt {
    color: var(--muted);
    font-size: .76rem;
}
.dashboard-task-frequency dd {
    margin: .2rem 0 0;
    font-weight: 800;
}
.complete-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
    background: #f8faf9;
    font-size: 1.15rem;
    font-weight: 900;
}
.complete-icon:hover {
    color: #fff;
    background: var(--success);
    border-color: var(--success);
}
.complete-icon.completed {
    color: #fff;
    background: var(--success);
    border-color: var(--success);
}

.table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.task-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #fff;
}
.task-table th,
.task-table td {
    padding: .5rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}
.task-table th {
    background: var(--bg-subtle);
    color: var(--text);
    font-size: .82rem;
    white-space: nowrap;
}
.task-table th a {
    color: var(--text);
    font-weight: 900;
}
.task-table tbody tr:nth-child(even) {
    background: var(--surface-muted);
}
.task-table tbody tr:hover {
    background: var(--primary-soft);
}
.task-table tbody tr.is-overdue {
    background: #fff7f5;
}
.task-summary-row td:first-child,
.task-table .category-indicator-heading {
    width: 8px;
    min-width: 4px;
    max-width: 8px;
    padding: 0;
}
.category-indicator {
    background: var(--category-color, var(--line-strong));
}
.priority-dot-heading,
.priority-dot-cell {
    width: 28px;
    min-width: 28px;
    padding-right: .25rem;
    padding-left: .25rem;
    text-align: center;
}
.priority-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--priority-color, var(--line-strong));
    vertical-align: middle;
}
.priority-dot.priority-high { --priority-color: var(--danger); }
.priority-dot.priority-medium { --priority-color: var(--success); }
.priority-dot.priority-low { --priority-color: #22577a; }
.task-details-toggle {
    min-height: 34px;
    padding: .35rem .65rem;
}
.task-details-row.is-hidden {
    display: none;
}
.task-details-row td {
    padding: 0;
    background: #f8fbfa;
}
.task-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    margin: 0;
    padding: .9rem 1rem 1rem;
    border-top: 1px solid var(--line);
}
.task-details-grid div {
    min-width: 0;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}
.task-details-grid dt {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.task-details-grid dd {
    margin: .2rem 0 0;
    font-weight: 800;
}
.task-detail-description {
    grid-column: 1 / -1;
}
.strong-link {
    color: var(--text);
    font-weight: 900;
}
.table-actions {
    /*display: flex;*/
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 150px;
}
.table-actions form {
    margin: 0;
}
.admin-user-actions {
    display: grid;
    gap: .65rem;
    min-width: min(460px, 80vw);
    padding: .75rem 0;
}
.admin-user-actions form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.admin-user-table details > summary {
    cursor: pointer;
    list-style: none;
}
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
}
.icon-button.complete {
    color: var(--success);
    border-color: #b7dccd;
}
.icon-button.delete {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    font-size: 1.25rem;
}
.icon-button:hover {
    border-color: var(--primary);
    box-shadow: 0 1px 3px rgba(31, 42, 40, .16);
}
.filter-checkbox,
.inline-checkbox-form .checkbox {
    margin: 0;
    font-weight: 800;
    color: var(--muted);
}
.management-panel {
    margin-bottom: 1rem;
}
.inline-management-form,
.management-row {
    display: grid;
    gap: .65rem;
    align-items: center;
}
.property-checks {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
}
.property-checks .checkbox {
    font-weight: 600;
}
.management-list {
    display: grid;
    gap: .65rem;
}
.management-row {
    grid-template-columns: 1fr auto auto auto auto;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.property-management-row {
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) auto auto auto;
}
.user-management-row {
    grid-template-columns: minmax(180px, 1fr) 140px minmax(220px, 1.5fr) auto auto auto;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .35rem;
    margin-bottom: 1rem;
}
.calendar-grid > strong {
    font-size: .75rem;
    color: var(--muted);
    text-align: center;
}
.calendar-cell {
    min-height: 86px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .35rem;
    display: grid;
    align-content: start;
    gap: .25rem;
    text-align: left;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}
.calendar-cell.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 90, .16);
}
.calendar-task {
    display: block;
    overflow-wrap: anywhere;
    font-size: .75rem;
    background: #eaf6f1;
    border-radius: 5px;
    padding: .2rem;
}
.calendar-task.count {
    background: #edf3f1;
    font-weight: 800;
}
.empty-cell { background: transparent; border-color: transparent; }
.date-num { font-weight: 800; font-size: .82rem; }
.is-hidden { display: none !important; }
.month-picker {
    display: flex;
    gap: .5rem;
}
.calendar-head {
    align-items: stretch;
}
.calendar-toolbar {
    display: grid;
    gap: .6rem;
    justify-items: stretch;
}
.segmented, .calendar-arrows {
    display: flex;
    gap: .35rem;
}
.segmented {
    background: #edf3f1;
    border-radius: var(--radius);
    padding: .25rem;
}
.segmented a {
    flex: 1 1 auto;
    min-height: 38px;
    padding: .5rem .7rem;
    border-radius: 6px;
    color: var(--text);
    font-weight: 800;
    text-align: center;
}
.segmented a.active {
    background: var(--surface);
    color: var(--primary);
    box-shadow: 0 1px 2px rgba(31, 42, 40, .12);
}
.calendar-arrows .button {
    flex: 1 1 auto;
}
.calendar-day-view {
    display: grid;
    gap: .5rem;
}
.attachments {
    display: grid;
    gap: .4rem;
}
.task-history {
    margin-top: 1rem;
}
.section-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}
.history-list {
    display: grid;
    gap: .65rem;
}
.history-row {
    display: grid;
    gap: .65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .75rem;
    background: #fff;
}
.history-compact-row {
    display: flex;
    align-items: center;
    gap: .5rem .75rem;
    flex-wrap: wrap;
}
.history-compact-row > * {
    min-width: 0;
}
.history-compact-row span,
.history-compact-row a,
.history-compact-row strong {
    display: inline-flex;
    align-items: center;
}
.history-date {
    color: var(--text);
}
.history-attachment-link {
    min-width: 32px;
    min-height: 32px;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
    text-decoration: none;
}
.history-attachment-link:hover,
.history-attachment-link:focus-visible {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.history-assignee,
.history-cost,
.history-checklist-summary {
    color: var(--text);
    font-weight: 800;
}
.history-checklist-summary {
    flex: 0 0 auto;
    white-space: nowrap;
}
.history-view-action {
    margin-left: auto;
}
.history-row span {
    display: block;
    font-size: .82rem;
}
.history-compact-row span {
    display: inline-flex;
    font-size: .95rem;
}
.history-row p {
    margin: 0;
    color: var(--muted);
}
.checklist-editor,
.checklist-complete-list {
    display: grid;
    gap: .35rem;
}
.checklist-edit-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: .4rem;
    align-items: center;
}
.checklist-edit-row label,
.checklist-new-row {
    gap: .2rem;
    font-size: .82rem;
}
.checklist-edit-row input,
.checklist-new-row input {
    min-height: 34px;
    padding: .4rem .55rem;
}
.checklist-edit-row .checkbox {
    min-height: 34px;
}
.checklist-edit-row.is-inactive {
    opacity: .6;
}
.checklist-view-list,
.history-checklist {
    margin: .5rem 0 0;
    padding-left: 1.2rem;
}
.history-checklist {
    color: var(--muted);
}
.history-checklist .checked {
    color: var(--success);
    font-weight: 800;
}
.empty {
    text-align: center;
    color: var(--muted);
    padding: 2.5rem 1rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface-muted);
}
.planner-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.planner-wide {
    width: calc(100vw - 2rem);
    margin-left: calc(50% - 50vw + 1rem);
    margin-right: calc(50% - 50vw + 1rem);
}
.planner-grid {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .86rem;
}
.planner-grid th,
.planner-grid td {
    border-right: 1px solid #cfd9d6;
    border-bottom: 1px solid #cfd9d6;
    min-width: 34px;
    height: 38px;
    padding: .2rem;
    text-align: center;
}
.planner-grid tbody tr:nth-child(odd) td,
.planner-grid tbody tr:nth-child(odd) th {
    background-color: #fbfcfc;
}
.planner-grid tbody tr:nth-child(even) td,
.planner-grid tbody tr:nth-child(even) th {
    background-color: #f3f7f6;
}
.planner-grid tbody tr:hover td,
.planner-grid tbody tr:hover th {
    background-color: #eaf6f1;
}
.planner-grid tbody tr.planner-task-row td,
.planner-grid tbody tr.planner-task-row th {
    background-color: var(--category-bg, #fbfcfc);
}
.planner-grid tbody tr.planner-task-row .planner-task-col,
.planner-grid tbody tr.planner-task-row .planner-meta-col {
    background-color: var(--category-color, #7a8f89) !important;
    color: var(--category-text-color, #ffffff);
}
.planner-grid tbody tr.planner-task-row:hover td,
.planner-grid tbody tr.planner-task-row:hover th {
    background-color: var(--category-bg, #eaf6f1);
}
.planner-grid tbody tr.planner-task-row:hover .planner-task-col,
.planner-grid tbody tr.planner-task-row:hover .planner-meta-col {
    background-color: var(--category-color, #7a8f89) !important;
}
.planner-priority-col {
    width: 8px;
    min-width: 8px !important;
    max-width: 8px;
    padding: 0 !important;
}
.planner-grid tbody tr.planner-task-row .planner-priority-col {
    background: var(--priority-color, var(--line-strong)) !important;
}
.planner-task-row.priority-high { --priority-color: var(--danger); }
.planner-task-row.priority-medium { --priority-color: var(--success); }
.planner-task-row.priority-low { --priority-color: #22577a; }
.planner-sticky-priority {
    position: sticky;
    left: 0;
    z-index: 6;
}
.planner-grid thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #edf3f1;
    font-size: .76rem;
    white-space: nowrap;
}
.planner-date-col {
    min-width: 36px !important;
    width: 36px;
    max-width: 36px;
    padding: .15rem .1rem !important;
}
.planner-date-col span,
.planner-date-col small {
    display: block;
    line-height: 1.05;
}
.planner-date-col span {
    font-size: .68rem;
    font-weight: 900;
}
.planner-date-col small {
    color: var(--muted);
    font-size: .62rem;
    font-weight: 800;
}
.planner-grid thead th a {
    color: var(--text);
    font-weight: 900;
}
.planner-grid .planner-current-col {
    border-left: 3px solid var(--primary);
    border-right: 3px solid var(--primary);
    background-color: #fff9e8 !important;
}
.planner-grid thead .planner-current-col {
    border-top: 3px solid var(--primary);
}
.planner-grid tbody tr:last-child .planner-current-col {
    border-bottom: 3px solid var(--primary);
}
.planner-task-col {
    position: sticky;
    z-index: 3;
    width: 210px;
    min-width: 190px !important;
    max-width: 190px;
    background: var(--surface);
    text-align: left !important;
}
.planner-meta-col {
    position: sticky;
    z-index: 3;
    width: 140px;
    min-width: 112px !important;
    max-width: 112px;
    text-align: left !important;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface);
}
.planner-sticky-1 { left: 8px; }
.planner-sticky-2 { left: 198px; }
.planner-sticky-3 { left: 310px; }
.planner-grid thead .planner-priority-col {
    z-index: 6;
    background: #edf3f1;
}
.planner-grid thead .planner-task-col,
.planner-grid thead .planner-meta-col {
    z-index: 5;
    background: #edf3f1;
}
.planner-task-col a {
    display: block;
    font-weight: 900;
    color: inherit;
}
.planner-meta-col {
    color: var(--category-text-color, var(--muted));
}
.planner-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 2px solid #7f908c;
    background: #fff;
    color: #4f5f5b;
    font-weight: 900;
    box-shadow: 0 1px 2px rgba(31, 42, 40, .18);
}
.planner-tick:hover {
    border-color: var(--success);
    color: var(--success);
    background: #eaf6f1;
}
.planner-tick.completed {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
    box-shadow: 0 1px 3px rgba(32, 116, 74, .35);
}
.planner-group-row th {
    position: sticky;
    left: 0;
    z-index: 4;
    text-align: left;
    background: #dfece8 !important;
    color: var(--primary-dark);
    font-weight: 900;
    letter-spacing: 0;
    height: 36px;
}

@media (min-width: 720px) {
    .topbar-inner {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: .85rem;
    }
    .brand { flex: 0 0 auto; }
    .property-context { flex: 0 1 auto; }
    .nav { max-width: none; }
    .summary-grid { grid-template-columns: repeat(4, 1fr); }
    .filters { grid-template-columns: 1.5fr 1fr 1fr 1fr auto; align-items: center; }
    .filters.auto-filters { grid-template-columns: 1.5fr 1fr 1fr 1fr auto; }
    .inline-management-form { grid-template-columns: 1fr auto; }
    .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid, .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .detail-list .wide {
        grid-column: 1 / -1;
    }
    .calendar-toolbar { justify-items: end; }
    .dashboard-task-row { align-items: stretch; }
}

@media (max-width: 719px) {
    .dashboard-task-summary {
        grid-template-columns: 1fr;
    }
    .dashboard-task-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }
    .dashboard-task-actions {
        justify-content: start;
        flex-wrap: wrap;
    }
    .dashboard-task-meta,
    .completed-list-meta {
        grid-template-columns: 1fr;
    }
    .task-attachment-panel {
        grid-template-columns: 1fr;
    }
    .attachment-picker {
        justify-self: start;
    }
    .attachment-selection-list {
        grid-column: 1;
    }
    .attachment-selection-list li,
    .existing-attachment-row {
        align-items: flex-start;
        flex-direction: column;
    }
    .topbar-inner {
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(120px, 1fr) auto;
        gap: .55rem;
    }
    .brand {
        min-width: 0;
    }
    .brand-text {
        white-space: nowrap;
    }
    .brand-tagline {
        display: none;
    }
    .property-context {
        min-width: 0;
        margin-left: 0;
    }
    .property-switcher select {
        max-width: 100%;
        min-width: 0;
    }
    .nav-toggle {
        display: inline-flex;
        justify-self: end;
    }
    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 29;
        border: 0;
        background: rgba(5, 27, 24, .42);
    }
    .nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 30;
        display: grid;
        align-content: start;
        gap: .25rem;
        width: min(82vw, 320px);
        height: 100vh;
        padding: 5rem 1rem 1rem;
        overflow-y: auto;
        background: var(--surface);
        border-left: 1px solid var(--line);
        box-shadow: -18px 0 42px rgba(23, 37, 34, .18);
        visibility: hidden;
        transform: translateX(100%);
        transition: transform .2s ease, visibility .2s ease;
    }
    .nav a,
    .nav-logout-form button {
        width: 100%;
        justify-content: flex-start;
        min-height: 46px;
        padding: .72rem .85rem;
        font-size: 1rem;
    }
    .nav-logout-form {
        width: 100%;
    }
    .nav-open {
        overflow: hidden;
    }
    .nav-open .nav {
        visibility: visible;
        transform: translateX(0);
    }
    .nav-open .nav-backdrop {
        display: block;
    }
}

@media (max-width: 520px) {
    .topbar-inner { padding: .65rem .75rem; }
    .brand-mark { width: 34px; height: 34px; }
    .property-switcher, .property-switcher label, .property-select-wrap, .property-switcher select { width: 100%; max-width: none; }
    .container { padding: 1rem .75rem 2rem; }
    .page-head { display: grid; }
    .summary-grid, .meta { grid-template-columns: 1fr; }
    .calendar-grid { gap: .2rem; }
    .calendar-cell { min-height: 64px; padding: .25rem; }
    .calendar-task { font-size: .68rem; }
    .list-row.compact { grid-template-columns: 1fr; }
    .dashboard-task-summary,
    .dashboard-task-details-content {
        grid-template-columns: 1fr;
    }
    .dashboard-task-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }
    .dashboard-task-actions {
        justify-content: start;
        flex-wrap: wrap;
    }
    .dashboard-task-meta,
    .completed-list-meta {
        grid-template-columns: 1fr;
    }
    .table-wrap { overflow-x: auto; }
    .task-table {
        min-width: 700px;
        font-size: .88rem;
    }
    .task-table th,
    .task-table td {
        padding: .55rem .35rem;
    }
    .task-details-row td {
        display: table-cell !important;
    }
    .task-details-grid {
        grid-template-columns: 1fr;
        padding: .75rem;
    }
    .history-checklist-summary {
        white-space: normal;
    }
    .table-actions {
        min-width: 0;
        gap: .25rem;
    }
    .calendar-toolbar, .segmented, .calendar-arrows { width: 100%; }
    .schedule-fields {
        grid-template-columns: 1fr;
    }
    .schedule-or {
        padding: 0;
        text-align: center;
    }
    .planner-wide {
        width: calc(100vw - 1rem);
        margin-left: calc(50% - 50vw + .5rem);
        margin-right: calc(50% - 50vw + .5rem);
    }
    .planner-task-col {
        min-width: 150px !important;
        width: 150px;
        max-width: 150px;
    }
    .planner-meta-col {
        min-width: 92px !important;
        width: 92px;
        max-width: 92px;
    }
    .planner-sticky-1 { left: 8px; }
    .planner-sticky-2 { left: 158px; }
    .planner-sticky-3 { left: 250px; }
    .category-create-fields,
    .category-colour-row,
    .management-row,
    .property-management-row,
    .user-management-row,
    .checklist-edit-row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Signed-out marketing and authentication presentation. */
.eyebrow {
    margin: 0 0 .65rem;
    color: var(--primary);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.landing-page {
    display: grid;
    gap: clamp(3.5rem, 8vw, 6.5rem);
    padding-bottom: 2rem;
}
.landing-hero,
.landing-value,
.landing-cta,
.auth-layout {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius-lg) + 8px);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.landing-hero {
    display: grid;
    min-height: 560px;
    padding: clamp(2rem, 6vw, 5.5rem);
    background:
        radial-gradient(circle at 82% 18%, rgba(68, 170, 143, .25), transparent 28%),
        radial-gradient(circle at 10% 90%, rgba(234, 183, 87, .18), transparent 34%),
        linear-gradient(145deg, #f8fcfb, #eaf5f1);
}
.landing-hero::before,
.auth-layout::before {
    position: absolute;
    z-index: -1;
    width: 350px;
    height: 350px;
    content: "";
    border: 58px solid rgba(23, 107, 93, .06);
    border-radius: 50%;
    right: -150px;
    bottom: -190px;
}
.landing-hero-copy {
    align-self: center;
    max-width: 680px;
}
.landing-hero h1 {
    max-width: 760px;
    margin: 0 0 1.25rem;
    font-size: clamp(2.55rem, 7vw, 5.4rem);
    line-height: .98;
    letter-spacing: -.065em;
}
.landing-lead {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 2vw, 1.28rem);
}
.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}
.landing-actions .button { min-width: 150px; }
.landing-proof {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.4rem;
    margin: 1.5rem 0 0;
    padding: 0;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 700;
    list-style: none;
}
.landing-proof li::before {
    margin-right: .42rem;
    color: var(--success);
    content: "\2713";
}
.landing-visual {
    position: relative;
    min-height: 330px;
    margin-top: 2rem;
}
.landing-hero-illustration {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
    opacity: .5;
}
.landing-visual-grid {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    opacity: .42;
    background-image:
        linear-gradient(rgba(23, 107, 93, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 107, 93, .13) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom, #000, transparent);
}
.landing-visual-card {
    position: absolute;
    z-index: 1;
    display: grid;
    gap: .55rem;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow);
}
.visual-card-primary {
    top: 10%;
    right: 4%;
    width: min(310px, 85%);
    padding: 1.5rem;
    transform: rotate(2deg);
}
.visual-card-secondary {
    right: 20%;
    bottom: 8%;
    grid-template-columns: auto 1fr;
    align-items: center;
    width: min(300px, 82%);
    padding: 1rem;
    transform: rotate(-2deg);
}
.visual-card-secondary span:last-child { display: grid; gap: .15rem; }
.visual-card-secondary small { color: var(--muted); }
.visual-kicker { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.visual-check {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--success);
    font-weight: 900;
}
.visual-progress {
    height: 8px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--primary-soft);
}
.visual-progress i { display: block; width: 66%; height: 100%; background: var(--primary); }
.landing-section { display: grid; gap: 1.5rem; }
.landing-section-heading { max-width: 720px; }
.landing-section h2,
.landing-value h2,
.landing-cta h2,
.auth-intro h1 {
    margin: 0;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -.045em;
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
    gap: 1rem;
}
.feature-card {
    min-height: 220px;
    padding: 1.35rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.feature-card h3 { margin: 1rem 0 .55rem; }
.feature-card p { margin: 0; color: var(--muted); }
.feature-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 12px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .05em;
}
.feature-icon .icon {
    width: 1.35rem;
    height: 1.35rem;
}
.landing-value {
    display: grid;
    gap: 2rem;
    padding: clamp(2rem, 5vw, 4.5rem);
    color: #fff;
    border-color: #15594e;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, .12), transparent 28%),
        var(--primary-dark);
}
.landing-value .eyebrow { color: #a8e1d2; }
.landing-value > div:first-child p:last-child { max-width: 650px; color: #d7eee8; }
.value-list { display: grid; gap: .75rem; }
.value-list p {
    display: grid;
    gap: .25rem;
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .07);
}
.value-list span { color: #d7eee8; }
.landing-cta {
    display: grid;
    gap: 1rem;
    align-items: center;
    padding: clamp(1.75rem, 5vw, 3.5rem);
    background:
        radial-gradient(circle at 80% 0, rgba(68, 170, 143, .18), transparent 30%),
        var(--surface);
}
.landing-cta .landing-actions { margin: 0; }
.public-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 92px);
}
.public-page-body {
    flex: 1 0 auto;
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
}
.public-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 1rem;
    padding: clamp(1.5rem, 4vw, 3.25rem);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius-lg) + 8px);
    background:
        radial-gradient(circle at 86% 10%, rgba(68, 170, 143, .18), transparent 30%),
        linear-gradient(145deg, #f8fcfb, #eaf5f1);
    box-shadow: var(--shadow);
}
.public-hero h1 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 4.1rem);
    line-height: 1.02;
    letter-spacing: -.055em;
}
.public-hero p:not(.eyebrow) {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1rem, 2vw, 1.16rem);
}
.public-roadmap,
.release-list,
.public-feature-list {
    display: grid;
    gap: 1rem;
}
.public-roadmap {
    gap: clamp(1.75rem, 4vw, 3rem);
}
.public-phase {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    padding: clamp(1.25rem, 3vw, 2rem);
}
.public-phase-head p:last-child,
.public-feature-card p,
.public-status-card p,
.public-module-card > h3 + .public-feature-list {
    margin-bottom: 0;
}
.public-phase-head {
    display: grid;
    gap: .5rem;
}
.public-phase-head h2 {
    margin: 0;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    letter-spacing: -.035em;
}
.public-phase-head p:not(.eyebrow) {
    max-width: 820px;
    color: var(--muted);
}
.public-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
}
.public-module-card,
.public-feature-card,
.public-status-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-muted);
}
.public-module-card {
    display: grid;
    gap: 1.1rem;
    align-content: start;
    padding: clamp(1rem, 2vw, 1.25rem);
}
.public-module-card > h3 {
    margin: 0;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.public-feature-card,
.public-status-card {
    display: grid;
    gap: .75rem;
    align-content: start;
    min-height: 100%;
    padding: clamp(1rem, 2vw, 1.2rem);
    background: #fff;
}
.public-feature-card-head,
.public-status-card-head {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    justify-content: space-between;
}
.public-feature-card h4,
.public-status-card h3 {
    margin: 0;
    font-size: 1rem;
}
.public-status-guide {
    display: grid;
    gap: 1.25rem;
    padding: clamp(1.25rem, 3vw, 2rem);
}
.public-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.public-status-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: .25rem .65rem;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-muted);
    font-size: .78rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}
.public-status-badge--available {
    color: #24563d;
    border-color: #b9dcc4;
    background: #e6f3ea;
}
.public-status-badge--testing {
    color: #765723;
    border-color: #e3cf9f;
    background: #fbf2da;
}
.public-status-badge--in-progress {
    color: #24507b;
    border-color: #c4d6ee;
    background: #edf4ff;
}
.public-status-badge--planned {
    color: #5d4b18;
    border-color: #dccb8a;
    background: #f7f0c7;
}
.public-status-badge--future {
    color: #4d5561;
    border-color: #d4d9e2;
    background: #f1f4f8;
}
.public-status-badge--ready {
    color: var(--primary-dark);
    border-color: rgba(23, 107, 93, .22);
    background: var(--primary-soft);
}
.release-card {
    display: grid;
    gap: 1rem;
}
.release-card-head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
}
.current-release-pill {
    color: var(--primary-dark);
    background: var(--primary-soft);
}
.release-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin: 0;
}
.release-meta div {
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}
.release-meta dt {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800;
}
.release-meta dd {
    margin: 0;
    font-weight: 900;
}
.release-note-section {
    display: grid;
    gap: .5rem;
}
.public-check-list {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.public-check-list li {
    position: relative;
    padding-left: 1.45rem;
}
.public-check-list li::before {
    position: absolute;
    left: 0;
    color: var(--success);
    content: "\2713";
    font-weight: 900;
}
.site-footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 2rem;
    padding: 1rem 0 0;
    color: var(--muted);
    border-top: 1px solid var(--line);
    font-size: .9rem;
}
.site-footer-brand {
    display: grid;
    gap: .2rem;
}
.site-footer-brand strong {
    color: var(--text);
    font-size: 1rem;
}
.site-footer-version {
    font-size: .84rem;
}
.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
}
.site-footer-links a {
    font-weight: 800;
}
.auth-layout {
    display: grid;
    max-width: 980px;
    min-height: 560px;
    margin: 1.5rem auto;
    background:
        radial-gradient(circle at 10% 10%, rgba(68, 170, 143, .2), transparent 28%),
        linear-gradient(145deg, #edf7f4, #f9fbfa);
}
.auth-intro {
    align-self: center;
    padding: clamp(2rem, 6vw, 4.5rem);
}
.auth-illustration {
    width: min(100%, 360px);
    max-height: 190px;
    margin: 0 0 1.5rem;
    object-fit: cover;
    border: 1px solid rgba(23, 107, 93, .12);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    opacity: .88;
}
.auth-intro p:not(.eyebrow) { max-width: 470px; color: var(--muted); font-size: 1.05rem; }
.auth-intro a { font-weight: 800; }
.auth-panel {
    align-self: center;
    max-width: none;
    margin: 1rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--shadow);
}
.auth-panel-heading { margin-bottom: 1.5rem; }
.auth-panel-heading h2 { margin: 0; font-size: 2rem; }
.auth-panel-heading p:last-child { margin-bottom: 0; }
.auth-panel .button { width: 100%; }
.auth-alternate { margin: 1.25rem 0 0; text-align: center; }

@media (min-width: 820px) {
    .landing-hero { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); }
    .landing-visual { align-self: stretch; margin: 0; }
    .landing-value { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); align-items: center; }
    .landing-cta { grid-template-columns: 1fr auto; }
    .auth-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); }
    .auth-panel { margin: 1.5rem; }
}

@media (max-width: 520px) {
    .landing-hero { min-height: auto; padding: 1.5rem; }
    .landing-hero h1 { font-size: 2.65rem; }
    .landing-actions { display: grid; }
    .landing-actions .button { width: 100%; }
    .landing-visual { min-height: 280px; }
    .visual-card-secondary { right: 4%; }
    .feature-card { min-height: 0; }
    .public-nav {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
    .public-nav a {
        min-height: 36px;
        padding: .42rem .6rem;
        font-size: .84rem;
    }
    .public-hero { padding: 1.5rem; }
    .public-feature-card-head,
    .public-status-card-head {
        display: grid;
        justify-content: stretch;
    }
    .public-status-badge {
        width: fit-content;
        white-space: normal;
    }
    .release-card-head,
    .site-footer {
        display: grid;
        justify-content: stretch;
    }
    .site-footer-links {
        justify-content: flex-start;
    }
    .auth-layout { margin: .25rem auto; }
    .auth-intro { padding: 1.5rem 1.25rem .5rem; }
    .auth-intro h1 { font-size: 2.25rem; }
    .auth-panel { margin: 1rem; padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .visual-card-primary,
    .visual-card-secondary { transform: none; }
}

/* RM-002 logged-in workflows: presentation only. */
.app-main > .panel + .panel,
.app-main > .panel + .report-grid,
.app-main > .report-grid + .panel {
    margin-top: 1rem;
}
.app-main > .page-head {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}
.app-main > .page-head p:last-child { margin-bottom: 0; }
.panel > h2:first-child,
.management-panel > h2:first-child {
    padding-bottom: .75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}
.management-list,
.category-colour-list,
.dashboard-task-list,
.history-list {
    margin-top: .85rem;
}
.management-row,
.category-colour-row,
.dashboard-task-row,
.history-row,
.list-row {
    box-shadow: 0 1px 2px rgba(23, 37, 34, .035);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.management-row:hover,
.category-colour-row:hover,
.dashboard-task-row:hover,
.history-row:hover,
.list-row:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-sm);
}
.management-row > strong:first-of-type,
.category-colour-row > strong {
    color: var(--text);
}
.property-checks {
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-muted);
}
.category-colour-row input[type="color"],
.category-create-fields input[type="color"] {
    min-width: 52px;
    cursor: pointer;
}
.form.panel {
    max-width: 960px;
}
.form.panel > .actions:last-child,
.form.panel > .button:last-child {
    margin-top: .35rem;
}
.summary-card {
    position: relative;
    overflow: hidden;
    min-height: 128px;
}
.summary-card > .icon {
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    width: 1.45rem;
    height: 1.45rem;
    color: var(--primary);
}
.summary-card.danger > .icon { color: var(--danger); }
.summary-card::after {
    position: absolute;
    right: -24px;
    bottom: -34px;
    width: 92px;
    height: 92px;
    content: "";
    border-radius: 50%;
    background: var(--primary-soft);
    opacity: .72;
}
.summary-card.danger::after { background: var(--danger-soft); }
.summary-card span,
.summary-card small { position: relative; z-index: 1; }
.heading-with-icon {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.heading-with-icon .icon { color: var(--primary); }

/* RM-002A route-level illustrated empty states. */
.empty-state {
    display: grid;
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    margin: 1rem 0 0;
    padding: 1.25rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-muted);
}
.empty-state-illustration {
    display: block;
    width: 100%;
    max-height: 145px;
    object-fit: cover;
    border-radius: var(--radius);
}
.empty-state-copy h3 { margin-bottom: .35rem; }
.empty-state-copy p { max-width: 560px; color: var(--muted); }
.empty-state-copy .button { margin-top: .25rem; }
.empty-state--compact {
    grid-template-columns: 100px minmax(0, 1fr);
    padding: 1rem;
}
.empty-state--compact .empty-state-illustration { max-height: 90px; }
.empty-state--compact .empty-state-copy p { margin-bottom: 0; }

@media (max-width: 520px) {
    .empty-state,
    .empty-state--compact {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .empty-state-illustration {
        width: min(180px, 70%);
        margin: 0 auto;
    }
    .empty-state-copy .button { width: 100%; }
}
.dashboard-task-row.is-overdue::before,
.dashboard-task-row.is-completed::before {
    display: inline-flex;
    width: fit-content;
    padding: .16rem .48rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.dashboard-task-row.is-overdue::before {
    content: "Overdue";
    color: var(--danger);
    background: var(--danger-soft);
}
.dashboard-task-row.is-completed::before {
    content: "Completed";
    color: var(--success);
    background: var(--success-soft);
}
.task-table tbody tr.is-overdue td:nth-child(2)::before {
    display: block;
    width: fit-content;
    margin-bottom: .2rem;
    padding: .12rem .4rem;
    content: "Overdue";
    border-radius: 999px;
    color: var(--danger);
    background: var(--danger-soft);
    font-size: .66rem;
    font-weight: 900;
    text-transform: uppercase;
}
.task-table tbody tr.is-inactive td:nth-child(2)::before {
    display: block;
    width: fit-content;
    margin-bottom: .2rem;
    padding: .12rem .4rem;
    content: "Inactive";
    border-radius: 999px;
    color: var(--muted);
    background: var(--bg-subtle);
    font-size: .66rem;
    font-weight: 900;
    text-transform: uppercase;
}
.table-wrap,
.planner-wrap {
    scrollbar-color: var(--line-strong) var(--surface-muted);
}
.task-table thead th,
.planner-grid thead th {
    border-bottom: 2px solid var(--line-strong);
}
.detail-panel {
    border-top: 4px solid var(--primary);
}
.detail-list div {
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-muted);
}
.diagnostic-pill {
    display: inline-flex;
    margin: .15rem .25rem .15rem 0;
    padding: .16rem .45rem;
    border-radius: 999px;
    background: var(--bg-subtle);
    font-size: .78rem;
    font-weight: 900;
}
.diagnostic-pill.warning {
    color: var(--warning);
    background: var(--warning-soft);
}
.checklist-view-list,
.history-checklist {
    list-style: none;
    padding-left: 0;
}
.checklist-view-list li,
.history-checklist li {
    padding: .45rem 0 .45rem 1.65rem;
    border-bottom: 1px solid var(--line);
}
.checklist-view-list li::before,
.history-checklist li::before {
    float: left;
    margin-left: -1.55rem;
    content: "○";
    color: var(--muted);
    font-weight: 900;
}
.history-checklist li.checked::before { content: "✓"; color: var(--success); }
.calendar-grid {
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.calendar-cell:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.calendar-cell.selected .date-num::after {
    margin-left: .35rem;
    content: "Selected";
    color: var(--primary-dark);
    font-size: .62rem;
    font-weight: 900;
    text-transform: uppercase;
}
.calendar-task {
    border-left: 3px solid var(--primary);
}
.planner-wrap {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.planner-tick {
    text-decoration: none;
}
.planner-tick:not(.completed) {
    border-style: dashed;
}
.report-grid .panel {
    min-height: 100%;
    border-top: 4px solid var(--primary);
}
.report-grid .list-row strong {
    font-variant-numeric: tabular-nums;
}
.report-grid + .panel .list-row {
    grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr);
}

@media (min-width: 720px) {
    .settings-nav {
        position: sticky;
        top: 76px;
        z-index: 10;
    }
    .management-panel .form-grid {
        align-items: end;
    }
}

@media (max-width: 719px) {
    .app-main > .page-head {
        display: grid;
    }
    .page-head > .actions,
    .page-head > .button {
        width: 100%;
    }
    .page-head > .actions .button,
    .page-head > .button {
        flex: 1 1 auto;
    }
    .dashboard-task-row.is-overdue::before,
    .dashboard-task-row.is-completed::before {
        margin-left: 1.25rem;
    }
    .filters .button,
    .inline-management-form .button {
        width: 100%;
    }
    .report-grid + .panel .list-row {
        grid-template-columns: 1fr;
    }
}

@media print {
    :root {
        --bg: #fff;
        --surface: #fff;
        --surface-muted: #fff;
        --text: #000;
        --muted: #333;
        --line: #aaa;
        --line-strong: #555;
    }
    @page { margin: 12mm; }
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 10pt;
    }
    .topbar,
    .settings-nav,
    .page-head .actions,
    .page-head .button,
    .calendar-toolbar,
    .filters,
    .complete-icon,
    .table-actions,
    .icon-button,
    .nav,
    .property-switcher,
    .rich-text-toolbar {
        display: none !important;
    }
    .empty-state-illustration,
    .landing-hero-illustration,
    .auth-illustration {
        display: none !important;
    }
    .empty-state,
    .empty-state--compact {
        display: block;
        padding: 0;
        border: 0;
    }
    .container,
    .planner-wide {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .page-head {
        margin: 0 0 8mm;
        padding: 0 0 4mm;
    }
    .panel,
    .summary-card,
    .table-wrap,
    .planner-wrap,
    .calendar-grid {
        break-inside: avoid;
        box-shadow: none !important;
        background: #fff !important;
    }
    .table-wrap,
    .planner-wrap {
        overflow: visible;
        border: 0;
    }
    .task-table,
    .planner-grid {
        min-width: 0;
        font-size: 7.5pt;
    }
    .planner-grid th,
    .planner-grid td,
    .planner-task-col,
    .planner-meta-col,
    .planner-grid thead th {
        position: static !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        background: #fff !important;
        color: #000 !important;
    }
    .planner-grid .planner-current-col {
        border-color: #333;
        background: #eee !important;
    }
    a { color: #000 !important; text-decoration: none; }
    .calendar-cell,
    .list-row,
    .management-row,
    .category-colour-row,
    .dashboard-task-row,
    .history-row,
    .detail-list div {
        box-shadow: none !important;
        background: #fff !important;
    }
}

/* RM-002B approved local photography. SVG underlays remain visible if a photo cannot load. */
.photo-frame {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--primary-soft);
}
.photo-frame > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-fallback { z-index: 0; }
.local-photo { z-index: 1; }
.landing-hero {
    color: #fff;
    background: var(--primary-dark);
}
.landing-hero-copy,
.landing-visual,
.auth-intro,
.auth-panel {
    position: relative;
    z-index: 2;
}
.landing-hero-copy { text-shadow: 0 2px 18px rgba(0, 0, 0, .32); }
.landing-hero .eyebrow,
.auth-intro .eyebrow,
.dashboard-banner-copy .eyebrow { color: #bfe8dc; }
.landing-hero .landing-lead,
.landing-hero .landing-proof,
.auth-intro p:not(.eyebrow),
.dashboard-banner-copy p:last-child { color: #eef8f5; }
.landing-hero-photo,
.auth-photo {
    position: absolute;
    z-index: -1;
    inset: 0;
}
.landing-hero-photo::after,
.auth-photo::after,
.dashboard-banner-photo::after,
.feature-photo::after,
.property-row-photo::after,
.empty-state-photo::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    content: "";
    pointer-events: none;
}
.landing-hero-photo::after { background: linear-gradient(90deg, rgba(8, 38, 34, .91), rgba(8, 38, 34, .35)); }
.auth-layout {
    color: #fff;
    background: var(--primary-dark);
}
.auth-photo::after {
    background: linear-gradient(90deg, rgba(8, 38, 34, .82), rgba(8, 38, 34, .48));
    backdrop-filter: blur(2px);
}
.auth-intro a { color: #fff; }
.auth-panel { color: var(--text); }
.feature-card { position: relative; overflow: hidden; }
.feature-card--photo { padding-top: 10rem; }
.feature-photo {
    position: absolute;
    inset: 0 0 auto;
    height: 9rem;
}
.feature-photo::after { background: linear-gradient(to top, rgba(8, 38, 34, .3), transparent 55%); }
.dashboard-lifestyle-banner {
    position: relative;
    isolation: isolate;
    min-height: 220px;
    margin-bottom: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    color: #fff;
    background: var(--primary-dark);
    box-shadow: var(--shadow-sm);
}
.dashboard-banner-photo {
    position: absolute;
    z-index: -1;
    inset: 0;
}
.dashboard-banner-photo::after { background: linear-gradient(90deg, rgba(8, 38, 34, .9), rgba(8, 38, 34, .36)); }
.dashboard-banner-copy {
    max-width: 620px;
    padding: clamp(1.5rem, 4vw, 3rem);
    text-shadow: 0 2px 15px rgba(0, 0, 0, .28);
}
.dashboard-banner-copy h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; }
.dashboard-banner-copy p:last-child { margin-bottom: 0; }
.property-row-photo {
    width: 110px;
    min-height: 76px;
    border-radius: var(--radius);
}
.property-management-row {
    grid-template-columns: 110px minmax(180px, 1fr) minmax(220px, 1.4fr) auto auto auto;
}
.property-row-photo::after,
.empty-state-photo::after { background: linear-gradient(to top, rgba(8, 38, 34, .18), transparent 60%); }
.empty-state-photo {
    width: 100%;
    min-height: 145px;
    border-radius: var(--radius);
}
.empty-state--compact .empty-state-photo { min-height: 90px; }

@media (max-width: 900px) {
    .property-management-row { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    .landing-hero-photo::after,
    .auth-photo::after { background: rgba(8, 38, 34, .72); }
    .dashboard-lifestyle-banner { min-height: 200px; }
    .property-row-photo { width: 100%; min-height: 130px; }
}

@media print {
    .photo-frame,
    .dashboard-lifestyle-banner { display: none !important; }
}

/* Landing-page visual refinement: full-bleed lifestyle sections and image-led cards. */
.landing-page {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    gap: clamp(3.5rem, 7vw, 6.5rem);
}
.landing-section,
.landing-cta {
    width: min(1180px, calc(100% - 2rem));
    margin-inline: auto;
}
.landing-hero {
    grid-template-columns: minmax(0, .95fr) minmax(380px, 1.05fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    min-height: min(760px, calc(100vh - 70px));
    padding: clamp(3.5rem, 8vw, 7rem) max(1rem, calc((100vw - 1180px) / 2));
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.landing-hero::before { display: none; }
.landing-hero-photo::after {
    background:
        linear-gradient(90deg, rgba(5, 27, 24, .94), rgba(5, 27, 24, .7) 48%, rgba(5, 27, 24, .38)),
        linear-gradient(0deg, rgba(5, 27, 24, .35), transparent 48%);
}
.landing-hero-copy { max-width: 620px; }
.landing-hero h1 {
    max-width: 650px;
    color: #fff;
    font-size: clamp(2.7rem, 6vw, 5.2rem);
}
.landing-hero .button:not(.primary) {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
}
.landing-visual {
    min-height: 470px;
    margin: 0;
}
.landing-app-preview {
    position: absolute;
    inset: 9% 3% 9% 8%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 18px;
    background: rgba(248, 252, 251, .94);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .32);
    transform: perspective(900px) rotateY(-6deg) rotateX(2deg);
}
.app-preview-bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .8rem 1rem;
    color: var(--primary-dark);
    border-bottom: 1px solid #dbe8e3;
    background: #fff;
}
.app-preview-bar span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9fc3b8;
}
.app-preview-bar strong { margin-left: .5rem; font-size: .8rem; }
.app-preview-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
    padding: 1rem;
}
.app-preview-summary span {
    display: grid;
    gap: .2rem;
    padding: .85rem;
    border-radius: 12px;
    color: var(--primary-dark);
    background: #e8f3ef;
}
.app-preview-summary small { color: var(--muted); font-size: .62rem; font-weight: 800; }
.app-preview-summary strong { font-size: 1.7rem; }
.app-preview-list {
    display: grid;
    gap: .75rem;
    padding: .2rem 1rem 1rem;
}
.app-preview-list i {
    height: 64px;
    border: 1px solid #dbe8e3;
    border-radius: 12px;
    background:
        linear-gradient(90deg, var(--primary) 0 6px, transparent 6px),
        linear-gradient(90deg, #d9e8e3 0 42%, transparent 42%) 1.25rem 1rem / 70% 8px no-repeat,
        linear-gradient(90deg, #edf3f1 0 65%, transparent 65%) 1.25rem 2rem / 70% 7px no-repeat,
        #fff;
}
.landing-visual-card {
    border-color: rgba(255, 255, 255, .78);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .2);
}
.visual-card-primary { top: 0; right: 0; }
.visual-card-secondary { right: auto; bottom: 0; left: 0; }
.visual-card-tertiary {
    right: 0;
    bottom: 5%;
    width: min(245px, 68%);
    padding: 1rem;
    transform: rotate(1deg);
}
.visual-card-tertiary small { color: var(--muted); }
.feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
}
.feature-card {
    min-height: 330px;
    padding: 11rem 1.25rem 1.3rem;
}
.feature-photo { height: 10rem; }
.feature-card .feature-icon {
    position: relative;
    z-index: 3;
    margin-top: -2.75rem;
    border: 4px solid #fff;
    box-shadow: 0 6px 18px rgba(31, 58, 51, .14);
}
.feature-card h3 { margin-top: .8rem; }
.landing-value {
    min-height: 570px;
    grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr);
    align-items: center;
    padding: clamp(3.5rem, 8vw, 7rem) max(1rem, calc((100vw - 1180px) / 2));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--primary-dark);
}
.landing-value-photo {
    position: absolute;
    z-index: -1;
    inset: 0;
}
.landing-value-photo::after {
    background: linear-gradient(90deg, rgba(5, 35, 30, .94), rgba(5, 35, 30, .7) 55%, rgba(5, 35, 30, .48));
}
.landing-value > div,
.landing-value > .value-list { position: relative; z-index: 2; }
.landing-value h2 {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .34);
}
.value-list p {
    padding: .9rem 1rem;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
}
.landing-cta--clean {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2.25rem, 6vw, 4.75rem);
    border: 1px solid rgba(23, 107, 93, .18);
    border-radius: calc(var(--radius-lg) + 10px);
    background:
        radial-gradient(circle at 90% 10%, rgba(23, 107, 93, .12), transparent 28%),
        radial-gradient(circle at 8% 100%, rgba(234, 183, 87, .16), transparent 32%),
        linear-gradient(135deg, #ffffff, #eef7f4);
    color: var(--text);
    box-shadow: 0 24px 70px rgba(23, 37, 34, .11);
}
.landing-cta--clean::before {
    position: absolute;
    right: clamp(1rem, 8vw, 5rem);
    bottom: -3.5rem;
    z-index: -1;
    width: clamp(180px, 28vw, 340px);
    height: clamp(180px, 28vw, 340px);
    border: 28px solid rgba(23, 107, 93, .08);
    border-radius: 42px;
    content: "";
    transform: rotate(-10deg);
}
.landing-cta--clean::after {
    position: absolute;
    right: clamp(2rem, 11vw, 8rem);
    bottom: clamp(1.5rem, 5vw, 4rem);
    z-index: -1;
    width: clamp(120px, 18vw, 220px);
    height: clamp(86px, 13vw, 160px);
    border: 2px solid rgba(23, 107, 93, .14);
    border-radius: 18px;
    background:
        linear-gradient(rgba(23, 107, 93, .14) 0 0) 24px 34% / 64% 6px no-repeat,
        linear-gradient(rgba(23, 107, 93, .11) 0 0) 24px 54% / 52% 6px no-repeat,
        linear-gradient(rgba(23, 107, 93, .1) 0 0) 24px 74% / 58% 6px no-repeat;
    content: "";
    opacity: .72;
}
.landing-cta--clean .eyebrow { color: var(--primary); }
.landing-cta--clean h2 {
    max-width: 720px;
    color: var(--text);
}
.landing-cta--clean .button:not(.primary) {
    color: var(--primary-dark);
    border-color: rgba(23, 107, 93, .25);
    background: rgba(255, 255, 255, .72);
}
@media (max-width: 1050px) {
    .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 819px) {
    .landing-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-block: 4rem;
    }
    .landing-visual { min-height: 390px; }
    .landing-value { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .landing-page { gap: 3.5rem; }
    .landing-section,
    .landing-cta { width: min(100% - 1.5rem, 1180px); }
    .landing-hero { padding: 3rem .9rem; }
    .landing-hero-photo::after { background: rgba(5, 27, 24, .76); }
    .landing-visual { min-height: 350px; }
    .landing-app-preview { inset: 8% 0 12%; transform: none; }
    .app-preview-summary { gap: .35rem; padding: .6rem; }
    .app-preview-summary span { padding: .55rem; }
    .visual-card-primary { right: -2%; width: 74%; padding: .85rem; }
    .visual-card-secondary { width: 72%; padding: .75rem; }
    .visual-card-tertiary { display: none; }
    .feature-grid { grid-template-columns: 1fr; }
    .feature-card { min-height: 0; }
    .landing-value { min-height: 620px; padding: 3.5rem .9rem; }
    .landing-value-photo::after { background: rgba(5, 35, 30, .76); }
    .landing-cta--clean {
        padding: 2.25rem 1.25rem;
    }
    .landing-cta--clean::before,
    .landing-cta--clean::after { opacity: .45; }
}

.maintenance-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 8% 8%, rgba(234, 183, 87, .2), transparent 28rem),
        linear-gradient(145deg, #f4f8f6 0%, #e5f1ed 100%);
    color: var(--text);
}
.maintenance-page {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 3.5rem) 0;
}
.maintenance-hero {
    position: relative;
    display: grid;
    min-height: min(680px, calc(100vh - 7rem));
    overflow: hidden;
    border-radius: clamp(24px, 4vw, 48px);
    background: #082f29;
    box-shadow: 0 30px 90px rgba(15, 48, 41, .22);
    isolation: isolate;
}
.maintenance-photo,
.maintenance-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.maintenance-photo img {
    object-fit: cover;
}
.maintenance-photo-fallback {
    padding: 8%;
    background: #dcebe6;
}
.maintenance-photo-image {
    z-index: 1;
}
.maintenance-photo::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg, rgba(4, 31, 27, .96) 0%, rgba(4, 31, 27, .86) 44%, rgba(4, 31, 27, .42) 78%, rgba(4, 31, 27, .3));
    content: "";
}
.maintenance-copy {
    position: relative;
    z-index: 3;
    align-self: center;
    width: min(650px, 66%);
    padding: clamp(2rem, 7vw, 6.5rem);
    color: #fff;
}
.maintenance-copy .eyebrow {
    color: #bfe6dc;
}
.maintenance-copy h1 {
    margin: .5rem 0 1rem;
    color: #fff;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    line-height: .98;
    letter-spacing: -.055em;
}
.maintenance-lead {
    max-width: 58ch;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.7;
}
.maintenance-tagline {
    margin: 1.4rem 0 .25rem;
    color: #fff;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.maintenance-remark {
    color: #eab757;
    font-weight: 700;
}
.maintenance-admin-link {
    margin-top: 1rem;
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    backdrop-filter: blur(8px);
}
.maintenance-admin-link:hover {
    border-color: #fff;
    background: #fff;
    color: var(--primary-dark);
}
.maintenance-features {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .8rem;
    margin-top: 1rem;
}
.maintenance-features article {
    display: grid;
    gap: .3rem;
    padding: 1rem;
    border: 1px solid rgba(23, 107, 93, .13);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 12px 30px rgba(23, 37, 34, .06);
}
.maintenance-features strong {
    color: var(--primary-dark);
}
.maintenance-features span {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.45;
}
.maintenance-debug {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--radius);
    background: #fff;
}
.maintenance-debug pre {
    overflow: auto;
    white-space: pre-wrap;
}
.app-tip-stack {
    display: grid;
    gap: 1rem;
    margin: 0 0 1.25rem;
}
.app-tip {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(23, 107, 93, .16);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(23, 107, 93, .08), rgba(234, 183, 87, .12));
    box-shadow: 0 12px 28px rgba(23, 37, 34, .06);
}
.app-tip--announcement {
    border-color: rgba(23, 107, 93, .28);
    background: linear-gradient(135deg, rgba(23, 107, 93, .12), rgba(234, 183, 87, .18));
}
.app-tip-copy {
    min-width: 0;
}
.app-tip-kicker {
    margin: 0 0 .25rem;
    color: var(--primary-dark);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.app-tip h2 {
    margin: 0 0 .35rem;
    font-size: 1.08rem;
}
.app-tip p {
    margin: 0 0 .45rem;
    color: var(--text);
}
.app-tip-actions,
.app-tip-dismissals {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.app-tip-dismissals {
    justify-content: flex-end;
    min-width: max-content;
}
.app-tip-dismissals form {
    margin: 0;
}
.release-overlay-open {
    overflow: hidden;
}
.release-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 2.5rem);
    background: rgba(9, 30, 27, .64);
    backdrop-filter: blur(2px);
}
.release-modal {
    position: relative;
    z-index: 1;
    width: min(100%, 720px);
    max-height: min(82vh, 760px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 30px 80px rgba(9, 30, 27, .34);
    outline: none;
}
.release-modal:focus-visible {
    box-shadow: var(--focus), 0 30px 80px rgba(9, 30, 27, .34);
}
.release-modal__scroll {
    display: grid;
    max-height: min(82vh, 760px);
    overflow-y: auto;
}
.release-modal__body {
    display: grid;
    gap: 1rem;
    padding: clamp(1.25rem, 4vw, 2rem);
}
.release-modal__badge {
    width: fit-content;
    margin: 0;
    padding: .3rem .55rem;
    color: var(--primary-dark);
    border: 1px solid rgba(23, 107, 93, .18);
    border-radius: 999px;
    background: var(--primary-soft);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .09em;
}
.release-modal__title {
    max-width: 620px;
    margin: 0;
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -.04em;
}
.release-modal__copy {
    display: grid;
    gap: .6rem;
}
.release-modal__copy p {
    margin: 0;
    color: var(--text);
}
.release-modal__links,
.release-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.release-modal__links {
    padding-top: .25rem;
}
.release-modal__actions {
    justify-content: flex-end;
    padding: 1rem clamp(1.25rem, 4vw, 2rem);
    border-top: 1px solid var(--line);
    background: var(--surface-muted);
}
.release-modal__actions form {
    margin: 0;
}
@media (max-width: 900px) {
    .maintenance-copy {
        width: min(760px, 86%);
    }
    .maintenance-photo::after {
        background: rgba(4, 31, 27, .76);
    }
    .maintenance-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .app-tip {
        flex-direction: column;
    }
    .app-tip-dismissals {
        justify-content: flex-start;
        min-width: 0;
    }
    .release-modal-backdrop {
        align-items: start;
        padding: 1rem;
    }
    .release-modal,
    .release-modal__scroll {
        max-height: calc(100vh - 2rem);
    }
    .release-modal__actions {
        justify-content: flex-start;
    }
}
@media (max-width: 560px) {
    .maintenance-page {
        width: min(100% - 1rem, 1180px);
        padding: .5rem 0 1rem;
    }
    .maintenance-hero {
        min-height: calc(100vh - 1rem);
        border-radius: 20px;
    }
    .maintenance-copy {
        width: auto;
        padding: 2rem 1.25rem;
    }
    .maintenance-copy h1 {
        font-size: clamp(2.35rem, 14vw, 4rem);
    }
    .maintenance-features {
        grid-template-columns: 1fr;
    }
}