/* Shared design for every page of the site — the portal and every tool
   behind it load this first (from /shared/site.css, served by the portal),
   then their own stylesheet for whatever only they have. Anything two tools
   would both need belongs here, so the site keeps one look.

   Round 3 — light, editorial, gold-accented. The first two rounds were
   still recognisably "an admin template with a palette swap": a dark
   navy header bar, system-UI type, and a content column whose width
   jumped around from page to page (760px / 1400px / 1800px depending on
   which step you were on). This round keeps the parts that make a
   professional-services site read as expensive rather than templated —
   one geometric typeface (Jost, vendored under vendor/jost/), a single
   warm gold accent used sparingly (rules under headings, eyebrow labels,
   focus rings, the primary button), generous spacing, uppercase
   letter-spaced micro-labels — on an all-light base: white header with a
   thin gold top line, warm off-white page, white panels, charcoal text.
   No dark bands anywhere.

   Every page of every tool shares the same
   .container width: fluid up to 1920px including gutters, so a 1080p (or
   smaller) screen is used edge to edge, and only a very wide monitor gets
   centred margins instead of 3000px-long rows of form fields. */

@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(vendor/jost/jost-latin-ext-wght-normal.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(vendor/jost/jost-latin-wght-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --bg: #f6f4ef;
    --surface: #ffffff;
    --surface-alt: #faf8f4;
    --border: #e9e4da;
    --border-strong: #d7d0c2;
    --text: #23211d;
    --text-soft: #4f4a40;
    --text-muted: #77705f;
    /* --gold is the fill/rule color; --gold-text is the same hue darkened
       enough to pass contrast as small text on white (plain --gold on
       white is only ~2.3:1). */
    --gold: #c5a263;
    --gold-strong: #b38f50;
    --gold-text: #8d6b2f;
    --gold-soft: #f6efe1;
    --gold-ring: rgba(197, 162, 99, 0.3);
    --danger: #a8443a;
    --danger-soft: #f8ebe8;
    --success: #3b7a57;
    --radius: 4px;
    --radius-sm: 2px;
    --shadow-sm: 0 1px 2px rgba(35, 33, 29, 0.04);
    --shadow-panel: 0 1px 2px rgba(35, 33, 29, 0.04), 0 14px 34px -22px rgba(35, 33, 29, 0.22);
    --shadow-md: 0 16px 40px -14px rgba(35, 33, 29, 0.28);
    --font: "Jost", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --container-max: 1920px;
    --gutter: clamp(16px, 3vw, 48px);
}

/* The UA stylesheet's `[hidden] { display: none }` loses to *any* author
   rule that sets display — this bit twice in earlier rounds
   (.modal-overlay, .badge), and now that buttons are inline-flex it would
   bite every hidden button too. One !important here settles it for the
   whole app. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font-family: inherit; }
a {
    color: var(--gold-text);
    text-decoration: none;
    font-weight: 500;
}
a:hover { color: var(--text); }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}


/* --- Site header (rendered by site-header.js) --------------------------------
   The same header on every page of every tool: the portal's mark and name on
   the left, always a link back to the portal; inside a tool, a slash and then
   that tool's own icon and name (a link to the tool's start page). Language,
   user, Settings and Log out on the right. */

.site-header {
    background: var(--surface);
    border-top: 3px solid var(--gold);
    border-bottom: 1px solid var(--border);
}
.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 76px;
}
.site-brand {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-width: 0;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    flex: none;
    color: var(--text);
    font-weight: 500;
}
.brand:hover { color: var(--text); }
.brand-mark {
    width: 34px;
    height: 34px;
    flex: none;
    color: var(--gold);
}
.brand-name {
    padding-left: 0.9rem;
    border-left: 1px solid var(--gold);
    font-size: 1.15rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    transition: color 0.15s ease;
}
/* Inside a tool the portal is one step back, so its name steps back too —
   the tool's own name is what the page is about. */
