/* ============================================================================
   Phase 4 build-out (consolidated UI spec, 2026-07-11) — structures for the
   dashboard widgets, Tasks workspace, Prospects polish, account-list polish,
   Granola-style executive brief, and the white-paper trial detail.
   All colors route through tokens.css / the theme layer's variables.
   ========================================================================== */

/* ============================== DASHBOARD ================================ */
/* Map-first (2026-07-11 rev 2): the dashboard IS the account map, full-bleed and
   Google-Maps-like. A tiny tasks pill and a faint work-today chip float on top.
   No pipeline, no task list, no calendar here. */

/* 2026-07-13 (Josh: "I can't see the message bar down below") — the old fixed
   height budget (100vh - 90 - 82) assumed exact greeting/browser-chrome sizes
   and pushed the capture bar below the fold on smaller windows. The overview
   is now a viewport-height column: greeting and bar keep their natural size,
   the map flexes to absorb the difference. */
/* search tips are a desktop-dashboard-only element: hidden everywhere by
   default (phone + accounts-page map), shown only in the desktop hero below */
.map-search-tips { display: none; margin: 0; }

/* ---- conversational filing thread (Josh, 2026-07-14 item 2) ----------------
   the capture bar's chat: your capture on the right, the system's
   confirmation or clarifying question (with quick-reply chips) on the left */
.capture-thread {
  display: flex; flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 22px 54px -30px rgba(0, 0, 0, 0.5);
}
.thread-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75;
}
.thread-close { border: 0; background: transparent; color: inherit; font-size: 1rem; cursor: pointer; padding: 0 2px; line-height: 1; }
.thread-scroll { overflow-y: auto; max-height: 42vh; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.thread-exchange { display: flex; flex-direction: column; gap: 6px; }
.thread-bubble { max-width: 86%; border-radius: 14px; padding: 8px 12px; font-size: 0.83rem; line-height: 1.4; }
.thread-bubble p { margin: 0; }
.thread-user { align-self: flex-end; border-bottom-right-radius: 4px; }
/* a filed note shows in FULL (Josh, 2026-07-15: never truncate a typed note) —
   a very long paste scrolls within its bubble, nothing hidden or cut */
.thread-user p { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.thread-user { max-height: 42vh; overflow-y: auto; }
.thread-system { align-self: flex-start; border-bottom-left-radius: 4px; }
/* conversational answers are plain prose (2026-07-16): honor the model's own
   line breaks the same way a filed note does, so paragraphs don't collapse */
.thread-system p { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
/* inline source links inside an answer (Josh 2026-07-17): the reference lives in
   the words, tapping it opens the account / its results — not a chip pile */
.thread-link { color: var(--t-accent); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; cursor: pointer; font-weight: 600; }
.thread-link:hover { text-decoration-thickness: 2px; }
body:not(.night-mode) .thread-link { color: var(--t-accent-day); }
.map-filter-count { opacity: 0.5; font-size: 0.82em; font-variant-numeric: tabular-nums; }
/* thumbs feedback under an answer (Josh 2026-07-17) — subtle, like ChatGPT/Claude */
.thread-feedback { display: flex; gap: 4px; margin-top: 8px; }
.thread-rate { border: 0; background: transparent; cursor: pointer; padding: 2px 5px; border-radius: 7px;
  font-size: 0.95rem; line-height: 1; opacity: 0.55; transition: opacity .12s, background .12s; }
.thread-rate:hover { opacity: 1; background: rgba(150,150,130,0.14); }
.thread-rate.is-rated { opacity: 1; }
/* much smaller desktop nav rail (Josh 2026-07-17: "still big, shrink quite a bit
   more"). The rail is a FIXED floating pill on desktop (shell.css sets width:208px
   / 64px-collapsed) — so we shrink its WIDTH here, not the grid column. */
@media (min-width: 641px) {
  #appView aside,
  body.sidebar-collapsed #appView aside { width: 48px !important; padding: 9px 3px !important; gap: 6px !important; left: 8px !important; }
  #appView aside .brand { display: none !important; }
  #appView #nav { gap: 3px !important; }
  #appView .nav-btn { justify-content: center !important; padding: 6px 0 !important; min-height: 0 !important; border-radius: 8px !important; }
  #appView .nav-btn span { display: none !important; }
  #appView .nav-btn svg { width: 17px !important; height: 17px !important; }
  #appView .nav-btn::before { font-size: 15px !important; }
  #appView .shell-corner { gap: 4px !important; padding-top: 8px !important; margin-top: 2px !important; }
  #appView .shell-corner .icon-button { width: 26px !important; height: 26px !important; font-size: 0.8rem !important; }
  #appView .shell-corner #profileBtn svg { width: 14px !important; height: 14px !important; }
  #appView #reviewBadgeRoot .message-alert-button { width: 30px !important; height: 30px !important; }
  #appView #reviewBadgeRoot .review-bell { width: 16px !important; height: 16px !important; }
  #appView .message-alert-count { font-size: 0.6rem !important; min-width: 14px !important; height: 14px !important; }
  #appView main > section.page:not(#overview) { padding-left: 66px !important; }
}
/* shrink Google Maps' native zoom control (Josh 2026-07-17: "the + and - is still big") */
.gm-style .gm-bundled-control, .gm-style .gmnoprint.gm-bundled-control,
.gm-style .gm-bundled-control-on-bottom { transform: scale(0.72); transform-origin: 100% 100%; }
/* product-knowledge drag-and-drop (Josh 2026-07-17) */
.knowledge-dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px; margin-top: 8px; border: 1.5px dashed var(--line); border-radius: 12px;
  text-align: center; transition: border-color .15s, background .15s; }
.knowledge-dropzone.is-dragover { border-color: var(--t-accent); background: rgba(127,176,105,0.10); }
.knowledge-drop-glyph { font-size: 1.3rem; opacity: 0.6; }
.knowledge-dropzone p { margin: 0; }
.thread-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.thread-chip {
  border-radius: 999px; padding: 5px 12px; font-size: 0.78rem; font-weight: 700;
  cursor: pointer; border: 1px solid transparent;
}
body.night-mode .capture-thread { background: rgba(13, 14, 16, 0.82); border: 1px solid var(--t-glass-line); color: var(--t-on-dark); }
body.night-mode .thread-user { background: rgba(217, 154, 43, 0.16); border: 1px solid rgba(217, 154, 43, 0.3); }
body.night-mode .thread-system { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); }
body.night-mode .thread-chip { background: rgba(217, 154, 43, 0.14); border-color: rgba(217, 154, 43, 0.4); color: var(--t-accent-hi); }
body.night-mode .thread-chip:hover { background: rgba(217, 154, 43, 0.26); }
body.night-mode .thread-chip-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.18); color: var(--t-on-dark-soft); }
body:not(.night-mode) .capture-thread { background: rgba(255, 253, 246, 0.92); border: 1px solid var(--t-day-line); color: var(--t-day-ink); }
body:not(.night-mode) .thread-user { background: rgba(169, 118, 29, 0.12); border: 1px solid rgba(169, 118, 29, 0.28); }
body:not(.night-mode) .thread-system { background: rgba(36, 50, 31, 0.05); border: 1px solid var(--t-day-line); }
body:not(.night-mode) .thread-chip { background: rgba(169, 118, 29, 0.1); border-color: rgba(169, 118, 29, 0.45); color: var(--t-accent-day); }
body:not(.night-mode) .thread-chip:hover { background: rgba(169, 118, 29, 0.2); }
body:not(.night-mode) .thread-chip-ghost { background: transparent; border-color: var(--t-day-line-hi); color: var(--t-day-muted); }
.thread-chip:disabled { opacity: 0.55; cursor: default; }
/* Gmail (and future sources) tag their bubble; the detailed review card
   expands INLINE inside the system bubble — the popup is retired */
.thread-source-tag { display: block; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; margin-bottom: 2px; }
/* Decomposing router (slice 3): a multi-intent message renders as N distinct piece
   receipts. A subtle left accent + a "part i of N" chip group them as one message
   handled in parts, so the stack reads as clear pieces, not a jumble. */
.thread-exchange.thread-piece { border-left: 2px solid var(--t-accent-day, #a9761d); padding-left: 8px; margin-left: 2px; }
body.night-mode .thread-exchange.thread-piece { border-left-color: rgba(230, 200, 140, 0.5); }
.thread-piece-tag { display: inline-block; font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.55; margin-bottom: 2px; margin-left: 6px; }
.thread-exchange:has(.thread-review-inline) .thread-system { max-width: 100%; width: 100%; }
.thread-review-inline { margin-top: 10px; padding-top: 10px; font-size: 0.8rem; max-height: 44vh; overflow-y: auto; }
body.night-mode .thread-review-inline { border-top: 1px solid rgba(255, 255, 255, 0.12); }
body:not(.night-mode) .thread-review-inline { border-top: 1px solid var(--t-day-line); }
.thread-review-inline .section-head h3 { font-size: 0.9rem; }
.thread-review-inline .review-block { padding: 6px 0; }
/* phone: the thread floats above the bottom capture bar */
@media (max-width: 640px) {
  .capture-thread-root { position: fixed; left: 10px; right: 10px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 46; }
}

@media (min-width: 641px) {   /* desktop only — the signed-off phone layout keeps its own budget */
  /* SEAMLESS full-bleed dashboard (Josh, 2026-07-14): the map IS the page, edge to
     edge and top to bottom; greeting, search, stats, and the message bar all float
     over it; no colorful seam lines anywhere on this screen. */
  #overview:has(.dash-map-hero) {
    /* FIXED to the viewport, no margin math (Josh, 2026-07-14: white bands were
       peeking out on the right and bottom) — the map owns every pixel */
    position: fixed; inset: 0;
    height: auto; margin: 0;
    overflow: hidden;
  }
  #overview .dash-map-hero {
    position: absolute; inset: 0;
    margin: 0; height: 100%; min-height: 0;
  }
  #overview .dash-map-hero::before { display: none; }   /* no gradient seam */
  /* no greeting, no quote line on desktop (Josh, 2026-07-14 round 3: "just
     remove the text and the text box at top") — the search pill owns the
     top-left, with rotating search tips right under it. Phone keeps its
     greeting; this whole block is desktop-only. */
  #overview .workspace-head { display: none; }
  #overview .tip-inline-bulb { width: 14px; height: 14px; flex: none; }
  /* the filing thread floats right above the message pill, same width */
  #overview .capture-thread-root, #profile .capture-thread-root {
    position: absolute; z-index: 10;
    left: 50%; bottom: 96px; transform: translateX(-50%);
    width: min(600px, calc(100% - 240px));
  }
  /* the message bar floats over the map, bottom center, its own rounded glass —
     the map runs beneath it all the way to the bottom edge */
  #overview .capture-bar, #profile .capture-bar {
    position: absolute; z-index: 9;
    left: 50%; bottom: 34px; transform: translateX(-50%);
    width: min(760px, calc(100% - 220px));
    margin: 0; padding: 8px 14px;
    border-radius: 999px;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  #overview .capture-bar::before, #profile .capture-bar::before { display: none; }   /* no gradient seam */
  body.night-mode #overview .capture-bar, body.night-mode #profile .capture-bar { background: rgba(13, 14, 16, 0.55); }
  body:not(.night-mode) #overview .capture-bar, body:not(.night-mode) #profile .capture-bar { background: rgba(255, 255, 255, 0.6); }
  /* the tip/copyright line floats right below the message pill (Josh, 2026-07-14:
     "I like the tip bar... it should be appearing below the message button") */
  #overview .capture-footer, #profile .capture-footer {
    display: flex; position: absolute; z-index: 9;
    left: 50%; bottom: 8px; transform: translateX(-50%);
    width: min(760px, calc(100% - 220px));
    margin: 0; padding: 0; min-height: 0;
    justify-content: center;
    background: transparent !important;
  }
  #overview .capture-footer, #profile .capture-footer .capture-copy { position: static; margin-left: 14px; }
  /* search pill: very top-left — the quote line above it is gone
     (Josh, 2026-07-14 round 3: "move the search button higher") */
  #overview .dash-map-hero .map-search {
    left: 16px !important; right: auto; top: 12px;
    width: min(300px, calc(100% - 60px));
  }
  /* rotating "ways to use the search" line right under the pill (Josh,
     2026-07-14 round 3); the global default above keeps it off the phone
     and the accounts-page map, which share this markup */
  #overview .dash-map-hero .map-search-tips {
    display: flex; align-items: center; gap: 6px;
    position: absolute; z-index: 8; left: 16px; top: 56px;
    max-width: 300px; font-size: 0.72rem; opacity: 0.75;
    pointer-events: none; margin: 0;
  }
  body.night-mode #overview .map-search-tips { color: rgba(245, 242, 236, 0.85); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); }
  body:not(.night-mode) #overview .map-search-tips { color: rgba(36, 50, 31, 0.85); text-shadow: 0 1px 10px rgba(255, 255, 255, 0.85); }
  /* fallback-map zoom buttons sat at top 10 left 10 (app.css) — exactly under
     the raised search; drop them below the tips line (hidden anyway once
     Google is ready) */
  #overview .dash-map-hero .map-controls { top: 96px; left: 16px; }
  /* stats: fully transparent, VERTICAL, tucked below the rail on the left */
  #overview .dash-stats-strip {
    flex-direction: column; align-items: flex-start; gap: 3px;
    left: 22px; bottom: auto; top: calc(50% + 196px);   /* clears the EXPANDED dock too */
    padding: 0; font-size: 0.7rem;
    background: transparent !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-radius: 0; white-space: nowrap;
  }
  #overview .dash-stats-strip .dash-stat-dot { display: none; }
  #overview .dash-stats-strip .dash-stat strong { font-size: 0.85rem; }
  body.night-mode #overview .dash-stats-strip { color: rgba(245, 242, 236, 0.62); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
  body:not(.night-mode) #overview .dash-stats-strip { color: rgba(36, 50, 31, 0.7); text-shadow: 0 1px 8px rgba(255, 255, 255, 0.8); }
  /* account card: top-right under the search, never clipped, always dismissible */
  #overview .map-card {
    top: 14px; right: 14px; bottom: auto; left: auto;   /* search lives left now */
    width: min(280px, calc(100% - 28px));
    max-height: calc(100% - 120px); overflow-y: auto;
  }
}
.map-card .map-card-close {
  position: absolute; top: 6px; right: 8px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.15rem; line-height: 1; opacity: 0.6; padding: 4px;
}
.map-card .map-card-close:hover { opacity: 1; }
.dash-map-hero {
  position: relative;
  margin: 12px -22px 0;   /* mirror main's side padding; the capture bar sits flush below */
  height: calc(100vh - 90px - 82px);   /* band for the capture bar + tip/copyright line */
  min-height: 480px;
  overflow: hidden;
}
/* the login gradient crowns the map — pine to harvest gold */
.dash-map-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 7;
  background: linear-gradient(90deg, var(--t-grad-1), var(--t-grad-2), var(--t-grad-3), var(--t-grad-4), var(--t-grad-6), var(--t-grad-7));
}
.dash-map-hero .map-wrap {
  position: absolute; inset: 0;
  height: auto !important; min-height: 0 !important;
  border-radius: 0;
}

