/* TeamPulse app styles. Direction B "Split" (design/public/b/styles.css, 10/03/2026) ported
   verbatim from its "base" section on. B's two hardcoded brand blocks are gone: every brand value
   now comes from the company row, written by src/pages/brand.mjs into one nonce'd <style> on each
   page as the same custom properties. The :root below is the brand-neutral default (the root chooser,
   the switched-off page, anything rendered before a company is known). Raw brand values for
   reference only: palette.css beside this file. Phase 1 additions are at the end of the file. */

:root {
  --font: 'Instrument Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* neutral roles (no company): slate chrome, a quiet blue accent */
  --chrome: #1c1f26;
  --chrome-raised: #2a2e38;
  --chrome-line: #363b47;
  --on-chrome: #ffffff;
  --on-chrome-muted: #a9adba;
  --chrome-accent: #9db9e8;
  --chrome-accent-text: #16181d;
  --chrome-badge: #2b4a78;

  --surface: #f4f5f7;
  --panel: #ffffff;
  --panel-soft: #f8f8f9;
  --panel-strip: #e9eaed;
  --line: #e2e4e8;
  --line-strong: #cbcfd6;

  --text: #16181d;
  --text-2: #474b54;
  --text-3: #6c707c;

  --accent: #2b4a78;
  --accent-fill: #2b4a78;
  --accent-fill-hover: #1e365a;
  --accent-deep: #2b4a78;
  --accent-dark: #1e365a;
  --accent-tint: #e6ecf7;
  --on-accent: #ffffff;

  --danger: #a32d12;
  --danger-tint: #f7e3df;
  --ok: #1f7a4d;
  --ok-tint: #e3f3ea;
  --pending: #3b5b9a;
  --pending-tint: #e6ecf7;
  --touch: #6b7ea6;
  --review: #6a5a00;
  --review-tint: #faf0cf;
  --neutral: #5f636e;
  --neutral-tint: #eceef2;

  --mark-bg: rgba(255, 255, 255, .09);
  --mark-fg: #9db9e8;

  --bar: #4a4f5c;
  --focus: #1d4ed8;
  --r-card: 20px;
  --r-panel: 16px;
  --r-btn: 10px;
  --r-chip: 8px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--chrome);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
a { color: inherit; text-decoration: none; }
svg.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.chrome :focus-visible, .rail :focus-visible, .company-block :focus-visible { outline-color: #ffffff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- shell ---------- */
.shell {
  display: grid;
  height: 100vh;
  height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand" "main" "rail";
  background: var(--surface);
}
html[data-frame="1"] .shell { height: 100vh; }
.company-block { grid-area: brand; }
.rail { grid-area: rail; }
.me-block { display: none; }
.pane-list, .pane-detail { grid-area: main; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; container-type: inline-size; }
.pane-list { background: var(--panel); }
/* rows never hide under the sticky list header when focused or scrolled into view (the pane sets --list-head) */
.queue-row, .lead-row-wrap, .conversation-item, .dash-row, .dash-section-label { scroll-margin-top: var(--list-head, 0px); }
.pane-detail { background: var(--surface); }
.shell[data-pane="list"] .pane-detail { display: none; }
.shell[data-pane="detail"] .pane-list { display: none; }

/* company block: the top bar on phone and compact widths (48 px). The company switch always reads "Switch to <other
   company>", written out, so a person who belongs to both companies can see which one they are in and where the switch goes. */
.company-block {
  background: var(--chrome);
  color: var(--on-chrome);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px;
  min-height: 48px;
  min-width: 0; overflow: hidden; /* the bar never widens the shell past the viewport: the name shrinks with an ellipsis, the switch stays whole */
}
/* the logo slot: a small rounded tile beside the wordmark where the company's logo will sit; until then its initials in the company color.
   It is rendered with the company block, so it changes with the company switch. */
.company-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.company-mark {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mark-bg); color: var(--mark-fg); box-shadow: inset 0 0 0 1px var(--chrome-line);
  font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1;
}
.company-name { display: flex; flex-direction: column; min-width: 0; }
.company-name strong { font-size: 16px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.company-name > span { font-size: 12px; color: var(--on-chrome-muted); line-height: 1.2; display: flex; align-items: center; gap: 6px; }
.company-name .module-tag { font-size: 12px; color: var(--on-chrome-muted); border: 1px solid var(--chrome-line); border-radius: 5px; padding: 0 5px; line-height: 15px; }
.company-switch {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--on-chrome); background: var(--chrome-raised);
  border: 1px solid var(--chrome-line); border-radius: 999px;
  padding: 6px 12px 6px 9px; font-size: 13px; font-weight: 500; min-height: 36px; white-space: nowrap;
}
.company-switch:hover { background: var(--chrome-line); }
.company-switch .icon { font-size: 15px; color: var(--chrome-accent); }
.company-switch .switch-verb { color: var(--on-chrome-muted); }
.company-switch b { font-weight: 600; }

/* rail: phone bottom bar */
.rail {
  background: var(--chrome);
  color: var(--on-chrome);
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--chrome-line);
}
.rail-group-label, .rail-later { display: none; }
.rail-link {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  flex: 1 1 0; min-height: 52px; padding: 6px 4px; border-radius: 12px;
  color: var(--on-chrome-muted); font-size: 12px; font-weight: 500;
}
.rail-link .icon { font-size: 22px; }
.rail-link.is-active { color: var(--on-chrome); }
.rail-link.is-active .icon { color: var(--chrome-accent); }
.rail-badge {
  position: absolute; top: 2px; left: calc(50% + 6px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--chrome-badge); color: var(--chrome-accent-text);
  font-size: 12px; font-weight: 600; line-height: 18px; text-align: center;
}
.rail-badge.is-zero { display: none; }

/* ---------- compact (760 to 1119): three panes under a top bar ----------
   The company block stays the full-width top bar (both company names written out), the destinations become a
   60 px icon rail and the list is 380 px, wide enough for a queue row's whole action line. */
@media (min-width: 760px) {
  .shell {
    grid-template-columns: 64px 376px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand brand brand" "rail list detail" "me list detail";
  }
  .pane-list { grid-area: list; border-right: 1px solid var(--line); }
  .pane-detail { grid-area: detail; }
  .shell[data-pane="list"] .pane-detail, .shell[data-pane="detail"] .pane-list { display: block; }
  .company-block { border-bottom: 1px solid var(--chrome-line); }

  .rail { flex-direction: column; justify-content: flex-start; padding: 4px 8px; border-top: 0; gap: 2px; }
  .rail-group-label { display: block; font-size: 12px; font-weight: 500; color: var(--on-chrome-muted); text-align: center; padding: 12px 0 2px; white-space: nowrap; }
  .rail-link { flex: none; flex-direction: row; justify-content: center; min-height: 44px; padding: 0; font-size: 14px; }
  .rail-link .label { display: none; }
  .rail-link .icon { font-size: 20px; }
  .rail-link:hover { background: var(--chrome-raised); color: var(--on-chrome); }
  .rail-link.is-active { background: var(--chrome-raised); }
  .rail-badge { top: 4px; left: auto; right: 2px; }
  /* the Safety module, coming later: a dimmed shield with its own small "later" mark */
  .rail-later { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; position: relative; min-height: 44px; color: var(--on-chrome-muted); }
  .rail-later .icon { font-size: 20px; opacity: .55; }
  .rail-later span { display: none; }
  .rail-later small { display: block; font-size: 12px; line-height: 1.1; opacity: .8; }

  .me-block { display: flex; grid-area: me; flex-direction: column; gap: 10px; align-items: center; background: var(--chrome); color: var(--on-chrome); padding: 12px 8px; border-top: 1px solid var(--chrome-line); }
  .me-text { display: none; }
  .phone-view-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    color: var(--on-chrome); background: transparent; border: 1px solid var(--chrome-line); border-radius: var(--r-btn);
    padding: 8px; font-size: 13px; min-height: 40px; width: 100%;
  }
  .phone-view-toggle .label { display: none; }
  .phone-view-toggle:hover { background: var(--chrome-raised); }
}

/* ---------- desktop (1120 up): the company block, the rail and the signed-in block are one column ---------- */
@media (min-width: 1120px) {
  .shell {
    grid-template-columns: 232px 380px minmax(0, 1fr);
    grid-template-areas: "brand list detail" "rail list detail" "me list detail";
  }
  /* on Home the queue is the subject of the screen, so its column is the wide one */
  .shell[data-ctx="home"] { grid-template-columns: 232px 460px minmax(0, 1fr); }
  .company-block { flex-direction: column; align-items: stretch; padding: 20px 16px 14px; min-height: 0; gap: 12px; border-bottom: 0; }
  .company-name strong { font-size: 15px; }
  .company-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 13px; }
  .company-switch { justify-content: flex-start; border-radius: var(--r-btn); padding: 8px 12px; gap: 8px; min-height: 40px; }

  .rail { padding: 6px 12px; }
  .rail-group-label { text-align: left; padding: 14px 10px 4px; }
  .rail-link { justify-content: flex-start; gap: 12px; padding: 0 10px; border-radius: 10px; }
  .rail-link .label { display: inline; }
  .rail-link.is-active::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--chrome-accent); }
  .rail-badge { position: static; margin-left: auto; }
  .rail-later { justify-content: flex-start; gap: 12px; padding: 0 10px; font-size: 14px; }
  .rail-later .icon { opacity: .7; }
  .rail-later { flex-direction: row; }
  .rail-later span { display: inline; }
  .rail-later small { display: inline; margin-left: auto; font-size: 12px; line-height: 1.3; opacity: 1; border: 1px solid var(--chrome-line); border-radius: 6px; padding: 1px 6px; }

  .me-block { flex-direction: column; align-items: stretch; }
  .me-row { display: flex; align-items: center; gap: 10px; }
  .me-text { display: block; min-width: 0; }
  .me-text strong { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .me-text span { display: block; font-size: 12px; color: var(--on-chrome-muted); }
  .phone-view-toggle .label { display: inline; }
}

@media (min-width: 1440px) {
  .shell { grid-template-columns: 232px 420px minmax(0, 1fr); }
  .shell[data-ctx="home"] { grid-template-columns: 232px 520px minmax(0, 1fr); }
}

/* ---------- shared pieces ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--neutral-tint); color: var(--text-2); font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.avatar.is-small { width: 24px; height: 24px; font-size: 12px; letter-spacing: 0; }
.avatar.is-large { width: 40px; height: 40px; font-size: 14px; }
.avatar.on-chrome { background: var(--chrome-raised); color: var(--on-chrome); }
.avatar.is-channel { border-radius: 10px; background: var(--accent-tint); color: var(--accent-dark); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 14px; border-radius: var(--r-btn);
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--text);
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.btn:hover { background: var(--panel-soft); }
.btn.is-primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.btn.is-primary:hover { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.btn.is-quiet { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.is-quiet:hover { background: var(--neutral-tint); color: var(--text); }
.btn.is-small { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.btn.is-later { color: var(--text-3); border-style: dashed; background: transparent; }
.btn.is-later:hover { background: var(--panel-soft); }
.btn.is-later .later-tag { font-size: 12px; font-weight: 500; color: var(--text-3); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 5px; line-height: 16px; }
.btn .icon { font-size: 16px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 3px 10px; border-radius: var(--r-chip);
  font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap;
  background: var(--neutral-tint); color: var(--text-2);
}
.chip .icon { font-size: 14px; }
.chip.is-type { background: var(--accent-tint); color: var(--accent-dark); }
.chip.is-loc { background: var(--neutral-tint); color: var(--text); font-weight: 600; }
.chip.is-lang { background: var(--pending-tint); color: var(--pending); }
.chip.is-ok { background: var(--ok-tint); color: var(--ok); }
.chip.is-pending { background: var(--pending-tint); color: var(--pending); }
.chip.is-review { background: var(--review-tint); color: var(--review); }
.chip.is-danger { background: var(--danger-tint); color: var(--danger); }
.chip.is-neutral { background: var(--neutral-tint); color: var(--neutral); }

.status-control {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 10px 6px 12px; border-radius: var(--r-btn);
  background: var(--panel); border: 1px solid var(--line-strong); color: var(--text);
  font-size: 13px; font-weight: 500; white-space: nowrap; max-width: 100%;
}
.status-control .status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.status-control:hover { background: var(--panel-soft); }
.status-control .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neutral); flex: none; }
.status-control .icon { font-size: 16px; color: var(--text-3); }
/* a queue row's chip carries both the full label and the sheet's short form ("Req. Complete", "Screen Done");
   the full one shows from 1440, where the Home list is 520 px and "Requirements Complete" fits beside Log touch, Call and Text */
.status-control .st-short { display: none; }
@media (max-width: 1439px) { .status-control .st-full { display: none; } .status-control .st-short { display: inline; } }
/* group dots: red is reserved for danger (overdue, failed, positive, DO NOT HIRE); First Advantage is work in motion, so it takes the pending blue;
   the touch cycle is the neutral middle of the pipeline and takes --touch, so the review gold means only "needs review" */
.status-dot.g-new { background: var(--pending); }
.status-dot.g-touch { background: var(--touch); }
.status-dot.g-fadv { background: var(--pending); }
.status-dot.g-hired { background: var(--ok); }
.status-dot.g-closed { background: var(--neutral); }