.site-brand.has-app .brand-name {
    color: var(--text-muted);
    font-size: 1rem;
}
.site-brand .brand:hover .brand-name { color: var(--gold-text); }
.brand-sep {
    flex: none;
    width: 1px;
    height: 28px;
    background: var(--border-strong);
    transform: rotate(18deg);
}
.brand-app {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    color: var(--text);
    font-weight: 500;
}
.brand-app:hover { color: var(--gold-text); }
/* The same gold-tinted square each tool's tile has on the portal's app
   picker, holding the tool's favicon — one icon per tool, everywhere. */
.brand-app-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--gold-soft);
}
.brand-app-icon img { width: 22px; height: 22px; }
.brand-app-name {
    overflow: hidden;
    font-size: 1.15rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Never squeezed: when space runs short the brand side gives way instead
   (see the width steps below), so buttons and links never wrap mid-word. */
.header-actions {
    display: flex;
    flex: none;
    align-items: center;
    gap: 1.25rem;
}
.header-divider {
    width: 1px;
    height: 22px;
    background: var(--border-strong);
}
.header-user {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}
.header-user svg { width: 16px; height: 16px; }
.header-link {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
}
.header-link:hover { color: var(--gold-text); }

/* Narrower windows, before the phone layout: first the portal's name steps
   aside inside a tool (its mark stays, still the link back), then the
   username goes, as it already does on a phone. */
@media (max-width: 1024px) {
    .site-brand.has-app .brand-name { display: none; }
}
@media (max-width: 900px) {
    .header-user, .header-divider { display: none; }
}

/* --- Page head: nav bar (back · context · steps), then title + gold rule --- */

.page-head { padding: 0.6rem 0 2rem; }
/* Back link, then the page context (which house / "Properties" / "Account")
   as a breadcrumb, then the step indicator pushed to the right. On desktop
   this bar and the header stay pinned while scrolling (see the min-width:
   641px block below); the big title underneath scrolls away. */
.page-head-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    min-height: 32px;
    padding-top: 1rem;
}
.page-head-bar .steps { margin-left: auto; }
.page-head-bar .page-context {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.back-link + .page-context {
    padding-left: 1rem;
    border-left: 1px solid var(--border-strong);
}

/* Pinned header + nav bar, desktop and tablet only — on a phone the ~140px
   they'd take is too big a share of the screen, so there they just scroll
   away with the page. Both get fixed heights so everything that has to
   clear them (the receipt page's sticky live preview, scrollIntoView and
   anchor jumps via scroll-padding-top) can use one --sticky-top value
   instead of measuring. */
:root {
    --header-h: 80px;
    --bar-h: 60px;
    --sticky-top: 0px;
}
@media (min-width: 641px) {
    :root { --sticky-top: calc(var(--header-h) + var(--bar-h)); }
    html { scroll-padding-top: calc(var(--sticky-top) + 1rem); }
    .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        height: var(--header-h);
    }
    .page-head-bar {
        position: sticky;
        top: var(--header-h);
        z-index: 40;
        flex-wrap: nowrap;
        height: var(--bar-h);
        /* Full container width (gutters included), so content scrolling
           under it is covered edge to edge, not just the middle column. */
        margin: 0 calc(-1 * var(--gutter));
        padding: 0 var(--gutter);
        background: var(--bg);
        transition: box-shadow 0.2s ease;
    }
    .page-head-bar .page-context { flex: 1 1 auto; }
    /* Set by sticky-bar.js while the page is scrolled at all. */
    .page-head-bar.is-stuck {
        box-shadow: 0 1px 0 var(--border), 0 12px 20px -16px rgba(35, 33, 29, 0.35);
    }
}
.eyebrow {
    margin: 0 0 0.6rem 0;
    color: var(--gold-text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.eyebrow:empty { display: none; }
.page-title {
    margin: 0;
    font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.6rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.page-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin-top: 1.1rem;
    background: var(--gold);
}
.page-lede {
    margin: 1rem 0 0 0;
    max-width: 70ch;
    color: var(--text-muted);
}
.back-link {
    display: flex;
    flex: none;
    width: fit-content;
    min-height: 0;
    margin: 0;
    white-space: nowrap;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.back-link:hover { background: none; color: var(--gold-text); }

/* Each .page section carries its own static copy with the right step
   marked. Steps you can move to from that page are buttons (wired up in
   app.js's initStepLinks, through the same guarded navigation as the Back
   links); the current step and unreachable ones are plain spans. */
.steps {
    display: flex;
    align-items: center;
    flex: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
.steps li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.steps li + li::before {
    content: "";
    width: clamp(24px, 3vw, 56px);
    height: 1px;
    margin: 0 0.9rem;
    background: var(--border-strong);
}
.steps li.is-done + li::before { background: var(--gold); }
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.8rem;
    letter-spacing: 0;
}
.step-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    /* A slightly bigger hit area than the visible circle + label, without
       shifting the layout (the negative margin cancels the padding). */
    min-height: 0;
    margin: -0.3rem -0.4rem;
    padding: 0.3rem 0.4rem;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}
button.step-link:hover { background: none; color: var(--gold-text); }
button.step-link:hover .step-num { border-color: var(--gold-strong); color: var(--gold-text); }
.steps .is-done, .steps .is-current { color: var(--text); }
.steps .is-done .step-num { border-color: var(--gold); color: var(--gold-text); }
.steps .is-current .step-num { border-color: var(--gold); background: var(--gold); color: var(--text); }

/* --- Panels & headings ------------------------------------------------------ */

.page-body { padding-bottom: 3rem; }
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem 2.25rem;
    box-shadow: var(--shadow-panel);
}
/* Heading + short description on the left, the actual fields on the
   right — the usual settings-page layout, and what keeps a full-width
   panel from turning into a handful of 900px-wide text boxes. */
.panel-split {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr);
    gap: 1.5rem 3.5rem;
}
.panel-split-intro .sub { max-width: 42ch; }