/* the quiet stats strip — blends into the bottom of the map */
.dash-stats-strip {
  position: absolute; z-index: 6;
  /* bottom-left (Josh, 2026-07-11): keeps the map center clean for the capture bar
     below; 42px clears the Google logo */
  bottom: 42px; left: 14px;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 22px; border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 0.8rem; letter-spacing: 0.01em; white-space: nowrap;
}
body.night-mode .dash-stats-strip { background: rgba(13, 14, 16, 0.42); color: rgba(245, 242, 236, 0.85); }
body:not(.night-mode) .dash-stats-strip { background: rgba(255, 252, 243, 0.55); color: rgba(36, 50, 31, 0.9); }
.dash-stat strong { font-family: var(--t-serif); font-size: 1.05rem; font-weight: 600; margin-right: 5px; }
/* the numbers ARE the pin color key (Josh, 2026-07-11): match .google-status-marker */
.dash-stat.stat-pending strong { color: var(--gold); }
.dash-stat.stat-tests strong { color: var(--map-trialing, #a678e8); }
.dash-stat.stat-customers strong { color: var(--green); }


/* pending pin: trial agreed, not running yet — cream at night, stone by day */
.pin.pending, .google-status-marker.pending { background: var(--gold); }   /* yellow = awaiting trial (Josh 2026-07-24) */
body:not(.night-mode) .pin.pending, body:not(.night-mode) .google-status-marker.pending { background: var(--gold); }
.dash-stat-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }

@media (max-width: 640px) {
  .dash-map-hero {
    /* phone-layout audit 2026-07-30: main's side padding is 12px on the phone —
       -24px bled 12px past BOTH screen edges, giving the whole page a sideways
       scroll that clipped the menu button and page titles */
    margin: 6px -12px 0;
    height: calc(100dvh - 252px + 16px);   /* only the slim bar below now — map gets the pixels (Josh) */
    min-height: 380px;
  }
  .dash-stats-strip { bottom: 36px; left: 10px; max-width: 94%; overflow-x: auto; }
}


/* the dashboard greeting carries the login's colors as gradient serif text */
body.night-mode #overview .workspace-head h2 {
  background: linear-gradient(92deg, rgb(var(--t-line-mint)) 0%, #e6d9a8 45%, rgb(var(--t-line-gold)) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
}
body:not(.night-mode) #overview .workspace-head h2 {
  background: linear-gradient(92deg, var(--t-grad-1) 0%, var(--t-grad-3) 45%, var(--t-grad-6) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
}

/* =============================== TASKS =================================== */
.tasks-view-toggle { display: inline-flex; }
.p4-task-card {
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--t-radius);
  padding: 14px 16px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px;
}
.p4-task-card.overdue { border-left: 3px solid var(--t-bad); }
.p4-task-titlerow { display: flex; align-items: center; gap: 8px; }
.p4-task-due { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.p4-task-card h4 { margin: 6px 0 2px; font-size: 0.98rem; letter-spacing: -0.01em; }
.p4-task-card > .p4-task-main p { margin: 0; font-size: 0.82rem; color: var(--muted); }
.p4-task-context { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.task-context-chip {
  border: 1px solid var(--line); background: var(--field); color: var(--ink);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer;
  transition: border-color 120ms ease;
}
.task-context-chip:hover { border-color: var(--t-accent); }
.task-context-chip.trial { color: var(--t-accent); }
body:not(.night-mode) .task-context-chip.trial { color: var(--t-accent-day); }
.p4-task-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.p4-outcome-recorded { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p4-outcome-chip {
  border-radius: 999px; padding: 4px 12px; font-size: 0.72rem; font-weight: 700;
  background: var(--t-warn); color: #1c1302;
}
.p4-outcome-chip.no_show { background: var(--t-bad); color: #fff; }
.p4-outcome-note {
  flex: 1; min-width: 160px; height: 34px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--field); color: var(--ink); padding: 0 10px; font: inherit; font-size: 0.8rem;
}
.p4-outcome-clear { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; }
.p4-outcome-caption { flex-basis: 100%; margin: 0; font-size: 0.68rem; color: var(--muted); }

.p4-cal-panel .p4-cal-nav { display: flex; gap: 6px; }
.p4-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px 0 6px; }
.p4-cal-weekdays span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 4px; }
.p4-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.p4-cal-cell {
  min-height: 92px; border: 1px solid var(--line); border-radius: var(--t-radius-sm);
  background: var(--field); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.p4-cal-cell.empty { background: transparent; border-style: dashed; opacity: 0.4; }
.p4-cal-cell.today { border-color: var(--t-accent); box-shadow: 0 0 0 1px var(--t-accent) inset; }
.p4-cal-daynum { font-size: 0.7rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.p4-cal-chip {
  border: 0; text-align: left; border-radius: 6px; padding: 3px 6px; cursor: pointer; font: inherit;
  font-size: 0.66rem; font-weight: 600; color: var(--t-accent-ink); background: var(--t-accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body:not(.night-mode) .p4-cal-chip { background: var(--t-accent-day); color: #fffdf6; }
.p4-cal-chip.late { background: var(--t-bad); color: #fff; }
.p4-cal-more { font-size: 0.64rem; color: var(--muted); }

/* ============================= PROSPECTS ================================= */
.cold-dnc-toggle {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 999px; padding: 2px 8px; font: inherit; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; flex: none;
  transition: all 120ms ease;
}
.cold-dnc-toggle:hover { border-color: var(--t-bad); color: var(--t-bad); }
.cold-dnc-toggle.on { background: var(--t-bad); border-color: var(--t-bad); color: #fff; }
.cold-identity-cell { display: flex; align-items: center; gap: 6px; }
tr.cold-dnc td { opacity: 0.55; }
tr.cold-dnc .cold-dnc-toggle, tr.cold-dnc .cold-identity-cell { opacity: 1; }
tr.cold-dnc .phone-call-link { pointer-events: none; opacity: 0.3; }

/* ==================== ACCOUNTS LIST (Attio-ish polish) =================== */
.matrix-grid table { border-collapse: separate; border-spacing: 0; }
.matrix-grid tbody tr { transition: background 100ms ease; }
.matrix-grid tbody tr:hover { background: var(--field); }
.matrix-grid tbody td { border-bottom: 1px solid var(--line); }
.matrix-company-button { font-weight: 650; letter-spacing: -0.005em; }

/* ================= PROFILE (Granola-style executive brief) =============== */
.profile-shell .brief-card, #profile .brief-card {
  padding: 22px 26px; line-height: 1.6;
}
#profile .brief-card > h3 { font-size: 1.25rem; }
#profile .brief-card p { max-width: 68ch; font-size: 0.92rem; }
#profile .brief-card .signal-label { margin-bottom: 6px; display: inline-block; }

/* ===================== TRIAL DETAIL — WHITE PAPER ======================== */
.trial-paper-body { padding-top: 0; }
.trial-paper {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--t-radius-lg);
  padding: clamp(20px, 3.5vw, 40px) clamp(20px, 4.5vw, 52px);
  display: flex; flex-direction: column; gap: 22px;
}
.paper-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.paper-kicker {
  font-family: var(--t-serif); font-size: 1.35rem; font-weight: 600; letter-spacing: 0.01em;
}
.paper-kicker::after { content: ""; display: block; width: 34px; height: 2px; margin-top: 6px; background: var(--t-green); border-radius: 2px; }
.paper-kicker.findings::after { background: var(--t-accent); }
body:not(.night-mode) .paper-kicker.findings::after { background: var(--t-accent-day); }
.paper-reference-tag {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.paper-result-date { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.paper-methods.reference { opacity: 0.88; }
.paper-field-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px 26px; margin-top: 14px;
}
.paper-field.wide { grid-column: 1 / -1; }
.paper-field-label {
  display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.paper-field p { margin: 0; font-size: 0.9rem; line-height: 1.55; max-width: 74ch; }
.paper-collapse summary { cursor: pointer; font-size: 0.9rem; line-height: 1.55; list-style: none; }
.paper-collapse summary::-webkit-details-marker { display: none; }
.paper-collapse-more { color: var(--t-accent); font-size: 0.75rem; font-weight: 600; }
.paper-collapse[open] summary { display: none; }
.paper-collapse p { margin: 0; font-size: 0.9rem; line-height: 1.55; }
.paper-empty { color: var(--muted); font-size: 0.88rem; }

/* the hard boundary: divider + tonal shift into Findings */
.paper-divider { display: flex; align-items: center; margin: 4px 0; }
.paper-divider span { flex: 1; height: 1px; background: var(--line); position: relative; }
.paper-divider span::after {
  content: ""; position: absolute; left: 0; top: -1px; width: 64px; height: 3px;
  border-radius: 3px; background: var(--t-accent);
}
body:not(.night-mode) .paper-divider span::after { background: var(--t-accent-day); }
.paper-findings {
  border-radius: var(--t-radius); padding: 18px 20px 20px; margin: 0 -6px;
  background: rgba(217, 154, 43, 0.05);
  border: 1px solid rgba(217, 154, 43, 0.14);
  display: flex; flex-direction: column; gap: 16px;
}
body:not(.night-mode) .paper-findings { background: rgba(169, 118, 29, 0.06); border-color: rgba(169, 118, 29, 0.18); }
.paper-summary { margin: 0; font-size: 1.02rem; font-weight: 550; line-height: 1.55; max-width: 72ch; }
.paper-observations p { margin: 0; font-size: 0.95rem; line-height: 1.7; max-width: 74ch; }
.paper-conclusion {
  border-left: 3px solid var(--t-accent); padding: 10px 16px; border-radius: 0 var(--t-radius-sm) var(--t-radius-sm) 0;
  background: var(--field);
}
body:not(.night-mode) .paper-conclusion { border-left-color: var(--t-accent-day); }
.paper-conclusion p { margin: 0; font-size: 0.95rem; font-weight: 550; line-height: 1.6; max-width: 72ch; }
.paper-findings-empty { margin: 0; }

.paper-chart { display: flex; flex-direction: column; gap: 12px; }
.thread-chart { margin-top: 10px; }   /* inline assistant chart spacing (2026-07-17) */
.paper-chart-group { display: flex; flex-direction: column; gap: 5px; }
.paper-chart-subject { font-size: 0.82rem; font-weight: 650; }
.paper-chart-delta { font-style: normal; color: var(--t-good); font-weight: 700; font-size: 0.78rem; }
.paper-bar-row { display: grid; grid-template-columns: 84px 1fr 90px; align-items: center; gap: 10px; }
.paper-bar-label { font-size: 0.72rem; color: var(--muted); text-align: right; }
.paper-bar-track { height: 14px; border-radius: 7px; background: var(--field); overflow: hidden; }
.paper-bar { display: block; height: 100%; border-radius: 7px; }
.paper-bar.control { background: var(--muted); opacity: 0.55; }
.paper-bar.treated { background: var(--t-accent); }
body:not(.night-mode) .paper-bar.treated { background: var(--t-accent-day); }
.paper-bar-value { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--ink); }

@media (max-width: 700px) {
  .dash-pipeline-board { grid-auto-columns: minmax(132px, 60%); }
  .p4-cal-cell { min-height: 68px; }
  .paper-bar-row { grid-template-columns: 64px 1fr 74px; }
}

/* ============================================================================
   Capture bar — the assistant's front door (Josh, 2026-07-11).
   A slim glass band flush below the dashboard map: note input with rotating
   tip placeholders, + (document inbox), mic (voice note -> transcript), send,
   and the review badge whose drawer doubles as the pop-up chat panel.
   ========================================================================== */
.capture-bar {
  position: relative;
  z-index: 8;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 -22px 0;
  padding: 10px 18px 6px;
  min-height: 54px;
}
#captureInput { max-width: 640px; }   /* centered cluster, not a wall-to-wall field (Josh) */

/* quiet line under the bar: rotating tip + copyright (Josh, 2026-07-11) */
.capture-footer {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin: 0 -22px -28px;
  padding: 0 18px 7px;
  min-height: 22px;
}
.capture-tip-bulb { width: 13px; height: 13px; margin-right: 6px; flex: none; }
body.night-mode .capture-tip-bulb { color: rgb(var(--t-line-gold)); opacity: 0.85; }
body:not(.night-mode) .capture-tip-bulb { color: var(--t-accent-day); }
.capture-tip { font-size: 0.68rem; letter-spacing: 0.01em; }
.capture-tip.status-error { color: var(--t-bad); }
.capture-copy { position: absolute; right: 18px; font-size: 0.64rem; opacity: 0.7; }
body.night-mode .capture-footer { background: rgba(13, 14, 16, 0.9); color: rgba(245, 242, 236, 0.5); }
body:not(.night-mode) .capture-footer { background: rgba(255, 252, 243, 0.92); color: rgba(111, 107, 82, 0.85); }
.capture-bar::before {   /* brand seam: the login gradient as a hairline above the bar */
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--t-grad-1), var(--t-grad-3) 38%, var(--t-grad-5) 70%, var(--t-grad-7));
  opacity: 0.75;
}
/* NO backdrop-filter here: it would become the containing block for the
   position:fixed expanded drawer (same trap as the mobile bars, 2026-07-11) */
body.night-mode .capture-bar { background: rgba(13, 14, 16, 0.9); }
body:not(.night-mode) .capture-bar { background: rgba(255, 252, 243, 0.92); }
.capture-bar.dragging { outline: 2px dashed var(--t-accent); outline-offset: -6px; }

#captureInput, #trialComposerNotes, #activityCaptureNotes {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 0.88rem;
  outline: none;
}
body.night-mode #captureInput, body.night-mode #trialComposerNotes, body.night-mode #activityCaptureNotes {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--t-glass-line);
  color: var(--t-on-dark);
}
body.night-mode #captureInput::placeholder, body.night-mode #trialComposerNotes::placeholder, body.night-mode #activityCaptureNotes::placeholder { color: rgba(245, 242, 236, 0.46); }
body.night-mode #captureInput:focus, body.night-mode #trialComposerNotes:focus, body.night-mode #activityCaptureNotes:focus { border-color: rgba(217, 154, 43, 0.55); }
body:not(.night-mode) #captureInput, body:not(.night-mode) #trialComposerNotes, body:not(.night-mode) #activityCaptureNotes {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--t-day-line);
  color: var(--t-day-ink);
}
body:not(.night-mode) #captureInput::placeholder, body:not(.night-mode) #trialComposerNotes::placeholder { color: rgba(111, 107, 82, 0.75); }
body:not(.night-mode) #captureInput:focus, body:not(.night-mode) #trialComposerNotes:focus { border-color: var(--t-accent-day); }

/* Ambient Donna composer (Josh, 2026-07-18): a GROUNDED, multi-line, auto-growing
   surface — the Claude/ChatGPT feel — replacing the single-line floating pill.
   Structural only; the theme colours above still apply. */
.capture-bar { align-items: flex-end; }
#captureInput {
  height: auto;
  min-height: 42px;
  max-height: 168px;
  border-radius: 15px;
  padding: 11px 16px;
  line-height: 1.45;
  text-align: left;
  resize: none;
  overflow-y: auto;
  font-family: inherit;
  max-width: 680px;
}

.capture-icon-btn {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1.05rem;
  cursor: pointer;
}
.capture-icon-btn svg { width: 18px; height: 18px; }
body.night-mode .capture-icon-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--t-glass-line);
  color: var(--t-on-dark-soft);
}
body:not(.night-mode) .capture-icon-btn {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--t-day-line);
  color: var(--t-day-ink);
}
.capture-mic.recording {
  color: #fff !important;
  background: var(--t-bad) !important;
  border-color: transparent !important;
  animation: capture-pulse 1.4s ease-in-out infinite;
}
@keyframes capture-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 83, 61, 0.45); }
  50% { box-shadow: 0 0 0 9px rgba(229, 83, 61, 0); }
}

