/* ============================================================================
   PAPER SKIN — the 2026-07-26 Vaultis-inspired overhaul (Josh's decree, from
   8 reference screenshots: "spreadsheet-like… plain and minimum… seamless and
   clean, no weird text box bubbles… go crazy").

   Loaded LAST, after tilfully-theme.css and phase4.css, so it wins the
   cascade. It re-grounds the APP SHELL only — the login screen keeps its
   contour canvas and glass card (auth.css is untouched).

   The look: flat matte canvas, white (night: matte dark) cards with 1px
   hairline borders, tight radii, dense quiet tables with small-caps column
   labels, slide-over detail panels. Monochrome decree still governs — these
   are greys; semantic status colors and danger red stay untouched.
   All values come from the --p-* tokens in tokens.css (day base + night
   overrides under body.night-mode), so THIS FILE has almost no literals.
   ========================================================================== */

/* ---- 1. Ground: kill the gradient + contour field inside the app -------- */
#appView #appTopo { display: none !important; }

body.night-mode,
body:not(.night-mode) {
  background: var(--p-canvas) !important;
  color: var(--p-ink);
}

/* ---- 2. The sidebar dock: flat paper island ------------------------------ */
@media (min-width: 641px) {
  #appView aside {
    background: var(--p-card) !important;
    border: 1px solid var(--p-hair) !important;
    box-shadow: var(--p-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

#appView aside .brand h1 {
  color: var(--p-ink) !important;
  letter-spacing: 0.01em;
}

/* the role line under the wordmark reads as a quiet Vaultis-style role tag */
#appView aside .brand #userLabel {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-ink-faint);
  border: 1px solid var(--p-hair);
  border-radius: var(--p-radius-sm);
  padding: 0.14rem 0.4rem;
  margin-top: 0.25rem;
  background: var(--p-card-2);
}

#appView .nav-btn {
  color: var(--p-ink-soft) !important;
  border-radius: var(--p-radius-sm) !important;
  background: transparent !important;
  box-shadow: none !important;
}
#appView .nav-btn:hover {
  background: var(--p-row-hover) !important;
  color: var(--p-ink) !important;
}
#appView .nav-btn.active {
  background: var(--p-active) !important;
  color: var(--p-ink) !important;
  box-shadow: none !important;
}

/* ---- 3. Cards: every glass panel becomes a paper card -------------------- */
body.night-mode .panel, body:not(.night-mode) .panel,
body.night-mode .kpi, body:not(.night-mode) .kpi,
body.night-mode .profile-card, body:not(.night-mode) .profile-card,
body.night-mode .profile-glance-card, body:not(.night-mode) .profile-glance-card,
body.night-mode .profile-launch-card, body:not(.night-mode) .profile-launch-card,
body.night-mode .trial-ops-card, body:not(.night-mode) .trial-ops-card,
body.night-mode .account-list-card, body:not(.night-mode) .account-list-card,
body.night-mode .cold-lead-card, body:not(.night-mode) .cold-lead-card,
body.night-mode .settings-section, body:not(.night-mode) .settings-section,
body.night-mode .gmail-card, body:not(.night-mode) .gmail-card,
body.night-mode .rec, body:not(.night-mode) .rec,
body.night-mode .brief-card, body:not(.night-mode) .brief-card,
body.night-mode .rank-row, body:not(.night-mode) .rank-row,
body.night-mode .compact-panel, body:not(.night-mode) .compact-panel,
body.night-mode .experiment-db-panel, body:not(.night-mode) .experiment-db-panel {
  background: var(--p-card) !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius) !important;
  box-shadow: var(--p-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---- 4. Type: clean sans everywhere inside the app; the wordmark and the
        login keep their serif. Small-caps utility labels. ------------------ */
#appView main h1, #appView main h2, #appView main h3, #appView main h4 {
  font-family: var(--t-sans) !important;
  font-weight: 640;
  letter-spacing: -0.01em;
  color: var(--p-ink);
}
#appView main .muted, #appView main p.muted { color: var(--p-ink-soft) !important; }

/* ---- 5. Tables: the spreadsheet discipline, globally --------------------- */
#appView main table { border-collapse: collapse; }
#appView main table th {
  font-size: 0.6rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--p-ink-faint) !important;
  border-bottom: 1px solid var(--p-hair) !important;
  background: transparent !important;
  padding: 0.45rem 0.55rem !important;
  text-align: left;
}
#appView main table td {
  font-size: 0.78rem !important;
  color: var(--p-ink) !important;
  border-bottom: 1px solid var(--p-hair) !important;
  background: transparent !important;
  padding: 0.5rem 0.55rem !important;
}
#appView main table tbody tr:hover td { background: var(--p-row-hover) !important; }
#appView main table tbody tr:last-child td { border-bottom: none !important; }

/* ---- 6. Buttons: quiet, small, flat -------------------------------------- */
#appView .button {
  border-radius: var(--p-radius-sm) !important;
  font-size: 0.76rem !important;
  padding: 0.42rem 0.8rem !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
}
#appView .button.ghost {
  background: var(--p-card) !important;
  color: var(--p-ink) !important;
  border: 1px solid var(--p-hair) !important;
}
#appView .button.ghost:hover { border-color: var(--p-hair-hi) !important; background: var(--p-row-hover) !important; }
#appView .icon-button {
  background: var(--p-card) !important;
  border: 1px solid var(--p-hair) !important;
  color: var(--p-ink-soft) !important;
  box-shadow: none !important;
}
#appView .icon-button:hover { border-color: var(--p-hair-hi) !important; color: var(--p-ink) !important; }

/* ---- 7. Inputs: flat fields, hairline focus ------------------------------ */
#appView main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
#appView main select,
#appView main textarea {
  background: var(--p-card) !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius-sm) !important;
  color: var(--p-ink) !important;
  box-shadow: none !important;
  font-size: 0.8rem;
}
#appView main input:focus, #appView main select:focus, #appView main textarea:focus {
  border-color: var(--p-hair-hi) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--p-active) !important;
}

/* ---- 8. Mobile bars keep the paper ground ------------------------------- */
@media (max-width: 640px) {
  #appView aside, #appView .brand, #appView .shell-corner {
    background: var(--p-card) !important;
    border-color: var(--p-hair) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ==========================================================================
   9. PERSONAL PROFILE (#userProfile) — the Vaultis identity header + tabs
   ========================================================================== */
#userProfile .user-profile-hero {
  background: var(--p-card) !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius) !important;
  box-shadow: var(--p-shadow) !important;
  backdrop-filter: none !important;
}
#userProfile .user-profile-avatar {
  background: var(--p-active) !important;
  color: var(--p-ink) !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius-sm) !important;
  font-weight: 650;
}
#userProfile .user-profile-name-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
#userProfile .user-profile-name-row h2 { margin: 0; }
#userProfile .role-badge {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--p-ink-soft); background: var(--p-card-2);
  border: 1px solid var(--p-hair); border-radius: var(--p-radius-sm); padding: 0.18rem 0.5rem;
}
#userProfile .user-profile-meta span { color: var(--p-ink-soft) !important; }
#userProfile .user-profile-status-card {
  background: var(--p-card-2) !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius-sm) !important;
}
#userProfile .user-profile-tabs {
  background: transparent !important; border: none !important; box-shadow: none !important;
  gap: 0.3rem; padding: 0 !important;
}
#userProfile .user-profile-tabs button {
  background: transparent !important; border: 1px solid transparent !important;
  border-radius: var(--p-radius-sm) !important; color: var(--p-ink-soft) !important;
  font-size: 0.76rem !important; padding: 0.34rem 0.7rem !important;
}
#userProfile .user-profile-tabs button:hover { background: var(--p-row-hover) !important; color: var(--p-ink) !important; }
#userProfile .user-profile-tabs button.active {
  background: var(--p-card) !important; border-color: var(--p-hair) !important;
  color: var(--p-ink) !important; box-shadow: var(--p-shadow) !important;
}
#userProfile .user-profile-section, #userProfile .settings-card {
  background: var(--p-card) !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius) !important;
  box-shadow: var(--p-shadow) !important;
  backdrop-filter: none !important;
}
#userProfile .metric-card {
  background: var(--p-card) !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius-sm) !important;
  box-shadow: none !important;
  padding: 0.7rem 0.8rem !important;
}
#userProfile .metric-card span {
  font-size: 0.58rem !important; font-weight: 650 !important; letter-spacing: 0.1em !important;
  text-transform: uppercase !important; color: var(--p-ink-faint) !important;
}
#userProfile .metric-card strong { font-size: 1.35rem !important; font-weight: 640 !important; color: var(--p-ink) !important; }
#userProfile .metric-card p { color: var(--p-ink-faint) !important; font-size: 0.66rem !important; }
#userProfile .profile-list-row {
  border-bottom: 1px solid var(--p-hair) !important;
  background: transparent !important; border-radius: 0 !important;
}
#userProfile .profile-list-row:last-child { border-bottom: none !important; }
#userProfile .my-book-table .book-row { cursor: pointer; }
#userProfile .my-book-table .book-row:hover td { background: var(--p-row-hover) !important; }
#userProfile .table-caption { font-size: 0.68rem; margin: 0.4rem 0 0; }
#userProfile .signal-label { color: var(--p-ink-faint) !important; }
#userProfile .team-row, #userProfile .integration-row, #userProfile .partner-block {
  border-color: var(--p-hair) !important; background: transparent !important;
}