h1, h2, h3, h4 { font-weight: 500; color: var(--text); }
h2 {
    margin: 0 0 1.25rem 0;
    font-size: 1.3rem;
    line-height: 1.25;
    letter-spacing: -0.005em;
}
h2::after {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    margin-top: 0.7rem;
    background: var(--gold);
}
h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-text);
}
h4 { margin: 1rem 0 0.5rem 0; font-size: 0.95rem; }
.sub {
    margin: 0 0 0.75rem 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}
/* Hairline-separated sections inside one long panel (the receipt form),
   instead of each part floating in its own box. */
.form-section {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
}

/* --- Form controls ---------------------------------------------------------- */

label {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-soft);
}
form > label + label { margin-top: 1.1rem; }
.field-hint {
    margin-top: -0.1rem;
    font-size: 0.76rem;
    font-weight: 400;
    color: var(--text-muted);
}
input, select, textarea {
    min-height: 44px;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: #a8a193; }
input:hover, select:hover, textarea:hover { border-color: #bfb6a5; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-ring);
}
select {
    appearance: none;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2377705f' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 11px;
    cursor: pointer;
}
input[type="checkbox"] {
    min-height: 0;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    margin: 0;
    accent-color: var(--gold-strong);
    cursor: pointer;
}
textarea {
    width: 100%;
    resize: vertical;
    line-height: 1.5;
}

.password-field {
    position: relative;
    display: flex;
}
.password-field input {
    width: 100%;
    padding-right: 2.6rem;
}
.password-toggle-btn {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.6rem;
    min-height: 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-muted);
}
.password-toggle-btn:hover { background: none; color: var(--gold-text); }

/* --- Buttons -------------------------------------------------------------- */

/* Gold fill with charcoal text is the one primary style (white on this gold
   would fail contrast). Every other variant below overrides background,
   border and color explicitly rather than relying on anything from here. */
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.8rem 1.5rem;
    background: var(--gold);
    color: var(--text);
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
button:hover { background: var(--gold-strong); border-color: var(--gold-strong); }
button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--gold-ring);
}
/* pointer-events: none (rather than a :not(:disabled) guard on every
   variant's :hover) is what keeps a disabled button from still showing its
   hover color. */
