@import url("/nepoch-site/site.css");
/* Estate Management — N epoch's "Highveld night": forest green and dawn amber on limestone (light) or
   green-charcoal (dark). */
:root {
    --forest: #3f8a6e;        /* forest green (primary accent: borders, highlights) */
    --forest-600: #2f6b57;    /* links, accents — 6.3:1 on --surface */
    --forest-700: #1f4a3b;    /* hover, headings — 10:1 on --surface */
    --forest-050: #f0f6f2;    /* faint tint */
    --forest-100: #dcebe2;    /* light tint (table heads, tracks) */
    --accent: #2f6b57;        /* button background, with --on-accent text (6.3:1) */
    --accent-hover: #255646;
    --on-accent: #f2fbf6;
    --ink: #15201b;
    --muted: #5f6e66;         /* secondary text — 5.7:1 on --surface */
    --border: #dce1d9;
    --surface: #ffffff;       /* cards, panels, inputs */
    --white: var(--surface);  /* older name for --surface */
    --surface-sunk: #eceee8;  /* disabled and inset areas */
    --page-top: #f5f6f2;      /* page background gradient */
    --page: #f2f3ee;
    --danger: #9b2c1e;        /* 7:1 on --surface */
    --danger-bg: #f8e1dc;
    --danger-border: #edbfb4;
    --good: #2f6b3a;          /* 6.4:1 on --surface */
    --good-bg: #e2f0e4;
    --good-border: #bcd9c2;
    --warn: #7a4a06;
    --warn-bg: #fbe8c8;
    --warn-border: #ebc98c;
    --info-bg: #e6eeea;
    --neutral-bg: #e9ece6;
    --purple: #6b3f7a;
    --purple-bg: #f1e6f3;
    --teal: #1f5f57;
    --teal-bg: #e1efec;
    --faint: #bcc5be;         /* unavailable (past days, taken slots) */
    --shadow: 0 1px 3px rgba(21, 32, 27, .08), 0 1px 2px rgba(21, 32, 27, .06);
    --shadow-lg: 0 12px 32px rgba(21, 32, 27, .18);
    --radius: 10px;
}

/* Dark mode follows the device's setting unless the day/night toggle chose one (data-theme on <html>).
   Same roles as above; colours chosen to keep AA contrast. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --forest: #6fc3a0;
        --forest-600: #8dd3b5;  /* links on dark surfaces */
        --forest-700: #b5e4cf;
        --forest-050: #16201b;
        --forest-100: #1e2c25;
        --accent: #6fc3a0;    /* --on-accent text 8:1 */
        --accent-hover: #8dd3b5;
        --on-accent: #0c1a14;
        --ink: #e5ede8;
        --muted: #8fa299;
        --border: #2c3832;
        --surface: #1a221e;
        --surface-sunk: #151c18;
        --page-top: #141b17;
        --page: #111714;
        --danger: #f29b8f;
        --danger-bg: #3a1a17;
        --danger-border: #6b3127;
        --good: #7fd1a8;
        --good-bg: #183126;
        --good-border: #2e5a45;
        --warn: #f0a23b;
        --warn-bg: #3a2b10;
        --warn-border: #6b5220;
        --info-bg: #1c2622;
        --neutral-bg: #202924;
        --purple: #d8b4e2;
        --purple-bg: #2f2236;
        --teal: #8fd0c4;
        --teal-bg: #17302b;
        --faint: #4a564f;
        --shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
    }
}
:root[data-theme="dark"] {
    --forest: #6fc3a0;
    --forest-600: #8dd3b5;  /* links on dark surfaces */
    --forest-700: #b5e4cf;
    --forest-050: #16201b;
    --forest-100: #1e2c25;
    --accent: #6fc3a0;    /* --on-accent text 8:1 */
    --accent-hover: #8dd3b5;
    --on-accent: #0c1a14;
    --ink: #e5ede8;
    --muted: #8fa299;
    --border: #2c3832;
    --surface: #1a221e;
    --surface-sunk: #151c18;
    --page-top: #141b17;
    --page: #111714;
    --danger: #f29b8f;
    --danger-bg: #3a1a17;
    --danger-border: #6b3127;
    --good: #7fd1a8;
    --good-bg: #183126;
    --good-border: #2e5a45;
    --warn: #f0a23b;
    --warn-bg: #3a2b10;
    --warn-border: #6b5220;
    --info-bg: #1c2622;
    --neutral-bg: #202924;
    --purple: #d8b4e2;
    --purple-bg: #2f2236;
    --teal: #8fd0c4;
    --teal-bg: #17302b;
    --faint: #4a564f;
    --shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: linear-gradient(180deg, var(--page-top) 0%, var(--page) 220px);
    background-color: var(--page);
    line-height: 1.5;
}

main {
    max-width: 1080px;
    margin: 1.5rem auto 3rem;
    padding: 0 1.25rem;
}

/* Top navigation */
.topbar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: .75rem 1.25rem;
    background: var(--surface);
    border-bottom: 3px solid var(--forest);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar .brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--forest-700);
    margin-right: .5rem;
    padding: 0;
    border-bottom: none;
}
.topbar .brand:hover { border-bottom: none; }
.topbar .brand img { display: block; flex: none; }
/* N epoch wordmark: "N" bold in deep sky, "epoch" in sky, product name small underneath */
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-size: 1.2rem; font-weight: 400; color: var(--forest-600); letter-spacing: .1px; }
.brand-name strong { font-weight: 700; color: var(--forest-700); }
.brand-product { font-size: .68rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--muted); }
.topbar a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    padding: .35rem .1rem;
    border-bottom: 2px solid transparent;
}
.topbar a:hover { color: var(--forest-700); border-bottom-color: var(--forest); }
/* A button in the nav (e.g. "Create a profile") keeps its button look, not the link one. */
.topbar a.btn { color: var(--on-accent); padding: .45rem .95rem; border-bottom: none; border-radius: 999px; font-weight: 600;
    line-height: 1.2; white-space: nowrap; }
.topbar a.btn:hover { color: var(--on-accent); background: var(--accent-hover); border-bottom: none; }
.topbar a.btn:focus-visible { outline: 3px solid var(--forest-600); outline-offset: 2px; }
.topbar .spacer { flex: 1; }

h1 { font-size: 1.6rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; color: var(--muted); }

a { color: var(--forest-600); text-decoration: none; }
a:hover { color: var(--forest-700); text-decoration: underline; }

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin: .5rem 0 1rem;
}
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--border); }
th { background: var(--forest-100); color: var(--ink); font-weight: 600; font-size: .85rem;
     text-transform: uppercase; letter-spacing: .3px; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--forest-050); }

/* Buttons */
button, .btn {
    display: inline-block;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 8px;
    padding: .5rem .9rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
button:hover, .btn:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }

/* Forms */
label { display: inline-block; font-weight: 500; margin-bottom: .15rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number],
input[type=date], input[type=datetime-local], input[type=search], select, textarea {
    width: 100%;
    max-width: 420px;
    padding: .5rem .6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    background: var(--surface);
    margin-bottom: .4rem;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--forest);
    box-shadow: 0 0 0 3px rgba(111, 195, 160, .35);
}
input[type=file] { max-width: 420px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 1rem; }
legend { color: var(--forest-700); font-weight: 600; padding: 0 .4rem; }

/* Cards */
/* An even grid: cards share the row's full width, the same size whatever they hold. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem;
    margin: 1rem 0; }
.cards.cards-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem;
    min-width: 0;
}
.card .value { font-size: 1.8rem; font-weight: 700; color: var(--forest-700); }
.card .value.warn { color: var(--danger); }
.card .label { color: var(--muted); font-size: .85rem; }

/* Panels */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.25rem;
    margin: 1rem 0;
}

/* Flash messages */
.flash { padding: .6rem .8rem; border-radius: 8px; margin: .5rem 0; }
.flash.ok { background: var(--good-bg); color: var(--good); border: 1px solid var(--good-border); }
.flash.err { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }

/* Badges */
.badge { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .75rem;
    font-weight: 600; background: var(--forest-100); color: var(--forest-700); }