/* ==========================================================================
   10. ACCOUNT PROFILE FACE (#profile) — paper header, seamless prose, quiet
       menus. The dark-green/gold hero predates both decrees; it goes flat.
   ========================================================================== */
#profile .tfp-hero {
  background: var(--p-card) !important;
  color: var(--p-ink) !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius) !important;
  box-shadow: var(--p-shadow) !important;
  margin: 14px 0 0;
}
#profile .tfp-contours { display: none !important; }
#profile .tfp-title { color: var(--p-ink) !important; font-family: var(--t-sans) !important; font-weight: 650; }
#profile .tfp-back { color: var(--p-ink-soft) !important; }
#profile .tfp-eyebrow {
  color: var(--p-ink-faint) !important; border-color: var(--p-hair) !important;
  background: var(--p-card-2);
}
#profile .tfp-stage summary {
  background: var(--p-card-2) !important; color: var(--p-ink) !important;
  border: 1px solid var(--p-hair) !important;
}
#profile .tfp-dot { background: var(--p-ink) !important; }
#profile .tfp-last-contact { color: var(--p-ink-soft) !important; }
#profile .tfp-last-contact.overdue { color: var(--t-bad) !important; }
#profile .tfp-lead-badge { color: var(--p-ink-soft) !important; border-color: var(--p-hair) !important; }
#profile .tfp-contact-line { color: var(--p-ink-soft) !important; }
#profile .tfp-menu-panel {
  background: var(--p-card) !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius) !important;
  box-shadow: var(--p-shadow-float) !important;
}
#profile .tfp-menu-panel .tfp-menu-item { color: var(--p-ink) !important; border-radius: var(--p-radius-sm); }
#profile .tfp-menu-panel .tfp-menu-item:hover { background: var(--p-row-hover) !important; }
#profile .tfp-menu-divider { background: var(--p-hair) !important; }
#profile .tfp-more summary {
  background: var(--p-card) !important; color: var(--p-ink-soft) !important;
  border: 1px solid var(--p-hair) !important;
}
#profile .tfp-label { color: var(--p-ink-faint) !important; }
#profile .tfp-prose { color: var(--p-ink) !important; }
#profile .tfp-when { color: var(--p-ink-faint) !important; }
#profile .tfp-card {
  background: var(--p-card) !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius) !important;
  box-shadow: var(--p-shadow) !important;
}
#profile .tfp-check { border-color: var(--p-hair-hi) !important; }

/* ==========================================================================
   11. OVERLAYS — panel modal, drawers, share, evidence, quick modals:
       one paper language for every floating surface.
   ========================================================================== */
.modal-backdrop { background: rgba(15, 15, 16, 0.38) !important; backdrop-filter: none !important; }
.quick-modal, .profile-panel-frame, .profile-modal-panel, .drawer-panel {
  background: var(--p-card) !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius) !important;
  box-shadow: var(--p-shadow-float) !important;
  backdrop-filter: none !important;
}
.profile-card, .profile-compact-card, .contact-page-card, .timeline-card {
  background: var(--p-card-2) !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius-sm) !important;
  box-shadow: none !important;
}
.matrix-tool-popover, .cold-column-popover {
  background: var(--p-card) !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius) !important;
  box-shadow: var(--p-shadow-float) !important;
  backdrop-filter: none !important;
}
.accordion { border-color: var(--p-hair) !important; background: transparent !important; }

/* ==========================================================================
   12. THE SPREADSHEETS — Accounts matrix + Prospects: plain, dense, flat.
       Stage/status meaning moves off row-tints and into the pills/selects
       (semantic colors stay — on the data, not the furniture).
   ========================================================================== */
#appView #matrix tbody tr, #appView #matrix tbody tr td { background: transparent !important; }
#appView #matrix tbody tr:hover td { background: var(--p-row-hover) !important; }
#appView #matrix .acct-group-head td {
  background: var(--p-card-2) !important;
  border-bottom: 1px solid var(--p-hair) !important;
  padding: 0.3rem 0.55rem !important;
}
#appView .matrix-grid input, #appView .matrix-grid select, #appView .matrix-grid textarea {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  font-size: 0.78rem !important; color: var(--p-ink) !important;
}
#appView .matrix-grid input:hover, #appView .matrix-grid select:hover { border-color: var(--p-hair) !important; }
#appView .matrix-grid input:focus, #appView .matrix-grid select:focus, #appView .matrix-grid textarea:focus {
  background: var(--p-card) !important; border-color: var(--p-hair-hi) !important;
}
#appView .matrix-toolbar { background: transparent !important; border: none !important; box-shadow: none !important; }
#appView .matrix-company-button strong { color: var(--p-ink) !important; }

#appView .cold-table tbody tr, #appView .cold-table tbody tr td { background: transparent !important; }
#appView .cold-table tbody tr:hover td { background: var(--p-row-hover) !important; }
#appView .cold-table td:first-child { box-shadow: none !important; border-left: none !important; }
#appView .cold-table input, #appView .cold-table select, #appView .cold-table textarea {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
  font-size: 0.78rem !important; color: var(--p-ink) !important;
}
#appView .cold-table input:focus, #appView .cold-table select:focus {
  background: var(--p-card) !important; border-color: var(--p-hair-hi) !important;
}
/* status reads as colored TEXT on the select, Vaultis-compliance style */
#appView .cold-table tr.cold-status-interested select[data-cold-field="call_status"],
#appView .cold-table tr.cold-status-trial select[data-cold-field="call_status"] { color: var(--t-good) !important; font-weight: 600; }
#appView .cold-table tr.cold-status-needs-info select[data-cold-field="call_status"] { color: var(--t-warn) !important; font-weight: 600; }
#appView .cold-table tr.cold-status-not-interested select[data-cold-field="call_status"] { color: var(--t-bad) !important; }
#appView .cold-filter-chip {
  background: var(--p-card) !important; border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius-sm) !important; color: var(--p-ink-soft) !important;
}
#appView .cold-filter-chip.active { background: var(--p-active) !important; color: var(--p-ink) !important; border-color: var(--p-hair-hi) !important; }
#appView .matrix-tab, #appView .lead-chip {
  background: var(--p-card) !important; border: 1px solid var(--p-hair) !important;
  color: var(--p-ink-soft) !important; border-radius: var(--p-radius-sm) !important;
}
#appView .matrix-tab.active, #appView .lead-chip.active {
  background: var(--p-active) !important; color: var(--p-ink) !important; border-color: var(--p-hair-hi) !important;
}

/* ==========================================================================
   13. SIDEBAR TOGGLE — always visible at the TOP of the dock (Josh: "like
       on chat with the icon thing at top"), not a hover-reveal edge tab.
   ========================================================================== */
@media (min-width: 641px) {
  /* the dock is a slim icon rail (the "minimum" pass) — the toggle sits
     CENTERED at its top with reserved headroom so it can never overlap the
     first nav icon (probe-verified 2026-07-26: nav starts at the padding
     edge, so headroom must be !important across every dock variant). */
  #appView aside { padding-top: 46px !important; }
  #sidebarToggleBtn {
    position: absolute !important;
    top: 10px !important; left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    width: 26px !important; height: 26px !important;
    border-radius: var(--p-radius-sm) !important;
    opacity: 1 !important;
    font-size: 0.7rem;
    z-index: 6;
  }
}

/* ==========================================================================
   14. SMALL-SCREEN AUDIT — "buttons get funny when my screen is smaller":
       toolbars wrap instead of crushing, search fields shrink instead of
       overflowing, buttons keep their shape.
   ========================================================================== */
#appView .matrix-main-tools, #appView .cold-tools, #appView .workspace-actions,
#appView .row-actions, #appView .cold-status-filters, #appView .matrix-lead-chips {
  flex-wrap: wrap !important; row-gap: 0.4rem !important; min-width: 0;
}
#appView .button, #appView .icon-button { white-space: nowrap; flex-shrink: 0; }
#appView .matrix-search-input, #appView .cold-search-label input { min-width: 0 !important; }
@media (max-width: 1100px) {
  #appView .matrix-search-input { width: 140px !important; }
  #appView .add-account-label { display: none; }   /* “+” stands alone; label returns on wide screens */
}
@media (max-width: 720px) {
  #appView .button { font-size: 0.72rem !important; padding: 0.38rem 0.6rem !important; }
  #appView .user-profile-tabs { overflow-x: auto; flex-wrap: nowrap !important; }
  #appView .matrix-toolbar .matrix-main-tools > * { max-width: 100%; }
}

/* ==========================================================================
   15. THE EXPANDING DOCK (round 2, probe-driven). Phase-4 had frozen the
       rail at 48px in BOTH states, leaving the toggle cosmetic and the
       expanded-state "Settings/Profile" pseudo-labels bleeding past the
       rail edge (pre-existing, visible in the baseline shot). Now:
       collapsed (the new default) = Josh's slim rail; expanded = the
       labeled Vaultis dock, icon + name per row.
   ========================================================================== */