.capture-send {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--t-action);
  color: var(--t-action-ink);
}
body:not(.night-mode) .capture-send { background: var(--t-action); color: var(--t-action-ink); }
.capture-send:disabled { opacity: 0.35; cursor: default; }

/* ---- the review panel, anchored to the badge in the shell cluster ---------
   Desktop: the badge sits in the dock, so the panel opens to the dock's right.
   The panel node gets REPARENTED to <body> when expanded (see capture-bar.js). */
@media (min-width: 641px) {
  #reviewBadgeRoot { display: flex; justify-content: center; }   /* its own quiet row at the dock's foot */
  #reviewBadgeRoot .command-message-drawer {
    top: auto;
    bottom: -6px;
    left: calc(100% + 22px);
    right: auto;
    width: min(600px, calc(100vw - 320px));
    border-radius: 16px;
  }
}
#reviewBadgeRoot .command-message-list { max-height: min(46vh, 420px); }
.capture-panel-tools { display: inline-flex; align-items: center; gap: 8px; }
.capture-expand-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--line);
  color: inherit;
}

/* expanded: near-fullscreen, semi-transparent — the map ghosts through.
   The node lives directly under <body> in this state (no filtered ancestor). */
body > .command-message-alert.capture-expanded > summary { display: none; }
.command-message-alert.capture-expanded .command-message-drawer {
  position: fixed;
  inset: 78px 46px 88px 96px;   /* left 96px: the floating dock stays visible and clickable */
  width: auto;
  z-index: 92;
  overflow: auto;
}
body.night-mode .command-message-alert.capture-expanded .command-message-drawer {
  background: rgba(13, 14, 16, 0.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.05); backdrop-filter: blur(20px) saturate(1.05);
}
body:not(.night-mode) .command-message-alert.capture-expanded .command-message-drawer {
  background: rgba(255, 252, 243, 0.72) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.05); backdrop-filter: blur(20px) saturate(1.05);
}
.command-message-alert.capture-expanded .command-message-list { max-height: none; }
.capture-expand-backdrop {   /* click anywhere outside -> back to the map */
  position: fixed; inset: 0; z-index: 88;
  background: rgba(0, 0, 0, 0.12);
}

/* night: the review cards inside the chat panel must read on the dark drawer */
body.night-mode .command-message-drawer .intake-history-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--t-glass-line);
  color: var(--t-on-dark);
}
body.night-mode .command-message-drawer .intake-history-item strong { color: var(--t-on-dark); }
body.night-mode .command-message-drawer .intake-history-item .muted { color: var(--t-on-dark-faint); }

@media (max-width: 640px) {
  .capture-bar { margin: 0 -16px; padding: 8px 12px; min-height: 54px; }
  .capture-footer { margin: 0 -16px; padding: 0 12px 6px; }
  .capture-copy { display: none; }   /* no room on a phone; the login screen carries it */
  /* app.css's mobile rule (left:0; right:auto) was for the drawer's old header
     home; anchored to the bar's right-end badge it pushes the panel off-screen */
  #captureBar .command-message-drawer { width: calc(100vw - 24px); left: auto; right: -8px; }
  #captureBar .command-message-alert.capture-expanded .command-message-drawer {
    inset: calc(60px + env(safe-area-inset-top)) 8px calc(140px + env(safe-area-inset-bottom)) 8px;
  }
}