/* Horizontal bar chart */
.chart { margin: .5rem 0 1rem; }
.bar-row { display: grid; grid-template-columns: 140px 1fr 110px; align-items: center; gap: .6rem;
    margin: .35rem 0; }
.bar-label { color: var(--ink); font-size: .9rem; }
.bar-track { background: var(--forest-050); border: 1px solid var(--border); border-radius: 999px; height: 18px; }
.bar-fill { display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--forest), var(--forest-600)); min-width: 2px; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9rem; }

/* Occupancy donut */
.donut { width: 120px; height: 120px; }
.donut-bg { stroke: var(--forest-100); }
.donut-fill { stroke: var(--forest-600); stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.donut-text { fill: var(--forest-700); font-size: 8px; font-weight: 700; text-anchor: middle; }

/* Photo grids */
.photo-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.photo-grid img { border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); }

/* Login card */
.auth { max-width: 360px; margin: 2.5rem auto 4rem; }
.auth .panel { text-align: left; }

.back { display: inline-block; margin-bottom: .5rem; color: var(--muted); }
.muted { color: var(--muted); }

/* Page headers: eyebrow label, title, intro, and an action on the right */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    flex-wrap: wrap; margin-bottom: .5rem; }
.page-head h1 { margin-bottom: .3rem; }
.page-head p { margin: 0; max-width: 60ch; }
.eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .6px;
    text-transform: uppercase; color: var(--forest-700); }
.btn-outline { background: var(--surface); color: var(--forest-700); border: 1px solid var(--forest); }
.btn-outline:hover { background: var(--forest-050); color: var(--forest-700); }
/* Disabled buttons read as unavailable in light and dark mode: flat, greyed, no hover. */
button:disabled, button:disabled:hover, .btn:disabled, .btn-outline:disabled, .btn-outline:disabled:hover,
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover {
    background: var(--surface-sunk); color: var(--muted); border: 1px dashed var(--border);
    box-shadow: none; cursor: not-allowed; opacity: .7;
}

/* Two-column form sections that stack on narrow screens */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.grid-2 fieldset { margin: 0 0 1rem; }
.grid-2 label { display: block; }
.grid-2 input[type=text], .grid-2 input[type=email], .grid-2 input[type=password] { max-width: none; }
.input-suffix { display: flex; align-items: baseline; gap: .4rem; }
.input-suffix input { flex: 1; }

.badge-good { background: var(--good-bg); color: var(--good); }
.badge-bad { background: var(--danger-bg); color: var(--danger); }
.flash ul { margin: .3rem 0 0; padding-left: 1.2rem; }
code { background: var(--forest-050); border: 1px solid var(--border); border-radius: 6px; padding: .05rem .35rem;
    font-size: .85rem; }

/* Accessibility helpers */
:focus-visible { outline: 3px solid var(--forest-600); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, .btn:focus-visible { outline-offset: 3px; }
.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; }

.btn-block { display: block; text-align: center; }
.btn-danger-outline { background: var(--surface); color: var(--danger); border: 1px solid var(--danger-border);
    padding: .4rem .8rem; font-size: .9rem; }
.btn-danger-outline:hover { background: var(--danger-bg); color: var(--danger); }

/* Estate cards */
.estate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem;
    margin-top: 1rem; }
.estate-card { display: flex; flex-direction: column; gap: .9rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1.2rem 1.25rem; border-top: 4px solid var(--forest); }
.estate-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.estate-card-head h2 { margin: 0; font-size: 1.25rem; }
.estate-card-head p { margin: .15rem 0 0; font-size: .9rem; }
.estate-stat { margin: 0; color: var(--muted); }
.estate-stat strong { font-size: 1.4rem; color: var(--ink); margin-right: .2rem; }
.estate-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .75rem;
    padding-top: .75rem; border-top: 1px solid var(--border); }
.estate-links h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .35rem; padding-bottom: .35rem;
    border-bottom: 2px solid var(--forest-100); color: var(--ink); font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; }
.estate-links h3::before { content: ""; width: 4px; height: .95em; border-radius: 2px; background: var(--forest-600); }
.estate-links ul { list-style: none; margin: 0; padding: 0; }
.estate-links li a { display: block; padding: .3rem 0; font-weight: 500; }
.estate-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto;
    padding-top: .75rem; border-top: 1px solid var(--border); }
.estate-card-foot form { margin: 0; }
/* Line up each part of the cards in a row (name, units, button, links, footer), so a long name or a longer
   list in one card doesn't leave the others out of step. */
@supports (grid-template-rows: subgrid) {
    .estate-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: .9rem; align-content: start; }
    .estate-card > .btn { align-self: start; }
    .estate-card-foot { align-self: end; }
}
.empty { text-align: center; padding: 2rem; }

/* Narrow screens: let the top bar wrap instead of running off the edge */
@media (max-width: 640px) {
    .topbar { flex-wrap: wrap; gap: .4rem 1rem; padding: .6rem 1rem; }
    .topbar .brand { flex-basis: 100%; }
    .topbar .spacer { display: none; }
    .topbar form { margin-left: auto !important; }
    .page-head .btn { width: 100%; text-align: center; }
}

/* Inline row of short fields (e.g. month + year) */
.form-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.form-row p { margin: 0 0 1rem; }
.form-row label { display: block; }
.form-row select, .form-row input { width: 10rem; }

/* Clickable dashboard cards and the detail panels they open */
.block { display: block; }
.text-danger { color: var(--danger); }
.card.card-button { background: var(--surface); color: var(--ink); font-weight: normal; text-align: left;
    cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card.card-button:hover { background: var(--surface); color: var(--ink); border-color: var(--forest);
    box-shadow: 0 4px 12px rgba(21, 32, 27, .12); transform: translateY(-1px); }
.card.card-button[aria-expanded="true"] { border-color: var(--forest-600); box-shadow: 0 0 0 2px var(--forest-600); }
.card-hint { display: block; margin-top: .5rem; font-size: .85rem; font-weight: 600; color: var(--forest-600); }
.card.card-button[aria-expanded="true"] .card-hint { color: var(--forest-700); }
.detail { border-top: 4px solid var(--forest-600); }
.detail-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.detail-head h2 { margin: 0; }
.detail table { margin-top: .75rem; }
@media (prefers-reduced-motion: reduce) { .card.card-button { transition: none; } .card.card-button:hover { transform: none; } }

/* Anything marked hidden stays hidden, even if a class gives it a display value */
[hidden] { display: none !important; }

/* Unit cards */
.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.25rem;
    margin-top: 1rem; }
.unit-tenancy { margin: 0; padding: .6rem .8rem; background: var(--forest-050); border-radius: 8px; }
.unit-tenancy p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .15rem 0;
    font-size: .9rem; }
.unit-tenancy p br { display: none; }
.unit-tenancy p strong { text-align: right; }

/* Toolbar above a list: search, count, hints and actions on one row */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1rem 0 0;
    padding: .75rem 1rem; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); }
.toolbar .spacer { flex: 1; }
.toolbar form { margin: 0; }
.toolbar-hint { font-size: .85rem; }
.toolbar-hint .grip { font-weight: 700; color: var(--ink); }
.toolbar-status { font-size: .85rem; font-weight: 600; color: var(--good); }
.search-field { position: relative; flex: 1 1 260px; max-width: 360px; }
.search-field svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--muted);
    pointer-events: none; }
.search-field input { max-width: none; margin: 0; padding-left: 2.2rem; border-radius: 999px; }
.btn-small { padding: .35rem .75rem; font-size: .85rem; }

/* Drag handle on reorderable cards */
.grow { flex: 1; min-width: 0; }
.drag-handle { background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 6px;
    width: 2rem; height: 2rem; padding: 0; font-size: 1.1rem; line-height: 1; cursor: grab; flex: none; }
.drag-handle:hover { background: var(--forest-050); color: var(--forest-700); border-color: var(--border); }
.drag-handle:active { cursor: grabbing; }
.drag-handle:disabled { opacity: .35; cursor: not-allowed; background: transparent; }
.unit-card.dragging { opacity: .45; outline: 2px dashed var(--forest-600); outline-offset: 2px; }