@media (min-width: 641px) {
  body:not(.sidebar-collapsed) #appView aside {
    width: 216px !important;
    padding: 46px 10px 12px !important;
    gap: 8px !important;
  }
  body:not(.sidebar-collapsed) #appView aside .brand { display: block !important; padding: 2px 6px 6px; }
  body:not(.sidebar-collapsed) #appView .nav-btn {
    justify-content: flex-start !important;
    padding: 8px 10px !important;
    width: 100%;
  }
  body:not(.sidebar-collapsed) #appView .nav-btn span {
    display: inline !important;
    font-size: 0.8rem; font-weight: 600;
  }
  body:not(.sidebar-collapsed) #appView .shell-corner { align-items: stretch !important; }
  body:not(.sidebar-collapsed) #appView .shell-corner .icon-button {
    width: 100% !important; height: auto !important;
    justify-content: flex-start !important;
    padding: 8px 10px !important; gap: 10px;
    border: 1px solid transparent !important;
    background: transparent !important;
    font-size: 0.8rem !important; font-weight: 600;
    border-radius: var(--p-radius-sm) !important;
  }
  body:not(.sidebar-collapsed) #appView .shell-corner .icon-button:hover { background: var(--p-row-hover) !important; }
  body:not(.sidebar-collapsed) #sidebarToggleBtn {
    left: auto !important; right: 10px !important; transform: none !important;
    width: 26px !important; height: 26px !important;
    border: 1px solid var(--p-hair) !important;
    background: var(--p-card) !important;
  }
}

/* ==========================================================================
   16. SPREADSHEET POLISH (round 2, from the tour screenshots)
   ========================================================================== */
/* sortable column headers join the small-caps discipline (they're buttons) */
#appView main table th .matrix-sort-head {
  font-family: var(--t-sans) !important;
  font-size: 0.6rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--p-ink-faint) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
}
#appView main table th .matrix-sort-head.active,
#appView main table th .matrix-sort-head:hover { color: var(--p-ink) !important; }

/* cell fields are invisible until touched — the generic input skin (§7) has
   higher specificity via its :not() chain, so the td-scoped forms here
   out-rank it and restore the flat spreadsheet reading */
#appView main .matrix-grid td input:not([type="checkbox"]):not([type="radio"]),
#appView main .matrix-grid td select,
#appView main .matrix-grid td textarea,
#appView main .cold-table td input:not([type="checkbox"]):not([type="radio"]),
#appView main .cold-table td select,
#appView main .cold-table td textarea {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
#appView main .matrix-grid td input:not([type="checkbox"]):not([type="radio"]):hover,
#appView main .matrix-grid td select:hover,
#appView main .cold-table td input:not([type="checkbox"]):not([type="radio"]):hover,
#appView main .cold-table td select:hover { border-color: var(--p-hair) !important; }
#appView main .matrix-grid td input:not([type="checkbox"]):not([type="radio"]):focus,
#appView main .matrix-grid td select:focus,
#appView main .matrix-grid td textarea:focus,
#appView main .cold-table td input:not([type="checkbox"]):not([type="radio"]):focus,
#appView main .cold-table td select:focus,
#appView main .cold-table td textarea:focus {
  background: var(--p-card) !important;
  border-color: var(--p-hair-hi) !important;
}

/* the account-profile contact line loses its amber underline */
#profile .tfp-contact-line { border-bottom: 1px solid var(--p-hair) !important; }
#profile .tfp-back { opacity: 0.75; }

/* round 2b: the expanded dock PUSHES content instead of covering it
   (#overview stays full-bleed for the map); and every column header —
   sortable or not — uses the sans small-caps voice */
@media (min-width: 641px) {
  body:not(.sidebar-collapsed) #appView main section.page:not(#overview) { padding-left: 246px !important; }
}
#appView main table th { font-family: var(--t-sans) !important; }

/* round 2c: rows go fully plain — the stage lives in the group pill and the
   status select, not in left-edge accent bars; dock rows lose their boxes */
#appView .matrix-grid tbody tr td:first-child,
#appView .matrix-grid tbody tr.matrix-stage td:first-child {
  box-shadow: none !important; border-left: none !important;
}
@media (min-width: 641px) {
  body:not(.sidebar-collapsed) #appView .nav-btn { border-color: transparent !important; }
  body:not(.sidebar-collapsed) #appView .nav-btn.active { border-color: var(--p-hair) !important; }
}

/* round 2d: night-mode fixes from the tour — the Donna dial segments were
   inheriting the white action fill with white ink; and the cell WRAPPERS
   (not the inputs) were drawing the boxes inside spreadsheet rows */
#appView .matrix-donna-dial .donna-dial-seg {
  background: transparent !important;
  border: 1px solid var(--p-hair) !important;
  color: var(--p-ink-soft) !important;
  border-radius: var(--p-radius-sm) !important;
}
#appView .matrix-donna-dial .donna-dial-seg.active {
  background: var(--p-active) !important;
  color: var(--p-ink) !important;
  border-color: var(--p-hair-hi) !important;
}
#appView .matrix-grid .matrix-action-cell,
#appView .matrix-grid .matrix-date-cell,
#appView .matrix-grid .matrix-lead-cell,
#appView .matrix-grid .phone-cell,
#appView .matrix-grid .matrix-note-composer,
#appView .cold-table .cold-date-cell,
#appView .cold-table .phone-cell,
#appView .cold-table .cold-note-box,
#appView .cold-table .cold-identity-cell {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* round 2e: out-rank the 2026-07-11 night "tinted inputs" straggler rule,
   which sits at row-scope specificity — same selector shape, later file */
body.night-mode #matrix .matrix-grid tbody tr[class*="matrix-stage"] td input,
body.night-mode #matrix .matrix-grid tbody tr[class*="matrix-stage"] td select,
body.night-mode #matrix .matrix-grid tbody tr[class*="matrix-stage"] td textarea,
body:not(.night-mode) #matrix .matrix-grid tbody tr[class*="matrix-stage"] td input,
body:not(.night-mode) #matrix .matrix-grid tbody tr[class*="matrix-stage"] td select,
body:not(.night-mode) #matrix .matrix-grid tbody tr[class*="matrix-stage"] td textarea {
  background: transparent !important;
  border-color: transparent !important;
}
body.night-mode #matrix .matrix-grid tbody tr[class*="matrix-stage"] td input:hover,
body:not(.night-mode) #matrix .matrix-grid tbody tr[class*="matrix-stage"] td input:hover {
  border-color: var(--p-hair) !important;
}
body.night-mode #matrix .matrix-grid tbody tr[class*="matrix-stage"] td input:focus,
body.night-mode #matrix .matrix-grid tbody tr[class*="matrix-stage"] td select:focus,
body:not(.night-mode) #matrix .matrix-grid tbody tr[class*="matrix-stage"] td input:focus,
body:not(.night-mode) #matrix .matrix-grid tbody tr[class*="matrix-stage"] td select:focus {
  background: var(--p-card) !important;
  border-color: var(--p-hair-hi) !important;
}

/* round 2f: the headroom must also win in the COLLAPSED state — phase4's
   body.sidebar-collapsed padding rule out-ranks the bare aside selector */
@media (min-width: 641px) {
  body.sidebar-collapsed #appView aside { padding-top: 46px !important; }
}

/* ==========================================================================
   17. ROUND 3 — Josh: "I was expecting dramatic overhaul… take ideas from
       the app I showed you." Layout language, not palette: metric STRIPS
       (one bordered row, hairline-divided cells — the Vaultis KEY METRICS
       pattern), queue TABLES for people, structured dashboards.
   ========================================================================== */
/* profile metrics: floating card grid -> one continuous strip */
#userProfile .user-profile-metrics {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px !important;
  background: var(--p-hair) !important;
  border: 1px solid var(--p-hair);
  border-radius: var(--p-radius-sm);
  overflow: hidden;
}
#userProfile .user-profile-metrics.my-book-metrics { grid-template-columns: repeat(4, 1fr); }
#userProfile .metric-card {
  border: none !important;
  border-radius: 0 !important;
  background: var(--p-card) !important;
  box-shadow: none !important;
  padding: 0.75rem 0.85rem !important;
}
@media (max-width: 1180px) { #userProfile .user-profile-metrics { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) {
  #userProfile .user-profile-metrics, #userProfile .user-profile-metrics.my-book-metrics { grid-template-columns: repeat(2, 1fr); }
}