/* ---- voice session overlay (Josh, 2026-07-11): press, talk, review, file ---- */
.voice-overlay { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; }
body.night-mode .voice-overlay { background: rgba(8, 9, 10, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body:not(.night-mode) .voice-overlay { background: rgba(250, 246, 236, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.voice-card {
  position: relative;
  width: min(420px, calc(100vw - 40px));
  border-radius: var(--t-radius-lg);
  padding: 26px 24px 16px;
  display: grid; gap: 12px; justify-items: center; text-align: center;
}
body.night-mode .voice-card { background: rgba(13, 14, 16, 0.9); border: 1px solid var(--t-glass-line); color: var(--t-on-dark); }
body:not(.night-mode) .voice-card { background: rgba(255, 253, 246, 0.95); border: 1px solid var(--t-day-line); color: var(--t-day-ink); }
.voice-card h2 { font-family: var(--t-serif); font-weight: 600; margin: 0; font-size: 1.3rem; }
.voice-mic {
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; border: none;
  background: var(--t-action); color: var(--t-action-ink);
}
body:not(.night-mode) .voice-mic { background: var(--t-action); color: var(--t-action-ink); }
.voice-mic svg { width: 34px; height: 34px; }
.voice-mic.recording { background: var(--t-bad) !important; color: #fff !important; animation: capture-pulse 1.4s ease-in-out infinite; }
.voice-mic.speaking { animation: capture-pulse 1.8s ease-in-out infinite; }
.voice-status { margin: 0; font-size: 0.82rem; opacity: 0.85; }
/* two-way call: the last exchange (you + Donna) shown above the mic */
.voice-convo { width: 100%; display: flex; flex-direction: column; gap: 8px; max-height: 34vh; overflow: auto; text-align: left; }
.voice-convo:empty { display: none; }
.voice-line { margin: 0; font-size: 0.86rem; line-height: 1.45; border-radius: 12px; padding: 9px 12px; }
.voice-line span { display: block; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.55; margin-bottom: 2px; }
body.night-mode .voice-line.voice-you { background: rgba(255,255,255,0.05); }
body:not(.night-mode) .voice-line.voice-you { background: rgba(112,92,46,0.06); }
.voice-line.voice-donna { background: rgba(169,118,29,0.12); }
.voice-transcript {
  margin: 0; max-height: 38vh; overflow: auto; text-align: left;
  font-size: 0.88rem; line-height: 1.5; border-radius: 12px; padding: 12px 14px; width: 100%;
}
body.night-mode .voice-transcript { background: rgba(255, 255, 255, 0.06); }
body:not(.night-mode) .voice-transcript { background: rgba(112, 92, 46, 0.07); }
.voice-actions { display: flex; gap: 10px; }
.voice-caption { margin: 0; font-size: 0.66rem; opacity: 0.6; }

/* ---- day mode: tinted translucent bands instead of stark white (Josh) ------ */
body:not(.night-mode) #overview .workspace-head {
  margin: -18px -22px 0; padding: 16px 22px 10px;
  background:
    linear-gradient(90deg, rgba(23, 117, 47, 0.10), rgba(76, 138, 44, 0.06) 45%, rgba(219, 156, 44, 0.11)),
    rgba(255, 252, 243, 0.5);
}
body:not(.night-mode) .capture-bar,
body:not(.night-mode) .capture-footer {
  background:
    linear-gradient(90deg, rgba(23, 117, 47, 0.08), rgba(138, 132, 44, 0.06) 50%, rgba(219, 156, 44, 0.10)),
    rgba(255, 252, 243, 0.55);
}

/* ---- phone: room to breathe (Josh, 2026-07-11) ----------------------------- */
@media (max-width: 640px) {
  body:not(.night-mode) #overview .workspace-head { margin: -6px -16px 0; padding: 12px 16px 8px; }
  .capture-bar { gap: 9px; min-height: 46px; padding: 7px 12px; }   /* room between the buttons (Josh) */
  .capture-bar #captureMic { display: none; }   /* the voice session covers speech on a phone */
  .capture-icon-btn, .capture-send { width: 32px; height: 32px; }
  #captureInput { height: 34px; padding: 0 12px; font-size: 0.85rem; }
  .capture-footer { display: none; }   /* tips are desktop training; the phone needs the pixels (Josh) */

  /* review panel: on the phone it ALWAYS opens as the expanded sheet (see
     capture-bar.js — the filtered top bar would trap an anchored drawer) */
  .command-message-alert.capture-expanded .command-message-drawer {
    inset: calc(60px + env(safe-area-inset-top)) 8px calc(90px + env(safe-area-inset-bottom)) 8px;
  }

}

/* map filters: small pill top-right (below Google's fullscreen control), and a
   compact column when open. Global since 2026-07-11: the search bar owns top-left. */
.dash-map-hero .map-filter-bar { left: auto; right: 10px; top: 56px; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 3px; max-height: none; overflow: visible; }
.dash-map-hero .map-filter-toggle { min-height: 22px; padding: 2px 8px; font-size: 0.64rem; }
.dash-map-hero .map-filter-bar label { min-height: 20px; font-size: 0.62rem; padding: 1px 7px; gap: 4px; }
.dash-map-hero .map-filter-bar input { transform: scale(0.85); }

/* ---- map search (Josh, 2026-07-11): find your companies or any place ------- */
.map-search { position: absolute; z-index: 9; top: 12px; left: 12px; width: min(320px, calc(100% - 130px)); }
/* on the dashboard the floating dock owns the left edge — search clears it in
   both dock states, and the dropdown is capped so nothing ever touches (Josh) */
@media (min-width: 641px) {
  body.sidebar-collapsed .dash-map-hero .map-search { left: 96px; }
  body:not(.sidebar-collapsed) .dash-map-hero .map-search { left: 240px; }
}
.map-search-results { max-height: 300px; overflow-y: auto; }
.map-search input {
  width: 100%; height: 38px;
  border-radius: 999px;
  padding: 0 14px 0 38px;
  font-size: 0.85rem;
  outline: none;
}
.map-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.map-search-glyph { position: absolute; left: 13px; top: 10.5px; width: 17px; height: 17px; opacity: 0.65; pointer-events: none; }
body.night-mode .map-search input { background: rgba(13, 14, 16, 0.82); border: 1px solid var(--t-glass-line); color: var(--t-on-dark); }
body.night-mode .map-search input::placeholder { color: rgba(245, 242, 236, 0.5); }
body.night-mode .map-search-glyph { color: rgba(245, 242, 236, 0.75); }
body:not(.night-mode) .map-search input { background: rgba(255, 253, 246, 0.94); border: 1px solid var(--t-day-line); color: var(--t-day-ink); }
body:not(.night-mode) .map-search-glyph { color: var(--t-day-muted); }
.map-search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 22px 50px -24px rgba(0, 0, 0, 0.55);
}
body.night-mode .map-search-results { background: rgba(13, 14, 16, 0.95); border: 1px solid var(--t-glass-line); color: var(--t-on-dark); }
body:not(.night-mode) .map-search-results { background: rgba(255, 253, 246, 0.97); border: 1px solid var(--t-day-line); color: var(--t-day-ink); }
.map-search-row { display: block; width: 100%; text-align: left; padding: 9px 14px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
body.night-mode .map-search-row:hover { background: rgba(255, 255, 255, 0.07); }
body:not(.night-mode) .map-search-row:hover { background: rgba(112, 92, 46, 0.08); }
.map-search-row strong { display: block; font-size: 0.84rem; font-weight: 600; }
.map-search-row span { font-size: 0.7rem; opacity: 0.65; }
.map-search-place strong { font-weight: 500; font-style: italic; }
.map-search-empty { margin: 0; padding: 10px 14px; font-size: 0.78rem; opacity: 0.7; }

@media (max-width: 640px) {
  .map-search { top: 8px; left: 10px; right: 58px; width: auto; }   /* clear the fullscreen control */
  .map-search input { height: 34px; font-size: 0.82rem; }
}

/* ---- phone layout, from Josh's marked-up screenshot (2026-07-11) -----------
   1) bottom tabs spread across the whole bar, 2) the map + message bar fill
   the viewport exactly (flex, not calc guesses — his phone's safe-area insets
   broke the arithmetic and left a dead band), 3) brand sits top-RIGHT,
   controls top-left. */
@media (max-width: 640px) {
  #appView main { display: flex; flex-direction: column; min-height: 100dvh; }
  /* reserve EXACTLY the tab bar's height — the old 76px over-reservation was
     the "so much empty space" under the message bar (Josh's photo, 2026-07-11) */
  #appView main { padding-bottom: calc(57px + env(safe-area-inset-bottom)) !important; }   /* = measured tab bar height */
  #appView main > .page.hidden { display: none !important; }
  #overview.page { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding-bottom: 0 !important; }
  #overview .workspace-head { flex: 0 0 auto; }
  #overview .dash-map-hero { flex: 1 1 auto; height: auto; min-height: 300px; }
  /* the ChatGPT pill (Josh, 2026-07-12, two revisions same day): ONE floating
     oval holding + / text / mic / voice / send — and it now FLOATS OVER the
     map ("the map can go underneath... semi transparent... want to see it
     behind it"): absolute at the bottom, translucent glass, map bleeds under. */
  #overview { position: relative; }
  #overview .capture-bar, #profile .capture-bar {
    position: absolute;
    left: 10px; right: 10px;
    /* #overview ends 8px above the screen (main's bottom padding), so 8px
       here = a true 16px viewport gap — mirroring the top strip's 16px
       (Josh: "symmetrical"), and the gap keeps Google's attribution visible */
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 9;
    margin: 0 !important;
    padding: 4px 6px 4px 8px !important;
    min-height: 54px;
    border-radius: 999px;
    gap: 0;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  body.night-mode #overview .capture-bar, #profile .capture-bar {
    background: rgba(22, 23, 26, 0.66) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  body:not(.night-mode) #overview .capture-bar, #profile .capture-bar {
    background: rgba(255, 252, 243, 0.7) !important;
    border: 1px solid var(--t-day-line);
  }
  /* with the pill out of the flow the map takes the whole column and bleeds
     over main's bottom padding to the screen edge */
  #overview .dash-map-hero { margin-bottom: calc(-8px - env(safe-area-inset-bottom)) !important; }
  /* no gradient crown on the phone map — "keep it simple & powerful" (Josh, 2026-07-12) */
  #overview .dash-map-hero::before { display: none; }
  .dash-stats-strip { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  #overview .capture-bar, #profile .capture-bar::before { display: none; }   /* no gradient seam on the floating pill */
  #overview .capture-bar, #profile .capture-bar .capture-icon-btn {
    background: transparent !important;
    border: 0 !important;
    width: 40px; height: 40px;
  }
  #overview .capture-bar, #profile .capture-bar .capture-icon-btn svg { width: 20px; height: 20px; }
  #overview #captureInput {
    background: transparent !important;
    border: 0 !important;
    font-size: 1rem;
    padding: 0 6px;
  }
  #overview .capture-bar, #profile .capture-bar .capture-send { width: 40px; height: 40px; font-size: 1.05rem; }

  /* tabs take the whole bottom bar */
  #appView #nav { justify-content: space-between !important; }
  #appView #nav .nav-btn { flex: 1 1 0 !important; width: auto !important; max-width: none !important; }

  /* top bar (Josh, 2026-07-11 final): Tilfully LEFT, [theme] [Log out] right.
     Settings lives in Profile -> Integrations on the phone; Profile is a tab. */
  #appView .shell-corner #profileBtn { display: none !important; }
  #appView .shell-corner #settingsBtn { display: none !important; }
  #appView .brand { align-items: center !important; }
  #appView .brand h1 { line-height: 1.1; }

  /* review badge floats on the greeting row, all the way right (Josh) —
     the aside carries no filter on mobile, so fixed = viewport-fixed */
  #reviewBadgeRoot {
    position: fixed;
    top: calc(60px + env(safe-area-inset-top));
    right: 10px;
    z-index: 46;
  }
}
.nav-profile-tab { display: none; }   /* phone-only tab; desktop keeps the corner avatar */
@media (max-width: 640px) {
  .nav-profile-tab { display: flex !important; }
}

/* ---- phone top bar: everything must FIT in one 390px row (Josh's photo,
       2026-07-11: controls were overflowing and getting clipped) ------------ */
@media (max-width: 640px) {
  #appView .shell-corner { gap: 5px; }
  #appView .shell-corner .icon-button { width: 33px; height: 33px; font-size: 0.9rem; }
  #appView .shell-corner #profileBtn svg { width: 16px; height: 16px; }
  #appView .shell-corner #logoutBtn { padding: 5px 10px !important; font-size: 0.68rem !important; min-height: 0 !important; }
  #appView .shell-corner .message-alert-button { width: 33px; height: 33px; min-height: 33px; }
  #appView .brand .mark { width: 26px; height: 26px; font-size: 0.85rem; }
  #appView .brand h1 { font-size: 1.02rem !important; }

  /* greeting row: compact — the map deserves the pixels */
  #overview .workspace-head { padding-top: 8px; padding-bottom: 6px; }
  #overview .workspace-head h2 { font-size: 1.18rem; margin: 0; }
  #overview .workspace-head .inspiration-line { display: none; }   /* long line wrapped on phones */
}

/* the review bell (Josh, 2026-07-11: "make it look better") */
.review-bell { width: 17px; height: 17px; display: block; }
body.night-mode .message-alert-button { color: var(--t-on-dark-soft); }

/* ---- Accounts on the phone: minimum chrome, no dead space (Josh, 2026-07-11) */
@media (max-width: 640px) {
  #matrix .workspace-head, #cold .workspace-head { padding: 4px 0 2px; margin: 0; }
  #matrix .workspace-head h2, #cold .workspace-head h2 { font-size: 1.18rem; margin: 0; }
  #matrix .panel, #cold .panel { padding: 8px; }
  #matrix .panel + .panel { margin-top: 8px; }

  /* the whole toolbar goes icon-scale */
  .add-account-label { display: none; }   /* "+" says it on a phone */
  #matrixAddRow, #coldAddAccount {
    width: 32px; height: 32px; min-height: 32px;
    padding: 0 !important; border-radius: 50%;
    font-size: 1.1rem; line-height: 1; flex: none;
  }
  /* SUPER-minimum toolbar (Josh): row 1 = [Accounts|Prospects] [+] [⋯] ·
     row 2 = [search] [view]. No labels, icon-scale everything.
     Selector depth matches app.css's desktop grid rule (display:grid !important
     at (1,3,1)) so the phone flex actually wins. */
  #matrix .panel > .matrix-toolbar.compact .matrix-main-tools,
  #matrix .matrix-main-tools,
  #matrix .cold-primary-tools {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
  }
  #matrix .accounts-mode-toggle { flex: 1 1 0 !important; width: auto !important; min-width: 0; max-width: calc(100% - 84px); display: inline-flex; order: -2; }
  #matrix .accounts-mode-toggle button { flex: 1 1 0; padding: 4px 8px; font-size: 0.7rem; }
  #matrixAddRow, #coldAddAccount { width: 28px !important; height: 28px; min-height: 28px; font-size: 1rem; order: -1; }
  #matrix .accounts-more-menu { flex: none !important; width: auto !important; order: 0; }
  #matrix .accounts-more-summary { width: 28px !important; height: 28px; min-height: 28px; padding: 0 !important; display: grid; place-items: center; border-radius: 50% !important; }
  #matrix .accounts-more-summary .more-word { display: none; }
  #matrix .matrix-category-select { flex: 0 1 96px; width: auto !important; order: 9; margin: 0; }
  #matrix .matrix-category-select select { width: 100%; height: 28px; font-size: 0.7rem; padding: 0 4px; }
  #matrixSearch { order: 8; flex: 1 1 55% !important; height: 28px; font-size: 0.78rem; }
  #matrix .matrix-selected-menu { order: 1; }
  .accounts-mode-toggle button { padding: 5px 12px; font-size: 0.72rem; min-height: 0; }
  .matrix-category-select span { display: none; }   /* the "View" label */
  .matrix-category-select select { height: 30px; font-size: 0.74rem; padding: 0 6px; }
  #matrixSearch, #coldSearch { height: 30px; font-size: 0.8rem; flex: 1 1 120px; min-width: 0; }
  .cold-search-label { flex: 1 1 auto; }
  .cold-search-label > input { width: 100%; }
  .accounts-more-summary { padding: 4px 9px; font-size: 0.7rem; min-height: 0; }
  #matrix .matrix-toolbar { padding: 0; margin-bottom: 6px; }
  #matrix .message:empty { display: none; }

  /* prospects filter chips: small pills, one tight row */
  .cold-status-filters { gap: 4px; }
  .cold-status-filters .button, .cold-status-filters button { padding: 3px 9px; font-size: 0.68rem; min-height: 0; }

  /* denser table so the space holds rows, not padding */
  #matrix td, #matrix th { padding: 6px 6px; }
  #matrix .matrix-phone-cell input { height: 30px; font-size: 0.78rem; }
  #matrix .phone-call-link, #matrix .matrix-phone-cell .icon-button { width: 26px; height: 26px; }
}

/* ============================================================================
   ACCOUNTS TABLE — Tilfully skin (Josh, 2026-07-11). Color/typography only;
   the dense table layout is deliberately unchanged.
   ========================================================================== */

/* NO tinted wash behind the tables (Josh, 2026-07-11: circled the green cast —
   the translucent panels were picking it up). Neutral body ground only. */

/* serif treatment: page header and column headers */
#matrix .workspace-head h2, #cold .workspace-head h2 { font-family: var(--t-serif); font-weight: 600; }
#matrix thead th, #matrix thead .matrix-sort-head {
  font-family: var(--t-serif) !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
}
#matrix .matrix-sort-head.active { color: var(--t-accent) !important; }
body:not(.night-mode) #matrix .matrix-sort-head.active { color: var(--t-accent-day) !important; }

/* glass-card toolbar */
body.night-mode #matrix .matrix-toolbar.compact,
body.night-mode #matrix .cold-toolbar,
body.night-mode #matrix .cold-status-filters {
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid var(--t-glass-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body:not(.night-mode) #matrix .matrix-toolbar.compact,
body:not(.night-mode) #matrix .cold-toolbar,
body:not(.night-mode) #matrix .cold-status-filters {
  background: rgba(255, 253, 246, 0.72) !important;
  border: 1px solid var(--t-day-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* stage colors: STANDARD CRM palette (Josh, 2026-07-11 — "typical standard
   colors you would use for marking accounts", reversing the earlier beige/gold
   remap). app.css's original --status-* tokens already ARE that standard set
   (slate lead / blue discussion / amber scheduled / cyan running / orange
   awaiting / purple commercial / green customer), so no override lives here.
   The map pins keep their own cream/gold/green key — different surface. */

/* amber as the one accent: checkboxes, focus rings, call buttons */
#matrix input[type="checkbox"] { accent-color: var(--t-action); }
body:not(.night-mode) #matrix input[type="checkbox"] { accent-color: var(--t-accent-day); }
body.night-mode #matrix select:focus, body.night-mode #matrix input:focus { border-color: rgba(217, 154, 43, 0.6) !important; }
body:not(.night-mode) #matrix select:focus, body:not(.night-mode) #matrix input:focus { border-color: var(--t-accent-day) !important; }
body.night-mode #matrix .matrix-phone-cell .icon-button,
body.night-mode #matrix .matrix-phone-cell a,
body.night-mode #matrix .phone-call-link {
  background: rgba(217, 154, 43, 0.14) !important;
  color: var(--t-accent) !important;
  border: 1px solid rgba(217, 154, 43, 0.38) !important;
}
body:not(.night-mode) #matrix .matrix-phone-cell .icon-button,
body:not(.night-mode) #matrix .matrix-phone-cell a,
body:not(.night-mode) #matrix .phone-call-link {
  background: rgba(169, 118, 29, 0.10) !important;
  color: var(--t-accent-day) !important;
  border: 1px solid rgba(169, 118, 29, 0.35) !important;
}

/* phone toolbar: out-rank app.css's mobile grid once and for all */
@media (max-width: 640px) {
  #matrix .matrix-main-tools, #matrix .cold-primary-tools {
    display: flex !important;
    grid-template-columns: none !important;
  }
  #matrix .accounts-mode-toggle { flex: 1 1 150px !important; width: auto !important; min-width: 0; }
  #matrix .matrix-category-select { flex: 1 1 32% !important; }
  #matrixSearch { flex: 1 1 50% !important; width: auto !important; }
  #matrix .cold-search-label { flex: 1 1 55% !important; width: auto !important; }
}

/* ============================================================================
   ACCOUNTS — Airtable-style stage groups (Josh, 2026-07-11).
   One colored pill per section header; rows underneath stay quiet.
   ========================================================================== */