.filter-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 10px; margin: 0 -16px; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips .loc-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 12px; border-radius: 999px;
  background: var(--panel-soft); border: 1px solid transparent; color: var(--text-2); font-size: 13px; font-weight: 500;
}
.filter-chips .loc-chip .count { color: var(--text-3); font-variant-numeric: tabular-nums; }
.filter-chips .loc-chip:hover { border-color: var(--line-strong); }
.filter-chips .loc-chip.is-active { background: var(--text); color: #fff; }
.filter-chips .loc-chip.is-active .count { color: rgba(255,255,255,.75); }

/* Mine / Team changes the whole queue, so it gets a full tap target */
.who-toggle { display: inline-flex; flex: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; margin-bottom: 2px; }
.who-btn { min-height: 36px; padding: 3px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
@media (max-width: 759px) { .who-btn { min-height: 40px; } }
.who-btn:hover { color: var(--text); }
.who-btn.is-active { background: var(--text); color: #fff; }

.segments { display: inline-flex; background: var(--panel-soft); border-radius: 12px; padding: 3px; gap: 2px; max-width: 100%; }
.segment { flex: 1 1 auto; min-height: 36px; padding: 6px 12px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.segment .count { color: var(--text-3); font-variant-numeric: tabular-nums; }
.segment.is-active { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.segment.is-active .count { color: var(--text-2); }
.segment .seg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
/* 360-wide phones: the chip row carries the counts, so the segments drop theirs to fit three on one line */
@media (max-width: 400px) { .segment { padding: 6px 8px; } .segment .count { display: none; } }
/* phone tap targets (M9 polish, the M5 carry-forward): the location chips and the Home segments are at least 40 px tall
   on a phone, like the Mine/Team pill; the desktop keeps the tighter 36 px rows */
@media (max-width: 759px) {
  .filter-chips .loc-chip { min-height: 40px; }
  .filter-chips.section-chips .loc-chip { min-height: 40px; } /* beats the 34 px desktop rule for .section-chips .loc-chip below */
  .segment { min-height: 40px; }
  .pane-header.is-compact .segments-row .segment { min-height: 40px; }
}

/* ---------- list pane ---------- */
/* On desktop the whole header pins and the chip row (.list-pin) pins under it (--pin-top, set by renderList).
   On phone only the chip row pins: the title, counts, search and segments scroll away so the queue has the screen. */
.pane-header { padding: 16px 16px 0; position: sticky; top: 0; background: var(--panel); z-index: 2; }
.pane-header.has-shadow { border-bottom: 1px solid var(--line); }
.list-pin { position: sticky; top: var(--pin-top, 0px); z-index: 2; background: var(--panel); padding: 0 16px; }
@media (max-width: 759px) {
  .pane-header { position: static; }
  .list-pin { border-bottom: 1px solid var(--line); }
}
.pane-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pane-title { font-size: 20px; font-weight: 600; line-height: 1.3; }
.pane-sub { font-size: 13px; color: var(--text-3); }
.pane-tools { display: flex; align-items: center; gap: 8px; }

/* phone Home header, compact: the figures sit inline with the title, search is an icon beside them, and the Mine/Team
   pill shares the pinned row with the location chips, so the first overdue name is on screen without scrolling */
.pane-header.is-compact { padding-top: 12px; }
.pane-header.is-compact .pane-title-row { align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 6px 10px; margin-bottom: 8px; min-height: 36px; }
.title-figures { display: inline-flex; align-items: baseline; gap: 12px; flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.title-figures .fig b { font-size: 20px; font-weight: 600; line-height: 1; color: var(--text-2); margin-right: 4px; letter-spacing: -.01em; }
.title-figures .fig.is-danger b { color: var(--danger); }
.title-figures .fig.is-primary b { color: var(--text); }
.search-toggle { flex: none; margin-left: auto; width: 36px; height: 36px; border-radius: var(--r-btn); border: 1px solid var(--line-strong); background: var(--panel); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.search-toggle .icon { font-size: 18px; }
.search-toggle[aria-expanded="true"] { background: var(--text); color: #fff; border-color: var(--text); }
.pane-header.is-compact .list-search { margin-bottom: 8px; }
.pane-header.is-compact .segments-row { margin-bottom: 0; }
.pane-header.is-compact .segments-row .segment { min-height: 40px; } /* the compact header is the phone's: 40 px tap targets (M9 polish); this later rule must not undercut the phone block above */
/* the pinned row: Mine/Team first, then the location chips, scrolling as one line */
.pin-row { display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 0 -16px; padding: 8px 16px 10px; }
.pin-row::-webkit-scrollbar { display: none; }
.pin-row .who-toggle { margin: 0; }
.pin-row .filter-chips { flex: none; overflow: visible; margin: 0; padding: 0; }
@media (max-width: 374px) {
  /* 360-wide phones: the figures take their own line under the title and the search icon */
  .pane-header.is-compact .title-figures { flex-basis: 100%; order: 3; }
}

/* desktop Home: the queue head carries one quiet line pointing at the oldest overdue row (there is no banner in the detail pane) */
.queue-start { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin: -6px 0 8px; padding: 0 6px 0 2px; border-radius: 8px; font-size: 13px; color: var(--text-2); max-width: 100%; }
.queue-start b { font-weight: 600; color: var(--text); }
.queue-start .icon { font-size: 16px; color: var(--text-3); }
.queue-start:hover { background: var(--panel-soft); color: var(--text); }

.count-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.count-pair { display: flex; gap: 20px; align-items: flex-end; margin: 4px 0 14px; }
.count-row .count-pair { margin: 0; }
.count-pair .count-item { display: flex; flex-direction: column; }
.count-pair .count-value { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.count-pair .count-value.is-danger { color: var(--danger); }
.count-pair .count-label { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.count-pair .count-item.is-secondary .count-value { font-size: 28px; color: var(--text-2); }

.list-search { position: relative; margin: 0 0 10px; }
.list-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--text-3); }
.list-search input {
  width: 100%; min-height: 40px; padding: 8px 12px 8px 36px; border-radius: var(--r-btn);
  border: 1px solid var(--line); background: var(--panel-soft);
}
.list-search input::placeholder { color: var(--text-3); }
.list-search input:focus { border-color: var(--line-strong); background: var(--panel); }

.segments-row { display: flex; gap: 8px; margin-bottom: 10px; }
.segments-row .segments { width: 100%; }

.list-body { padding: 4px 0 24px; }
.list-group-label { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 16px 6px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.list-group-label .count { color: var(--text-3); font-variant-numeric: tabular-nums; }
.list-group-label.is-danger { color: var(--danger); }
.list-empty { padding: 24px 16px; color: var(--text-2); font-size: 14px; }
.list-empty strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 4px; }

/* follow-up queue rows */
.queue-row { position: relative; padding: 0 8px; }
.queue-row + .queue-row { margin-top: 2px; }
.queue-row-main {
  display: block; width: 100%; padding: 10px 8px 4px; border-radius: 12px; min-height: 48px;
}
.queue-row-main:hover { background: var(--panel-soft); }
.queue-row.is-selected .queue-row-main, .queue-row.is-selected .row-actions { background: var(--accent-tint); }
.queue-row.is-selected .queue-row-main { border-radius: 12px 12px 0 0; }
.queue-row.is-selected .row-actions { border-radius: 0 0 12px 12px; }
.row-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.row-name { font-size: 16px; font-weight: 600; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-due { flex: none; font-size: 13px; font-weight: 600; color: var(--text-2); }
.row-due.is-overdue { color: var(--danger); }
.row-due.is-today { color: var(--text-2); }
.row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.row-meta .loc { font-weight: 600; color: var(--text); }
.row-meta .avatar { margin-left: auto; }
/* one action line per row, always the same shape: Log touch, the status (ellipsis when long), then Call and Text pinned right */
.row-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 4px 8px 10px; }
.row-actions .row-actions-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
.row-actions .btn.is-small { padding: 6px 10px; flex: none; }
.row-actions .status-control { padding: 6px 8px 6px 10px; flex: 0 1 auto; min-width: 0; }
.row-actions .later-group { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; }
.row-actions .btn.is-later { min-height: 36px; min-width: 36px; padding: 6px 7px; font-size: 13px; }
.row-actions .later-group .later-tag { font-size: 12px; color: var(--text-3); border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 5px; line-height: 16px; margin-left: 2px; }
/* below desktop the line is tight: Log touch is text only and the status chip drops its chevron (the bordered chip with
   its dot reads as the control, and the card keeps the chevron) so the status label stays whole */
@media (max-width: 1119px) {
  .row-actions .btn.is-small.log-touch { padding: 6px 9px; }
  .row-actions .btn.is-small.log-touch .icon { display: none; }
  .row-actions .status-control .icon { display: none; }
  .row-actions .status-control { padding: 6px 9px 6px 10px; }
}
@media (max-width: 759px) {
  .row-actions { padding: 4px 8px 10px; }
  .row-actions .btn.is-small, .row-actions .status-control, .row-actions .btn.is-later { min-height: 40px; } /* phone tap targets */
  .row-actions .btn.is-later { min-width: 36px; padding: 6px 6px; }
  .row-actions .later-group .later-tag { padding: 0 3px; }
}
/* 360-wide phones: the "later" mark stays visible, under the two buttons instead of beside them */
@media (max-width: 374px) {
  .row-actions .later-group { display: inline-grid; grid-template-columns: auto auto; gap: 2px 3px; justify-items: center; }
  .row-actions .later-group .later-tag { grid-column: 1 / -1; margin: 0; }
}
.queue-row.is-leaving { animation: rowLeave .32s ease forwards; }
@keyframes rowLeave { to { opacity: 0; transform: translateX(24px); max-height: 0; } }

/* new leads rows */
.lead-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; min-height: 56px; }
.lead-row:hover { background: var(--panel-soft); }
.lead-row.is-selected { background: var(--accent-tint); }
.lead-row .lead-main { flex: 1 1 auto; min-width: 0; }
.lead-row .lead-name { font-size: 16px; font-weight: 600; display: block; }
.lead-row .lead-meta { font-size: 13px; color: var(--text-2); display: flex; gap: 12px; flex-wrap: wrap; }
.lead-row .lead-meta .loc { font-weight: 600; color: var(--text); }
.lead-row .lead-time { font-size: 13px; color: var(--text-3); flex: none; }
.lead-row .unassigned { color: var(--review); font-weight: 500; }

/* ---------- detail pane ---------- */
.detail-inner { padding: 16px 16px 32px; max-width: 1040px; }
.detail-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 10px 6px 4px; border-radius: var(--r-btn); color: var(--text-2); font-size: 14px; font-weight: 500; }
.back-link:hover { background: var(--panel); color: var(--text); }
.back-link .icon { font-size: 20px; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.today-head h1 { font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.today-head p { font-size: 14px; color: var(--text-2); }
.today-line { font-size: 14px; color: var(--text-2); margin: 2px 0 12px; }
.today-line strong { color: var(--text); font-weight: 600; }

/* (the queue banner that used to lead the Home detail pane is gone after round 3; the queue head's .queue-start line replaced it) */
.hbar-row.is-button { width: 100%; border-radius: 8px; padding: 0 4px; margin: 0 -4px; }
.hbar-row.is-button:hover { background: var(--panel-soft); }
.hbar-row.is-button.is-active .hbar-label { color: var(--text); font-weight: 600; }
.hbar-row.is-button.is-active rect.bar { fill: var(--accent); }

/* detail-pane grids are sized by the pane they sit in, not by the window.
   Wide: Needs attention fills the left column; New leads and Stalled stack in the right one, each sized to its content; tasks span both. */
.panel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 620px) {
  .panel-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-areas: "attention leads" "attention stalled" "tasks tasks"; align-items: start; }
  .panel.is-attention { grid-area: attention; align-self: stretch; }
  .panel.panel-leads { grid-area: leads; }
  .panel.panel-stalled { grid-area: stalled; }
  .panel.span-2 { grid-area: tasks; }
  /* no alerts panel (a company without First Advantage, M4): leads and stalled share the top row, nothing is left empty */
  .panel-grid.no-attention { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "leads stalled" "tasks tasks"; }
}
.panel { background: var(--panel); border-radius: var(--r-panel); padding: 16px; min-width: 0; }
.panel.is-soft { background: var(--panel-soft); }
.panel.is-attention { background: var(--panel); outline: 2px solid var(--danger-tint); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.panel-head h2 { font-size: 16px; font-weight: 600; }
.panel-head .count { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.panel-head .count.is-danger { color: var(--danger); font-weight: 600; }
.panel-note { font-size: 13px; color: var(--text-3); margin-top: 8px; }

.flat-list > li + li { border-top: 1px solid var(--line); }
.flat-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 4px; border-radius: 8px; }
.flat-row:hover { background: var(--panel-soft); }
.flat-row .flat-main { flex: 1 1 auto; min-width: 0; }
.flat-row .flat-title { display: block; font-size: 15px; font-weight: 500; }
.flat-row .flat-sub { display: block; font-size: 13px; color: var(--text-2); }
.flat-row .flat-right { flex: none; font-size: 13px; color: var(--text-3); text-align: right; }
.flat-row .flat-right.is-danger { color: var(--danger); font-weight: 600; }
.flat-row .chev { color: var(--text-3); font-size: 18px; flex: none; }
.flat-row.is-selected { background: var(--accent-tint); }

.alert-row .alert-type { font-size: 12px; font-weight: 600; }
.alert-row .alert-type.is-review { color: var(--review); }
.alert-row .alert-type.is-danger { color: var(--danger); }
.alert-row .alert-type.is-ok { color: var(--ok); }
.alert-row .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.alert-row .unread-dot.is-read { background: transparent; }

.task-row { display: flex; align-items: flex-start; gap: 6px; width: 100%; padding: 4px 0 4px 0; min-height: 48px; border-radius: 8px; }
.task-row:hover { background: var(--panel-soft); }
/* 36 px hit area around a 22 px drawn circle */
.task-check { width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.task-check .ring { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
.task-row.is-done .task-check .ring { background: var(--ok); border-color: var(--ok); }
.task-row.is-done .task-title { color: var(--text-3); text-decoration: line-through; }
.task-main { flex: 1 1 auto; min-width: 0; padding-top: 6px; }
.task-title { display: block; font-size: 15px; }
.task-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; font-size: 13px; color: var(--text-3); }
.task-sub.is-overdue { color: var(--danger); font-weight: 500; }
.task-sub .btn.is-quiet { min-height: 36px; padding: 0 6px; font-size: 13px; }

/* ---------- applicant card ---------- */
.applicant-card {
  background: var(--panel-soft); border-radius: var(--r-card); overflow: hidden;
  display: flex; flex-direction: column;
}
.card-body { padding: 18px 18px 14px; }
.card-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.card-pills .fields-toggle { margin-left: auto; }
.fields-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: var(--r-btn); background: var(--panel); border: 1px solid var(--line); color: var(--text-2); font-size: 13px; font-weight: 500; }
.fields-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.card-name { font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }
.card-contact { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0; }
.card-contact a, .card-contact span.line { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-2); min-height: 36px; padding: 8px 0; overflow-wrap: anywhere; align-self: flex-start; }
.card-contact .icon { font-size: 18px; color: var(--text-3); }
.card-contact a:hover { color: var(--text); }
.card-contact span.line { padding: 0; flex-wrap: wrap; }
.card-contact .copy-btn { min-height: 32px; padding: 0 8px; font-size: 13px; color: var(--accent-dark); }
.card-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@container (min-width: 640px) { .card-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } }
.card-facts { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 8px 14px; align-items: baseline; font-size: 15px; }
.card-facts dt { color: var(--text-3); font-size: 13px; }
.card-facts dd { color: var(--text); overflow-wrap: anywhere; }
.card-facts dd .is-overdue { color: var(--danger); font-weight: 600; }
.card-facts dd .is-today { color: var(--text); font-weight: 600; }
.card-facts dd .avatar { margin-right: 6px; vertical-align: middle; }
.card-facts dd .placeholder { color: var(--text-3); }
.card-note { margin-top: 14px; padding: 12px 14px; background: var(--panel); border-radius: 12px; font-size: 15px; line-height: 1.5; max-width: 62ch; }
.card-note .note-meta { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
.card-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; }
.card-banner.is-archived { background: var(--neutral-tint); color: var(--text); }
.card-banner .banner-text { flex: 1 1 220px; }
.card-banner .icon { color: var(--text-3); }
.card-repeat { margin-top: 14px; padding: 12px 14px; background: var(--pending-tint); border-radius: 12px; font-size: 14px; line-height: 1.5; max-width: 62ch; }
.card-repeat .note-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--pending); margin-bottom: 4px; }
.card-repeat ul { margin: 0; padding: 0; list-style: none; }
.card-repeat li + li { margin-top: 6px; }
.card-repeat .repeat-when { color: var(--text-2); }
.chip.is-archived { background: var(--neutral-tint); color: var(--text-2); }
.chip.is-repeat { background: var(--pending-tint); color: var(--pending); }
.card-docs-line { margin-top: 12px; font-size: 14px; color: var(--text-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-docs-line .icon { color: var(--text-3); }
.card-empty-hint { margin-top: 12px; font-size: 13px; color: var(--text-3); }

.fadv-block { background: var(--panel); border-radius: 14px; overflow: hidden; }
.fadv-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px; }
.fadv-head:hover { background: var(--neutral-tint); }
.fadv-head .fadv-title { font-size: 15px; font-weight: 600; flex: 1 1 auto; }
.fadv-head .fadv-count { font-size: 13px; color: var(--text-2); }
.fadv-head .icon { font-size: 18px; color: var(--text-3); transition: transform .2s ease; }
.fadv-block.is-open .fadv-head .icon { transform: rotate(180deg); }
.fadv-progress { display: flex; gap: 3px; padding: 0 14px 10px; }
.fadv-progress span { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--neutral-tint); }
.fadv-progress span.s-clear { background: var(--ok); }
.fadv-progress span.s-pending, .fadv-progress span.s-sent { background: var(--pending); }
.fadv-progress span.s-needs_review { background: var(--review); }
.fadv-progress span.s-failed, .fadv-progress span.s-positive { background: var(--danger); }
.fadv-rows { display: none; border-top: 1px solid var(--line); }
.fadv-block.is-open .fadv-rows { display: block; }
.fadv-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; padding: 10px 14px; min-height: 44px; } /* a chip that wraps lands on the right, under the others */
.fadv-row + .fadv-row { border-top: 1px solid var(--line); }
.fadv-row .fadv-key { width: 52px; flex: none; font-weight: 600; font-size: 14px; }
.fadv-row .fadv-label { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--text-2); }
.fadv-row .chip { flex: none; }
.fadv-row .fadv-extra { display: block; font-size: 12px; color: var(--text-3); }

.card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel-strip); padding: 12px 18px; min-height: 60px;
}
.card-footer .footer-date { font-size: 13px; color: var(--text-2); }
.card-footer .footer-date strong { color: var(--text); font-weight: 600; }
.card-footer .status-control { background: var(--panel); }
.card-footer .dnh { font-size: 12px; color: var(--danger); display: block; }