button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
/* An outline next to a solid fill reads as "secondary"; two solid fills
   side by side read as "which one matters?". */
button.secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}
button.secondary:hover { background: var(--surface-alt); border-color: var(--text); }
.small-btn, button.small-btn {
    min-height: 34px;
    padding: 0.45rem 0.85rem;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
}
/* Compact buttons inside table cells. :where() keeps this at zero
   specificity so .icon-btn and friends can still set their own sizing. */
:where(td) button {
    min-height: 32px;
    padding: 0.4rem 0.75rem;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
}
.remove-btn {
    background: transparent;
    border-color: transparent;
    color: var(--danger);
}
.remove-btn:hover {
    background: var(--danger-soft);
    border-color: var(--danger-soft);
    color: var(--danger);
}
.icon-btn {
    width: 32px;
    min-height: 32px;
    padding: 0;
    font-size: 1.15rem;
    font-weight: 400;
    letter-spacing: 0;
}
.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.error, .success {
    margin: 0.75rem 0 0 0;
    font-size: 0.9rem;
}
.error { color: var(--danger); }
.success { color: var(--success); }
.error:empty, .success:empty { display: none; }

/* --- Dropdowns: the header's UI language picker ----------------------------- */

.lang-dropdown { position: relative; }
.lang-dropdown-btn {
    min-height: 36px;
    padding: 0.4rem 0.7rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.lang-dropdown-btn:hover { background: var(--surface-alt); border-color: var(--border-strong); }
.lang-current-flag, .lang-dropdown-menu .fi {
    width: 1.2em;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.lang-caret { font-size: 0.7em; color: var(--text-muted); }

.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 20;
    min-width: 150px;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.lang-dropdown-menu li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    white-space: nowrap;
    cursor: pointer;
}
.lang-dropdown-menu li:hover { background: var(--surface-alt); }
.lang-dropdown-menu li.active { background: var(--gold-soft); font-weight: 600; }

/* --- Form grid, tables, badges, info tips ------------------------------------ */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.1rem 1.25rem;
}

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    padding: 0.75rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
    font-size: 0.92rem;
}
th {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    border-bottom-color: var(--border-strong);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
/* A quiet hover highlight on data rows instead of zebra striping. */
tbody tr:hover { background: var(--surface-alt); }
td input[type="text"], td input[type="number"] { width: 100%; }
td.center { text-align: center; }

/* Clickable column headers (History tables) — the arrow follows aria-sort
   so it can't drift from the actual sort state; unsorted columns get a
   faint placeholder arrow so it's discoverable they're clickable at all. */
.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.sortable-th:hover { color: var(--text); }
.sortable-th::after {
    content: "⇅";
    margin-left: 0.35rem;
    font-size: 0.85em;
    color: var(--border-strong);
}
.sortable-th[aria-sort="ascending"]::after { content: "▲"; color: var(--gold-text); }
.sortable-th[aria-sort="descending"]::after { content: "▼"; color: var(--gold-text); }

.badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.75rem;
    padding: 0.2rem 0.65rem;
    vertical-align: middle;
    background: var(--gold-soft);
    border: 1px solid var(--gold);
    border-radius: 999px;
    color: var(--gold-text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* Small "i" icon that expands its explanation on click/tap — works the same
   on desktop and mobile since <details> needs no JS or hover. */
.info-tip {
    display: inline-block;
    position: relative;
    margin-left: 0.3rem;
    vertical-align: middle;
}
.info-tip summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold-text);
    font-family: Georgia, serif;
    font-size: 0.7rem;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    list-style: none;
}
.info-tip summary::-webkit-details-marker { display: none; }
/* position: fixed (not absolute) so the popup escapes any scrollable
   ancestor's clipping (the line-items table's horizontal-scroll box) — its
   top/left/transform are computed and clamped to the viewport in app.js on
   open. */