/* rows are neutral now: kill the per-row tints and left stripes entirely */
#matrix .matrix-grid tbody tr[class*="matrix-stage"] td {
  background: transparent !important;
  box-shadow: none !important;
  border-left-color: transparent !important;
}
/* :first-child variant matches app.css's stripe rule specificity — later file wins */
#matrix .matrix-grid tbody tr[class*="matrix-stage"] td:first-child {
  box-shadow: none !important;
  border-left-color: transparent !important;
}
body.night-mode #matrix .matrix-grid tbody tr[class*="matrix-stage"]:hover td { background: rgba(255, 255, 255, 0.035) !important; }
body:not(.night-mode) #matrix .matrix-grid tbody tr[class*="matrix-stage"]:hover td { background: rgba(112, 92, 46, 0.06) !important; }

/* section header rows */
.acct-group-head td { padding: 0 !important; border: 0 !important; }
.acct-group-toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 10px 12px 8px;
  border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.acct-group-chevron { font-size: 0.7rem; opacity: 0.55; width: 12px; }
.acct-group-pill {
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.acct-group-count { font-size: 0.72rem; opacity: 0.55; }
.acct-group.collapsed tr:not(.acct-group-head) { display: none; }
body.night-mode .acct-group-head td { background: rgba(255, 255, 255, 0.025) !important; }
body:not(.night-mode) .acct-group-head td { background: rgba(112, 92, 46, 0.045) !important; }

/* pill colors ride the same --status-* tokens as everything else */
.acct-pill-lead        { background: var(--status-lead-bg); color: var(--status-lead); border-color: var(--status-lead); }
.acct-pill-evaluating  { background: var(--status-qualified-bg); color: var(--status-qualified); border-color: var(--status-qualified); }
.acct-pill-setup       { background: var(--status-setup-bg); color: var(--status-setup); border-color: var(--status-setup); }
.acct-pill-testing     { background: var(--status-testing-bg); color: var(--status-testing); border-color: var(--status-testing); }
.acct-pill-awaiting    { background: var(--status-awaiting-bg); color: var(--status-awaiting); border-color: var(--status-awaiting); }
.acct-pill-commercial  { background: var(--status-commercial-bg); color: var(--status-commercial); border-color: var(--status-commercial); }
.acct-pill-customer    { background: var(--status-customer-bg); color: var(--status-customer); border-color: var(--status-customer); }
.acct-pill-dormant     { background: var(--status-dormant-bg); color: var(--status-dormant); border-color: var(--status-dormant); }
.acct-pill-neutral     { background: var(--status-lead-bg); color: var(--status-lead); border-color: var(--status-lead); }

/* the table fills the screen instead of stopping after a few rows (Josh) */
@media (min-width: 641px) {
  #matrix.page { display: flex; flex-direction: column; min-height: calc(100vh - 46px); }
  #matrix.page > .panel:last-of-type { flex: 1 1 auto; display: flex; flex-direction: column; }
  #matrix .table-wrap.matrix-grid { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  #matrix.page { flex: 1 1 auto; display: flex; flex-direction: column; }
  #matrix.page > .panel:last-of-type { flex: 1 1 auto; display: flex; flex-direction: column; }
  #matrix .table-wrap.matrix-grid { flex: 1 1 auto; }
}

/* ---- get-started onboarding (empty workspace) ------------------------------ */
.acct-onboard {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px;
  padding: 40px 20px 48px;
}
.acct-onboard h3 { font-family: var(--t-serif); font-weight: 600; font-size: 1.55rem; margin: 0; }
.acct-onboard > p.muted { margin: 0; max-width: 400px; }
.acct-onboard-grid {
  display: grid; grid-template-columns: repeat(2, minmax(200px, 240px));
  gap: 14px; margin-top: 18px;
}
.acct-onboard-tile {
  display: grid; gap: 6px; justify-items: center;
  padding: 22px 16px 18px;
  border-radius: var(--t-radius-lg);
  font: inherit; cursor: pointer; text-align: center;
  transition: transform 140ms ease, border-color 140ms ease;
}
.acct-onboard-tile:hover { transform: translateY(-2px); border-color: var(--t-accent) !important; }
.acct-onboard-tile strong { font-size: 0.92rem; }
.acct-onboard-tile > span:last-child { font-size: 0.74rem; opacity: 0.65; line-height: 1.45; }
.acct-onboard-glyph {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.3rem;
  background: var(--t-accent); color: var(--t-accent-ink);
  margin-bottom: 4px;
}
body.night-mode .acct-onboard-tile { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--t-glass-line); color: var(--t-on-dark); }
body:not(.night-mode) .acct-onboard-tile { background: rgba(255, 253, 246, 0.85); border: 1px solid var(--t-day-line); color: var(--t-day-ink); }
body:not(.night-mode) .acct-onboard-glyph { background: var(--t-accent-day); color: #fffdf6; }
.acct-onboard-hint { margin: 18px 0 0; font-size: 0.72rem; opacity: 0.6; max-width: 440px; }
@media (max-width: 640px) {
  .acct-onboard-grid { grid-template-columns: 1fr; width: 100%; max-width: 320px; }
}

/* desktop keeps the worded More button; the ellipsis is phone-only */
.accounts-more-summary .more-ellipsis { display: none; }
@media (max-width: 640px) { .accounts-more-summary .more-ellipsis { display: inline; } }

/* ============================================================================
   ONE color language in Accounts rows (Josh, 2026-07-11): the section header
   pill is the only stage color; toolbar amber is the only accent. Everything
   inside rows is neutral or outlined — no filled pills.
   ========================================================================== */

/* trial shortcut (REAL data: jump-to-trial button; label = trial state) —
   kept, but as a quiet outlined tag */
body.night-mode #matrix .matrix-test-button {
  background: transparent !important;
  border: 1px solid var(--t-glass-line) !important;
  color: var(--t-on-dark-soft) !important;
  box-shadow: none !important;
}
body:not(.night-mode) #matrix .matrix-test-button {
  background: transparent !important;
  border: 1px solid var(--t-day-line-hi) !important;
  color: var(--t-day-muted) !important;
  box-shadow: none !important;
}

/* stage select: the group header already announces the stage — the in-row
   control goes neutral (still fully functional for changing stage) */
body.night-mode #matrix .matrix-grid td select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--t-glass-line) !important;
  color: var(--t-on-dark) !important;
  box-shadow: none !important;
  font-weight: 600;
}
body:not(.night-mode) #matrix .matrix-grid td select {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid var(--t-day-line) !important;
  color: var(--t-day-ink) !important;
  box-shadow: none !important;
  font-weight: 600;
}

/* crop tags: outlined, not filled green */
body.night-mode #matrix .matrix-tag {
  background: transparent !important;
  border: 1px solid var(--t-glass-line) !important;
  color: var(--t-on-dark-soft) !important;
}
body:not(.night-mode) #matrix .matrix-tag {
  background: transparent !important;
  border: 1px solid var(--t-day-line-hi) !important;
  color: var(--t-day-muted) !important;
}

/* call + note-send buttons: quiet ghosts (previous amber fills retired) */
body.night-mode #matrix .matrix-phone-cell .icon-button,
body.night-mode #matrix .matrix-phone-cell a,
body.night-mode #matrix .phone-call-link,
body.night-mode #matrix .matrix-note-send {
  background: transparent !important;
  border: 1px solid var(--t-glass-line) !important;
  color: var(--t-on-dark-faint) !important;
}
body:not(.night-mode) #matrix .matrix-phone-cell .icon-button,
body:not(.night-mode) #matrix .matrix-phone-cell a,
body:not(.night-mode) #matrix .phone-call-link,
body:not(.night-mode) #matrix .matrix-note-send {
  background: transparent !important;
  border: 1px solid var(--t-day-line) !important;
  color: var(--t-day-muted) !important;
}

/* ---- nav tabs: icon-only, label only on the ACTIVE tab (phone bottom bar) -- */
@media (max-width: 640px) {
  #appView .nav-btn span { display: none; }
  #appView .nav-btn.active span { display: inline; }
  #appView .nav-btn svg { width: 23px; height: 23px; }
}

/* deeper per-stage select rules in app.css outrank the generic neutralizer —
   match row-scoped specificity for every stage class (2026-07-11) */
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 .matrix-stage-select {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--t-glass-line) !important;
  color: var(--t-on-dark) !important;
  box-shadow: none !important;
}
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 .matrix-stage-select {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: var(--t-day-line) !important;
  color: var(--t-day-ink) !important;
  box-shadow: none !important;
}
/* tag remove-x and +N overflow chip inherit the neutral tag color */
#matrix .matrix-tag button, #matrix .matrix-tag-more { color: inherit !important; background: transparent !important; }

/* ============================================================================
   TABLE SCREENS GO GRAYSCALE (Josh, 2026-07-11 — scope: Accounts, Prospects,
   Tasks lists ONLY; login + dashboard untouched and approved).
   The blue/teal per-stage hues were the LEGACY app's deliberate stage palette
   (--status-* tokens in app.css), not a component default. On these screens
   they retire: everything neutral; amber lives only in the toolbar.
   ========================================================================== */

/* section-header badges: per-stage colors RESTORED (Josh, 2026-07-11 "give it
   a little life — I don't want the app to look all gray"); the .acct-pill-*
   rules above carry the standard-palette colors. */

/* prospects (cold) table: selects and inputs neutral like the accounts grid */
body.night-mode #matrix .cold-table select, body.night-mode #matrix .cold-table input {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--t-glass-line) !important;
  color: var(--t-on-dark) !important;
  box-shadow: none !important;
}
body:not(.night-mode) #matrix .cold-table select, body:not(.night-mode) #matrix .cold-table input {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: var(--t-day-line) !important;
  color: var(--t-day-ink) !important;
  box-shadow: none !important;
}

/* tasks list: status/context chips go grayscale (the List|Calendar toggle and
   Add Task button in the toolbar keep amber). Overdue's red left edge stays —
   semantic warning, kept deliberately; say the word to gray it too. */
#tasks .task-context-chip.trial { color: var(--muted) !important; }
#tasks .p4-cal-chip { background: var(--field) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
#tasks .p4-cal-chip.late { background: var(--field) !important; color: var(--ink) !important; }
#tasks .p4-outcome-chip { background: var(--field) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }
#tasks .p4-outcome-chip.no_show { background: var(--field) !important; color: var(--ink) !important; }

/* prospects filter chips: charcoal, not navy (the --status-*-bg blues leaked
   in here); the active chip keeps toolbar amber (Josh, 2026-07-11) */
body.night-mode #matrix .cold-status-filters button:not(.active) {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--t-glass-line) !important;
  color: var(--t-on-dark-soft) !important;
}
body:not(.night-mode) #matrix .cold-status-filters button:not(.active) {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid var(--t-day-line) !important;
  color: var(--t-day-ink) !important;
}
/* panels on table screens: pure charcoal at night, no green undertone */
body.night-mode #matrix .panel, body.night-mode #tasks .panel {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(245, 242, 236, 0.09) !important;
}

/* ============================================================================
   LIFE, IN MODERATION (Josh, 2026-07-11 final calibration): each row carries a
   slim stage-colored edge (standard palette) and the section pills are colored
   again — but fills, selects, and text stay neutral, and column headings carry
   NO green (plain neutral, amber only when actively sorted).
   ========================================================================== */

/* column headings: clean neutral, never green */
body.night-mode #matrix thead th,
body.night-mode #matrix thead .matrix-sort-head:not(.active) {
  color: rgba(245, 242, 236, 0.72) !important;
}
body:not(.night-mode) #matrix thead th,
body:not(.night-mode) #matrix thead .matrix-sort-head:not(.active) {
  color: #4a4a43 !important;
}

/* the row's stage, as a quiet 3px edge — visible at a scan, never shouting */
#matrix .matrix-grid tbody tr.matrix-stage-lead td:first-child { box-shadow: inset 3px 0 0 var(--status-lead) !important; }
#matrix .matrix-grid tbody tr.matrix-stage-evaluating td:first-child { box-shadow: inset 3px 0 0 var(--status-qualified) !important; }
#matrix .matrix-grid tbody tr.matrix-stage-setup td:first-child { box-shadow: inset 3px 0 0 var(--status-setup) !important; }
#matrix .matrix-grid tbody tr.matrix-stage-testing td:first-child { box-shadow: inset 3px 0 0 var(--status-testing) !important; }
#matrix .matrix-grid tbody tr.matrix-stage-awaiting td:first-child { box-shadow: inset 3px 0 0 var(--status-awaiting) !important; }
#matrix .matrix-grid tbody tr.matrix-stage-commercial td:first-child { box-shadow: inset 3px 0 0 var(--status-commercial) !important; }
#matrix .matrix-grid tbody tr.matrix-stage-customer td:first-child { box-shadow: inset 3px 0 0 var(--status-customer) !important; }
#matrix .matrix-grid tbody tr.matrix-stage-dormant td:first-child { box-shadow: inset 3px 0 0 var(--status-dormant) !important; }

/* stage color pickers in Settings (Josh, 2026-07-11) */
.stage-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.stage-color-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.8rem; }
.stage-color-row input[type="color"] {
  width: 34px; height: 26px; padding: 0; border-radius: 6px;
  border: 1px solid var(--line); background: transparent; cursor: pointer;
}

/* ================= ACCOUNT PROFILE (Josh, 2026-07-11 round 1) =============== */
/* hero: name + colored stage pill + one labeled meta line — nothing else */
.profile-stage-pill {
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid transparent;
  vertical-align: middle;
}
.profile-name-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-meta-line { margin: 4px 0 0; font-size: 0.8rem; }
body.night-mode .profile-meta-line { color: var(--t-on-dark-soft); }
body:not(.night-mode) .profile-meta-line { color: var(--t-day-muted); }
.profile-meta-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  opacity: 0.65; margin-right: 2px;
}