/* card actions: one container; desktop shows the three primary ones (Call, Text and the conversation
   live in the top bar), phone shows two rows: Log touch + Set next follow-up, then four stacked buttons */
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 16px; }
.card-actions .btn-label { display: inline-flex; align-items: center; gap: 6px; }
@media (min-width: 760px) { .is-phone-only { display: none !important; } }
@media (max-width: 759px) {
  .is-desk-only { display: none !important; }
  .detail-topbar .detail-actions { display: none; }
  .detail-topbar { margin-bottom: 8px; }
  .card-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .card-actions .is-stack { flex-direction: column; gap: 4px; padding: 8px 4px; min-height: 60px; font-size: 12px; white-space: normal; text-align: center; line-height: 1.2; }
  .card-actions .is-stack .icon { font-size: 18px; }
  .card-actions .is-stack .icon.chev { display: none; }
  .card-actions .is-stack .btn-label { flex-wrap: wrap; justify-content: center; gap: 3px; }
  .card-actions .is-stack.is-later .later-tag { line-height: 15px; }
  /* the phone dock: Log touch, the follow-up date and the status, pinned to the bottom of the pane above the tab bar */
  .card-dock {
    position: sticky; bottom: 0; z-index: 3;
    display: flex; align-items: center; gap: 8px;
    margin: 16px -16px -32px; padding: 10px 16px 12px;
    background: var(--surface); border-top: 1px solid var(--line-strong);
  }
  .card-dock .btn { flex: none; min-height: 44px; padding: 8px 12px; }
  .card-dock .dock-next { padding: 8px 8px 8px 10px; gap: 2px; }
  .card-dock .dock-next .icon { font-size: 18px; }
  .card-dock .dock-next .icon.chev { font-size: 14px; color: var(--text-3); }
  .card-dock .status-control { flex: 1 1 auto; min-width: 0; min-height: 44px; justify-content: flex-start; }
  .card-dock .status-control .icon { margin-left: auto; }
}

.below-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 640px) { .below-card { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }

.timeline { position: relative; }
.timeline-day { font-size: 13px; font-weight: 500; color: var(--text-2); padding: 10px 0 4px; }
.timeline-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 6px 0; }
.timeline-item .tl-icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--neutral-tint); color: var(--text-2); font-size: 14px; }
.timeline-item.k-status .tl-icon { background: var(--accent-tint); color: var(--accent-dark); }
.timeline-item.k-fadv .tl-icon { background: var(--pending-tint); color: var(--pending); }
.timeline-item.k-call .tl-icon, .timeline-item.k-text .tl-icon { background: var(--ok-tint); color: var(--ok); }
.timeline-item .tl-body { min-width: 0; }
.timeline-item .tl-meta { font-size: 13px; color: var(--text-3); display: flex; gap: 8px; flex-wrap: wrap; }
.timeline-item .tl-meta b { color: var(--text-2); font-weight: 600; }
.timeline-item .tl-text { font-size: 15px; line-height: 1.5; max-width: 62ch; overflow-wrap: anywhere; }
.timeline-item.k-status .tl-text { font-weight: 500; }

.doc-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 48px; }
.doc-row + .doc-row { border-top: 1px solid var(--line); }
.doc-row .doc-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--panel-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 18px; flex: none; }
.doc-row .doc-name { font-size: 15px; font-weight: 500; display: block; }
.doc-row .doc-sub { font-size: 13px; color: var(--text-3); display: block; }
.docs-note { font-size: 13px; color: var(--text-3); margin-top: 8px; }

