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

.k4card .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;
}
.k4card:hover .k4name { color: var(--blue); }
.k4card .k4mt {
  font-size: 12.5px; line-height: 18px; color: var(--mute); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.k4card :is(.k4stage, .k4contact) {
  font-size: 11.5px; line-height: 17px; color: var(--faint); white-space: nowrap;
}
.k4card :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. */

.k4card .k4reason {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 20px;
}
.k4card .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). */
.k4card .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;
}
.k4card .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%; }
.k4card .k4more {
  font-size: 12px; line-height: 18px; color: var(--blue); text-decoration: none;
  white-space: nowrap; flex: none;
}
.k4card .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. */

.k4card .k4acts { display: flex; align-items: center; gap: 6px; flex: none; }
.k4card .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;
}
.k4card .k4b:hover { background: var(--bluetint); border-color: var(--blue); color: var(--blue); }
.k4card .k4b:active { background: #E6EFF6; }
.k4card .k4b:disabled { opacity: .5; cursor: default; }
:is(.k4card, .k4fup, .k5parkrow) .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, .k4fup, .k5parkrow) .k4open:hover { text-decoration: underline; }

/* ------------------------------------------- retired in wave 6 ---------- */
/* The 275px call card (`.k4today`), its four-row internals and the "promised
   follow-ups" strip under it (`.k4fups`) were the 1,715px Today page. WAVE6 §4.1
   replaces all three with 44px rows in a work surface and one detail pane, so
   their rules are gone rather than left to rot: `kit.todayCard`, `kit.followupRows`
   and today-parts' two block builders are no longer rendered by any view (the
   builders stay in the module because test/w5b.review.test.js pins their
   wording). The row shapes that replaced them live in web/styles/w6.css. */

/* ----------------------------------------------------------- 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; }
  .k4card .k4name { max-width: none; white-space: normal; }
  .k4card .k4reason { flex-wrap: wrap; gap: 4px 8px; }
  .k4card :is(.k4hl, .k4q) { white-space: normal; }
  .k4card :is(.k4stage, .k4contact) { display: none; }

  .k4card .k4acts { flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .k4card .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. */
  .k4card .k4open { display: 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) {
  .k4card .k4name { max-width: 220px; }
  .k4card .k4b { padding: 0 9px; font-size: 13px; }
  .k4handout .k4tr { grid-template-columns: minmax(130px, 1.4fr) 92px 100px minmax(120px, 1.4fr) 150px; }
}

/* ==========================================================================
   WAVE 5 — LANE B: the rep loop (W5-05 dated follow-ups, W5-06 the outcome
   sheet, W5-07 undo + parked, W5-08 the hand-out block, W5-T2-12 extras).
   --------------------------------------------------------------------------
   Everything below is token-driven. Two rules it must not break:

   1. --navy is a BACKGROUND here and never text (INTEGRATION_NOTES: the ink
      usages of --navy are re-pointed for dark mode in tokens.css by name, and a
      new navy TEXT rule would render #051622 on #101C26 at 6am with no test to
      catch it). Strong text is --ink; links are --blue.
   2. Motion comes from the tokens (--dur-*, --ease) and the keyframes in
      tokens.css. No lane invents a transition.
   ========================================================================== */

/* ---------------------------------------- retired in wave 6 (the blocks) -- */
/* "Due today" and "New from Danny" were two sections stacked ABOVE the ranked
   list (`.k5blk`, `.k5duerow`, `.k5newrow` and their internals). WAVE6 §4.1
   folds both into the SAME list as pinned groups, so the rows are `kit6.listRow`
   now and their rules live in web/styles/w6.css. The sentences did not change —
   `promiseLine` and "Flagged N days ago" still come out of today-parts.js — only
   the shape they are drawn in did.

   What stayed below: the outcome sheet, the undo bar, the dialer prompt, the
   reason-feedback taps, the footer and the parked rows. Every one of those is
   still rendered, and the sheet is now hosted by the detail pane. */

/* --------------------------------------------------------- the sheet ---- */
/* Desktop: an inline row that grows out of the card the rep tapped — NOT a
   modal, because a modal over a list is a page you have to escape from before
   you can make the next call. Mobile: the same markup as a bottom sheet. */

