/* TeamPulse direction B "Split". One type system, two companies, three panes.
   Tokens map ../shared/palette.css to roles; see PLAN.md. */

@import url('../shared/palette.css');

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

  /* JCruz Express roles (default) */
  --chrome: var(--jc-charcoal);
  --chrome-raised: var(--jc-charcoal-3);
  --chrome-line: var(--jc-charcoal-line);
  --on-chrome: #ffffff;
  --on-chrome-muted: #a9adba;
  --chrome-accent: var(--jc-red);
  --chrome-accent-text: #ffffff;
  --chrome-badge: var(--jc-red-deep);      /* badge fill under 12 px white numerals: 5:1 */

  --surface: #eef0f4;
  --panel: #ffffff;
  --panel-soft: var(--jc-band);
  --panel-strip: #e9e8e4;
  --line: #e3e5ea;
  --line-strong: #cfd2da;

  --text: var(--jc-charcoal);
  --text-2: var(--jc-body);
  --text-3: #6c707c;

  --accent: var(--jc-red);                 /* marks, dots, large numerals, tints */
  --accent-fill: var(--jc-red-deep);       /* filled controls carrying white text (button labels, badges): 5:1 with white */
  --accent-fill-hover: var(--jc-red-dark); /* pressed: deeper, never lighter, so it cannot drift to coral */
  --accent-deep: var(--jc-red-deep);
  --accent-dark: var(--jc-red-dark);
  --accent-tint: var(--jc-red-tint);
  --on-accent: var(--jc-on-red);

  --danger: var(--jc-red-dark);
  --danger-tint: var(--jc-red-tint);
  --ok: #1f7a4d;
  --ok-tint: #e3f3ea;
  --pending: #3b5b9a;
  --pending-tint: #e6ecf7;
  --touch: #6b7ea6;                        /* the in-touch pipeline group (Contacted … Phone Screen Done): a lighter member of the pending family, neutral, never "needs a human" */
  --review: #6a5a00;                       /* only "needs review": gold (hue 49), kept out of the orange band next to JCruz red */
  --review-tint: #faf0cf;
  --neutral: #5f636e;
  --neutral-tint: #eceef2;

  --mark-bg: rgba(255, 255, 255, .09);     /* the company logo slot beside the wordmark: a quiet tinted tile on the chrome, initials in the company color */
  --mark-fg: var(--jc-red);

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

html[data-brand="keptstaffed"] {
  --chrome: var(--ks-olive);
  --chrome-raised: var(--ks-olive-card-hi);
  --chrome-line: var(--ks-olive-border);
  --on-chrome: var(--ks-on-olive);
  --on-chrome-muted: var(--ks-on-olive-muted);
  --chrome-accent: var(--ks-teal-on-olive);
  --chrome-accent-text: var(--ks-ink);
  --chrome-badge: var(--ks-teal-on-olive);

  --surface: var(--ks-cream);
  --panel: #ffffff;
  --panel-soft: #f4f2e8;
  --panel-strip: #e8e5d6;
  --line: var(--ks-border);
  --line-strong: #cfc9b0;

  --text: var(--ks-ink);
  --text-2: var(--ks-body);
  --text-3: #6e735f;

  --accent: var(--ks-teal);
  --accent-fill: var(--ks-teal);           /* 5.05:1 with white */
  --accent-fill-hover: var(--ks-teal-hover);
  --accent-deep: var(--ks-teal-hover);
  --accent-dark: var(--ks-teal-hover);
  --accent-tint: #dff0ed;
  --on-accent: #ffffff;

  --danger: var(--ks-error);
  --danger-tint: #f7e3df;
  --ok: #2f6b3a;
  --ok-tint: #e4efe3;
  --pending: #3f6b8a;
  --pending-tint: #e3edf3;
  --touch: #6a85a0;
  --review: #875a00;                       /* warm amber (hue 40), clearly apart from the olive: 5.5:1 on cream, 4.8:1 on the card strip, 5:1 on its tint */
  --review-tint: #f8e9c8;
  --neutral: #6e735f;
  --neutral-tint: #eeece2;
  --mark-bg: rgba(255, 255, 255, .09);
  --mark-fg: var(--ks-teal-on-olive);
  --bar: #535e3b;
}

/* ---------- 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; } }

/* ---------- 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: 38px; }
/* 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; }
}
.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-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); }
.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 */
/* 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; }
html[data-brand="keptstaffed"] .toast .toast-action { color: var(--ks-teal-on-olive); }
.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; }