.info-tip p {
    position: fixed;
    z-index: 30;
    width: max-content;
    max-width: min(280px, calc(100vw - 2rem));
    margin: 0;
    padding: 0.7rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    text-transform: none;
    white-space: normal;
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Only the two history tables ever get a fixed height set on this
       wrapper (app.js's lockFilterableHeight()), turning a search-filtered
       history into an internally scrolling box instead of one that resizes
       the page around it. */
    overflow-y: auto;
}

/* --- Modals ---------------------------------------------------------------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(35, 33, 29, 0.45);
    backdrop-filter: blur(3px);
}
/* Scoped to :not([hidden]) for the same reason as the global [hidden] rule
   at the top — kept as a second line of defence for the one element whose
   visibility bug actually blocked the whole page once. */
.modal-overlay:not([hidden]) { display: flex; }
.modal-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: min(460px, 100%);
    padding: 2.25rem 2.5rem 2rem;
    background: var(--surface);
    border-top: 3px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px -20px rgba(35, 33, 29, 0.45);
    animation: modal-pop 0.18s ease-out;
}
.modal-box p {
    margin: 0;
    color: var(--text);
    line-height: 1.55;
    text-align: center;
}
.modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}
/* A dialog holding a small form (renaming a renter) rather than a single
   centred message — left-aligned fields, actions on the right. */
.modal-form {
    align-items: stretch;
    gap: 1rem;
    width: min(440px, 100%);
}
.modal-form h2 { margin: 0; }
.modal-form p { text-align: left; }
.modal-form .sub { margin-top: -0.25rem; color: var(--text-muted); }
.modal-form .error { margin: 0; color: var(--danger); }
.modal-form .modal-actions { justify-content: flex-end; }
@keyframes modal-pop {
    from { opacity: 0; transform: scale(0.95) translateY(4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.spinner {
    width: 36px;
    height: 36px;
    border: 2px solid var(--border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- Smaller screens --------------------------------------------------------- */

@media (max-width: 900px) {
    /* Below this only the current step keeps its label, leaving the nav bar
       room for the house name instead of cutting it down to a few letters.
       The others are hidden visually but not with display: none, so the
       step buttons keep an accessible name instead of reading as "1"/"2". */
    .steps li:not(.is-current) .step-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .panel-split { grid-template-columns: 1fr; }
}

/* Phones: single-column fields, full-width actions, roomier tap targets. */
@media (max-width: 640px) {
    .site-header-inner {
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
        min-height: 0;
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }
    .brand-mark { width: 30px; height: 30px; }
    .brand-name { font-size: 1rem; }
    /* Inside a tool only the portal's mark stays (still the link back) —
       the tool's name gets the room. */
    .site-brand { gap: 0.8rem; }
    .site-brand.has-app .brand-name { display: none; }
    .brand-app-icon { width: 30px; height: 30px; }
    .brand-app-icon img { width: 18px; height: 18px; }
    .brand-app-name { font-size: 1rem; }
    .header-user, .header-divider { display: none; }
    .header-actions { flex: 0 1 auto; gap: 0.9rem; flex-wrap: wrap; }

    .page-head { padding: 0.9rem 0 1.25rem; }
    /* Tighter gap and connectors so "← Back" and the steps still share one
       line at 360–375px instead of the steps wrapping onto their own. */
    .page-head-bar { column-gap: 0.75rem; }
    /* Next to a back link there's no room left on that line for the house
       name as well — it takes its own full-width line underneath instead,
       and wraps rather than being cut off with an ellipsis. */
    .back-link ~ .page-context {
        order: 3;
        flex-basis: 100%;
        padding-left: 0;
        border-left: none;
        white-space: normal;
    }
    .steps li + li::before { width: 16px; margin: 0 0.45rem; }

    .panel { padding: 1.4rem 1.15rem 1.5rem; }
    .grid { grid-template-columns: 1fr; }
    .actions {
        flex-direction: column;
        align-items: stretch;
    }
    .actions button { width: 100%; }
}