/* team queue table */
#userProfile .team-table-wrap { margin-top: 0.6rem; }
#userProfile .team-member-cell { display: inline-flex; align-items: center; gap: 0.55rem; }
#userProfile .team-member-cell .team-avatar {
  width: 28px; height: 28px; border-radius: var(--p-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--p-active); color: var(--p-ink);
  font-size: 0.62rem; font-weight: 700; flex-shrink: 0;
}
#userProfile .team-member-cell .team-copy { display: inline-flex; flex-direction: column; gap: 0.1rem; }
#userProfile .team-member-cell .team-copy > span { color: var(--p-ink-faint); font-size: 0.68rem; }
.team-status-on { color: var(--t-good); font-weight: 600; }
.team-status-off { color: var(--t-bad); font-weight: 600; }
#userProfile .team-row-actions { text-align: right; white-space: nowrap; }
#userProfile .team-picker-row td { background: var(--p-card-2) !important; }
#userProfile .invite-form {
  display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center;
  padding: 0.65rem; border: 1px solid var(--p-hair); border-radius: var(--p-radius-sm);
  background: var(--p-card-2); margin-bottom: 0.6rem;
}

/* profile hero: compact status, roomier presence */
#userProfile .user-profile-status-card { max-width: 300px; }
#userProfile .user-profile-status-card .pill { width: auto !important; display: inline-block; }

/* profile lists read as activity feeds: value/time right-aligned, quiet rows */
#userProfile .profile-list-row { padding: 0.5rem 0.15rem !important; }
#userProfile .profile-list-row > span:last-child { color: var(--p-ink-faint); font-size: 0.7rem; }

/* round 3b: #overview joins the normal padding scheme (it was full-bleed);
   the greeting band goes flat; the badge selector follows its body mount */
#threadBadgeRootFixed { position: fixed; right: 20px; bottom: 20px; z-index: 45; }
#threadBadgeRootFixed .message-alert-button {
  position: relative;
  width: 46px !important; height: 46px !important;
  border-radius: 50% !important;
  background: var(--p-card) !important;
  border: 1px solid var(--p-hair) !important;
  box-shadow: var(--p-shadow-float) !important;
  color: var(--p-ink-soft) !important;
  display: inline-flex; align-items: center; justify-content: center;
}
#threadBadgeRootFixed .message-alert-button:hover { color: var(--p-ink) !important; border-color: var(--p-hair-hi) !important; }
#threadBadgeRootFixed .badge-dot {
  position: absolute; top: 3px; right: 3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--t-bad);
  border: 2px solid var(--p-card);
}

/* ==========================================================================
   19. ROUND 4 — THE SIDEBAR IS A REAL COLUMN (Josh: "I wanted the left menu
       tab to take up the space and then adjust everything else"). Full-height
       flat panel flush left, ChatGPT-style; every page lives beside it. The
       dashboard is the map and the message bar again — the round-3 KPI strip
       and feed rail are gone from the renderer.
   ========================================================================== */
@media (min-width: 641px) {
  #appView aside {
    top: 0 !important; bottom: 0 !important; left: 0 !important;
    transform: none !important;
    height: 100vh !important; max-height: none !important;
    margin: 0 !important;
    border: none !important;
    border-right: 1px solid var(--p-hair) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body:not(.sidebar-collapsed) #appView aside { width: 240px !important; }
  body.sidebar-collapsed #appView aside { width: 64px !important; padding: 46px 8px 12px !important; }

  /* content sits BESIDE the column — retire the old page-padding hacks */
  body:not(.sidebar-collapsed) #appView main { padding-left: 262px !important; }
  body.sidebar-collapsed #appView main { padding-left: 86px !important; }
  body:not(.sidebar-collapsed) #appView main section.page:not(#overview) { padding-left: 0 !important; }

  /* the map dashboard fills everything beside the column, edge to edge */
  #overview:has(.dash-map-hero) {
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important;
    left: 240px !important;
    height: auto !important; padding: 0 !important; margin: 0 !important;
    overflow: hidden !important;
  }
  body.sidebar-collapsed #overview:has(.dash-map-hero) { left: 64px !important; }
  #overview .dash-map-hero {
    position: absolute !important; inset: 0 !important;
    height: 100% !important;
    border: none !important; border-radius: 0 !important; box-shadow: none !important;
  }
  /* zoom bottom-left, out from under the search stack; legend = quiet chip top-right */
  #overview .dash-map-hero .map-controls { top: auto !important; bottom: 42px !important; left: 14px !important; z-index: 9 !important; }
  #overview .dash-stats-strip {
    position: absolute !important; top: 12px !important; right: 12px !important;
    left: auto !important; bottom: auto !important;
    display: inline-flex !important; flex-direction: row !important;
    align-items: center; gap: 0.5rem;
    background: var(--p-card) !important;
    border: 1px solid var(--p-hair);
    border-radius: var(--p-radius-sm);
    padding: 0.3rem 0.6rem !important;
    font-size: 0.68rem; z-index: 9;
  }
}

/* the message button keeps its bottom-right home (body-level mount) */
#threadBadgeRootFixed { position: fixed; right: 20px; bottom: 20px; z-index: 45; }
#threadBadgeRootFixed .message-alert-button {
  position: relative;
  width: 46px !important; height: 46px !important;
  border-radius: 50% !important;
  background: var(--p-card) !important;
  border: 1px solid var(--p-hair) !important;
  box-shadow: var(--p-shadow-float) !important;
  color: var(--p-ink-soft) !important;
  display: inline-flex; align-items: center; justify-content: center;
}
#threadBadgeRootFixed .message-alert-button:hover { color: var(--p-ink) !important; border-color: var(--p-hair-hi) !important; }
#threadBadgeRootFixed .badge-dot {
  position: absolute; top: 3px; right: 3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--t-bad);
  border: 2px solid var(--p-card);
}

/* ==========================================================================
   20. THE CHAT, CHATGPT-STYLE (Josh: "like chat gbt dark and day mode. no
       yellow color and when i get replies there's no box it's just what it
       says"). Donna's replies are PLAIN TEXT on the panel — no bubble, no
       border. Your messages are a quiet gray bubble on the right. Every
       amber accent inside the thread goes neutral. Both themes via tokens.
   ========================================================================== */
.capture-thread {
  background: var(--p-card) !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: var(--p-radius) !important;
  box-shadow: var(--p-shadow-float) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  color: var(--p-ink) !important;
}
.thread-head { color: var(--p-ink-faint) !important; opacity: 1 !important; }
.thread-head .button, .thread-head button { color: var(--p-ink-soft) !important; }

/* Donna: no box — just what she says */
.thread-bubble.thread-system {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
  max-width: 100% !important;
  color: var(--p-ink) !important;
}
.thread-source-tag { color: var(--p-ink-faint) !important; }

/* you: one quiet bubble, right side */
.thread-bubble.thread-user {
  background: var(--p-active) !important;
  color: var(--p-ink) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  border-bottom-right-radius: 5px !important;
}

/* no amber anywhere in the conversation */
.thread-exchange.thread-piece,
body.night-mode .thread-exchange.thread-piece { border-left-color: var(--p-hair-hi) !important; }
.thread-draft-gapnote { color: var(--p-ink-soft) !important; }
body.night-mode .thread-chip, body:not(.night-mode) .thread-chip {
  background: var(--p-card-2) !important;
  border: 1px solid var(--p-hair) !important;
  color: var(--p-ink) !important;
}
body.night-mode .thread-chip:hover, body:not(.night-mode) .thread-chip:hover {
  border-color: var(--p-hair-hi) !important;
  background: var(--p-row-hover) !important;
}
.thread-link, body:not(.night-mode) .thread-link { color: var(--p-ink) !important; }
.thread-review-inline,
body.night-mode .thread-review-inline,
body:not(.night-mode) .thread-review-inline { border-top: 1px solid var(--p-hair) !important; }

/* round 4b: the last golds — active nav ring goes hairline (match the
   shell's higher-specificity selector shape); thumbs are gray outline icons */
@media (min-width: 641px) {
  body:not(.sidebar-collapsed) #appView aside .nav-btn:not(.nav-profile-tab).active,
  body.sidebar-collapsed #appView aside .nav-btn:not(.nav-profile-tab).active,
  #appView aside .nav-btn.active, #appView aside .nav-btn.nav-profile-tab.active {
    border-color: var(--p-hair-hi) !important;
    box-shadow: none !important;
    outline: none !important;
    background: var(--p-active) !important;
    color: var(--p-ink) !important;
  }
  body:not(.sidebar-collapsed) #appView aside .nav-btn:not(.nav-profile-tab),
  body:not(.sidebar-collapsed) #appView aside .shell-corner .icon-button {
    border-color: transparent !important;
  }
}
.thread-rate { color: var(--p-ink-faint) !important; opacity: 1 !important; }
.thread-rate:hover, .thread-rate.is-rated { color: var(--p-ink) !important; background: var(--p-row-hover) !important; }

/* round 4c: pre-existing stray — a phase4 selector accidentally set the
   OVERVIEW capture-footer position:static (meant only for its .capture-copy),
   flowing the tip line to the top edge. Pin it back to the bottom. */
@media (min-width: 641px) {
  #overview .capture-footer {
    position: absolute !important;
    top: auto !important; bottom: 10px !important;
    left: 50% !important; transform: translateX(-50%) !important;
  }
}

/* ==========================================================================
   21. ROUND 5 — BARE-BONES MENU (Josh: "just have the names, get rid of
       icons and make it a 3rd of the size in width. keep it simple.
       nonretractable for now"). Names only, ~92px, one width in every
       state, no toggle. Plus: the hidden-until-summoned message bar and
       the full-screen conversation, and map-control stability at
       not-fullscreen window sizes.
   ========================================================================== */
