/* Southport Signal — wave 4b (record lane).
 *
 * Company record, Pipeline, All accounts, Notes and Team. Everything here
 * lives inside CONVENTIONS §9: navy/blue/sky accents, 1px hairlines, no
 * shadows on panels, 6px radius, 34px controls, Rajdhani numerals, dot +
 * sentence statuses. This file only adds `.w4*` classes and the shared band
 * chip; app.css is not overridden except where a wave-4 layout replaces one.
 *
 * The shell's top bar is 54px and sticky, so every sticky offset here is
 * measured from it. --w4sumh is written by company.js once the summary header
 * has laid out.
 */

/* ------------------------------------------------------- band (shared) --- */
/* Dot + word. Never a number — the client rejected bare scores. Imported by
 * both wave-4 lanes through ui.js's bandDot(). */

.band{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  white-space:nowrap;font-family:var(--ui);letter-spacing:-.004em}
.band i{width:7px;height:7px;border-radius:50%;flex:none}
.band.unlikely{color:var(--faint)}

/* ================================================== COMPANY RECORD =======
 * WAVE6.md §4.7. Wave 4's two-column scroll (a sticky header, a 400px rail of
 * six stacked panes, one timeline) measured 2,611px on the real book. What
 * replaces it: a ~64px sticky vitals header, one facts grid, Reasons and Who
 * to call side by side, then tabs. The `w4*` names are kept wherever the part
 * itself survived — the timeline entries, the expanders, the Why popover and
 * the write-path forms are unchanged components in a new frame.
 */

/* ---- vitals: everything you need before you dial, on one line ----------- */

.w4sum{position:sticky;top:54px;z-index:20;background:var(--card);border:1px solid var(--line);
  border-radius:6px}
.w6vrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:8px 14px;min-height:64px}

/* `.cobar .back svg` (app.css) was the only rule sizing this icon, and the
   cobar is gone — an unsized inline SVG stretches to fill its flex line. */
.w6back{flex:0 0 auto;cursor:pointer;max-width:170px}
.w6back svg{width:12px;height:12px;flex:none}
.w6back span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.w6vid{flex:1 1 150px;min-width:0}
.w6vid h2{font-family:var(--raj);font-size:18px;line-height:1.15;color:var(--ink);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w4facts{font-size:11.5px;color:var(--mute);margin-top:2px;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w4alias{color:var(--faint)}
/* POLISH (item 12): "Service knows them" used to be its own chip (`.dept
 * service`) on a bare 24px `.w6marks` line under this header — a whole row
 * spent on four words when it was the only mark a company had. It rides in
 * the meta line now, so it costs nothing: green (matching `.dept.service`'s
 * own colour) is enough to keep it findable without a pill around it. */
.w4svc{color:var(--green);font-weight:600}

.w6vstate{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.w4say{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);min-width:0;max-width:170px}
.w4say i{width:7px;height:7px;border-radius:50%;flex:none}
.w4say b{font-weight:600;white-space:nowrap}
#stagesel{background:var(--card);border:1px solid var(--line);color:var(--ink2);border-radius:5px;
  padding:2px 4px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;max-width:150px}
#stagesel:focus{outline:2px solid var(--blue);outline-offset:-1px}

.w4band{display:flex;align-items:center;gap:8px;position:relative}
.w4why{height:22px;padding:0 8px;border:1px solid var(--line);background:var(--surf2);
  border-radius:5px;font:inherit;font-size:11px;font-weight:600;color:var(--mute);cursor:pointer}
.w4why:hover{color:var(--blue);border-color:var(--rule2);background:var(--card)}

/* A floating layer, so DESIGN §7 allows the one soft ambient shadow. */
.w4pop{position:absolute;top:calc(100% + 8px);left:0;right:auto;width:340px;max-width:78vw;z-index:40;
  background:var(--card);border:1px solid var(--rule2);border-radius:6px;padding:4px 0;box-shadow:var(--shadow-float)}
.w4poph{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  padding:9px 13px 7px}
.w4basis{display:flex;gap:12px;align-items:baseline;justify-content:space-between;
  padding:7px 13px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--ink2);line-height:1.45}
