/* ═══════════════════════════════════════════════════════════════════════════
   Design tokens
   ═══════════════════════════════════════════════════════════════════════════
   Everything below this block consumes these and sets no raw values of its own.
   Three things were wrong before and each has a token answer:

   Type   thirteen sizes between 9.5px and 16px meant nothing had rank, which is
          what made the app read as flat. Six steps, each a clear jump from the
          last, so a heading is obviously a heading.
   Space  every rule picked its own padding, so nothing lined up. One 4px-based
          scale; if a value isn't on it, it's wrong.
   Colour one accent did links, buttons, focus, nav and charts, so nothing could
          be emphasised because everything already was. Now: a neutral ramp for
          structure, one accent for action, three semantic colours reserved for
          state and never used decoratively.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* type — 1.25 ratio, rounded to whole px */
  --fs-xs:   11px;   /* labels, badges, table heads   */
  --fs-sm:   12.5px; /* meta, captions                */
  --fs-base: 14px;   /* body                          */
  --fs-md:   16px;   /* card titles                   */
  --fs-lg:   20px;   /* page titles                   */
  --fs-xl:   28px;   /* stat figures                  */
  --lh-tight: 1.25;
  --lh-base:  1.55;

  /* space — 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* neutral ramp */
  --n-0:  #ffffff;
  --n-25: #fafbfd;
  --n-50: #f4f6fa;
  --n-100:#eaeef5;
  --n-200:#dde3ec;
  --n-300:#c3ccda;
  --n-400:#95a1b3;
  --n-500:#5d6b7e;
  --n-700:#2c3a4d;
  --n-900:#16202e;

  /* roles */
  --bg: var(--n-50);
  --panel: var(--n-0);
  --panel-sunk: var(--n-25);
  --ink: var(--n-900);
  --ink-2: var(--n-700);
  --muted: var(--n-500);
  --line: var(--n-200);
  --line-soft: var(--n-100);

  --accent: #1b4f9c;
  --accent-hover: #15407f;
  --accent-ink: #ffffff;
  --accent-soft: #e8f0fc;
  --sky: #4f8fdc;          /* second stop of the accent gradient on bars */

  /* semantic — reserved for state, never decoration */
  --good: #1f7a5a;   --good-soft: #e3f3ed;
  --warn: #8a5a00;   --warn-soft: #fbf0dd;
  --error: #a4262c;  --error-soft: #fbe9ea;

  /* elevation — two levels, no more */
  --e-1: 0 1px 2px rgba(22,32,46,.05), 0 1px 3px rgba(22,32,46,.04);
  --e-2: 0 2px 4px rgba(22,32,46,.06), 0 8px 24px -12px rgba(22,32,46,.22);

  --r-sm: 5px; --r-md: 9px; --r-lg: 13px; --r-pill: 999px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-base);
  color: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root {
    --n-0:  #1b2028;  --n-25: #191e25;  --n-50: #14181e;
    --n-100:#232932;  --n-200:#2d3540;  --n-300:#3d4756;
    --n-400:#6b7889;  --n-500:#93a0b2;  --n-700:#c6cfdb;  --n-900:#e8edf4;
    --accent: #6ea8f0; --accent-hover: #8bbcf6; --accent-ink: #0f1620;
    --accent-soft: #1d2b40;
    --sky: #9cc7f7;
    --good: #5cc0a0; --good-soft: #172b27;
    --warn: #d9a441; --warn-soft: #2d2617;
    --error: #e8797f; --error-soft: #2e1b1d;
    --e-1: 0 1px 2px rgba(0,0,0,.35);
    --e-2: 0 2px 6px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
/* Links had no colour of their own: browser blue/purple, unreadable on the dark theme. */
a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--error); margin: 0; }

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card {
  width: 100%; max-width: 360px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.login-card h1 { margin: 0; font-size: 1.5rem; }
.login-card p { margin: -8px 0 4px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--muted); }
input {
  font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 9px 10px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
button {
  font: inherit; cursor: pointer; border: 0; border-radius: var(--r-md); padding: 10px 14px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
}
button:disabled { opacity: 0.6; cursor: default; }
button.link { background: none; color: var(--muted); padding: 0; font-weight: 400; text-decoration: underline; }

.shell { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--panel); border-right: 1px solid var(--line); padding: 20px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
/* The wordmark, in the sidebar and on the sign-in card. The supplied logo is white on opaque
   black, which would be a black rectangle on the white sidebar, so scripts/make_logo.py turns its
   luminance into an alpha channel and tints it: logo-ink.png for the light theme, logo-white.png
   for the dark one, swapped by <picture>. The text wordmark stands in until they load, so a
   missing file never shows as a broken image. */
.brand { font-weight: 700; font-size: 1.15rem; padding: 0 8px 14px; margin: 0; color: var(--accent); }
.brand picture { display: none; }
.brand .brand-logo { display: block; width: 100%; height: auto; vertical-align: top; }
.brand.has-logo picture { display: block; }
.brand.has-logo .brand-text { display: none; }
.login-card .brand { padding: 0 0 2px; }
.sidebar a, .sidebar .soon { padding: 7px 8px; border-radius: var(--r-md); text-decoration: none; color: var(--ink); }
.sidebar a.active {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.sidebar .soon { color: var(--muted); opacity: 0.6; }
.sidebar-foot { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
/* 1000px clipped the lease and rent-roll tables (Term cut off) while leaving a third of a wide screen empty. */
main { padding: 28px 32px; max-width: 1320px; min-width: 0; }
main h2 { margin-top: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; }
.card h3 { margin: 0 0 10px; font-size: 1rem; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
dt { color: var(--muted); }
dd { margin: 0; }

@media (max-width: 700px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; }
  .brand { width: 100%; padding-bottom: 6px; }
  .sidebar-foot { margin-top: 0; width: 100%; flex-direction: row; justify-content: space-between; }
  main { padding: 20px 16px; }
  /* On a phone the sidebar is a wrapping row and every area label forces a full-width break, so
     the nav can eat the screen before any content shows. Drop what can't be tapped: the "coming"
     placeholders. */
  .sidebar .soon { display: none; }
  /* The sidebar is a wrapping row on a phone, so the active section's pages flow across it. */
  .nav-group { flex-direction: row; flex-wrap: wrap; width: 100%; }
}

/* ── Phase 1 ─────────────────────────────────────────────────────────────── */
.small { font-size: 0.8rem; }
.nav-label { margin: 16px 8px 2px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
/* The first area sits right under the wordmark; the brand already carries the gap. */
.brand + .nav-label { margin-top: 2px; }
.main-col { min-width: 0; display: flex; flex-direction: column; }
.topbar { padding: 10px 32px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }

/* ── section tabs ──
   The four areas of the business, across the top. The sidebar below shows only the active
   section's pages, so switching section changes the whole left column instead of scrolling one
   long list of everything. */
.sections { display: flex; gap: 2px; margin: 0 0 10px -10px; overflow-x: auto; scrollbar-width: none; }
.sections::-webkit-scrollbar { display: none; }
.sections a {
  padding: 7px 10px; border-radius: var(--r-md); text-decoration: none; white-space: nowrap;
  color: var(--muted); font-size: 0.9rem; font-weight: 500;
}
.sections a:hover { color: var(--ink); }
.sections a.active { color: var(--accent-ink); font-weight: 650; background: var(--accent); }
.nav-group { display: flex; flex-direction: column; gap: 4px; }
.nav-group[hidden] { display: none; }
.topbar input { width: 100%; max-width: 560px; }
main { width: 100%; }
main:focus { outline: none; }

button.secondary { background: var(--bg); color: var(--ink); border: 1px solid var(--line); font-weight: 500; }
button.danger { background: none; color: var(--error); border: 1px solid var(--line); font-weight: 500; }
button.small, .small-btn { padding: 5px 10px; font-size: 0.85rem; }
select, textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; }
textarea { width: 100%; min-height: 80px; resize: vertical; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h2 { margin: 0; }
.page-head .sub { margin: 4px 0 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar input[type=search] { flex: 1 1 220px; max-width: 320px; }
.toolbar label.check { flex-direction: row; align-items: center; gap: 6px; }

.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
table { border-collapse: collapse; width: 100%; }
/* Cells used to be nowrap, so one long property or tenant name pushed Term/Rent/Balance off the
   right edge at laptop widths. Text cells wrap now; figures stay on one line (td.num, below). */
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
th {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
  color: var(--accent); background: var(--accent-soft); border-bottom-color: var(--accent-soft);
}
tr:last-child td { border-bottom: 0; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--bg); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { padding: 28px; text-align: center; color: var(--muted); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.badge.high, .badge.overdue, .badge.urgent, .badge.past-due { color: var(--error); border-color: currentColor; }
.badge.occupied, .badge.done, .badge.active { color: var(--accent); border-color: currentColor; }
.badge.holdover, .badge.notice, .badge.vacant { color: var(--warn); border-color: currentColor; }
/* draft, expired, terminated, cancelled, new, assigned, in_progress keep the muted default */

/* ── money ──
   Owed and paid have to be told apart at a glance, and a red figure that only means "negative"
   would flag a tenant who paid ahead as a problem. Red is reserved for money actually overdue. */
td.owed, .owed { color: var(--error); font-variant-numeric: tabular-nums; }
td.credit, .credit { color: var(--accent); font-variant-numeric: tabular-nums; }
.voided { text-decoration: line-through; color: var(--muted); }
.ledger-foot td { border-top: 2px solid var(--line); font-weight: 650; }
tr.vacant-row td { color: var(--muted); }

/* ── totals strip above a report ── */
.totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 16px; }
.totals .t .v { font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.totals .t .k { color: var(--muted); font-size: 0.78rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.stat .v { font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat .k { color: var(--muted); font-size: 0.82rem; }
.stat.alert .v { color: var(--error); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.card + .card, .card + .table-wrap, .table-wrap + .card { margin-top: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.card-head h3 { margin: 0; }

.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 20px; }
.fields .f .k { color: var(--muted); font-size: 0.78rem; }
.fields .f .v { word-break: break-word; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 20px 0 14px; flex-wrap: wrap; }
.tabs button { background: none; color: var(--muted); border-radius: var(--r-md) 6px 0 0; font-weight: 500; }
.tabs button[aria-selected=true] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.list > li:last-child { border-bottom: 0; }
.note-body { white-space: pre-wrap; word-break: break-word; }
.meta { color: var(--muted); font-size: 0.8rem; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.meta button.link { font-size: 0.8rem; }
.pinned { border-left: 3px solid var(--accent); padding-left: 10px !important; }
.task-row { display: flex; gap: 10px; align-items: flex-start; }
.task-row input[type=checkbox] { margin-top: 4px; width: 16px; height: 16px; }
.task-row .done-title { text-decoration: line-through; color: var(--muted); }
.add-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

/* The property/unit picker: two selects that should read as one control, and wrap together
   rather than stranding the unit on its own line. */
.attach { display: inline-flex; gap: 6px; flex: 1 1 320px; min-width: 0; }
.attach > select { flex: 1 1 0; min-width: 0; }
.attach > select:disabled { color: var(--muted); }
.form-grid .attach { display: flex; }
.add-row > input, .add-row > textarea { flex: 1 1 240px; }
.snippet { color: var(--muted); font-size: 0.88rem; }
.search-group h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 18px 0 6px; }

dialog { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; width: min(640px, calc(100vw - 32px)); background: var(--panel); color: var(--ink); }
dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
#modal-form { padding: 22px; display: flex; flex-direction: column; gap: 12px; max-height: 85vh; overflow-y: auto; }
#modal-form h3 { margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-section { grid-column: 1 / -1; margin: 6px 0 -4px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.form-grid .invalid input, .form-grid .invalid select { border-color: var(--error); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

#toast { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--r-md); z-index: 10; }

@media (max-width: 700px) {
  .topbar { padding: 8px 16px 12px; }
  .nav-label { width: 100%; }
  .sections { margin-left: -8px; }
}

/* ── property map ─────────────────────────────────────────────────────────── */

.map-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.map-head h1 { margin-bottom: 0; }

.map-canvas {
  height: min(68vh, 700px);
  min-height: 340px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  /* Leaflet paints tiles and controls in stacking contexts of its own; without this the
     rounded corners are drawn over by the tile layer. */
  overflow: hidden;
  z-index: 0;
}

.map-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 10px; font-size: var(--fs-sm); color: var(--muted);
}
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot-approx { border: 2px dashed var(--muted); background: transparent; width: 12px; height: 12px; }
.map-legend-approx { color: var(--muted); }

.map-empty { margin-top: 14px; color: var(--muted); }

.map-missing { margin-top: 14px; font-size: var(--fs-base); }
.map-missing summary { cursor: pointer; color: var(--muted); }
.map-missing ul { margin: 10px 0 0; padding-left: 18px; }
.map-missing li { margin-bottom: 4px; }

/* Popup contents. Leaflet supplies the bubble; these style what goes inside it. */
.map-pop { font-size: var(--fs-sm); line-height: 1.5; }
.map-pop-name { font-weight: 600; font-size: var(--fs-base); text-decoration: none; }
.map-pop-addr { color: var(--muted); margin-top: 2px; }
.map-pop-status { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--muted); }
.map-pop-rows {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
  margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line);
}
.map-pop-rows dt { color: var(--muted); }
.map-pop-rows dd { margin: 0; }
.map-pop-warn { margin-top: 8px; color: var(--warn); }
.map-pop-open { display: inline-block; margin-top: 10px; font-weight: 500; }

/* ── Phase 3: vendors, sharing, ownership, asset numbers, development ───── */
h4 { margin: 14px 0 6px; font-size: 0.85rem; color: var(--muted); font-weight: 600; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; margin: 8px 0; }
label.check { flex-direction: row; align-items: center; gap: 6px; color: var(--ink); font-size: 0.9rem; }
.composer { margin-bottom: 12px; }
.composer .add-row { margin-bottom: 8px; }
details.share summary { cursor: pointer; color: var(--muted); }
.note-title { font-weight: 600; margin-bottom: 2px; }
.list > li.unread { border-left: 3px solid var(--error); padding-left: 10px; }
.impact { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.impact.risk { color: var(--error); }
td.rank { font-weight: 650; font-variant-numeric: tabular-nums; }
tr.entity-row td { background: var(--bg); font-weight: 600; }

.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 10px; overflow-x: auto;
  padding-bottom: 8px; margin-bottom: 16px; }
.board-col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; min-height: 90px; }
.board-col h4 { margin: 0 0 8px; }
.dev-card { display: block; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; margin-bottom: 8px;
  color: var(--ink); text-decoration: none; background: var(--bg); }
.dev-card:hover { border-color: var(--accent); }
.dev-name { font-weight: 600; margin-bottom: 2px; }
.progress { height: 4px; background: var(--line); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--sky)); }
.stage-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.stage-bar span { font-size: 0.75rem; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.stage-bar span.past { color: var(--accent); border-color: var(--accent); }
.stage-bar span.now { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
details > summary { cursor: pointer; padding: 6px 0; font-weight: 500; }

/* ── Batch B: calendar, capital plan bars, printable reports ─────────────── */
.cal-date { min-width: 96px; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.85rem; padding-top: 2px; }
.bars { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 48px 1fr 110px; gap: 10px; align-items: center; }
.bar-label { color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { height: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--sky)); }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; }
@media print {
  .sidebar, .topbar, .no-print, #toast { display: none !important; }
  .shell { display: block; }
  main { padding: 0; max-width: none; }
  .card, .totals, .table-wrap { break-inside: avoid; border-color: #ccc; }
  body { background: #fff; color: #000; }
}

/* ── Helpful info ────────────────────────────────────────────────────────── */
.formula { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; margin: 6px 0; white-space: pre-wrap;
  overflow-x: auto; }
.formula.example { color: var(--muted); }
.help-item { border-bottom: 1px solid var(--line); }
.help-item:last-child { border-bottom: 0; }
.help-item > summary { padding: 8px 0; }
.help-body { padding: 0 0 10px 4px; }

/* ── asset management ─────────────────────────────────────────────────────── */

.am-filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 18px; }
.am-filter { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
.am-filter select { font-size: var(--fs-base); padding: 5px 8px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--panel); color: var(--ink); min-width: 150px; }

.am-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 8px; }
.am-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.am-tile.warn { border-left: 3px solid var(--warn); }
.am-v { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; }
.am-k { font-size: var(--fs-sm); color: var(--ink); margin-top: 2px; }
.am-hint { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }
.am-note { font-size: var(--fs-sm); color: var(--warn); margin: 10px 0 0; }
.am-asof { font-size: var(--fs-sm); margin-top: 26px; }

/* Rollover. One series, so one hue — a second colour would imply a distinction
   that isn't there. Expired is set apart by tone AND by its label, never colour alone. */
.am-roll { margin-top: 10px; }
.am-roll-row { display: grid; grid-template-columns: 76px 1fr 110px 58px 86px;
  gap: 10px; align-items: center; padding: 3px 0; font-size: var(--fs-sm); }
.am-roll-lab { color: var(--ink); font-variant-numeric: tabular-nums; }
.am-roll-track { background: var(--line); border-radius: var(--r-sm); height: 16px; overflow: hidden; }
.am-roll-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--sky)); border-radius: var(--r-sm); }
.am-roll-bar.expired { background: var(--warn); }
.am-roll-val, .am-roll-pct { text-align: right; font-variant-numeric: tabular-nums; }
.am-roll-n { color: var(--muted); font-size: var(--fs-sm); }