.mentions-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0; min-height: 44px; border-radius: 8px; }
.mentions-row:hover { background: var(--panel-soft); }
.mentions-row .m-main { flex: 1 1 auto; min-width: 0; }
.mentions-row .m-conv { font-size: 14px; font-weight: 600; display: block; }
.mentions-row .m-text { font-size: 13px; color: var(--text-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mentions-row .m-time { font-size: 12px; color: var(--text-3); flex: none; }

/* ---------- messages ---------- */
.conversation-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; min-height: 64px; }
@media (max-width: 759px) { .conversation-item { min-height: 72px; } } /* five conversations breathe on a phone */
/* applicants mentioned lately, under the conversations: each row opens the card and comes back to that conversation */
.mention-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px; min-height: 60px; }
.mention-item:hover { background: var(--panel-soft); }
.mention-item .avatar { width: 36px; height: 36px; font-size: 13px; }
.mention-item .m-main { flex: 1 1 auto; min-width: 0; }
.mention-item .m-name { font-size: 15px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mention-item .m-name .pane-sub { font-weight: 400; margin-left: 4px; }
.mention-item .m-text { font-size: 13px; color: var(--text-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-item .m-text b { font-weight: 600; }
.mention-item .m-time { font-size: 12px; color: var(--text-3); flex: none; }
.mention-item .chev { color: var(--text-3); font-size: 18px; flex: none; }
.conversation-item:hover { background: var(--panel-soft); }
.conversation-item.is-selected { background: var(--accent-tint); }
.conversation-item .conv-main { flex: 1 1 auto; min-width: 0; }
.conversation-item .conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.conversation-item .conv-name { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-item .conv-time { font-size: 12px; color: var(--text-3); flex: none; }
.conversation-item .conv-preview { display: block; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conversation-item .conv-preview b { font-weight: 600; color: var(--text-2); }
.conversation-item.is-unread .conv-name, .conversation-item.is-unread .conv-preview { color: var(--text); }
.conversation-item.is-unread .conv-preview { font-weight: 500; }
.conv-unread { flex: none; min-width: 22px; height: 22px; border-radius: 11px; background: var(--accent-fill); color: var(--on-accent); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; }

/* min-height, not height: the thread spans all of its messages, so the sticky head stays pinned while the pane scrolls */
.thread { display: flex; flex-direction: column; min-height: 100%; }
.thread-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.thread-head .back-link { margin-left: -6px; }
.thread-head .thread-title { font-size: 17px; font-weight: 600; line-height: 1.2; }
.thread-head .thread-sub { font-size: 13px; color: var(--text-3); }
.thread-body { flex: 1 1 auto; padding: 8px 16px 16px; max-width: 880px; width: 100%; }
.thread-day { text-align: center; font-size: 12px; color: var(--text-3); padding: 14px 0 6px; }
.thread-new { display: flex; align-items: center; gap: 10px; color: var(--danger); font-size: 12px; font-weight: 600; padding: 8px 0 4px; }
.thread-new::before, .thread-new::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--danger-tint); }
.message { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 6px 0; }
.message .avatar { width: 36px; height: 36px; font-size: 13px; }
.message .msg-head { display: flex; gap: 8px; align-items: baseline; }
.message .msg-from { font-size: 14px; font-weight: 600; }
.message .msg-time { font-size: 12px; color: var(--text-3); }
.message .msg-text { font-size: 15px; line-height: 1.5; max-width: 54ch; overflow-wrap: anywhere; } /* Instrument Sans' "0" is wide: 54ch is about 77 characters */
.message.is-mine .avatar { background: var(--accent-tint); color: var(--accent-dark); }
.applicant-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 6px 10px 6px 8px; border-radius: 10px; min-height: 36px;
  background: var(--panel); border: 1px solid var(--line-strong); font-size: 13px; font-weight: 500; color: var(--text);
}
.applicant-chip:hover { border-color: var(--text-3); }
.applicant-chip .avatar { width: 24px; height: 24px; font-size: 12px; letter-spacing: 0; }
.applicant-chip .chip-status { color: var(--text-3); font-weight: 400; }
.applicant-chip .icon { font-size: 16px; color: var(--text-3); }
.composer { position: sticky; bottom: 0; background: var(--surface); padding: 10px 16px 16px; }
.composer-box { display: flex; gap: 8px; align-items: flex-end; background: var(--panel); border-radius: 14px; padding: 6px 6px 6px 14px; border: 1px solid var(--line); max-width: 880px; }
.composer-box:focus-within { border-color: var(--line-strong); }
.composer-input { flex: 1 1 auto; min-height: 40px; max-height: 140px; padding: 9px 0; border: 0; background: transparent; resize: none; line-height: 1.4; }
.composer-input::placeholder { color: var(--text-3); }
.composer-send { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-fill); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.composer-send:hover { background: var(--accent-fill-hover); }
.composer-hint { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.thread-empty { padding: 40px 24px; color: var(--text-2); }
.thread-empty h2 { font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: 6px; }

/* ---------- dashboard ---------- */
.dash-section-label { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 16px 4px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.dash-section-label .when { color: var(--text-3); font-weight: 400; }
.dash-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; min-height: 52px; }
.dash-row:hover { background: var(--panel-soft); }
.dash-row.is-selected { background: var(--accent-tint); }
.dash-row .dash-main { flex: 1 1 auto; min-width: 0; }
.dash-row .dash-title { display: block; font-size: 15px; font-weight: 500; }
.dash-row .dash-title.is-big { font-size: 17px; font-weight: 600; }
.dash-row .dash-sub { display: block; font-size: 13px; color: var(--text-2); }
.dash-row .dash-right { flex: none; font-size: 13px; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.dash-row .dash-right strong { display: block; font-size: 17px; color: var(--text); font-weight: 600; }
.dash-row .dash-right.is-danger strong { color: var(--danger); }
.dash-row .chev { color: var(--text-3); font-size: 18px; flex: none; }
.dash-fadv-line { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 16px 4px; }
.dash-fadv-line .chip { min-height: 26px; }
.dash-loc-filter { margin-top: 2px; }
.dash-section-label.is-sub { padding-top: 10px; }
a.dash-section-label.is-link { color: var(--text); font-weight: 600; }
a.dash-section-label.is-link:hover .when, a.dash-section-label.is-link .chev { color: var(--text-3); }
a.dash-section-label.is-link .chev { font-size: 18px; margin-left: 6px; }
a.dash-section-label.is-link.is-selected { background: var(--accent-tint); }
.dash-metrics { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--text-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.dash-metrics b { font-weight: 600; color: var(--text); }
.dash-metrics b.is-bad { color: var(--danger); }
.dash-table { padding: 6px 16px 10px; }
.dash-more { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 16px; font-size: 13px; color: var(--text-2); }
.dash-more:hover { background: var(--panel-soft); color: var(--text); }
.dash-more .icon { font-size: 16px; color: var(--text-3); }

.hero { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.hero .hero-value { font-size: 56px; font-weight: 600; line-height: .95; letter-spacing: -.02em; }
.hero .hero-label { font-size: 15px; color: var(--text-2); padding-bottom: 6px; }
.hero .hero-label strong { display: block; color: var(--text); font-weight: 600; }
.hero .delta { font-size: 13px; font-weight: 600; }
.delta.is-up { color: var(--ok); }
.delta.is-down { color: var(--danger); }
.delta.is-flat { color: var(--text-3); }

.stat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container (min-width: 400px) { .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 600px) { .stat-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.stat-tile { background: var(--panel); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-tile .st-value { font-size: 28px; font-weight: 600; line-height: 1.1; }
.stat-tile .st-label { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.stat-tile .st-label .icon { font-size: 14px; }
.stat-tile.is-review .st-value, .stat-tile.is-review .st-label .icon { color: var(--review); }
.stat-tile.is-danger .st-value, .stat-tile.is-danger .st-label .icon { color: var(--danger); }
.stat-tile.is-ok .st-value, .stat-tile.is-ok .st-label .icon { color: var(--ok); }
.stat-tile.is-pending .st-value, .stat-tile.is-pending .st-label .icon { color: var(--pending); }

.chart-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 560px) { .chart-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hbars { display: block; overflow: visible; font-family: var(--font); padding-right: 36px; width: 1px; flex: 1 1 auto; min-width: 0; } /* 1 px basis: the svg's 300 px intrinsic width can never widen its track */
.hbars-list { min-width: 0; } /* the value label at the tip paints in this padding */
.hbar-row + .hbar-row { margin-top: 2px; }
.hbars text { font-size: 13px; fill: var(--text-2); }
.hbars text.val { fill: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.hbars text.lbl.is-strong { fill: var(--text); font-weight: 600; }
.hbars rect.bar { fill: var(--bar); }
.hbars rect.bar.is-muted { fill: var(--line-strong); }
.hbars rect.track { fill: var(--panel-soft); }
.hbars line.base { stroke: var(--line); stroke-width: 1; }
.hbars text.delta { font-size: 12px; font-weight: 600; }
.hbars text.delta.is-up { fill: var(--ok); }
.hbars text.delta.is-down { fill: var(--danger); }
.hbars text.delta.is-flat { fill: var(--text-3); }
.hbars g.bar-g:hover rect.bar { fill: var(--accent); }
.hbars g.bar-g { cursor: default; }

.metric-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.metric-table th, .metric-table td { padding: 10px 8px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.metric-table th { font-weight: 500; color: var(--text-3); font-size: 12px; }
.metric-table th:first-child, .metric-table td:first-child { text-align: left; }
.metric-table td { font-variant-numeric: tabular-nums; }
.metric-table td:first-child { font-weight: 600; }
.metric-table td.is-bad { color: var(--danger); font-weight: 600; }
.metric-table td.is-good { color: var(--ok); }
.recap-nav { display: flex; gap: 8px; margin: 4px 0 12px; }
.recap-table tr.is-total td { font-weight: 600; border-top: 2px solid var(--line); }
.recap-table th { white-space: normal; min-width: 64px; }
.metric-table tr.is-row-button td { cursor: pointer; }
.metric-table tr.is-row-button:hover td { background: var(--panel-soft); }
.metric-table tr.is-selected td { background: var(--accent-tint); }
.metric-table td a { display: block; padding: 8px 0; margin: -8px 0; } /* a 36 px tap target inside the 20 px line */
.metric-table td a:hover { text-decoration: underline; }
.table-wrap { position: relative; margin: 0 -16px; --table-bg: var(--panel); }
.table-scroll { overflow-x: auto; padding: 0 16px; }
.table-scroll .metric-table th:first-child, .table-scroll .metric-table td:first-child { position: sticky; left: 0; background: var(--table-bg, var(--panel)); }
.panel.is-soft .table-wrap { --table-bg: var(--panel-soft); }
/* a table wider than its box says so: a gradient over the right edge and a "more" mark on the header row, both until it is
   scrolled to the end (classes set by markScrollables on the wrap and the scroll box) */
.table-wrap.is-scrollable:not(.is-at-end)::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 64px; pointer-events: none; background: linear-gradient(to right, transparent, var(--table-bg, var(--panel)) 80%); }
.table-wrap .scroll-more { display: none; position: absolute; top: 8px; right: 8px; z-index: 1; align-items: center; gap: 2px; min-height: 24px; padding: 2px 6px 2px 8px; border-radius: 999px; background: var(--text); color: #fff; font-size: 12px; font-weight: 500; pointer-events: none; }
.table-wrap .scroll-more .icon { font-size: 14px; }
.table-wrap.is-scrollable:not(.is-at-end) .scroll-more { display: inline-flex; }
.metric-table .th-note { display: block; font-weight: 400; font-size: 12px; }
.metric-table .th-short { display: none; }
.table-note { font-size: 13px; color: var(--text-3); margin-top: 8px; }
/* phone: the FedEx table fits all seven columns at 390 (one-word headers, tighter cells, short location codes); at 360 it scrolls a little and says so */
@media (max-width: 759px) {
  .metric-table.is-dense { font-size: 13px; }
  .metric-table.is-dense th, .metric-table.is-dense td { padding: 9px 4px; }
  .metric-table.is-dense th { font-size: 11px; white-space: normal; }
  .metric-table.is-dense .th-long, .metric-table.is-dense .th-note { display: none; }
  .metric-table.is-dense .th-short { display: inline; }
}

/* a flat section on the surface: the all-time pipeline and the two tables on the dashboard, under a hairline rule */
.section-flat { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-strong); min-width: 0; }
.section-flat .table-wrap { margin: 0; --table-bg: var(--surface); }
.section-flat .table-scroll { padding: 0; }
.section-flat .metric-table tr.is-row-button:hover td { background: var(--panel); }

.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container (min-width: 520px) { .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 800px) { .metric-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.metric { background: var(--panel); border-radius: 12px; padding: 12px 14px; }
.metric .m-value { display: block; font-size: 24px; font-weight: 600; line-height: 1.1; }
.metric .m-value.is-bad { color: var(--danger); }
.metric .m-label { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; }

.va-stats { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; }
.va-stats div { display: flex; flex-direction: column; }
.va-stats .v { font-size: 28px; font-weight: 600; line-height: 1.1; }
.va-stats .l { font-size: 13px; color: var(--text-2); }

/* ---------- popover / sheet ---------- */
/* above the toast stack (z 50), so a toast from the last action never covers a menu's lower options */
.popover-backdrop { position: fixed; inset: 0; z-index: 59; background: transparent; }
.popover {
  position: fixed; z-index: 60; min-width: 240px; max-width: min(360px, calc(100vw - 32px));
  background: var(--panel); border-radius: 14px; border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(15, 17, 23, .18);
  padding: 8px; max-height: min(70vh, 560px); overflow-y: auto;
}
.popover-title { font-size: 13px; font-weight: 600; color: var(--text-2); padding: 8px 10px 6px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.popover-title .link { color: var(--accent-dark); font-weight: 500; font-size: 13px; min-height: 28px; padding: 0 6px; border-radius: 6px; }
.popover-title .link:hover { background: var(--accent-tint); }
.popover-group { font-size: 12px; color: var(--text-3); padding: 10px 10px 2px; }
.status-option, .menu-option {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 10px; font-size: 14px;
}
.status-option:hover, .menu-option:hover { background: var(--panel-soft); }
.status-option.is-current { background: var(--accent-tint); font-weight: 600; }
.status-option .status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status-option .icon { margin-left: auto; color: var(--accent-dark); }
.menu-option .sub { margin-left: auto; font-size: 12px; color: var(--text-3); }
.field-option { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.field-option:hover { background: var(--panel-soft); }
.field-option input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: none; }
.field-option.is-locked { color: var(--text-3); }
.field-option .lock-note { margin-left: auto; font-size: 12px; color: var(--text-3); }
@media (max-width: 759px) {
  .popover-backdrop { background: rgba(15, 17, 23, .35); }
  .popover { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; max-width: none; border-radius: 18px 18px 0 0; padding: 8px 12px calc(16px + env(safe-area-inset-bottom, 0px)); max-height: 75vh; }
  .popover::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 4px auto 8px; }
}

/* ---------- toasts ---------- */
.toast-stack { position: fixed; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast-stack.is-raised { bottom: calc(146px + env(safe-area-inset-bottom, 0px)); } /* clear of the phone card dock or a composer */
/* while the Undo bar is up (M4) the phone's toasts sit one bar higher, so the two never cover each other */
.toast-stack.has-undo { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
.toast-stack.is-raised.has-undo { bottom: calc(206px + env(safe-area-inset-bottom, 0px)); }
/* from 760 the toasts sit over the list pane's title row, the one strip on every route with no control in it (the card's
   footer status control, the composer and the detail top bar's buttons all live elsewhere); the column matches the list pane */
@media (min-width: 760px) {
  .toast-stack, .toast-stack.is-raised { top: 54px; bottom: auto; left: 64px; right: auto; width: 376px; align-items: center; }
  .toast.is-entering { animation-name: toastInTop; }
}
@media (min-width: 1120px) {
  .toast-stack, .toast-stack.is-raised { top: 8px; left: 232px; width: 380px; }
  .shell[data-ctx="home"] ~ .toast-stack { width: 460px; }
}
@media (min-width: 1440px) {
  .toast-stack, .toast-stack.is-raised { width: 420px; }
  .shell[data-ctx="home"] ~ .toast-stack { width: 520px; }
}
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: var(--chrome); color: var(--on-chrome); padding: 10px 14px; border-radius: 12px; font-size: 14px; max-width: min(420px, calc(100% - 32px)); box-shadow: 0 8px 24px rgba(15,17,23,.25); }
@keyframes toastInTop { from { opacity: 0; transform: translateY(-8px); } }
.toast .toast-action { color: var(--chrome-accent); font-weight: 600; min-height: 32px; padding: 0 6px; }
.toast.is-entering { animation: toastIn .25s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- phone view (desktop) ---------- */
.phone-view { display: none; }
html[data-phone-view="1"] .shell { display: none; }
html[data-phone-view="1"] .phone-view { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; height: 100vh; background: var(--chrome); color: var(--on-chrome); padding: 12px 16px; overflow: hidden; }
.phone-frame { box-sizing: content-box; width: 390px; height: 844px; border-radius: 36px; border: 10px solid #000; background: #000; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); transform-origin: top center; flex: none; }
.phone-frame iframe { width: 390px; height: 844px; border: 0; display: block; background: var(--surface); }
.phone-view-stage { display: flex; justify-content: center; align-items: flex-start; width: 100%; flex: 1 1 auto; min-height: 0; }
.phone-view-bar { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--on-chrome-muted); }
.phone-view-bar .btn { background: var(--chrome-raised); border-color: var(--chrome-line); color: var(--on-chrome); }
html[data-frame="1"] .phone-view-toggle { display: none !important; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- narrow phones (360) ---------- */
@media (max-width: 400px) {
  .count-pair .count-value { font-size: 34px; }
  .count-pair { gap: 14px; }
  .card-name { font-size: 25px; }
  .hero .hero-value { font-size: 48px; }
  .company-name strong { font-size: 15px; }
  .company-switch { padding: 5px 8px 5px 7px; }
  .company-id { gap: 8px; }
  .company-mark { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }
}
.lead-row-wrap.is-leaving { animation: rowLeave .32s ease forwards; }

/* ====================================================================================================
   Phase 1 additions (M1). Everything above is direction B verbatim; everything below is new.
   ==================================================================================================== */

/* ---------- standalone pages (login, root chooser, switched off) ----------
   The shell's body is a fixed-height app frame on the chrome color; these pages scroll on the surface. */
body.is-page { overflow: auto; background: var(--surface); color: var(--text); min-height: 100%; }
body.is-page a { color: var(--accent-dark); }

/* the logo slot with an uploaded image, and the large form used on the login page */
.company-mark.has-logo { background: #ffffff; overflow: hidden; padding: 3px; }
.company-mark .company-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
.company-mark.is-large { width: 52px; height: 52px; border-radius: 14px; font-size: 20px; }

/* ---------- login ---------- */
.auth { max-width: 440px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.auth-head { background: var(--chrome); color: var(--on-chrome); padding: calc(28px + env(safe-area-inset-top, 0px)) 20px 26px; display: flex; align-items: center; gap: 14px; }
.auth-head-text { min-width: 0; }
.auth-company { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.auth-app { font-size: 12px; color: var(--on-chrome-muted); margin-top: 3px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.auth-form { background: var(--panel); padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.auth-form-title { font-size: 18px; font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.field-input { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--r-btn); border: 1px solid var(--line-strong); background: var(--panel); font-size: 16px; color: var(--text); }
.field-input::placeholder { color: var(--text-3); }
.field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); outline: none; }
.field-input[aria-invalid="true"] { border-color: var(--danger); }
.form-error { font-size: 14px; color: var(--danger); background: var(--danger-tint); border-radius: 10px; padding: 10px 12px; line-height: 1.45; }
.form-error[hidden] { display: none; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.btn.is-block { width: 100%; min-height: 48px; font-size: 16px; }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.auth-links { display: flex; justify-content: center; }
.link-btn { color: var(--accent-dark); font-size: 14px; font-weight: 500; min-height: 40px; padding: 0 10px; border-radius: 8px; display: inline-flex; align-items: center; }
.link-btn:hover { background: var(--accent-tint); }
.auth-note { font-size: 14px; color: var(--text-2); background: var(--panel-soft); border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.auth-note[hidden] { display: none; }
.auth-foot { padding: 20px 20px 32px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--text-3); margin-top: auto; }
.auth-switch { color: var(--text-2); min-height: 40px; display: inline-flex; align-items: center; }
.auth-switch:hover { color: var(--text); }
.auth-brandline { letter-spacing: .06em; text-transform: uppercase; font-size: 11px; font-weight: 600; }
@media (min-width: 600px) {
  body.page-auth { background: linear-gradient(to bottom, var(--chrome-raised) 0, var(--chrome-raised) 240px, var(--surface) 240px); padding: 56px 16px 40px; }
  .auth { min-height: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(15, 17, 23, .22); background: var(--panel); }
  .auth-head { padding: 28px 28px 24px; }
  .auth-form { padding: 24px 28px 28px; }
  .auth-foot { background: var(--panel-soft); padding: 16px 28px 18px; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 0; }
}

/* ---------- root chooser (/) ---------- */
.chooser { max-width: 560px; margin: 0 auto; padding: 40px 16px 40px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; gap: 26px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; color: var(--text); letter-spacing: -.01em; }
.wordmark i { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); display: inline-block; box-shadow: 0 0 0 3px var(--accent-tint); }
.chooser-title { font-size: clamp(28px, 7vw, 40px); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; color: var(--text); max-width: 15ch; }
.chooser-lead { font-size: 16px; color: var(--text-2); max-width: 44ch; margin-top: 10px; line-height: 1.5; }
.company-list { display: grid; gap: 12px; }
.company-card { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 14px; background: var(--panel); border-radius: 16px; border: 1px solid var(--line); min-height: 76px; color: var(--text); }
.company-card:hover { border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(15, 17, 23, .06); }
/* the mark's colors come from the company row: one nonce'd rule per card (src/pages/chooser.mjs); these are the neutral fallback */
.company-card .card-mark { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; letter-spacing: .02em; flex: none; background: var(--chrome); color: var(--chrome-accent); box-shadow: inset 0 0 0 1px var(--chrome-line); }
.company-card .card-mark.has-logo { background: #ffffff; padding: 4px; overflow: hidden; }
.company-card .card-mark .company-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
.chooser-empty { font-size: 15px; color: var(--text-2); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 16px; line-height: 1.5; }
.company-card .card-text { flex: 1 1 auto; min-width: 0; }
.company-card .card-name { display: block; font-size: 17px; font-weight: 600; }
.company-card .card-sub { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; }
.company-card .chev { color: var(--text-3); font-size: 20px; flex: none; }
.chooser-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 13px; color: var(--text-3); line-height: 1.5; }
.chooser-foot a { color: var(--text-2); min-height: 32px; display: inline-flex; align-items: center; }
.chooser-foot a:hover { color: var(--text); }

/* ---------- switched off, and the shell's own notice panels ---------- */
.notice { max-width: 480px; margin: 0 auto; padding: 56px 20px 40px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.notice-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--neutral-tint); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; flex: none; }
.notice-title { font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; color: var(--text); }
.notice-text { font-size: 16px; color: var(--text-2); line-height: 1.55; max-width: 40ch; }
.notice-actions { margin-top: 6px; }
.notice-brand { margin-top: auto; padding-top: 24px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--text-3); }
.notice-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 520px; padding: 24px; }
.notice-panel .notice-title { font-size: 22px; }
.panel-text { font-size: 15px; color: var(--text-2); line-height: 1.55; max-width: 60ch; }
.panel-list { display: grid; gap: 6px; font-size: 15px; color: var(--text-2); padding-left: 18px; list-style: disc; }

/* ---------- shell additions ---------- */
/* signed out: the column keeps its chrome (an empty rail fills it), no bar on the phone, no signed-in block */
.rail.is-empty { padding: 0; border: 0; min-height: 0; }
.me-block:empty { display: none; }

/* phone bottom bar: four seats (data-phone) and More; the other destinations, Settings and Sign out
   are in the More sheet. Labels never widen the bar past the viewport. */
.rail-link { min-width: 0; }
.rail-link .label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-more {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  flex: 1 1 0; min-width: 0; min-height: 52px; padding: 6px 4px; border-radius: 12px;
  color: var(--on-chrome-muted); font-size: 12px; font-weight: 500;
}
.rail-more .icon { font-size: 22px; }
.rail-more.is-active { color: var(--on-chrome); }
.rail-more.is-active .icon { color: var(--chrome-accent); }
.rail-more[aria-expanded="true"] { background: var(--chrome-raised); color: var(--on-chrome); }
@media (max-width: 759px) {
  .rail-link.is-more { display: none; }
  .rail-link[data-phone="1"] { order: 1; } .rail-link[data-phone="2"] { order: 2; } .rail-link[data-phone="3"] { order: 3; } .rail-link[data-phone="4"] { order: 4; }
  .rail-more { order: 9; }
}
@media (min-width: 760px) { .rail-more { display: none; } }
/* 360-wide phones: five seats share 360 px, so the labels drop a point and "Dashboard" stays whole */
@media (max-width: 374px) { .rail-link .label, .rail-more .label { font-size: 11px; } .rail { padding-left: 2px; padding-right: 2px; } .rail-link, .rail-more { padding-left: 2px; padding-right: 2px; } }
/* the More sheet (direction B's bottom-sheet popover) */
.more-sheet { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.more-sheet .menu-option { color: var(--text); font-weight: 500; }
.more-sheet .menu-option .icon { font-size: 20px; color: var(--text-3); }
.more-sheet .menu-option.is-active { background: var(--accent-tint); font-weight: 600; }
.more-sheet .menu-option.is-active .icon { color: var(--accent-dark); }
.more-sheet .menu-option.is-coming .sub { color: var(--text-3); }
.more-sheet .popover-group { border-top: 1px solid var(--line); margin-top: 6px; }
/* a destination that is a "coming" note, not a working screen (the FedEx tab in Phase 1) */
.rail-link.is-coming { color: var(--on-chrome-muted); }
.rail-link.is-coming .icon { opacity: .75; }
@media (min-width: 1120px) {
  .rail-link.is-coming .label::after { content: "soon"; margin-left: auto; font-size: 12px; font-weight: 500; line-height: 1.3; border: 1px solid var(--chrome-line); border-radius: 6px; padding: 1px 6px; color: var(--on-chrome-muted); }
  .rail-link.is-coming .label { display: inline-flex; align-items: center; flex: 1 1 auto; gap: 8px; }
}
/* the signed-in block's two actions: Settings and Sign out (icon only until the desktop column) */
.me-actions { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.me-link { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding: 0 8px; border-radius: 10px; color: var(--on-chrome-muted); font-size: 14px; font-weight: 500; width: 100%; }
.me-link:hover { background: var(--chrome-raised); color: var(--on-chrome); }
.me-link .icon { font-size: 20px; }
.me-link .label { display: none; }
@media (min-width: 1120px) {
  .me-link { justify-content: flex-start; padding: 0 10px; }
  .me-link .label { display: inline; }
}

/* ====================================================================================================
   M2 additions (logins): the quiet notice on the login page, the two password pages, the must-change
   interstitial in the shell, the company line in the signed-in block.
   ==================================================================================================== */

/* the quiet state (signed out, session ended): role="status", never red */
.form-notice { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-2); background: var(--panel-soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; line-height: 1.45; }
.form-notice .icon { flex: none; font-size: 18px; color: var(--ok); margin-top: 1px; }
.form-notice.is-plain .icon { color: var(--text-3); }
.form-notice[hidden] { display: none; }

/* the sentence under a form title that says what this page is for */
.auth-lead { font-size: 15px; color: var(--text-2); line-height: 1.5; margin-top: -4px; }
.auth-lead b { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }

/* a password field: label row with the Show toggle (hidden until app.js runs), the box, the rule line */
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.pw-toggle { color: var(--accent-dark); font-size: 13px; font-weight: 500; min-height: 28px; padding: 0 8px; border-radius: 6px; display: inline-flex; align-items: center; }
.pw-toggle:hover { background: var(--accent-tint); }
.pw-toggle[hidden] { display: none; }
.field-hint { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--text-3); line-height: 1.4; }
.field-hint .icon { display: none; flex: none; font-size: 15px; margin-top: 2px; }
.field-hint.is-ok { color: var(--ok); }
.field-hint.is-ok .icon { display: inline-block; }
.field-hint.is-bad { color: var(--danger); }
.auth-form .auth-links .link-btn .icon { font-size: 16px; margin-right: 6px; }
.auth-switch.is-text { color: var(--text-3); }
.auth-form > .btn.is-block:not(.is-primary) { margin-top: 4px; }

/* the signed-in block: which company this sign-in belongs to (a VA signs in to each company separately) */
.me-company { display: none; }
@media (min-width: 1120px) {
  .me-text .me-company { display: block; margin-top: 2px; }
}

/* the must-change interstitial: no rail, no switch; the notice panel takes the whole content area */
.notice-actions-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.is-must-change .pane-detail .detail-inner { max-width: 640px; }
@media (min-width: 760px) {
  .shell.is-interstitial .pane-detail { grid-area: auto; grid-column: 2 / -1; grid-row: 2 / -1; }
  .shell.is-interstitial .rail.is-empty { border-top: 0; }
}
@media (min-width: 1120px) {
  .shell.is-interstitial .pane-detail { grid-row: 1 / -1; }
  .shell.is-interstitial .detail-inner { padding-top: 48px; }
}

/* ====================================================================================================
   M3 additions: the server-rendered admin pages (People, Access, Company, Modules, Audit log) and the
   platform owners' Companies page. Direction B's list + detail panes, rows, chips and panels, reused;
   new here: the section chips, person rows, the three-state level control, the one-time "reveal" box,
   the color fields and brand preview, the key/value list, the admin company switch menu.
   ==================================================================================================== */

/* list pane header: title + line, tools on the right, the section chips under them */
.pane-title-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.admin-head .pane-title-row { align-items: flex-start; margin-bottom: 10px; }
.admin-head .pane-tools { flex: none; }
.admin-head .list-search { margin-bottom: 8px; }
.section-chips { padding-bottom: 12px; }
.section-chips .loc-chip { min-height: 34px; }
.list-group-label.is-muted { color: var(--text-3); }
.list-body > ul:empty { display: none; }

/* rows for people, companies */
.person-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; min-height: 60px; color: var(--text); }
.person-row:hover { background: var(--panel-soft); }
.person-row.is-selected { background: var(--accent-tint); }
.person-row.is-inactive .person-name, .person-row.is-inactive .person-meta { color: var(--text-3); }
.person-row .avatar { width: 36px; height: 36px; font-size: 13px; }
.person-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.person-name { font-size: 16px; font-weight: 600; line-height: 1.3; display: flex; align-items: center; gap: 8px; min-width: 0; }
.tag-admin { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--accent-dark); background: var(--accent-tint); border-radius: 5px; padding: 1px 6px; line-height: 16px; }
.person-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.person-meta .loc { font-weight: 600; color: var(--text); }
.person-meta .email { color: var(--text-3); overflow-wrap: anywhere; }
.person-meta .custom { color: var(--accent-dark); font-weight: 600; }
.person-row .chip { flex: none; }
.person-row .chev { color: var(--text-3); font-size: 18px; flex: none; }
.company-row-mark { flex: none; display: inline-flex; }
.company-row-mark .company-mark { width: 36px; height: 36px; border-radius: 10px; font-size: 13px; }

/* detail pane */
.hint-panel { max-width: 520px; }
.is-admin .detail-topbar { margin-bottom: 10px; min-height: 0; }
.is-admin .today-head { margin: 4px 0 14px; }
.is-admin .today-head h1 { font-size: 22px; }
.id-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.id-row h1 { overflow-wrap: anywhere; }
.id-card .id-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.id-card .card-name { font-size: 24px; }
.id-card-text { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.id-card .card-pills { margin: 0; }
.chips-inline { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-inline .chip small { font-weight: 400; color: var(--text-3); margin-left: 4px; }
.detail-inner > .panel + .panel, .detail-inner > .panel + .form-panel, .detail-inner > .form-panel + .panel, .detail-inner > .form-panel + .form-panel, .detail-inner > .form-notice + .panel, .detail-inner > .form-error + .panel, .company-form > .panel + .panel { margin-top: 12px; }
.detail-inner > .form-error, .detail-inner > .form-notice { margin-bottom: 12px; }
.form-panel { display: flex; flex-direction: column; gap: 14px; }
.form-panel .panel-head { margin-bottom: 0; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sticky-actions { position: sticky; bottom: 0; z-index: 3; background: var(--surface); padding: 12px 0 calc(8px + env(safe-area-inset-bottom, 0px)); margin-top: 12px; border-top: 1px solid var(--line-strong); }
.panel .field-input, .panel select.field-input { background: var(--panel-soft); }
.panel .field-input:focus { background: var(--panel); }
select.field-input { appearance: auto; -webkit-appearance: menulist; padding-right: 36px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.check-row input { width: 20px; height: 20px; accent-color: var(--accent); margin: 2px 0 0; flex: none; }
.check-text { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.4; }
.check-text small { font-size: 13px; color: var(--text-3); }
.check-row.is-disabled { color: var(--text-3); cursor: default; }
.scope-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.scope-field legend { padding: 0; margin-bottom: 6px; }
.scope-segments { display: inline-flex; }
.scope-segments .segment { cursor: pointer; position: relative; min-height: 40px; }
.scope-segments input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.scope-segments .segment:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.scope-list { margin-top: 8px; padding: 4px 12px; background: var(--panel-soft); border-radius: 12px; }
.scope-list[hidden] { display: none; }
.scope-list .check-row { min-height: 40px; padding: 6px 0; }
.scope-list .check-row + .check-row { border-top: 1px solid var(--line); }
.btn.is-danger-text { color: var(--danger); }
.btn.is-danger-text:hover { background: var(--danger-tint); border-color: var(--danger-tint); }
.signin-panel .form-actions .btn { flex: 1 1 auto; }
@media (min-width: 760px) { .signin-panel .form-actions .btn { flex: none; } }
.reveal-slot:empty { display: none; }

/* the one-time box: a sign-in link or a temporary password, shown once */
.reveal { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--review-tint); border: 1px solid var(--review); color: var(--text); }
.reveal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; }
.reveal-once { font-size: 11px; font-weight: 700; color: var(--review); text-transform: uppercase; letter-spacing: .06em; }
.reveal-row { display: flex; gap: 8px; align-items: center; }
.reveal-row .field-input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; background: #ffffff; }
.reveal-row .btn { flex: none; min-height: 48px; }
.reveal-note { font-size: 13px; color: var(--text-2); margin-top: 8px; line-height: 1.45; }
.reveal.is-copied .copy-btn { background: var(--ok); border-color: var(--ok); color: #ffffff; }

/* the access matrix */
.access-matrix { display: flex; flex-direction: column; gap: 12px; }
.access-group .panel-head { margin-bottom: 4px; }
.access-group.is-off { opacity: .8; }
.access-list > li + li { border-top: 1px solid var(--line); }
.access-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.access-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.access-label { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.access-sub { font-size: 13px; color: var(--text-2); max-width: 60ch; }
.access-default { font-size: 12px; color: var(--text-3); }
.access-default b { font-weight: 600; color: var(--text-2); }
.access-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.level-control .segment { min-height: 38px; padding: 6px 12px; cursor: pointer; }
.level-control .segment:disabled { color: var(--text-3); cursor: not-allowed; opacity: .55; }
.level-control .segment.is-active:disabled { opacity: 1; color: var(--text); }
.level-control .segment[aria-busy="true"] { opacity: .6; }
.access-row.has-override .level-control .segment.is-active { box-shadow: 0 0 0 2px var(--accent); }
.custom-mark { font-size: 12px; font-weight: 600; color: var(--accent-dark); }
.custom-mark[hidden], .reset-cell[hidden] { display: none; }
.reset-cell { min-height: 36px; font-size: 13px; }
.chip.is-mini { min-height: 20px; padding: 0 6px; font-size: 11px; }
.level-chip.is-edit { background: var(--ok-tint); color: var(--ok); }
.level-chip.is-view { background: var(--pending-tint); color: var(--pending); }
.level-chip.is-none { background: var(--neutral-tint); color: var(--neutral); }
@container (min-width: 640px) {
  .access-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .access-main { flex: 1 1 auto; }
  .access-controls { flex: none; }
}

/* the company page */
.company-form { display: flex; flex-direction: column; }
.color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container (min-width: 640px) { .color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 379px) { .color-grid { grid-template-columns: minmax(0, 1fr); } } /* under 380 px two columns clip the 7-character hex */
.color-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.color-inputs { display: flex; gap: 8px; align-items: center; }
.color-inputs input[type="color"] { width: 44px; height: 44px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 10px; background: #ffffff; flex: none; cursor: pointer; }
.color-inputs input[type="color"]:disabled { cursor: default; opacity: .7; }
.field-input.is-hex { font-family: ui-monospace, Menlo, Consolas, monospace; min-height: 44px; }
.contrast-line { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 10px 12px; border-radius: 10px; background: var(--ok-tint); color: var(--ok); }
.contrast-line.is-bad { background: var(--danger-tint); color: var(--danger); }
.contrast-line .icon { font-size: 18px; flex: none; }
.brand-preview { display: grid; grid-template-columns: 150px minmax(0, 1fr); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); min-height: 150px; }
.bp-chrome { background: var(--chrome); color: var(--on-chrome); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bp-chrome .company-mark { background: var(--mark-bg); color: var(--mark-fg); box-shadow: inset 0 0 0 1px var(--chrome-line); }
.bp-name { display: flex; flex-direction: column; font-size: 13px; min-width: 0; }
.bp-name strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-name span { color: var(--on-chrome-muted); font-size: 11px; }
.bp-rail { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.bp-link { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13px; color: var(--on-chrome-muted); }
.bp-link .icon { font-size: 16px; }
.bp-link.is-active { background: var(--chrome-raised); color: var(--on-chrome); }
.bp-link.is-active .icon { color: var(--chrome-accent); }
.bp-surface { background: var(--surface); padding: 12px; min-width: 0; }
.bp-panel { background: var(--panel); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; color: var(--text); }
.bp-row { display: block; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--text); }
.bp-row.is-selected { background: var(--accent-tint); }
.bp-accent-text { color: var(--accent-dark); font-size: 13px; font-weight: 600; }
@media (max-width: 400px) { .brand-preview { grid-template-columns: 118px minmax(0, 1fr); } }
.logo-row { display: flex; gap: 14px; align-items: flex-start; }
.logo-slot { flex: none; display: inline-flex; }
.logo-slot .company-mark, .company-mark.on-light { background: var(--chrome); color: var(--chrome-accent); box-shadow: inset 0 0 0 1px var(--chrome-line); }
.logo-slot .company-mark.has-logo { background: #ffffff; }
.logo-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.file-btn { cursor: pointer; }
.file-btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.swatches { display: inline-flex; gap: 4px; vertical-align: middle; }
.swatches i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(15, 17, 23, .1); display: inline-block; }
.flat-row.is-static { cursor: default; }
.flat-row.is-static:hover { background: transparent; }
.flat-row .chip { flex: none; }
.flat-row .btn { flex: none; }
.slug-preview b { font-weight: 600; color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; }

/* the audit log */
.audit-row .avatar.is-small { width: 28px; height: 28px; }
.kv { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 8px 14px; font-size: 14px; }
.kv dt { color: var(--text-3); font-size: 13px; }
.kv dd { overflow-wrap: anywhere; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.page-list li { display: flex; flex-direction: column; padding: 8px 0; }
.page-list li .flat-title { font-size: 15px; font-weight: 500; }
.page-list li .flat-sub { font-size: 13px; color: var(--text-2); }

/* the admin company switch with several targets */
.company-switch-group { position: relative; flex: none; }
.switch-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--panel); color: var(--text); border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(15, 17, 23, .18); padding: 6px; min-width: 220px; }
.switch-list[hidden] { display: none; }
.switch-list .menu-option { color: var(--text); font-weight: 500; }
.switch-list .menu-option .icon { color: var(--text-3); }
@media (min-width: 1120px) { .switch-list { left: 0; right: auto; } }

/* the platform frame: a neutral chrome, one destination, the way back in the company block */
.is-platform .company-switch .icon { color: var(--on-chrome-muted); }
.status-panel.is-off { outline: 2px solid var(--line-strong); }

/* the desktop column with the Admin group: twelve destinations must fit 900 px beside the company and
   signed-in blocks, so entries are 42 px and group labels tighter from 1120 up; the rail scrolls on its
   own if a company ever has more */
@media (min-width: 760px) { .rail { overflow-y: auto; min-height: 0; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } }
@media (min-width: 1120px) { .rail-link { min-height: 42px; } .rail-group-label { padding: 10px 10px 3px; } }
/* the admin detail top bar: actions sit right (the back link is hidden from 760 up); on a phone B hides
   the applicant card's top-bar actions, but Deactivate, Reset and Open must stay */
.is-admin .detail-topbar .detail-actions { margin-left: auto; }
@media (max-width: 759px) { .is-admin .detail-topbar .detail-actions { display: flex; } .is-admin .detail-topbar .detail-actions .btn { min-height: 40px; } }
/* flat rows used directly in a list pane (the Company and Modules lists) keep the pane's 16 px gutter */
.pane-list .flat-row { padding-left: 16px; padding-right: 16px; border-radius: 0; }
.pane-list .flat-list > li + li, .pane-list .list-body ul > li + li.flat-sep { border-top: 1px solid var(--line); }
/* ... and the whole column (company block, twelve destinations, signed-in block) fits 900 px from 1120 up */
@media (min-width: 1120px) {
  .company-block { padding: 16px 16px 10px; }
  .rail { padding: 4px 12px; }
  .rail-link { min-height: 40px; }
  .rail-group-label { padding: 8px 10px 2px; }
  .me-block { padding: 10px 8px; }
}

/* ====================================================================================================
   M4 additions: the hiring module on direction B's panes. New here: the touch and hold-up popover
   forms, the DO NOT HIRE reason, the Undo bar, the notes panel, the hold-ups panel, the document rows
   with the upload control and its storage note, the Training and Alerts lists, the field picker's note,
   "Load more", the loading states, the view-only note, the stage chip, and classes for the handful of
   inline styles direction B carried (hbars keep theirs until the dashboard lands in M5).
   ==================================================================================================== */

/* loading and empty states */
.list-empty.is-loading { color: var(--text-3); }
.list-empty.is-loading strong { color: var(--text-2); }
.list-empty.is-tight { padding-top: 8px; }
.load-more { padding: 12px 16px 20px; }
.load-more .btn { width: 100%; justify-content: center; min-height: 44px; }
.pane-header.is-simple { padding-bottom: 12px; }
.pane-header.is-simple .pane-title-row { margin-bottom: 0; }
.detail-inner.is-list-panels { padding-top: 8px; }
.view-only-note { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-2); background: var(--panel); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; line-height: 1.45; }
.view-only-note .icon { flex: none; font-size: 16px; color: var(--text-3); margin-top: 1px; }

/* the card: stage chip, fact notes, the two-column layout under the card as classes */
.chip.is-stage { background: var(--panel); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.card-facts dd { min-width: 0; overflow-wrap: anywhere; }
.fact-note { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.fact-note.is-sheet { color: var(--text-3); } /* a quiet note, not a link: the sheet owns the field until cutover */
.fact-person { display: inline-flex; align-items: center; gap: 6px; }
.fact-long { white-space: pre-wrap; font-size: 14px; color: var(--text-2); }
.card-contact .line.is-empty .placeholder, .placeholder.is-muted { color: var(--text-3); }
.card-contact a { color: inherit; }
.below-card-side { display: grid; gap: 12px; align-content: start; }
.status-control.is-static { cursor: default; }
.status-control.is-static:hover { background: var(--panel); }
.card-footer .status-control.is-static:hover { background: var(--panel); }

/* popover forms: log a touch (kind + note), the DO NOT HIRE reason, add a hold-up, pick a date */
.popover { max-height: min(78vh, 640px); overflow-y: auto; }
.popover-form { display: flex; flex-direction: column; gap: 10px; padding: 6px 10px 10px; min-width: min(320px, calc(100vw - 32px)); }
.popover-form .popover-title { padding-left: 0; padding-right: 0; }
.popover-form .field-label { font-size: 13px; color: var(--text-2); }
.popover-form .field-input { background: var(--panel-soft); font-size: 15px; min-height: 44px; }
.popover-form textarea.field-input { min-height: 64px; resize: vertical; line-height: 1.45; }
.popover-form .form-actions { justify-content: flex-start; }
.popover-form.is-inline { flex-direction: row; align-items: center; gap: 8px; padding: 4px 10px 8px; min-width: 0; }
.popover-form.is-inline .field-input { flex: 1 1 auto; min-width: 0; min-height: 40px; }
.popover-form.is-inline .btn { flex: none; min-height: 40px; }
.popover-note { font-size: 13px; color: var(--text-3); line-height: 1.45; max-width: 44ch; }
.touch-kinds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.touch-kind { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; font-weight: 500; color: var(--text-2); cursor: pointer; position: relative; }
.touch-kind input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.touch-kind .icon { font-size: 18px; }
.touch-kind.is-active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-dark); }
.touch-kind:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 379px) { .touch-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.popover.is-fields { max-height: min(80vh, 720px); }
.panel-note.is-padded { padding: 8px 10px 4px; }
.popover .form-error { margin: 0; }
.popover .form-error[hidden] { display: none; }

/* the Undo bar: one line above the tab bar (phone) or at the bottom of the window (desktop), visible until
   the next change, Undo, dismiss, or five minutes */
.undo-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px 10px 8px 14px; border-radius: 14px; background: var(--chrome); color: var(--on-chrome); font-size: 14px; box-shadow: 0 12px 32px rgba(15, 17, 23, .28); }
.undo-bar .icon { font-size: 18px; color: var(--chrome-accent); flex: none; }
.undo-bar .undo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-bar .btn { color: var(--on-chrome); border-color: var(--chrome-line); background: var(--chrome-raised); }
.undo-bar .btn:hover { background: var(--chrome-line); }
.undo-bar .undo-btn { font-weight: 600; color: var(--chrome-accent); }
.undo-bar .btn.is-quiet { border-color: transparent; background: transparent; color: var(--on-chrome-muted); }
@media (max-width: 759px) { .undo-bar { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } .shell[data-pane="detail"] ~ .undo-bar { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: no-preference) { .undo-bar { animation: toastIn .18s ease; } }

/* notes */
.note-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.note-form .note-input { min-height: 56px; resize: vertical; line-height: 1.45; font-size: 15px; background: var(--panel-soft); }
.note-form .form-actions { justify-content: flex-end; }
.note-list { display: flex; flex-direction: column; }
.note-item { padding: 10px 0; }
.note-item + .note-item { border-top: 1px solid var(--line); }
.note-item .note-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-3); margin-bottom: 3px; }
.note-item .note-meta b { color: var(--text); font-weight: 600; }
.note-text { font-size: 15px; line-height: 1.5; color: var(--text); white-space: pre-wrap; max-width: 60ch; }

/* hold-ups */
.holdup-list { display: flex; flex-direction: column; }
.holdup-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 0; }
.holdup-item + .holdup-item { border-top: 1px solid var(--line); }
.holdup-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.holdup-reason { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.holdup-desc { font-size: 14px; color: var(--text-2); line-height: 1.45; max-width: 60ch; }
.holdup-meta { font-size: 13px; color: var(--text-3); }
.holdup-item .btn { flex: none; }
.holdup-item .flat-right { padding-top: 2px; }

/* documents: rows with Open, the upload control and its storage note */
.doc-row { gap: 12px; }
.doc-row .doc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.doc-row .doc-name { overflow-wrap: anywhere; }
.doc-row .btn { flex: none; }
.doc-nofile { flex: none; font-size: 12px; color: var(--text-3); border: 1px dashed var(--line-strong); border-radius: 6px; padding: 2px 6px; }
.upload-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.upload-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.upload-kind { flex: 1 1 160px; min-width: 0; }
.upload-kind .field-input { min-height: 44px; }
.upload-form .file-btn { flex: none; min-height: 44px; }
.upload-form .file-btn.is-disabled { color: var(--text-3); border-style: dashed; cursor: not-allowed; }
.upload-form.is-off .docs-note { color: var(--review); background: var(--review-tint); border-radius: 8px; padding: 8px 10px; }
.upload-form.is-busy .file-btn { opacity: .6; pointer-events: none; }
.file-btn input.visually-hidden:focus + * { outline: none; }

/* the Training list and detail */
.id-card .chips-inline { margin-top: 4px; }
.lead-row .lead-time { white-space: nowrap; }

/* the Alerts list: the same flat alert rows the Home panel uses, in the list pane */
.pane-list .flat-list .alert-row { padding-left: 16px; padding-right: 16px; border-radius: 0; min-height: 60px; }
.pane-list .flat-list .alert-row.is-selected { background: var(--accent-tint); }
.pane-list .list-group-label + .flat-list > li + li { border-top: 1px solid var(--line); }

/* the flat rows' small "unassigned" mark in the New leads panel (was an inline style in B) */
.flat-sub .unassigned.is-review { color: var(--review); font-weight: 500; }

/* phone: the alerts and training lists are the screen; nothing to show in the detail pane */
@media (max-width: 759px) { .shell[data-ctx="alerts"][data-pane="list"] .pane-detail, .shell[data-ctx="training"][data-pane="list"] .pane-detail, .shell[data-ctx="applicants"][data-pane="list"] .pane-detail { display: none; } }

/* the Home desktop column stays the subject; Applicants, Training and Alerts use the standard list width */
.timeline-item.is-undone .tl-text { text-decoration: line-through; color: var(--text-3); }
.tl-undone { color: var(--review); font-weight: 600; }

/* 360-wide phones: the touch popover and the undo bar fit */
@media (max-width: 374px) { .popover-form { min-width: 0; } .undo-bar { font-size: 13px; gap: 6px; padding-left: 10px; } }

/* ====================================================================================================
   M5 additions: the dashboard in direction B's split model (summary rows, inline-SVG bars as classes, the
   six stage tiles plus Other, the First Advantage tiles, the week stepper), the FedEx "coming" page, the
   Add-a-lead form, the global search box in the shell header, Settings, archived location chips, the
   Edit-details popover. Brand comes from the tokens only; no color is written here.
   ==================================================================================================== */

/* bars: direction B's hbar inline styles as classes (one hue, value at the tip) */
.hbar-row { display: flex; align-items: center; gap: 10px; min-height: 28px; width: 100%; }
.hbar-label { flex: 0 0 110px; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.hbar-label.is-wide { flex-basis: 140px; }
.hbar-right { flex: 0 0 60px; text-align: right; font-size: 12px; font-weight: 600; }
.hbar-right.is-empty { flex-basis: 36px; }
.hbar-right .delta { font-size: 12px; }
@media (max-width: 400px) { .hbar-label { flex-basis: 92px; } .hbar-label.is-wide { flex-basis: 116px; } .hbar-right { flex-basis: 50px; } }

/* the six stages (+ Other): two columns on a phone, three in a mid pane, six (seven with Other) across a wide one */
.stage-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stage-tiles .stage-tile.is-other { grid-column: 1 / -1; }
@container (min-width: 560px) { .stage-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 900px) {
  .stage-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stage-tiles.has-other { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .stage-tiles .stage-tile.is-other { grid-column: auto; }
}
.stage-tile { display: flex; flex-direction: column; gap: 4px; min-height: 88px; padding: 12px 14px; border-radius: 12px; background: var(--panel); color: var(--text); text-align: left; min-width: 0; }
.stage-tile:hover { background: var(--panel-soft); }
.stage-tile.is-selected { box-shadow: 0 0 0 2px var(--accent); }
.stage-tile .st-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); min-width: 0; }
.stage-tile .st-head .st-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-tile .status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.stage-tile .st-value { font-size: 28px; font-weight: 600; line-height: 1.1; }
.stage-tile .st-sub { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-tile.is-other { background: var(--panel-soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
.stage-tile.is-other.is-selected { box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 2px var(--accent); }
/* in the list pane (white) the tiles sit on the soft tint; on the surface they are white */
.pane-list .stage-tile { background: var(--panel-soft); }
.pane-list .stage-tile:hover { background: var(--neutral-tint); }
.pane-list .stage-tile.is-other { background: var(--panel); }
.dash-tiles { padding: 4px 16px 10px; }

/* dashboard rows and labels */
.dash-row.is-static { cursor: default; }
.dash-row.is-static:hover { background: transparent; }
a.dash-row { color: inherit; }
.dash-row .dash-right.is-delta { font-weight: 600; }
.dash-row .dash-sub .chip.is-mini { vertical-align: middle; margin-left: 2px; }
.chip.is-mini { min-height: 18px; padding: 0 6px; font-size: 11px; line-height: 18px; }
.dash-row .alert-type { display: block; font-size: 12px; font-weight: 600; }
.dash-row .alert-type.is-review { color: var(--review); }
.dash-row .alert-type.is-danger { color: var(--danger); }
.dash-row .alert-type.is-ok { color: var(--ok); }
.dash-row .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.dash-row .unread-dot.is-read { background: transparent; }
.dash-row .avatar { flex: none; }
.dash-row[aria-current="true"] .dash-title { color: var(--text); }
.pane-list .list-empty.is-tight { padding: 8px 16px 12px; }
.pane-list ul + .dash-section-label { margin-top: 2px; }

/* the week stepper under the dashboard title */
.week-stepper { display: flex; align-items: center; gap: 2px; margin: -6px 0 8px -6px; }
.week-stepper .btn { min-height: 36px; padding: 6px 8px; color: var(--text-2); }
.week-stepper .btn .icon { font-size: 16px; }
.week-stepper .week-current { font-size: 13px; font-weight: 600; color: var(--text); padding: 0 6px; min-width: 88px; text-align: center; }
.week-stepper .week-spacer { width: 36px; }
@media (max-width: 759px) { .week-stepper { margin-top: 0; } .week-stepper .btn { min-height: 40px; } .week-stepper .btn .wk-label { display: none; } .week-stepper .btn .icon { font-size: 18px; } }

/* detail-pane spacing for the dashboard's stacked sections */
.dash-gap { margin-top: 12px; }
.dash-gap-small { margin: -6px 0 12px; }
.hero.is-small { margin-bottom: 10px; }
.hero.is-small .hero-value { font-size: 40px; }
.link.is-small { font-size: 13px; color: var(--accent-dark); font-weight: 500; }
.link.is-small:hover { text-decoration: underline; }
.section-flat .panel-note { margin-top: 10px; }
.load-more.is-flat { padding: 12px 0 0; }
.metric-table td.num { font-variant-numeric: tabular-nums; }
.chips-inline { display: flex; flex-wrap: wrap; gap: 6px; }

/* phone: the dashboard's summary list is the screen until a row opens its detail */
@media (max-width: 759px) {
  .shell[data-ctx="dashboard"][data-pane="list"] .pane-detail { display: none; }
  .dash-row { padding-left: 16px; padding-right: 12px; min-height: 56px; }
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the Applicants head with "Add a lead" beside the title */
.pane-title-row .add-lead { flex: none; min-height: 36px; }
.pane-title-row .add-lead.is-current { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.pane-sub.is-line { margin: -4px 0 8px; display: block; }
@media (max-width: 759px) { .pane-title-row .add-lead { min-height: 40px; } }

/* the Add-a-lead form (the detail pane): labels above fields, an inline error under a field, the duplicate notice */
.lead-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.lead-form .panel-head { margin-bottom: 0; }
.lead-form .lead-title { font-size: 20px; font-weight: 600; line-height: 1.3; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field .field-label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.field .field-input { min-height: 44px; font-size: 15px; background: var(--panel-soft); }
.field textarea.field-input { min-height: 72px; resize: vertical; line-height: 1.45; }
.field .field-error { font-size: 13px; color: var(--danger); font-weight: 500; }
.field .field-hint { font-size: 13px; color: var(--text-3); }
.field.has-error .field-input { border-color: var(--danger); }
.lead-form .form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lead-form .form-actions .btn { min-height: 44px; }
.lead-form .form-error { font-size: 14px; color: var(--danger); font-weight: 500; }
.dup-notice { align-items: center; }
.dup-notice .link { color: var(--accent-dark); font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; }
.dup-notice .link:hover { text-decoration: underline; }

/* the card's tool pair: Edit (editors) and Fields */
.card-tools { display: inline-flex; gap: 6px; margin-left: auto; }
.card-pills .card-tools .fields-toggle { margin-left: 0; }
.popover-form.is-edit { min-width: min(360px, calc(100vw - 32px)); gap: 6px; }
.popover-form.is-edit .field-label { margin-top: 6px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.popover-form.is-edit .field-label .lock-note { font-size: 12px; color: var(--text-3); font-weight: 400; }
.popover-form.is-edit .form-actions { margin-top: 6px; }
.popover-form.is-edit .field-input { min-height: 40px; }

/* the shell header's global search box */
.global-search { position: relative; display: flex; align-items: center; min-width: 0; }
.global-search .global-search-toggle { display: none; }
.global-search .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--on-chrome-muted); pointer-events: none; }
.global-search-input { width: 100%; min-height: 36px; padding: 6px 10px 6px 32px; border-radius: var(--r-btn); border: 1px solid var(--chrome-line); background: var(--chrome-raised); color: var(--on-chrome); font-size: 13px; appearance: none; -webkit-appearance: none; }
.global-search-input::placeholder { color: var(--on-chrome-muted); }
.global-search-input:focus { border-color: var(--chrome-accent); outline: none; }
.global-search-input::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; }
/* phone and compact top bar: an icon; the field opens over the company name */
@media (max-width: 1119px) {
  .company-block { position: relative; }
  .global-search { flex: none; margin-left: auto; }
  .global-search .global-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; color: var(--on-chrome); background: var(--chrome-raised); border: 1px solid var(--chrome-line); flex: none; }
  .global-search .global-search-toggle .icon { font-size: 18px; }
  .global-search .global-search-toggle .ic-close { display: none; }
  .global-search .search-icon, .global-search .global-search-input { display: none; }
  .global-search.is-open { position: absolute; left: 12px; right: 12px; top: 6px; bottom: 6px; z-index: 3; background: var(--chrome); display: flex; align-items: center; gap: 8px; margin: 0; }
  .global-search.is-open .global-search-input { display: block; flex: 1 1 auto; min-width: 0; min-height: 36px; order: 1; }
  .global-search.is-open .search-icon { display: block; left: 10px; }
  .global-search.is-open .global-search-toggle { order: 2; }
  .global-search.is-open .global-search-toggle .ic-search { display: none; }
  .global-search.is-open .global-search-toggle .ic-close { display: inline-block; }
}
@media (min-width: 760px) and (max-width: 1119px) {
  .global-search { width: 240px; margin-left: 0; }
  .global-search .global-search-toggle { display: none; }
  .global-search .search-icon, .global-search .global-search-input { display: block; }
  .global-search.is-open { position: static; background: transparent; }
}
@media (min-width: 1120px) { .global-search { width: 100%; } }
/* a phone top bar with both the search icon and the company switch beside the name (an admin at two companies):
   the switch keeps the destination and drops its "Switch to" verb (the swap icon and the title say it), the module
   tag hides, and the second line clips instead of sliding under the icon, so the company name stays whole at
   360 to 430 px. The server marks the block has-search / has-switch (src/pages/shell.mjs companyBlock). */
@media (max-width: 759px) {
  .company-block.has-search .company-name > span { overflow: hidden; white-space: nowrap; }
  .company-block.has-search.has-switch a.company-switch .switch-verb { display: none; }
  .company-block.has-search.has-switch .company-switch { padding-right: 10px; }
  .company-block.has-search.has-switch .module-tag { display: none; }
}
@media (max-width: 374px) {
  .company-block.has-search.has-switch { gap: 8px; }
  .company-block.has-search.has-switch .company-name strong { font-size: 15px; }
}

/* archived locations stay in the chip row, greyed and labeled (read only, never written: 16.4) */
.filter-chips .loc-chip.is-archived { color: var(--text-3); background: transparent; border: 1px dashed var(--line-strong); }
.filter-chips .loc-chip.is-archived .archived-tag { font-size: 11px; line-height: 15px; border: 1px solid var(--line-strong); border-radius: 5px; padding: 0 4px; color: var(--text-3); }
.filter-chips .loc-chip.is-archived.is-active { background: var(--text-3); color: #fff; border-style: solid; border-color: var(--text-3); }
.filter-chips .loc-chip.is-archived.is-active .archived-tag, .filter-chips .loc-chip.is-archived.is-active .count { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.5); }

/* Settings: the email line wraps anywhere; the danger-text button keeps its 40 px */
.card-facts .is-email { overflow-wrap: anywhere; }
.btn.is-danger-text .icon { color: var(--danger); }

/* 360-wide phones: the lead form's buttons stack, the tiles keep two columns */
@media (max-width: 374px) {
  .lead-form .form-actions .btn { flex: 1 1 auto; justify-content: center; }
  .stage-tile { padding: 10px 12px; }
  .stage-tile .st-value { font-size: 24px; }
}

/* ====================================================================================================
   M6 additions: the Sync admin page (#/admin/sync: source cards with the mode control, the Stop all sheet
   writes button, the restart form that asks for the trip reason, the journal with its filters, the review
   queue, the conflicts, the runs and snapshots) and the heartbeat banner the shell shows on every page
   when the runner on the Jarvis Mini has not checked in for fifteen minutes. Tokens only; no brand value.
   ==================================================================================================== */

/* the heartbeat banner: a grid row above the company block on a phone and the compact widths, above the
   three columns on desktop; the shell gets has-sync-banner while it shows (public/assets/app.js initSyncBanner) */
.sync-banner { display: none; grid-area: banner; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; padding: 8px 16px; background: var(--danger); color: #fff; font-size: 14px; line-height: 1.35; }
.sync-banner[hidden] { display: none; }
.sync-banner .icon { flex: none; font-size: 18px; }
.sync-banner .sync-banner-text { flex: 1 1 240px; min-width: 0; }
.sync-banner .sync-banner-text b { font-weight: 600; }
.sync-banner .sync-banner-link { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; font-size: 13px; border: 1px solid rgba(255, 255, 255, .5); }
.sync-banner .sync-banner-link:hover { background: rgba(255, 255, 255, .28); }
.shell.has-sync-banner .sync-banner:not([hidden]) { display: flex; }
.shell.has-sync-banner { grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "banner" "brand" "main" "rail"; }
@media (min-width: 760px) {
  .shell.has-sync-banner { grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "banner banner banner" "brand brand brand" "rail list detail" "me list detail"; }
}
@media (min-width: 1120px) {
  .shell.has-sync-banner { grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "banner banner banner" "brand list detail" "rail list detail" "me list detail"; }
}

/* the list pane: section chips under the title (Overview, Journal, Review, Conflicts, Runs, Snapshots) */
.sync-head .pane-title-row { align-items: flex-start; margin-bottom: 10px; }
.sync-head .pane-tools .btn { min-height: 36px; }
.sync-head .section-chips { padding-bottom: 12px; }
.sync-head .section-chips .loc-chip .count { margin-left: 2px; }
.sync-head .section-chips .loc-chip.is-active .count { color: rgba(255, 255, 255, .8); }
.sync-head .section-chips .loc-chip .count.is-danger { color: var(--danger); font-weight: 600; }

/* the big stop: one full-width red button at the top of the overview; when writes are already stopped the
   same place reads the state and offers Restart per source */
.sync-stop-block { padding: 4px 16px 12px; }
.btn.is-stop { width: 100%; justify-content: center; min-height: 52px; font-size: 16px; font-weight: 600; background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.is-stop:hover { filter: brightness(.92); background: var(--danger); }
.btn.is-stop .icon { font-size: 20px; }
.sync-stopped { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--danger-tint); color: var(--danger); font-size: 14px; line-height: 1.45; }
.sync-stopped .icon { flex: none; font-size: 18px; margin-top: 1px; }
.sync-stopped b { font-weight: 600; }
.sync-stopped .sync-stopped-reason { display: block; color: var(--text); font-weight: 500; margin-top: 2px; overflow-wrap: anywhere; }
.sync-note { padding: 0 16px 10px; font-size: 13px; color: var(--text-3); line-height: 1.45; }

/* heartbeat and trip rows reuse the dashboard rows; stale and open trips read red */
.dash-row.is-stale .dash-title, .dash-row.is-stale .dash-right { color: var(--danger); font-weight: 600; }
.dash-row .sync-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none; }
.dash-row .sync-dot.is-stale { background: var(--danger); }
.dash-row .sync-dot.is-off { background: var(--line-strong); }

/* a source card: label, chips, meta line, the mode control and Restart */
.sync-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.sync-card + .sync-card { border-top: 1px solid var(--line); }
.sync-card .sync-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.sync-card .sync-card-title { font-size: 16px; font-weight: 600; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.sync-card .sync-card-title small { display: block; font-size: 13px; font-weight: 400; color: var(--text-3); }
.sync-card .chips-inline { align-items: center; }
.sync-card .sync-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.sync-card .sync-meta b { color: var(--text); font-weight: 600; }
.sync-card .sync-meta .is-danger { color: var(--danger); font-weight: 600; }
.sync-card .sync-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sync-card .sync-card-actions .btn { min-height: 36px; }
.sync-card a.link { color: var(--accent-dark); font-weight: 500; font-size: 13px; }
.sync-card a.link:hover { text-decoration: underline; }
.sync-modes .segment { min-height: 38px; cursor: pointer; }
.sync-modes .segment:disabled { color: var(--text-3); cursor: not-allowed; opacity: .55; }
.sync-modes .segment.is-active:disabled { opacity: 1; color: var(--text); }
.sync-modes .segment[aria-busy="true"] { opacity: .6; }
.sync-modes .segment.is-live.is-active { box-shadow: 0 0 0 2px var(--ok); }
@media (max-width: 400px) { .sync-modes .segment { padding: 6px 8px; font-size: 12px; } }

/* journal filters: four controls that wrap, then the rows */
.sync-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 16px 10px; }
.sync-filters .field-input { min-height: 40px; font-size: 13px; background: var(--panel-soft); flex: 1 1 120px; min-width: 0; }
.sync-filters input.field-input { flex: 2 1 160px; }
.sync-filters .btn { min-height: 40px; flex: none; }
.pane-list .sync-filters { position: sticky; top: var(--pin-top, 0px); background: var(--panel); z-index: 1; }

/* a journal row: the column letter as a mark, the before and after values, the status chip at the right */
.journal-row .jr-col { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--neutral-tint); color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; font-weight: 700; }
.journal-row .jr-col.is-append { font-size: 11px; letter-spacing: .02em; }
.journal-row .jr-change { display: block; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.journal-row .jr-change .jr-before { color: var(--text-3); text-decoration: line-through; }
.journal-row .jr-change .jr-arrow { color: var(--text-3); margin: 0 4px; }
.journal-row .jr-change .jr-after { color: var(--text); font-weight: 600; }
.journal-row .jr-change .jr-empty { color: var(--text-3); font-style: italic; font-weight: 400; }
.journal-row .dash-right .chip { min-height: 24px; }
.chip.is-status-planned { background: var(--pending-tint); color: var(--pending); }
.chip.is-status-dry_run { background: var(--review-tint); color: var(--review); }
.chip.is-status-applied, .chip.is-status-verified { background: var(--ok-tint); color: var(--ok); }
.chip.is-status-failed { background: var(--danger-tint); color: var(--danger); }
.chip.is-status-skipped, .chip.is-status-reverted { background: var(--neutral-tint); color: var(--neutral); }

/* the conflict rows and the both-versions panel */
.conflict-versions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@container (min-width: 520px) { .conflict-versions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.version-box { border-radius: 12px; padding: 12px 14px; background: var(--panel-soft); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.version-box.is-kept { background: var(--ok-tint); }
.version-box .vb-label { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.version-box.is-kept .vb-label { color: var(--ok); }
.version-box .vb-value { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.version-box .vb-value.is-empty { color: var(--text-3); font-style: italic; font-weight: 400; }
.version-box .vb-meta { font-size: 13px; color: var(--text-2); }

/* the review item: the row as the sheet has it, then the candidates and the three decisions */
.review-row .chip { flex: none; }
.candidate-list > li + li { border-top: 1px solid var(--line); }
.candidate-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.candidate-row .candidate-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.candidate-row .candidate-name { font-size: 15px; font-weight: 600; }
.candidate-row .candidate-sub { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.candidate-row .btn { flex: none; min-height: 36px; }
.decision-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* the restart form: the trip reason shown in a box, typed back below it */
.reason-echo { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; padding: 10px 12px; border-radius: 10px; background: var(--review-tint); color: var(--text); border: 1px solid var(--review); overflow-wrap: anywhere; user-select: all; }
.popover-form.is-stop textarea.field-input { min-height: 72px; }
.popover-form .btn.is-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.popover-form .btn.is-danger:hover { filter: brightness(.92); background: var(--danger); }

/* the detail pane's facts (journal row, run, snapshot, source) keep the admin key/value list; cell values wrap */
.sync-facts dd { font-family: var(--font); font-size: 14px; }
.sync-facts dd code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--panel-soft); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.sync-facts dd .chip { vertical-align: middle; }
.tab-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tab-list .chip small { font-weight: 400; color: var(--text-3); margin-left: 4px; }
.allow-list { display: flex; flex-wrap: wrap; gap: 6px; }
.allow-list .col-mark { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 8px 2px 6px; border-radius: 8px; background: var(--ok-tint); color: var(--ok); font-size: 13px; }
.allow-list .col-mark b { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; }
.allow-list .col-mark.is-empty-only { background: var(--pending-tint); color: var(--pending); }
.allow-list .col-mark.is-never { background: var(--danger-tint); color: var(--danger); text-decoration: line-through; }
.mode-help { display: flex; flex-direction: column; gap: 8px; }
.mode-help li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.mode-help li .chip { flex: none; min-width: 84px; justify-content: center; }
.mode-help li b { color: var(--text); font-weight: 600; }
.trip-help li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; font-size: 14px; line-height: 1.45; }
.trip-help li + li { border-top: 1px solid var(--line); }
.trip-help li b { font-weight: 600; }
.trip-help li span { color: var(--text-2); font-size: 13px; }

/* phone: the sync lists are the screen; the detail opens from a row with "Back to Sync" */
@media (max-width: 759px) {
  .shell[data-ctx="sync"][data-pane="list"] .pane-detail { display: none; }
  .sync-card .sync-card-actions .btn { min-height: 40px; }
  .btn.is-stop { min-height: 56px; }
  .decision-row .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
}
/* 360-wide phones: the journal filters stack two per line and the stop button keeps one line */
@media (max-width: 374px) { .sync-filters .field-input { flex-basis: 100%; } .btn.is-stop { font-size: 15px; } }

/* ====================================================================================================
   M8 additions: the messages hub (#/messages). Direction B's conversation list and thread (verbatim above,
   "messages" block) plus what the live hub needs: the New button in the list head, grouped messages from one
   sender, applicant chips inline in a message (a name only when the viewer may see that applicant, else the
   plain "an applicant" chip), the "Earlier messages" row, the composer's mention button and Mentions line,
   the view-only composer, the "New messages below" pill, and the two pickers. Tokens only; no brand value.
   ==================================================================================================== */

/* list head: the subtitle and the New button sit together on the right */
.pane-header.is-messages .pane-title-row { align-items: center; margin-bottom: 12px; }
.pane-head-right { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; }
.new-dm-btn { min-height: 36px; padding: 6px 12px 6px 10px; gap: 6px; }
.new-dm-btn .icon { font-size: 16px; }
.conv-list { padding: 0; }
.conversation-item { position: relative; }
.conversation-item.is-selected::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.conversation-item .conv-preview b { font-weight: 600; }
.list-empty.is-quiet { padding-top: 6px; color: var(--text-3); }
.link-btn { color: var(--accent-dark); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; min-height: 28px; }

/* the thread fills the detail pane: head pinned, rows, composer pinned at the foot */
.thread-head .thread-who { min-width: 0; }
.thread-head .thread-title { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-head .back-link.is-icon { padding: 6px; min-width: 40px; justify-content: center; }
.thread-body { display: flex; flex-direction: column; justify-content: flex-end; }
.thread-older { display: flex; justify-content: center; padding: 6px 0 2px; }
.thread-start { padding: 24px 0 8px; text-align: center; color: var(--text-3); font-size: 14px; }
.message .msg-main { min-width: 0; }
.message .msg-text { white-space: pre-wrap; }
.message.is-continued { padding-top: 0; margin-top: -2px; }
.message.is-continued > .avatar { visibility: hidden; height: 0; } /* the sender's avatar only: a chip's avatar inside the text stays */
/* an applicant chip inside a message's text: inline with the words, never a new line of its own */
.msg-text .applicant-chip.is-inline, .composer-mentions .applicant-chip.is-inline {
  display: inline-flex; margin: 2px 4px 2px 0; vertical-align: middle; min-height: 30px; padding: 3px 8px 3px 5px; border-radius: 9px; font-size: 13px; line-height: 1.2;
}
.applicant-chip.is-inline .avatar { width: 22px; height: 22px; font-size: 11px; }
.applicant-chip.is-inline .icon { font-size: 14px; }
.applicant-chip.is-hidden { border-style: dashed; color: var(--text-2); background: var(--panel-soft); cursor: default; gap: 6px; padding-left: 8px; }
.applicant-chip.is-hidden:hover { border-color: var(--line-strong); }
.applicant-chip.is-hidden .icon { color: var(--text-3); }
.applicant-chip.is-small { min-height: 26px; }

/* the composer: the mention button beside Send, the Mentions line under the box, a view-only note */
.composer-tool { flex: none; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); font-size: 18px; }
.composer-tool:hover { background: var(--panel-soft); color: var(--text); }
.composer-input:disabled { color: var(--text-3); }
.composer-send:disabled { opacity: .55; cursor: default; }
.composer-mentions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin-top: 6px; max-width: 880px; min-height: 0; }
.composer-mentions:empty { display: none; }
.composer-mentions .mentions-label { font-size: 12px; color: var(--text-3); margin-right: 4px; }
.composer.is-view { border-top: 1px solid var(--line); }
.composer.is-view .composer-hint { margin: 0; color: var(--text-2); }
.thread-jump { position: sticky; bottom: 92px; align-self: center; z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--chrome); color: var(--on-chrome); font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(15, 17, 23, .25); }
.thread-jump .icon { font-size: 16px; }

/* the pickers (a popover; a sheet on a phone): a search box and a short list. .composer-picker mentions an applicant,
   .dm-picker starts a direct message; .msg-chip is the applicant chip inside a message */
.popover.is-picker, .composer-picker, .dm-picker { min-width: 300px; padding: 8px; }
.msg-chip { max-width: 100%; }
.msg-chip .chip-status { white-space: nowrap; }
.popover.is-picker .picker-input { min-height: 44px; font-size: 15px; margin: 0 0 6px; }
.picker-list { display: flex; flex-direction: column; gap: 2px; max-height: min(44vh, 320px); overflow-y: auto; }
.picker-option .picker-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.picker-option .picker-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-option .picker-sub { font-size: 12px; color: var(--text-3); }
.picker-option .icon { color: var(--text-3); margin-left: auto; }

/* desktop: the thread gets room; the list keeps its width */
@media (min-width: 760px) {
  .shell[data-ctx="messages"] .pane-detail { display: flex; flex-direction: column; }
  .shell[data-ctx="messages"] .pane-detail > .thread { flex: 1 0 auto; }
  .thread-empty { padding: 48px 32px; }
}
/* phone: the list is the Messages screen, the thread opens from a row with the back arrow; the composer sits over
   the pane's foot, above the bottom bar; the message column uses the full width */
@media (max-width: 759px) {
  .shell[data-ctx="messages"][data-pane="list"] .pane-detail { display: none; }
  .thread-head { padding: 8px 12px; }
  .thread-body { padding: 8px 12px 12px; }
  .message .msg-text { max-width: none; }
  .composer { padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .composer-hint { display: none; }
  .composer-mentions { margin-top: 4px; }
  .thread-jump { bottom: 84px; }
  .popover.is-picker { min-width: 0; }
}
@media (max-width: 374px) { .pane-header.is-messages .pane-sub { display: none; } }

/* ====================================================================================================
   M9 additions: the Export admin page (#/admin/export: the job list with status chips, the job detail with
   its facts, the Download progress bar, the part list with checksums, the start and delivered popover
   forms). Tokens only; no brand value. The rows reuse .dash-row; the facts reuse .kv.sync-facts.
   ==================================================================================================== */
.export-head .pane-title-row { align-items: flex-start; margin-bottom: 6px; }
.export-head .pane-tools .btn { min-height: 36px; }
.export-head .pane-tools .btn.is-primary .icon { font-size: 16px; }
.export-note { padding: 4px 16px 10px; font-size: 13px; color: var(--text-3); line-height: 1.45; }
.export-jobs .export-row .dash-right .chip { margin-bottom: 2px; }
.export-steps { display: grid; gap: 10px; padding-left: 22px; font-size: 15px; color: var(--text-2); line-height: 1.5; list-style: decimal; }
.export-steps li b { color: var(--text); font-weight: 600; }
.export-facts dd { overflow-wrap: anywhere; }
.export-storage-note { padding: 0 2px; }
/* the part list: name, rows, checksum (a monospace prefix; the title holds the whole hash) */
.export-parts { display: flex; flex-direction: column; }
.export-part { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; min-height: 40px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.export-part:first-child { border-top: 0; }
.export-part .ep-name { font-weight: 500; overflow-wrap: anywhere; }
.export-part .ep-rows { color: var(--text-2); font-variant-numeric: tabular-nums; }
.export-part .ep-sha { color: var(--text-3); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; white-space: nowrap; }
@media (max-width: 400px) { .export-part { grid-template-columns: minmax(0, 1fr) auto; } .export-part .ep-sha { grid-column: 1 / -1; } }
/* the download progress: a thin bar and one line of words; green when done, red on an error */
.export-progress { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--panel-soft); font-size: 14px; color: var(--text-2); line-height: 1.45; }
.export-progress .export-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.export-progress .export-bar-fill { display: block; height: 100%; background: var(--accent-fill); border-radius: 999px; transition: width .25s ease; }
.export-progress.is-done .export-bar-fill { background: var(--ok); }
.export-progress.is-error { background: var(--danger-tint); color: var(--danger); }
.export-progress.is-error .export-bar-fill { background: var(--danger); }
.export-progress .export-progress-text { overflow-wrap: anywhere; }
/* the start form's checkbox note */
.check-row .check-note { display: block; font-size: 13px; color: var(--text-3); margin-top: 2px; }
.popover-form .check-row { padding: 4px 0; }

/* M7: the alerts page's delivery chips and Send button, the Send dialog, the provider mail panel (admins) */
.alert-li .alert-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 16px 10px 36px; }
.popover-form.is-send .reason-echo { margin: 6px 0 8px; user-select: text; }
.popover-note.is-danger { color: var(--danger); }
.provider-panel .panel-sub { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.provider-panel .panel-sub .count { font-size: 12px; font-weight: 500; color: var(--text-3); }
.provider-list .provider-event { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.provider-event .provider-main { flex: 1 1 auto; min-width: 0; }
.provider-event .provider-subject { display: block; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.provider-event .flat-right { flex: none; }

/* People I've contacted (Mike's feedback, 10/08/2026): the Everyone / People I've contacted switch above the location chips */
.list-pin .applicants-view { margin: 0 0 8px; }