@media (min-width: 641px) {
  /* round 6 (Josh: "add back icons… add app name… centralize it? keep about
     that width maybe bigger for icons and then i can minimize it just to see
     the icons") — icon+name rows, centered brand, one width token, and the
     minimize-to-icons toggle returns. */
  body { --menu-w: 176px; }
  body.sidebar-collapsed { --menu-w: 60px; }
  #sidebarToggleBtn {
    display: inline-flex !important;
    position: absolute !important;
    top: 10px !important; left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    width: 26px !important; height: 26px !important;
    border-radius: var(--p-radius-sm) !important;
    opacity: 1 !important;
    font-size: 0.7rem;
    z-index: 6;
    background: var(--p-card) !important;
    border: 1px solid var(--p-hair) !important;
  }
  #appView aside,
  body.sidebar-collapsed #appView aside,
  body:not(.sidebar-collapsed) #appView aside {
    width: var(--menu-w) !important;
    padding: 44px 10px 12px !important;
    gap: 4px !important;
  }
  body.sidebar-collapsed #appView aside { padding-left: 6px !important; padding-right: 6px !important; }
  #appView aside .brand, body.sidebar-collapsed #appView aside .brand { display: block !important; padding: 0 4px 10px; text-align: center; }
  #appView aside .brand h1 { font-size: 1.15rem !important; }
  #appView aside .brand #userLabel { font-size: 0.5rem; padding: 0.1rem 0.3rem; }
  body.sidebar-collapsed #appView aside .brand h1 { font-size: 0.85rem !important; }
  body.sidebar-collapsed #appView aside .brand #userLabel { display: none; }
  /* icon + name rows; collapsed keeps just the icon */
  #appView .nav-btn svg { display: inline-block !important; width: 16px !important; height: 16px !important; flex-shrink: 0; }
  #appView .nav-btn::before { display: none !important; }
  body.sidebar-collapsed #appView aside .nav-btn span { display: none !important; }
  body.sidebar-collapsed #appView aside .nav-btn { justify-content: center !important; }
  #appView aside .nav-btn, body.sidebar-collapsed #appView aside .nav-btn,
  body:not(.sidebar-collapsed) #appView aside .nav-btn:not(.nav-profile-tab) {
    display: flex !important; justify-content: flex-start !important; align-items: center !important;
    gap: 9px !important;
    width: 100% !important; height: auto !important; min-height: 0 !important;
    padding: 8px 10px !important;
    border: none !important; box-shadow: none !important;
    background: transparent !important;
    font-size: 0.78rem !important; font-weight: 600 !important;
    border-radius: var(--p-radius-sm) !important;
    color: var(--p-ink-soft) !important;
  }
  #appView aside .nav-btn span, body.sidebar-collapsed #appView aside .nav-btn span { display: inline !important; }
  #appView aside .nav-btn:hover { background: var(--p-row-hover) !important; color: var(--p-ink) !important; }
  #appView aside .nav-btn.active, body.sidebar-collapsed #appView aside .nav-btn.active {
    background: var(--p-active) !important; color: var(--p-ink) !important;
    border: none !important; box-shadow: none !important; outline: none !important;
  }
  #appView .nav-newchat { margin-top: 2px; }
  #appView .nav-newchat span::before { content: '+ '; color: var(--p-ink-faint); }
  /* corner controls read as plain text rows too, both states */
  #appView .shell-corner, body.sidebar-collapsed #appView .shell-corner { align-items: stretch !important; }
  #appView .shell-corner .icon-button, body.sidebar-collapsed #appView .shell-corner .icon-button {
    width: 100% !important; height: auto !important;
    justify-content: flex-start !important;
    padding: 6px 8px !important;
    border: none !important; background: transparent !important; box-shadow: none !important;
    font-size: 0.78rem !important; font-weight: 600 !important;
    color: var(--p-ink-soft) !important;
    border-radius: var(--p-radius-sm) !important;
  }
  #appView .shell-corner .icon-button:hover { background: var(--p-row-hover) !important; color: var(--p-ink) !important; }

  #appView #profileBtn svg { display: none !important; }
  #appView #profileBtn::after { content: 'Profile'; font-size: 0.78rem; }
  /* content offsets follow the menu-width token */
  body:not(.sidebar-collapsed) #appView main, body.sidebar-collapsed #appView main { padding-left: calc(var(--menu-w) + 14px) !important; }
  #overview:has(.dash-map-hero), body.sidebar-collapsed #overview:has(.dash-map-hero) { left: var(--menu-w) !important; }

  /* ---- the message bar hides until summoned; the conversation owns the
         screen (minus the menu) once open ------------------------------- */
  /* stale-class-proof: the thread machinery toggles .open on the dock LIVE
     (no re-render), so the bar's hidden state must defer to the dock */
  .donna-dock:not(.open) .capture-bar.bar-hidden { display: none !important; }
  .capture-footer.bar-hidden { display: none !important; }
  /* id-scoped to out-rank phase4's #overview/#profile positioning rules.
     The dock must form NO containing block — any transform/filter/backdrop
     would re-anchor the fixed bar and thread to the dock's own box (the
     -74px-offscreen bar, probe-diagnosed). */
  #overview .donna-dock, #profile .donna-dock,
  #overview .donna-dock.open, #profile .donna-dock.open {
    position: static !important; inset: auto !important;
    display: block !important; height: auto !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    will-change: auto !important;
    contain: none !important;
    perspective: none !important;
  }
  #overview .donna-dock.open .capture-thread-root, #profile .donna-dock.open .capture-thread-root {
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: var(--menu-w) !important;
    width: auto !important; max-width: none !important;
    transform: none !important;
    z-index: 44 !important;
    display: flex !important; flex-direction: column !important;
  }
  #overview .donna-dock.open .capture-thread, #profile .donna-dock.open .capture-thread {
    flex: 1 !important; height: 100% !important; max-height: none !important;
    border-radius: 0 !important;
    border: none !important; border-left: 1px solid var(--p-hair) !important;
    box-shadow: none !important;
  }
  #overview .donna-dock.open .thread-scroll, #profile .donna-dock.open .thread-scroll {
    max-height: none !important; flex: 1 !important;
    padding-bottom: 96px !important;   /* the floating input bar rides over the tail */
  }
  #overview .donna-dock.open .capture-bar, #profile .donna-dock.open .capture-bar {
    position: fixed !important;
    top: auto !important; bottom: 14px !important;
    left: calc(var(--menu-w) + (100% - var(--menu-w)) / 2) !important;
    transform: translateX(-50%) !important;
    width: min(720px, calc(100% - 140px)) !important;
    z-index: 45 !important;
    border: 1px solid var(--p-hair) !important;
    background: var(--p-card) !important;
    box-shadow: var(--p-shadow-float) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  #overview .donna-dock.open ~ .capture-footer, #profile .donna-dock.open ~ .capture-footer { display: none !important; }

  /* ---- map controls hold their size at ANY window width ---------------- */
  #overview .dash-map-hero .map-search {
    width: 260px !important; max-width: calc(100% - 80px) !important;
    font-size: 0.8rem !important;
  }
  #overview .dash-map-hero .map-search input { font-size: 0.8rem !important; }
  #overview .dash-map-hero .map-search-tips { max-width: 260px !important; font-size: 0.68rem !important; }
  #overview .dash-stats-strip { font-size: 0.66rem !important; max-width: 40%; overflow: hidden; white-space: nowrap; }
  #overview .map-controls button { width: 30px !important; height: 30px !important; font-size: 0.9rem !important; }
}

/* ==========================================================================
   22. ROUND 6 — chat refinements (Josh's screenshots): the summon icon hides
       while the conversation is open; the input gets a real shape; header
       buttons cluster right; a jump-to-latest arrow appears when scrolled
       up; the corner Settings/Profile rows read like the nav.
   ========================================================================== */
body:has(.donna-dock.open) #threadBadgeRootFixed { display: none !important; }

/* round 8b: the input-shape experiment is REVERTED (Josh: "the message bar
   was good… put it back to how it was") — the bar keeps its original slim
   pill layout; only positioning/visibility behavior is ours. The input
   keeps its native styling inside the pill. */
#appView .capture-bar #captureInput {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* the footer tip bulb can NEVER be a lightbulb the size of Canada again */
.capture-tip-bulb, .capture-footer svg {
  width: 14px !important; height: 14px !important;
  flex: none !important;
}