.am-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }  /* minmax: a wide table scrolls in its own box instead of widening the page */
@media (max-width: 900px) { .am-two { grid-template-columns: minmax(0, 1fr); } }

.am-gaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; margin-top: 10px; }
.am-gap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.am-gap.missing { border-left: 3px solid var(--line); }
.am-gap.partial { border-left: 3px solid var(--warn); }
.am-gap-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.am-gap-name { font-weight: 600; font-size: var(--fs-base); }
.am-gap-why { font-size: var(--fs-sm); color: var(--muted); margin-top: 6px; line-height: 1.5; }
.am-gap-need { font-size: var(--fs-sm); color: var(--ink); margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line); }

section h3 { margin: 28px 0 2px; font-size: var(--fs-md); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.pos { color: var(--warn); }
.am-flag { display: inline-block; margin-left: 5px; font-weight: 700; color: var(--warn); cursor: help; }
td.weak { color: var(--warn); }

/* ── asset numbers: the property-by-property breakdown ─────────────────────── */

/* A cell whose figure needs an input nobody has entered. Deliberately not a dash: a dash in
   a money column reads as zero, and an empty NOI is not a zero NOI. It links to the property
   so the fix is one click from the cell that is complaining. */
.need {
  font-size: var(--fs-sm); text-decoration: none; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 1px 6px; white-space: nowrap;
}
.need:hover { color: var(--accent); border-color: currentColor; }

/* A figure computed over part of its denominator — trustworthy as far as it goes, and the
   asterisk plus the hover say how far that is. */
.partial { color: var(--warn); }
.partial sup { font-size: var(--fs-xs); }

/* Concentration worth noticing: one tenant carrying half a property, or a quarter of the
   rent rolling inside a year. Colour is a second signal — the number is always shown. */
.conc { color: var(--warn); font-weight: 600; }

.note-line {
  background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-md); padding: 10px 14px; margin: 0 0 14px; font-size: var(--fs-base); color: var(--muted);
}