/* Buttons and links side by side in a table cell */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.row-actions form { margin: 0; }

.lookup-result { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* Tabs (links styled as a segmented control; aria-current marks the active one) */
.tabs { display: flex; gap: .25rem; margin: 1rem 0 .5rem; border-bottom: 2px solid var(--border); }
.tabs a { padding: .5rem 1rem; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent;
    margin-bottom: -2px; text-decoration: none; }
.tabs a:hover { color: var(--forest-700); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--forest-700); border-bottom-color: var(--forest-600); }

/* Report-issue form: full-width fields, category chips, upload area */
.report-form input[type=text], .report-form textarea { max-width: none; }
.choice-group { border: none; padding: 0; margin: 0 0 1rem; }
.choice-group legend { color: var(--ink); font-weight: 500; padding: 0; margin-bottom: .4rem; }
.choice-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; margin: 0;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer;
    font-weight: 500; }
.choice:hover { border-color: var(--forest); background: var(--forest-050); }
.choice input { margin: 0; accent-color: var(--forest-600); }
.choice:has(input:checked) { border-color: var(--forest-600); background: var(--forest-100); color: var(--forest-700); }
.choice:has(input:focus-visible) { outline: 3px solid var(--forest-600); outline-offset: 2px; }
.file-drop { padding: 1rem; border: 2px dashed var(--border); border-radius: var(--radius); background: var(--forest-050); }
.file-drop label { display: block; margin-bottom: .5rem; }
.file-drop input[type=file] { max-width: 100%; }

/* Sign-in page logo */
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
.auth-brand h1 { display: flex; flex-direction: column; align-items: center; margin: 0; line-height: 1.1; }
.auth-brand .brand-name { font-size: 2rem; }
.auth-brand .brand-product { font-size: .78rem; letter-spacing: 2px; margin-top: .2rem; }

/* Summary cards that work as filter links; aria-current marks the selected one */
.card.card-link { display: flex; flex-direction: column; color: var(--ink); text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease; }
.card.card-link .card-hint { margin-top: auto; padding-top: .5rem; }
.card.card-link:hover { border-color: var(--forest); box-shadow: 0 4px 12px rgba(21, 32, 27, .12); text-decoration: none; }
.card.card-link[aria-current="true"] { border-color: var(--forest-600); box-shadow: 0 0 0 2px var(--forest-600); }

.badge-trial { background: var(--warn-bg); color: var(--warn); }
.grid-2 select { max-width: 100%; }

/* Move-out: numbered steps, inspection checklist, printable deposit statement */
.steps { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; }
.steps > li.panel { margin: 0; }
.steps h2 { margin-top: 0; font-size: 1.1rem; }
.steps th.warn { color: var(--danger); }
.inspection-items { display: grid; gap: .75rem; margin: 1rem 0; }
.inspection-item { margin: 0; }
.inspection-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between; }
.area-input { font-weight: 700; font-size: 1rem; border-color: transparent; background: transparent; padding-left: 0;
    max-width: 22rem; }
.area-input:hover, .area-input:focus { border-color: var(--line, var(--border)); background: var(--surface); padding-left: .5rem; }
.inspection-thumb { display: block; max-width: 160px; max-height: 120px; border-radius: 6px; margin-bottom: .25rem; }
.statement { max-width: 720px; }
.statement-head { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; }
.statement-facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1rem; }
.statement-facts dt { color: var(--muted); }
.statement-facts dd { margin: 0; font-weight: 600; }
@media print {
    .no-print, .topbar { display: none !important; }
    body { background: #fff; }
    main.statement { padding: 0; max-width: none; }
}

/* Arrears reminders */
.reminder-schedule { margin: 0 0 1rem; padding-left: 1.25rem; display: grid; gap: .35rem; }
.reminder-schedule strong { display: inline-block; min-width: 9rem; }

/* Account statements */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.statement-table tfoot th, .statement-table tfoot td { border-top: 2px solid var(--line, var(--border)); background: var(--forest-050); font-weight: 700; }
.invoice-detail { margin: 0 0 .5rem; }
.invoice-detail summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.print-only { display: none; }
@media print {
    .no-print, .topbar, .back { display: none !important; }
    .print-only { display: inline; }
    body { background: #fff; }
    main { padding: 0; max-width: none; }
    .card { border: 1px solid #ccc; box-shadow: none; }
}

/* Lease renewals */
.renewal-banner { display: block; text-decoration: none; color: var(--ink); border-left: 4px solid var(--forest-600);
    margin-bottom: 1rem; }
.renewal-banner strong { display: block; color: var(--forest-700); margin-bottom: .25rem; }
.renewal-banner:hover { text-decoration: none; border-color: var(--forest-700); }
.renewal-note { margin: 0 0 1rem; padding: .75rem 1rem; border-left: 3px solid var(--forest-100); background: var(--forest-050);
    border-radius: 0 6px 6px 0; }
.renewal-form textarea { display: block; max-width: none; width: 100%; }
.renewal-form .form-row input[type=radio] { width: auto; margin: 0 .35rem 0 0; }
.renewal-form .form-row label:has(input[type=radio]) { display: flex; align-items: center; margin-bottom: .35rem; }
.renewal-form .input-suffix input { width: 8rem; flex: none; }

/* Documents */
.plain-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .35rem; }
.doc-upload .form-row input[type=file] { width: 100%; max-width: none; }
.doc-upload .form-row select { width: 14rem; max-width: 100%; }
/* Landlord signup */
.auth.auth-wide { max-width: 560px; }
.auth fieldset { margin: 0 0 1rem; }
label.check { display: flex; gap: .5rem; align-items: flex-start; font-weight: normal; }
label.check input { margin-top: .2rem; }

/* Subscription */
.eft-details { background: var(--forest-050); border-radius: 6px; padding: .75rem 1rem; white-space: pre-wrap;
    font-family: inherit; }
tr.current-plan td { background: var(--forest-050); }

/* Letters */
.letter-kinds { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.letter-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 800px) { .letter-layout { grid-template-columns: 1fr; } }
.letter-layout .panel { margin: 0; }
.letter-text { white-space: pre-wrap; font-family: Georgia, "Times New Roman", serif; line-height: 1.5; }
textarea.letter-text { width: 100%; max-width: none; display: block; }
.small-print { font-size: .85rem; margin-bottom: 0; }
.flash.warn-note { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.letter-page { max-width: 760px; }
.letter-sheet { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 2.5rem 3rem; }
.letter-subject { font-weight: 700; margin-top: 0; }
.placeholder-list { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .75rem; margin: 0 0 1rem; }
.placeholder-list dd { margin: 0; color: var(--muted); }
.letter-detail summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }
@media print {
    .no-print, .topbar { display: none !important; }
    body { background: #fff; }
    .letter-sheet { border: 0; padding: 0; }
}

/* Charges */
.charge-list { display: grid; gap: .75rem; }
.charge-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem 1.5rem; align-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; }
.charge-row h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.charge-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.charge-amount { text-align: right; }
.charge-amount .amount { display: block; font-size: 1.25rem; font-weight: 700; color: var(--forest-700);
    font-variant-numeric: tabular-nums; }
.charge-paused { opacity: .7; }
.charge-paused .amount { color: var(--muted); }
.badge-levy { background: var(--info-bg); color: var(--forest-700); }
.badge-special_levy { background: var(--purple-bg); color: var(--purple); }
.badge-utility { background: var(--teal-bg); color: var(--teal); }
.badge-penalty { background: var(--danger-bg); color: var(--danger); }
.badge-muted { background: var(--neutral-bg); color: var(--muted); }
.empty-state { text-align: center; padding: 2.5rem 1.5rem; }
.charge-footnote { margin-top: 1.25rem; }
@media (max-width: 640px) {
    .charge-row { grid-template-columns: 1fr auto; }
    .charge-actions { grid-column: 1 / -1; }
}
.charge-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 800px) { .charge-layout { grid-template-columns: 1fr; } }
.charge-layout .panel { margin: 0; }
.charge-form fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.charge-form legend { font-weight: 500; margin-bottom: .4rem; padding: 0; }
.charge-form label[for=name], .charge-form label[for=amount] { display: block; }
.charge-form input[type=text] { display: block; width: 100%; max-width: 28rem; }
.choice-grid.choice-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .choice-grid.choice-grid-2 { grid-template-columns: 1fr; } }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .5rem; }
.choice { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--border); border-radius: 8px;
    padding: .7rem .8rem; cursor: pointer; font-weight: normal; margin: 0; background: var(--surface); }
