:root {
    /* Surfaces — cool neutral */
    --paper: #f6f7f9; --paper-warm: #eef1f5; --paper-card: #ffffff;
    /* Text — slate scale */
    --ink: #0f172a; --ink-soft: #334155; --ink-muted: #64748b;
    /* Hairlines */
    --line: #e2e8f0; --line-soft: #eef2f6;
    /* Accent (indigo) — primary highlight / link / focus role */
    --brass: #4f46e5; --brass-dark: #4338ca; --brass-soft: #c7d2fe;
    /* Semantic hues */
    --sage: #16a34a; --rust: #dc2626; --plum: #7c3aed; --amber: #b45309;
    --surge: #ea580c; /* Surge Spaces brand orange */
    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.05);
    --shadow-md: 0 6px 20px rgba(15,23,42,0.08);
    --shadow-lg: 0 16px 40px rgba(15,23,42,0.14);
  }
  html, body { background: var(--paper); color: var(--ink); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-feature-settings: 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  .font-display { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.021em; }
  .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
  .text-ink { color: var(--ink); } .text-ink-soft { color: var(--ink-soft); } .text-muted { color: var(--ink-muted); }
  .bg-paper { background: var(--paper); } .bg-paper-warm { background: var(--paper-warm); } .bg-paper-card { background: var(--paper-card); }
  .bg-ink { background: var(--ink); } .bg-brass { background: var(--brass); }
  .text-brass { color: var(--brass); } .text-brass-dark { color: var(--brass-dark); }
  .text-sage { color: var(--sage); } .text-rust { color: var(--rust); } .text-plum { color: var(--plum); } .text-amber { color: var(--amber); }
  .text-surge { color: var(--surge); }
  .border-line { border-color: var(--line); } .border-line-soft { border-color: var(--line-soft); }
  .relative-content { position: relative; z-index: 1; }
  .nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: all 0.15s; letter-spacing: -0.005em; }
  @media (hover: hover) { .nav-item:hover { background: var(--paper-warm); color: var(--ink); } }
  .nav-item.active { background: rgba(79,70,229,0.09); color: var(--brass-dark); font-weight: 600; }
  /* Indented child rows inside an expanded group in the property nav */
  .nav-item-child { padding-left: 32px; font-size: 12.5px; color: var(--ink-muted); }
  @media (hover: hover) { .nav-item-child:hover { color: var(--ink); } }
  /* Subtle marker for a group whose currently-open building is among its children */
  .nav-group-has-active { color: var(--ink); font-weight: 600; }
  .nav-section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); padding: 0 12px; margin-bottom: 6px; }
  .card { background: var(--paper-card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); transition: all 0.2s; }
  @media (hover: hover) { .card-hover:hover { border-color: var(--ink-soft); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(15,23,42,0.06); } }
  /* Group cards: stacked-paper visual hint behind the card, suggesting multiple buildings */
  .card-group { position: relative; box-shadow: var(--shadow-md); }
  @media (hover: hover) { .card-group.card-hover:hover { box-shadow: var(--shadow-lg); } }
  .group-flyout { position: absolute; inset: 0; z-index: 30; background: var(--paper-card);
      display: none; flex-direction: column; }
  .card-group.open .group-flyout { display: flex; animation: groupFlyoutIn 0.16s ease-out; }
  .group-flyout-header { display: flex; align-items: center; justify-content: space-between;
      padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
  .group-flyout-list { flex: 1; overflow-y: auto; }
  .group-flyout-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px;
      cursor: pointer; border-bottom: 1px solid var(--line-soft); }
  @media (hover: hover) { .group-flyout-item:hover { background: var(--paper-warm); } }
  .group-flyout-item:last-child { border-bottom: none; }
  .group-flyout-thumb { width: 44px; height: 32px; background-size: cover; background-position: center;
      background-color: var(--paper-warm); border: 1px solid var(--line-soft); border-radius: 2px; flex-shrink: 0; }
  @keyframes groupFlyoutIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
  /* Summary row in the flyout — reads like a building row but tinted to stand apart. */
  .group-flyout-summary { background: color-mix(in srgb, var(--brass) 6%, transparent); }
  @media (hover: hover) { .group-flyout-summary:hover { background: color-mix(in srgb, var(--brass) 11%, transparent); } }
  .group-flyout-summary-icon { width: 44px; height: 32px; display: flex; align-items: center; justify-content: center;
      color: var(--brass); background: color-mix(in srgb, var(--brass) 12%, var(--paper-card));
      border: 1px solid color-mix(in srgb, var(--brass) 25%, transparent); border-radius: 2px; flex-shrink: 0; }
  /* Lifecycle tabs — split a group's buildings into Active / In Construction / Planned. */
  .group-flyout-tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--line-soft);
      overflow-x: auto; flex-shrink: 0; }
  .group-flyout-tab { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer;
      padding: 6px 11px; border: none; background: none; font-size: 12px; font-weight: 500; color: var(--ink-muted);
      border-bottom: 2px solid transparent; margin-bottom: -1px; }
  @media (hover: hover) { .group-flyout-tab:hover { color: var(--ink); } }
  .group-flyout-tab.active { color: var(--brass); border-bottom-color: var(--brass); }
  .gf-tab-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 1px 5px; border-radius: 999px;
      background: var(--paper-warm); color: var(--ink-muted); border: 1px solid var(--line-soft); }
  .group-flyout-tab.active .gf-tab-count { background: color-mix(in srgb, var(--brass) 12%, var(--paper-card));
      color: var(--brass); border-color: color-mix(in srgb, var(--brass) 25%, transparent); }
  /* Group settings — per-building rows with a lifecycle status dropdown. */
  .group-mem-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 4px; }
  @media (hover: hover) { .group-mem-row:hover { background: var(--paper-card); } }
  .group-mem-check { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; margin: 0; }
  .group-mem-info { min-width: 0; }
  .group-mem-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .group-mem-addr { font-size: 11px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .group-mem-status { flex-shrink: 0; max-width: 150px; font-size: 12px; padding: 4px 8px; border: 1px solid var(--line);
      border-radius: 4px; background: var(--paper-card); color: var(--ink); cursor: pointer; }
  .group-mem-section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted);
      font-weight: 600; margin: 2px 2px 4px; }
  .group-mem-add-toggle { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 6px; margin-top: 6px;
      background: none; border: none; border-top: 1px solid var(--line-soft); font-size: 12px; font-weight: 500;
      color: var(--ink); cursor: pointer; }
  @media (hover: hover) { .group-mem-add-toggle:hover { color: var(--brass); } }
  .group-mem-add-toggle i { transition: transform 0.15s ease; }
  .group-mem-add-toggle.open i { transform: rotate(90deg); }
  /* Group summary popup */
  .gsum-totals { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 14px 16px;
      background: var(--paper-warm); border: 1px solid var(--line-soft); border-radius: 6px; margin-bottom: 16px; }
  .gsum-tile { text-align: left; }
  .gsum-buildings { display: flex; flex-direction: column; gap: 18px; }
  .gsum-building { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--paper-card); }
  .gsum-building-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 10px 14px; cursor: pointer; background: var(--paper-warm); border-bottom: 1px solid var(--line-soft);
      transition: background 0.12s ease; }
  @media (hover: hover) { .gsum-building-head:hover { background: color-mix(in srgb, var(--brass) 7%, var(--paper-warm)); } }
  .gsum-table-wrap { overflow-x: auto; }
  .gsum-table { margin: 0; }
  /* On phones the per-building tenant table is swapped for the same card list
     used on the Units/Tenants tab (see the mobile media query below). */
  .gsum-mobile { display: none; }
  @media (max-width: 640px) {
    .gsum-totals { grid-template-columns: repeat(3, 1fr); }
  }
  .property-img { aspect-ratio: 4/3; background-size: cover; background-position: center; position: relative; overflow: hidden; background-color: var(--paper-warm); }
  .property-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15,23,42,0.4)); }
  .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
  .pill-dot { width: 6px; height: 6px; border-radius: 50%; }
  .pill-occupied { background: rgba(22,163,74,0.12); color: var(--sage); } .pill-occupied .pill-dot { background: var(--sage); }
  .pill-vacant { background: rgba(220,38,38,0.12); color: var(--rust); } .pill-vacant .pill-dot { background: var(--rust); }
  .pill-notice { background: rgba(79,70,229,0.15); color: var(--brass-dark); } .pill-notice .pill-dot { background: var(--brass); }
  .pill-overdue { background: var(--rust); color: white; }
  .pill-due-soon { background: rgba(79,70,229,0.15); color: var(--brass-dark); }
  .pill-scheduled { background: var(--paper-warm); color: var(--ink-soft); border: 1px solid var(--line); }
  .pill-done { background: rgba(22,163,74,0.12); color: var(--sage); }
  /* Task priority */
  .pill-priority-low    { background: var(--paper-warm); color: var(--ink-soft); border: 1px solid var(--line); }
  .pill-priority-medium { background: var(--paper-warm); color: var(--ink-soft); border: 1px solid var(--line); }
  .pill-priority-high   { background: rgba(79,70,229,0.15); color: var(--brass-dark); }
  .pill-priority-urgent { background: var(--rust); color: #fff; }
  /* Generic avatar (timeline, kanban initials, mentions). Use the same class
     everywhere so we never style avatars inline again. */
  .avatar { display: inline-flex; align-items: center; justify-content: center; color: white; font-weight: 600; border-radius: 50%; flex-shrink: 0; }
  .avatar-xs { width: 20px; height: 20px; font-size: 9px; }
  .avatar-sm { width: 24px; height: 24px; font-size: 10px; }
  .avatar-md { width: 28px; height: 28px; font-size: 10.5px; }
  .type-tag { display: inline-flex; align-items: center; padding: 2px 7px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--line); color: var(--ink-soft); background: var(--paper-card); border-radius: 2px; }
  /* Property hero "back to portfolio" pill — an unmistakable, high-contrast
     return path that reads the same over any hero image, desktop or mobile. */
  .hero-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: #fff; background: rgba(15,23,42,0.42); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; transition: background 0.15s, border-color 0.15s; -webkit-tap-highlight-color: transparent; }
  @media (hover: hover) { .hero-back:hover { background: rgba(15,23,42,0.62); border-color: rgba(255,255,255,0.5); } }
  .hero-back i { flex: 0 0 auto; }
  /* Data Rooms lives in the desktop stats band; on the hero it's a mobile-only
     primary action, so hide it here and reveal it in the phone media query.
     Filled indigo (vs. the translucent back pill) marks it as the main CTA. */
  .hero-share { display: none; background: var(--brass); border-color: rgba(255,255,255,0.35); }
  @media (hover: hover) { .hero-share:hover { background: var(--brass-dark); border-color: rgba(255,255,255,0.6); } }
  .btn-primary { background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; cursor: pointer; }
  @media (hover: hover) { .btn-primary:hover { background: var(--ink-soft); } }
  .btn-secondary { background: transparent; color: var(--ink); padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; cursor: pointer; }
  @media (hover: hover) { .btn-secondary:hover { background: var(--paper-warm); border-color: var(--ink-soft); } }
  .btn-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--line); background: var(--paper-card); cursor: pointer; transition: all 0.15s; color: var(--ink-soft); }
  @media (hover: hover) { .btn-icon:hover { background: var(--paper-warm); color: var(--ink); } }
  .btn-danger { background: var(--rust); color: white; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; cursor: pointer; border: none; }
  @media (hover: hover) { .btn-danger:hover { background: #9a4a30; } }
  .tab { padding: 10px 2px; margin-right: 24px; font-size: 13.5px; font-weight: 500; color: var(--ink-muted); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s; letter-spacing: -0.005em; }
  @media (hover: hover) { .tab:hover { color: var(--ink-soft); } }
  .tab.active { color: var(--ink); border-bottom-color: var(--brass); }
  /* Mobile section picker: a native <select> replaces the horizontal tab scroll
     on phones (shown via the media query below). Hidden on desktop. */
  .tabs-mobile { display: none; }
  .tab-select-wrap { position: relative; }
  .tab-select { appearance: none; -webkit-appearance: none; width: 100%; border: none; background: transparent; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); padding: 13px 34px 13px 0; cursor: pointer; }
  .tab-select:focus { outline: none; }
  .tab-select-chevron { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--brass); pointer-events: none; }
  .kpi-value { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 30px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .kpi-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
  /* Collapsible KPI header — desktop always shows the strip, so the toggle is
     hidden here and only appears in the mobile card layout. */
  .kpi-toggle { display: none; }
  .kpi-toggle-chevron { transition: transform 0.2s ease; }
  #kpi-section.kpi-open .kpi-toggle-chevron { transform: rotate(180deg); }
  .progress-track { height: 4px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
  .progress-fill { height: 100%; background: var(--ink); border-radius: 2px; transition: width 0.4s ease; }
  .progress-fill.brass { background: var(--brass); } .progress-fill.sage { background: var(--sage); } .progress-fill.rust { background: var(--rust); }
  table.data-table { width: 100%; border-collapse: collapse; }
  .data-table th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--paper-warm); }
  .data-table td { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink-soft); }
  @media (hover: hover) { .data-table tr:hover td { background: rgba(79,70,229,0.04); } }
  .data-table tr:last-child td { border-bottom: none; }
  .data-table tr.editable { cursor: pointer; }
  /* Archived-lease history — a quiet, collapsed-by-default panel under the units table */
  .lease-history { overflow: hidden; }
  .lease-history-summary { display: flex; align-items: center; gap: 8px; padding: 13px 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); list-style: none; user-select: none; }
  .lease-history-summary::-webkit-details-marker { display: none; }
  @media (hover: hover) { .lease-history-summary:hover { background: var(--paper-warm); } }
  .lease-history-summary .chevron { color: var(--ink-muted); transition: transform 0.15s; }
  .lease-history[open] > .lease-history-summary .chevron { transform: rotate(90deg); }
  .lease-history[open] > .lease-history-summary { border-bottom: 1px solid var(--line); }
  /* ===== Mobile rent roll (phone-only card list; hidden on desktop) ===== */
  .units-mobile { display: none; }
  .unit-card { padding: 12px 15px; border-bottom: 1px solid var(--line-soft); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .unit-card:last-child { border-bottom: none; }
  .unit-card:active { background: var(--paper-warm); }
  .unit-card-static { cursor: default; }
  .unit-card-static:active { background: none; }
  .uc-top { display: flex; align-items: baseline; gap: 10px; }
  .uc-num { flex: 0 0 auto; min-width: 30px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; font-weight: 700; color: var(--ink); }
  .uc-tenant { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .uc-tenant-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
  .uc-tenant-wrap .uc-tenant { flex: 0 1 auto; }
  .uc-rent { flex: 0 0 auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
  .uc-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 3px; padding-left: 40px; }
  .uc-meta-left { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .uc-signal { flex: 0 0 auto; font-size: 12px; text-align: right; }
  .uc-muted { color: var(--ink-muted); font-style: italic; font-weight: 500; }
  .uc-chip { flex: 0 0 auto; display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--ink-muted); background: var(--paper-warm); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
  /* ===== Mobile documents (phone-only card list; hidden on desktop) ===== */
  .docs-mobile { display: none; }
  .doc-card { display: block; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
  .doc-card:last-child { border-bottom: none; }
  .doc-card:active { background: var(--paper-warm); }
  .doc-card-static:active { background: none; }
  .dc-top { display: flex; align-items: center; gap: 10px; }
  .dc-icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ink-muted); }
  .dc-name-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
  .dc-name { flex: 0 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dc-tag { flex: 0 0 auto; font-size: 10.5px; font-weight: 600; color: var(--ink-muted); background: var(--paper-warm); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
  .dc-open { flex: 0 0 auto; width: 15px; height: 15px; color: var(--ink-muted); }
  .dc-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 3px; padding-left: 26px; }
  .dc-meta-left { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dc-exp { flex: 0 0 auto; font-size: 12px; font-weight: 500; }
  .dc-up { flex: 0 0 auto; font-size: 12px; color: var(--ink-muted); }
  /* ===== Document folders (collapsible, grouped by type) ===== */
  .doc-folders { display: flex; flex-direction: column; gap: 10px; }
  .doc-folder-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ink); -webkit-tap-highlight-color: transparent; }
  @media (hover: hover) { .doc-folder-head:hover { background: var(--paper-warm); } }
  .df-chev { flex: 0 0 auto; width: 15px; height: 15px; color: var(--ink-muted); transition: transform 0.15s; }
  .doc-folder.open .df-chev { transform: rotate(90deg); }
  .df-icon { flex: 0 0 auto; width: 17px; height: 17px; color: var(--brass-dark); }
  .df-title { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .df-count { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--ink-muted); background: var(--paper-warm); border: 1px solid var(--line); border-radius: 10px; min-width: 20px; text-align: center; padding: 0 6px; }
  .df-alert { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
  .doc-folder-body { display: none; border-top: 1px solid var(--line-soft); }
  .doc-folder.open .doc-folder-body { display: block; }
  .doc-folder.open .doc-folder-head { border-bottom: 1px solid transparent; }
  /* Tenant table — expandable multi-unit groups */
  .tenant-group-summary .chevron-toggle { display: inline-block; margin-right: 8px; padding: 2px 4px; color: var(--ink-muted); cursor: pointer; transition: transform 0.15s, color 0.15s; vertical-align: -2px; }
  @media (hover: hover) { .tenant-group-summary .chevron-toggle:hover { color: var(--ink); } }
  .tenant-group-summary.expanded .chevron-toggle { transform: rotate(90deg); }
  .tenant-group-detail.hidden { display: none; }
  .tenant-group-detail td { background: rgba(79,70,229,0.03); font-size: 12.5px; color: var(--ink-muted); }
  .tenant-group-detail td:first-child { padding-left: 36px; }
  /* Storage unit-mix — collapsible category bands (collapsed by default) */
  .storage-cat-summary { cursor: pointer; }
  .storage-cat-summary .chevron-toggle { display: inline-block; margin-right: 8px; padding: 2px 4px; color: var(--ink-muted); transition: transform 0.15s, color 0.15s; vertical-align: -2px; }
  @media (hover: hover) { .storage-cat-summary:hover .chevron-toggle { color: var(--ink); } }
  .storage-cat-summary.expanded .chevron-toggle { transform: rotate(90deg); }
  .storage-cat-detail.hidden { display: none; }
  /* Inline-editable rent + occupancy */
  .storage-rent-edit { display: inline-flex; align-items: baseline; gap: 1px; }
  .storage-rent-prefix { color: var(--ink-muted); }
  .storage-rent-input, .storage-occ-input { font-family: inherit; font-size: 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; text-align: right; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
  .storage-rent-input { width: 64px; }
  .storage-occ-input { width: 44px; }
  @media (hover: hover) { .storage-rent-input:hover, .storage-occ-input:hover { border-color: var(--ink-muted); } }
  .storage-rent-input:focus, .storage-occ-input:focus { outline: none; border-color: var(--brass); background: white; box-shadow: 0 0 0 3px rgba(79,70,229,0.12); }
  .storage-occ-input.has-vacancy { color: var(--rust); font-weight: 600; border-color: rgba(220,38,38,0.4); }
  /* Actionable cue in the table meta line: reveals every category's editable rows in one click */
  .storage-edit-hint { font: inherit; color: var(--brass); font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; }
  @media (hover: hover) { .storage-edit-hint:hover { text-decoration: underline; } }
  .kpi-sub { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
  .code-blur { filter: blur(6px); user-select: none; transition: filter 0.2s; }
  .code-revealed .code-blur { filter: blur(0); }
  /* Access & Codes header: the info banner and the Add-Code button sit side by
     side on desktop; the phone media query stacks them (button first, full-width). */
  .access-head { display: flex; align-items: flex-start; gap: 12px; }
  .access-alert { flex: 1 1 auto; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 8px; background: rgba(79,70,229,0.08); border: 1px solid var(--brass-soft); }
  .access-add { flex: 0 0 auto; }
  .search-input { background: var(--paper-card); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px 7px 34px; font-size: 13px; width: 100%; transition: all 0.15s; }
  .search-input:focus { outline: none; border-color: var(--brass); background: white; box-shadow: 0 0 0 3px rgba(79,70,229,0.12); }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .fade-up { animation: fadeUp 0.4s ease-out both; }
  .fade-up-1 { animation-delay: 0.05s; } .fade-up-2 { animation-delay: 0.1s; } .fade-up-3 { animation-delay: 0.15s; } .fade-up-4 { animation-delay: 0.2s; }
  .mono-block { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--ink); color: var(--paper); padding: 14px 16px; border-radius: 8px; letter-spacing: 0.01em; }
  .kanban-col { background: var(--paper-warm); border: 1px solid var(--line); border-radius: 8px; padding: 12px; min-height: 400px; }
  .kanban-card { background: var(--paper-card); border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 3px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
  @media (hover: hover) { .kanban-card:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(15,23,42,0.06); } }
  .kanban-card.priority-high { border-left-color: var(--rust); }
  .kanban-card.priority-medium { border-left-color: var(--brass); }
  .kanban-card.priority-low { border-left-color: var(--sage); }
  /* Small status tag at the top of a kanban card. Reads quickly without
     fighting the title for attention. Per-status classes drive both
     background and text color so yellow doesn't get white text. */
  .kanban-status-tag { display: inline-block; padding: 1px 7px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 2px; margin-bottom: 6px; }
  .kanban-status-tag-on_track    { background: #16d093; color: #fff; }
  .kanban-status-tag-in_progress { background: #fdab3d; color: #fff; }
  .kanban-status-tag-waiting     { background: #a25ddc; color: #fff; }
  .kanban-status-tag-stuck       { background: #e2445c; color: #fff; }
  .kanban-status-tag-delayed     { background: #ff7043; color: #fff; }
  .kanban-status-tag-abandoned   { background: #595959; color: #fff; }
  .kanban-card-done { background: var(--paper-card); border: 1px solid var(--line); border-left: 3px solid var(--ink-muted); border-radius: 3px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; transition: all 0.15s; opacity: 0.78; }
  @media (hover: hover) { .kanban-card-done:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(15,23,42,0.06); opacity: 1; } }
  /* Slim "task in a list" row used by the project panel and other inline task lists. */
  .task-list-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-bottom: 1px solid var(--line-soft); cursor: pointer; border-radius: 3px; }
  @media (hover: hover) { .task-list-row:hover { background: var(--paper-warm); } }
  .task-list-row:last-child { border-bottom: none; }

  /* ============== MONDAY-STYLE TASK TABLE ============== */
  /* Full-bleed colored status cells + chunky group bars + inline cell editing
     anchored to the cell (not modal). This is the primary Tasks surface. */

  /* overflow-x: auto so the table never clips at narrow widths — Person
     column was getting trimmed by the parent container before. overflow-y
     stays visible so border-radius rounds cleanly. */
  .task-board { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; overflow-x: auto; overflow-y: visible; }

  /* Column grid template — task title is flexible; the rest are fixed widths.
     Order: handle | title | status | priority | due | property | person.
     Repeating tasks render the schedule label as a small pill inline with
     the date, so the Due column is wider to keep everything on one line. */
  .task-table-header,
  .task-tr {
    display: grid;
    grid-template-columns: 28px minmax(220px, 1fr) 160px 100px 210px 180px 80px;
    align-items: center;
  }
  .task-table-header {
    background: var(--paper-warm);
    border-bottom: 1px solid var(--line);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .task-th { padding: 9px 12px; }
  .task-th-handle { padding: 0; }

  /* Group bars — color block at left, chunky text, count, chevron */
  .task-group { border-bottom: 1px solid var(--line); }
  .task-group:last-child { border-bottom: none; }
  .task-group-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--paper-card);
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background 150ms ease-out;
  }
  @media (hover: hover) { .task-group-bar:hover { background: var(--paper-warm); } }
  .task-group-bar::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--accent, var(--ink-muted));
  }
  .task-group-bar .chev { transition: transform 200ms ease-out; color: var(--ink-muted); }
  .task-group.collapsed .chev { transform: rotate(-90deg); }
  .task-group.collapsed .task-tr,
  .task-group.collapsed .task-tr-add { display: none; }
  .task-group-name { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
  .task-group-count { font-size: 11.5px; color: var(--ink-muted); font-family: 'JetBrains Mono', ui-monospace, monospace; padding: 1px 7px; background: var(--paper-warm); border-radius: 10px; }

  /* Rows */
  .task-tr {
    background: var(--paper-card);
    border-bottom: 1px solid var(--line-soft);
    min-height: 38px;
    transition: background 120ms ease-out, transform 120ms ease-out;
    position: relative;
  }
  .task-tr:last-child { border-bottom: none; }
  @media (hover: hover) { .task-tr:hover { background: var(--paper); } }
  @media (hover: hover) { .task-tr:hover .task-row-handle i { opacity: 0.4; } }
  .task-row-handle { display: flex; align-items: center; justify-content: center; height: 100%; cursor: grab; }
  .task-row-handle i { opacity: 0; transition: opacity 120ms; color: var(--ink-muted); }
  .task-tr[draggable="true"] { cursor: default; } /* row stays default; handle shows grab */
  .task-tr.dragging { opacity: 0.4; }
  .task-tr.dragging .task-row-handle { cursor: grabbing; }
  /* Drop indicators — thin brass line above or below the target row. */
  .task-tr.drop-above::before {
    content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
    background: var(--brass); z-index: 10;
    box-shadow: 0 0 6px rgba(79,70,229,0.6);
  }
  .task-tr.drop-below::after {
    content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
    background: var(--brass); z-index: 10;
    box-shadow: 0 0 6px rgba(79,70,229,0.6);
  }
  /* Group bar drop target — light up the accent strip & background. */
  .task-group-bar.drop-into {
    background: rgba(79,70,229,0.10);
  }
  .task-group-bar.drop-into::before {
    width: 6px;
    box-shadow: 0 0 8px rgba(79,70,229,0.6);
  }
  /* "+ Add task" drop target — same brass line as a row drop-below */
  .task-tr-add.drop-into {
    background: var(--paper-warm);
    position: relative;
  }
  .task-tr-add.drop-into::before {
    content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
    background: var(--brass); z-index: 10;
    box-shadow: 0 0 6px rgba(79,70,229,0.6);
  }

  /* Title cell — clickable, opens the side panel. Wraps so long titles
     stay readable; the row's grid-row height grows to fit. */
  .task-td-title {
    padding: 8px 12px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--ink);
    cursor: pointer;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    border-right: 1px solid var(--line-soft);
  }
  @media (hover: hover) { .task-td-title:hover { color: var(--brass-dark); } }
  .task-td-title.done { color: var(--ink-muted); text-decoration: line-through; }

  /* All non-title cells separated by a faint vertical line */
  .task-td { border-right: 1px solid var(--line-soft); min-width: 0; }
  .task-td:last-child { border-right: none; }

  /* Keyboard-focus ring on task table cells. Drawn as an inset shadow so it
     doesn't reflow the grid layout. */
  .task-td-title:focus,
  .task-td:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--brass-dark);
  }
  .task-td-title:focus { background: rgba(79,70,229, 0.04); }

  /* Status cell — the cell IS the color. Click for popover.
     Saturated Monday-palette hexes so cells pop at a glance; the rest of the
     app stays on our muted paper-warm brand. */
  .task-cell-status {
    display: flex; align-items: center; justify-content: center;
    padding: 8px 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    cursor: pointer;
    transition: filter 150ms ease-out, background-color 200ms ease-out;
    height: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (hover: hover) { .task-cell-status:hover { filter: brightness(1.06); } }
  .task-cell-status.empty       { background: #c4c4c4; color: #fff; }
  .task-cell-status-open        { background: #c4c4c4; color: #fff; }     /* Not Started — Monday gray */
  .task-cell-status-on_track    { background: #16d093; color: #fff; }     /* On Track — bright teal-green */
  .task-cell-status-in_progress { background: #fdab3d; color: #fff; }     /* Working on it — Monday orange */
  .task-cell-status-waiting     { background: #a25ddc; color: #fff; }     /* Awaiting Response — purple */
  .task-cell-status-stuck       { background: #e2445c; color: #fff; }     /* Stuck — Monday coral red */
  .task-cell-status-delayed     { background: #ff7043; color: #fff; }     /* Delayed — peach-orange */
  .task-cell-status-done        { background: #00c875; color: #fff; }     /* Done — Monday green */
  .task-cell-status-abandoned   { background: #595959; color: #fff; }     /* Abandoned — dark gray */

  /* Priority cell — saturated for high/urgent, muted for low/medium */
  .task-cell-priority {
    display: flex; align-items: center; justify-content: center;
    padding: 8px 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: filter 150ms ease-out;
    height: 100%;
    text-align: center;
  }
  @media (hover: hover) { .task-cell-priority:hover { filter: brightness(1.05); } }
  .task-cell-priority-low      { background: #eaeef2; color: #6b7280; }   /* Low — pale slate */
  .task-cell-priority-medium   { background: #cbd2db; color: #444; }      /* Medium — slate */
  .task-cell-priority-high     { background: #5559df; color: #fff; }      /* High — Monday indigo */
  .task-cell-priority-urgent   { background: #bb3354; color: #fff; }      /* Urgent — deep red */

  /* Due date cell — flex layout keeps the date and the recurrence pill on
     one row even when both are present. Color codes by urgency. */
  .task-td-due {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 10px;
    font-size: 12.5px;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 120ms;
    overflow: hidden;
    white-space: nowrap;
    height: 100%;
  }
  @media (hover: hover) { .task-td-due:hover { background: var(--paper-warm); } }
  .task-td-due.overdue { color: var(--rust); font-weight: 600; }
  .task-td-due.today { color: var(--brass-dark); font-weight: 600; }
  .task-td-due.empty { color: var(--ink-muted); font-style: italic; }
  .task-td-due.has-time { font-size: 11.5px; }
  .task-td-due .due-main { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  /* Small inline pill that names the recurrence schedule ("Weekly",
     "Every 3 weeks"). Sits next to the date in the same row. */
  .due-repeat-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--brass-dark);
    background: rgba(79,70,229,0.14);
    padding: 2px 7px;
    border-radius: 9px;
    flex-shrink: 0;
    text-transform: none;
  }
  .due-repeat-pill i { width: 10px; height: 10px; }

  /* Property cell — clickable, opens the property/group picker popover */
  .task-td-property {
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 100%;
  }
  @media (hover: hover) { .task-td-property:hover { background: var(--paper-warm); } }
  .task-td-property.empty { color: var(--ink-muted); font-style: italic; }
  .task-td-property .group-icon { color: var(--brass-dark); flex-shrink: 0; }

  /* Property/Group picker popover */
  .pp-search-wrap { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); background: var(--paper-warm); }
  .pp-search-wrap input {
    width: 100%; border: 1px solid var(--line); border-radius: 8px;
    padding: 6px 9px; font-size: 13px; outline: none; background: white;
    color: var(--ink);
  }
  .pp-search-wrap input:focus { border-color: var(--ink-soft); }
  .pp-list { max-height: 380px; overflow-y: auto; }
  .pp-section {
    padding: 7px 12px 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background: var(--paper-warm);
    border-top: 1px solid var(--line-soft);
  }
  .pp-section:first-child { border-top: none; }
  .pp-group-row { font-weight: 600; }
  .pp-group-row i { color: var(--brass-dark); }
  .pp-child-row { padding-left: 36px !important; font-size: 12.5px; color: var(--ink-soft); }
  .pp-bldg-count {
    margin-left: auto; font-size: 9.5px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-muted);
    padding: 1px 6px; background: var(--paper-warm); border-radius: 8px;
  }
  .pp-empty { padding: 16px; text-align: center; color: var(--ink-muted); font-size: 12px; font-style: italic; }
  /* Multi-select check column — sits at the left of each toggleable property row */
  .pp-check {
    width: 16px; height: 16px;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--line);
    border-radius: 3px;
    background: white;
    color: white;
  }
  .pp-check.on { background: var(--brass-dark); border-color: var(--brass-dark); }
  .pp-check.on i { display: block; }
  .pp-child-row .pp-check { margin-right: 2px; }

  /* Property display in the side panel — replaces the old Combo with a
     click-to-open trigger that mirrors the Monday table cell behavior. */
  .task-property-trigger {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 10px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 120ms;
    min-height: 32px;
  }
  @media (hover: hover) { .task-property-trigger:hover { border-color: var(--ink-soft); } }
  .task-property-trigger.empty { color: var(--ink-muted); font-style: italic; }
  .task-property-trigger .group-icon { color: var(--brass-dark); }
  .task-property-trigger .chev { margin-left: auto; color: var(--ink-muted); }

  /* Person cell — avatar circle prominent */
  .task-td-person {
    display: flex; align-items: center; justify-content: center;
    padding: 6px 8px;
    cursor: pointer;
    height: 100%;
    transition: background 120ms;
  }
  @media (hover: hover) { .task-td-person:hover { background: var(--paper-warm); } }
  .task-td-person .avatar { width: 28px; height: 28px; font-size: 11px; }
  .task-td-person .empty-avatar { width: 28px; height: 28px; border-radius: 50%; border: 1.5px dashed var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: 11px; }

  /* Inline "+ Add task" row */
  .task-tr-add {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    padding: 9px 12px;
    cursor: pointer;
    color: var(--ink-muted);
    font-size: 12.5px;
    background: var(--paper-card);
    border-top: 1px solid var(--line-soft);
    transition: background 120ms, color 120ms;
  }
  @media (hover: hover) { .task-tr-add:hover { background: var(--paper-warm); color: var(--ink); } }
  .task-tr-add .add-icon { display: flex; align-items: center; justify-content: center; }
  .task-tr-add input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    width: 100%;
    color: var(--ink);
    padding: 0;
  }

  /* Cell popover (status / priority / assignee picker) */
  .cell-popover {
    position: fixed;
    z-index: 1300;
    background: white;
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(15,23,42,0.18);
    min-width: 200px;
    max-width: 320px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    animation: cellPopoverIn 150ms ease-out;
  }
  @keyframes cellPopoverIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .cell-popover-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 13px;
    transition: background 100ms;
  }
  @media (hover: hover) { .cell-popover-option:hover { background: var(--paper-warm); } }
  .cell-popover-option.active { background: var(--paper-warm); font-weight: 600; }
  /* Keyboard-driven highlight ring — paired with up/down nav inside any popover */
  .cell-popover-option.keyboard-highlight { background: rgba(79,70,229, 0.12); box-shadow: inset 2px 0 0 var(--brass-dark); }
  .cell-popover-option.keyboard-highlight.active { background: rgba(79,70,229, 0.18); }

  /* Segmented date / time inputs in the due popover */
  .date-time-segments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
  }
  .date-segment {
    width: 32px;
    text-align: center;
    padding: 6px 4px;
    border: 1px solid var(--line);
    border-radius: 3px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px;
    background: white;
    color: var(--ink);
    appearance: none;
  }
  #due-yyyy { width: 56px; }
  .date-segment::placeholder { color: var(--ink-muted); }
  .date-segment:focus { outline: none; border-color: var(--ink); background: rgba(79,70,229, 0.06); }
  .segment-sep { color: var(--ink-muted); font-weight: 600; font-size: 14px; padding: 0 1px; }
  .segment-gap { width: 12px; }

  /* Toggle button that opens / closes the inline calendar */
  .cal-toggle-btn {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    width: 100%;
    padding: 7px 12px;
    margin-top: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--paper-warm);
    color: var(--ink-soft);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
  }
  @media (hover: hover) { .cal-toggle-btn:hover { background: white; border-color: var(--line); color: var(--ink); } }
  .cal-toggle-btn:focus, .cal-toggle-btn.keyboard-highlight {
    background: rgba(79,70,229, 0.08);
    border-color: var(--brass-dark);
    color: var(--ink);
  }
  .cal-toggle-btn.open { background: white; color: var(--ink); }
  .cal-toggle-btn i { color: var(--brass-dark); }

  /* Inline month calendar inside the due popover */
  .due-calendar {
    margin: 10px 0 2px;
    padding: 8px 6px 6px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--paper-warm);
    outline: none;
  }
  .due-calendar:focus { box-shadow: 0 0 0 2px rgba(79,70,229, 0.30); }
  .cal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 2px 6px;
  }
  .cal-nav {
    width: 22px; height: 22px;
    border: 1px solid transparent; border-radius: 3px;
    background: transparent; color: var(--ink-soft);
    font-size: 15px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  @media (hover: hover) { .cal-nav:hover { border-color: var(--line); background: white; color: var(--ink); } }
  .cal-title { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
  .cal-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr);
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-muted); text-align: center; padding-bottom: 4px;
  }
  .cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  }
  .cal-day {
    aspect-ratio: 1;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--ink);
    font-size: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    cursor: pointer;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  @media (hover: hover) { .cal-day:hover { background: white; border-color: var(--line); } }
  .cal-day.other-month { color: var(--ink-muted); opacity: 0.5; }
  .cal-day.today { font-weight: 700; color: var(--brass-dark); }
  .cal-day.selected { background: var(--brass-dark); color: white; border-color: var(--brass-dark); }
  .cal-day.kbd-focus { box-shadow: inset 0 0 0 2px var(--ink); }
  .cal-day.selected.kbd-focus { box-shadow: inset 0 0 0 2px white; }
  .cell-popover-swatch {
    width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
  }

  /* View switcher (Table | Board) */
  .view-switcher { display: inline-flex; background: var(--paper-warm); border: 1px solid var(--line); border-radius: 5px; padding: 2px; gap: 2px; }
  .view-switcher button {
    background: transparent;
    border: none;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 120ms, color 120ms;
  }
  @media (hover: hover) { .view-switcher button:hover { color: var(--ink); } }
  .view-switcher button.active { background: var(--paper-card); color: var(--ink); box-shadow: 0 1px 2px rgba(15,23,42,0.05); }

  /* Filter chip row — sits above the table/board, applies to both views. */
  .filter-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-soft);
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 16px;
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
  }
  @media (hover: hover) { .filter-chip:hover { background: var(--paper-warm); color: var(--ink); } }
  .filter-chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .filter-chip-count { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; opacity: 0.7; }
  .filter-chip.active .filter-chip-count { opacity: 0.8; }

  .filter-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 4px 10px;
    min-width: 200px;
    transition: border-color 120ms;
  }
  .filter-search:focus-within { border-color: var(--ink-soft); }
  .filter-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 13px; color: var(--ink); }
  .filter-search input::placeholder { color: var(--ink-muted); }
  .filter-search .lucide { color: var(--ink-muted); }

  /* Confetti celebration on task done — twin-cannon burst from the bottom
     corners. Outer .confetti-piece handles translate (parabolic arc with
     gravity easing); inner .confetti-spinner handles rotation. Separating
     the two avoids the transform-clash that prevents combining two
     animations on a single element. Mixed shapes for visual variety. */
  .confetti-burst { position: fixed; inset: 0; pointer-events: none; z-index: 5000; overflow: hidden; }
  .confetti-piece {
    position: absolute;
    opacity: 0;
    will-change: transform, opacity;
    animation: confetti-fly var(--duration, 2s) forwards;
  }
  .confetti-spinner {
    background: var(--color);
    will-change: transform;
    animation: confetti-spin var(--spin-dur, 0.6s) linear infinite;
  }
  .confetti-spinner.shape-square { width: 9px;  height: 9px;  }
  .confetti-spinner.shape-rect   { width: 6px;  height: 14px; }
  .confetti-spinner.shape-ribbon { width: 4px;  height: 20px; border-radius: 2px; }
  .confetti-spinner.shape-circle { width: 9px;  height: 9px;  border-radius: 50%; }
  /* Parabolic arc — ease-out on the way up (decelerating against gravity),
     ease-in on the way down (accelerating under gravity), then a quick fade. */
  @keyframes confetti-fly {
    0% {
      opacity: 1;
      transform: translate(0, 0);
      animation-timing-function: cubic-bezier(0.2, 0.6, 0.45, 1);
    }
    25% {
      opacity: 1;
      transform: translate(calc(var(--dx) * 0.4), var(--peak));
      animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4);
    }
    92% {
      opacity: 1;
      transform: translate(calc(var(--dx) * 0.95), calc(var(--peak) + var(--fall) * 0.92));
    }
    100% {
      opacity: 0;
      transform: translate(var(--dx), calc(var(--peak) + var(--fall)));
    }
  }
  @keyframes confetti-spin {
    to { transform: rotate(var(--spin-turns, 720deg)); }
  }
  .label-divider { display: flex; align-items: center; gap: 12px; margin: 32px 0 16px; }
  .label-divider::before, .label-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
  .label-divider-text { font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-muted); }
  .photo-tile { aspect-ratio: 1; background-size: cover; background-position: center; border-radius: 3px; cursor: pointer; transition: all 0.2s; border: 1px solid var(--line); background-color: var(--paper-warm); }
  @media (hover: hover) { .photo-tile:hover { transform: scale(1.02); border-color: var(--surge); } }
  .photo-tile-wrap { position: relative; cursor: pointer; }
  .photo-hero-badge { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 6px; border-radius: 4px; background: rgba(15,23,42,0.78); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; pointer-events: none; }
  .photo-hero-badge i { color: #fbbf24; }
  /* Global photo library */
  .photo-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 16px; }
  .photo-lib-card { background: var(--paper-card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
  @media (hover: hover) { .photo-lib-card:hover { border-color: var(--brass-soft); box-shadow: var(--shadow-md); transform: translateY(-1px); } }
  .photo-lib-card.selected { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass), var(--shadow-md); }
  .photo-lib-thumb { position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--paper-warm); cursor: pointer; }
  .photo-lib-check { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.92); border: 1px solid rgba(15,23,42,0.18); color: transparent; cursor: pointer; transition: all 0.12s; box-shadow: var(--shadow-sm); }
  @media (hover: hover) { .photo-lib-card:hover .photo-lib-check { border-color: var(--brass); } }
  .photo-lib-check.on { background: var(--brass); border-color: var(--brass); color: #fff; }
  .photo-lib-cat { position: absolute; bottom: 8px; left: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(15,23,42,0.74); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: capitalize; pointer-events: none; }
  .photo-lib-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 9px 10px; }
  .photo-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .photo-chip-property { background: var(--brass-soft); color: var(--brass-dark); }
  .photo-chip-group { background: #ede9fe; color: var(--plum); }
  .photo-chip-none { background: var(--paper-warm); color: var(--ink-muted); border: 1px dashed var(--line); }
  .photo-chip-dataroom { background: #d1fae5; color: #047857; }
  .photo-lib-actionbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 16px; background: var(--paper-card); border: 1px solid var(--brass-soft); border-radius: 10px; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 5; }
  /* Segmented control + assignment checklist (upload & assign modals) */
  .seg-control { display: inline-flex; gap: 2px; padding: 3px; background: var(--paper-warm); border-radius: 8px; }
  .seg-btn { padding: 5px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-muted); cursor: pointer; transition: all 0.12s; border: none; background: transparent; }
  @media (hover: hover) { .seg-btn:hover { color: var(--ink); } }
  .seg-btn.active { background: var(--paper-card); color: var(--ink); box-shadow: var(--shadow-sm); }
  .assign-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
  .assign-row { display: flex; align-items: center; gap: 10px; padding: 8px 11px; cursor: pointer; border-bottom: 1px solid var(--line-soft); transition: background 0.12s; }
  .assign-row:last-child { border-bottom: none; }
  @media (hover: hover) { .assign-row:hover { background: var(--paper-warm); } }
  .assign-row.on { background: rgba(79,70,229,0.06); }
  .assign-box { flex-shrink: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line); border-radius: 5px; color: #fff; background: var(--paper-card); transition: all 0.12s; }
  .assign-box-radio { border-radius: 50%; }
  .assign-box svg { opacity: 0; transition: opacity 0.12s; }
  .assign-row.on .assign-box { background: var(--brass); border-color: var(--brass); }
  .assign-row.on .assign-box svg { opacity: 1; }
  .assign-row-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .assign-row-text > span:first-child { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .assign-row-sub { font-size: 11px; color: var(--ink-muted); margin-top: 1px; }
  /* Photo lightbox */
  .pv-backdrop { position: fixed; inset: 0; z-index: 150; display: none; align-items: center; justify-content: center; background: rgba(15,23,42,0.86); opacity: 0; transition: opacity 0.18s; }
  .pv-backdrop.show { display: flex; opacity: 1; }
  .pv-img { max-width: min(92vw, 1200px); max-height: 84vh; object-fit: contain; border-radius: 6px; box-shadow: 0 16px 48px rgba(0,0,0,0.5); background: var(--ink); }
  .pv-close { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,0.1); color: #fff; border: none; cursor: pointer; transition: background 0.15s; }
  @media (hover: hover) { .pv-close:hover { background: rgba(255,255,255,0.22); } }
  .pv-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; border: none; cursor: pointer; transition: background 0.15s; }
  @media (hover: hover) { .pv-arrow:hover { background: rgba(255,255,255,0.22); } }
  .pv-arrow:disabled { opacity: 0; pointer-events: none; }
  .pv-prev { left: 20px; }
  .pv-next { right: 20px; }
  .pv-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; background: linear-gradient(to top, rgba(15,23,42,0.72), transparent); }
  .pv-meta { display: flex; align-items: center; gap: 12px; min-width: 0; color: #fff; }
  .pv-count { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); white-space: nowrap; }
  .pv-caption { font-size: 13px; color: rgba(255,255,255,0.92); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pv-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .pv-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 6px; background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.18); font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
  @media (hover: hover) { .pv-btn:hover { background: rgba(255,255,255,0.24); } }
  .pv-btn.active { background: #fbbf24; border-color: #fbbf24; color: var(--ink); }
  @media (hover: hover) { .pv-btn.danger:hover { background: var(--rust); border-color: var(--rust); } }
  .pv-dataroom { display: inline-flex; align-items: center; gap: 8px; padding-right: 10px; margin-right: 2px; border-right: 1px solid rgba(255,255,255,0.18); }
  .pv-dr-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
  .pv-btn.pv-dr-btn.active { background: #10b981; border-color: #10b981; color: #fff; }
  .cmd-key { font-family: 'JetBrains Mono', monospace; font-size: 10px; background: var(--paper-warm); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; color: var(--ink-muted); }
  .view { display: none; }
  .view.active { display: block; }
  .logo-mark { width: 32px; height: 32px; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; border-radius: 8px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: -0.03em; }
  .surge-badge { background: var(--surge); color: white; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; padding: 1px 5px; border-radius: 2px; text-transform: uppercase; }
  .toast { position: fixed; bottom: 24px; right: 24px; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; box-shadow: 0 8px 24px rgba(15,23,42,0.18); z-index: 200; opacity: 0; transform: translateY(8px); transition: all 0.2s; pointer-events: none; max-width: 320px; }
  .toast.show { opacity: 1; transform: translateY(0); }
  .conn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 0 rgba(22,163,74,0.6); animation: pulseDot 2s infinite; flex-shrink: 0; }
  .conn-dot.offline { background: var(--rust); animation: none; }
  @keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.4); } 50% { box-shadow: 0 0 0 4px rgba(22,163,74,0); } }
  .modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.5); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; backdrop-filter: blur(2px); }
  .modal-backdrop.show { display: flex; }
  .modal-content { background: var(--paper-card); border: 1px solid var(--line); border-radius: 6px; max-width: 520px; width: 100%; padding: 24px; max-height: 90vh; overflow-y: auto; }
  /* ---------- Units manager ---------- */
  #units-manager-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 2px 2px 2px 0; }
  .units-mgr-row { display: grid; grid-template-columns: minmax(78px, 1fr) 84px minmax(84px, 1.3fr) auto auto auto; align-items: center; gap: 10px; }
  .units-mgr-row .input-field { padding: 7px 9px; font-size: 13px; }
  .units-mgr-num { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
  .units-mgr-sqft { font-family: 'JetBrains Mono', monospace; }
  .units-mgr-status { font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .units-mgr-status.is-occupied { color: var(--ink-soft); font-weight: 500; }
  .units-mgr-excl { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-muted); cursor: pointer; white-space: nowrap; }
  .units-mgr-excl input { cursor: pointer; margin: 0; }
  .units-mgr-del[disabled] { opacity: 0.32; cursor: not-allowed; }
  @media (hover: hover) { .units-mgr-del:not([disabled]):hover { color: var(--rust); } }
  .units-mgr-empty { font-size: 13px; color: var(--ink-muted); font-style: italic; padding: 14px 4px; }
  .units-mgr-add { display: grid; grid-template-columns: minmax(78px, 1fr) 84px auto; gap: 10px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
  @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .input-field { width: 100%; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 13.5px; font-family: 'Inter', sans-serif; }
  .input-field:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(79,70,229,0.12); }
  select.input-field { background: white; }
  /* Hide number-input spinner arrows app-wide - nobody uses the step buttons. */
  .input-field[type=number]::-webkit-outer-spin-button,
  .input-field[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .input-field[type=number] { -moz-appearance: textfield; appearance: textfield; }
  @keyframes rowFlash { 0% { background: rgba(79,70,229,0.18); } 100% { background: transparent; } }
  .row-flash { animation: rowFlash 1.4s ease-out; }
  .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; color: var(--ink-muted); text-align: center; gap: 6px; }
  .empty-state .empty-state-title { font-size: 13.5px; color: var(--ink-soft); font-weight: 500; }
  .empty-state .empty-state-hint  { font-size: 12px;   color: var(--ink-muted); }
  /* Compact variant for inline empty states inside panels, table bodies, etc. */
  .empty-state-compact { padding: 14px 8px; font-style: italic; }
  .empty-state-compact .empty-state-title { font-size: 12.5px; font-style: italic; font-weight: 400; }
  .empty-state-compact .empty-state-hint  { display: none; }
  .step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--paper-warm); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--ink-muted); transition: all 0.2s; }
  .step-num.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .step-num.done { background: var(--sage); color: white; border-color: var(--sage); }
  .review-row { display: flex; padding: 4px 0; }
  .review-label { width: 130px; color: var(--ink-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding-top: 1px; }
  .review-val { flex: 1; color: var(--ink); font-weight: 500; }
  .image-drop { position: relative; border: 2px dashed var(--line); border-radius: 6px; padding: 32px 20px; text-align: center; cursor: pointer; background: var(--paper-warm); transition: all 0.15s; min-height: 140px; display: flex; align-items: center; justify-content: center; }
  @media (hover: hover) { .image-drop:hover { border-color: var(--brass); background: rgba(79,70,229,0.04); } }
  .image-drop.drag-over { border-color: var(--brass); background: rgba(79,70,229,0.08); }
  .image-drop.has-image { padding: 0; border-style: solid; border-color: var(--line); }
  .hidden-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  #image-drop-preview { aspect-ratio: 16/9; background-size: cover; background-position: center; }
  .archived-banner { background: rgba(79,70,229,0.12); border: 1px solid var(--brass-soft); color: var(--brass-dark); padding: 10px 16px; border-radius: 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
  /* searchable combobox */
  .combo { position: relative; }
  .combo-input { width: 100%; background: white; border: 1px solid var(--line); border-radius: 8px; padding: 8px 32px 8px 12px; font-size: 13.5px; font-family: 'Inter', sans-serif; cursor: pointer; }
  .combo-input:focus { outline: none; border-color: var(--ink); }
  .combo-chevron { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-muted); }
  .combo-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,0.12); z-index: 1000; max-height: 280px; overflow-y: auto; display: none; }
  .combo-panel.open { display: block; }
  .combo-option { padding: 8px 12px; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid var(--line-soft); transition: background 0.1s; }
  .combo-option:last-child { border-bottom: none; }
  @media (hover: hover) { .combo-option:hover, .combo-option.highlighted { background: var(--paper-warm); } }
  .combo-option.selected { background: rgba(79,70,229,0.08); font-weight: 500; }
  .combo-option .option-sub { font-size: 11.5px; color: var(--ink-muted); margin-top: 1px; }
  .combo-option .option-create { color: var(--brass-dark); font-weight: 500; }
  .combo-option .match { background: rgba(79,70,229,0.25); font-weight: 600; }
  .combo-empty { padding: 14px 12px; font-size: 12.5px; color: var(--ink-muted); font-style: italic; text-align: center; }
  .combo-group-label { padding: 10px 12px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); background: var(--paper-warm); border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; }
  /* task side panel */
  .panel-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: none; z-index: 90; backdrop-filter: blur(1px); }
  .panel-backdrop.show { display: block; }
  .side-panel { position: fixed; top: 0; right: 0; height: 100vh; width: 580px; max-width: 100vw; background: var(--paper-card); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); z-index: 100; display: flex; flex-direction: column; }
  .side-panel.show { transform: translateX(0); box-shadow: -8px 0 32px rgba(15,23,42,0.12); }

  /* ============== TASK PANEL — Monday-feel, Asana-skeleton ==============
     A 4px colored accent strip at the very top sets visual tone from the
     status. Header is a clean breadcrumb + close on top, then title + done
     toggle. Below the header sits a chunky chip row with Status / Priority /
     Due / Assignee / Property pills — each opens the same popover the
     Monday table uses. Below that, three clear sections with left-accent
     dividers: Description, Attachments, Activity. */
  .task-status-strip {
    height: 4px;
    width: 100%;
    background: var(--ink-muted);
    transition: background 200ms ease-out;
    flex-shrink: 0;
  }
  .task-status-strip.status-open        { background: #c4c4c4; }
  .task-status-strip.status-on_track    { background: #16d093; }
  .task-status-strip.status-in_progress { background: #fdab3d; }
  .task-status-strip.status-waiting     { background: #a25ddc; }
  .task-status-strip.status-stuck       { background: #e2445c; }
  .task-status-strip.status-delayed     { background: #ff7043; }
  .task-status-strip.status-done        { background: #00c875; }
  .task-status-strip.status-abandoned   { background: #595959; }

  .task-panel-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--line-soft); position: relative; }
  .task-panel-breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: var(--ink-muted);
    margin-bottom: 12px;
    min-height: 16px;
  }
  .task-panel-breadcrumb .crumb-sep { color: var(--ink-muted); }

  .task-panel-title-row { display: flex; align-items: flex-start; gap: 10px; }
  .task-done-circle {
    background: transparent; border: 2px solid var(--ink-muted);
    border-radius: 50%; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; margin-top: 6px;
    transition: all 150ms ease-out;
  }
  @media (hover: hover) { .task-done-circle:hover { border-color: var(--sage); background: rgba(0,200,117,0.08); } }
  .task-done-circle.done { background: #00c875; border-color: #00c875; }
  .task-done-circle.done i { color: white; }
  .task-done-circle i { color: transparent; transition: color 150ms; }
  @media (hover: hover) { .task-done-circle:hover i { color: var(--sage); } }
  @media (hover: hover) { .task-done-circle.done:hover i { color: white; } }

  .task-title-input {
    flex: 1;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    background: transparent;
    border: 1px solid transparent;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 5px;
    color: var(--ink);
    width: 100%;
    resize: none;
    /* textarea — let long titles wrap; height is set via autoGrowTitle JS */
    overflow: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    min-height: 32px;
  }
  @media (hover: hover) { .task-title-input:hover { border-color: var(--line-soft); } }
  .task-title-input:focus { outline: none; border-color: var(--ink); background: white; }
  .task-title-input.done { color: var(--ink-muted); text-decoration: line-through; }

  /* Chip row — the Monday-style chunky pills under the title */
  .task-chip-row {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--paper-warm);
  }
  .task-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 120ms, background 120ms, filter 150ms ease-out;
    min-height: 30px;
  }
  @media (hover: hover) { .task-chip:hover { border-color: var(--ink-soft); } }
  .task-chip:focus, .task-chip:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px rgba(79,70,229, 0.30); }
  .task-chip .chip-label { color: var(--ink-muted); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
  .task-chip .chip-value { color: var(--ink); font-weight: 600; }
  .task-chip .chev { color: var(--ink-muted); opacity: 0.55; }

  /* Status / priority chips are FULL-COLOR — same DNA as the Monday table cells */
  .task-chip-color {
    border: none;
    color: #fff;
    padding: 6px 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  @media (hover: hover) { .task-chip-color:hover { filter: brightness(1.06); border: none; } }
  .task-chip-color .chev { color: rgba(255,255,255,0.7); opacity: 1; }

  .task-chip-status-open        { background: #c4c4c4; }
  .task-chip-status-on_track    { background: #16d093; }
  .task-chip-status-in_progress { background: #fdab3d; }
  .task-chip-status-waiting     { background: #a25ddc; }
  .task-chip-status-stuck       { background: #e2445c; }
  .task-chip-status-delayed     { background: #ff7043; }
  .task-chip-status-done        { background: #00c875; }
  .task-chip-status-abandoned   { background: #595959; }
  .task-chip-priority-low      { background: #eaeef2; color: #6b7280; }
  .task-chip-priority-low .chev { color: rgba(107,114,128,0.7); }
  .task-chip-priority-medium   { background: #cbd2db; color: #444; }
  .task-chip-priority-medium .chev { color: rgba(68,68,68,0.7); }
  .task-chip-priority-high     { background: #5559df; }
  .task-chip-priority-urgent   { background: #bb3354; }

  .task-chip-assignee .avatar { width: 22px; height: 22px; font-size: 9.5px; }
  .task-chip-assignee .empty-avatar { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: 11px; }

  /* Stacked avatar group — up to 3 overlap, the rest collapses into a +N pill */
  .avatar-stack { display: inline-flex; align-items: center; }
  .avatar-stack .avatar-stack-item { display: inline-flex; }
  .avatar-stack .avatar-stack-item + .avatar-stack-item { margin-left: -7px; }
  .avatar-stack .avatar-stack-item .avatar { border: 2px solid var(--paper-card); }
  .avatar-stack-sm .avatar-stack-item + .avatar-stack-item { margin-left: -6px; }
  .avatar-stack-sm .avatar-stack-item .avatar { border-width: 1.5px; }
  .avatar-stack-more {
    margin-left: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--paper-warm);
    border: 2px solid var(--paper-card);
    color: var(--ink-soft);
    font-size: 10px;
    font-weight: 600;
  }
  .avatar-stack-sm .avatar-stack-more { width: 22px; height: 22px; font-size: 9.5px; border-width: 1.5px; margin-left: -6px; }
  .task-chip-property .group-icon { color: var(--brass-dark); }
  .task-chip-due.overdue { color: var(--rust); }

  /* Sections — chunky left-accent dividers in the body */
  .task-section { padding: 18px 22px; border-bottom: 1px solid var(--line-soft); }
  .task-section:last-child { border-bottom: none; }
  .task-section-header {
    display: flex; align-items: center;
    font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-muted);
    margin-bottom: 12px;
    padding-left: 10px;
    position: relative;
  }
  .task-section-header::before {
    content: ''; position: absolute; left: 0; top: 1px; bottom: 1px; width: 3px;
    background: var(--brass); border-radius: 2px;
  }
  .task-section-header .section-action { margin-left: auto; }
  .task-section-empty { padding: 14px 8px 8px; color: var(--ink-muted); font-size: 12.5px; font-style: italic; }

  /* Subtasks list inside the task panel */
  .subtask-list { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; }
  .subtask-row {
    display: grid;
    grid-template-columns: 22px 1fr auto auto 22px;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    border-radius: 8px;
  }
  @media (hover: hover) { .subtask-row:hover { background: var(--paper-warm); } }
  .subtask-check {
    width: 18px; height: 18px;
    border: 1.5px solid var(--line);
    border-radius: 5px;
    background: white;
    color: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  @media (hover: hover) { .subtask-check:hover { border-color: var(--ink-soft); } }
  .subtask-check.done { background: var(--sage); border-color: var(--sage); }
  .subtask-title-input {
    border: 1px solid transparent;
    background: transparent;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 13px;
    color: var(--ink);
    min-width: 0;
    width: 100%;
  }
  @media (hover: hover) { .subtask-title-input:hover { border-color: var(--line-soft); background: white; } }
  .subtask-title-input:focus { outline: none; border-color: var(--ink); background: white; }
  .subtask-title-input.done { color: var(--ink-muted); text-decoration: line-through; }
  .subtask-due, .subtask-assignee {
    border: 1px solid var(--line-soft);
    background: var(--paper-warm);
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 11.5px;
    color: var(--ink-soft);
    cursor: pointer;
    white-space: nowrap;
    display: flex; align-items: center; gap: 4px;
  }
  .subtask-due { font-family: 'JetBrains Mono', ui-monospace, monospace; }
  .subtask-due.empty { color: var(--ink-muted); font-style: italic; }
  .subtask-due.overdue { color: var(--rust); font-weight: 600; }
  .subtask-due.today { color: var(--brass-dark); font-weight: 600; }
  @media (hover: hover) { .subtask-due:hover, .subtask-assignee:hover { border-color: var(--line); background: white; } }
  .subtask-assignee { padding: 2px 6px; min-width: 30px; justify-content: center; }
  .subtask-empty-avatar { width: 22px; height: 22px; font-size: 11px; }
  .subtask-delete { color: var(--ink-muted); opacity: 0; transition: opacity 120ms; }
  @media (hover: hover) { .subtask-row:hover .subtask-delete { opacity: 0.8; } }
  @media (hover: hover) { .subtask-delete:hover { color: var(--rust); } }

  /* "+ Add subtask" inline input below the list */
  .subtask-add-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 4px;
    border-radius: 8px;
    margin-top: 2px;
    color: var(--ink-muted);
  }
  @media (hover: hover) { .subtask-add-row:hover { background: var(--paper-warm); } }
  .subtask-add-row .add-icon { color: var(--brass-dark); }
  .subtask-add-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--ink);
    outline: none;
    padding: 4px 0;
  }
  .subtask-add-input::placeholder { color: var(--ink-muted); }

  /* Subtask count badge on the kanban row title cell */
  .task-td-title {
    display: flex; align-items: center; gap: 10px;
  }
  .task-td-title-text { flex: 1; min-width: 0; }
  .subtask-badge {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--paper-warm);
    color: var(--ink-muted);
    font-size: 10.5px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-weight: 600;
    border: 1px solid var(--line-soft);
  }
  .subtask-badge.all-done { background: rgba(22,163,74,0.12); color: var(--sage); border-color: rgba(22,163,74,0.30); }
  .subtask-badge i { width: 10px; height: 10px; }

  /* Composer — rounded, padded, prominent Post button */
  .panel-composer { border-top: 1px solid var(--line); padding: 14px 18px 16px; background: var(--paper-card); flex-shrink: 0; }
  .composer-textarea {
    border-radius: 6px;
    padding: 10px 12px;
    transition: border-color 150ms;
  }
  .task-post-btn {
    padding: 8px 16px;
    font-weight: 600;
    border-radius: 5px;
    background: var(--ink);
    color: var(--paper);
    transition: filter 150ms, transform 80ms ease-out;
  }
  @media (hover: hover) { .task-post-btn:hover { filter: brightness(1.1); } }
  .task-post-btn:active { transform: scale(0.97); }

  /* Within the task panel only, the description textarea uses the section
     body styling — no inner border (the section header is the divider). */
  #task-panel .panel-desc-input { border: 1px solid transparent; padding: 8px 10px; }
  @media (hover: hover) { #task-panel .panel-desc-input:hover { border-color: var(--line-soft); } }
  #task-panel .panel-desc-input:focus { border-color: var(--ink); background: white; outline: none; }

  .panel-header { padding: 18px 22px 12px; border-bottom: 1px solid var(--line-soft); position: relative; }
  .panel-close { position: absolute; top: 12px; right: 14px; }
  .panel-meta { padding: 12px 22px; border-bottom: 1px solid var(--line-soft); background: var(--paper-warm); display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
  .panel-meta-item { display: flex; flex-direction: column; gap: 4px; }
  .panel-meta-item .kpi-label { font-size: 10px; }
  .panel-meta-item .input-field { padding: 6px 10px; font-size: 12.5px; }
  .panel-meta-item .combo-input { padding: 6px 26px 6px 10px; font-size: 12.5px; }
  .panel-scroll { flex: 1; overflow-y: auto; }
  .panel-body { padding: 18px 22px 8px; }
  .panel-composer { border-top: 1px solid var(--line); padding: 12px 18px 14px; background: var(--paper-card); flex-shrink: 0; }
  .panel-title-input { width: 100%; font-family: 'Inter', system-ui, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; background: transparent; border: 1px solid transparent; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; color: var(--ink); }
  @media (hover: hover) { .panel-title-input:hover { border-color: var(--line-soft); } }
  .panel-title-input:focus { outline: none; border-color: var(--ink); background: white; }
  .panel-desc-input { width: 100%; min-height: 60px; resize: vertical; font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); background: transparent; border: 1px solid transparent; padding: 8px 10px; border-radius: 8px; }
  @media (hover: hover) { .panel-desc-input:hover { border-color: var(--line-soft); } }
  .panel-desc-input:focus { outline: none; border-color: var(--ink); background: white; color: var(--ink); }
  .update-list { display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; }
  .update-item { display: flex; gap: 10px; align-items: flex-start; }
  .update-avatar { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 10.5px; font-weight: 600; }
  .update-bubble { flex: 1; min-width: 0; }
  .update-meta { font-size: 11.5px; color: var(--ink-muted); margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
  .update-author { color: var(--ink); font-weight: 600; }
  .update-body { font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
  .update-delete { opacity: 0; transition: opacity 0.15s; background: transparent; border: none; color: var(--ink-muted); cursor: pointer; padding: 0 4px; font-size: 11px; }
  @media (hover: hover) { .update-item:hover .update-delete { opacity: 1; } }
  @media (hover: hover) { .update-delete:hover { color: var(--rust); } }
  .update-system { font-size: 12px; color: var(--ink-muted); padding: 2px 0; display: flex; align-items: center; gap: 8px; }
  .update-system i { color: var(--brass); flex-shrink: 0; }
  .mention-pill { display: inline; background: rgba(79,70,229,0.15); color: var(--brass-dark); padding: 1px 5px; border-radius: 3px; font-weight: 500; }
  .composer-textarea { width: 100%; min-height: 44px; max-height: 140px; resize: none; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.5; background: white; color: var(--ink); }
  .composer-textarea:focus { outline: none; border-color: var(--ink); }
  .composer-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
  .mention-popup { position: absolute; background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,0.14); z-index: 1200; max-height: 240px; overflow-y: auto; width: 260px; bottom: calc(100% + 6px); left: 0; }
  .mention-popup .mp-option { padding: 7px 12px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-soft); }
  .mention-popup .mp-option:last-child { border-bottom: none; }
  @media (hover: hover) { .mention-popup .mp-option:hover, .mention-popup .mp-option.highlighted { background: var(--paper-warm); } }
  .mp-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; font-weight: 600; flex-shrink: 0; }
  .attachments-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .attachment-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--paper-warm); border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; max-width: 260px; position: relative; }
  @media (hover: hover) { .attachment-item:hover .att-remove { opacity: 1; } }
  .attachment-item .att-info { flex: 1; min-width: 0; }
  .attachment-item .att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 500; display: block; }
  .attachment-item .att-meta { color: var(--ink-muted); font-size: 11px; }
  .attachment-thumb { width: 32px; height: 32px; border-radius: 3px; background-size: cover; background-position: center; background-color: var(--line-soft); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-muted); }
  .att-remove { opacity: 0; transition: opacity 0.15s; background: transparent; border: none; color: var(--ink-muted); cursor: pointer; padding: 0 2px; }
  @media (hover: hover) { .att-remove:hover { color: var(--rust); } }
  .panel-dropzone { position: absolute; inset: 0; background: rgba(79,70,229,0.14); border: 2px dashed var(--brass); display: none; align-items: center; justify-content: center; color: var(--brass-dark); font-weight: 600; font-size: 14px; z-index: 5; pointer-events: none; gap: 8px; }
  .side-panel.drag-over .panel-dropzone { display: flex; }
  /* unit checklist (multi-unit lease) */
  .unit-checklist { max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: var(--paper-card); }
  .unit-check { display: grid; grid-template-columns: 16px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 3px; font-size: 13px; cursor: pointer; }
  .unit-more-toggle { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--brass-dark); font-size: 12px; font-weight: 500; padding: 6px 8px; margin-top: 2px; border-top: 1px solid var(--line); }
  @media (hover: hover) { .unit-more-toggle:hover { color: var(--brass); } }
  @media (hover: hover) { .unit-check:hover:not(.disabled) { background: var(--paper-warm); } }
  .unit-check.disabled { opacity: 0.5; cursor: not-allowed; }
  .unit-check input[type=checkbox] { margin: 0; }
  .unit-check-num { color: var(--ink); font-weight: 500; }
  .unit-check-sqft { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--ink-muted); }
  .unit-check-status { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 6px; border-radius: 2px; }
  .unit-check-status.vacant { background: rgba(22,163,74,0.12); color: var(--sage); }
  .unit-check-status.occupied { background: rgba(79,70,229,0.12); color: var(--brass-dark); }
  .unit-check-status.current { background: rgba(79,70,229,0.18); color: var(--brass-dark); }
  .unit-check-group-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); padding: 8px 8px 4px; border-top: 1px solid var(--line-soft); margin-top: 2px; }
  .unit-check-group-label:first-child { border-top: none; margin-top: 0; padding-top: 4px; }
  /* sublease rows (single line + expandable detail panel) */
  .sublet-item { border: 1px solid transparent; border-radius: 8px; }
  .sublet-item.open { border-color: var(--line); background: var(--paper-card); padding: 4px 6px 8px; }
  .sublet-expand { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 28px; flex-shrink: 0; background: none; border: none; padding: 0; cursor: pointer; color: var(--ink-muted); transition: color 0.15s; }
  @media (hover: hover) { .sublet-expand:hover { color: var(--brass-dark); } }
  .sublet-expand i { transition: transform 0.15s; }
  .sublet-item.open .sublet-expand i { transform: rotate(90deg); }
  .sublet-detail { margin: 8px 0 2px; padding: 10px 12px; border-radius: 6px; background: var(--paper-warm); border: 1px solid var(--line-soft); }
  .sublet-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  .sublet-field { display: flex; flex-direction: column; gap: 3px; }
  .sublet-field-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
  .sublet-detail-hint { margin-top: 8px; font-size: 11px; color: var(--ink-muted); line-height: 1.4; }
  .sublet-schedule-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
  /* notifications */
  .notif-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-card); cursor: pointer; transition: all 0.15s; }
  @media (hover: hover) { .notif-row:hover { border-color: var(--ink-soft); background: var(--paper-warm); } }
  .notif-row.unread { background: rgba(79,70,229,0.06); border-left: 3px solid var(--brass); }
  .notif-row.unread .notif-msg { color: var(--ink); font-weight: 500; }
  .notif-row .notif-msg { color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }
  .notif-row .notif-meta { font-size: 11.5px; color: var(--ink-muted); margin-top: 3px; }
  .notif-row .notif-snippet { font-size: 12.5px; color: var(--ink-muted); margin-top: 6px; padding: 6px 9px; background: var(--paper-warm); border-radius: 3px; line-height: 1.45; max-width: 100%; overflow: hidden; }
  .notif-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; font-weight: 600; }
  /* ===== Collapsible sidebar (desktop/tablet) ===== */
  .dms-sidebar { transition: width 0.2s cubic-bezier(0.4,0,0.2,1); }
  .dms-sidebar.collapsed { width: 60px !important; }
  .dms-sidebar.collapsed .nav-item { font-size: 0; justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
  .dms-sidebar.collapsed .nav-item > span { display: none; }
  .dms-sidebar.collapsed .nav-section-label,
  .dms-sidebar.collapsed #property-nav-list,
  .dms-sidebar.collapsed [data-collapse-hide] { display: none !important; }
  .dms-sidebar.collapsed .sidebar-header-row { justify-content: center; }
  /* Sidebar brand logo: bigger when expanded, scales to fit the rail when collapsed */
  .sidebar-logo { display: block; height: 44px; width: auto; max-width: 100%; }
  .dms-sidebar.collapsed .sidebar-logo { height: auto; width: 100%; }
  .dms-sidebar.collapsed .sidebar-conn { justify-content: center; }
  .dms-sidebar.collapsed .px-5 { padding-left: 6px; padding-right: 6px; }
  .dms-sidebar.collapsed .px-3 { padding-left: 6px; padding-right: 6px; }
  .sidebar-collapse-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; border: none; background: transparent; color: var(--ink-muted); font-size: 12px; cursor: pointer; border-radius: 8px; transition: background 0.15s; }
  @media (hover: hover) { .sidebar-collapse-btn:hover { background: var(--paper-card); color: var(--ink-soft); } }
  .dms-sidebar.collapsed .sidebar-collapse-btn { justify-content: center; padding: 7px 0; }
  .dms-sidebar.collapsed .sidebar-collapse-btn span { display: none; }
  /* ===== Mobile responsive ===== */
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.45); z-index: 75; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
  .sidebar-toggle-btn { display: none; }
  /* Mobile bottom tab bar is a phones-only component; hidden by default. */
  .mobile-tabbar { display: none; }
  /* "Mobile" is width < 768px OR a touch device in landscape (a phone rotated
     to landscape reports a wide CSS width — >767px — but keeps a short viewport
     and a coarse pointer; without this it would fall back to the desktop layout).
     The desktop query is the exact negation so the two never both apply. */
  @media (min-width: 768px) and (not ((pointer: coarse) and (max-height: 500px))) {
    .sidebar-backdrop { display: none !important; }
    /* Symmetric partner to .mobile-hide below: hide on desktop, show on mobile.
       Used by the portfolio's mobile-only "+ Add" trigger (desktop creates from
       the top-bar "+", which is itself hidden on phones). */
    .desktop-hide { display: none !important; }
  }
  @media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
    .sidebar-toggle-btn { display: inline-flex; }
    .dms-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 80; transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
    .dms-sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(15,23,42,0.18); }
    .side-panel { width: 100vw !important; max-width: 100vw; }
    /* ===== Data tables → stacked label/value cards (the native phone pattern) =====
       Each row becomes a card-like block inside the existing card; the column header
       is mirrored onto each cell as `data-label` (by setupDataTableLabeling() in app.js)
       and surfaced via td::before. No more sideways scroll hiding Status/Cost. */
    /* Units & Tenants and Documents swap their desktop tables for card lists. */
    .units-desktop, .docs-desktop { display: none; }
    .units-mobile, .docs-mobile { display: block; }
    /* Group summary popup does the same: each building's tenant table → cards. */
    .gsum-desktop { display: none; }
    .gsum-mobile { display: block; }
    table.data-table { min-width: 0; }
    .card.overflow-hidden:has(table.data-table) { overflow-x: visible; }
    .data-table thead { display: none; }
    .data-table, .data-table tbody { display: block; width: 100%; }
    .data-table tr { display: block; padding: 11px 15px; border-bottom: 1px solid var(--line); }
    .data-table tr:last-child { border-bottom: none; }
    .data-table td {
      display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
      padding: 4px 0; border: none; font-size: 13.5px; text-align: right; min-width: 0;
    }
    .data-table td::before {
      content: attr(data-label);
      flex: 0 0 auto; text-align: left;
      font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
      color: var(--ink-muted); white-space: nowrap;
    }
    .data-table td:first-child { font-weight: 600; color: var(--ink); }
    /* Empty-state rows (single colspan cell) span the whole card, no label. */
    .data-table td[colspan] { display: block; text-align: center; }
    .data-table td[colspan]::before { content: none; }
    /* Grouped/detail rows leave some cells blank; don't show a stray label for them. */
    .data-table td:empty { display: none; }
    .panel-meta { grid-template-columns: 1fr; }
    .sidebar-collapse-btn { display: none; }
    /* Phones scroll vertically only — nothing can drag the page sideways.
       Genuinely-wide content (data tables) still scrolls inside its own card.
       overscroll-behavior stops the rubber-band from chaining to the page. */
    /* Bottom padding clears the fixed tab bar so the last content isn't hidden. */
    .view { overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    /* Reclaim the desktop 32px page gutters that waste a phone's width. */
    .view.p-8 { padding: 20px 16px calc(64px + env(safe-area-inset-bottom)); }
    .view > .px-8 { padding: 20px 16px; }
    /* Page headers stack (title over actions) instead of overflowing one row. */
    .view .flex.items-end.justify-between { flex-wrap: wrap; align-items: flex-start; gap: 12px 10px; }
    .view .flex.items-end.justify-between > .flex { flex-wrap: wrap; }
    /* Dashboard KPI strips reflow to 2-up so labels aren't crushed/clipped. */
    #kpi-strip, #maint-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* An odd final KPI would sit alone leaving a blank cell — let it span the row. */
    #kpi-strip > div:last-child:nth-child(odd),
    #maint-kpi-strip > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
    /* Portfolio KPIs collapse behind a tap on phones — they're reference metrics,
       not the reason you opened the app on a phone, so they start hidden. */
    .kpi-toggle {
      display: flex; align-items: center; justify-content: space-between; width: 100%;
      padding: 11px 14px; background: var(--paper-card); border: 1px solid var(--line);
      border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--ink-muted);
    }
    #kpi-strip { display: none; margin-top: 10px; }
    #kpi-section.kpi-open #kpi-strip { display: grid; }
    /* Generic phone-only hide (e.g. the rent-roll "Add Unit" action). */
    .mobile-hide { display: none !important; }
    /* Rent roll is read-only on phones: drop the per-row edit/floor-plan action
       column (tapping a lease opens a read-only summary instead). */
    .data-table td.cell-row-actions { display: none; }
    /* Tighten desktop-scale vertical rhythm: 40px section gap is dead space on a phone. */
    .view .mt-10 { margin-top: 24px; }
    /* ===== Touch & viewport ergonomics ===== */
    /* Shell fits the actually-visible viewport — no content cut off behind the
       browser's address/tab bar the way 100vh does on mobile. */
    .h-screen { height: 100dvh; }
    /* 16px form controls stop iOS Safari from auto-zooming when a field is focused. */
    input, select, textarea,
    .input-field, .search-input, .combo-input,
    .task-title-input, .subtask-title-input, .subtask-add-input,
    .composer-textarea, .filter-search input, .pp-search-wrap input { font-size: 16px; }
    /* Finger-friendly touch targets. */
    .btn-icon { width: 40px; height: 40px; }
    /* Text buttons render ~36px tall from their padding alone — below the 44px
       minimum tap target. min-height lifts the hit area without touching font
       size or horizontal padding (inline-flex just re-centers the label). */
    .btn-primary, .btn-secondary { min-height: 44px; }
    .nav-item { padding: 11px 12px; }
    /* ===== Bottom tab bar — the signature "it's an app" primary nav ===== */
    .mobile-tabbar {
      display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
      background: var(--paper-card); border-top: 1px solid var(--line);
      padding-bottom: env(safe-area-inset-bottom);
      box-shadow: 0 -1px 12px rgba(15,23,42,0.06);
    }
    .mobile-tab {
      flex: 1; min-width: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 3px;
      padding: 8px 2px 7px; background: none; border: 0; cursor: pointer;
      color: var(--ink-muted); font-size: 10px; font-weight: 500; letter-spacing: 0.01em;
      white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color 0.15s;
    }
    .mobile-tab i, .mobile-tab svg { width: 22px; height: 22px; }
    .mobile-tab.active { color: var(--brass-dark); }
    .mobile-tab-icon-wrap { position: relative; display: inline-flex; }
    .mobile-tab-badge {
      position: absolute; top: -6px; right: -9px; min-width: 15px; height: 15px;
      padding: 0 4px; border-radius: 8px; background: var(--rust); color: #fff;
      font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
    }
    /* ===== Safe-area insets (notch / Dynamic Island / home indicator) ===== */
    /* viewport-fit=cover lets content fill the screen edge-to-edge; these pad it
       back out of the unsafe zones. env() is 0 on non-notched devices, so this is
       a no-op everywhere else. The tab bar/views already pad the bottom inset. */
    /* Top inset only — leave the header's Tailwind px-3 horizontal padding alone
       (landscape left/right insets are an edge case for this portrait-first app). */
    /* The top bar (search, AI, +Task, notifications, help) is desktop-oriented
       clutter on a phone — hidden entirely. Navigation lives in the bottom tab
       bar, so nothing here is load-bearing. Its notch inset moves to <main> so
       page content still clears the status bar. */
    .app-topbar { display: none; }
    main { padding-top: env(safe-area-inset-top); }
    /* Hide the portfolio header actions (Export / Group Buildings / Add Property)
       on phones — these are desktop-workflow controls; the mobile header stays lean. */
    #portfolio-actions { display: none; }
    .dms-sidebar { padding-top: env(safe-area-inset-top); }
    .mobile-tabbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    /* ===== Property detail: reflow dense desktop grids for phones ===== */
    /* Stat grids (hero/secondary specs, safety…) go 2-up instead of 3/4-up so the
       big display numbers aren't crushed into ~80px columns. */
    #view-property .grid-cols-4,
    #view-property .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
    /* The page-layout grid (main col-span-2 + sidebar) stacks into one column.
       More specific than the rule above, so it wins for this grid only. */
    #view-property .grid-cols-3:has(> .col-span-2) { grid-template-columns: 1fr; }
    #view-property .grid-cols-3:has(> .col-span-2) > .col-span-2 { grid-column: auto; }

    /* Hero overlay + the stats band use bare px-8 (32px) gutters; the tab strip and
       tab content already drop to px-4 on phones. Only literal `px-8` elements match,
       so this trims just those two bands back to the 16px page gutter. */
    #view-property .px-8 { padding-left: 16px; padding-right: 16px; }
    /* Stats band: 6 headline figures reflow 3-up (a 6-wide row crushed them into
       ~50px columns), with the display numbers eased down so large values don't clip.
       The Photos tab's 6-up thumbnail grid rides the same rule — 3 larger tiles per
       row reads far better on a phone than 6 fingernail-sized ones. */
    #view-property .grid-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
    #view-property .grid-cols-6 .font-display { font-size: 20px; }
    /* That band justifies the stats against the management buttons (Data Room / Group
       / Edit) in one row that overflowed sideways on a phone. Stack it: stats on top,
       the button cluster below, wrapping rather than forcing a horizontal scroll. */
    #view-property .flex.items-start.justify-between { flex-direction: column; gap: 14px; }
    #view-property .flex.items-start.justify-between > .flex.items-center { flex-wrap: wrap; }
    /* The Group / Edit Property controls are desktop admin actions — drop them from
       the phone stats band so its action row is just the Data Room control. */
    #view-property .prop-admin-action { display: none; }
    /* Data Rooms moves up into the hero (top-right, mirroring the Back pill) on
       phones, so drop the stats-band copy entirely — the band becomes pure KPIs. */
    #view-property .deck-btn { display: none; }
    #view-property .hero-share { display: inline-flex; }
    /* Detail-tab content cards carry desktop p-5/p-6 (20–24px) padding that eats a
       phone's width; tighten them to a uniform 16px. Table cards use a bare `card`
       (no padding utility) so they're untouched and stay edge-to-edge. */
    #view-property .card.p-6, #view-property .card.p-5 { padding: 16px; }
    /* Section tab strip: 24px inter-tab gaps make the scroll row sprawl — pull them
       in so more of Overview / Tasks / Units… reads at a glance. nowrap keeps each
       label on a single line (e.g. "Units & Tenants") so the row scrolls cleanly
       instead of letting a label wrap to two lines and bloat the strip height. */
    #view-property .tab { margin-right: 18px; white-space: nowrap; }
    /* Swap the horizontal tab scroll for the native section picker on phones. */
    #view-property .tabs-desktop { display: none; }
    #view-property .tabs-mobile { display: block; }
    /* Access & Codes on phones: stack the header so the alert isn't crowding the
       button. The Add-Code button comes first as a full-width indigo CTA; the
       sensitive-info note sits right above the list; codes go one-per-row so each
       is a large, easy-to-scan tap target instead of a cramped 2-up grid cell. */
    #view-property .access-head { flex-direction: column; gap: 12px; }
    #view-property .access-add { order: 1; width: 100%; justify-content: center; padding: 11px; font-size: 14px; background: var(--brass); border-color: var(--brass); color: #fff; }
    #view-property .access-alert { order: 2; }
    #view-property .access-grid { grid-template-columns: 1fr; gap: 12px; }

    /* Property type filters (All Types / Charter School / Class A Office…): on phones
       they wrapped to several rows and pushed the grid down. Make them a single
       horizontally-scrolling row — the familiar mobile chip carousel. id selector
       (1,0,0) beats Tailwind's `flex-wrap` (0,1,0). The strip scrolls within the
       content padding, so no page-level horizontal scroll is introduced. */
    #type-filters {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;            /* Firefox */
      /* Pad the trailing edge a touch so the last chip doesn't kiss the viewport. */
      padding-right: 2px;
    }
    #type-filters::-webkit-scrollbar { display: none; }  /* WebKit/Safari */
    /* Keep each chip at its natural width — scroll past them, never squeeze them. */
    #type-filters > .btn-secondary { flex: 0 0 auto; }

    /* Modals → bottom sheets (native phone pattern): dock to the bottom edge,
       full-width, rounded top, slide up, with a grab handle. !important beats the
       inline max-width overrides on a few modals (property 640px, signlease 560px…). */
    .modal-backdrop { align-items: flex-end; padding: 0; }
    .modal-content {
      width: 100%; max-width: 100% !important;
      max-height: 92vh;
      border-radius: 16px 16px 0 0;
      border-bottom: none;
      padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
      animation: sheetUp 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .modal-content::before {
      content: ''; display: block;
      width: 36px; height: 4px; border-radius: 2px;
      background: var(--line); margin: -4px auto 14px;
    }
    /* Dense 3-up form rows (City/State/Zip, Block/Lot/Zoning…) are too cramped at
       390px once the modal is a full-width sheet. Reflow to 2-up. Scoped with
       :has(.input-field) so it only hits FORM grids, never stat-tile grids (e.g. the
       Sqft/Units/Occupancy cards). gap-y stays generous so labels breathe. */
    .modal-content .grid-cols-3:has(.input-field) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 12px;
    }
  }

  /* ============== EMAIL UI ============== */
  /* Intent badges — one color per email intent classification */
  .intent-badge { display: inline-flex; align-items: center; padding: 2px 7px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 2px; border: 1px solid transparent; white-space: nowrap; }
  .intent-lease       { background: rgba(79,70,229,0.12);  color: var(--brass-dark); border-color: rgba(79,70,229,0.25); }
  .intent-ar          { background: rgba(22,163,74,0.12);  color: var(--sage);       border-color: rgba(22,163,74,0.25); }
  .intent-ap          { background: rgba(220,38,38,0.10);   color: var(--rust);       border-color: rgba(220,38,38,0.25); }
  .intent-maintenance { background: rgba(234,88,12,0.10);   color: var(--surge);      border-color: rgba(234,88,12,0.25); }
  .intent-deal        { background: rgba(124,58,237,0.10);  color: var(--plum);       border-color: rgba(124,58,237,0.25); }
  .intent-vendor      { background: var(--paper-warm);      color: var(--ink-soft);   border-color: var(--line); }
  .intent-legal       { background: rgba(15,23,42,0.06);    color: var(--ink);        border-color: var(--line); }
  .intent-prospecting { background: rgba(79,70,229,0.06);  color: var(--brass-dark); border-color: var(--line-soft); }
  .intent-admin       { background: var(--paper-warm);      color: var(--ink-muted);  border-color: var(--line-soft); }
  .intent-personal    { background: rgba(124,58,237,0.06);  color: var(--plum);       border-color: var(--line-soft); }
  .intent-general     { background: var(--paper-warm);      color: var(--ink-muted);  border-color: var(--line-soft); }

  /* Urgency: dots */
  .urgency-dots { display: inline-flex; gap: 2px; }
  .urgency-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
  .urgency-dot.on-1 { background: var(--ink-muted); }
  .urgency-dot.on-2 { background: var(--brass); }
  .urgency-dot.on-3 { background: var(--brass-dark); }
  .urgency-dot.on-4 { background: var(--rust); }
  .urgency-dot.on-5 { background: var(--surge); }

  /* Email row */
  .email-row { cursor: pointer; }
  .email-row td.email-subject { color: var(--ink); font-weight: 500; }
  .email-row.unread td.email-subject { font-weight: 600; }
  .email-row .email-no-subject { color: var(--ink-muted); font-style: italic; font-weight: 400; }

  /* Linked-entity chip (used in inbox + email panel) */
  .entity-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 2px; font-size: 11px; background: var(--paper-warm); color: var(--ink-soft); border: 1px solid var(--line); cursor: pointer; transition: all 0.15s; }
  @media (hover: hover) { .entity-chip:hover { background: var(--paper-card); border-color: var(--ink-soft); } }
  .entity-chip .entity-chip-type { font-size: 9.5px; font-weight: 600; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.06em; }

  /* Attention card — for clarifications / inconsistencies / suggested actions */
  .attention-card { background: var(--paper-card); border: 1px solid var(--line); border-left: 3px solid var(--ink-muted); border-radius: 8px; padding: 16px 18px; transition: all 0.15s; }
  @media (hover: hover) { .attention-card:hover { border-color: var(--ink-soft); } }
  .attention-card.kind-inconsistency { border-left-color: var(--rust); }
  .attention-card.kind-clarification { border-left-color: var(--brass); }
  .attention-card.kind-suggested-action { border-left-color: var(--sage); }
  .attention-kind-label { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
  .attention-kind-label.kind-inconsistency { color: var(--rust); }
  .attention-kind-label.kind-clarification { color: var(--brass-dark); }
  .attention-kind-label.kind-suggested-action { color: var(--sage); }
  .attention-card .att-question { font-size: 14px; color: var(--ink); line-height: 1.45; margin: 6px 0 12px; }
  .attention-card .att-source { font-size: 11.5px; color: var(--ink-muted); margin-bottom: 12px; }
  .attention-card .att-source a { color: var(--brass-dark); }
  @media (hover: hover) { .attention-card .att-source a:hover { text-decoration: underline; } }
  .attention-card.resolved { opacity: 0.6; border-left-color: var(--sage); }

  /* Option button — for clarification resolve choices */
  .option-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--paper-card); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
  @media (hover: hover) { .option-btn:hover { background: var(--paper-warm); border-color: var(--ink-soft); } }
  .option-btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  @media (hover: hover) { .option-btn.primary:hover { background: var(--ink-soft); } }
  .option-btn.danger { color: var(--rust); border-color: rgba(220,38,38,0.3); }
  @media (hover: hover) { .option-btn.danger:hover { background: rgba(220,38,38,0.05); border-color: var(--rust); } }

  /* Email detail panel */
  #email-panel .panel-body { padding: 18px 22px 28px; }
  .email-meta-row { display: flex; gap: 8px; font-size: 12.5px; padding: 3px 0; }
  .email-meta-row .label { color: var(--ink-muted); min-width: 60px; }
  .email-meta-row .val { color: var(--ink); flex: 1; word-break: break-word; }
  .email-body-block { background: var(--paper-warm); border: 1px solid var(--line-soft); border-radius: 8px; padding: 14px 16px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); max-height: 380px; overflow-y: auto; white-space: pre-wrap; }
  .email-section-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin: 22px 0 8px; display: flex; align-items: center; gap: 8px; }
  .email-section-title::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
  .key-fact-row { display: flex; gap: 10px; padding: 3px 0; font-size: 12.5px; }
  .key-fact-row .kf-key { color: var(--ink-muted); min-width: 130px; font-weight: 500; }
  .key-fact-row .kf-val { color: var(--ink); flex: 1; }
  .attachment-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 3px; margin-bottom: 6px; font-size: 12.5px; }
  .attachment-item .att-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--paper-warm); color: var(--ink-soft); }
  .attachment-item .att-name { flex: 1; min-width: 0; }
  .attachment-item .att-name-text { font-weight: 500; color: var(--ink); word-break: break-all; }
  .attachment-item .att-meta { font-size: 10.5px; color: var(--ink-muted); margin-top: 2px; }
  .attachment-item .att-status { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 2px; }
  .att-status.completed { background: rgba(22,163,74,0.12); color: var(--sage); }
  .att-status.pending   { background: var(--paper-warm); color: var(--ink-muted); border: 1px solid var(--line); }
  .att-status.failed    { background: rgba(220,38,38,0.10); color: var(--rust); border: 1px solid rgba(220,38,38,0.3); }
  .att-status.skipped   { background: var(--paper-warm); color: var(--ink-muted); }

  /* ============== DENSITY TOGGLE ============== */
  /* Base spacing is "comfortable". data-density="compact" (the default) tightens
     the data-heavy surfaces — tables, task rows, kanban cards — for more rows per
     screen. Only vertical padding/heights change, so column alignment is untouched. */
  html[data-density="compact"] .data-table th { padding-top: 6px; padding-bottom: 6px; }
  html[data-density="compact"] .data-table td { padding-top: 8px; padding-bottom: 8px; }
  html[data-density="compact"] .task-tr { min-height: 30px; }
  html[data-density="compact"] .task-td-title,
  html[data-density="compact"] .task-cell-status,
  html[data-density="compact"] .task-cell-priority,
  html[data-density="compact"] .task-td-due,
  html[data-density="compact"] .task-td-property,
  html[data-density="compact"] .task-td-person { padding-top: 4px; padding-bottom: 4px; }
  html[data-density="compact"] .kanban-card,
  html[data-density="compact"] .kanban-card-done { padding-top: 7px; padding-bottom: 7px; }

  /* ============== CLICK-TO-SORT TABLES ============== */
  .data-table th.sortable { cursor: pointer; user-select: none; }
  @media (hover: hover) { .data-table th.sortable:hover { color: var(--ink-soft); } }
  .sort-caret { display: inline-block; width: 8px; margin-left: 4px; font-size: 9px; color: var(--brass-dark); }

  /* ============== SITE ISSUES ============== */
  .site-issue-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--ink-soft)); }

  /* drill-down: breadcrumb + priority sections */
  .si-crumb { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--brass-dark); background: none; border: none; cursor: pointer; padding: 5px 8px 5px 2px; margin-right: 4px; }
  @media (hover: hover) { .si-crumb:hover { text-decoration: underline; } }
  .si-prio-section { margin-bottom: 26px; }
  .si-prio-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 12px; }
  .si-prio-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); }
  .si-prio-count { font-family: ui-monospace, monospace; font-weight: 600; color: var(--ink-muted); background: var(--paper-warm); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
  /* per-property issue list (no hero photos) */
  .si-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper-card); }
  .si-row { display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 12px 15px; cursor: pointer; border-top: 1px solid var(--line-soft); }
  .si-row:first-child { border-top: none; }
  @media (hover: hover) { .si-row:hover { background: var(--paper-warm); } }
  .si-row-main { min-width: 0; flex: 1 1 auto; }
  .si-row-title { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; overflow-wrap: anywhere; }
  .si-row-sub { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 3px; font-size: 12px; color: var(--ink-muted); }
  .si-row-sub span { display: inline-flex; align-items: center; gap: 4px; }
  .si-row-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
  .si-row-thumb { flex: 0 0 auto; width: 60px; height: 46px; border-radius: 6px; background-size: cover; background-position: center; background-color: var(--paper-warm); display: flex; align-items: center; justify-content: center; color: var(--ink-muted); }
  .si-row-chev { flex: 0 0 auto; color: var(--ink-muted); }

  /* List/Map toggle + per-property issue map */
  .si-viewtoggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .si-viewtoggle button { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 11px; background: var(--paper-card); color: var(--ink-muted); border: none; cursor: pointer; }
  .si-viewtoggle button + button { border-left: 1px solid var(--line); }
  .si-viewtoggle button.active { background: var(--brass); color: #fff; }
  /* z-index:0 traps Leaflet's internal pane/control z-indexes inside the box so they stay under the overlays */
  .si-map { position: relative; z-index: 0; height: 70vh; min-height: 420px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-warm); }
  .si-map-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--ink-muted); font-style: italic; }
  .si-pop { display: flex; gap: 10px; width: 230px; }
  .si-pop-thumb { flex: 0 0 auto; width: 66px; height: 50px; border-radius: 6px; background-size: cover; background-position: center; background-color: var(--paper-warm); }
  .si-pop-body { min-width: 0; }
  .si-pop-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
  .si-pop-meta { font-size: 11.5px; color: var(--ink-muted); margin: 2px 0 6px; }
  .si-pop-open { font-size: 12px; font-weight: 600; color: var(--brass-dark); background: none; border: none; padding: 0; cursor: pointer; }
  @media (hover: hover) { .si-pop-open:hover { text-decoration: underline; } }

  /* ---- Full-screen issue view (two-pane: photos + focused detail) ---- */
  .si-view { position: fixed; inset: 0; z-index: 120; background: rgba(8,12,22,0.92); display: none; align-items: center; justify-content: center; padding: 24px; }
  .si-view.show { display: flex; }
  .si-v-panel { position: relative; display: flex; width: min(1240px, 96vw); height: min(800px, 92vh); background: var(--paper-card); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.5); }
  .si-v-close { position: absolute; top: 12px; right: 12px; z-index: 5; background: rgba(15,23,42,0.55); color: #fff; border: none; border-radius: 7px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  @media (hover: hover) { .si-v-close:hover { background: rgba(15,23,42,0.8); } }
  .si-v-stage { position: relative; flex: 1 1 60%; min-width: 0; background: #0c1018; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .si-v-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; will-change: transform; }
  .si-v-noimg { color: #5a6573; }
  .si-v-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.14); color: #fff; border: none; border-radius: 50%; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  @media (hover: hover) { .si-v-arrow:hover { background: rgba(255,255,255,0.28); } }
  .si-v-prev { left: 14px; } .si-v-next { right: 14px; }
  .si-v-thumbs { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; gap: 6px; justify-content: center; overflow-x: auto; padding: 0 12px; }
  .si-v-thumb { width: 46px; height: 34px; border-radius: 4px; background-size: cover; background-position: center; cursor: pointer; opacity: 0.55; border: 2px solid transparent; flex: 0 0 auto; }
  .si-v-thumb.active { opacity: 1; border-color: #fff; }
  .si-v-info { flex: 0 0 392px; max-width: 392px; display: flex; flex-direction: column; gap: 14px; padding: 22px; overflow-y: auto; border-left: 1px solid var(--line); }
  .si-v-info-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 24px; }
  .si-v-nav { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
  .si-v-nav button { width: 26px; height: 26px; border: 1px solid var(--line); background: var(--paper-card); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-soft); }
  @media (hover: hover) { .si-v-nav button:hover:not(:disabled) { background: var(--paper-warm); } }
  .si-v-nav button:disabled { opacity: 0.4; cursor: default; }
  .si-v-loc { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-muted); }
  .si-v-title { font-size: 18px; font-weight: 650; color: var(--ink); border: none; border-bottom: 1px solid transparent; padding: 2px 0; background: none; width: 100%; font-family: inherit; line-height: 1.3; resize: none; overflow: hidden; field-sizing: content; min-height: 1.7em; overflow-wrap: anywhere; }
  @media (hover: hover) { .si-v-title:hover { border-bottom-color: var(--line); } }
  .si-v-title:focus { outline: none; border-bottom-color: var(--brass); }
  .si-v-head-right { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
  .si-v-share-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper-card); color: var(--ink-muted); cursor: pointer; }
  @media (hover: hover) { .si-v-share-btn:hover { color: var(--brass-dark); border-color: var(--ink-soft); } }
  .si-v-controls { display: flex; flex-direction: column; gap: 12px; }
  .si-v-field { display: flex; flex-direction: column; gap: 6px; }
  .si-v-field > label, .si-v-updates > label, .si-v-subtasks > label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-muted); }
  .si-v-pills { display: flex; gap: 6px; flex-wrap: wrap; }
  .si-v-pill { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper-card); color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .si-v-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--ink-soft)); }
  @media (hover: hover) { .si-v-pill:hover { border-color: var(--ink-soft); } }
  .si-v-pill.active { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, white); color: var(--ink); }
  .si-v-photometa { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 12px; color: var(--ink-muted); }
  .si-v-photometa a { color: var(--brass-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
  @media (hover: hover) { .si-v-photometa a:hover { text-decoration: underline; } }
  .si-v-photometa span { display: inline-flex; align-items: center; gap: 4px; }
  .si-v-counter { margin-left: auto; font-variant-numeric: tabular-nums; }
  .si-v-desc { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-size: 13px; font-family: inherit; resize: vertical; color: var(--ink); }
  .si-v-desc:focus { outline: none; border-color: var(--brass); }
  .si-v-updates { display: flex; flex-direction: column; gap: 8px; }
  .si-v-updates-list { display: flex; flex-direction: column; gap: 10px; max-height: 240px; overflow-y: auto; }
  .si-v-empty { font-size: 12.5px; color: var(--ink-muted); font-style: italic; padding: 4px 0; }
  .si-v-subtasks { display: flex; flex-direction: column; gap: 7px; }
  .si-v-sub-list { display: flex; flex-direction: column; gap: 1px; }
  .si-v-sub-row { display: flex; align-items: center; gap: 8px; }
  .si-v-sub-check { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line); background: var(--paper-card); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; }
  .si-v-sub-check.done { background: var(--sage); border-color: var(--sage); }
  .si-v-sub-title { flex: 1; min-width: 0; border: none; background: none; font-size: 13px; color: var(--ink); padding: 4px 2px; font-family: inherit; border-bottom: 1px solid transparent; }
  .si-v-sub-title:focus { outline: none; border-bottom-color: var(--brass); }
  .si-v-sub-title.done { text-decoration: line-through; color: var(--ink-muted); }
  .si-v-sub-del { flex: 0 0 auto; border: none; background: none; color: var(--ink-muted); cursor: pointer; padding: 2px; opacity: 0; }
  @media (hover: hover) { .si-v-sub-row:hover .si-v-sub-del { opacity: 1; } }
  @media (hover: hover) { .si-v-sub-del:hover { color: var(--rust); } }
  .si-v-sub-input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
  .si-v-sub-input:focus { outline: none; border-color: var(--brass); }
  .si-v-composer { display: flex; gap: 8px; align-items: flex-end; }
  .si-v-composer textarea { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; resize: none; }
  .si-v-composer textarea:focus { outline: none; border-color: var(--brass); }
  @media (max-width: 860px) {
    .si-v-panel { flex-direction: column; height: 94vh; }
    .si-v-stage { flex: 0 0 44%; }
    .si-v-info { flex-basis: auto; max-width: none; border-left: none; border-top: 1px solid var(--line); }
  }

  /* in-view photo tools + lightweight modal */
  .si-v-tools { position: absolute; top: 12px; left: 12px; z-index: 5; display: flex; gap: 6px; }
  .si-v-tools button { background: rgba(15,23,42,0.55); color: #fff; border: none; border-radius: 8px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  @media (hover: hover) { .si-v-tools button:hover { background: rgba(15,23,42,0.8); } }
  .si-modal-backdrop { position: fixed; inset: 0; z-index: 130; background: rgba(8,12,22,0.55); display: none; align-items: center; justify-content: center; padding: 24px; }
  .si-modal-backdrop.show { display: flex; }
  .si-modal-card { background: var(--paper-card); border-radius: 14px; width: min(440px, 96vw); max-height: 88vh; overflow-y: auto; padding: 22px; box-shadow: 0 24px 80px rgba(0,0,0,0.4); }
  .si-modal-head { font-size: 16px; font-weight: 650; color: var(--ink); margin-bottom: 12px; }
  .si-modal-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-muted); margin: 12px 0 5px; }
  .si-modal-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-muted); }
  .si-modal-input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--ink); background: var(--paper-card); }
  .si-modal-input:focus { outline: none; border-color: var(--brass); }
  .si-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
  .si-pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
  .si-pick-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-card); cursor: pointer; }
  @media (hover: hover) { .si-pick-row:hover { background: var(--paper-warm); border-color: var(--ink-soft); } }
  .si-pick-title { font-size: 13px; font-weight: 600; color: var(--ink); }
  .si-pick-sub { font-size: 11.5px; color: var(--ink-muted); }

  /* photo annotation overlay + pen tools */
  .si-v-canvas { position: absolute; touch-action: none; transform-origin: center center; will-change: transform; }
  .si-v-tools button.active { background: var(--brass); }
  .si-v-tools button.si-v-save { width: auto; padding: 0 12px; gap: 5px; background: var(--brass); color: #fff; font-size: 12px; font-weight: 600; }
  @media (hover: hover) { .si-v-tools button.si-v-save:hover { background: var(--brass-dark); } }
  .si-v-colors { display: inline-flex; align-items: center; gap: 4px; background: rgba(15,23,42,0.55); border-radius: 8px; padding: 0 7px; height: 34px; }
  .si-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.45); cursor: pointer; padding: 0; }
  .si-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
  .si-v-danger { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ink-muted); background: none; border: none; cursor: pointer; padding: 4px 2px; }
  @media (hover: hover) { .si-v-danger:hover { color: var(--rust); } }