/* ── home: banded layout ──────────────────────────────────────────────────── */
.home-band { margin-bottom: 18px; }
.band-head { font-size: var(--fs-sm); letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.card-head-actions { display: inline-flex; align-items: center; gap: 12px; }
.task-group + .task-group { margin-top: 12px; }
.task-group-head { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 4px 0 2px; border-bottom: 1px solid var(--line-soft); }
.task-group-head.owed { color: var(--error); }

/* ═══════════════════════════════════════════════════════════════════════════
   Components — redefined on the token system.
   Appended last so these win over anything above without deleting history.
   ═══════════════════════════════════════════════════════════════════════════ */

body { background: var(--bg); color: var(--ink); line-height: var(--lh-base); }

/* ── surfaces ── */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-4);
  box-shadow: var(--e-1); margin-bottom: var(--s-4);
}
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-3);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--line-soft);
}
.card-head h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }

/* ── page furniture ── */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5);
}
.page-head h2 { font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.02em; margin: 0 0 var(--s-1); }
.page-head .sub { font-size: var(--fs-sm); color: var(--muted); margin: 0; max-width: 78ch; line-height: var(--lh-base); }
.band-head {
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 650; margin: 0 0 var(--s-2);
}
.home-band { margin-bottom: var(--s-5); }

/* ── stats ── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--s-3); }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); box-shadow: var(--e-1);
  transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease;
}
a.stat:hover { box-shadow: var(--e-2); transform: translateY(-1px); border-color: var(--accent); }
.stat .v { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.02em; line-height: var(--lh-tight); }
.stat .k { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-1); }
/* Alert is the one place colour carries meaning on a tile, so it gets a bar as well. */
.stat.alert { border-left: 3px solid var(--error); }
.stat.alert .v { color: var(--error); }