/* header: title left, actions cluster right */
.thread-head { display: flex !important; align-items: center; gap: 0.4rem; padding: 10px 14px !important; }
.thread-head > span:first-child { margin-right: auto; }
.thread-head .thread-clear-reviews {
  background: transparent !important; border: 1px solid var(--p-hair) !important;
  color: var(--p-ink-soft) !important; border-radius: var(--p-radius-sm) !important;
  font-size: 0.68rem !important; padding: 0.25rem 0.55rem !important; cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.thread-head .thread-clear-reviews:hover { color: var(--p-ink) !important; border-color: var(--p-hair-hi) !important; }
.thread-head .thread-close {
  width: 26px; height: 26px; border-radius: var(--p-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--p-ink-soft) !important;
}
.thread-head .thread-close:hover { background: var(--p-row-hover); color: var(--p-ink) !important; }

/* jump-to-latest: floats above the input bar when scrolled up */
.thread-jump-down {
  position: fixed;
  bottom: 96px; left: calc(var(--menu-w, 0px) + (100% - var(--menu-w, 0px)) / 2);
  transform: translateX(-50%) scale(0.9);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--p-card); color: var(--p-ink-soft);
  border: 1px solid var(--p-hair);
  box-shadow: var(--p-shadow-float);
  font-size: 1rem; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 46;
}
.thread-jump-down.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); }
.thread-jump-down:hover { color: var(--p-ink); border-color: var(--p-hair-hi); }

/* collapsed rail: corner rows and New chat fall back to glyphs */
@media (min-width: 641px) {

  body.sidebar-collapsed #appView #profileBtn svg { display: inline-block !important; width: 15px !important; height: 15px !important; }
  body.sidebar-collapsed #appView #profileBtn::after { content: none !important; }
  body.sidebar-collapsed #appView .shell-corner .icon-button { justify-content: center !important; }
  body.sidebar-collapsed #appView .nav-newchat::after { content: '+'; font-size: 0.95rem; }
}

/* ==========================================================================
   23. ROUND 7 (Josh's list): slimmer menu; centered wider search; legend
       always visible; zoom buttons gone (wheel/pinch still zooms); Claude-
       style identity row at the menu foot with the feedback bug beside it;
       ONE profile entry; capture bar/footer fixed on the profile page too
       (kills the flash-at-top); map markers one palette in both themes.
   ========================================================================== */
@media (min-width: 641px) {
  body { --menu-w: 152px; }
  body.sidebar-collapsed { --menu-w: 60px; }

  /* one Profile entry — the nav copy retires, the corner row remains */
  #appView #nav .nav-profile-tab { display: none !important; }

  /* the menu foot: Claude-style identity row + the bug button */
  #appView aside { display: flex !important; flex-direction: column !important; }
  #appView .shell-corner {
    margin-top: auto !important;
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 4px !important;
    align-items: stretch !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--p-hair);
  }
  #appView .shell-corner #globalMessage { grid-column: 1 / -1; }
  #appView #settingsBtn { grid-column: 1 / -1; }
  #appView #profileBtn {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    padding: 7px 8px !important;
  }
  #appView #profileBtn::after { content: none !important; }
  .corner-avatar {
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--p-active); color: var(--p-ink);
    font-size: 0.6rem; font-weight: 700; flex-shrink: 0;
  }
  .corner-name {
    font-size: 0.76rem; font-weight: 600; color: var(--p-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #appView #feedbackBtn {
    width: 34px !important; height: auto !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    border: none !important; background: transparent !important;
    color: var(--p-ink-faint) !important; border-radius: var(--p-radius-sm) !important;
  }
  #appView #feedbackBtn:hover { background: var(--p-row-hover) !important; color: var(--p-ink) !important; }
  body.sidebar-collapsed #appView .shell-corner { grid-template-columns: 1fr; }
  body.sidebar-collapsed #appView #feedbackBtn { display: none !important; }
  body.sidebar-collapsed .corner-name { display: none; }

  /* search: centered over the map, wide enough that the tip never wraps */
  #overview .dash-map-hero .map-search {
    left: 50% !important; right: auto !important; top: 12px !important;
    transform: translateX(-50%);
    width: 380px !important; max-width: calc(100% - 320px) !important;
  }
  #overview .dash-map-hero .map-search-tips {
    left: 50% !important; transform: translateX(-50%);
    top: 56px !important; max-width: 380px !important;
    text-align: center; white-space: nowrap;
  }
  /* legend: pinned top-right, never clipped, above the search stack */
  #overview .dash-stats-strip {
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    z-index: 10 !important;
  }
  /* fewer buttons: the zoom pair goes — wheel and pinch still zoom */
  #overview .dash-map-hero .map-controls, .map-wrap .map-controls { display: none !important; }

  /* the profile page's bar/footer pin to the viewport like the dashboard's —
     the absolute-in-flow versions caused the flash-at-top-then-gone bug */
  #profile .capture-bar {
    position: fixed !important;
    top: auto !important; bottom: 24px !important;
    left: calc(var(--menu-w) + (100% - var(--menu-w)) / 2) !important;
    transform: translateX(-50%) !important;
    width: min(720px, calc(100% - var(--menu-w) - 80px)) !important;
    z-index: 40 !important;
  }
  #profile .capture-footer {
    position: fixed !important;
    top: auto !important; bottom: 4px !important;
    left: calc(var(--menu-w) + (100% - var(--menu-w)) / 2) !important;
    transform: translateX(-50%) !important;
    z-index: 40 !important;
  }
}

/* map markers: ONE palette, both themes (the map itself is always dark now) */
.google-status-marker { border-color: #ffffff !important; }
.google-status-marker.proven { background: #3f9e63 !important; }
.google-status-marker.trial { background: #a678e8 !important; }
.google-status-marker.discussion { background: #5b9bd8 !important; }
.google-status-marker.prospect { background: #cfcdc8 !important; }

/* round 7b — THE BAR-AT-TOP BUG (Josh saw it live; probe-diagnosed): a late
   phase4 dock-layout rule sets the bar position:static, relying on the dock
   being the positioned overlay — which the paper rounds removed. The
   summoned-but-closed bar then sat in FLOW at the top of the page. Pin the
   closed state to the viewport exactly like the open state. */
@media (min-width: 641px) {
  #overview .donna-dock:not(.open) .capture-bar,
  #profile .donna-dock:not(.open) .capture-bar {
    position: fixed !important;
    top: auto !important; bottom: 24px !important;
    left: calc(var(--menu-w) + (100% - var(--menu-w)) / 2) !important;
    transform: translateX(-50%) !important;
    width: min(720px, calc(100% - var(--menu-w) - 80px)) !important;
    z-index: 40 !important;
    border: 1px solid var(--p-hair) !important;
    background: var(--p-card) !important;
    box-shadow: var(--p-shadow-float) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
}

/* ==========================================================================
   24. ROUND 8 — hide-the-menu mode (Claude-style panel icon), left search,
       Recents rows, profile edit card.
   ========================================================================== */
@media (min-width: 641px) {
  /* collapsed now means GONE: the panel icon floats top-left to reopen */
  body.sidebar-collapsed { --menu-w: 0px; }
  body.sidebar-collapsed #appView aside {
    width: 0 !important; min-width: 0 !important;
    padding: 0 !important; border: none !important;
    overflow: visible !important;
  }
  body.sidebar-collapsed #appView aside > *:not(#sidebarToggleBtn) { display: none !important; }
  #sidebarToggleBtn {
    left: 14px !important; transform: none !important;
    top: 12px !important;
  }
  body.sidebar-collapsed #sidebarToggleBtn {
    position: fixed !important;
    left: 14px !important; top: 12px !important;
    z-index: 60 !important;
    display: inline-flex !important;
    box-shadow: var(--p-shadow-float) !important;
  }
  body.sidebar-collapsed #appView main { padding-left: 58px !important; }
  body.sidebar-collapsed #overview:has(.dash-map-hero) { left: 0 !important; }
  /* keep the floating icon clear of the map search: search sits left again,
     under the icon's column, sized "a tiny bit bigger than it was before" */
  #overview .dash-map-hero .map-search {
    left: 52px !important; right: auto !important; top: 12px !important;
    transform: none !important;
    width: 330px !important; max-width: calc(100% - 300px) !important;
  }
  #overview .dash-map-hero .map-search-tips {
    left: 52px !important; transform: none !important;
    top: 56px !important; max-width: 330px !important;
    text-align: left; white-space: nowrap;
  }
}
.nav-recent span {
  font-weight: 500 !important; color: var(--p-ink-faint) !important;
  font-size: 0.72rem !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block; max-width: 118px;
}
.nav-recent:hover span { color: var(--p-ink) !important; }
.profile-edit-card { margin-top: 0.6rem; }

/* ==========================================================================
   25. ROUND 9 — green active nav (Josh: "make it like green. that would be
       cool"); search further left; the legend pinned ON screen and smaller;
       the input tucks away while reading history; the standalone bar is
       never shown outside the open conversation.
   ========================================================================== */