.choice input { margin-top: .2rem; width: auto; }
.choice small { display: block; font-size: .8rem; line-height: 1.35; }
.choice:hover { border-color: var(--forest); }
.choice:has(input:checked) { border-color: var(--forest-600); box-shadow: 0 0 0 1px var(--forest-600); background: var(--forest-050); }
.choice:has(input:focus-visible) { outline: 2px solid var(--forest-600); outline-offset: 2px; }
.money-input { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); width: 12rem; padding-left: .7rem; }
.money-input span { color: var(--muted); font-weight: 600; }
.money-input input { border: 0; box-shadow: none; margin: 0; width: 100%; }
.money-input:focus-within { border-color: var(--forest-600); box-shadow: 0 0 0 3px rgba(47, 107, 87, .15); }
.charge-preview h2 { margin-top: 0; font-size: 1rem; }
.invoice-line { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0;
    border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.invoice-line strong { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Estate form */
.estate-form fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.estate-form legend { font-weight: 700; font-size: 1.05rem; margin-bottom: .6rem; padding: 0; }
.estate-form label { display: block; }
.estate-form input[type=text] { display: block; width: 100%; max-width: none; }
.field-row { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.field-row .grow { flex: 1 1 16rem; }
.field-row .short { flex: 0 1 11rem; }
.optional { font-weight: normal; font-size: .8rem; color: var(--muted); margin-left: .25rem; }
.estate-preview h2 { margin-top: 0; font-size: 1rem; }
.estate-preview-card { border: 1px solid var(--border); border-top: 4px solid var(--forest-100); border-radius: 10px;
    padding: 1rem; margin-bottom: .75rem; background: var(--surface); }
.estate-preview-card strong { font-size: 1.1rem; margin-right: .4rem; }
.hidden { display: none !important; }

/* Unit form */
.unit-form .unit-number input { max-width: 14rem; }
.unit-types { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.unit-form .unit-types .choice { display: flex; }
.unit-types .choice strong { display: block; }
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); overflow: hidden; }
.stepper:focus-within { border-color: var(--forest-600); box-shadow: 0 0 0 3px rgba(47, 107, 87, .15); }
.stepper input { border: 0; box-shadow: none; margin: 0; width: 3.5rem; text-align: center; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-btn { background: var(--forest-050); color: var(--forest-700); border: 0; border-radius: 0; padding: 0 .9rem;
    font-size: 1.1rem; font-weight: 600; margin: 0; }
.stepper-btn:hover, .stepper-btn:focus-visible { background: var(--forest-100); color: var(--forest-700); }
.suffix-input { width: 9rem; padding-left: 0; padding-right: .7rem; }
.suffix-input input { -moz-appearance: textfield; }
.suffix-input input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Billing */
.billing-rules { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .25rem; }
.cancel-invoice { margin-top: .75rem; }

/* Unit photos */
.photo-upload { padding: 1rem; }
.photo-drop { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center;
    padding: 2rem 1rem; border: 2px dashed var(--border); border-radius: 10px; background: var(--forest-050);
    cursor: pointer; font-weight: normal; margin: 0; transition: border-color .15s, background .15s; }
.photo-drop:hover, .photo-drop.is-over { border-color: var(--forest-600); background: var(--forest-100); }
.photo-drop:focus-within { outline: 2px solid var(--forest-600); outline-offset: 2px; }
.photo-drop-icon { color: var(--forest-600); }
.photo-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-pending { margin-top: 1rem; }
.photo-pending-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.photo-pending-list li { width: 110px; font-size: .8rem; color: var(--muted); }
.photo-pending-list img { display: block; width: 110px; height: 82px; object-fit: cover; border-radius: 6px;
    border: 1px solid var(--border); margin-bottom: .25rem; }
.photo-pending-list span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.photo-card { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    overflow: hidden; display: flex; flex-direction: column; }
.photo-frame { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--forest-050); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame:hover img { opacity: .92; }
.photo-cover { position: absolute; top: .5rem; left: .5rem; background: var(--surface); }
.photo-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .5rem .75rem; }
.photo-card figcaption form { margin: 0; }
.photo-name { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Renewal counter-offers */
.counter-box { margin-top: 1.25rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.counter-box summary { cursor: pointer; font-weight: 600; color: var(--forest-700); }
.counter-box textarea { display: block; width: 100%; max-width: none; }
.counter-history { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.counter-history li { margin: 0; }
.counter-pending { border-left: 4px solid #e0a32a; }

/* Notifications */
.nav-bell { position: relative; display: inline-flex; align-items: center; gap: .35rem; }
.nav-bell svg { flex: none; }
.nav-bell-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem;
    height: 1.25rem; padding: 0 .3rem; border-radius: 999px; background: #c2412d; color: #fff; font-size: .72rem;
    font-weight: 700; line-height: 1; }
@media (max-width: 700px) { .nav-bell-label { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); } }
.inbox-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.inbox-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.inbox-item.is-unread { border-left: 4px solid var(--forest-600); background: var(--forest-050); }
.inbox-link { display: grid; grid-template-columns: auto 1fr auto; gap: .35rem 1rem; align-items: start;
    padding: .8rem 1rem; color: var(--ink); text-decoration: none; }
.inbox-link:hover { text-decoration: none; background: rgba(47, 107, 87, .05); }
.inbox-text strong { display: block; }
.inbox-body { display: block; font-size: .9rem; margin-top: .15rem; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }
.inbox-time { font-size: .8rem; white-space: nowrap; }
.inbox-item:not(.is-unread) .inbox-text strong { font-weight: 600; }
@media (max-width: 560px) { .inbox-link { grid-template-columns: 1fr; } }
.inbox-billing, .inbox-payment { background: var(--good-bg); color: var(--good); }
.inbox-renewal { background: var(--purple-bg); color: var(--purple); }
.inbox-maintenance { background: var(--warn-bg); color: var(--warn); }
.inbox-notice, .inbox-letter { background: var(--info-bg); color: var(--forest-700); }
.inbox-document { background: var(--teal-bg); color: var(--teal); }
.inbox-review { background: var(--teal-bg); color: var(--teal); }
.inbox-subscription, .inbox-platform { background: var(--neutral-bg); color: var(--ink); }
.inbox-item { display: flex; align-items: stretch; }
.inbox-item .inbox-link { flex: 1; min-width: 0; }
.inbox-delete { margin: 0; display: flex; align-items: center; padding-right: .5rem; }
.inbox-delete-btn { background: transparent; color: var(--muted); border: 1px solid transparent; padding: .35rem;
    border-radius: 6px; line-height: 0; }
.inbox-delete-btn:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }

/* Places to let (public) */
.tolet-search { padding: 1rem; margin-bottom: .75rem; }
.tolet-search-main { display: flex; gap: .5rem; }
.tolet-search-box { flex: 1; display: flex; align-items: center; gap: .5rem; border: 1px solid var(--border);
    border-radius: 8px; background: var(--surface); padding: 0 .75rem; color: var(--muted); }
.tolet-search-box:focus-within { border-color: var(--forest-600); box-shadow: 0 0 0 3px rgba(47, 107, 87, .15); }
.tolet-search-box input { border: 0; box-shadow: none; margin: 0; max-width: none; padding: .65rem 0; font-size: 1rem;
    background: transparent; }
.tolet-search-box input:focus { outline: none; box-shadow: none; }
.tolet-search-main button { margin: 0; }
.tolet-search-filters { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .75rem; }
.tolet-search-filters p { margin: 0; flex: 0 1 11rem; }
.tolet-search-filters label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .15rem; }
.tolet-search-filters select { width: 100%; margin: 0; }
.tolet-count { margin: 0 0 .75rem; }
@media (max-width: 560px) {
    .tolet-search-filters p { flex: 1 1 45%; }
}
.tolet-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tolet-card { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
    transition: box-shadow .15s, transform .15s; }
.tolet-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.tolet-card-link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.tolet-card-link:hover { text-decoration: none; }
.tolet-card-link:focus-visible { outline: 3px solid var(--forest-600); outline-offset: -3px; }
.tolet-photo { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--forest-050); }
.tolet-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tolet-photo-none { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--forest-600); opacity: .6; }
.tolet-badge { position: absolute; left: .6rem; top: .6rem; background: var(--surface); color: var(--ink); border-radius: 999px;
    padding: .15rem .6rem; font-size: .78rem; font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.tolet-body { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem 1rem; }
.tolet-price { font-size: 1.2rem; color: var(--forest-700); font-variant-numeric: tabular-nums; }
.tolet-title { font-weight: 600; }
.tolet-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 860px) { .tolet-layout { grid-template-columns: 1fr; } }
.tolet-layout .panel { margin: 0 0 1rem; }
.tolet-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: 1rem; }
.tolet-gallery a { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--forest-050); }
.tolet-gallery a.is-main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.tolet-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tolet-gallery a:hover img { opacity: .92; }
@media (max-width: 560px) { .tolet-gallery { grid-template-columns: repeat(3, 1fr); } }
.tolet-nophotos { text-align: center; padding: 2rem 1rem; }
.tolet-description { white-space: pre-line; margin-bottom: 0; }
.tolet-facts .tolet-price { font-size: 1.6rem; display: block; }
.tolet-facts dl { margin-top: .75rem; }
.tolet-join { max-width: 640px; }
.tolet-join-listing { display: flex; flex-direction: column; gap: .15rem; border-left: 4px solid var(--forest-600); }
.tolet-join textarea { display: block; width: 100%; max-width: none; }
.tolet-join input[type=email], .tolet-join input[type=password], .tolet-join input[type=text],
.tolet-join input[type=tel] { display: block; width: 100%; max-width: none; }
#interest textarea, #interest input[type=text], #interest input[type=email], #interest input[type=tel] {
    display: block; width: 100%; max-width: none; }