.w4basis b{font-family:var(--raj);font-size:13px;color:var(--blue);font-variant-numeric:tabular-nums;flex:none}
.w4basis .w4bl{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.w4popf{padding:8px 13px 10px;border-top:1px solid var(--line2);font-size:11px;color:var(--faint);line-height:1.45}

.w4own{flex:none;position:relative;font-size:11.5px;color:var(--mute);max-width:165px}
.w4own .own{display:flex;align-items:center;gap:6px;min-width:0}
.w4own .ol{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92px}
.w4own .ini{width:19px;height:19px;border-radius:50%;color:#fff;font-size:9px;font-weight:700;
  display:grid;place-items:center;font-family:var(--ui);flex:none}
.w4own select{background:var(--card);border:1px solid var(--line);color:var(--ink2);border-radius:5px;
  padding:3px 5px;font:inherit;font-size:11.5px;cursor:pointer;max-width:118px}
.w4own .btn.claim{height:28px;font-size:12px}

/* The phone: the biggest thing on the page (§9), and the one control a rep
   reaches for first. Every other number on the record is quieter than this. */
.w4call{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:0}
.w4phone{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:6px;
  background:var(--blue);color:#fff;font-family:var(--raj);font-size:21px;font-weight:600;
  text-decoration:none;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.w4phone:hover{background:var(--bluedk)}
.w4phone svg{width:15px;height:15px;flex:none}
.w4phone.off{background:var(--surf2);color:var(--faint);border:1px solid var(--line);font-size:13px}
.w4who{font-size:11px;color:var(--mute);max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.w6vacts{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.w4ol{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.w6vacts .k4acts{display:flex;align-items:center;gap:5px}
.w6vacts .k4b{height:30px;padding:0 8px;border:1px solid var(--line);background:var(--card);
  border-radius:5px;font:inherit;font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer;
  white-space:nowrap}
.w6vacts .k4b:hover{border-color:var(--blue);color:var(--blue);background:var(--bluetint)}
.w6vacts .k4b:disabled{opacity:.5;cursor:default}
.w6vacts .k4b.done{background:#EFF6F1;border-color:#BFDBC8;color:var(--green)}

/* The hand-out "why" prompt floats under the owner control instead of growing
   the header by a row (§14.1.1's flow is unchanged — only where it appears). */
.w5assignmsg{position:absolute;top:calc(100% + 6px);right:0;z-index:45;display:flex;align-items:center;
  gap:6px;flex-wrap:wrap;width:330px;max-width:80vw;padding:9px 10px;background:var(--card);
  border:1px solid var(--rule2);border-radius:6px;box-shadow:var(--shadow-float);margin:0}
.w5assignmsg[hidden]{display:none}
.w5assignmsg input{height:30px;min-width:150px;flex:1 1 150px;border:1px solid var(--line);
  border-radius:5px;background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;padding:0 9px}
.w5assignmsg input:focus{outline:2px solid var(--blue);outline-offset:-1px}

/* ---- the body ----------------------------------------------------------- */

.w4rec{max-width:1440px}
.w6marks{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:9px;min-height:0}
.w6pager{margin-left:auto}

.w6two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;
  margin-bottom:10px}
.w6bandpane{margin:0}
.w6bandpane .pb{padding:9px 12px}
/* A record with nothing to say should not spend 130px saying it. */
.w6bandpane .emptyst{padding:8px 0 6px}
.w6bandpane .emptyst b{font-size:13.5px;margin-bottom:2px}
.w6bandpane .emptyst span{font-size:11.5px}

/* ---- reasons ------------------------------------------------------------ */

.w6rr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 9px;align-items:baseline;
  padding:6px 0;border-top:1px solid var(--line2)}
.w6rr:first-child{padding-top:0;border-top:0}
.w6rr .w4rlab{margin-bottom:0;white-space:nowrap}
.w6rt{font-size:12.5px;color:var(--ink);line-height:1.35;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.w6rw{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.w4rlab{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--amber)}
.w4more2{padding-top:8px;margin-top:2px;border-top:1px solid var(--line2);font-size:11.5px;color:var(--faint)}

/* ---- who to call --------------------------------------------------------- */

.w6bandpane .pl{padding:6px 0;gap:10px;align-items:center}
.w6bandpane .pl .pi b{font-size:13.5px;line-height:1.2}
.w6bandpane .pl .pi span{font-size:11px}
.w6bandpane .pl .pi2{font-size:10.5px;margin-top:1px}
.w6bandpane .pl a.tel.pn b,.w6ppl .pl a.tel.pn b{font-size:18px}
.w6bandpane .pl .pn.nophone b,.w6ppl .pl .pn.nophone b{font-size:15px}
.w6golink{border:0;background:none;padding:8px 0 0;margin-top:2px;border-top:1px solid var(--line2);
  width:100%;text-align:left;font:inherit;font-size:11.5px;font-weight:600;color:var(--blue);cursor:pointer}
.w6golink:hover{text-decoration:underline}

/* ---- tabs: sub-blocks inside a panel ------------------------------------- */

.w6sub{border:1px solid var(--line);border-radius:6px;background:var(--card);padding:11px 13px;
  margin-bottom:10px}
.w6sub:last-child{margin-bottom:0}
.w6sub h4{font-family:var(--raj);font-size:14px;font-weight:700;color:var(--ink);margin:0 0 8px;
  display:flex;align-items:baseline;gap:8px}
.w6subn{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--faint)}
.w6eqgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.w6eqgrid .eq{min-width:0}
.w6ppl{border:1px solid var(--line);border-radius:6px;background:var(--card);padding:4px 13px 12px}

/* ---- expanders ---------------------------------------------------------- */

.w4exp{display:block;width:100%;height:30px;margin-top:10px;border:1px solid var(--line);
  background:var(--surf2);border-radius:5px;font:inherit;font-size:12px;font-weight:600;
  color:var(--ink2);cursor:pointer;text-align:center}
.w4exp:hover{border-color:var(--rule2);color:var(--blue);background:var(--card)}
.w4expbody{margin-top:9px;border-top:1px solid var(--line2);padding-top:9px;overflow-x:auto}

/* ---- summary strips (fleet, purchases) ---------------------------------- */

.w4strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.w4strip.w6s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.w4strip>div{min-width:0}
.w4strip b{display:block;font-family:var(--raj);font-size:20px;font-weight:700;color:var(--ink);
  line-height:1.05;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w4strip b.sm3{font-size:13px;font-weight:600;padding-top:5px;color:var(--ink2)}
.w4strip span{display:block;font-size:10px;color:var(--mute);margin-top:3px}

/* ---- federal amber line -------------------------------------------------- */

.w4warn{margin-top:10px;padding:9px 11px;border:1px solid #E7D4AE;border-left:3px solid var(--amber);
  background:#FCF8F0;border-radius:5px}
.w4warn b{display:block;font-size:12.5px;color:#7A5312;line-height:1.4}
.w4warn span{display:block;font-size:11.5px;color:var(--ink2);margin-top:4px;line-height:1.45}
html[data-theme="dark"] .w4warn{background:#2C2312;border-color:#463920}
html[data-theme="dark"] .w4warn b{color:#E7C588}
html[data-theme="road"] .w4warn{background:#F8EBD3;border-color:#DCC08A}

/* ---- timeline ------------------------------------------------------------ */

.w6tlbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.w6chips{display:flex;gap:5px;flex-wrap:wrap}
.w6chip{height:26px;padding:0 11px;border:1px solid var(--line);background:var(--card);border-radius:13px;
  font:inherit;font-size:11.5px;font-weight:600;color:var(--mute);cursor:pointer;white-space:nowrap}
.w6chip:hover{border-color:var(--rule2);color:var(--ink2)}
.w6chip.on{background:var(--bluetint);border-color:var(--blue);color:var(--blue)}
.w6tlbar .w5tlsearch{flex:1 1 180px;max-width:270px;margin:0 0 0 auto}

/* One line until it is touched. The kinds, the flags and the dictation message
   unfold together on focus, so the record opens on history, not on an empty box. */
.w6comp{padding:8px 9px;margin-bottom:10px}
.w6crow{display:flex;align-items:flex-start;gap:8px}
.w6comp textarea{flex:1 1 auto;width:auto;min-width:0;height:34px;min-height:34px;resize:none;
  padding:8px 10px;font-size:13px;line-height:1.3}
.w6comp.open textarea{height:76px;min-height:76px;resize:vertical}
.w6comp .mic,.w6comp #saveNote{flex:none;height:34px}
.w6cmore{display:none;margin-top:8px}
.w6comp.open .w6cmore{display:block}
.w6cmore .kinds{margin-bottom:7px}
.w6cmore .flagrow{margin-bottom:2px}
.w6cmore .hint{display:block;margin-top:6px;font-size:11.5px;color:var(--mute)}

.w4tl{margin-top:2px}
/* The date lives in a left gutter, not on a heading row of its own: a 313-note
   record averages barely one entry per day, so a 29px heading above each entry
   was 319px of chrome saying what 60px says beside it. */
.w4dayg{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;
  padding:8px 0;border-top:1px solid var(--line2)}
.w4tl>.w4dayg:first-child{border-top:0;padding-top:0}
.w4when{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);font-variant-numeric:tabular-nums;line-height:1.35;padding-top:2px}
.w4evs{min-width:0}

.w4ev{display:grid;grid-template-columns:9px minmax(0,1fr);gap:10px;padding:0 0 9px}
.w4evs>.w4ev:last-child{padding-bottom:0}
.w4dot{width:7px;height:7px;border-radius:50%;margin-top:5px}
.w4evb{min-width:0}

.w4note .nh{display:flex;align-items:center;gap:7px;flex-wrap:wrap;line-height:1;margin-bottom:4px}
.w4note .nk{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.w4note .nw{font-size:11px;color:var(--mute)}
.w4note .nt{font-size:12.5px;color:var(--ink2);line-height:1.35;white-space:pre-line;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.w4note.open .nt{-webkit-line-clamp:unset;display:block;overflow:visible}
.w4nmore{margin-top:3px;border:0;background:none;padding:0;font:inherit;font-size:11.5px;
  font-weight:600;color:var(--blue);cursor:pointer}
.w4nmore:hover{text-decoration:underline}
.w4ev.fresh{background:var(--bluetint)}

.w4line{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2);line-height:1.4}
.w4line .w4rlab{margin-bottom:0;flex:none}
.w4buyev .w4rlab{color:var(--green)}
.w4inspev .w4rlab{color:var(--teal)}

#w4tlmore{margin-top:12px}

/* ================================================== PIPELINE ============= */
/* WAVE6.md §4.4 — the board is viewport-bound and each column scrolls on its
 * own, so "Gone quiet" running 1,792 cards deep (real data) no longer sets the
 * PAGE height. Nothing here touches `.board`/`.col` themselves (app.css Part
 * 1) — every rule is scoped to `.w4board`/`.w4col`, the page's own classes. */

/* POLISH (item 7): a `.board` bare column is a CSS Grid `1fr` track (app.css
 * Part 1), so all four columns always split the width evenly no matter how
 * many cards any one of them holds — an empty "Talking pricing" column got the
 * same quarter of the page as "Gone quiet" with 1,792 cards in it. `.w4board`
 * switches the display model to flex, which per-column FLEX-BASIS can answer
 * for; app.css's own grid declaration is simply not the one that wins once
 * `display` itself is overridden here. */
.w4board{ display: flex; gap: 10px; height: calc(100vh - 230px); min-height: 480px; align-items: stretch; }
.w4board .w4col{
  flex: 1 1 0;
  min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
/* An empty column collapses to a narrow "Nothing here" instead of claiming the
 * same quarter-width as a column with real cards in it. */
.w4board .w4col.w4colempty{ flex: 0 0 160px; }

.colh{ position: relative; }
/* "See all N" in the column HEADER, beside the count — reachable without
 * scrolling past however deep the column runs (1,792 cards on "Gone quiet"
 * in real data). The bottom `.colmore` link (below) stays for anyone already
 * scrolled there; this is a second door, not a replacement. */
.colh .w4seeall{
  margin-left: 8px; font-size: 10.5px; font-weight: 600;
  color: var(--blue); text-decoration: none; white-space: nowrap;
}
.colh .w4seeall:hover{ text-decoration: underline; }

/* Two-line cards (WAVE6.md §4.4): name, then a single second line carrying
 * town · trucks · age · days-since-contact, with the band as a plain dot (the
 * word would not fit beside everything else, and the column already sorts by
 * opportunity, so the dot is confirmation, not new information). */
.w4pc{ padding:9px 11px 9px 13px; margin-bottom:4px; cursor:pointer; }
.w4pcline2{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:3px;
}
/* POLISH (item 7): town/fleet and days-since-contact used to share ONE
 * nowrap+ellipsis span, so a long fleet line cut the days count off the end
 * first — the one figure a rep scans the column for. They are now siblings:
 * `.w4pcmeta` is the elastic, ellipsising one; `.w4pcago` never shrinks and
 * never wraps, so the day count is always whole. */
.w4pcmeta{
  flex:1 1 auto; min-width:0; font-size:11px; color:var(--faint);
  font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.w4pcago{
  flex:0 0 auto; font-size:11px; color:var(--faint);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.w4pcago::before{ content:"\00b7"; margin-right:4px; }
.w4pcband{ flex:none; width:8px; height:8px; margin-left:8px; }
.w4board .colmore a{font-size:11.5px;color:var(--blue);text-decoration:none;font-weight:600}
.w4board .colmore a:hover{text-decoration:underline}

/* The strip's "scroll to and highlight" click target (pipeline.js): `.pulse-
 * once` (tokens.css) rings in `currentColor`, and a column's own ink colour is
 * a legible ring without inventing a second one just for this. */
.w4col.pulse-once{ position: relative; z-index: 1; }

@media (max-width: 820px){
  /* WAVE6.md §4.4 mobile: columns stack, each capped near half the screen
   * with its own scroll, instead of one viewport-tall board. Flex, not grid
   * columns, now that `.w4board` is a flex container above 820px too — this
   * just changes its axis and lets each column size to its own content. */
  .w4board{ flex-direction: column; height: auto; min-height: 0; }
  .w4board .w4col{ flex: 1 1 auto; height: auto; max-height: 50vh; margin-bottom: 10px; }
  .w4board .w4col.w4colempty{ flex: 1 1 auto; }
  .w4board .w4col:last-child{ margin-bottom: 0; }
}

/* ================================================== ALL ACCOUNTS ======== */
/* WAVE6.md §4.5 — the sortable 8-column table is gone (there is nothing to
 * click a header on any more: the list is always "Worth calling", ranked
 * server-side — see server/routes/companies.js). The page is now a `.w6list`
 * of `.w6row`s (kit6.js §3, styled entirely by w6.css) plus this page's own
 * one-row filter bar. */

/* One row of dropdown chips + search (WAVE6.md §4.5) — desktop only; `.fbar`'s
 * own wrap (app.css Part 1) is what lets this same markup stack cleanly under
 * 820px instead of overflowing. `#cres`'s `margin-left:auto` (app.css Part 2,
 * `.fbar .res`) still pushes the readout to the end of the row. */
@media (min-width: 821px){
  .w4cofilters{ flex-wrap: nowrap; }
  .w4cofilters .fsearch{ min-width: 170px; }
}

/* `.cofchip` — a `<select>` styled as a labelled dropdown chip. Shared with
 * Notes' kind/rep selects below (the same look, the same "one row" job), so
 * it is defined once, here, at its first use. */
.cofchip{
  display:flex; flex-direction:column; gap:2px; flex:none;
}
.cofchip .fl{ font-size:9px; }
.cofchip select{
  height:32px; min-width:96px; max-width:150px;
  border:1px solid var(--rule2); border-radius:6px;
  background:var(--card); color:var(--ink);
  font:inherit; font-size:12.5px; padding:0 8px; cursor:pointer;
}
.cofchip select:hover{ border-color:var(--blue); }
.cofchip select:focus-visible{ outline:2px solid var(--blue); outline-offset:-1px; }

/* The territory toggle — a plain two-state pill, not a `<select>` (there is
 * nothing to pick, only Florida-or-everywhere to flip). */
.cofterr{
  flex:none; align-self:flex-end;
  height:32px; padding:0 12px;
  border:1px solid var(--rule2); border-radius:999px;
  background:var(--card); color:var(--ink2);
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  white-space:nowrap;
}
.cofterr:hover{ border-color:var(--blue); color:var(--blue); }
.cofterr[aria-pressed="true"]{ background:var(--bluetint); border-color:var(--blue); color:var(--blue); }

/* Active filters, as removable chips — deliberately its own row BELOW `.fbar`
 * (see companies.js's own comment on `activeChips`): kit6's `.w6tag` is the
 * shared pill, `.w6tagrm` only adds the pointer + hover a REMOVE affordance
 * needs that a read-only tag does not. */
.w6activef{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin: 10px 0 2px; }
.w6tag.w6tagrm{
  cursor:pointer; border:1px solid var(--rule2); background:var(--card);
  font-family:var(--ui);
}
.w6tag.w6tagrm:hover{ border-color:var(--danger); color:var(--danger); }
.w6clearall{
  border:0; background:none; padding:0; margin-left:2px;
  font-size:11.5px; font-weight:600; color:var(--mute); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.w6clearall:hover{ color:var(--ink2); }

/* The list itself sits right under the filters/chips, same rhythm as every
 * other section on the page. */
#colist{ margin-top: 10px; }
#colist.busy{ opacity:.55; transition:opacity .12s; }

@media (max-width: 820px){
  .cofchip select, .cofterr{ height:44px; font-size:14px; }
}

/* ================================================== NOTES =============== */
/* WAVE6.md §4.6 — one dense list. `.feedwrap` (app.css) is a two-column card
 * grid built for the old ~140px cards; this page's entries are one line, so
 * it is single-column here (the ONLY page that uses `.feedwrap`/`.fday`, so
 * this is a safe, page-scoped override rather than a Part-1 edit). */
.feedwrap.w6entries{ display:block; background:none; }
/* Real notes cluster (a busy day is several notes); the fixture book spreads
 * 25 notes across 16 distinct days, which makes the day header — not the
 * entries — the thing worth shrinking to hold the 1,600px budget (§5) up
 * against that spread. Compact on purpose: a thin label, not a 34px bar. */
/* `.fday`'s own background (app.css Part 1, `#EDF1F4`) is a hardcoded hex with
 * no dark/road variant — invisible on the old two-column cards, a bright white
 * bar across a dense single-column list in dark mode. `--surf2` is the same
 * "quiet tint" token every other in-list header already uses (kit6.js's own
 * `.w6ghead`, this page's `.ph`), and it is themed correctly in all three modes. */
.feedwrap.w6entries .fday{ margin-bottom: 1px; padding: 2px 14px; font-size: 9px; background: var(--surf2); }

/* The filter row (companies.js's `.cofchip` reused here — see ALL ACCOUNTS
 * above): label beside the select instead of above it, and a touch less
 * padding, is what keeps 25 one-line entries plus 16 day headers (the
 * fixture's own spread; a busy real book is denser) inside the 1,600px
 * budget (§5) with room to spare. */
.w6nfbar{ padding: 8px 14px; }
.w6nfbar .cofchip{ flex-direction: row; align-items: center; gap: 6px; }
.w6nfbar .cofchip select{ height: 28px; }

.w6entry{
  display:block; padding:0; margin-bottom:1px;
  background:var(--card); border:1px solid var(--line); border-radius:6px;
  cursor:pointer;
}
.w6entry:hover{ border-color:var(--rule2); }
.w6entry:focus-visible{ outline:2px solid var(--accent-2); outline-offset:-2px; }

.w6erow{
  display:flex; align-items:center; gap:9px;
  min-height:34px; padding:0 12px;
}
/* POLISH (item 5): a fixed floor, not just a cap — a short company name in a
 * narrow window used to shrink to nothing beside a long preview (`min-width:
 * 0`), which is backwards: the company is the thing this list is organised
 * by, so the preview is the elastic one. */
.w6ecomp{
  flex:0 1 auto; min-width:180px; max-width:260px;
  font-family:var(--raj); font-weight:700; font-size:14px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.w6ecomp.w6enolink{ color:var(--faint); font-weight:600; }
.w6ekind{
  flex:none; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink2); background:var(--surf2); border:1px solid var(--line); border-radius:4px;
  padding:1px 6px; white-space:nowrap;
}
.w6eauthor{ flex:none; font-size:12px; color:var(--mute); white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
/* POLISH (item 5): `ui.js`'s teamChip() carries no styling of its own outside
 * `.fit`/`.note` (its only two callers before this row), so inside `.w6erow`
 * it rendered as bare, row-sized text — not a chip, and not visually distinct
 * from the author's name beside it. It is smaller and lighter here on
 * purpose: the author is the person; the team is a tag on them. */
.w6erow .tm{
  flex:none; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:1px 6px; border-radius:4px; color:var(--faint); background:var(--surf2);
}
.w6erow .tm.sales{ color:var(--blue); background:color-mix(in srgb, var(--blue) 12%, var(--surf2)); }
.w6erow .tm.service{ color:var(--green); background:color-mix(in srgb, var(--green) 12%, var(--surf2)); }
.w6eprev{
  flex:1 1 auto; min-width:0; font-size:12.5px; color:var(--ink2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.w6etime{ flex:none; font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }

.w6emore{ display:none; padding: 0 12px 12px 12px; border-top:1px solid var(--line2); margin-top:8px; padding-top:9px; }
.w6entry.open .w6emore{ display:block; }
.w6entry.open{ cursor:default; }
.w6efull{ margin:0 0 8px; font-size:13px; line-height:1.5; color:var(--ink2); white-space:pre-line; }
.w6emeta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.w6efdate{ font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
.w6ectx{ font-size:11px; color:var(--mute); font-variant-numeric:tabular-nums; }
.w6eopen{ font-size:12.5px; font-weight:600; color:var(--blue); text-decoration:none; }
.w6eopen:hover{ text-decoration:underline; }

.w4fit .c{font-variant-numeric:tabular-nums}

/* app.css's `.feedmore` is 11px top/bottom padding (Part 2) — fine for the
 * old page, a bit generous stacked on top of a now much shorter list. */
.feedpane .feedmore{ padding: 6px 16px; }

@media (max-width: 820px){
  .w6erow{ flex-wrap:wrap; min-height:0; padding:9px 12px; row-gap:3px; }
  .w6eprev{ flex-basis:100%; order:5; white-space:normal; }
  .w6etime{ margin-left:auto; }
}

/* ================================================== TEAM =============== */

.treprow.w4treprow{grid-template-columns:1.6fr repeat(4,.62fr) .85fr 1.7fr}
.w4treprow .trep-fig.unknown .n{color:var(--faint);font-weight:600}
.w4treprow .trep-fig .n,.w4treprow .trep-last .n2{color:var(--ink)}
.w4treprow .spk{flex-direction:column;align-items:flex-start;gap:4px;border-top:0;padding-top:0;margin-top:0}
.w4treprow .spk .sl{font-size:10px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.w4treprow .spk .sv{width:100%}
.w4treprow .spk .sc{font-size:11px;color:var(--mute)}
.w4treprow .sparkempty{font-size:11px;color:var(--faint)}

/* ================================================== RESPONSIVE ========== */

@media(max-width:1360px){
  /* The outcome bar takes the second line of the header rather than squeezing
     four labels into 40px each. Still one set, still above the fold. */
  .w6vacts{flex:1 1 100%;flex-direction:row;align-items:center;gap:8px;
    border-top:1px solid var(--line2);padding-top:7px}
  .w6vacts .k4b{flex:1 1 auto}
}

@media(max-width:1080px){
  .w6two{grid-template-columns:minmax(0,1fr)}
  .w6eqgrid{grid-template-columns:minmax(0,1fr)}
  .treprow.w4treprow{grid-template-columns:1.5fr repeat(4,.62fr) .9fr;row-gap:10px}
  .w4treprow .spk{grid-column:1 / -1;flex-direction:row;align-items:center;gap:10px;
    border-top:1px solid var(--line2);padding-top:9px}
  .w4treprow .spk .sv{width:auto;flex:1;min-width:0}
}

@media(max-width:820px){
  /* Phone first (WAVE6 §2 rule 8): the app bar already carries the company
     name, so the number a rep is aiming at is the first thing under it. */
  .w4sum{position:static}
  .w6vrow{padding:10px 12px;gap:9px}
  .w6back{order:1;flex:1 1 100%;max-width:none}
  .w4call{order:2;flex:1 1 100%;align-items:stretch}
  .w4phone{height:48px;font-size:24px;width:100%;justify-content:center}
  .w4who{max-width:none;text-align:center}
  .w6vid{order:3;flex:1 1 100%}
  .w6vid h2{font-size:17px;white-space:normal}
  .w6vstate{order:4;flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between;
    gap:10px;flex-wrap:wrap}
  .w4say{max-width:none;flex:1 1 auto}
  .w4pop{left:auto;right:0;width:min(340px,86vw)}
  .w4own{order:5;flex:1 1 100%;max-width:none;border-top:1px solid var(--line2);padding-top:9px}
  .w4own .ol{max-width:none}
  .w5assignmsg{right:auto;left:0;width:min(330px,88vw)}

  /* The outcome bar docks above the record's own call bar. z-index cannot do
     this job: #wrap carries the .viewswap transform, which seals every z-index
     inside it (INTEGRATION_NOTES "CSS TRAP"), so it clears the bar
     geometrically. 64px = the call bar's height (9 + 46 + 9). The mobile tab
     bar is display:none on the record (`body.on-company`), so the call bar,
     not the tab bar, is what has to be cleared. */
  .w6vacts{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));
    z-index:47;flex:none;flex-direction:row;align-items:center;gap:6px;
    padding:8px 10px;background:var(--card);border-top:1px solid var(--line);
    backdrop-filter:blur(8px)}
  .w6vacts .w4ol{display:none}
  .w6vacts .k4acts{flex:1;display:flex;gap:6px}
  .w6vacts .k4b{flex:1 1 0;min-width:0;min-height:44px;height:auto;padding:0 6px;font-size:12.5px;
    overflow:hidden;text-overflow:ellipsis}

  .w6rec{padding-bottom:66px}
  .w6two{grid-template-columns:minmax(0,1fr)}
  .w6tlbar .w5tlsearch{flex:1 1 100%;max-width:none;margin-left:0}
  .w6crow{flex-wrap:wrap}
  .w6comp textarea{flex:1 1 100%;height:48px;min-height:48px}
  .w6comp.open textarea{height:88px;min-height:88px}
  .w6comp .mic,.w6comp #saveNote{flex:1 1 auto;min-height:44px;height:auto;justify-content:center}
  .w4dayg{grid-template-columns:52px minmax(0,1fr);gap:8px}
  .w4when{font-size:9.5px;letter-spacing:.03em}
  .w4strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .w6comp textarea{font-size:16px}          /* 16px: no iOS zoom on focus */
  .tbl.w4co8 .th{display:none}
}

@media(max-width:520px){
  .w6vid h2{font-size:16px}
  .w6vacts .k4b{font-size:11.5px;padding:0 4px}
}


/* ============================================== WAVE 5 — W5-09 / W5-10 ===
 * Write path (create/edit contacts, edit company fields, the assignment
 * note) and "a record that tells the truth" (aliases, note edit/delete,
 * notes search, provenance). §14.1.10: text colour always via --ink/--ink2/
 * --mute/--faint, never --navy (that name is reserved for structural
 * backgrounds and is re-pointed for dark mode in tokens.css — a NEW rule
 * that put text in --navy would go invisible there with nothing to catch it).
 * Floating layers (the add-company modal, the notes-search dropdown) use the
 * `.floating` utility from tokens.css for their shadow, per DESIGN §7. ===== */

/* ---- shared: a small two-column edit form (contacts, company details) --- */
.w5cgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:8px}
.w5cgrid label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.w5cgrid input[type="text"],.w5cgrid input[type="tel"],.w5cgrid input[type="email"]{
  height:32px;border:1px solid var(--line);border-radius:5px;background:var(--card);
  color:var(--ink);font:inherit;font-size:13px;padding:0 9px;font-weight:400;
  text-transform:none;letter-spacing:normal}
.w5cgrid input:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.w5cprimary{flex-direction:row !important;align-items:center;gap:6px !important;grid-column:1 / -1}
.w5cprimary input{width:auto;height:auto}
.w5cactions{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.w5cactions .hint{font-size:11.5px;color:var(--danger)}

/* ---- contacts: edit form + sms + secondary line ------------------------- */
.pl.w5c{position:relative;flex-wrap:wrap}
.w5cform{grid-column:1 / -1;width:100%;border:1px solid var(--line);border-radius:6px;
  background:var(--surf2);padding:10px 11px;margin:2px 0 10px}
.w5cedit{border:0;background:none;padding:4px;margin-left:4px;color:var(--faint);
  cursor:pointer;border-radius:4px;display:inline-flex;align-self:center}
.w5cedit svg{width:14px;height:14px}
.w5cedit:hover{color:var(--blue);background:var(--surf2)}
.pnwrap{display:inline-flex;align-items:center;gap:4px}
.smsbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:5px;color:var(--mute);flex:none}
.smsbtn svg{width:14px;height:14px}
.smsbtn:hover{background:var(--surf2);color:var(--blue)}
.pi2{display:block;width:100%;font-size:11px;color:var(--faint);margin-top:2px;
  font-variant-numeric:tabular-nums}
.w5addcontact{margin-top:12px;width:100%}

/* ---- company details panel ----------------------------------------------- */
#w4detailsedit .w5cgrid{margin-top:2px}

/* ---- aliases -------------------------------------------------------------- */
.w4alias{font-size:11.5px;color:var(--mute);margin-top:3px;line-height:1.4}

/* ---- parked (§14.1.7) — a quiet amber strip across the top of the sticky header,
 * same family as .w4warn's "worth checking" tone but full-width and un-missable
 * since the whole point is "do not hand this out while it is like this". */
.w5parked{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 16px;background:#FCF8F0;border-bottom:1px solid #E7D4AE;
  font-size:12.5px;color:var(--ink2);border-radius:6px 6px 0 0}
html[data-theme="dark"] .w5parked{background:#2C2312;border-bottom-color:#463920}
html[data-theme="road"] .w5parked{background:#F8EBD3;border-bottom-color:#DCC08A}
.w5parked .btn{flex:none}

/* ---- assignment-note "why" prompt ---------------------------------------- */
.w5assignmsg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;width:100%}
.w5assignmsg[hidden]{display:none}
.w5assignmsg input{height:30px;min-width:200px;flex:1 1 200px;border:1px solid var(--line);
  border-radius:5px;background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;padding:0 9px}
.w5assignmsg input:focus{outline:2px solid var(--blue);outline-offset:-1px}

/* ---- provenance ------------------------------------------------------------ */
.w5provdetail{font-size:12px !important;font-weight:600}

/* ---- undo (§14.1.6), note edit / delete + tombstone ----------------------- */
.nh{position:relative}
.w5nundo{border:1px solid var(--line);background:var(--surf2);color:var(--ink2);
  font:inherit;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:10px;
  cursor:pointer;margin-left:4px}
.w5nundo:hover{border-color:var(--blue);color:var(--blue)}
.w5nedit,.w5ndel{border:0;background:none;padding:3px;margin-left:2px;color:var(--faint);
  cursor:pointer;border-radius:4px;display:inline-flex}
.w5nedit svg,.w5ndel svg{width:13px;height:13px}
.w5nedit:hover{color:var(--blue);background:var(--surf2)}
.w5ndel:hover{color:var(--danger);background:var(--surf2)}
.w5neditform{margin-top:7px;border:1px solid var(--line);border-radius:6px;background:var(--surf2);padding:9px}
.w5neditform textarea{width:100%;min-height:60px;border:1px solid var(--line);border-radius:5px;
  background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;padding:7px 9px;resize:vertical}
.w5neditform textarea:focus{outline:2px solid var(--blue);outline-offset:-1px}
.w5tombtext{font-style:italic;color:var(--faint) !important;-webkit-line-clamp:unset !important;
  display:block !important;overflow:visible !important}
.w5tombstone .w4dot{background:var(--faint) !important}

/* ---- notes search on the record ------------------------------------------- */
.w5tlsearch{position:relative;margin-bottom:12px}
.w5tlsearch .fsearch{display:flex;align-items:center;gap:7px;border:1px solid var(--rule2);
  background:var(--card);border-radius:6px;height:34px;padding:0 11px}
.w5tlsearch .fsearch svg{width:14px;height:14px;color:var(--faint);flex:none}
.w5tlsearch .fsearch input{border:0;outline:none;background:transparent;font:inherit;
  font-size:13px;color:var(--ink);width:100%}
.w5tlsearchres{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;max-height:320px;
  overflow-y:auto;background:var(--card);border:1px solid var(--rule2);border-radius:6px;padding:4px}
.w5tlhit{padding:7px 8px;border-bottom:1px solid var(--line2)}
.w5tlhit:last-child{border-bottom:0}
.w5tlhitmeta{display:block;font-size:10.5px;color:var(--faint);margin-bottom:2px;
  font-variant-numeric:tabular-nums}
.w5tlhitsnip{display:block;font-size:12px;color:var(--ink2);line-height:1.4}
.w5tlsearchres .hint{padding:9px 8px;font-size:12px;color:var(--mute)}
mark{background:#FCE9B8;color:inherit;border-radius:2px;padding:0 1px}
html[data-theme="dark"] mark{background:#4A3A12;color:var(--ink)}
html[data-theme="road"] mark{background:#F5D889}

/* ---- add-company modal (companies.js) ------------------------------------- */
.w5modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:16px}
.w5modal[hidden]{display:none}
.w5modalbg{position:absolute;inset:0;background:rgba(6,14,20,.45)}
html[data-theme="road"] .w5modalbg{background:rgba(0,0,0,.6)}
.w5modalbox{position:relative;width:100%;max-width:460px;max-height:88vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--rule2);border-radius:8px;padding:18px 18px 16px}
.w5modalbox h3{font-family:var(--raj);font-size:18px;font-weight:700;color:var(--ink);margin:0}
.w5conflict{margin-top:12px;padding:10px 11px;border:1px solid #E7D4AE;border-left:3px solid var(--amber);
  background:#FCF8F0;border-radius:5px;font-size:12.5px;color:var(--ink2)}
.w5conflict p{margin:0 0 8px}
html[data-theme="dark"] .w5conflict{background:#2C2312;border-color:#463920}
html[data-theme="road"] .w5conflict{background:#F8EBD3;border-color:#DCC08A}

/* ---- notes search on the Notes view (feed.js) ------------------------------ */
.w5searchhit .tx{color:var(--ink2)}
/* #searchwrap reuses .feedwrap (app.css), which sets display:grid — an AUTHOR rule
 * always beats the UA's [hidden]{display:none} regardless of specificity, so the
 * panel would render even while hidden without this explicit override. */
#searchwrap[hidden]{display:none}

/* ---- danger button variant (§9 palette: red is accents-only) -------------- */
.btn.warn{background:var(--card);color:var(--danger);border:1px solid var(--rule2)}
.btn.warn:hover{background:var(--card);border-color:var(--danger)}

@media(max-width:640px){
  .w5cgrid{grid-template-columns:1fr}
  .w5modalbox{padding:16px 14px 14px}
}