/* ============================================================================
   Southport Signal — WAVE 4a (web-core lane)
   Shell + component kit + Today / Reasons / manager home.
   ----------------------------------------------------------------------------
   Loaded after app.css. Part 1 of app.css is the client-approved mockup system
   and is NOT edited; everything here works inside it:

     tokens   --navy #002B47 · --blue #00619F · --line #E2E7EC · --page #F4F6F8
     type     Rajdhani for headings and every numeral, Inter for body copy
     surfaces 1px hairline, 6px radius, NO shadows, 34px header bars
     controls 34px (52px touch targets under 820px), tabular numerals
     status   coloured dot + plain word, never a bare number, never a pill

   Wave-4 rules this file is responsible for holding:
     - one accent per surface (a card has ONE coloured thing: the band dot)
     - no full-width blue buttons inside a card; outcome buttons are quiet
     - no red walls: a zero is grey, a stale export is a grey chip
     - 8px rhythm; lists are hairline-separated rows, not gapped cards, so
       twenty-five of them still fit the page budget
     - every row is one line tall or two, and every page ends
   ========================================================================== */

/* ------------------------------------------------------------- shell bits */

/* index.html ships an empty <div class="toast"> so it survives re-renders. Its
   parked transform (190% of a 30px empty box) leaves it one pixel below a
   900px fold — a small navy blob that shows up on any shorter viewport and in
   every full-page capture. An empty toast was never meant to be visible. */
.toast:empty { display: none; }

.dtwrap { display: flex; align-items: center; }
.dtchip {
  font-family: var(--ui); font-size: 11.5px; font-weight: 500; color: var(--mute);
  background: var(--surf2); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; white-space: nowrap; margin-right: 12px;
  font-variant-numeric: tabular-nums;
}

/* Mobile tab badge — a small count, never a zero (app.js will not render one). */
.tabbar .tbadge {
  position: absolute; top: 5px; left: 50%; margin-left: 6px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--blue); color: #fff; font-family: var(--raj); font-weight: 700;
  font-size: 10.5px; line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.tabbar a { position: relative; }

/* ---- More sheet (phones only) ---------------------------------------------
   The rail carries six destinations, an identity and Sign out; the tab bar can
   hold four things at a 56px target. Everything that does not fit lives here,
   so nothing in the product is desktop-only. Hairline + white surface + 6px
   radius, no shadow — the sheet is a panel that happens to slide up. */
.msheet { display: none; }
.msheet[hidden] { display: none !important; }

@media (max-width: 820px) {
  .tabbar .tabmore.on { color: var(--blue); }

  .msheet { display: block; position: fixed; inset: 0; z-index: 60; }
  .msheet .mbg {
    position: absolute; inset: 0; background: rgba(0, 43, 71, .34);
    opacity: 0; transition: opacity .18s ease;
  }
  .msheet.on .mbg { opacity: 1; }

  .msheet .mbox {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--card); border-top: 1px solid var(--line);
    border-radius: 10px 10px 0 0; padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .2s ease;
  }
  .msheet.on .mbox { transform: translateY(0); }

  .msheet .mgrab {
    width: 36px; height: 4px; border-radius: 2px; background: var(--line);
    margin: 2px auto 10px;
  }

  .msheet .mnav { display: flex; flex-direction: column; gap: 2px; }
  .msheet .mnav a {
    display: flex; align-items: center; gap: 12px; min-height: 52px;
    padding: 0 10px; border-radius: 6px; text-decoration: none;
    color: var(--ink); font-size: 16px; font-weight: 500;
  }
  .msheet .mnav a svg { width: 18px; height: 18px; flex: none; color: var(--mute); }
  .msheet .mnav a.on { background: var(--bluetint); color: var(--blue); }
  .msheet .mnav a.on svg { color: var(--blue); }

  .msheet .mwho {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 0 8px; padding-top: 12px; border-top: 1px solid var(--line);
  }
  /* `.av` has no base rule in app.css — every use is scoped (.who .av, .hello
     .av, .tcard .av), so an unscoped one renders as a coloured square. */
  .msheet .mwho .av {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: grid; place-items: center; color: #fff;
    font-family: var(--raj); font-weight: 700; font-size: 11.5px;
  }
  .msheet .mwho b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
  .msheet .mwho small { display: block; font-size: 12px; color: var(--mute); margin-top: 1px; }

  .msheet .swap {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: 6px;
    background: var(--surf2); color: var(--ink2); font: inherit; font-size: 15px;
    font-weight: 600; cursor: pointer;
  }
  .msheet .swap svg { width: 15px; height: 15px; }
  .msheet .swap:hover { border-color: var(--blue); color: var(--blue); }
}