@media (min-width: 641px) {
  #appView aside .nav-btn.active,
  body.sidebar-collapsed #appView aside .nav-btn.active,
  body:not(.sidebar-collapsed) #appView aside .nav-btn:not(.nav-profile-tab).active {
    background: rgba(76, 175, 106, 0.14) !important;
    color: var(--t-green, #217a3c) !important;
    border: none !important; box-shadow: none !important;
  }
  body.night-mode #appView aside .nav-btn.active { color: #6fca8f !important; }
  #appView aside .nav-btn.active svg { color: inherit !important; }

  #overview .dash-map-hero .map-search { left: 20px !important; }
  #overview .dash-map-hero .map-search-tips { left: 20px !important; }
  body.sidebar-collapsed #overview .dash-map-hero .map-search,
  body.sidebar-collapsed #overview .dash-map-hero .map-search-tips { left: 52px !important; }

  /* legend: smaller, transform-proof, and physically unable to leave the map */
  #overview .dash-stats-strip {
    left: auto !important; right: 10px !important; top: 10px !important; bottom: auto !important;
    transform: none !important;
    width: auto !important; max-width: calc(100% - 20px) !important;
    font-size: 0.6rem !important;
    gap: 0.35rem !important;
    padding: 0.22rem 0.5rem !important;
  }
  #overview .dash-stats-strip strong { font-size: 0.7rem !important; }

  /* the bar exists ONLY inside the open conversation (test hook aside) */
  .donna-dock:not(.open) .capture-bar:not(.test-visible) { }
  /* reading history: the input steps aside until you come back down */
  .donna-dock.open .capture-bar.bar-tucked {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(24px) !important;
    pointer-events: none !important;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .donna-dock.open .capture-bar { transition: opacity 0.18s ease, transform 0.18s ease; }
}

/* round 9b: the settings row renders its own gear+label now — the shell's
   legacy ::after label would print "Settings" twice */
#appView #settingsBtn::after { content: none !important; }

/* round 9c: the message icon wears the same green as the active nav */
#threadBadgeRootFixed .message-alert-button {
  color: var(--t-green, #217a3c) !important;
  border-color: rgba(76, 175, 106, 0.4) !important;
}
body.night-mode #threadBadgeRootFixed .message-alert-button { color: #6fca8f !important; }
#threadBadgeRootFixed .message-alert-button:hover { border-color: rgba(76, 175, 106, 0.7) !important; }

/* round 10a: the gear can never be massive; icon rows keep tidy glyphs */
#appView #settingsBtn svg, #appView .shell-corner .icon-button svg {
  width: 15px !important; height: 15px !important; flex: none !important;
}

/* round 10b (Josh): the map search pill goes semi-transparent glass */
#overview .dash-map-hero .map-search {
  background: rgba(20, 21, 24, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
body:not(.night-mode) #overview .dash-map-hero .map-search {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(20, 21, 24, 0.14) !important;
}
#overview .dash-map-hero .map-search input { background: transparent !important; border: none !important; }

/* round 11: transparency, properly won this time. The global input skin (§7)
   was repainting the search's inner text box — out-specificity it with the
   double-id + matching :not() chain. Message icon: translucent chip, green
   bubble glyph. */
#appView #overview .dash-map-hero .map-search {
  background: rgba(20, 21, 24, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
}
body:not(.night-mode) #appView #overview .dash-map-hero .map-search {
  background: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(20, 21, 24, 0.16) !important;
}
#appView #overview .dash-map-hero .map-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
#appView main #overview .map-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
#threadBadgeRootFixed .message-alert-button {
  background: rgba(27, 27, 29, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
body:not(.night-mode) #threadBadgeRootFixed .message-alert-button { background: rgba(255, 255, 255, 0.55) !important; }
#threadBadgeRootFixed .review-bell { stroke: #4caf6a !important; color: #4caf6a !important; }

/* ============================================================
   26 — ACTIVITY ROW FACE (Josh, 2026-07-26): three touches only —
   the ✓ circle, the title (opens the conversation with the account
   tagged), and a quiet ✕ that IS delete. The old "…" strip is gone.
   ============================================================ */
#appView .act-remove-x {
  border: 0; background: transparent; color: var(--p-ink-faint);
  font-size: 0.78rem; line-height: 1; padding: 4px 7px; border-radius: 6px;
  cursor: pointer; opacity: 0; transition: opacity 120ms ease, color 120ms ease;
}
#appView .activity-day-row:hover .act-remove-x,
#appView .act-remove-x:focus-visible { opacity: 1; }
#appView .act-remove-x:hover { color: #c25a5a; background: var(--p-row-hover); }
#appView .activity-day-title[data-task-chat] { cursor: pointer; }
#appView .activity-day-title[data-task-chat]:hover {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--p-hair-hi);
}
@media (max-width: 640px) {
  #appView .act-remove-x { opacity: 1; }   /* no hover on the phone */
}

/* ==========================================================================
   27. PHASE 13 — the MINI conversation card (Josh, 2026-07-26: "if I click
       on it, I just see a dropdown of a message bar maybe like a smaller
       chat thing"). A task-title tap opens the SAME conversation machinery
       as a compact floating card over the page you're on; the message icon
       keeps the full screen. One conversation, two sizes.
   ========================================================================== */
/* the Activity page hosts a dock now — same no-containing-block guarantee
   as overview/profile (a transform/filter here re-anchors the fixed bar) */
#tasks .donna-dock, #tasks .donna-dock.open {
  position: static !important; inset: auto !important;
  display: block !important; height: auto !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  will-change: auto !important;
  contain: none !important;
  perspective: none !important;
}
#tasks .donna-dock.open ~ .capture-footer { display: none !important; }

#appView .donna-dock.open.thread-mini .capture-thread-root {
  position: fixed !important;
  top: auto !important; left: auto !important;
  right: 12px !important; bottom: 14px !important;
  width: min(380px, calc(100vw - 32px)) !important;
  height: min(540px, calc(100vh - 90px)) !important;
  max-width: none !important;
  border: 1px solid var(--p-hair) !important;
  border-radius: 14px !important;
  background: var(--p-card) !important;
  box-shadow: var(--p-shadow-float) !important;
  overflow: hidden !important;
  transform: none !important;
  z-index: 60 !important;
  display: flex !important; flex-direction: column !important;
}
#appView .donna-dock.open.thread-mini .capture-thread {
  flex: 1 !important; height: auto !important; max-height: none !important;
  min-height: 0 !important;
  border: none !important; border-radius: 0 !important; box-shadow: none !important;
  background: transparent !important;
  display: flex !important; flex-direction: column !important;
}
#appView .donna-dock.open.thread-mini .thread-scroll {
  flex: 1 !important; max-height: none !important; min-height: 0 !important;
  padding-bottom: 84px !important;   /* the bar floats over the card's tail */
}
#appView .donna-dock.open.thread-mini .capture-bar {
  position: fixed !important;
  top: auto !important; left: auto !important; transform: none !important;
  right: 22px !important; bottom: 24px !important;
  width: min(360px, calc(100vw - 52px)) !important;
  z-index: 61 !important;
  border: 1px solid var(--p-hair) !important;
  background: var(--p-card) !important;
  box-shadow: var(--p-shadow-float) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
@media (max-width: 640px) {
  /* the phone gets the full conversation either way — a 430px card IS the screen */
  #appView .donna-dock.open.thread-mini .capture-thread-root {
    right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important;
    border-radius: 0 !important; border: none !important;
  }
  #appView .donna-dock.open.thread-mini .capture-bar {
    right: 50% !important; transform: translateX(50%) !important;
    bottom: 14px !important; width: calc(100vw - 24px) !important;
  }
}

/* 27b — mini-card polish (Josh's 07-27 morning screenshot: "the text bar
   looks weird" + the sent message sat invisible below the fold): the thread
   MUST scroll inside the card, and the bar slims to input + mic + send. */
#appView .donna-dock.open.thread-mini .thread-scroll,
#appView .donna-dock.open.thread-mini [data-thread-scroll] {
  overflow-y: auto !important;
  flex: 1 !important; min-height: 0 !important; max-height: none !important;
  padding-bottom: 96px !important;   /* the floating bar rides over the tail */
}
#appView .donna-dock.open.thread-mini .capture-bar {
  gap: 6px !important; padding: 8px 10px !important; border-radius: 12px !important;
  margin: 0 !important;   /* a legacy margin shoved the bar 22px off the card */
}
#appView .donna-dock.open.thread-mini #captureInput {
  min-height: 34px !important; padding: 8px 10px !important;
}
/* the voice session and document drop stay one tap away in the FULL screen —
   the mini card keeps typing + dictation only */
#appView .donna-dock.open.thread-mini .capture-voice,
#appView .donna-dock.open.thread-mini #captureAddFiles { display: none !important; }

/* 27c — the card is YOURS to place (Josh, 2026-07-27): drag by the Donna
   header, resize from the top-left corner (it anchors bottom-right, so the
   handle lives opposite). Geometry persists per browser. */
#appView .donna-dock.open.thread-mini .mini-resize-handle {
  position: absolute; top: 0; left: 0; width: 20px; height: 20px;
  cursor: nwse-resize; z-index: 6;
  border-top-left-radius: 14px;
}
#appView .donna-dock.open.thread-mini .mini-resize-handle::after {
  content: ""; position: absolute; top: 6px; left: 6px;
  width: 8px; height: 8px;
  border-top: 2px solid var(--p-ink-faint); border-left: 2px solid var(--p-ink-faint);
  border-top-left-radius: 3px;
  opacity: 0.55;
}
#appView .donna-dock.open.thread-mini .thread-head { touch-action: none; user-select: none; }