.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }

/* ── type ── */
h1, h2, h3, h4 { line-height: var(--lh-tight); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: var(--fs-sm); color: var(--muted); margin-top: var(--s-1); }
.owed { color: var(--error); }

/* ── controls ── */
button, .btn {
  font: inherit; font-size: var(--fs-base); font-weight: 550;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-md);
  background: var(--accent); color: var(--accent-ink); border: 1px solid transparent;
  cursor: pointer; transition: background .14s ease, box-shadow .14s ease;
}
button:hover, .btn:hover { background: var(--accent-hover); }
button.ghost, button.secondary {
  background: var(--panel); color: var(--ink-2); border-color: var(--line);
}
button.ghost:hover, button.secondary:hover { background: var(--n-100); border-color: var(--n-300); }
button.small { font-size: var(--fs-sm); padding: var(--s-1) var(--s-3); }
button.danger { background: transparent; color: var(--error); border-color: var(--line); }
button.link {
  background: none; border: 0; padding: 0; color: var(--accent);
  font-size: inherit; font-weight: 500; cursor: pointer;
}
button.link:hover { color: var(--accent-hover); text-decoration: underline; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm);
}
input, select, textarea {
  font: inherit; font-size: var(--fs-base); color: var(--ink);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-2) var(--s-3);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }

/* ── badges & tags ── */
.badge, .tag {
  display: inline-flex; align-items: center; font-size: var(--fs-xs);
  padding: 2px var(--s-2); border-radius: var(--r-pill);
  background: var(--n-100); color: var(--ink-2); white-space: nowrap;
}
.badge.overdue { background: var(--error-soft); color: var(--error); }
.badge.high { background: var(--warn-soft); color: var(--warn); }

/* ── tables ── */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
th {
  text-align: left; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: var(--s-3); border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: 0; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--accent-soft); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── lists ── */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }
.list > li:last-child { border-bottom: 0; }
.task-row { display: flex; align-items: flex-start; gap: var(--s-3); }
.task-group + .task-group { margin-top: var(--s-4); }
.task-group-head {
  font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding-bottom: var(--s-1);
  border-bottom: 1px solid var(--line);
}
.task-group-head.owed { color: var(--error); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--s-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-4); }
.empty { color: var(--muted); padding: var(--s-5); text-align: center; }

/* ── chrome ── */
.sidebar { background: var(--panel); border-right: 1px solid var(--line); }
.sidebar a[data-nav] {
  display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  font-size: var(--fs-base); color: var(--ink-2); text-decoration: none;
}
.sidebar a[data-nav]:hover { background: var(--n-100); }
.sidebar a[data-nav].active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-label {
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--n-400); font-weight: 650; padding: var(--s-4) var(--s-3) var(--s-1);
}
.topbar { background: var(--panel); border-bottom: 1px solid var(--line); }

/* ═══════════════════════════════════════════════════════════════════════════
   Calendar
   Colour is a family signal only — every chip carries its title, the drawer
   spells the kind out in words, and the legend is always on screen.
   ═══════════════════════════════════════════════════════════════════════════ */