.interest-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.interest-item { margin: 0; }
.interest-admin { border: 1px solid var(--border); border-radius: 10px; padding: .9rem 1rem; background: var(--surface); }
.interest-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.interest-head .badge { flex: none; }
.interest-head > div { min-width: 0; overflow-wrap: anywhere; }
.interest-note { margin: .5rem 0 0; padding: .5rem .75rem; background: var(--forest-050); border-radius: 8px; white-space: pre-line; }
.interest-answer { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; align-items: center; }
.interest-answer select { width: auto; margin: 0; }
.interest-answer input[type=text] { flex: 1 1 16rem; max-width: none; margin: 0; }
.interest-answer button { margin: 0; }
.badge.interest-new { background: var(--info-bg); color: var(--forest-700); }
.badge.interest-contacted { background: var(--warn-bg); color: var(--warn); }
.badge.interest-viewing { background: var(--good-bg); color: var(--good); }
.badge.interest-declined { background: var(--neutral-bg); color: var(--muted); }

/* Platform-wide promotion of a listing, and "Find a place" */
.promote-panel { border-left: 4px solid var(--forest-600); }
.promote-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.promote-head > div { flex: 1 1 22rem; }
.promote-head form { margin: 0; }
.promote-status { margin: 0 0 .25rem; font-size: 1.05rem; }
.badge.badge-promoted { background: var(--good-bg); color: var(--good); margin-right: .25rem; }
.tolet-landlord { color: var(--forest-700); font-weight: 600; margin-top: .2rem; }

/* Delegated viewings */
.handler-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.interest-viewing { margin: .5rem 0 0; padding: .45rem .75rem; background: var(--good-bg); border-radius: 8px; color: var(--good); }
.viewing-schedule { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.viewing-schedule li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: 0;
    padding: .55rem .75rem; border-left: 4px solid var(--good); background: var(--surface); border-radius: 6px;
    border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.viewing-schedule time { font-weight: 700; min-width: 9rem; font-variant-numeric: tabular-nums; }

/* The logo swaps to its dark-background version via <picture>; keep the wrapper out of the layout. */
.brand picture, .auth-brand picture { display: block; line-height: 0; }

/* Date and time picker (app-styled, instead of the browser's) */
.dt-picker { position: relative; display: inline-block; }
.dt-picker.hidden { display: none !important; }
.dt-trigger { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .5rem .75rem;
    background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 8px;
    font-weight: 500; white-space: nowrap; }
.dt-trigger:hover { background: var(--forest-050); color: var(--ink); border-color: var(--forest); }
.dt-trigger:focus-visible { outline: 3px solid var(--forest-600); outline-offset: 2px; }
.dt-trigger svg { color: var(--forest-600); flex: none; }
.dt-trigger.is-empty .dt-label { color: var(--muted); font-weight: 400; }
.dt-panel { position: absolute; z-index: 30; top: calc(100% + .4rem); left: 0; background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg);
    padding: .9rem; width: max-content; max-width: min(34rem, calc(100vw - 2rem)); }
.dt-body { display: flex; gap: 1rem; align-items: flex-start; }
.dt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.dt-head strong { font-size: .95rem; }
.dt-nav { margin: 0; padding: 0; width: 2rem; height: 2rem; border-radius: 8px; background: var(--surface);
    color: var(--forest-700); border: 1px solid var(--border); font-size: 1.1rem; line-height: 1; }
.dt-nav:hover { background: var(--forest-050); color: var(--forest-700); }
.dt-nav:disabled { opacity: .35; cursor: default; background: var(--surface); }
.dt-days { display: grid; grid-template-columns: repeat(7, 2.25rem); gap: .2rem; }
.dt-weekday { text-align: center; font-size: .72rem; font-weight: 700; color: var(--muted); padding: .2rem 0; }
.dt-day { margin: 0; padding: 0; height: 2.25rem; border-radius: 8px; background: transparent; color: var(--ink);
    font-weight: 500; font-variant-numeric: tabular-nums; }
.dt-day:hover { background: var(--forest-050); color: var(--forest-700); }
.dt-day.is-today { box-shadow: inset 0 0 0 1px var(--forest); color: var(--forest-700); }
.dt-day.is-picked, .dt-day.is-picked:hover { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.dt-day:disabled { color: var(--faint); background: transparent; cursor: default; }
.dt-times { border-left: 1px solid var(--border); padding-left: 1rem; min-width: 10.5rem; }
.dt-times-title { display: block; font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
    letter-spacing: .5px; margin: .45rem 0 .6rem; }
.dt-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; max-height: 15.5rem; overflow-y: auto;
    padding-right: .15rem; }
