/* ==========================================================================
   ServePoint — Design System
   Signature: "The Ledger" — a horizontal accounting-ledger strip (thin
   rules, tabular mono numerals, right-aligned figures) used as the hero
   of the Command Center and echoed in lease headers and tables throughout.
   Palette: ink + parchment paper with a muted brass accent (institutional
   real estate, not fintech-neon, not AI-cream-and-terracotta).
   ========================================================================== */

:root {
  --ink: #14181f;
  --ink-soft: #2a3140;
  --paper: #faf9f6;
  --surface: #ffffff;
  --surface-sunk: #f3f1ec;
  --line: #e4e0d6;
  --line-strong: #d3cec1;
  --brass: #a9762f;
  --brass-light: #c99a55;
  --brass-wash: #f6ede0;
  --slate: #4b5a6b;
  --sage: #52725a;
  --sage-wash: #eaf0ea;
  --amber: #b8863b;
  --amber-wash: #f7edda;
  --brick: #ad4c3d;
  --brick-wash: #f9e9e6;
  --muted: #8b8578;
  --muted-wash: #efece4;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --radius: 8px;
  --radius-sm: 5px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.04);
  --shadow-md: 0 6px 20px rgba(20, 24, 31, 0.08);
  --sidebar-w: 232px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

::selection { background: var(--brass-wash); color: var(--ink); }

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* ---------- App shell ---------- */
#app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--ink);
  color: #d9dbe0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand {
  padding: 26px 22px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand .mark {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-brand .mark svg { display: block; }
.sidebar-brand .name {
  font-family: var(--font-display);
  font-size: 17px;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: #b9bcc4;
  font-size: 13.5px;
  margin-bottom: 2px;
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.nav-item .icon { width: 16px; height: 16px; opacity: 0.85; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.active { background: rgba(169,118,47,0.18); color: #fff; }
.nav-item.active::before {
  content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  background: var(--brass-light); border-radius: 2px;
}
.nav-section-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
  color: #6b6f7a; padding: 16px 12px 6px;
}
.sidebar-footer {
  padding: 14px 20px 18px; border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px; color: #7b7e88;
}
.sidebar-footer .org { color: #d9dbe0; font-size: 13px; margin-bottom: 2px; }
.sidebar-footer .exit { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: #9a9da6; }
.sidebar-footer .exit:hover { color: #fff; }
.sidebar-footer .exit .icon { width: 14px; height: 14px; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 64px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky; top: 0; z-index: 5;
}
.topbar-title-group { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.topbar-title {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.topbar-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.search-toggle-btn { display: none; }
.view-body { padding: 28px; max-width: 1320px; width: 100%; margin: 0 auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; border: 1px solid transparent;
  transition: transform 0.06s ease, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink-soft); }
.btn-brass { background: var(--brass); color: #fff; }
.btn-brass:hover { background: #96682a; }
.btn-outline { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: var(--surface); }
.btn-ghost { background: transparent; color: var(--slate); padding: 9px 12px; }
.btn-ghost:hover { background: var(--surface-sunk); }
.btn-sm { padding: 6px 11px; font-size: 12px; }
.btn-danger-outline { background: transparent; border-color: #e2c3bc; color: var(--brick); }
.btn-danger-outline:hover { background: var(--brick-wash); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn .icon { width: 14px; height: 14px; }

/* ---------- Cards / surfaces ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.card-tight { padding: 14px 16px; }
.card-title { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
.card-sub { color: var(--muted); font-size: 12.5px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-main-side { grid-template-columns: 1.6fr 1fr; align-items: start; }
.grid-main-side-b { grid-template-columns: 1.4fr 1fr; align-items: start; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- The Ledger (signature element) ---------- */
.ledger {
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  padding: 26px 30px 20px;
  display: flex;
  align-items: flex-end;
  gap: 0;
  overflow-x: auto;
}
.ledger-item {
  flex: 1;
  min-width: 148px;
  padding: 0 26px 0 0;
  border-right: 1px solid rgba(255,255,255,0.12);
  margin-right: 26px;
}
.ledger-item:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.ledger-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em;
  color: #9a9da6; margin-bottom: 10px;
}
.ledger-value {
  font-family: var(--font-mono); font-size: 27px; font-weight: 500;
  letter-spacing: -0.01em; color: #fff; line-height: 1;
}
.ledger-value .unit { font-size: 14px; color: #9a9da6; margin-left: 4px; }
.ledger-delta { font-size: 11.5px; margin-top: 8px; color: #9a9da6; font-family: var(--font-mono); }
.ledger-delta.pos { color: #8fc19a; }
.ledger-delta.warn { color: var(--brass-light); }

/* ---------- Status pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; border-radius: 100px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap;
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; }
.st-healthy { background: var(--sage-wash); color: var(--sage); }
.st-healthy .pill-dot { background: var(--sage); }
.st-watch { background: var(--amber-wash); color: var(--amber); }
.st-watch .pill-dot { background: var(--amber); }
.st-action { background: var(--brass-wash); color: var(--brass); }
.st-action .pill-dot { background: var(--brass); }
.st-overdue { background: var(--brick-wash); color: var(--brick); }
.st-overdue .pill-dot { background: var(--brick); }
.st-muted { background: var(--muted-wash); color: var(--muted); }
.st-muted .pill-dot { background: var(--muted); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
table.data td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr { transition: background 0.12s; cursor: pointer; }
table.data tbody tr:hover { background: var(--surface-sunk); }
table.data td.num, table.data th.num { text-align: right; font-family: var(--font-mono); }
.row-link { color: var(--ink); font-weight: 600; }
.cell-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ---------- Forms ---------- */
input[type=text], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 13px; background: var(--surface); color: var(--ink);
}
textarea { font-family: var(--font-mono); line-height: 1.6; resize: vertical; }
label.field-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--slate); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.field { margin-bottom: 16px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }

/* ---------- Misc ---------- */
.hr { height: 1px; background: var(--line); border: none; margin: 20px 0; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--brass); font-weight: 700; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 4px 14px; }
.section-head h2 { font-size: 17px; }
.link-more { font-size: 12.5px; color: var(--brass); font-weight: 600; }
.link-more:hover { text-decoration: underline; }
.empty-state { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty-state .icon { width: 30px; height: 30px; margin-bottom: 10px; opacity: 0.5; }
.tag { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 5px; background: var(--surface-sunk); color: var(--slate); font-weight: 600; margin: 0 6px 6px 0; }
.icon { width: 18px; height: 18px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--brass-wash); color: var(--brass);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700;
  font-family: var(--font-mono);
}
.breadcrumb { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tab {
  padding: 10px 4px; margin-right: 22px; font-size: 13px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; position: relative; top: 1px;
}
.tab.active { color: var(--ink); border-bottom-color: var(--brass); }
.tab:hover { color: var(--ink); }

/* Progress / stepper (ingestion) */
.stepper { display: flex; align-items: center; margin-bottom: 28px; overflow-x: auto; padding-bottom: 6px; }
.stepper-mobile { display: none; }
.step { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.step-dot {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700;
  font-family: var(--font-mono); color: var(--muted); background: var(--surface); flex-shrink: 0;
  transition: all 0.2s;
}
.step.done .step-dot { background: var(--sage); border-color: var(--sage); color: #fff; }
.step.active .step-dot { background: var(--brass); border-color: var(--brass); color: #fff; }
.step-label { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.step.active .step-label, .step.done .step-label { color: var(--ink); }
.step-line { flex: 1; height: 1px; background: var(--line-strong); margin: 0 12px; min-width: 20px; }
.step-line.done { background: var(--sage); }

.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(169,118,47,0.25); border-top-color: var(--brass);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.dropzone {
  border: 1.5px dashed var(--line-strong); border-radius: 10px; padding: 46px 20px;
  text-align: center; background: var(--surface-sunk); transition: border-color 0.15s, background 0.15s;
}
.dropzone.drag { border-color: var(--brass); background: var(--brass-wash); }

/* Toasts */
#toast-host { position: fixed; bottom: 22px; right: 22px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 8px; font-size: 13px;
  box-shadow: var(--shadow-md); opacity: 0; transform: translateY(8px); transition: opacity 0.22s, transform 0.22s;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* Disclaimer strip */
.disclaimer {
  font-size: 11.5px; color: var(--muted); padding: 10px 14px; background: var(--surface-sunk);
  border-radius: 6px; border: 1px solid var(--line); line-height: 1.5;
}

/* Search box */
.searchbox { position: relative; }
.searchbox .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 15px; height: 15px; }
.searchbox input { padding-left: 32px; }

/* Global search dropdown */
#global-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 320px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow-md); max-height: 420px; overflow-y: auto; z-index: 60; padding: 6px;
}
.search-group { padding: 6px 4px; }
.search-group-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 700; padding: 4px 8px; }
.search-result-item {
  display: flex; justify-content: space-between; gap: 10px; padding: 8px 8px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.search-result-item:hover { background: var(--surface-sunk); }
.search-empty { padding: 14px 10px; font-size: 12.5px; color: var(--muted); }

/* Filter chips */
.chiprow { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 6px 12px; border-radius: 100px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line-strong); color: var(--slate); background: var(--surface);
}
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Landing */
.landing {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 20% 15%, #1b212b 0%, var(--ink) 55%);
  color: #fff; text-align: center; padding: 24px;
}
.landing .mark {
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 26px;
}
.landing .mark svg { display: block; width: 100%; height: 100%; }
.landing h1 { font-size: 44px; color: #fff; max-width: 640px; line-height: 1.12; margin-bottom: 18px; }
.landing p.sub { font-size: 16px; color: #a9adb6; max-width: 480px; line-height: 1.6; margin-bottom: 34px; }
.landing .foot { margin-top: 40px; font-size: 12.5px; color: #6b6f7a; }
.landing .ledger-preview { margin-top: 56px; width: 100%; max-width: 720px; }

/* Recommendation box */
.reco-box {
  background: var(--brass-wash); border: 1px solid #ecd8ba; border-radius: 8px; padding: 16px 18px;
  display: flex; gap: 12px; align-items: flex-start;
}
.reco-box .icon { color: var(--brass); flex-shrink: 0; margin-top: 1px; }
.reco-box p { font-size: 13.5px; line-height: 1.55; color: #5c4322; }

/* Assistant */
.chat-shell { display: flex; flex-direction: column; height: calc(100vh - 64px - 56px); }
.chat-log { flex: 1; overflow-y: auto; padding: 24px 0; display: flex; flex-direction: column; gap: 16px; }
.msg { max-width: 620px; padding: 12px 15px; border-radius: 10px; font-size: 13.5px; line-height: 1.6; overflow-wrap: break-word; word-break: break-word; }
.msg.user { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 2px; }
.msg.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 2px; }
.msg-table-wrap { margin-top: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.suggested-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.suggested-chip {
  padding: 9px 14px; border-radius: 100px; border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.suggested-chip:hover { border-color: var(--brass); color: var(--brass); }
.chat-input-row { display: flex; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); background: var(--paper); }
.chat-input-row input { flex: 1; }

/* Kanban (Renewal Center) */
.kanban { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; align-items: start; overflow-x: auto; }
.kanban-col { background: var(--surface-sunk); border-radius: 10px; padding: 12px; min-width: 190px; }
.kanban-col-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--slate); margin-bottom: 10px; padding: 0 4px; display: flex; justify-content: space-between; }
.kanban-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 9px;
  font-size: 12.5px; box-shadow: var(--shadow-sm);
}
.kanban-card .tenant { font-weight: 700; margin-bottom: 3px; }
.kanban-card .prop { color: var(--muted); font-size: 11.5px; margin-bottom: 8px; }
.kanban-card .days { font-family: var(--font-mono); font-size: 11px; color: var(--brass); }

/* Responsive */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-main-side, .grid-main-side-b { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .sidebar { position: fixed; left: -100%; z-index: 50; transition: left 0.2s; box-shadow: var(--shadow-md); width: min(var(--sidebar-w), 84vw); }
  .sidebar.open { left: 0; }
  .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(20,24,31,0.45); z-index: 40; }
  .sidebar-backdrop.show { display: block; }
  .grid-4, .grid-3 { grid-template-columns: 1fr 1fr; }
  .view-body { padding: 16px; }
  .kanban { grid-template-columns: 1fr 1fr; }
  .landing h1 { font-size: 30px; }
  .menu-btn { display: inline-flex !important; }
}
.menu-btn { display: none; }

/* ---------- Mobile header polish (phones only — not reported broken at
   tablet widths, so this stays scoped to genuinely narrow viewports) ---------- */
@media (max-width: 600px) {
  /* Topbar: title truncates instead of pushing actions off-screen; search
     collapses behind a toggle button; Upload Lease goes icon-only. */
  .topbar { padding: 0 12px; gap: 8px; height: 56px; }
  .topbar-title { font-size: 15.5px; }
  .topbar-actions { gap: 6px; }
  .search-toggle-btn { display: inline-flex; padding: 8px; }
  #global-search-wrap { display: none; max-width: none !important; }
  #global-search-wrap.mobile-open {
    display: flex; position: fixed; top: 56px; left: 0; right: 0; z-index: 45;
    padding: 10px 12px; background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  #global-search-results { position: fixed; left: 12px; right: 12px; top: 108px; max-height: calc(100vh - 130px); }
  .upload-btn { padding: 8px; }
  .upload-btn .btn-label { display: none; }
  .avatar { width: 26px; height: 26px; font-size: 10.5px; }
}

/* ---------- Content polish: tables, ledger, stepper, assistant ----------
   Scoped to 800px, not 600px. The sidebar itself only collapses to a
   hamburger below 760px (see the 760px breakpoint above), so a viewport
   in the 760-800px range still has the full desktop sidebar eating real
   width while getting none of the compacting below — the narrowest
   effective content area of any width, not the widest. Anything sized to
   fit a 390px phone already fits comfortably here too. */
@media (max-width: 800px) {
  .view-body { padding: 12px; }
  .section-head h2 { font-size: 16px; }
  .card { padding: 14px; }
  /* Dashboard ledger: was a single flex row with overflow-x:auto and no
     scroll affordance, so 4 of its 6 stats were silently invisible off
     the right edge on a phone. A 2-column grid surfaces all of them at
     once instead of a scroll a mobile user had no reason to try. */
  .ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; padding: 18px 16px; overflow-x: visible; }
  .ledger-item { min-width: 0; flex: none; border-right: none; margin-right: 0; padding-right: 0; }
  .ledger-value { font-size: 20px; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }

  /* Portfolio / Critical Dates / Communications / Renewal Records /
     Command Center's upcoming-dates preview: stacked cards instead of a
     cramped, horizontally-scrolling table. Desktop keeps every column;
     this only changes presentation at these narrower widths. */
  table.mobile-cards { display: block; border-collapse: separate; }
  table.mobile-cards thead { display: none; }
  table.mobile-cards tbody { display: block; padding: 10px 0; }
  table.mobile-cards tr {
    display: flex; flex-direction: column; gap: 5px;
    border: 1px solid var(--line); border-radius: 8px;
    margin: 0 12px 10px; padding: 12px 14px; background: var(--surface);
  }
  table.mobile-cards td {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 2px 0; border: none; font-size: 12.5px; white-space: normal;
  }
  table.mobile-cards td::before {
    content: attr(data-label); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--muted); font-weight: 600; flex-shrink: 0;
  }
  table.mobile-cards td:first-child {
    order: -2; display: block; font-size: 14px; font-weight: 700;
    padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
  }
  table.mobile-cards td:first-child::before { content: none; }
  table.mobile-cards td:last-child { order: -1; justify-content: flex-end; padding: 0; }
  table.mobile-cards td:last-child::before { content: none; }

  /* Activity Log: a narrative feed reads better than a label/value table
     here, so instead of the generic mobile-cards pattern this reorders
     the same four cells (via CSS `order`, desktop DOM/column order is
     untouched) into Action (headline) -> Detail (subtitle) -> Timestamp +
     Actor (small metadata), matching how an activity feed is normally
     scanned. */
  table.mobile-cards-activity { display: block; }
  table.mobile-cards-activity thead { display: none; }
  table.mobile-cards-activity tbody { display: block; padding: 10px 0; }
  table.mobile-cards-activity tr {
    display: flex; flex-direction: column; gap: 4px;
    border: 1px solid var(--line); border-radius: 8px;
    margin: 0 12px 10px; padding: 12px 14px; background: var(--surface);
  }
  table.mobile-cards-activity td { display: block; padding: 0; border: none; font-size: 12.5px; white-space: normal; }
  table.mobile-cards-activity td:nth-child(3) { order: -2; font-size: 14px; font-weight: 700; }
  table.mobile-cards-activity td:nth-child(4) { order: -1; }
  table.mobile-cards-activity td:nth-child(1) { order: 1; font-size: 11px; color: var(--muted); margin-top: 6px; }
  table.mobile-cards-activity td:nth-child(2) { order: 2; margin-top: 2px; }

  /* Upload Lease stepper: the 5-step desktop stepper (dot + label +
     connecting line per step) doesn't fit a narrow viewport at any
     reasonable size without turning into unreadable tick marks. Swap it
     for a compact "Step X of 5" progress readout instead of shrinking
     the same layout. */
  .stepper { display: none; }
  .stepper-mobile { display: block; margin-bottom: 22px; }
  .stepper-mobile-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
  .stepper-mobile-track { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
  .stepper-mobile-fill { height: 100%; background: var(--brass); border-radius: 2px; transition: width 0.2s; }

  /* AI Assistant (v0.7 fix): the v0.5 fix here — `overflow-x: auto` on
     .msg — had a real bug: setting only one overflow axis implicitly
     forces the other axis to `auto` too per the CSS spec, which combined
     with this being a flex-column child made bubbles clip vertically
     instead of growing to fit their content. Wide tables are now wrapped
     in their own `.msg-table-wrap` (see assistant.js) so the bubble
     itself never needs its own scroll behavior — it just wraps text and
     grows with its content, full stop.
     The fixed `calc(100vh - ...)` height on .chat-shell is also a poor
     fit for a real phone (the address bar resizes the visible viewport,
     which 100vh doesn't track) — so at these widths the log becomes part
     of the normal page scroll instead of its own nested scroll region,
     and the input row sticks to the bottom of the viewport as you scroll. */
  .chat-shell { height: auto; }
  .chat-log { overflow-y: visible; padding: 16px 0; gap: 12px; }
  .msg { max-width: calc(100vw - 48px); font-size: 13px; }
  .suggested-row { gap: 6px; margin-bottom: 14px; }
  .suggested-chip { padding: 7px 11px; font-size: 12px; }
  .chat-input-row { position: sticky; bottom: 0; margin: 0 -12px; padding: 12px; }
  .chat-input-row input { min-width: 0; }
}