.k5sheet {
  display: grid; gap: 8px; padding: 12px 14px 13px;
  background: var(--surf2); border-top: 1px solid var(--line);
  animation: sig-fade-in var(--dur-2) var(--ease) both;
}
.k5sh { display: flex; align-items: center; gap: 9px; }
.k5stag {
  font-family: var(--raj); font-weight: 700; font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: #fff; background: var(--blue);
  border-radius: 4px; padding: 2px 8px; white-space: nowrap;
}
.k5sco {
  font-family: var(--raj); font-weight: 700; font-size: 14px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k5x {
  margin-left: auto; width: 28px; height: 28px; border: 0; background: transparent;
  color: var(--mute); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 6px;
}
.k5x:hover { background: var(--line2); color: var(--ink); }

.k5srow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.k5spre {
  font-family: var(--raj); font-weight: 700; font-size: 13.5px; color: var(--mute);
  white-space: nowrap; flex: none;
}
.k5snote {
  flex: 1 1 260px; min-width: 0; height: 38px; padding: 0 11px;
  border: 1px solid var(--rule2); border-radius: 6px; background: var(--card);
  color: var(--ink); font-family: var(--ui); font-size: 14px;
}
.k5snote:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--bluetint); }
.k5snote.live { border-color: var(--red); }
.k5snote::placeholder { color: var(--faint); }
.k5mic {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; 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;
  cursor: pointer; flex: none;
}
.k5mic:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.k5mic:disabled { opacity: .45; cursor: default; }
.k5mic svg { width: 15px; height: 15px; }
.k5mic.rec { border-color: var(--red); color: var(--red); }
.k5dict { font-size: 12px; color: var(--mute); min-height: 0; display: flex; align-items: center; gap: 7px; }
.k5dict:empty { display: none; }
.k5dict .lv { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.k5dict .lv i { width: 2.5px; background: var(--red); border-radius: 2px; animation: lv .9s ease-in-out infinite; }
.k5dict .lv i:nth-child(2) { animation-delay: .15s; }
.k5dict .lv i:nth-child(3) { animation-delay: .3s; }
.k5dict .lv i:nth-child(4) { animation-delay: .45s; }

.k5chips .k5clb {
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint);
  font-weight: 600; white-space: nowrap; flex: none;
}
.k5chip { height: 30px; font-size: 12.5px; }
.k5pick { display: inline-flex; align-items: center; gap: 6px; }
.k5pick span {
  font-size: 12.5px; color: var(--mute); white-space: nowrap;
}
.k5pick input[type="date"] {
  height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--ink); font-family: var(--ui); font-size: 12.5px;
}
.k5lost .k5chip { font-size: 12px; }

.k5sfoot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.k5shint { font-size: 12px; color: var(--faint); flex: 1 1 auto; min-width: 0; }
.k5sfoot .k5save { flex: none; min-width: 0; height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; }
.k5sfoot .k5save svg { width: 14px; height: 14px; }

/* ------------------------------------------------------ quiet controls --- */
/* `.k4b` was only ever styled INSIDE a card (`:is(.k4card, .k4today) .k4b`), and
   the three places wave 6 still uses it — the sheet's Cancel, the footer's "Show
   10 more" and the pane banner's Done / Got it — are all outside one, so they
   were falling back to the browser's own button. Same 34px hairline control,
   declared where they can see it. The pane's own copy stays in w6.css. */