/* -------------------------------------------------------- section headings */

.k4head { display: flex; align-items: center; gap: 10px; margin: 20px 0 8px; }
.k4head:first-child { margin-top: 4px; }
.k4head h2 {
  font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mute); white-space: nowrap;
}
.k4head .k4rule { flex: 1; height: 1px; background: var(--line); }
.k4head .k4meta { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k4head .k4see {
  font-family: var(--raj); font-weight: 700; font-size: 13px; color: var(--blue);
  text-decoration: none; white-space: nowrap;
}
.k4head .k4see:hover { text-decoration: underline; }

/* ------------------------------------------------------------- band dot */
/* `bandDot()` lives in ui.js and both wave-4 stylesheets describe it the same
   way (dot + word, 7px dot, no pill). This is the kit's scoped copy so the
   Today/Reasons cards render correctly even if wave4b.css is not loaded. */

:is(.k4card, .k4today, .k4tbl) .band {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--ui); font-size: 12px; font-weight: 600; white-space: nowrap;
}
:is(.k4card, .k4today, .k4tbl) .band i { width: 7px; height: 7px; border-radius: 50%; flex: none; }

/* ------------------------------------------------------------- the list */

.k4list { background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.k4list > * + * { border-top: 1px solid var(--line); }
.k4gone { opacity: 0; transform: translateX(10px); transition: opacity .16s ease, transform .16s ease; }

/* NAMESPACE NOTE (cross-lane, load-bearing): web-record's wave4b.css also
   writes into the `w4*` prefix and loads AFTER this file, so it wins every
   single-class tie. It already claims `.w4phone`, `.w4why`, `.w4who` and
   `.w4reason` for the company record. The component kit therefore lives in its
   own `k4*` prefix and styles no `w4*` class at all. Rules are additionally
   scoped to a kit container so specificity, not load order, decides. */

/* --------------------------------------------------------- company card */
/* The Reasons / What-changed row: identity + why on the left, the four quiet
   controls on the right. ~72px, so twenty-five of them fit the page budget. */

.k4card {
  display: flex; align-items: center; gap: 16px; padding: 9px 14px;
  background: var(--card); cursor: pointer;
}
.k4card:hover { background: var(--surf2); }
.k4card .k4body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.k4card .k4top { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 20px; }

:is(.k4card, .k4today, .k4fup, .k4tbl) .k4name {
  font-family: var(--raj); font-weight: 700; font-size: 15.5px; line-height: 20px;
  color: var(--ink); letter-spacing: -.01em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 340px;
}
:is(.k4card, .k4today):hover .k4name { color: var(--blue); }
:is(.k4card, .k4today) .k4mt {
  font-size: 12.5px; line-height: 18px; color: var(--mute); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
:is(.k4card, .k4today) :is(.k4stage, .k4contact) {
  font-size: 11.5px; line-height: 17px; color: var(--faint); white-space: nowrap;
}
:is(.k4card, .k4today) :is(.k4stage, .k4contact)::before {
  content: "\00b7"; margin-right: 8px; color: var(--rule2);
}

/* ------------------------------------------------------------- why now */
/* One line. The reason type is a quiet chip, the headline is plain English and
   the quote is verbatim; anything that will not fit is one click away on the
   company record rather than wrapped into a third line. */

:is(.k4card, .k4today) .k4reason {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 20px;
}
:is(.k4card, .k4today) .k4type {
  font-family: var(--ui); font-size: 11px; line-height: 16px; font-weight: 600;
  color: var(--ink2); background: var(--surf2); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 7px; white-space: nowrap; flex: none;
}
/* Both can ellipsise, but they must not do it together: the headline is the
   plain-English "why", so the quote gives way first (shrink 8:1). */
:is(.k4card, .k4today) .k4hl {
  font-size: 13px; line-height: 18px; color: var(--ink2); flex: 0 1 auto; flex-shrink: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:is(.k4card, .k4today) .k4q {
  font-size: 12.5px; line-height: 18px; color: var(--mute); font-style: italic;
  flex: 0 1 auto; flex-shrink: 8;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* On the scanning list the actions column eats ~380px, so cap the quote rather
   than let it truncate the headline alongside it — two ellipses in one line
   reads as broken text. The full quote is one click away on the record. */
.k4card .k4q { max-width: 34%; }
:is(.k4card, .k4today) .k4more {
  font-size: 12px; line-height: 18px; color: var(--blue); text-decoration: none;
  white-space: nowrap; flex: none;
}
:is(.k4card, .k4today) .k4more:hover { text-decoration: underline; }

/* ------------------------------------------------------ outcome controls */
/* 34px, hairline, no fill. Four of them and a text link — deliberately NOT a
   full-width blue button, which is what made the old call cards 275px tall. */

:is(.k4card, .k4today) .k4acts { display: flex; align-items: center; gap: 6px; flex: none; }
:is(.k4card, .k4today) .k4b {
  height: 34px; padding: 0 12px; border: 1px solid var(--rule2); border-radius: 6px;
  background: var(--card); color: var(--ink2); font-family: var(--raj); font-weight: 600;
  font-size: 13.5px; line-height: 1; cursor: pointer; white-space: nowrap;
}
:is(.k4card, .k4today) .k4b:hover { background: var(--bluetint); border-color: var(--blue); color: var(--blue); }
:is(.k4card, .k4today) .k4b:active { background: #E6EFF6; }
:is(.k4card, .k4today) .k4b:disabled { opacity: .5; cursor: default; }
:is(.k4card, .k4today, .k4fup) .k4open {
  font-family: var(--raj); font-weight: 700; font-size: 13px; line-height: 18px;
  color: var(--blue); text-decoration: none; padding: 0 4px 0 8px; white-space: nowrap;
}
:is(.k4card, .k4today, .k4fup) .k4open:hover { text-decoration: underline; }

/* ---------------------------------------------------------- today card */
/* Four rows, per DESIGN. The phone is the largest thing on the card and it is
   a tel: link — reps work this page standing in a truck yard. */

.k4today { display: grid; gap: 4px; padding: 8px 14px; background: var(--card); cursor: pointer; }
.k4today:hover { background: var(--surf2); }

.k4today .k4t1 { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 20px; }
.k4today .k4num {
  font-family: var(--raj); font-weight: 700; font-size: 13px; line-height: 18px;
  color: var(--faint); font-variant-numeric: tabular-nums; min-width: 17px; flex: none;
}
.k4today .k4bandwrap { margin-left: auto; flex: none; line-height: 18px; }
.k4today .k4bandwrap .band { line-height: 18px; }

.k4today .k4t2 { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 28px; }
.k4today .k4person { font-size: 12.5px; line-height: 18px; color: var(--mute); white-space: nowrap; flex: none; }
.k4today .k4tel {
  display: inline-flex; align-items: center; gap: 8px; height: 28px;
  font-family: var(--raj); font-weight: 700; font-size: 25px; line-height: 28px;
  color: var(--navy); text-decoration: none; letter-spacing: -.015em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.k4today .k4tel:hover { color: var(--blue); }
.k4today .k4tel svg { width: 16px; height: 16px; color: var(--green); flex: none; }
.k4today .k4nophone { font-family: var(--raj); font-weight: 600; font-size: 15px; line-height: 28px; color: var(--faint); }
.k4today .k4last { margin-left: auto; font-size: 11.5px; line-height: 18px; color: var(--faint); white-space: nowrap; flex: none; }

/* ------------------------------------------------------- promised follow-ups */

.k4fups { background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.k4fups > * + * { border-top: 1px solid var(--line); }
.k4fup { display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 38px; background: var(--card); cursor: pointer; }
.k4fup:hover { background: var(--surf2); }
.k4fup .k4name { font-size: 14.5px; max-width: 240px; }
.k4fup .k4fdate { font-size: 12px; color: var(--amber); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
.k4fup .k4fsnip { flex: 1; min-width: 0; font-size: 12.5px; color: var(--mute); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ----------------------------------------------------------- ends + empties */

.k4end {
  padding: 12px 2px 4px; font-family: var(--raj); font-weight: 600; font-size: 13.5px;
  color: var(--faint); text-align: center;
}
.k4empty {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: 26px 18px; text-align: center; display: grid; gap: 5px;
}
.k4empty b { font-family: var(--raj); font-size: 15.5px; color: var(--ink2); font-weight: 700; }
.k4empty span { font-size: 12.5px; color: var(--mute); }

/* ------------------------------------------------------------- filter bar */

.k4bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 9px 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: 6px; margin-bottom: 10px;
}
.k4chips { display: flex; align-items: center; gap: 6px; }
.k4clb {
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); margin-right: 2px;
}
.k4chip {
  height: 28px; display: inline-flex; align-items: center; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--ink2); font-family: var(--raj); font-weight: 600; font-size: 13px;
  text-decoration: none; white-space: nowrap;
}
.k4chip:hover { border-color: var(--rule2); background: var(--surf2); }
.k4chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.k4res { margin-left: auto; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.k4res b { color: var(--ink); font-weight: 600; }

.k4pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.k4pager .btn { text-decoration: none; }
.k4pg { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- brief */

.k4brief { margin-bottom: 4px; }
.k4brief .ph.vi { background: #F5F3FA; border-bottom-color: #E4DFF0; }
.k4brief .ph.vi h3 { color: var(--violet); }
.k4bb { padding: 12px 14px 12px; }
.k4bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.k4bgrp { min-width: 0; }
.k4blb {
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 6px;
}
.k4bgrp ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.k4bgrp li { font-size: 13px; color: var(--ink2); line-height: 1.45; padding-left: 13px; position: relative; }
.k4bgrp li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--rule2); }
.k4bmore { display: flex; align-items: center; gap: 12px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--rule); }
.k4link {
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--blue);
  font-family: var(--raj); font-weight: 700; font-size: 13px;
}
.k4link:hover { text-decoration: underline; }
.k4bmore .k4dt {
  margin-left: auto; font-size: 11.5px; color: var(--mute); background: var(--surf2);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.k4narr { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.k4narr p { margin: 0 0 9px; font-size: 13.5px; color: var(--ink2); line-height: 1.6; }
.k4narr p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- tables */
/* 38px rows (§9), aligned columns, tabular numerals. */

.k4tbl { display: block; }
.k4tr {
  display: grid; align-items: center; gap: 14px; padding: 0 14px; min-height: 38px;
  border-top: 1px solid var(--rule);
}
.k4tr:first-child { border-top: 0; }
.k4th {
  min-height: 30px; background: var(--surf2); border-top: 0; border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--mute);
}
.k4handout .k4tr { grid-template-columns: minmax(150px, 1.5fr) minmax(96px, .8fr) 106px minmax(180px, 2fr) 168px; }
.k4team .k4tr { grid-template-columns: minmax(150px, 2fr) 92px 116px 108px minmax(96px, 1fr); }

.k4tbl .k4cn { display: flex; align-items: center; gap: 9px; min-width: 0; }
.k4tbl .k4cn b { font-family: var(--raj); font-weight: 700; font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k4tbl .k4cn small { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.k4handout .k4cn { display: grid; gap: 0; line-height: 1.35; }
.k4cf { font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k4cw { display: grid; line-height: 1.3; min-width: 0; }
.k4cw { font-size: 12.5px; color: var(--ink2); }
.k4cw small { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k4handout .k4tr:hover { background: var(--surf2); }

.k4sel {
  width: 100%; height: 30px; border: 1px solid var(--rule2); border-radius: 6px;
  background: var(--card); color: var(--ink2); font-family: var(--ui); font-size: 12.5px;
  padding: 0 8px; cursor: pointer;
}
.k4sel:hover { border-color: var(--blue); }

.k4n { font-family: var(--raj); font-weight: 700; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.k4n.k4zero { color: var(--faint); font-weight: 600; }      /* grey, never red */
.k4n.k4soft { font-family: var(--ui); font-weight: 400; font-size: 12.5px; color: var(--mute); }
.k4av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--raj); font-weight: 700; font-size: 10px; flex: none; }

/* ============================================================== mobile ==== */
/* Under 820px the rail becomes the bottom tab bar (app.css). Cards stack, every
   control clears 52px, and the phone number gets BIGGER, not smaller. */

@media (max-width: 820px) {
  .dtchip { margin-right: 8px; font-size: 11px; padding: 3px 9px; }

  .k4head { margin: 18px 0 8px; }
  .k4head .k4meta { display: none; }

  .k4card { display: block; padding: 11px 13px; }
  .k4card .k4body { gap: 5px; }
  .k4card .k4top { flex-wrap: wrap; gap: 4px 10px; }
  :is(.k4card, .k4today) .k4name { max-width: none; white-space: normal; }
  :is(.k4card, .k4today) .k4reason { flex-wrap: wrap; gap: 4px 8px; }
  :is(.k4card, .k4today) :is(.k4hl, .k4q) { white-space: normal; }
  :is(.k4card, .k4today) :is(.k4stage, .k4contact) { display: none; }

  :is(.k4card, .k4today) .k4acts { flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  :is(.k4card, .k4today) .k4b { flex: 1 1 calc(50% - 4px); min-height: 52px; font-size: 15px; }
  /* The whole card already opens the record on tap, so a separate "Open"
     control on a phone is a redundant 52px of thumb travel per card. */
  :is(.k4card, .k4today) .k4open { display: none; }

  .k4today { padding: 12px 13px; gap: 7px; }
  .k4today .k4t1 { flex-wrap: wrap; gap: 4px 9px; }
  .k4today .k4bandwrap { margin-left: auto; }
  .k4today .k4t2 { flex-wrap: wrap; gap: 2px 12px; min-height: 52px; }
  .k4today .k4tel { font-size: 31px; line-height: 38px; height: auto; min-height: 52px; align-items: center; }
  .k4today .k4tel svg { width: 19px; height: 19px; }
  .k4today .k4last { margin-left: 0; flex: 1 1 100%; }

  .k4fup { height: auto; min-height: 60px; padding: 10px 13px; flex-wrap: wrap; gap: 4px 10px; }
  .k4fup .k4fsnip { flex: 1 1 100%; white-space: normal; }
  .k4fup .k4name { max-width: none; }

  .k4bar { gap: 10px 14px; padding: 10px 12px; }
  .k4chips { flex-wrap: wrap; }
  .k4chip { height: 34px; font-size: 14px; padding: 0 13px; }
  .k4res { margin-left: 0; flex: 1 1 100%; }

  .k4bgrid { grid-template-columns: 1fr; gap: 14px; }

  /* Tables restack into blocks — a five-column grid on a 390px screen is a
     horizontal scrollbar, and reps never find the far column. */
  .k4th { display: none; }
  .k4handout .k4tr, .k4team .k4tr {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
    padding: 11px 13px; min-height: 0;
  }
  .k4handout .k4cn, .k4team .k4cn { grid-column: 1 / -1; }
  .k4handout .k4cw { grid-column: 1 / -1; }
  .k4handout .k4ca { grid-column: 1 / -1; margin-top: 4px; }
  .k4sel { height: 52px; font-size: 16px; }              /* 16px: no iOS zoom */
  .k4team .k4n { font-size: 13.5px; }
  .k4team .k4n::before { content: attr(data-lb); }
  .k4cf, .k4cb { justify-self: start; }
}

/* Narrow desktop: keep the outcome buttons from crushing the reason text. */
@media (min-width: 821px) and (max-width: 1180px) {
  :is(.k4card, .k4today) .k4name { max-width: 220px; }
  :is(.k4card, .k4today) .k4b { padding: 0 9px; font-size: 13px; }
  .k4handout .k4tr { grid-template-columns: minmax(130px, 1.4fr) 92px 100px minmax(120px, 1.4fr) 150px; }
}