/* composer matches the dashboard capture bar: action-blue send, quiet plus */
body.night-mode .profile-composer-send,
body:not(.night-mode) .profile-composer-send {
  background: var(--t-action) !important;
  color: var(--t-action-ink) !important;
  border-color: transparent !important;
}

/* profile fills the screen; the composer lives at the BOTTOM (Josh, 2026-07-11) */
@media (min-width: 641px) {
  #profile.page { display: flex; flex-direction: column; min-height: calc(100vh - 46px); }
}
@media (max-width: 640px) {
  #profile.page { flex: 1 1 auto; display: flex; flex-direction: column; }
}
#profile .profile-shell { display: flex; flex-direction: column; flex: 1 1 auto; }
#profile .profile-intelligence-bar { margin-top: auto; }   /* pinned to the foot, like the dashboard bar */

/* trial composer send: amber like every other send (last green retired) */
body.night-mode .trial-composer-send {
  background: var(--t-accent) !important;
  color: var(--t-accent-ink) !important;
  border-color: transparent !important;
}
body:not(.night-mode) .trial-composer-send {
  background: var(--t-accent-day) !important;
  color: #fffdf6 !important;
  border-color: transparent !important;
}

/* trials panel rows: slim, quiet (Josh, 2026-07-11 "way too big for no reason") */
.trial-row-lite { display: flex; align-items: center; gap: 8px; padding: 8px 10px !important; }
.trial-row-open {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; color: inherit; font: inherit;
  text-align: left; cursor: pointer; padding: 0;
}
.trial-row-open strong { font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trial-row-open .pill { flex: none; font-size: 0.66rem; padding: 2px 9px; }
.trial-row-sub { font-size: 0.72rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trial-row-actions { display: inline-flex; gap: 4px; flex: none; }
.trial-row-actions .icon-button { width: 28px; height: 28px; min-height: 28px; font-size: 0.85rem; }
.trial-row-delete:hover { color: var(--t-bad) !important; border-color: var(--t-bad) !important; background: transparent !important; }

/* the panel modal itself: tighter */
.profile-modal-panel { max-width: 560px !important; }
.profile-panel-head { padding-bottom: 6px; }
.profile-panel-body .panel { padding: 12px !important; }
.profile-panel-body .section-head h3 { font-size: 0.95rem; }

/* the one place to start a trial: a quiet labeled row (Josh, 2026-07-11) */
.trial-add-row {
  display: block; width: 100%;
  margin-top: 8px; padding: 9px 12px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  background: transparent; color: var(--muted);
  font: inherit; font-size: 0.8rem; font-weight: 600;
  text-align: center; cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.trial-add-row:hover { color: var(--t-accent); border-color: var(--t-accent); }
body:not(.night-mode) .trial-add-row:hover { color: var(--t-accent-day); border-color: var(--t-accent-day); }

/* trial form: clean minimum, matching colors (Josh, 2026-07-11) */
.trial-form-more { margin-top: 4px; }
.trial-form-more > summary {
  cursor: pointer; list-style: none;
  font-size: 0.76rem; font-weight: 600; color: var(--muted);
  padding: 8px 0;
}
.trial-form-more > summary::before { content: '▸ '; font-size: 0.65rem; }
.trial-form-more[open] > summary::before { content: '▾ '; }
.trial-form-more > summary::-webkit-details-marker { display: none; }

/* crop picker: dark, compact, capped — no more white slab */
body.night-mode .crop-picker,
body.night-mode .crop-picker .crop-options {
  background: transparent !important;
  color: var(--t-on-dark) !important;
}
.crop-picker .crop-options {
  max-height: 132px !important;
  overflow-y: auto !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 2px 10px !important;
  padding: 8px !important;
  border-radius: 10px;
}
body.night-mode .crop-picker .crop-options { border: 1px solid var(--t-glass-line) !important; }
body:not(.night-mode) .crop-picker .crop-options { border: 1px solid var(--t-day-line) !important; background: rgba(255, 253, 246, 0.6) !important; }
.crop-picker .crop-option {
  display: flex !important; align-items: center; gap: 6px;
  font-size: 0.74rem !important; font-weight: 500 !important;
  padding: 2px 0 !important; color: inherit !important; background: transparent !important;
  border: 0 !important; box-shadow: none !important;
}
body.night-mode .drawer-panel .section-head { background: transparent !important; }

/* logout lives at the foot of the Profile page — labeled, de-emphasized
   (Josh, 2026-07-12); the header slot it occupied is freed */
.profile-logout-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.75rem; color: var(--muted);
}
.profile-logout {
  background: transparent; border: 1px solid var(--line);
  color: var(--muted); border-radius: 999px;
  padding: 6px 18px; font: inherit; font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.profile-logout:hover { color: var(--t-bad); border-color: var(--t-bad); }

/* team + sharing (UI live 2026-07-12; enforcement at Phase 1/11) */
.team-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.team-row:last-of-type { border-bottom: 0; }
.team-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 0.8rem; font-weight: 700;
  background: var(--t-accent); color: var(--t-accent-ink);
}
body:not(.night-mode) .team-avatar { background: var(--t-accent-day); color: #fffdf6; }
.team-copy { display: grid; gap: 1px; min-width: 0; }
.team-copy span { font-size: 0.76rem; color: var(--muted); }
.team-stages { font-size: 0.7rem !important; opacity: 0.75; }
.team-caption { margin-top: 14px; font-size: 0.72rem; }
/* person names inherit a legacy green label color inside the dossier — pin to ink (2026-07-12) */
.profile-sharing .share-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 0.85rem; color: var(--ink) !important; }
.profile-sharing .share-row select { max-width: 240px; }
.share-caption { font-size: 0.7rem; margin: 8px 0 0; }

/* ---- Share popup (simplified 2026-07-22: compact rows, no avatars, quiet
   colors — Josh: "simple, not a lot of dead space") ------------------------ */
.share-modal { max-width: 460px; }
.share-modal .quick-modal-head { background: none; border: 0; padding: 0; margin: 0 0 2px; }
.share-modal .quick-modal-head h2 { font-size: 1.05rem; margin: 0; }
.share-floor { font-size: 0.74rem; color: var(--muted); margin: 2px 0 4px; }
.share-people { display: flex; flex-direction: column; margin-top: 4px; }
.share-person-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.share-owner-row { border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 2px; }
.share-owner-row .share-person-name { flex-direction: row; align-items: baseline; gap: 4px; cursor: default; }
.share-person-name { flex: 1 1 auto; text-align: left; background: none; border: 0; padding: 0; color: var(--ink); font-weight: 600; font-size: 0.84rem; cursor: pointer; display: flex; flex-direction: column; gap: 0; }
.share-person-name:disabled { cursor: default; }
.share-person-off { opacity: 0.55; }
.share-person-sub { font-weight: 500; font-size: 0.68rem; color: var(--muted); }
.share-you { font-weight: 500; opacity: 0.6; }
.share-owner-tag { font-size: 0.72rem; color: var(--muted); }
.share-role, .share-link-access { max-width: 150px; min-height: 30px; font-size: 0.76rem; }
.share-link-access { flex: 1 1 auto; max-width: none; }
.share-sections { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0 8px 12px; }
/* the chip IS the control: the native checkbox is hidden and the pill shows
   the state — selected = accent, off = quiet outline (Josh: the raw
   checkboxes-in-pills read as clutter) */
.share-section-chip { position: relative; display: inline-flex; align-items: center; font-size: 0.72rem; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; margin: 0; cursor: pointer; color: var(--muted); user-select: none; }
.share-section-chip input { position: absolute; opacity: 0; pointer-events: none; margin: 0; }
.share-section-chip:has(input:checked) { border-color: var(--t-accent); color: var(--ink); background: color-mix(in srgb, var(--t-accent) 16%, transparent); }
.share-section-chip:has(input:disabled) { opacity: 0.55; cursor: default; }
.share-section-all { font-weight: 600; }
.share-general { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.share-handoff { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.share-handoff .share-role { width: 100%; }
.team-head-actions { display: flex; gap: 8px; align-items: center; }
.share-copy-link { white-space: nowrap; }
.share-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.share-save-state { font-size: 0.72rem; opacity: 0.75; }
.share-save-state.saved { color: var(--t-action); opacity: 1; }
.share-modal .share-caption { font-size: 0.66rem; margin: 6px 0 0; }
@media (max-width: 640px) {
  .share-person-row { flex-wrap: wrap; }
  .share-role { max-width: 130px; }
  .share-sections { padding-left: 6px; }
}

/* ---- trial quick-capture composer (Josh, 2026-07-12): the dashboard message
   bar verbatim, minus its full-bleed margins and gradient seam ------------- */
.trial-capture-bar { margin: 0 !important; padding: 4px 0 !important; min-height: 46px; justify-content: flex-start; background: transparent !important; }
.trial-capture-bar::before { display: none !important; }
.trial-composer-meta { display: flex; gap: 10px; min-height: 0; }
.trial-composer-file, .trial-composer-status { font-size: 0.7rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trial-composer-file:empty, .trial-composer-status:empty { display: none; }
.trial-manual-link { background: none; border: 0; padding: 2px 0; font-size: 0.72rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.trial-quick-face .trial-manual-body.hidden { display: none; }
/* manual open = the form's Create Trial is the submit; hide the composer send */
#profileTrialForm.manual-open #trialComposerSend { display: none; }

/* boxes-in-boxes purge (Josh, 2026-07-12): the Experiments modal frame is the
   only chrome — the add-trial drawer loses its panel skin on the quick face */
#profileTrialForm.trial-quick-face { border: 0 !important; background: transparent !important; padding: 0 !important; position: relative; margin-bottom: 6px; }
.trial-records-flat { display: flex; flex-direction: column; gap: 8px; }
.trial-missing-line { margin: 0 0 4px; font-size: 0.78rem; }
.linklike { background: none; border: 0; padding: 0; color: var(--t-action); text-decoration: underline; cursor: pointer; font-size: inherit; }

/* ---- review moved into Tasks (Josh, 2026-07-12): the floating bell retires;
   the collapsed badge never shows anywhere — the expanded overlay (reparented
   to <body>) is the only face the panel has now. */
#reviewBadgeRoot .command-message-alert { display: none !important; }
body > .command-message-alert { display: block; }
.tasks-review-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--soft); color: var(--ink);
  padding: 10px 14px; margin-bottom: 12px; cursor: pointer;
}
.tasks-review-row .review-bell { width: 18px; height: 18px; flex: 0 0 auto; color: var(--t-action); }
.tasks-review-row strong { font-size: 0.85rem; }
.tasks-review-row .muted { font-size: 0.72rem; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-review-go { font-size: 0.78rem; font-weight: 700; color: var(--t-action); white-space: nowrap; }

/* ---- dashboard de-branding (Josh, 2026-07-12): "less about branding, more
   about simplicity" — the phone loses the brand top bar AND the greeting row;
   the map runs to the top. The Tilfully name lives in the corner drawer. */
.map-menu-btn {
  position: fixed; top: 10px; left: 10px; z-index: 50;   /* global now — the phone's nav (Josh, 2026-07-12) */
  width: 38px; height: 38px; border-radius: 50%;
  display: none; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(16, 17, 19, 0.66);
  color: rgba(245, 242, 236, 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  cursor: pointer;
}
.map-menu-btn svg { width: 19px; height: 19px; }
body:not(.night-mode) .map-menu-btn { background: rgba(255, 252, 243, 0.8); border-color: rgba(90, 82, 60, 0.25); color: #3c3526; }

/* filters folded into the search pill (Josh, 2026-07-12) — the pill IS the
   input, so the button anchors inside its right edge */
.map-filter-inline {
  position: absolute; right: 5px; top: 5px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; opacity: 0.7;
  cursor: pointer; z-index: 2;
}
.map-filter-inline svg { width: 16px; height: 16px; }
.map-filter-inline:hover { opacity: 1; }
.map-search input { padding-right: 38px; }
body.night-mode .map-filter-inline { color: rgba(245, 242, 236, 0.8); }
body:not(.night-mode) .map-filter-inline { color: var(--t-day-muted); }

@media (max-width: 640px) {
  #appView .brand { display: none !important; }
  #appView main > header.topbar { display: none !important; }   /* its title is already .hidden; the bar itself leaked a sliver at the top */
  /* no toggle button in the bar anymore — collapsed means GONE (the sliders
     icon in the search pill is the only affordance) */
  .dash-map-hero .map-filter-bar.collapsed { display: none !important; }
  #appView main { padding-top: calc(6px + env(safe-area-inset-top)) !important; }
  #overview .workspace-head { display: none !important; }
  #overview .dash-map-hero { margin-top: 0 !important; }
  /* top strip alignment (Josh, 2026-07-12: "better aligned and sized"):
     40px button, 40px pill, both at the same y, clean 10px rhythm */
  .map-menu-btn {
    display: grid;
    width: 40px; height: 40px;
    /* 16px matches the message pill's gap from the bottom edge — the two
       strips mirror each other (Josh, 2026-07-12: "symmetrical") */
    top: calc(16px + env(safe-area-inset-top));
    left: 12px;
  }
  .dash-map-hero .map-search {
    /* fixed like the menu button — the hero's negative margins skew any
       absolute coordinates, so anchor both to the viewport */
    position: fixed;
    left: 62px; right: 12px; width: auto;
    top: calc(16px + env(safe-area-inset-top));
    z-index: 50;
  }
  .dash-map-hero .map-search input { height: 40px; }
  .dash-map-hero .map-search-glyph { top: 11.5px; }
  .dash-map-hero .map-filter-inline { top: 6px; right: 6px; }
  .dash-map-hero .map-filter-bar { top: calc(64px + env(safe-area-inset-top)); }
}

@media (min-width: 641px) {
  .dash-map-hero .map-filter-bar.collapsed { display: none; }
}

/* the page menu (phone) — a compact popover under the corner button, NOT a
   full-height sheet (Josh, 2026-07-12: "very large and overwhelming... not
   just the entire left side being a black blob") */
.phone-menu-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 9, 10, 0.18);   /* barely-there dim; the card is the focus */
}
.phone-menu {
  /* ChatGPT/Claude-style navigation panel (Josh, 2026-07-30: "make the main
     tab menu look like Claude or ChatGPT" — SUPERSEDES the 07-12 compact
     popover ruling, by his explicit direction): full-height slide-in, brand
     up top, roomy touch targets, settings pinned at the bottom. */
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: min(78vw, 320px);
  display: flex; flex-direction: column; gap: 2px;
  padding: calc(14px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom));
  border-radius: 0 18px 18px 0;
  background: rgba(18, 19, 22, 0.98);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 18px 0 48px rgba(0, 0, 0, 0.45);
  animation: pfv-drawer-in 0.18s ease-out;
}
@keyframes pfv-drawer-in { from { transform: translateX(-24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.phone-menu button {
  text-align: left; font-size: 1rem; padding: 13px 14px; border-radius: 12px;
  min-height: 48px;
}
.phone-menu button.active { background: rgba(27, 133, 82, 0.12); }
.phone-menu .phone-menu-brand { font-size: 1.05rem; padding: 4px 12px 14px; }
.phone-menu [data-menu-settings] { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.08); border-radius: 0 0 12px 12px; }
body:not(.night-mode) .phone-menu { background: rgba(252, 249, 240, 0.96); border-color: rgba(90, 82, 60, 0.2); }
.phone-menu-brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 0.85rem; color: var(--ink);
  padding: 6px 10px 8px;
  opacity: 0.85;
}
.phone-menu-brand .mark {
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  /* !important: a legacy global .mark still paints green */
  background: var(--t-accent) !important; color: var(--t-accent-ink) !important;
  font-weight: 900; font-size: 0.7rem;
}
.phone-menu button:not(.mark) {
  text-align: left; border: 0; background: transparent;
  color: var(--ink); font-size: 0.9rem; font-weight: 600;
  padding: 10px 12px; border-radius: 11px; cursor: pointer;
}
.phone-menu button:active { background: rgba(72, 170, 255, 0.15); }

/* ---- bottom tabs retired on the phone (Josh, 2026-07-12: "hide the bottom
   icons... since it's in the top left now") — the corner drawer IS the nav. */
@media (max-width: 640px) {
  #appView #nav { display: none !important; }
  #appView aside { display: none !important; }   /* nothing left in it on the phone */
  #appView main { padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important; }
  /* every page except the map needs top clearance for the floating button */
  #appView main > section.page:not(#overview) { padding-top: 52px !important; }
}
@media (min-width: 641px) {
  #phoneMenuBtn { display: none !important; }
}

/* ---- Activity view (Josh, 2026-07-12): planned above the line, happened
   below it; minor noise lives in the day count; a tapped day opens its feed */
.p4-cal-chip.logged { opacity: 0.72; font-weight: 500; }
.p4-cal-lane-line { display: block; height: 1px; margin: 3px 2px; background: var(--line); opacity: 0.7; }
.p4-cal-more { display: inline-block; border: 0; background: none; color: var(--muted); font-size: 0.62rem; cursor: pointer; padding: 1px 2px; text-align: left; }
.p4-cal-cell { cursor: pointer; }
.p4-cal-cell.empty { cursor: default; }
.activity-day-panel { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.activity-day-panel .signal-label { margin: 8px 0 4px; }
.activity-day-row { display: flex; align-items: center; gap: 10px; padding: 5px 2px; font-size: 0.82rem; }
.activity-day-row.logged { opacity: 0.8; }
.activity-day-time { flex: 0 0 44px; font-variant-numeric: tabular-nums; font-size: 0.72rem; opacity: 0.7; }
.activity-day-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- task rows: action over account (Josh, 2026-07-14) -------------------- */
.activity-day-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.activity-day-titlerow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.activity-day-row.is-task .activity-day-title { cursor: pointer; }
.activity-day-row.is-task .activity-day-title:hover { text-decoration: underline; text-decoration-color: rgba(150, 150, 130, 0.5); }
.activity-day-phone { flex: 0 0 auto; font-size: inherit; text-decoration: none; opacity: 0.9; }
.activity-task-note { flex: 1 1 100%; font-size: 0.72rem; margin: 0 0 4px; line-height: 1.35; }
.activity-day-phone:hover { opacity: 1; text-decoration: underline; }
.activity-day-account { font-size: 0.68rem; line-height: 1.2; }
.activity-completed-stamp { font-style: normal; font-size: 0.7rem; opacity: 0.75; color: #67c98a; }
.activity-outcome-note { flex: 1 1 160px; min-width: 120px; font-size: 0.72rem; padding: 4px 8px; border-radius: 8px; }
/* email draft bubble (7.y): editable body, gap warning, static source chips */
.thread-exchange.thread-kind-draft .thread-system.thread-draft { max-width: 100%; width: 100%; }
.thread-draft-meta { font-size: 0.74rem; opacity: 0.85; margin: 0 0 6px; }
.thread-draft-gapnote { font-size: 0.72rem; color: #d99a2b; margin: 0 0 6px; font-weight: 700; }
.thread-draft-body { width: 100%; font: inherit; font-size: 0.8rem; line-height: 1.45; border-radius: 10px; padding: 8px 10px; resize: vertical; }
body.night-mode .thread-draft-body { background: rgba(13, 14, 16, 0.6); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--t-on-dark); }
body:not(.night-mode) .thread-draft-body { background: rgba(255, 253, 246, 0.9); border: 1px solid var(--t-day-line); color: var(--t-day-ink); }
.thread-chip-static { cursor: default; }
a.thread-chip { text-decoration: none; display: inline-flex; align-items: center; }
/* product-knowledge library rows in Settings */
.knowledge-list { display: flex; flex-direction: column; gap: 4px; }
.knowledge-row { display: flex; align-items: baseline; gap: 10px; font-size: 0.8rem; }
.knowledge-row-title { font-weight: 700; }
.knowledge-row .act-remove { margin-left: auto; }
.activity-day-row.act-completing { opacity: 0.55; transition: opacity 0.4s ease; }
.activity-day-row.act-completing .act-check { border-color: #67c98a; background: rgba(103, 201, 138, 0.4); }
/* one compact header line */
.activity-head-compact .signal-label { display: none; }
/* the daily quote, relocated from the Dashboard (Josh, 2026-07-14): same
   quiet look it had there — small, soft, bulb inline */
.activity-inspiration { display: flex; align-items: center; gap: 6px; font-size: 0.74rem; opacity: 0.7; margin: 2px 0 0; }
.activity-inspiration .tip-inline-bulb { width: 14px; height: 14px; flex: none; display: inline-block; }
.activity-head-row { display: flex; align-items: baseline; gap: 12px; }
.activity-head-row h2 { margin: 0; }
.activity-head-row .activity-today { margin: 0; }
/* the message bar stays visible at the bottom of Activity (desktop) */
@media (min-width: 641px) {
  #tasks #activityCapture { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(720px, calc(100% - 280px)); z-index: 30; }
  #tasks #activityCapture .capture-bar { border-radius: 999px; box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.45); }
  #tasks { padding-bottom: 96px; }
}
.activity-day-src { flex: 0 1 auto; font-size: 0.7rem; }
.activity-today { margin: 2px 0 0; font-size: 0.8rem; color: var(--muted); }
.activity-today strong { color: var(--ink); }


/* Activity view toggle keeps the warm accent (Josh, 2026-07-12: "I do like
   that yellow orange one") — a deliberate exception to the action-blue rule */
body.night-mode .tasks-view-toggle button.active,
body:not(.night-mode) .tasks-view-toggle button.active { background: var(--t-accent) !important; color: var(--t-accent-ink) !important; }

/* phone Activity calendar: dots, not boxes (Josh: "really nice and friendly on
   phone... no ridiculously big boxes") — the day panel is the reading surface */
@media (max-width: 640px) {
  .p4-cal-panel { padding: 10px 8px; }
  .p4-cal-cell { min-height: 44px; padding: 3px 2px; border-radius: 8px; }
  .p4-cal-daynum { font-size: 0.68rem; }
  .p4-cal-chip {
    display: inline-block; width: 7px; height: 7px; padding: 0;
    border-radius: 50%; font-size: 0; border: 0;
    background: var(--t-action); margin: 1px;
  }
  .p4-cal-chip.logged { background: var(--muted); opacity: 0.8; }
  .p4-cal-chip.late { background: var(--t-bad); }
  .p4-cal-lane-line { display: none; }
  .p4-cal-more { font-size: 0.58rem; padding: 0; display: block; }
  .activity-day-row { flex-wrap: wrap; }
  #tasks .metric-strip { display: none; }   /* four big boxes = exactly the clutter Josh called out */
}

/* ---- Activity day rows: ONE circle + a quiet "..." (Josh, 2026-07-12) ----- */
.act-check {
  flex: 0 0 20px; width: 20px; height: 20px;
  border-radius: 50%; border: 1.6px solid var(--muted);
  background: transparent; cursor: pointer; padding: 0;
  transition: border-color .12s ease, background .12s ease;
}
.act-check:hover { border-color: #67c98a; background: rgba(103, 201, 138, 0.18); }
.act-more {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 1rem; line-height: 1; padding: 2px 6px;
  border-radius: 8px;
}
.act-more:hover, .act-more.open { color: var(--ink); background: var(--soft); }
.activity-more-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 2px 2px 8px 32px; font-size: 0.78rem;
}
.activity-more-row input[type="date"] { max-width: 140px; min-height: 28px; font-size: 0.72rem; }
.act-remove { color: var(--t-bad) !important; }
.activity-day-row.is-task { cursor: default; }
.activity-day-row[data-open-account] { cursor: pointer; }
.activity-day-row[data-open-account]:hover { background: var(--soft); border-radius: 8px; }
.activity-carried { font-style: normal; font-size: 0.68rem; color: var(--t-bad); opacity: 0.85; }
.activity-day-row { flex-wrap: wrap; }
.activity-add-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0 10px; }
.activity-add-form select { max-width: 220px; min-height: 34px; font-size: 0.8rem; }
.activity-add-form input { flex: 1 1 200px; min-height: 34px; font-size: 0.85rem; }
#activityCapture { margin-top: 12px; }
.activity-capture-bar { border: 1px solid var(--line) !important; border-radius: 999px; padding: 4px 6px 4px 16px !important; background: var(--soft) !important; }
.activity-capture-status { font-size: 0.72rem; margin: 6px 4px 0; min-height: 1em; }
@media (max-width: 640px) {
  .activity-more-row { padding-left: 10px; }
  #activityCapture { margin: 10px 2px calc(6px + env(safe-area-inset-bottom)); }
}

/* ---- Activity v4: Today-first with Day/Week/Month (Josh, 2026-07-12) ------ */
.activity-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.activity-day-addrow { display: flex; justify-content: flex-end; margin: 2px 0 4px; }
.activity-week { display: flex; flex-direction: column; gap: 4px; }
.activity-week-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--ink);
  padding: 8px 12px; cursor: pointer;
}
.activity-week-row.today { border-color: var(--t-accent); }
.activity-week-day { flex: 0 0 64px; font-weight: 700; font-size: 0.8rem; }
.activity-week-chips { flex: 1 1 auto; min-width: 0; display: flex; gap: 4px; overflow: hidden; align-items: center; }
.activity-week-chips .p4-cal-chip { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-week-meta { flex: 0 0 auto; font-size: 0.7rem; white-space: nowrap; }
@media (max-width: 640px) {
  /* week rows keep TEXT chips on the phone (unlike the month dot grid) */
  .activity-week-chips .p4-cal-chip { width: auto; height: auto; border-radius: 999px; font-size: 0.62rem; padding: 2px 8px; background: rgba(72, 170, 255, 0.16); color: var(--ink); }
  .activity-week-chips .p4-cal-chip.late { background: rgba(229, 83, 61, 0.2); }
  .activity-week-meta { display: none; }
  .activity-controls { gap: 6px; }
}

/* ---- Profile Analytics: the work log in sentences (Josh, 2026-07-12) ------ */
.analytics-headline { font-size: 1.02rem; line-height: 1.5; margin: 6px 0 14px; max-width: 640px; }
.analytics-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.analytics-chip { border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; display: flex; flex-direction: column; gap: 1px; min-width: 86px; }
.analytics-chip strong { font-size: 1.15rem; }
.analytics-chip span { font-size: 0.68rem; opacity: 0.7; }
.analytics-days { display: flex; flex-direction: column; gap: 2px; }
.analytics-day-row { display: flex; gap: 12px; padding: 7px 2px; border-top: 1px solid var(--line); font-size: 0.85rem; }
.analytics-day-date { flex: 0 0 92px; font-weight: 700; font-size: 0.75rem; opacity: 0.8; padding-top: 1px; }
.analytics-day-story { flex: 1 1 auto; line-height: 1.45; }
.analytics-caption { font-size: 0.7rem; margin-top: 14px; }
@media (max-width: 640px) {
  .analytics-day-row { flex-direction: column; gap: 2px; }
  .analytics-day-date { flex: none; }
}

/* ---- Partners tab (Josh, 2026-07-12): expandable downline --------------- */
.partner-block { border-top: 1px solid var(--line); }
.partner-block:first-of-type { border-top: 0; }
.partner-block .team-row { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 10px 4px; }
.partner-chevron { margin-left: auto; opacity: 0.55; font-size: 0.8rem; }
.partner-detail { padding: 0 4px 12px 46px; display: flex; flex-direction: column; gap: 4px; }
.partner-account {
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; border-radius: 8px;
  padding: 6px 8px; cursor: pointer; text-align: left;
  color: var(--ink); font-size: 0.84rem;
}
.partner-account:hover { background: var(--soft); }
.partner-account strong { flex: 0 1 auto; }
.partner-next { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; }
.partner-log { margin: 2px 0; font-size: 0.75rem; }
@media (max-width: 640px) { .partner-detail { padding-left: 12px; } }

/* the inline tip bulb is a desktop-dashboard detail; the signed-off phone
   greeting stays exactly as it was (2026-07-14) */
@media (max-width: 640px) {
  .tip-inline-bulb { display: none; }
}

/* Phase 11.2 — team assignee view + bulk-assign picker (2026-07-17) */
.team-workload { display:block; font-size:12px; opacity:.75; margin-top:2px; }
.team-row-actions { display:flex; gap:6px; align-items:center; }
.assign-book-picker { flex-basis:100%; margin-top:8px; padding:10px; border:1px solid rgba(128,128,128,.25); border-radius:10px; }
.assign-book-search { width:100%; margin:6px 0; padding:6px 8px; }
.assign-book-list { max-height:240px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.assign-pick-row { display:flex; gap:8px; align-items:center; padding:3px 4px; font-size:13px; border-radius:6px; }
.assign-pick-row:hover { background:rgba(128,128,128,.12); }
.assign-book-foot { display:flex; gap:8px; align-items:center; margin-top:8px; }

/* Batch checklist (rebuilt for the 9.5 Program P1, 2026-07-26): rows grouped
   under ONE account header each, one line per row, a date chip on reminders,
   checkboxes, one count-aware Save. No row numbering — the orphaned 1./4./6.
   counters from Josh's audit are gone by construction. */
.batch-list { margin: 8px 0 2px; padding-left: 0; list-style: none;
  display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.batch-list li { margin: 0; padding: 0; }
.batch-group + .batch-group { margin-top: 8px; }
.batch-account { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; opacity: 0.75; margin: 2px 0 2px; }
.batch-group-rows { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px; }
/* 9.5 P4 slimming (Josh: buttons/design bulk): tighter gaps, smaller tags,
   checkboxes on one clean column — content untouched */
.batch-row { display: flex; align-items: baseline; gap: 5px;
  font-size: 0.82rem; line-height: 1.3; }
.batch-row label { margin: 0; }
/* readable on BOTH themes — the rows were inheriting a dim/olive tone on night mode */
body.night-mode .batch-list, body.night-mode .batch-text { color: var(--t-on-dark); }
body:not(.night-mode) .batch-list, body:not(.night-mode) .batch-text { color: var(--t-day-ink); }
body.night-mode .batch-account { color: var(--t-on-dark-soft); }
body:not(.night-mode) .batch-account { color: var(--t-day-ink); }
/* 9.5 P2: the one morning block — tight monochrome section headers */
.brief-section { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; opacity: 0.8; margin: 8px 0 2px !important; }
body.night-mode .brief-section { color: var(--t-on-dark-soft); }
body:not(.night-mode) .brief-section { color: var(--t-day-ink); }
.brief-line { margin: 2px 0 !important; }
/* the Strategy/Opportunity dated log lines on the profile face (2026-07-26) */
.tfp-log-line { margin: 3px 0 !important; }
.batch-due { display: inline-block; margin-left: 6px; border-radius: 4px; padding: 0 6px;
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap;
  vertical-align: 1px; }
body.night-mode .batch-due { color: var(--t-on-dark); border: 1px solid rgba(255, 255, 255, 0.35); }
body:not(.night-mode) .batch-due { color: var(--t-day-ink); border: 1px solid rgba(0, 0, 0, 0.4); }
.batch-due-missing { opacity: 0.6; font-style: italic; border-style: dashed !important; }
.batch-row label { display: flex; align-items: baseline; gap: 6px; cursor: pointer; }
/* small, neutral controls — the accent stays on the Save button, not every row */
.batch-row input[type="checkbox"] { margin: 0; transform: translateY(1px);
  width: 12px; height: 12px; flex-shrink: 0; }
body.night-mode .batch-row input[type="checkbox"] { accent-color: #6b7280; }
body:not(.night-mode) .batch-row input[type="checkbox"] { accent-color: #52606d; }
.batch-tag { flex-shrink: 0; border-radius: 3px; padding: 0 4px; font-size: 0.58rem;
  font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; background: transparent;
  opacity: 0.85; }
body.night-mode .batch-tag { color: var(--t-on-dark-soft); border: 1px solid rgba(255, 255, 255, 0.18); }
body:not(.night-mode) .batch-tag { color: var(--t-day-ink); border: 1px solid rgba(36, 50, 31, 0.25); }
.batch-mark { opacity: 0.8; }
.batch-progress { font-size: 0.78rem; font-weight: 700; opacity: 0.75; padding: 5px 2px; }
.batch-skipped { opacity: 0.55; }
.batch-error .batch-text { opacity: 0.9; }
.batch-row .thread-chip { padding: 2px 9px; font-size: 0.7rem; }

/* ---- the Donna dock (Josh 2026-07-21): the conversation and the message bar are
   ONE connected surface. Closed: just the pill. Open: a Claude-style column — the
   thread expands tall, the composer is docked flush beneath it, minimize/× collapse
   back to the pill. Desktop overview only; mobile keeps its fixed bars. ---- */
@media (min-width: 641px) {
  #overview .donna-dock, #profile .donna-dock {
    position: absolute; z-index: 10;
    left: 50%; transform: translateX(-50%);
    bottom: 34px;
    width: min(760px, calc(100% - 220px));
    display: flex; flex-direction: column;
  }
  #overview .donna-dock .capture-thread-root, #profile .donna-dock .capture-thread-root,
  #overview .donna-dock .capture-bar, #profile .donna-dock .capture-bar {
    position: static; left: auto; right: auto; bottom: auto;
    transform: none; width: 100%; margin: 0;
  }
  #overview .donna-dock.open, #profile .donna-dock.open {
    top: 6vh;
    width: min(880px, calc(100% - 240px));
  }
  #overview .donna-dock.open .capture-thread-root, #profile .donna-dock.open .capture-thread-root { flex: 1; min-height: 0; display: flex; }
  #overview .donna-dock.open .capture-thread, #profile .donna-dock.open .capture-thread {
    flex: 1; min-height: 0; width: 100%;
    border-radius: 18px 18px 0 0;
  }
  #overview .donna-dock.open .thread-scroll, #profile .donna-dock.open .thread-scroll { max-height: none; flex: 1; }
  /* the composer joins the panel: square top corners, shared edge, no gap */
  #overview .donna-dock.open .capture-bar, #profile .donna-dock.open .capture-bar {
    border-radius: 0 0 18px 18px;
    margin-top: -1px;
  }
  body.night-mode #overview .donna-dock.open .capture-bar, body.night-mode #profile .donna-dock.open .capture-bar {
    background: rgba(13, 14, 16, 0.82); border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  body:not(.night-mode) #overview .donna-dock.open .capture-bar, body:not(.night-mode) #profile .donna-dock.open .capture-bar {
    background: rgba(255, 253, 246, 0.92); border-top: 1px solid rgba(36, 50, 31, 0.1);
  }
}

/* ---- left dock: every icon the same size (Josh 2026-07-21) ---- */
@media (min-width: 641px) {
  #appView .nav-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
  #appView .shell-corner .icon-button { width: 40px; height: 40px; font-size: 0.95rem; }
  #appView .shell-corner .icon-button svg { width: 20px; height: 20px; }
  body.sidebar-collapsed #appView .nav-btn { min-height: 42px; }
}

/* multi-text Donna: consecutive bubbles in one exchange read as separate messages */
.thread-exchange .thread-bubble.thread-system + .thread-bubble.thread-system { margin-top: 6px; }
.thread-mini-links { margin-top: 5px; display: flex; gap: 12px; }
.thread-mini-link { background: none; border: none; padding: 0; font: inherit;
  font-size: 11.5px; opacity: 0.55; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; color: inherit; }
.thread-mini-link:hover { opacity: 0.9; }

/* ---- Team activity page (redesign 2026-07-22: Basecamp digest + Linear feed) */
.team-digest-panel, .team-feed-panel { max-width: 680px; }
.team-feed-panel { margin-top: 14px; }
.digest-day { border-left: 2px solid var(--line); padding: 2px 0 12px 14px; margin-left: 4px; }
.digest-day:last-child { padding-bottom: 2px; }
.digest-date { font-size: 0.92rem; font-weight: 650; margin: 0 0 6px; color: var(--t-accent); }
.digest-person { font-size: 0.86rem; margin: 0 0 6px; }
.digest-person span { color: var(--muted); }
.feed-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; align-items: center; }
.feed-chip { font-size: 0.74rem; border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.feed-chip.on { border-color: var(--t-accent); color: var(--ink); background: color-mix(in srgb, var(--t-accent) 14%, transparent); }
.feed-chip-gap { flex: 0 0 10px; }
.feed-day { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 12px 0 4px; }
.feed-day:first-child { margin-top: 0; }
.feed-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.feed-row:last-child { border-bottom: 0; }
.feed-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: var(--muted); align-self: center; }
.feed-dot.note { background: var(--t-accent); }
.feed-dot.stage { background: #7fcfae; }
.feed-dot.call { background: #8fb6e8; }
.feed-dot.task { background: #c9a7e8; }
.feed-dot.order { background: #e8a78f; }
.feed-text { flex: 1; min-width: 0; }
.feed-acct { background: none; border: 0; padding: 0; color: var(--t-action, #7fcfae); cursor: pointer; font-size: inherit; }
.feed-when { color: var(--muted); font-size: 0.72rem; white-space: nowrap; }

/* ── Whose-account tags + lead chips (Josh, 2026-07-23) ─────────────────── */
.matrix-lead-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 2px 0; }
.lead-chip { font-size: 0.74rem; border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 999px; padding: 3px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.lead-chip.active { border-color: var(--t-accent); color: var(--ink); background: color-mix(in srgb, var(--t-accent) 14%, transparent); }
.lead-chip-count { font-size: 0.68rem; color: var(--muted); }
.lead-tag { font-size: 0.66rem; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 1px 7px; white-space: nowrap; flex-shrink: 0; }
.lead-tag-shared { border-color: color-mix(in srgb, var(--t-accent) 55%, transparent); color: var(--t-accent); }

/* Full proposal content under checklist rows (Josh, 2026-07-23) */
.batch-row { flex-wrap: wrap; }
.batch-detail { flex-basis: 100%; font-size: 0.78rem; color: var(--muted); margin: 2px 0 8px 30px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }

/* iMessage-style thread time separators (Josh, 2026-07-23) */
.thread-timestamp { text-align: center; font-size: 0.68rem; color: var(--muted); margin: 12px 0 4px; letter-spacing: 0.03em; }

/* ==== Activity, seamless pass (Josh 2026-07-24: "I don't like the box...
   just black, no boxes, have it all look seamless... so many buttons and I
   just need a clean look, modern") — the day board dissolves into the page;
   controls become quiet text that answers in gold on touch. ================= */
#tasks .p4-cal-panel,
#tasks .p4-cal-panel > .section-head {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
}
#tasks .p4-cal-panel { padding: 0; }
#tasks .p4-cal-panel > .section-head { padding-left: 0; padding-right: 0; }
/* header controls: text, not button boxes */
#tasks .activity-controls .button.ghost {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--muted);
  min-height: 30px;
  padding: 4px 8px;
  font-weight: 700;
}
#tasks .activity-controls .button.ghost:hover { color: var(--ink); }
#tasks .tasks-view-toggle,
#tasks .tasks-view-toggle button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#tasks .tasks-view-toggle button { color: var(--muted); font-weight: 700; padding: 4px 10px; }
#tasks .tasks-view-toggle button.active {
  background: transparent !important;
  color: var(--t-accent) !important;
  box-shadow: inset 0 -2px 0 var(--t-accent) !important;
  border-radius: 0;
}
/* + Add: one quiet text control */
#tasks .activity-day-addrow .button.ghost {
  background: transparent !important;
  border: 0 !important;
  color: var(--muted);
}
#tasks .activity-day-addrow .button.ghost:hover { color: var(--t-accent); }
/* the expanded task row: calm — muted links that wake on hover, ghosted inputs */
#tasks .activity-more-row .linklike { color: var(--muted); text-decoration: none; font-size: 0.74rem; }
#tasks .activity-more-row .linklike:hover { color: var(--t-accent); text-decoration: underline; }
#tasks .activity-more-row .act-remove:hover { color: var(--t-bad); }
#tasks .activity-more-row input[type="date"] {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  padding: 3px 6px;
}
#tasks .activity-outcome-note { background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; }
#tasks .activity-outcome-note:focus { border-color: var(--line); outline: none; }
body:not(.night-mode) #tasks .activity-outcome-note { background: rgba(34, 34, 35, 0.05); }

/* ==== One flat black ground (Josh 2026-07-24: "I want it to be black...
   same color as the background") — the night ground becomes a single flat
   brand near-black; main/page/app layers go transparent so nothing can seam;
   the Activity panels lose their last white wash (the 2026-07-12 charcoal
   rule above carried #tasks in its selector and outranked the seamless pass). */
body.night-mode {
  background: #161617 !important;
}
body.night-mode main {
  background: #161617 !important;   /* solid, same as the ground — no seams,
                                       and the contour texture stays out of
                                       the reading surface */
}
body.night-mode #appView .page,
body.night-mode section.app,
body.night-mode .app {
  background: transparent !important;
}
body.night-mode #tasks .panel,
body.night-mode #tasks .p4-cal-panel {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ---- D4 (2026-07-26): pre-meeting pings — quiet Donna cards on Activity ---- */
.premeeting-strip { display: grid; gap: 8px; margin-bottom: 10px; }
.premeeting-card { border-left: 3px solid var(--t-accent, #F1C400); padding: 10px 14px; }
.premeeting-card p { margin: 2px 0; }
.premeeting-lead { font-size: 0.95rem; }