/* Property Desk brandbook v1, direction A. */
@font-face {
  font-family: Manrope;
  src: url("manrope.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  font-family: Manrope, sans-serif;
  --brand: #0c0552;
  --accent: #4f46e5;
  --accent-text: #4338ca;
  --accent-soft: #e9e8fd;
  --bg: #f5f5fa;
  --surface: #fff;
  --sunken: #ececf5;
  --border: #d7d6e8;
  --ink: #0e0b2e;
  --muted: #4d4a75;
  --subtle: #625f8a;
  --received: #006b85;
  --received-bg: #dcf1f6;
  --expected: #8a5a00;
  --expected-bg: #fdf1d6;
  --overdue: #b23a0a;
  --overdue-bg: #fbe7dd;
  --loss: #ff9466;
  --card-shadow: 0 1px 2px #0e0b2e0f, 0 4px 16px #0e0b2e0f;
  --chart-shadow: 0 16px 40px -8px #0c055247;
}
.money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.money small { color: inherit; font: inherit; }

@media screen {
  :root {
    background: var(--bg); color: var(--ink); line-height: 1.47;
    --line: var(--border); --green: var(--accent-text); --focus: var(--accent); --rail: var(--brand);
  }
  body { font-size: 1.0625rem; }
  :is(h1, h2, h3, h4, b, strong, small, p, button, input, textarea, select, summary,
    .brand, .footer, .eyebrow, .brand-mark, .property-capital, .property-name) { font-family: Manrope, sans-serif; }
  .topbar h1, .auth-card h1 { font: 700 1.875rem/1.2 Manrope, sans-serif; letter-spacing: 0; }
  h2, .panel-heading h2, .section-heading h2 { font: 700 1.375rem/1.27 Manrope, sans-serif; letter-spacing: 0; }
  .eyebrow, .panel-heading .eyebrow, .page-tools .eyebrow, .modal-head .eyebrow {
    font: 600 .875rem/1.3 Manrope, sans-serif; letter-spacing: .04em; color: var(--muted);
  }
  .subtle, .muted, .fine-print, .notice p, .auth-hint, .source-row small, .bill-main small,
  .rental-contract-head p, .waterfall > div, .waterfall b, .source-meta, .connection-copy p,
  .connection-copy small, .page-tools p, td, td small { font-size: 1rem; color: var(--subtle); }
  .page-content { max-width: 1200px; padding: 24px 24px 40px; }
  .app-shell {
    --rail-width: 264px;
    grid-template-columns: var(--rail-width) minmax(0, 1fr);
    background: linear-gradient(to right, var(--brand) 0 var(--rail-width), var(--bg) var(--rail-width));
  }
  .skip-link:not(:focus) { clip-path: inset(50%); }
  .sidebar { position: sticky; top: 0; height: 100dvh; background: var(--brand); border: 0; }
  .brand { color: var(--surface); }
  .brand-mark { background: var(--accent-soft); color: var(--brand); border-radius: 12px; }
  .brand small, .side-label, .local-chip small, .nav-icon { color: inherit; }
  .local-chip { border-color: #ffffff38; }
  .nav-item { color: var(--surface); border-radius: 12px; }
  .nav-item:hover { background: #ffffff1a; }
  .nav-item.active { color: var(--accent-text); background: var(--accent-soft); box-shadow: none; }
  .nav-count { background: var(--expected-bg); color: var(--expected); }
  .sidebar :focus-visible { outline-color: #b7b2ff; }
  .nav-icon svg { display: block; width: 24px; height: 24px; }
  .tablet-nav-label { display: none; }
  .logout-control { margin-top: 8px; }
  .sidebar .logout-control { border-top: 1px solid #ffffff38; border-radius: 0 0 12px 12px; }
  .header-menu { display: none; }
  .topbar {
    height: auto; min-height: 112px; gap: 16px; padding: 20px max(24px, calc((100% - 1152px) / 2));
    color: var(--surface); background: var(--brand); border: 0; border-radius: 0 0 24px 24px;
  }
  .topbar :focus-visible, .topbar #page-title:focus, .brand-chart :focus-visible { outline-color: #b7b2ff; }
  .topbar-title { display: grid; gap: 4px; }
  .topbar-title h1 { margin: 0; }
  .topbar .top-actions { margin-inline-start: auto; }
  .topbar .eyebrow { color: #e9e8fd; text-transform: none; letter-spacing: 0; }
  .top-actions .button.secondary { border-color: #ffffff38; color: var(--surface); background: #ffffff1a; }
  .top-actions .button.secondary:hover { background: #ffffff29; }
  .refresh-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9375rem; }
  .refresh-control .refresh-icon { width: 48px; min-height: 48px; padding: 0; }
  .refresh-icon svg { width: 20px; height: 20px; }
  .period-button {
    display: flex; align-items: center; gap: 8px; min-height: 48px;
    padding: 8px 16px; border: 0; border-radius: 999px; background: var(--accent);
    color: var(--surface); text-align: left; font-size: 1rem; font-weight: 650;
  }
  .period-button svg { flex: 0 0 20px; }
  .period-button > span:last-child { margin-inline-start: auto; white-space: nowrap; }
  .period-display { min-width: 0; }
  .period-display strong, .period-display small { display: block; color: inherit; }
  .period-display small { font-size: .8125rem; font-weight: 500; }
  .portal-menu { position: relative; margin: 12px 20px 0; }
  .portal-menu .nav-item { color: var(--ink); }
  .portal-menu .nav-item:hover { background: var(--sunken); }
  .panel, .property-card, .rental-contract, .connection-card, .report-card {
    border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  }
  .panel { padding: 20px; box-shadow: var(--card-shadow); }
  .panel :is(h2, h3) { margin-top: 0; }
  .panel-heading, .section-heading, .page-tools { align-items: center; gap: 12px 16px; }
  .panel-heading > div:first-child, .page-tools > div:first-child { display: grid; gap: 4px; min-width: 0; }
  .panel-heading h2, .section-heading h2, .page-tools p { margin: 0; }
  .panel-heading > :is(.button, .text-button, .status), .page-tools > .button { flex-shrink: 0; }
  .page-tools > .button { max-width: 100%; }
  .status { min-height: 28px; padding: 4px 10px; line-height: 1.25; }
  .button, .text-button { min-height: 52px; padding: 10px 16px; border-radius: 999px; font-size: 1.0625rem; font-weight: 600; }
  .button.primary { border-color: var(--accent); background: var(--accent); color: white; }
  .button.primary:hover { background: var(--accent-text); }
  .button.secondary { border-color: var(--border); color: var(--brand); background: white; }
  .button.secondary:hover { background: var(--accent-soft); }
  .text-button { color: var(--accent-text); }
  .text-button, .text-button:hover { text-decoration: none; }
  .text-button:hover { border-radius: 999px; background: var(--accent-soft); }
  button:active:not(:disabled) { transform: scale(.97); transition: transform 120ms; }
  .button:disabled { opacity: .45; }
  .field-label :is(input, select, textarea), .search-box, .lease-form :is(input, select), .rent-schedule-form input,
  .rent-allocation-form :is(input, select) { border: 1px solid var(--border); border-radius: 16px; background: var(--sunken); }
  .search-box input { background: transparent; color: var(--ink); }
  .field-label :is(input, select, textarea), .search-box input { min-height: 52px; font-size: 1.0625rem; }
  .status { border-radius: 999px; font-size: .9375rem; font-weight: 650; }
  .status.confirmed, .status.paid, .status.final { background: var(--received-bg); color: var(--received); }
  .status.open, .status.partial, .status.review { background: var(--expected-bg); color: var(--expected); }
  .status.disputed, .status.rejected { background: var(--overdue-bg); color: var(--overdue); }
  .status.neutral, .status.draft { background: var(--accent-soft); color: var(--accent-text); }
  .notice.notice-amber { background: var(--expected-bg); border-color: var(--border); color: var(--expected); }
  .notice.notice-blue { background: var(--accent-soft); border-color: var(--border); color: var(--accent-text); }
  .notice p { color: inherit; }
  .auth-screen, .brand-chart {
    background: radial-gradient(ellipse at 100% 0%, #4f46e5d9, transparent 50%),
      radial-gradient(ellipse at 0% 80%, #8b84ff73, transparent 45%),
      radial-gradient(ellipse at 100% 100%, #4cc8e047, transparent 45%), var(--brand);
  }
  .auth-card { background: white; border-radius: 24px; box-shadow: var(--chart-shadow); }
  .auth-error, #toast.bad { color: var(--overdue); background: var(--overdue-bg); }
  #toast { background: var(--brand); z-index: 15; }
  .boot {
    min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 10px;
    padding: 24px; background: var(--brand); color: white; text-align: center;
  }
  .boot .brand-mark { width: 64px; height: 64px; }
  .boot span { display: block; margin: 0; color: var(--accent-soft); font: 500 1rem/1.4 Manrope, sans-serif; }
  th { background: var(--sunken); color: var(--muted); }
  tbody tr:nth-child(even) { background: var(--bg); }
  .report-paper .money small, .amount-cell .money small { display: inline; }

  .brand-overview { display: grid; gap: 16px; }
  .brand-overview > *, .brand-overview .section-heading { min-width: 0; margin: 0; }
  .reconciliation-notice { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 16px 20px; }
  .reconciliation-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .reconciliation-copy .status { border: 1px solid #8a5a0060; }
  .reconciliation-copy p { margin: 0; font-weight: 650; line-height: 1.4; }
  .reconciliation-notice .button { justify-self: start; color: var(--expected); border-color: #8a5a0060; }
  .latest-payment { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .latest-payment h2, .brand-summary h2 { margin: 0; }
  .latest-payment-value { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .latest-payment-value > strong, .brand-chart-total { font-size: 2.25rem; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
  .latest-payment-value .money small { font-size: .65em; font-weight: 600; }
  .latest-payment p { margin: 0; color: var(--subtle); line-height: 1.45; }
  .latest-payment .button { margin-top: 4px; }
  .brand-summary .subtle { margin: 12px 0 0; line-height: 1.4; }
  .latest-payment .eyebrow, .brand-summary .eyebrow { text-transform: uppercase; }
  .summary-row {
    display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 8px 12px;
    width: 100%; min-height: 56px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--border);
    color: var(--ink); background: transparent; text-align: left; font-size: 1.0625rem;
  }
  .summary-row > span { display: flex; align-items: center; line-height: 1.35; }
  .summary-row strong { justify-self: end; text-align: end; }
  .summary-dot { flex: 0 0 12px; }
  .summary-row:hover { color: var(--accent-text); }
  .summary-dot { display: inline-block; width: 12px; height: 12px; margin-inline-end: 8px; border-radius: 3px; background: var(--accent); }
  .summary-dot.expenses { background: var(--overdue); }
  .summary-dot.owner { background: var(--muted); }
  .portfolio-distribution summary, .tasks-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; }
  .portfolio-distribution summary { list-style: none; }
  .portfolio-distribution summary::-webkit-details-marker { display: none; }
  .portfolio-distribution[open] summary svg { transform: rotate(90deg); }
  .tasks-card { width: 100%; min-height: 52px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
  .tasks-card small, .property-contract-end { display: block; margin-top: 4px; line-height: 1.4; color: var(--subtle); font-size: 1rem; }
  .tasks-card svg, .brand-property-row > svg { flex-shrink: 0; width: 24px; height: 24px; color: var(--accent-text); }

  .brand-chart { min-width: 0; padding: clamp(16px, 3vw, 24px); border-radius: 24px; color: white; box-shadow: var(--chart-shadow); }
  .brand-chart h2, .brand-chart-caption, .brand-chart-unit { color: #e9e8fd; }
  .brand-chart h2 { margin: 0 0 8px; text-transform: uppercase; }
  .brand-chart-caption { margin: 8px 0 14px; font-size: 1rem; }
  .chart-toggle {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
    border: 1px solid #ffffff38; border-radius: 999px; background: #ffffff1a;
  }
  .chart-toggle button { min-height: 48px; border: 0; border-radius: 999px; background: transparent; color: white; font-weight: 600; font-size: 1rem; }
  .chart-toggle button[aria-pressed="true"] { color: var(--brand); background: white; }
  .brand-chart-layout { display: grid; gap: 16px; }
  .brand-chart-layout > * { min-width: 0; }
  .brand-chart-unit { margin: 18px 0 12px; font-size: .875rem; }
  .brand-plot { --plot-height: 184px; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px; }
  .brand-axis { position: relative; height: var(--plot-height); margin-top: 24px; color: #e9e8fd; }
  .brand-axis span { position: absolute; inset-inline-end: 2px; transform: translateY(-50%); font-size: .8125rem; font-variant-numeric: tabular-nums; }
  .brand-plot-scroll { min-width: 0; padding: 24px 0 40px; }
  .brand-plot-area { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); height: var(--plot-height); }
  .brand-gridline { position: absolute; inset-inline: 0; height: 1px; background: #ffffff24; pointer-events: none; }
  .brand-gridline.zero { height: 2px; background: #ffffff8c; }
  .brand-bar { position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: #e9e8fd; }
  .brand-bar:focus-visible { outline-offset: -2px; }
  .brand-bar-shape {
    position: absolute; inset-inline: 24%; top: var(--top); height: var(--height); min-height: 3px;
    border: 1px solid #ffffff38; border-radius: 999px 999px 0 0; background: #ffffff29;
  }
  .brand-bar[aria-pressed="true"] .brand-bar-shape { background: linear-gradient(#b7b2ff, #4f46e5); box-shadow: 0 0 18px #8b84ff8c; }
  .brand-bar.negative .brand-bar-shape { background: var(--loss); border-color: transparent; border-radius: 0 0 999px 999px; }
  .brand-bar .brand-bar-shape.empty { inset-inline: auto; left: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border: 2px solid #e9e8fd; border-radius: 50%; background: var(--brand); }
  .brand-bar-month { position: absolute; inset: calc(100% + 12px) 0 auto; text-align: center; font-size: .875rem; }
  .brand-bar[aria-pressed="true"] .brand-bar-month { color: white; font-weight: 800; }
  .brand-bar[aria-pressed="true"] .brand-bar-month::after { display: block; width: 6px; height: 6px; margin: 3px auto 0; border-radius: 50%; background: #b7b2ff; content: ""; }
  .brand-bar-value { display: none; position: absolute; z-index: 1; left: 50%; top: var(--label-y); transform: translate(-50%, calc(-100% - 4px)); white-space: nowrap; font-size: .8125rem; font-weight: 700; }
  .brand-bar[aria-pressed="true"] .brand-bar-value { display: block; padding: 3px 7px; border: 1px solid #ffffff38; border-radius: 999px; color: white; background: var(--brand); }
  .brand-bar.negative .brand-bar-value, .brand-bar.negative[aria-pressed="true"] .brand-bar-value { color: var(--loss); transform: translate(-50%, 3px); }
  .brand-bar.negative .brand-bar-value { display: block; }
  .brand-chart-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .brand-chart-legend span { padding: 4px 8px; border: 1px solid #ffffff38; border-radius: 999px; font-size: .875rem; background: #ffffff1a; }
  .brand-chart-legend span:nth-child(1) { color: #e9e8fd; }
  .brand-chart-legend span:nth-child(2), .brand-chart .negative { color: var(--loss); }
  .brand-desktop-months { display: none; }
  .brand-chart-list { display: grid; gap: 4px; margin-top: 16px; }
  .chart-month-row {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 8px;
    min-height: 72px; padding: 10px 12px; border: 1px solid transparent; border-bottom-color: #ffffff29;
    background: transparent; color: white; text-align: left; font-size: 1rem;
  }
  .chart-month-row[aria-pressed="true"] { background: #ffffff29; border: 1px solid #ffffff38; border-radius: 16px; }
  .chart-month-row small:not(.money small) { display: block; color: #e9e8fd; font-size: 1rem; }
  .chart-month-row strong { margin-inline-start: auto; }
  .brand-chart .chart-cta { margin-top: 16px; max-width: 100%; background: white; color: var(--brand); border: 0; }
  .brand-chart .chart-cta:hover { background: var(--accent-soft); }

  .brand-property-list { padding-block: 6px; }
  .brand-property-row {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    width: 100%; min-height: 80px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--border);
    color: var(--ink); background: transparent; text-align: left;
  }
  .brand-property-row:last-child { border-bottom: 0; }
  .brand-property-row:hover { color: var(--accent-text); }
  .brand-property-row strong { display: block; font-size: 1.125rem; line-height: 1.33; margin-bottom: 4px; }
  .property-thumb { display: grid; place-items: center; width: 64px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--sunken); color: var(--muted); }
  .property-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .rental-property { background: transparent; border: 0; overflow: visible; }
  .rental-property-head { padding: 8px 0 16px; background: transparent; border: 0; color: var(--ink); }
  .rental-property-head .eyebrow { color: var(--muted); }
  .rental-property-head h2 { margin: 4px 0 8px; font: 700 1.625rem/1.23 Manrope, sans-serif; letter-spacing: 0; }
  .property-back { padding-inline: 0; }
  .property-photo-section { margin-bottom: 20px; }
  .property-cover { position: relative; overflow: hidden; border-radius: 16px; background: var(--sunken); }
  .property-cover > img { display: block; width: 100%; max-height: 460px; object-fit: cover; aspect-ratio: 4 / 3; }
  .property-cover > div { position: absolute; inset: auto 8px 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  .property-cover > div > span { padding: 5px 10px; background: var(--brand); color: white; border-radius: 999px; font-size: .875rem; }
  .rental-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .rental-gallery button { padding: 0; min-height: 48px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--sunken); }
  .rental-gallery button:first-child { border: 2px solid var(--accent); }
  .rental-columns { gap: 16px; align-items: start; }
  .rental-aside, .rental-block { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--card-shadow); }
  .rental-aside .rental-block { border: 0; box-shadow: none; }
  .rental-contract { padding: 16px; }
  .rental-contract-head h4, .rental-block h3 { color: var(--ink); font-family: Manrope, sans-serif; }
  .rental-documents a {
    min-height: 72px; padding: 10px; background: white; border: 1px solid var(--border); border-radius: 16px;
    color: var(--ink); text-decoration: none;
  }
  .rental-documents a:hover { background: var(--accent-soft); }
  .rental-documents small { display: block; font-size: 1rem; color: var(--subtle); }
  .rental-doc-format { display: grid; place-items: center; width: 40px; height: 40px; background: var(--accent-soft); color: var(--accent-text); border-radius: 12px; }
  .rental-doc-format svg { width: 20px; height: 20px; }
  .document-open { color: var(--accent-text); }
  .rental-receipts li { min-height: 72px; padding: 8px; align-items: center; }
  .rental-receipts li.latest { background: var(--accent-soft); border-radius: 12px; }
  .rental-receipts strong { display: block; }
  .photo-viewer { width: min(900px, 94vw); max-height: 90dvh; padding: 16px; overflow: auto; }
  .photo-viewer h2 { margin: 0; }
  .viewer-image { display: block; width: 100%; max-height: 66dvh; object-fit: contain; background: var(--sunken); border-radius: 16px; }
  .viewer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
  .period-error { color: var(--overdue); }
}

@media screen and (min-width: 1280px) {
  .brand-overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
  .brand-overview > :not(.latest-payment, .brand-summary) { grid-column: 1 / -1; }
  .latest-payment .button { align-self: flex-start; }
  .brand-chart-layout { grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); }
  .brand-desktop-months { position: relative; display: block; max-height: 320px; overflow: auto; }
  .chart-toggle { max-width: 320px; }
  .brand-bar-value { display: block; }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .app-shell { --rail-width: 120px; }
  .sidebar { padding-inline: 8px; overflow-y: auto; }
  .sidebar .nav-group { grid-template-columns: minmax(0, 1fr); }
  .sidebar .side-bottom { display: block; }
  .sidebar .side-label, .sidebar .brand small { display: none; }
  .sidebar .brand, .sidebar .nav-item { flex-direction: column; gap: 5px; text-align: center; padding-inline: 4px; }
  .sidebar .brand { font-size: .8125rem; }
  .sidebar .nav-item { position: relative; font-size: .8125rem; }
  .sidebar .full-nav-label { display: none; }
  .sidebar .tablet-nav-label { display: inline; }
  .sidebar .nav-count { position: absolute; top: 4px; right: 4px; }
  .sidebar .backup-link { justify-content: center; text-align: center; font-size: .8125rem; }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .topbar .period-button { grid-column: 1 / -1; justify-self: start; }
}

@media screen and (max-width: 767px), screen and (max-width: 960px) and (max-height: 500px) and (pointer: coarse) {
  html { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .app-shell { display: block; background: var(--bg); }
  .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .sidebar {
    position: fixed; z-index: 5; inset: auto 0 0; width: 100%; height: auto;
    padding: 8px max(4px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); background: white;
    border-top: 1px solid var(--border); overflow: visible;
  }
  .sidebar .brand, .sidebar .side-label, .sidebar .side-bottom, #nav-secondary { display: none; }
  .sidebar nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0; gap: 2px; }
  .sidebar .nav-group { display: contents; }
  .sidebar :focus-visible { outline-color: var(--accent); }
  .sidebar :is(.nav-item, .nav-more) {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 0; min-height: 56px; height: auto; padding: 4px 0; border: 0; border-radius: 12px;
    color: var(--brand); background: white; text-align: center; font-size: .8125rem; line-height: 1.1;
  }
  .sidebar :is(.nav-item, .nav-more).active { color: var(--accent-text); background: var(--accent-soft); }
  .sidebar .nav-more::after { content: none; }
  .topbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
    padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 24px max(20px, env(safe-area-inset-left));
  }
  .topbar-title { min-width: 0; }
  .reconciliation-notice { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .reconciliation-copy { align-items: flex-start; flex-direction: column; }
  .brand-overview .panel, .reconciliation-notice { padding: 16px; }
  .latest-payment .button, .brand-chart .chart-cta { width: 100%; }
  .page-tools { align-items: flex-start; flex-wrap: wrap; }
  .topbar .top-actions { display: none; }
  .header-menu {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 48px; padding: 6px 10px;
    border: 1px solid #ffffff38; border-radius: 999px; background: #ffffff1a; color: white; font-size: .9375rem;
  }
  .header-menu svg { width: 20px; height: 20px; }
  .period-button { grid-column: 1 / -1; min-width: 0; font-size: .9375rem; }
  .brand-plot { grid-template-columns: 32px minmax(0, 1fr); }
  .brand-plot-area { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .brand-bar[data-mobile-visible="false"] { display: none; }
  .page-content { padding: 20px max(20px, env(safe-area-inset-right)) 20px max(20px, env(safe-area-inset-left)); }
  .rental-columns { grid-template-columns: minmax(0, 1fr); }
  .rental-documents a { grid-template-columns: auto minmax(0, 1fr); }
  .document-open { grid-column: 2; }
  #toast { bottom: calc(82px + env(safe-area-inset-bottom)); }
  .period-sheet { width: min(100vw - 20px, 550px); }
}
@media screen and (max-width: 360px) {
  .topbar, .page-content { padding-inline: 16px; }
  .summary-row { font-size: 1rem; column-gap: 8px; }
  .summary-dot { width: 8px; height: 8px; flex-basis: 8px; }
  .panel { padding: 16px; }
  .latest-payment-value > strong, .brand-chart-total { font-size: 2rem; }
  .period-button { padding-inline: 10px; gap: 5px; }
  .period-button > span:last-child { font-size: .875rem; }
  .sidebar :is(.nav-item, .nav-more) { font-size: .75rem; }
}
@media screen and (min-width: 430px) and (max-width: 767px) {
  .topbar, .page-content { padding-inline: 24px; }
}

@media screen and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .boot .brand-mark, .auth-card, .page-enter {
    animation: tpm-enter 240ms cubic-bezier(.2, .7, .25, 1) both;
  }
  #modal[open] {
    animation: tpm-enter 220ms cubic-bezier(.2, .7, .25, 1) both;
  }
  #modal[open]::backdrop {
    animation: tpm-backdrop 180ms ease-out both;
  }
}
@keyframes tpm-enter {
  from { opacity: .55; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes tpm-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled) { transform: none; }
}

@media print {
  body, .report-paper :is(h2, h3, b, small, td) { font-family: Manrope, sans-serif; }
  .portal-menu { display: none !important; }
}

/* Common spacing and alignment for the operational screens. */
@media screen {
  :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; }
  :is(.page-content, .portal-menu) :where(p, small, label, td, .status) { line-height: 1.45; }
  .page-content { display: flex; flex-direction: column; gap: var(--space-6); }
  .page-content > :is(.panel, .page-tools, .notice, .report-toolbar), .page-content > form > .panel { margin: 0; }
  .page-content > .panel > :where(p, .fine-print) { margin: var(--space-3) 0 0; }
  .page-content :is(h2, h3, h4) { text-wrap: pretty; }
  .page-content .panel-heading { align-items: start; }
  .page-content .panel-heading > :is(.status, button) { align-self: center; }
  .page-tools > div { flex: 1 1 20rem; }
  .page-tools p { max-width: 60ch; }
  .form-actions { flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
  .page-content :is(.settings-grid, .lease-form, .form-two) { gap: var(--space-4); align-items: start; }
  .page-content :is(.settings-grid, .lease-form, .form-two) > label { margin: 0; min-width: 0; }
  .page-content :is(input, select, textarea) { min-width: 0; max-width: 100%; }
  .page-content .settings-grid { margin-top: var(--space-4); }
  .page-content .settings-grid > .form-actions { align-self: end; margin: 0; }
  .page-content .field-label { line-height: 1.35; }
  .page-content .field-label small { font-size: .875rem; color: var(--subtle); }
  .page-content .backup-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-4); margin-block: var(--space-4); }
  .backup-form .field-label { margin: 0; }
  .backup-link { width: 100%; border: 0; background: transparent; text-align: left; }
  .backup-link:hover { background: #ffffff1a; }
  .overview-properties, .overview-notices { display: grid; gap: var(--space-3); }
  .overview-notices > .notice { margin: 0; }
  .notice:has(> :is(.button, .text-button)) { align-items: center; }
  .notice > :is(.button, .text-button) { flex-shrink: 0; }
  .connection-copy { min-width: 0; display: grid; gap: var(--space-2); }
  .connection-title { flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2) var(--space-3); }
  .connection-title b { font-size: 1.125rem; }
  .connection-copy p { margin: 0; }
  .source-actions { justify-content: flex-start; }
  .bill-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; padding-block: var(--space-4); }
  .bill-main { display: grid; gap: var(--space-2); }
  .bill-title { flex-wrap: wrap; column-gap: var(--space-2); font-size: 1.125rem; line-height: 1.35; }
  .bill-main p, .bill-actions { margin: 0; }
  .bill-main p, .bill-main small, .connection-copy small { overflow-wrap: anywhere; }
  :is(.bill-actions, .notice, .metric-detail-shortcuts, .property-stats) .text-button { font-size: 1rem; line-height: 1.3; }
  .bill-actions { gap: var(--space-2); }
  .bill-actions .text-button { padding: 10px 12px; text-align: start; }
  .bill-amount { font-size: 1.0625rem; align-self: start; }
  .mail-security { display: block; padding: var(--space-2) var(--space-3); background: var(--bg); border-radius: 8px; overflow-wrap: anywhere; }
  .mail-security strong { color: var(--expected); }
  .bank-row-list { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
  .bank-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: 16px; padding: var(--space-4); }
  .bank-row-main { display: grid; gap: var(--space-1); min-width: 0; overflow-wrap: anywhere; }
  .bank-row-actions { grid-column: 1 / -1; display: grid; gap: var(--space-3); padding: var(--space-3) 0 0; }
  .bank-row-actions > .button { justify-self: start; }
  .bank-row-actions .field-label { margin: 0; }
  .bank-row-actions .status { white-space: normal; justify-self: start; }
  .report-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; padding: var(--space-4); }
  .report-card b { font-size: 1.0625rem; }
  .report-card small { font-size: .9375rem; color: var(--subtle); }
  .report-toolbar { flex-wrap: wrap; gap: var(--space-2); }
  .rental-contract-head { align-items: start; gap: var(--space-3); flex-wrap: wrap; }
  .rental-property-head { padding-block: 0 var(--space-4); }
  .rental-contract-head h4, .rental-contract-head p { margin: 0; }
  .rental-contract-head p { margin-top: var(--space-1); }
  .rental-documents a { min-width: 0; overflow-wrap: anywhere; }
  .adaptive-table .cell-label { display: none; }
  .adaptive-table td { vertical-align: middle; }
  .adaptive-table td small { line-height: 1.45; }
}
.cell-label { display: none; }
@media screen and (max-width: 900px) {
  .page-content { gap: var(--space-4); }
  .adaptive-table { overflow: visible; }
  .adaptive-table table, .adaptive-table tbody { display: block; min-width: 0; }
  .adaptive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .adaptive-table tbody > tr { display: grid; margin-bottom: var(--space-2); border: 1px solid var(--border); border-radius: 12px; padding: var(--space-2) var(--space-3); background: var(--surface); }
  .adaptive-table td { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-2); padding: var(--space-2) 0; border: 0; white-space: normal; }
  .adaptive-table .cell-label { display: block; color: var(--subtle); font-weight: 650; font-size: .875rem; }
  .adaptive-table .cell-value { min-width: 0; overflow-wrap: anywhere; }
  .adaptive-table :is(.cell-action, td[colspan]) { display: block; }
  .adaptive-table .cell-action:has(.cell-value:empty) { display: none; }
}
@media screen and (max-width: 600px) {
  .page-content .panel { padding: var(--space-4); }
  .page-content .page-tools { display: grid; width: 100%; }
  .page-tools > .button, .backup-form > .button { justify-self: start; }
  .page-content .backup-form { grid-template-columns: minmax(0, 1fr); }
  .page-content :is(.settings-grid, .lease-form, .form-two) { grid-template-columns: minmax(0, 1fr); }
  .bill-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .bill-row > .bill-icon { display: none; }
  .bill-amount { grid-row: 1; text-align: start; color: var(--brand); }
  .bill-actions { flex-direction: column; align-items: flex-start; }
  .report-card { grid-template-columns: minmax(0, 1fr) auto; }
  .report-card .report-icon { display: none; }
  .report-card .status { grid-row: 2; justify-self: start; }
  .report-card .report-arrow { grid-column: 2; grid-row: 1 / 3; }
  .brand-chart .chart-toggle { max-width: 320px; }
  .brand-chart .chart-cta { justify-content: center; }
  .rental-contract-head .status { white-space: normal; }
}

@media screen and (max-width: 600px) {
  :is([data-view='bills'], [data-view='journal']) .panel-heading:has(> .status) { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  :is([data-view='bills'], [data-view='journal']) .panel-heading > .status { align-self: start; }
  .page-content .adaptive-table { margin-top: var(--space-3); }
}