.cal-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.cal-nav, .cal-views { display: inline-flex; gap: var(--s-1); }
.cal-nav button, .cal-views button { min-width: 38px; }
.cal-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  margin-left: auto; font-size: var(--fs-sm); color: var(--muted);
}
.cal-legend span { display: inline-flex; align-items: center; gap: var(--s-1); }
.cal-dot { width: 8px; height: 8px; border-radius: var(--r-pill); }

.cal-dot.task,   .cal-chip.task   i { background: #3b6fb5; }
.cal-dot.lease,  .cal-chip.lease  i { background: #1f7a5a; }
.cal-dot.loan,   .cal-chip.loan   i { background: #9a6410; }
.cal-dot.vendor, .cal-chip.vendor i { background: #6d4b9c; }
.cal-dot.dev,    .cal-chip.dev    i { background: #a8552f; }
.cal-dot.other,  .cal-chip.other  i,
.cal-chip.deadline i               { background: var(--n-400); }

/* ── the overdue rail ── */
.cal-rail {
  background: var(--error-soft); border: 1px solid transparent;
  border-left: 3px solid var(--error);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
}
.cal-rail-head {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: var(--s-2);
}
.cal-rail-n { font-size: var(--fs-md); font-weight: 700; color: var(--error); }
.cal-rail-head a { margin-left: auto; }
.cal-rail-items { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.cal-rail-item {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--r-pill); padding: var(--s-1) var(--s-3);
  font-size: var(--fs-sm); max-width: 320px;
}
.cal-rail-item:hover { border-color: var(--error); background: var(--panel); }
.cal-rail-when { color: var(--error); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-rail-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-rail-more { font-size: var(--fs-sm); color: var(--muted); }

/* ── the grid ── */
.cal-dow {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-1);
  margin-bottom: var(--s-1);
}
.cal-dow div {
  font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; text-align: center; padding-bottom: var(--s-1);
}

.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-1);
  background: var(--line-soft); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-1); box-shadow: var(--e-1);
}
.cal-cell {
  display: flex; flex-direction: column; gap: var(--s-1);
  min-height: 124px; padding: var(--s-2); text-align: left;
  background: var(--panel); border: 1px solid transparent; border-radius: var(--r-md);
  font: inherit; color: inherit; cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease;
}
.cal-grid.week .cal-cell { min-height: 320px; }
.cal-cell:hover { background: var(--accent-soft); }
.cal-cell.outside { background: var(--panel-sunk); }
.cal-cell.outside .cal-num { color: var(--n-400); }
.cal-cell.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-cell.selected { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }

.cal-num {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.cal-cell.today .cal-num { color: var(--accent); }
.cal-count {
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
  background: var(--n-100); border-radius: var(--r-pill); padding: 0 var(--s-1);
}
.cal-chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-chip {
  display: flex; align-items: center; gap: var(--s-1);
  font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-2);
  background: var(--n-50); border-radius: var(--r-sm); padding: 1px var(--s-1);
  min-width: 0;
}
/* The dot carries the family; the text carries the thing. Neither alone. */
.cal-chip i { width: 5px; height: 5px; border-radius: var(--r-pill); flex: 0 0 auto; }
.cal-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-more { font-size: var(--fs-xs); color: var(--muted); padding-left: var(--s-1); }

/* ── the day drawer ── */
.cal-drawer {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-4); margin-top: var(--s-4); box-shadow: var(--e-2);
}
.cal-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  padding-bottom: var(--s-2); margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-soft);
}
.cal-drawer-head h3 { margin: 0; font-size: var(--fs-md); font-weight: 650; }
.cal-date { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 96px; }

@media (max-width: 860px) {
  .cal-cell { min-height: 76px; padding: var(--s-1); }
  .cal-grid.week .cal-cell { min-height: 180px; }
  .cal-chip span { display: none; }          /* dots only once text can't fit */
  .cal-chip { justify-content: center; }
  .cal-legend { margin-left: 0; width: 100%; }
}