.dt-time { margin: 0; padding: .35rem 0; border-radius: 8px; background: var(--surface); color: var(--ink);
    border: 1px solid var(--border); font-size: .85rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.dt-time:hover { background: var(--forest-050); color: var(--forest-700); border-color: var(--forest); }
.dt-time.is-picked, .dt-time.is-picked:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.dt-time:disabled { color: var(--faint); background: var(--surface-sunk); border-color: var(--border); cursor: default; }
.dt-day:focus-visible, .dt-time:focus-visible, .dt-nav:focus-visible, .dt-link:focus-visible {
    outline: 3px solid var(--forest-600); outline-offset: 1px; }
.dt-foot { display: flex; justify-content: space-between; margin-top: .75rem; padding-top: .6rem;
    border-top: 1px solid var(--border); }
.dt-link { margin: 0; padding: .25rem .4rem; background: transparent; color: var(--forest-700); font-weight: 600; }
.dt-link:hover { background: var(--forest-050); color: var(--forest-700); }
@media (max-width: 560px) {
    .dt-panel { position: fixed; left: 1rem; right: 1rem; top: auto; bottom: 1rem; max-width: none; width: auto; }
    .dt-body { flex-direction: column; }
    .dt-days { grid-template-columns: repeat(7, 1fr); width: 100%; }
    .dt-body > div:first-child { width: 100%; }
    .dt-times { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: .5rem; width: 100%; }
    .dt-slots { grid-template-columns: repeat(4, 1fr); max-height: 9rem; }
}

/* Site footer: on every page, kept at the bottom of short pages */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
/* The footer is nepoch-site's (imported above); here only its link colour on hover. */
.site-footer-links a:hover { color: var(--forest-700); }

/* About, legal, contact and feedback pages */
.prose { max-width: 46rem; }
.prose h2 { margin-top: 1.75rem; font-size: 1.15rem; }
.prose h3 { margin-top: 1.25rem; font-size: 1rem; color: var(--ink); }
.prose p, .prose li { line-height: 1.65; }
.prose ul { padding-left: 1.2rem; }
.legal-meta { color: var(--muted); font-size: .9rem; margin-top: -.25rem; }
.legal-toc { background: var(--forest-050); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .75rem 1rem; margin: 1rem 0 1.5rem; }
.legal-toc ol { margin: .25rem 0 0; padding-left: 1.2rem; columns: 2 14rem; }
.site-form { max-width: 40rem; }
.site-form textarea, .site-form input[type=text], .site-form input[type=email], .site-form select {
    display: block; width: 100%; max-width: none; }
.rating { border: 0; padding: 0; margin: 0 0 1rem; }
.rating legend { font-weight: 500; padding: 0; margin-bottom: .4rem; }
.rating-options { display: flex; flex-wrap: wrap; gap: .4rem; }
.rating-options label { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem;
    padding: .45rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
    cursor: pointer; font-weight: 600; margin: 0; }
.rating-options label:hover { border-color: var(--forest); background: var(--forest-050); }
.rating-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-options label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rating-options label:has(input:focus-visible) { outline: 3px solid var(--forest-600); outline-offset: 2px; }
.rating-hint { display: flex; justify-content: space-between; max-width: 15.35rem; font-size: .8rem; color: var(--muted);
    margin-top: .25rem; }
.feedback-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.feedback-item { margin: 0; }
.feedback-head { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: baseline; }
.feedback-message { margin: .5rem 0 0; white-space: pre-line; }
.table-wrap { overflow-x: auto; }

/* Unit types grouped as homes and commercial spaces */
.type-group-title { margin: .25rem 0 .4rem; font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--muted); }
.type-group-title:not(:first-of-type) { margin-top: 1rem; }
.renter-form fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.renter-form legend { font-weight: 700; font-size: 1.05rem; margin-bottom: .6rem; padding: 0; }
.renter-form input[type=text], .renter-form input[type=email], .renter-form input[type=tel], .renter-form select {
    display: block; width: 100%; max-width: none; }
.lease-form .field-row .short { flex: 0 1 14rem; }
.company-grid { align-items: start; }
.company-spaces { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.company-spaces li { margin: 0; }

/* Invoices and tax invoices */
.invoice-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.invoice-actions .back { margin: 0; }
.invoice-doc { max-width: 52rem; padding: 2rem; }
.invoice-doc-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start;
    border-bottom: 2px solid var(--border); padding-bottom: 1rem; margin-bottom: 1.25rem; }
.invoice-doc-head h1 { margin: 0; font-size: 1.6rem; }
.invoice-number { margin: .15rem 0 .35rem; font-size: 1.05rem; font-weight: 700; color: var(--forest-700);
    font-variant-numeric: tabular-nums; }
.invoice-dates { display: grid; grid-template-columns: auto auto; gap: .2rem 1rem; margin: 0; }
.invoice-dates dt { color: var(--muted); }
.invoice-dates dd { margin: 0; font-weight: 600; text-align: right; }
.invoice-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.25rem; }
.invoice-parties h2 { margin: 0 0 .3rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
@media (max-width: 560px) { .invoice-parties { grid-template-columns: 1fr; } .invoice-doc { padding: 1.25rem; } }
.invoice-lines tfoot td, .invoice-lines tfoot th { text-align: right; }
.invoice-lines tfoot td:first-child, .invoice-lines tfoot th:first-child { text-align: right; }
@media print { .invoice-doc { box-shadow: none; border: 0; padding: 0; max-width: none; } }
.invoice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.invoice-list li { margin: 0; }
.invoice-lines tfoot th { text-transform: none; letter-spacing: normal; font-size: 1rem; color: var(--ink); }
.invoice-lines tfoot tr:last-child th { font-size: 1.1rem; }
.lease-form label { display: block; }
.lease-form select { display: block; }
.lease-form .field-row .short { flex: 0 1 16rem; }

/* Meter readings */
.meter-input { max-width: 10rem; }
.meter-input[aria-invalid="true"] { border-color: var(--danger); }
.meter-error { color: var(--danger); margin-top: .25rem; }

/* Plus */
.badge.badge-plus { background: var(--forest-600); color: #fff; font-size: .7rem; vertical-align: middle; margin-left: .35rem; }
.plus-panel { border-color: var(--forest-600); }
.plus-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.plus-features { margin: .75rem 0; padding-left: 1.1rem; }
.plus-features li { margin-bottom: .4rem; }
.plus-features li > * { display: block; }
.flash.warn-note { background: var(--surface-sunk); border: 1px solid var(--border); padding: .5rem .75rem; }

/* Debit orders */
.day-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; max-width: 24rem; }
.day-option { position: relative; margin: 0; }
.day-option input { position: absolute; opacity: 0; inset: 0; }
.day-option span { display: block; text-align: center; padding: .45rem 0; border: 1px solid var(--border);
    border-radius: 8px; background: var(--surface); cursor: pointer; font-weight: 600; }
.day-option input:checked + span { background: var(--forest-600); border-color: var(--forest-600); color: #fff; }
.day-option input:focus-visible + span { outline: 2px solid var(--forest-600); outline-offset: 2px; }
.debit-status h2 { font-size: 1.15rem; }
.debit-recent { margin-bottom: .35rem; }
.debit-result { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .25rem; }
.debit-result input { max-width: 11rem; padding: .25rem .4rem; }
.bank-details { margin-top: 1rem; }
.debit-change { margin: .75rem 0; }
.debit-change summary { cursor: pointer; font-weight: 600; color: var(--forest-700); }

/* Import */
.import-steps { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.import-steps h2 { margin-top: 0; font-size: 1.1rem; }
.import-errors { margin: 0; padding-left: 1rem; color: var(--danger); }
.row-problem td { color: var(--danger); }
.import-problems { border-color: var(--danger-border); }
.badge.badge-pending { background: var(--forest-050); color: var(--forest-700); }
.invite-cell { white-space: nowrap; }
.invite-cell small { margin-top: .25rem; }
.invite-form button:disabled { font-variant-numeric: tabular-nums; }
.plan-move { max-width: 16rem; }

/* Admin: plans */
.plans-panel { padding: 0; overflow: hidden; }
.plans-panel .table-wrap { margin: 0; }
.plans-table { margin: 0; }
.plans-table th, .plans-table td { vertical-align: top; }
.plans-table thead th { white-space: nowrap; vertical-align: bottom; }
.plans-table thead th.wrap-head { white-space: normal; }
.plans-table input { margin: 0; }
.plans-table th, .plans-table td { padding-left: .6rem; padding-right: .6rem; }
.plans-table .plan-name-cell { min-width: 8rem; }
.plans-table .plan-name-cell input { max-width: 12rem; font-weight: 600; }
.plans-table .plan-name-cell small { margin-top: .3rem; }
.plans-table .money-input { width: 8rem; }
.plans-table .plan-number { width: 5.5rem; }
/* No up/down arrows: they take room and aren't how prices or caps get typed. */
.plans-table input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.plans-table input[type=number]::-webkit-inner-spin-button,
.plans-table input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.plans-table .plan-review-cell { text-align: right; }
.plans-table .plan-row-editing td { background: var(--forest-050); }
.plans-key { margin: 0; padding: .75rem 1rem 1rem; }
.plan-problems { margin-bottom: 1rem; }
.plan-problems p, .plan-problems ul { margin: 0; }
.plan-problems ul { padding-left: 1.2rem; margin-top: .25rem; }
.nowrap { white-space: nowrap; }
/* Phones: each plan stacks as a card, one labelled field per line. */
@media (max-width: 760px) {
    .plans-table thead { display: none; }
    .plans-table, .plans-table tbody, .plans-table tr, .plans-table td { display: block; width: 100%; }
    .plans-table tr { border-bottom: 1px solid var(--border); padding: .75rem 0; }
    .plans-table td { border: 0; padding: .3rem 1rem; }
    .plans-table td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .plans-table td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--muted);
        font-size: .9rem; }
    .plans-table .plan-name-cell input { max-width: none; }
    .plans-table .money-input, .plans-table .plan-number { width: 8rem; }
    .plans-table .plan-review-cell { text-align: left; padding-top: .5rem; }
}
.plan-impact { margin: 1rem 0 0; padding-left: 1.1rem; }
.plan-impact li { margin-bottom: .35rem; }
.plan-impact .impact-warn { color: var(--danger); }
.plan-row-locked td { background: var(--surface-sunk); }
.plan-pending-row td { background: var(--forest-050); padding-top: .5rem; padding-bottom: .6rem; }
.plan-pending-row .badge { margin-right: .4rem; }
.change-card { margin-bottom: 1rem; }
.change-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.change-head h3 { margin: 0; }
.change-diff { margin: .6rem 0; padding-left: 1.1rem; }
.change-reason { margin: .4rem 0; }
.change-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .6rem; }
.change-actions form { margin: 0; }
.change-note-form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.change-note-form input { margin: 0; max-width: 18rem; }
.audit-table td { vertical-align: top; }
.stacked-field label { display: block; margin-bottom: .25rem; }
.stacked-field textarea, .stacked-field select, .stacked-field input { display: block; width: 100%; max-width: 40rem; }
.flash.offer-note { background: var(--forest-050); color: var(--forest-700); border: 1px solid var(--forest-700); }
.small-link { font-size: .85rem; margin-left: .5rem; }
.handover-form .choice { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; font-weight: 600; }
.handover-form .choice input { width: auto; margin: 0; }
.handover-form .choice-detail { margin: 0 0 .75rem 1.6rem; }
.handover-form select { max-width: 32rem; width: 100%; }

