/* 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 ======= */

.w4sum{position:sticky;top:54px;z-index:5;background:var(--card);border:1px solid var(--line);
  border-radius:6px;margin-bottom:10px}
.w4sumtop{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:18px;
  align-items:center;padding:12px 16px}

.w4id{min-width:0}
.w4id h2{font-family:var(--raj);font-size:21px;line-height:1.1;color:var(--ink);letter-spacing:-.01em}
.w4facts{font-size:12px;color:var(--mute);margin-top:3px;font-variant-numeric:tabular-nums}
.w4say{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2);margin-top:6px;line-height:1.4}
.w4say i{width:7px;height:7px;border-radius:50%;flex:none}

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

.w4pop{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:78vw;z-index:30;
  background:var(--card);border:1px solid var(--rule2);border-radius:6px;padding:4px 0;box-shadow:var(--pop)}
.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}
.w4popf{padding:8px 13px 10px;border-top:1px solid var(--line2);font-size:11px;color:var(--faint);line-height:1.45}

.w4call{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.w4phone{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:6px;
  background:var(--blue);color:#fff;font-family:var(--raj);font-size:19px;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:11.5px;color:var(--mute);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.w4own{font-size:12px;color:var(--mute)}
.w4own .own{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.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)}
.w4own select{background:var(--card);border:1px solid var(--line);color:var(--ink2);border-radius:5px;
  padding:4px 6px;font:inherit;font-size:12px;cursor:pointer}
.w4own .btn.claim{height:30px;font-size:12.5px}

.w4outcomes{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:9px 16px;border-top:1px solid var(--line2);background:var(--surf2);
  border-radius:0 0 5px 5px}
.w4ol{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-right:4px}
.w4ob{height:30px;padding:0 13px;border:1px solid var(--line);background:var(--card);border-radius:5px;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;white-space:nowrap}
.w4ob:hover{border-color:var(--blue);color:var(--blue)}
.w4ob:disabled{opacity:.5;cursor:default}
.w4ob.done{background:#EFF6F1;border-color:#BFDBC8;color:var(--green)}

.w4stagerow{margin-bottom:10px}

/* ---- two columns: sticky facts on the left, one timeline on the right --- */

.w4rec{display:grid;grid-template-columns:400px minmax(0,1fr);gap:12px;align-items:start;max-width:1440px}
/* Sticky, but never a nested scroll area: capping the rail's height truncated
 * panels mid-table and left dead space beside a long timeline. When the rail is
 * taller than the viewport it simply scrolls with the page. */
.w4left{position:sticky;top:calc(66px + var(--w4sumh,128px));align-self:start}
.w4right{min-width:0}
.w4pane{margin-bottom:10px}
.w4pane:last-child{margin-bottom:0}
.w4pane .pb{padding:11px 13px}

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

.w4reason{padding:9px 0;border-top:1px solid var(--line2)}
.w4reason:first-child{padding-top:0;border-top:0}
.w4rlab{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--amber);margin-bottom:3px}
.w4reason b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.4}
.w4rq{display:block;font-size:12px;color:var(--mute);font-style:italic;line-height:1.45;margin-top:3px}
.w4more2{padding-top:9px;border-top:1px solid var(--line2);font-size:11.5px;color:var(--faint)}

/* ---- 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:#fff}
.w4expbody{margin-top:9px;border-top:1px solid var(--line2);padding-top:9px;overflow-x:auto}

/* ---- bought-from-us strip ----------------------------------------------- */

.w4strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.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}
.w4strip b.sm3{font-size:12.5px;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}

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

.w4tlpane .pb{padding:12px 14px}
.w4tl{margin-top:12px}
.w4day{position:sticky;top:calc(66px + var(--w4sumh,128px));z-index:2;
  background:var(--card);padding:9px 0 6px;margin-top:4px;
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line2)}
.w4tl>.w4day:first-child{margin-top:0}

.w4ev{display:grid;grid-template-columns:9px minmax(0,1fr);gap:11px;padding:8px 0;
  border-bottom:1px solid var(--line2)}
.w4ev:last-child{border-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:3;-webkit-box-orient:vertical;overflow:hidden}
.w4note.open .nt{-webkit-line-clamp:unset;display:block;overflow:visible}
.w4nmore{margin-top:4px;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:#F1F8FD}

.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 ============= */

.w4board .w4col{min-width:0}
.w4pc .m{font-variant-numeric:tabular-nums}
/* A 90px card does not need an internal hairline: the card's own border
   already separates it from the next one, and the rule cost 15px of vertical
   rhythm per card — 25 of them per column is most of a screen. */
.w4pc{padding:9px 11px 9px 13px;margin-bottom:4px}
.w4pc .m{margin-top:1px}
.w4pc .pcfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;
 margin-top:5px;padding-top:0;border-top:0}
.w4pc .ago{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.w4pc .ago.w4old{color:var(--amber);font-weight:600}
.w4pc .band{font-size:11.5px}
.w4board .colmore a{font-size:11.5px;color:var(--blue);text-decoration:none;font-weight:600}
.w4board .colmore a:hover{text-decoration:underline}

/* ================================================== ALL ACCOUNTS ======== */

.tbl.w4co8 .th,.tbl.w4co8 .tr{grid-template-columns:2.2fr .95fr .95fr 1.1fr .55fr .7fr .85fr .7fr}
.w4bandcell{overflow:hidden}

/* ================================================== NOTES =============== */

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

/* ================================================== 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:1280px){
  .w4rec{grid-template-columns:340px minmax(0,1fr)}
  .w4sumtop{grid-template-columns:minmax(0,1fr) auto auto;row-gap:12px}
  .w4own{grid-column:1 / -1;border-top:1px solid var(--line2);padding-top:10px}
}

@media(max-width:1080px){
  .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:900px){
  .w4rec{grid-template-columns:minmax(0,1fr)}
  .w4left{position:static}
  .w4day{top:54px}
}

@media(max-width:820px){
  .w4sum{position:static;margin-bottom:10px}
  .w4sumtop{grid-template-columns:minmax(0,1fr);row-gap:12px;padding:12px 13px}
  .w4band{justify-content:flex-start}
  .w4pop{left:0;right:auto;width:min(340px,86vw)}
  .w4call{align-items:flex-start}
  .w4phone{height:44px;font-size:23px;width:100%;justify-content:center}
  .w4who{max-width:none}
  .w4own{grid-column:auto;border-top:1px solid var(--line2);padding-top:10px}
  .w4outcomes{padding:10px 13px}
  .w4ob{height:38px;flex:1 1 auto;min-width:calc(50% - 3px)}
  .w4ol{width:100%;margin-bottom:2px}
  .w4right{padding-bottom:70px}
  .w4day{top:0}
  .w4strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tbl.w4co8 .th{display:none}
}

@media(max-width:520px){
  .w4id h2{font-size:19px}
}

/* basis rows carry a small factor label when the source names one */
.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}