/* 27d — the recents shelf scrolls and each chat can be deleted (Josh,
   2026-07-27: "the recent chat should be able to scroll so it doesn't cover
   settings and profile and i should have a easy way to delete those chats") */
.nav-recents-scroll {
  max-height: 32vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.nav-recent { position: relative; }
.nav-recent span.nav-recent-x {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: inline-block; max-width: none; overflow: visible;
  font-size: 0.6rem !important; line-height: 1;
  color: var(--p-ink-faint) !important;
  padding: 4px 5px; border-radius: 5px;
  opacity: 0; transition: opacity 120ms ease, color 120ms ease;
}
.nav-recent:hover span.nav-recent-x,
.nav-recent span.nav-recent-x:focus-visible { opacity: 1; }
.nav-recent span.nav-recent-x:hover { color: #c25a5a !important; background: var(--p-row-hover); }
.nav-recent span:first-child { max-width: 104px; }   /* room for the ✕ */
@media (max-width: 640px) {
  .nav-recent span.nav-recent-x { opacity: 1; }   /* no hover on the phone */
}

/* 28 — the Catch-up rollup (13.1, Josh 2026-07-27): tasks carried more than
   a week fold into one quiet expandable line — the active day stays short. */
#appView .activity-catchup-row {
  display: block; width: 100%; text-align: left;
  border: 0; border-top: 1px solid var(--p-hair);
  background: transparent; cursor: pointer;
  padding: 8px 10px; margin-top: 2px;
  font-size: 0.74rem; font-weight: 500; color: var(--p-ink-soft);
}
#appView .activity-catchup-row:hover { background: var(--p-row-hover); color: var(--p-ink); }
#appView .activity-catchup-row .muted { font-weight: 400; font-size: 0.68rem; }

/* ============================================================
   29 — SKINNIER TABLE ROWS (Josh, 2026-07-27: "the size per row,
   i think they could be skinnier"). Accounts measured 58px — the
   two-line identity cell + roomy paddings. Target ~44px without
   losing the subtitle line.
   ============================================================ */
#matrix .matrix-grid tbody td,
.cold-table tbody td {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}
#matrix .matrix-grid tbody td { line-height: 1.25 !important; }
#matrix .matrix-grid tbody .matrix-company-cell,
#matrix .matrix-grid tbody td:first-child + td { line-height: 1.25 !important; }
/* embedded controls drive row height — slim them to match */
#matrix .matrix-grid tbody select,
#matrix .matrix-grid tbody input:not([type="checkbox"]),
.cold-table tbody select,
.cold-table tbody input:not([type="checkbox"]) {
  padding-top: 3px !important; padding-bottom: 3px !important;
  min-height: 0 !important;
  font-size: 0.72rem !important;
}
#matrix .matrix-grid tbody .acct-subtitle,
#matrix .matrix-grid tbody small,
#matrix .matrix-grid tbody .muted {
  font-size: 0.64rem !important; line-height: 1.2 !important;
}

/* 30 — Activity morning asks (Josh, 2026-07-27): Happened lives behind a
   compact chip at the TOP; the day-nav cluster sits LEFT with a live label;
   planned rows group under quiet account headers. */
#appView .activity-happened-chip {
  border: 1px solid var(--p-hair); background: transparent;
  color: var(--p-ink-soft); cursor: pointer;
  font-size: 0.7rem; font-weight: 500;
  padding: 4px 10px; border-radius: 999px; margin-left: 8px;
}
#appView .activity-happened-chip:hover,
#appView .activity-happened-chip.open { background: var(--p-row-hover); color: var(--p-ink); }
#appView .activity-day-addrow { display: flex; align-items: center; }
#appView .activity-head-left { flex-direction: row; }
#appView .activity-head-left .activity-controls { order: -1; margin-right: 14px; margin-left: 0 !important; }
#appView .activity-head-left h3 { margin-left: 0; }
#appView .activity-account-head {
  margin: 10px 0 2px; padding: 0 10px;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--p-ink-faint);
}
#appView .activity-account-head:first-child { margin-top: 4px; }

/* 31 — the REAL account-approval spot (Josh, 2026-07-27) */
#matrix .account-approvals-strip { padding: 10px 14px; }
#matrix .account-approval-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-top: 1px solid var(--p-hair);
}
#matrix .account-approval-row:first-of-type { border-top: 0; }
#matrix .account-approval-name { font-weight: 600; font-size: 0.78rem; }
#matrix .account-approval-row .muted { flex: 1; font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 29b — THE 58px answer (CDP probe: app.css:14028 pins tr AND td to
   height:58px). Josh: "skinnier" — 44px holds the two-line identity cell
   (41px) with room; cells still grow if content ever needs more. */
#matrix .matrix-grid tbody tr { height: 44px !important; }
#matrix .matrix-grid td { height: 44px !important; }
.cold-table tbody tr { height: 44px; }
.cold-table tbody td { height: 44px; }

/* the ✕'s honest failure note (2026-07-27) */
#appView .activity-dismiss-error {
  margin: 6px 0; padding: 7px 10px; border-radius: 8px;
  border: 1px solid rgba(194, 90, 90, 0.4); color: #c25a5a;
  font-size: 0.72rem;
}

/* ============================================================
   32 — ACTIVITY 9.5 / P3 (Josh's 1pm screenshots):
   the GHOST ROW was phase4's flex-wrap:wrap — a long title's
   hypothetical size wraps the whole text block BELOW the circle.
   Rows never wrap; titles wrap inside their own box (2 lines max,
   no information amputated); the ✕ sits beside the text; "since"
   markers go quiet; account subtitles under a group header keep
   only the phone.
   ============================================================ */
#appView .activity-day-row { flex-wrap: nowrap !important; }
#appView .activity-day-row .activity-day-title {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important; text-overflow: ellipsis;
  line-height: 1.3;
}
#appView .activity-day-row .activity-day-copy {
  flex: 0 1 auto !important;               /* the ✕ follows the text, not the far edge */
  max-width: calc(100% - 70px);
}
#appView .activity-day-row .act-remove-x { flex: 0 0 auto; position: static; opacity: 0; }
#appView .activity-day-row:hover .act-remove-x { opacity: 1; }
#appView .activity-day-row .activity-day-src { margin-left: auto; }   /* non-task rows keep their source at right */
#appView .activity-carried {
  color: var(--p-ink-faint) !important;
  font-style: normal !important;
  font-size: 0.62rem !important;
  font-weight: 400;
}
#appView .activity-head-left h3 { margin-right: auto; }   /* the day title hugs the nav cluster, not the far edge */

/* A-P2/P4 additions */
#appView .activity-triage-link {
  margin-left: 10px; font-size: 0.66rem; color: var(--p-ink-faint);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
#appView .activity-triage-link:hover { color: var(--p-ink); }
#appView .activity-account-head .activity-day-phone {
  margin-left: 8px; font-size: 0.66rem; text-transform: none; letter-spacing: 0;
  color: var(--p-ink-faint);
}

/* ============================================================
   33 — LOGIN, BOLD AND SIMPLE (Josh, 2026-07-27: "bolder and
   simple with good contrasting colors… very simple modern and
   powerful and talk about the inverse CRM"). Flat near-black
   ground, white type at full contrast, one strong card, one
   green action. The topo canvas goes — powerful is plain.
   ============================================================ */
#loginView { background: #101113 !important; }
#loginView .auth-bg, #loginView #authTopo, #loginView .auth-scrim { display: none !important; }
#loginView .auth-brand { display: none !important; }
#loginView .auth-card {
  background: #17181b !important;
  border: 1px solid #2a2b2f !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8) !important;
  padding: 44px 40px !important;
  max-width: 420px !important;
}
#loginView .auth-wordmark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.6rem; font-weight: 700; letter-spacing: -0.01em;
  color: #ffffff; margin: 0 0 4px;
}
#loginView .auth-tagline {
  font-size: 1.02rem; font-weight: 600; color: #6fca8f;
  margin: 0 0 8px; letter-spacing: 0.01em;
}
#loginView .auth-sub { color: #a9a7a0 !important; font-size: 0.86rem !important; line-height: 1.55; margin-bottom: 26px !important; }
#loginView label { color: #d9d7d1 !important; font-size: 0.74rem !important; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
#loginView input[type="email"], #loginView input[type="password"], #loginView input[type="text"] {
  background: #101113 !important; border: 1px solid #34363b !important;
  color: #ffffff !important; border-radius: 10px !important;
  padding: 12px 14px !important; font-size: 0.95rem !important;
}
#loginView input:focus { border-color: #6fca8f !important; outline: none !important; box-shadow: 0 0 0 3px rgba(111, 202, 143, 0.18) !important; }
#loginView .btn-primary {
  background: #6fca8f !important; color: #0d1410 !important;
  border: 0 !important; border-radius: 10px !important;
  font-weight: 700 !important; font-size: 0.95rem !important;
  padding: 13px !important; width: 100%;
  letter-spacing: 0.02em;
}
#loginView .btn-primary:hover { background: #82dfaa !important; }
#loginView .remember span { color: #a9a7a0; }
#loginView .auth-copy { color: #55565a !important; }