:is(.k5sheet, .k5foot, .w6tban) .k4b {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; 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: 13px; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
:is(.k5sheet, .k5foot, .w6tban) .k4b:hover { background: var(--bluetint); border-color: var(--blue); color: var(--blue); }
:is(.k5sheet, .k5foot, .w6tban) .k4b:disabled { opacity: .5; cursor: default; }
:is(.k5sheet, .k5foot, .w6tban) .k4b svg { width: 13px; height: 13px; }

/* --------------------------------------------- the brief, compact (§4.2) -- */
/* Danny's page now carries a summary strip above the brief and a work surface
   below it, so the brief gives back the rhythm it had when it was the top of an
   otherwise empty page. Same panel, same three groups, same toggle. */

.k4brief { margin-bottom: 12px; }
.k4brief .k4bb { padding: 10px 13px 11px; }
.k4brief .k4bgrid { gap: 16px; }
.k4brief .k4bgrp li { font-size: 12.5px; line-height: 1.4; }
.k4brief .k4bmore { margin-top: 9px; padding-top: 9px; }

/* ----------------------------------------------------------- undo bar --- */
/* The toast IS the undo. --navy as a BACKGROUND (its other job), white ink on
   it, so dark mode needs no special case. */

.k5undo {
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 190%);
  display: flex; align-items: center; gap: 13px; z-index: 82;
  background: var(--navy); color: #fff; padding: 13px 16px 13px 20px; border-radius: 11px;
  box-shadow: var(--shadow-float);
  transition: transform var(--dur-3) cubic-bezier(.2,.9,.3,1.15);
}
.k5undo.show { transform: translate(-50%, 0); }
.k5undo .k5uk { width: 25px; height: 25px; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex: none; }
.k5undo .k5uk svg { width: 14px; height: 14px; color: #fff; }
.k5undo .k5ut b { font-family: var(--raj); font-size: 15px; }
.k5undo .k5ut small { display: block; color: var(--navyink); font-size: 12.5px; }
.k5undo .k5ub {
  flex: none; height: 32px; padding: 0 14px; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff;
  font-family: var(--raj); font-weight: 700; font-size: 13.5px;
}
.k5undo .k5ub:hover { background: rgba(255,255,255,.22); }
.k5undo .k5ub:disabled { opacity: .5; cursor: default; }

/* ------------------------------------------------------ dialer return --- */
/* "How did it go with Sunny Grove?" — asked once, on returning to the tab
   within half an hour of tapping the number, and never again that day. */

.k5dial {
  position: fixed; left: 12px; right: 12px; bottom: 74px; z-index: 84;
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 13px; box-shadow: var(--shadow-float);
  backdrop-filter: var(--blur-float);
  transform: translateY(180%); transition: transform var(--dur-3) var(--ease);
}
.k5dial.show { transform: translateY(0); }
.k5dial .k5dt { flex: 1 1 auto; min-width: 0; }
.k5dial .k5dt b { font-family: var(--raj); font-size: 14.5px; color: var(--ink); display: block; }
.k5dial .k5dt small { font-size: 12px; color: var(--mute); }
.k5dial .btn.go { flex: none; min-width: 0; height: 38px; padding: 0 16px; }

/* --------------------------------------------------------- card extras -- */
/* A text link beside the number on a phone, and two taps that say whether the
   reason was worth reading. Both inline: the card's height budget is fixed. */

.k5sms {
  display: inline-flex; align-items: center; gap: 5px; flex: none; text-decoration: none;
  font-family: var(--raj); font-weight: 700; font-size: 13px; color: var(--blue);
}
.k5sms svg { width: 14px; height: 14px; }
.k5fb { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.k5fb .k5fbb {
  height: 22px; padding: 0 8px; border: 1px solid transparent; border-radius: 11px;
  background: transparent; color: var(--faint); font-family: var(--ui); font-size: 11px;
  cursor: pointer; white-space: nowrap; opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.k4card:hover .k5fb .k5fbb, .k5fb.done .k5fbb { opacity: 1; }
.k5fb .k5fbb:hover { border-color: var(--line); color: var(--ink2); background: var(--card); }
.k5fb .k5fbb.on { border-color: var(--blue); color: var(--blue); background: var(--bluetint); opacity: 1; }
.k5fb.done .k5fbb:not(.on) { opacity: .35; }

/* --------------------------------------------------------- the footer --- */
/* One line: the sentence that ends the page, what is left, what is behind it,
   and where the parked companies went. */

.k5foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 0 2px; min-height: 30px;
}
.k5foot .k4end { margin: 0; padding: 0; text-align: left; flex: none; }
.k5left { font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; flex: none; }
/* The rolling count. `vertical-align:bottom` is the token default (it clips a
   digit travelling upward); on a 12.5px meta line that drops it below the
   baseline of the word beside it, so this one sits on the baseline instead. */
.k5left .numroll {
  font-family: var(--raj); font-weight: 700; font-size: 15px; color: var(--ink);
  vertical-align: baseline; line-height: 18px;
}
.k5wait { font-size: 12.5px; color: var(--faint); flex: 1 1 auto; min-width: 0; }
.k5showmore { height: 28px; padding: 0 12px; font-size: 12.5px; flex: none; }
.k5parked { flex: none; }
.k5parked a {
  font-size: 12.5px; color: var(--mute); text-decoration: none;
  border-bottom: 1px dashed var(--rule2); padding-bottom: 1px;
}
.k5parked a:hover { color: var(--blue); border-color: var(--blue); }
/* The footer after the last card is logged: the end line, the counter and
   "Show 10 more" are stripped and only the parked link is left, so it centres
   under the empty state rather than hanging off the left edge on its own. */
.k5footalone { justify-content: center; margin-top: 4px; min-height: 0; }

/* ------------------------------------------------------------- parked --- */

.k5parkrow {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--card); cursor: pointer; min-width: 0;
}
.k5parkrow:hover { background: var(--surf2); }
.k5parkrow .k5pl { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.k5parkrow .k5pr { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; justify-content: flex-end; }
.k5pwhy { font-size: 12.5px; color: var(--ink2); white-space: nowrap; flex: none; }
.k5pnote {
  flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--mute); font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k5pnote.k5none { color: var(--faint); font-style: normal; }
.k5pwhen { font-size: 11.5px; color: var(--faint); white-space: nowrap; flex: none; }
.k5back { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.k5back svg { width: 13px; height: 13px; }

/* =============================================================== phone === */

@media (max-width: 820px) {
  .k5parkrow { flex-wrap: wrap; gap: 4px 10px; padding: 10px 13px; }
  .k5parkrow .k5pl, .k5parkrow .k5pr { flex-wrap: wrap; gap: 4px 10px; flex: 1 1 100%; }
  .k5pnote { flex: 1 1 100%; white-space: normal; }
  .k5parkrow .k4name { flex: 1 1 auto; max-width: none; }
  .k5parkrow .k4b { min-height: 44px; height: auto; padding: 0 14px; }
  .k5foot { gap: 8px 12px; }
  /* A 30px control is a desk control; a thumb in a truck yard needs 44 (§9). */
  :is(.k5sheet, .k5foot, .w6tban) .k4b { min-height: 44px; font-size: 14px; }

  /* The bottom sheet. Same markup as the desktop inline row; the layer is the
     only difference, and floating layers may carry one soft shadow (DESIGN §7).

     IT SITS ABOVE THE TAB BAR, and `z-index` cannot do that job here. The sheet is
     a sibling of the card, so it lives inside `#wrap`, and `#wrap` carries the
     `.viewswap` cross-fade — a transform, even the identity one it settles on,
     opens a NEW STACKING CONTEXT. Every z-index inside it, 86 included, is then
     sealed under `#wrap`'s own paint order and can never rise above `.tabbar`
     (z-index 48, a child of #root). Measured on a 390x844 phone with the sheet
     open: `document.elementFromPoint` at the centre of Save returned
     `BUTTON.tabsrch` — a rep aiming at Save hit the tab bar's Search.

     So the sheet clears the bar geometrically instead, which is what its two
     siblings in this file already do (`.k5undo` bottom:70px, `.k5dial` bottom:74px)
     and which leaves the nav reachable rather than covering it. 56px is
     `.tabbar`'s min-height in app.css. */
  .k5sheet {
    position: fixed; left: 0; right: 0; z-index: 86;
    bottom: calc(56px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line); border-radius: 14px 14px 0 0;
    background: var(--card); box-shadow: var(--shadow-float);
    padding: 14px 14px 16px;
    animation: sig-slide-up var(--dur-2) var(--ease) both;
    max-height: 68vh; overflow-y: auto;
  }
  .k5snote { height: 46px; font-size: 16px; flex: 1 1 100%; }   /* 16px: no iOS zoom */
  .k5mic { height: 46px; }
  .k5chip { height: 40px; font-size: 14px; padding: 0 13px; }
  .k5pick input[type="date"] { height: 40px; font-size: 14px; }
  .k5sfoot { flex-wrap: wrap; }
  .k5shint { flex: 1 1 100%; order: -1; }
  .k5sfoot .k4b, .k5sfoot .btn { min-height: 46px; flex: 1 1 40%; justify-content: center; }
  .k5undo { left: 10px; right: 10px; bottom: 70px; transform: translateY(200%); }
  .k5undo.show { transform: translateY(0); }
  /* The reason-feedback taps are a desk affordance. On a phone they would sit
     between the reason and the four buttons a rep is aiming at in a truck yard,
     and DESIGN is explicit that nothing impressive may cost clarity. */
  .k5fb { display: none; }
}

@keyframes sig-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .k5sheet, .k5undo, .k5dial { animation-duration: 1ms; transition-duration: 1ms; }
}