/* The logo that suits the theme. */
:root .brand-mark-dark, .topbar .brand .brand-mark-dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-mark-dark { display: block; }
    :root:not([data-theme="light"]) .brand-mark-light { display: none; }
}
:root[data-theme="dark"] .brand-mark-dark { display: block; }
:root[data-theme="dark"] .brand-mark-light { display: none; }

/* A landlord's logo on their own address: day version, and a night one if they added it; otherwise night mode
   shows the day logo on a light backing so dark artwork stays visible. */
.landlord-logo { display: block; object-fit: contain; object-position: left center; }
.landlord-logo-bar { height: 36px; width: auto; max-width: 200px; }
.landlord-logo-large { height: 72px; width: auto; max-width: 280px; margin: 0 auto .5rem; object-position: center; }
.landlord-logo-day, .landlord-logo-night { line-height: 0; }
.landlord-logo-night { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .landlord-logo-day:not(.no-night) { display: none; }
    :root:not([data-theme="light"]) .landlord-logo-night { display: inline-block; }
    :root:not([data-theme="light"]) .landlord-logo-day.no-night .landlord-logo { background: #f2f3ee; padding: 3px 6px; border-radius: 6px; }
}
:root[data-theme="dark"] .landlord-logo-day:not(.no-night) { display: none; }
:root[data-theme="dark"] .landlord-logo-night { display: inline-block; }
:root[data-theme="dark"] .landlord-logo-day.no-night .landlord-logo { background: #f2f3ee; padding: 3px 6px; border-radius: 6px; }

.logo-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.logo-slot h3 { margin: 0 0 .5rem; font-size: 1rem; }
.logo-slot form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 0; }
.logo-slot input[type=file] { max-width: 100%; }
.logo-preview { display: flex; align-items: center; justify-content: center; min-height: 6rem; padding: 1rem;
    border: 1px dashed var(--border); border-radius: var(--radius); }
.logo-preview img { max-height: 64px; max-width: 100%; }
.logo-preview-day { background: #ffffff; }
.logo-preview-night { background: #111714; }
.logo-preview-day .muted { color: #5b6b78; }
.logo-preview-night .muted { color: #8fa299; }
.logo-backed img { background: #f2f3ee; padding: 3px 6px; border-radius: 6px; }
.plan-move small { margin-top: .25rem; white-space: normal; color: var(--ink); }
.plan-unavailable > td:not(.plan-move), .plan-unavailable > td:not(.plan-move) * { color: var(--muted); }
.plan-change table th[scope="row"] { font-weight: 600; }
.plan-change-fee td { font-size: 1.05rem; }
.plan-change-summary { font-size: 1.1rem; font-weight: 700; margin: 1rem 0 .5rem; }
.plan-change-summary.more { color: var(--forest-700); }

/* Rent changes on renewals: up in green, down in red */
.rent-change { color: var(--muted); font-weight: 600; }
.rent-change.rent-up { color: var(--good); }
.rent-change.rent-down { color: var(--danger); }

/* Charts (/js/charts.js). Three series colours, checked for colour-blind separation on these surfaces, light and
   dark; text always in ink colours, never the series colour. */
.viz { margin: 0 0 1.25rem; --viz-1: #2f6b57; --viz-2: #d98a17; --viz-3: #5b7a99; }
@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .viz { --viz-1: #6fc3a0; --viz-2: #f0a23b; --viz-3: #8fb3d9; }
}
:root[data-theme="dark"] .viz { --viz-1: #6fc3a0; --viz-2: #f0a23b; --viz-3: #8fb3d9; }
.viz-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: .5rem; }
.viz-title { font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.viz-subtitle { font-size: .85rem; }
.viz-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; color: var(--muted); margin-bottom: .4rem; }
.viz-key { display: inline-flex; align-items: center; gap: .4rem; }
.viz-swatch { display: inline-block; }
.viz-swatch.viz-line { width: 14px; height: 2px; border-radius: 2px; }
.viz-swatch.viz-box { width: 10px; height: 10px; border-radius: 2px; }
.viz-swatch.viz-s1, .viz-key-line.viz-s1, .viz-bar-fill.viz-s1 { background: var(--viz-1); }
.viz-swatch.viz-s2, .viz-key-line.viz-s2, .viz-bar-fill.viz-s2 { background: var(--viz-2); }
.viz-swatch.viz-s3, .viz-key-line.viz-s3, .viz-bar-fill.viz-s3 { background: var(--viz-3); }
.viz-plot { position: relative; min-height: 2rem; }
.viz-svg { display: block; overflow: visible; }
.viz-grid { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.viz-baseline { stroke: var(--muted); stroke-opacity: .5; stroke-width: 1; shape-rendering: crispEdges; }
.viz-axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-line.viz-s1 { stroke: var(--viz-1); }
.viz-line.viz-s2 { stroke: var(--viz-2); }
.viz-line.viz-s3 { stroke: var(--viz-3); }
.viz-dot { stroke: var(--surface); stroke-width: 2; }
.viz-dot.viz-s1, .viz-bar.viz-s1 { fill: var(--viz-1); }
.viz-dot.viz-s2, .viz-bar.viz-s2 { fill: var(--viz-2); }
.viz-dot.viz-s3, .viz-bar.viz-s3 { fill: var(--viz-3); }
.viz-cross { stroke: var(--muted); stroke-width: 1; shape-rendering: crispEdges; }
.viz-hit { fill: transparent; outline: none; cursor: default; }
.viz-hit.is-active, .viz-hit:focus-visible { fill: var(--ink); fill-opacity: .04; }
.viz-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--surface); color: var(--ink);
    border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: .45rem .6rem;
    font-size: .82rem; white-space: nowrap; }
.viz-tip-title { color: var(--muted); margin-bottom: .2rem; }
.viz-tip-row { display: flex; align-items: center; gap: .45rem; }
.viz-tip-row strong { font-variant-numeric: tabular-nums; }
.viz-tip-name { color: var(--muted); }
.viz-key-line { display: inline-block; width: 12px; height: 2px; border-radius: 2px; }
.viz-bars { display: grid; gap: .55rem; }
.viz-bar-row { display: grid; grid-template-columns: minmax(6rem, 30%) 1fr auto; align-items: center; gap: .75rem;
    border-radius: 6px; outline: none; }
.viz-bar-row.is-active, .viz-bar-row:focus-visible { background: var(--surface-sunk); }
.viz-bar-label { font-size: .9rem; overflow-wrap: anywhere; }
.viz-bar-tracks, .viz-bar-values { display: grid; gap: 2px; }
.viz-bar-track { display: block; height: 12px; }
.viz-bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 0; }
.viz-bar-value { font-size: .82rem; line-height: 12px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.viz-table { margin-top: .6rem; font-size: .88rem; }
.viz-table summary { cursor: pointer; color: var(--muted); }
.viz-table table { margin-top: .4rem; }
.viz-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.viz-empty { margin: .5rem 0 0; }
.viz-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 1.25rem; }
@media print { .viz-table { display: block; } .viz-table[open] summary, .viz-table summary { display: none; } }
.viz .is-link { cursor: pointer; }
.viz-tip-hint { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .78rem; }
.viz-table td a, .viz-table th a { text-decoration: none; }
/* A lease opened from a chart is highlighted in its unit's list. */
tr:target td { background: var(--forest-100); }
tr:target td:first-child { box-shadow: inset 4px 0 0 var(--forest); }
.insight-rows { list-style: none; margin: 0; padding: 0; }
.insight-rows li + li { border-top: 1px solid var(--border); }
.insight-rows a { display: flex; align-items: center; gap: 1rem; padding: .7rem .25rem; color: var(--ink); text-decoration: none; }
.insight-rows a:hover, .insight-rows a:focus-visible { background: var(--forest-050); }
.insight-main { flex: 1; min-width: 0; }
.insight-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.insight-go { color: var(--muted); font-size: 1.3rem; line-height: 1; }

/* My profile › Appearance: three choices, each with a small picture of the app in that mode. */
.appearance-form fieldset { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.appearance-choice { display: flex; flex-direction: column; gap: .6rem; padding: .75rem; border: 1px solid var(--border);
    border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.appearance-choice:has(input:checked) { border-color: var(--forest); box-shadow: 0 0 0 2px var(--forest-100); }
.appearance-choice:has(input:focus-visible) { outline: 3px solid var(--forest-600); outline-offset: 2px; }
.appearance-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.appearance-sample { display: flex; flex-direction: column; gap: 6px; height: 4.5rem; padding: 8px; border-radius: 8px;
    border: 1px solid rgba(127, 127, 127, .25); overflow: hidden; }
.appearance-sample .appearance-bar { height: 10px; border-radius: 3px; background: #2f6b57; }
.appearance-sample .appearance-line { height: 6px; border-radius: 3px; width: 80%; }
.appearance-sample .appearance-line.short { width: 50%; }
.appearance-light { background: #ffffff; }
.appearance-light .appearance-line { background: #dce1d9; }
.appearance-dark { background: #1a221e; }
.appearance-dark .appearance-bar { background: #6fc3a0; }
.appearance-dark .appearance-line { background: #2c3832; }
.appearance-auto { background: linear-gradient(135deg, #ffffff 50%, #1a221e 50%); }
.appearance-auto .appearance-line { background: #8fa299; }
.appearance-text strong { display: block; }

/* Pay now */
.pay-panel { max-width: 40rem; }
.pay-owed { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: 1rem; }
.pay-owed strong { font-size: 1.8rem; }
.money-field { display: inline-flex; align-items: center; gap: .4rem; }
.money-field input { width: 10rem; margin: 0; font-variant-numeric: tabular-nums; }
.pay-urls dt { font-weight: 600; margin-top: .6rem; }
.pay-urls dd { margin: .2rem 0 0; overflow-wrap: anywhere; }

/* Renter's home: their account up top, then everything else as even cards. */
.account-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.account-home h2 { margin: .1rem 0 0; font-size: 1.4rem; }
.account-balance { display: flex; flex-direction: column; gap: .15rem; }
.account-balance strong { font-size: 1.8rem; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.account-balance strong.warn { color: var(--danger); }
.account-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-left: auto; }
.account-actions .btn { margin: 0; white-space: nowrap; }
.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem;
    margin: 1rem 0; }
.portal-card { display: flex; flex-direction: column; gap: .35rem; min-width: 0; color: var(--ink); text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease; }
.portal-card strong { color: var(--forest-700); font-size: 1.05rem; }
.portal-card span { color: var(--muted); font-size: .9rem; }
.portal-card:hover, .portal-card:focus-visible { border-color: var(--forest); text-decoration: none; }
@media (max-width: 640px) { .account-actions { margin-left: 0; width: 100%; flex-direction: column; }
    .account-actions .btn { width: 100%; text-align: center; } }

/* Signing in with Google, Facebook or LinkedIn */
.social-signin { display: grid; gap: .5rem; margin-bottom: 1rem; }
.social-signin .btn { width: 100%; justify-content: center; text-align: center; }
.social-signin .or { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .9rem; margin: .5rem 0 0; }
.social-signin .or::before, .social-signin .or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

/* A maintenance job's history: one line per change, oldest first, on a thin rail. */
.history { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--border); }
.history li { margin: 0 0 .75rem; }
.history li small { display: block; }
.history li p { margin: .25rem 0 0; }

/* Splitting a lease's rent between housemates */
.split-form table { margin-bottom: .75rem; }
.split-form input.split-amount { width: 9rem; text-align: right; }
.split-form .actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
#split-total.err-text { color: var(--danger); }
.rent-split { list-style: none; margin: .25rem 0 0; padding: 0; font-size: .85rem; color: var(--muted); }

/* Platform admin: feature flags */
.feature-card { margin-bottom: .75rem; }
.feature-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.feature-head h3 { margin: 0; }
.feature-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 0 auto; }
.feature-exceptions li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.feature-add summary { cursor: pointer; }

/* Reviews of an estate */
.review-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin-bottom: .75rem; }
.review-average { font-size: 1.5rem; }
.review-stars { color: var(--warn); letter-spacing: .05em; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.review-item + .review-item { border-top: 1px solid var(--border); padding-top: 1rem; }
.review-head { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline; }
.review-comment { margin: .4rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.review-files { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; align-items: center; }
.review-files img { display: block; width: 6rem; height: 6rem; object-fit: cover; border-radius: 8px; }

/* Language picker in the top bar (shown only when more than English is switched on) */
.topbar .nav-language { margin: 0; }
.topbar .nav-language select { width: auto; padding: .3rem 1.6rem .3rem .5rem; font-size: .9rem; margin: 0; }

/* Lease signing */
.lease-wording { white-space: pre-wrap; line-height: 1.55; max-height: 32rem; overflow-y: auto; padding: .75rem;
    border: 1px solid var(--border, #d9dee5); border-radius: 8px; background: var(--surface); }
.lease-wording-input { width: 100%; max-width: none; font-family: inherit; line-height: 1.5; }
.signature-fields { border: 1px solid var(--border, #d9dee5); border-radius: 8px; padding: .75rem 1rem; margin: 1rem 0; }
.signature-choice label { margin-right: 1.25rem; }
.signature-pad { width: 100%; max-width: 600px; height: auto; aspect-ratio: 10 / 3; touch-action: none;
    background: #fff; border: 1px dashed var(--forest, #2f6b4f); border-radius: 8px; cursor: crosshair; }
.checkbox-line { display: flex; gap: .5rem; align-items: flex-start; }