/* ── tenant insurance (tenantins.js) ── */
.badge.coi-expired { background: var(--error-soft, #fbe9ea); color: var(--error, #a4262c); border-color: currentColor; }
.badge.coi-review  { background: var(--warn-soft, #fbf0dd);  color: var(--warn, #8a5a00);  border-color: currentColor; }
.badge.coi-soon    { background: var(--accent-soft, #e8f0fc); color: var(--accent, #1b4f9c); border-color: currentColor; }
.badge.coi-good    { background: var(--good-soft, #e3f3ed);  color: var(--good, #1f7a5a);  border-color: currentColor; }
.coi-tiles { margin-bottom: var(--s-4, 16px); }
.stat.coi-tile { text-align: left; font: inherit; color: inherit; cursor: pointer; border-left-width: 4px; }
.stat.coi-tile:hover { box-shadow: var(--e-2, 0 2px 8px rgba(0,0,0,.08)); transform: translateY(-1px); }
.stat.coi-tile.coi-expired { border-left-color: var(--error, #a4262c); } .stat.coi-tile.coi-expired .v { color: var(--error, #a4262c); }
.stat.coi-tile.coi-review  { border-left-color: var(--warn, #8a5a00); }  .stat.coi-tile.coi-review .v  { color: var(--warn, #8a5a00); }
.stat.coi-tile.coi-soon    { border-left-color: var(--accent, #1b4f9c); } .stat.coi-tile.coi-soon .v    { color: var(--accent, #1b4f9c); }
.stat.coi-tile.coi-good    { border-left-color: var(--good, #1f7a5a); }  .stat.coi-tile.coi-good .v    { color: var(--good, #1f7a5a); }
.stat.coi-tile.on { outline: 2px solid currentColor; outline-offset: -2px; background: var(--panel-sunk, #f6f7f9); }
.coi-toolbar select { max-width: 260px; }
.coi-actions { white-space: nowrap; text-align: right; }
.coi-headline { margin: 4px 0 10px; }
.coi-headline.coi-expired strong { color: var(--error, #a4262c); }
.coi-headline.coi-soon strong { color: var(--accent, #1b4f9c); }
.coi-headline.coi-good strong { color: var(--good, #1f7a5a); }
tr.coi-latest td:first-child { font-weight: 650; }
.coi-follow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.coi-follow .small.muted { flex: 1 1 100%; }

/* ── rent schedule card (rentschedule.js) ── */
.rs-headline { margin: 4px 0 10px; }
.rs-table td.num, .rs-table th.num { text-align: right; white-space: nowrap; }
.rs-table tr.rs-now td { background: var(--good-soft, #e3f3ed); }
.rs-table tr.rs-now td:first-child { box-shadow: inset 3px 0 0 var(--good, #1f7a5a); }

/* ═══ Design pass 2026-10-02 ═════════════════════════════════════════════════
   Home "Needs you": one ranked list. Each row = count · what · what's at stake. */
.nqs { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e-1); }
.nq { display: grid; grid-template-columns: 72px minmax(0, 1fr) 20px; gap: var(--s-4); align-items: center;
  padding: var(--s-3) var(--s-4); color: inherit; text-decoration: none; border-top: 1px solid var(--line-soft); min-height: 44px; }
.nq:first-child { border-top: none; }
.nq:hover { background: var(--panel-sunk); }
.nq-n { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink-2); }
.nq.risk .nq-n { color: var(--error); }
.nq.warn .nq-n { color: var(--warn); }
.nq-body { display: flex; flex-direction: column; min-width: 0; }
.nq-label { font-weight: 600; }
.nq-detail { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.nq-go { color: var(--n-400); font-size: 20px; }
.stat .k .la-info { position: relative; }

.v.na { color: var(--n-400); }

/* Filter chips (rent roll; reusable). 44px tall on touch screens. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); }
.chip { min-height: 32px; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-2); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.chip:hover { border-color: var(--n-400); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--panel); }
@media (pointer: coarse) { .chip { min-height: 44px; } }

/* Rent roll grouped by property: sticky header, a subtotal line per property. */
.table-wrap.rr { max-height: calc(100vh - 220px); overflow: auto; }
.table-wrap.rr thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-sunk); }
.rr-group td { background: var(--panel-sunk); font-weight: 700; padding-top: var(--s-4); border-bottom: 1px solid var(--line); }
.rr-group a { color: var(--ink); text-decoration: none; }
.rr-group a:hover { color: var(--accent); }
.rr-meta { margin-left: var(--s-2); font-weight: 400; color: var(--muted); font-size: var(--fs-sm); }
.rr-unit { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-sm); white-space: nowrap; }
.rr-tenant { min-width: 160px; }
td.strong { font-weight: 600; }

/* Asset page lease timeline: one bar per lease on a shared year axis. */
.lt { display: flex; flex-direction: column; gap: 2px; }
.lt-row { display: grid; grid-template-columns: minmax(120px, 240px) minmax(0, 1fr); gap: var(--s-3); align-items: center;
  color: inherit; text-decoration: none; padding: 3px 0; border-radius: var(--r-sm); }
a.lt-row:hover { background: var(--panel-sunk); }
.lt-name { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-track { position: relative; height: 16px; background: var(--line-soft); border-radius: var(--r-sm); }
.lt-track.bare { background: none; height: 18px; }
.lt-tick { position: absolute; transform: translateX(-50%); font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.lt-bar { position: absolute; top: 0; bottom: 0; border-radius: var(--r-sm); }
.lt-bar.orig { background: var(--accent-soft); border: 1px solid var(--n-300); }
.lt-bar.cur { background: var(--accent); }
.lt-bar.hold { background: var(--warn); opacity: .85; }
.lt-today { position: absolute; top: -3px; bottom: -3px; border-left: 2px solid var(--error); }
.lt-key { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lt-sw { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-left: 8px; }
.lt-sw.orig { background: var(--accent-soft); border: 1px solid var(--n-300); }
.lt-sw.cur { background: var(--accent); }
.lt-sw.hold { background: var(--warn); }
.lt-note { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); background: var(--panel-sunk); border-radius: var(--r-md); font-size: var(--fs-sm); }
@media (max-width: 700px) { .lt-row { grid-template-columns: 1fr; gap: 2px; } .lt-axis > span:first-child { display: none; } }
.t .need { white-space: normal; display: inline-block; margin-top: 4px; }

/* ── Phone shell: drawer sidebar + bottom section bar ─────────────────────────
   Before, the whole first screen on a phone was the sidebar and the section tabs sat cut off at
   the bottom of it. Now: content first; ☰ opens the active section's pages as a drawer; the five
   sections are a fixed bottom bar. */
.menu-toggle { display: none; }
@media (max-width: 700px) {
  .sidebar { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); overflow-y: auto;
    flex-direction: column; flex-wrap: nowrap; border-right: 1px solid var(--line); border-bottom: 0;
    padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--e-2); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 35; background: rgba(10, 16, 24, .35); }
  .nav-group { flex-direction: column; flex-wrap: nowrap; }
  .sidebar a { padding: 11px 10px; }
  .sidebar-foot { flex-direction: column; margin-top: auto; }
  .topbar { display: flex; gap: 8px; align-items: center; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
    position: sticky; top: 0; z-index: 20; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 44px;
    border-radius: var(--r-md); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 20px; padding: 0; }
  #search-form { flex: 1; min-width: 0; }
  #search-input { font-size: 16px; min-height: 44px; }   /* <16px makes iOS zoom the page on focus */
  .sections { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; margin: 0; gap: 0;
    background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); overflow: visible; }
  .sections a { flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; align-items: center; justify-content: center; text-align: center;
    white-space: normal; line-height: 1.15; font-size: 11.5px; padding: 6px 2px; border-radius: 0; }
  .sections a.active { background: none; color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
  main { padding: 16px 16px calc(80px + env(safe-area-inset-bottom, 0px)); }
  .nq { grid-template-columns: 52px minmax(0, 1fr) 14px; gap: var(--s-3); }
  .nq-n { font-size: 20px; }
}
@media (max-width: 700px) { .rr .rr-opt { display: none; } .rr-tenant { min-width: 120px; } }

/* Fit tables to the page: numbers, money and dates never break; headers may wrap onto two lines;
   on narrower screens the cell padding tightens before anything has to scroll. */
td.num, td.date, .badge { white-space: nowrap; }
th { white-space: normal; vertical-align: bottom; }
td { vertical-align: middle; }
@media (max-width: 1280px) { th, td { padding: 8px 9px; } }
@media (min-width: 701px) and (max-width: 1024px) { .shell { grid-template-columns: 190px minmax(0, 1fr); } main { padding: 24px 20px; } }

/* ── vacancies (vacancies.js) ── */
.vac-table td { vertical-align: top; }
select.vac-prio { font-size: var(--fs-sm, 12.5px); padding: 2px 6px; }
select.vac-prio.vac-high { color: var(--error, #a4262c); border-color: currentColor; font-weight: 600; }
tr.vac-high td:first-child { box-shadow: inset 3px 0 0 var(--error, #a4262c); }
/* Laptops and tablets (sidebar still showing): a slightly denser table before anything scrolls. */
@media (min-width: 701px) and (max-width: 1180px) { table { font-size: 13px; } th, td { padding: 7px 7px; } th { font-size: 10.5px; } }
.cal-cell, .cal-chips, .cal-chip { min-width: 0; }  /* a long event title truncates instead of widening the month to 3,000px */
/* Long unbroken strings (file paths, URLs) wrap instead of widening a phone page; selects never exceed their column. */
main { overflow-wrap: break-word; }
main select { max-width: 100%; }

/* Calculators (calculators.js) */
.calc-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-3, 12px); padding: 0 16px 12px; align-items: end; }
.calc-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.calc-field input, .calc-field select, .calc-form > select { font-size: 16px; }
.calc-out { padding: 4px 16px 12px; }
.calc-result { padding: 8px 16px; }
.calc-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line, #ddd); }
.calc-row.alert strong { color: var(--danger, #b3261e); }
.calc-exp { padding: 0 16px 8px; display: grid; gap: 8px; }
.calc-exp-row { display: grid; grid-template-columns: 2fr 1fr auto auto auto auto; gap: 8px; align-items: center; }
.calc-exp-row input[type=text], .calc-exp-row input:not([type]), .calc-exp-row .e-amt { font-size: 16px; }
@media (max-width: 640px) { .calc-exp-row { grid-template-columns: 1fr 1fr; } }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 0 16px 16px; }
.calc-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line, #ddd); border-radius: 10px; text-decoration: none; color: inherit; }
.calc-card:hover { border-color: var(--accent, #2563eb); }
.task-done-by { color: var(--ok, #1a7f4b); }
.me-row td { background: var(--hover, rgba(0,0,0,.03)); }
.toolbar .active-link { font-weight: 600; text-decoration: underline; }