/* ============================================================================
   Sales Floor — one page, read top to bottom.
   Surfaces are lifted with soft shadows rather than outlined; colour is spent
   only where something must be noticed. Spacing is an 8px scale.
   ========================================================================== */

/* Crextio-warm: a cream page washed toward yellow, with exactly two accents —
   a saturated yellow that marks the live thing, and near-black for everything
   that must be read first. No third hue competes for attention. */
/* Cool neutral, after the reference boards: a soft grey-blue page, white cards,
   and blue as the one accent that marks the live thing. Status hues (green,
   violet, amber, red) are reserved for states that genuinely differ in kind. */
:root {
  --bg:#eef0f5; --wash-1:#f2f4f8; --wash-2:#eaedf4; --wash-3:#e3e8f2;
  --surface:#fff; --surface-2:#f8fafc; --sunken:#f1f4f8;
  --ink:#131720; --ink-2:#59616f; --ink-3:#919aa9;
  --line:rgba(17,24,39,.07); --line-2:rgba(17,24,39,.13);
  --accent:#2f6df6; --accent-ink:#1d4ed8; --accent-soft:#e8effe;
  --dark:#161b25; --dark-2:#252b38;
  --good:#16a34a; --good-soft:#e7f7ed;
  --bad:#e0483a;  --bad-soft:#fdeceb;
  --warn:#d08106; --warn-soft:#fdf2e0;
  --violet:#8b5cf6; --cyan:#0891b2;
  --track:#e8ecf2;
  --sh-1:0 1px 2px rgba(17,24,39,.04),0 2px 6px rgba(17,24,39,.05);
  --sh-2:0 2px 6px -1px rgba(17,24,39,.05),0 10px 28px -6px rgba(17,24,39,.12);
  --sh-3:0 18px 48px -12px rgba(17,24,39,.22);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r:14px; --r-lg:22px; --r-xl:30px; --t:190ms cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html,body{margin:0}
body{color:var(--ink);font:400 14px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;letter-spacing:-.011em;
  background:var(--wash-1);min-height:100vh}
/* The wash sits behind everything and never scrolls, so the yellow stays where
   it was composed instead of drifting up a long page. */
body::before{content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(80% 55% at 100% 102%, var(--wash-3) 0%, transparent 60%),
    linear-gradient(160deg, #f5f7fa 0%, var(--wash-1) 52%, var(--wash-2) 100%)}
h1,h2{margin:0;letter-spacing:-.021em}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
svg{display:block;flex:0 0 auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Sidebar for where you are, top bar for what you are looking at. Grouped the
   way the platform's own rail is, so six destinations read as three ideas.
   The toggle is the only thing that opens it: widening on hover moved the page
   under the pointer every time it crossed the edge. */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh;
  max-width:1680px;margin:0 auto;--rail:70px;--rail-open:232px}
.shell:has(.side.pinned){--rail:var(--rail-open)}
.main{min-width:0;display:flex;flex-direction:column;gap:var(--s5);padding:var(--s5) var(--s5) var(--s6)}

/* No surface of its own: the page wash is fixed, so letting it show straight
   through is an exact match at every scroll position, which painting a colour
   over a gradient never is. Safe because the rail owns a grid column - content
   sits beside it, never under it, so there is nothing to hide. */
.side{position:sticky;top:0;align-self:start;height:100vh;width:var(--rail);z-index:35;
  display:flex;flex-direction:column;gap:var(--s4);padding:var(--s4) var(--s3);
  background:transparent;overflow:hidden;transition:width var(--t)}


.sidetop{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:0 5px;min-height:30px}
.side:not(.pinned) .sidetop{flex-direction:column;gap:var(--s2);padding:0}
/* The product's full name, not a shortening of it. Sized so it clears the
   toggle inside the open rail rather than being cut off by it. */
.side .brand{display:flex;align-items:center;gap:9px;padding:0;box-shadow:none;margin:0;
  min-width:0;white-space:nowrap;font-size:14.5px;letter-spacing:-.025em}
.side .brand img{width:26px;height:26px;flex:0 0 auto;border-radius:7px}
.side .brand b{font-weight:640;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
/* Collapsed, the wordmark has to leave the layout, not just fade: at opacity 0
   it still claimed 80px inside a 46px column, which centred the logo at -5 and
   clipped it against the rail's edge. */
.side:not(.pinned) .brand b{display:none}
.pin{border:0;background:transparent;color:var(--ink-3);width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;flex:0 0 auto;
  transition:background var(--t),color var(--t)}
.pin:hover{background:var(--sunken);color:var(--ink)}
.side.pinned .pin{color:var(--accent)}

.rail{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-height:0;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail button{display:flex;align-items:center;gap:13px;border:0;background:transparent;
  color:var(--ink-2);padding:10px 11px;border-radius:11px;font-size:13.5px;font-weight:500;
  text-align:left;white-space:nowrap;transition:background var(--t),color var(--t),box-shadow var(--t)}
.rail button svg{flex:0 0 auto;color:var(--ink-3);transition:color var(--t)}
.rail button span{opacity:0;transition:opacity var(--t)}
/* Collapsed, the label must leave the layout rather than just fade: at opacity
   0 it still claimed its width, so every button was wider than the rail and the
   icons sat against the left padding instead of centred in it. */
.side:not(.pinned) .rail button{justify-content:center;padding:11px 0;gap:0}
.side:not(.pinned) .rail button span{display:none}
.rail button:hover{background:var(--sunken);color:var(--ink)}
.rail button:hover svg{color:var(--ink-2)}
/* The selected item is lifted rather than tinted: it reads as the card you are
   standing on, which is how the platform marks it. */
.rail button[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600;
  box-shadow:var(--sh-1)}
.rail button[aria-selected="true"] svg{color:var(--accent)}

.sidefoot{display:flex;flex-direction:column;gap:2px;padding:var(--s3) 8px 0;white-space:nowrap;
  box-shadow:inset 0 1px 0 var(--line);font-size:11.5px;color:var(--ink-3);
  opacity:0;transition:opacity var(--t)}

/* Everything that only makes sense at full width fades in together. */
/* Everything that only makes sense at full width appears together, and only
   when the sidebar has been opened. */
.side.pinned .rail button span,.side.pinned .sidefoot{opacity:1}

.hello{font-size:14.5px;font-weight:600;letter-spacing:-.02em;padding-left:var(--s2);
  white-space:nowrap;margin-right:var(--s2)}
@media (max-width:1180px){.hello{display:none}}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  /* width has to be released here, or the collapsed rail width from the desktop
     rule squeezes the horizontal nav out of existence. */
  .side{position:sticky;top:0;height:auto;width:auto;flex-direction:row;align-items:center;
    gap:var(--s3);padding:var(--s3) var(--s4);box-shadow:inset 0 -1px 0 var(--line);z-index:30;
    overflow:visible}
  /* Flat strip: the toggle has nothing to toggle, and the mark sits beside the
     icons rather than above them. */
  .side:not(.pinned) .sidetop{flex-direction:row;padding:0 5px}
  /* The mark alone, at a fixed size: letting the brand size to its content left
     it claiming the whole row and squeezing the rail to nothing. */
  .sidetop{min-height:0}
  .side .brand{flex:0 0 auto}
  .side .brand b{display:none}
  .pin{display:none}
  /* basis 0, not auto, so the rail takes the rest of the row whatever is in it */
  .rail{flex:1 1 0;min-width:0;flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:var(--s1)}
  .rail::-webkit-scrollbar{display:none}
  /* The collapsed-rail rule zeroes horizontal padding, which is right in a
     70px column and far too tight in a horizontal strip. */
  .rail button,.side:not(.pinned) .rail button{white-space:nowrap;padding:8px 11px}
  .rail button span{display:none}
  .sidefoot{display:none}
  .main{padding:var(--s4);gap:var(--s4)}
}

.boot{padding:120px 0;text-align:center;color:var(--ink-3);font-size:13px}
.dim{color:var(--ink-3)}
.sm{font-size:12px;color:var(--ink-3)}
.strong{font-weight:550}
.good{color:var(--good)} .bad{color:var(--bad)} .accent{color:var(--accent)}
.num{text-align:right}

/* ------------------------------------------------------------------- bar */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:999px;padding:var(--s2) var(--s2) var(--s2) var(--s3);box-shadow:var(--sh-1);
  position:sticky;top:var(--s3);z-index:20}
.spacer{flex:1}
.stamp{font-size:12px;color:var(--ink-3)}
.seg{display:inline-flex;gap:2px;padding:4px;background:var(--sunken);border-radius:999px}
.seg button{border:0;background:transparent;color:var(--ink-2);padding:6px 14px;border-radius:999px;
  font-size:12.5px;font-weight:500;transition:background var(--t),color var(--t),box-shadow var(--t)}
.seg button:hover{color:var(--ink);background:rgba(255,255,255,.7)}
.seg button[aria-selected="true"]{background:var(--dark);color:#fff;box-shadow:var(--sh-1);font-weight:550}
.seg .sn{color:var(--ink-3);font-weight:400}
.seg button[aria-selected="true"] .sn{color:var(--ink-2)}
.btn{border:0;background:var(--surface);color:var(--ink);box-shadow:var(--sh-1);border-radius:999px;
  padding:6px 12px;font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px;
  transition:box-shadow var(--t),transform var(--t)}
.btn:hover:not(:disabled){box-shadow:var(--sh-2);transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;box-shadow:none;color:var(--ink-2)}
.btn.ghost:hover{background:var(--sunken);transform:none;box-shadow:none}
.btn.ghost[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent-ink)}
.spin{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.range{display:inline-flex;align-items:center;gap:var(--s1)}
.range input{border:0;background:var(--surface);box-shadow:var(--sh-1);border-radius:999px;padding:6px 12px;
  font-size:12px;color-scheme:light}
.range .dash{font-size:12px;color:var(--ink-3)}

/* ------------------------------------------------------------- scoreboard */
.score{display:grid;gap:var(--s3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.score{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1180px){.score{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1460px){.score{grid-template-columns:repeat(9,minmax(0,1fr))}}
.kpi{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--s4) var(--s4) var(--s3);
  display:flex;flex-direction:column;gap:var(--s2);transition:box-shadow var(--t),transform var(--t)}
.kpi:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.kh{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.kh svg{color:var(--ink-3)}
.kv{font-size:38px;font-weight:380;line-height:1;letter-spacing:-.045em}
.kf{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:auto;
  font-size:11.5px;color:var(--ink-3)}
/* Yellow is the marker colour, not a text colour: at 38px on cream it falls
   below readable contrast, so accented values take the dark mustard and the
   yellow does its work as a dot beside them. */
.kpi.good .kv{color:var(--good)} .kpi.good .kh svg{color:var(--good)}
.kpi.bad{background:var(--bad-soft)} .kpi.bad .kv{color:var(--bad)} .kpi.bad .kh svg{color:var(--bad)}
.kpi.accent .kv{color:var(--accent-ink)} .kpi.accent .kh svg{color:var(--accent)}
.kpi.accent{background:linear-gradient(160deg,var(--accent-soft) 0%,var(--surface) 52%)}
.dl{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:6px;white-space:nowrap}
.dl.good{background:var(--good-soft);color:var(--good)}
.dl.bad{background:var(--bad-soft);color:var(--bad)}
.dl.flat{background:var(--sunken);color:var(--ink-3);font-weight:500}

/* ---------------------------------------------------------------- panels */
.panel{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-1);
  transition:box-shadow var(--t)}
.panel:hover{box-shadow:var(--sh-2)}
.panel>header{padding:var(--s4) var(--s5) var(--s3);display:flex;justify-content:space-between;
  align-items:flex-start;gap:var(--s4);flex-wrap:wrap}
.panel h2{font-size:17px;font-weight:560;letter-spacing:-.028em}
.panel .sub{margin:4px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:78ch}
.panel > .body { padding:0 var(--s5) var(--s5) }
.two{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr)}
/* Two 560px tables need more than 1000px of page once the rail and padding are
   taken out; below this they stack rather than overflow. */
@media (min-width:1220px){.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.empty{margin:var(--s2) 0 var(--s4);font-size:13px;color:var(--ink-3)}
.fine{margin:var(--s3) 0 0;font-size:12px;color:var(--ink-3)}

/* ---------------------------------------------------------------- tables */
.tablewrap{overflow:auto;max-height:560px;margin:0 calc(var(--s5)*-1);padding:0 var(--s5)}
table{width:100%;min-width:560px;border-collapse:collapse}
th{padding:var(--s2) var(--s3);font-size:11.5px;font-weight:500;color:var(--ink-3);text-align:right;
  position:sticky;top:0;background:var(--surface);z-index:2;white-space:nowrap;
  box-shadow:inset 0 -1px 0 var(--line)}
th:first-child,td:first-child{text-align:left;padding-left:0}
th:last-child,td:last-child{padding-right:0}
td{padding:var(--s3);font-size:13.5px;text-align:right;vertical-align:top;box-shadow:inset 0 -1px 0 var(--line)}
tbody tr:last-child td{box-shadow:none}
tbody tr{transition:background var(--t)}
tbody tr:hover td{background:var(--surface-2)}
tr.total td{font-weight:650;box-shadow:inset 0 1px 0 var(--line-2);background:var(--surface-2)}
td .cv{font-size:14.5px;font-weight:600}
td .cd{margin-top:3px}
.mb{display:block;width:60px;margin:5px 0 0 auto;height:3px;background:var(--track);border-radius:999px;overflow:hidden}
.mb span{display:block;height:100%;background:var(--accent);border-radius:999px}
.pill{display:inline-flex;align-items:center;background:var(--sunken);border-radius:7px;padding:2px 8px;
  font-size:11.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.pill.on{background:var(--accent-soft);color:var(--accent)}
.pill.ok{background:var(--good-soft);color:var(--good)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.crit{background:var(--bad-soft);color:var(--bad)}

/* -------------------------------------------------------------- pipeline */
.pl{display:flex;align-items:center;gap:var(--s3);padding:5px 0}
.pll{flex:0 0 140px;font-size:13px;color:var(--ink-2)}
.plt{flex:1;height:8px;background:var(--track);border-radius:999px;overflow:hidden}
.plf{display:block;height:100%;border-radius:999px;background:var(--ink-3);transition:width .5s var(--t)}
.plf.accent{background:var(--accent)} .plf.good{background:var(--good)}
.plf.bad{background:var(--bad)} .plf.warn{background:var(--warn)}
.plv{flex:0 0 56px;text-align:right;font-size:13.5px;font-weight:600}

/* ---------------------------------------------------------------- footer */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);
  padding-top:var(--s4);font-size:12px;color:var(--ink-3)}
.card-lg{max-width:560px;margin:80px auto;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:var(--s6)}
.card-lg h2{font-size:19px;margin-bottom:var(--s3)}
.card-lg p{color:var(--ink-2);line-height:1.7;font-size:13.5px}
.wtrack{margin:var(--s4) 0 var(--s2);height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.wtrack span{display:block;height:100%;background:var(--accent);transition:width .4s var(--t)}

/* login */
body.centered{display:grid;place-items:center;min-height:100vh}
.login{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:var(--s6);
  width:min(370px,92vw);display:flex;flex-direction:column;gap:var(--s2)}
.login h1{font-size:20px}
.login .muted{color:var(--ink-3);font-size:13px;margin:0 0 var(--s3)}
.login label{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.login input{padding:10px 12px;border:0;background:var(--sunken);border-radius:9px;
  box-shadow:inset 0 0 0 2px transparent;transition:box-shadow var(--t)}
.login input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.login button{margin-top:var(--s3);padding:11px;border:0;border-radius:9px;background:var(--accent);
  color:#fff;font-weight:560}
.login button:hover{background:var(--accent-ink)}
.login .err{color:var(--bad);font-size:12.5px;margin:var(--s2) 0 0}

/* Tabs: click a thing, see that thing. */

/* Filters sitting above a table need air between them and the rows. */
.panel > .body > .seg { margin-bottom: var(--s4); flex-wrap: wrap; }

/* --- the board fills the window, and only its columns scroll --- */
/* A kanban that makes the page scroll is the wrong thing scrolling: the column
   heads leave the screen and you lose track of which pile you are reading. The
   board is pinned to the viewport instead, and each column scrolls inside it. */
.main.boardmode{height:100vh;overflow:hidden;padding-bottom:var(--s5)}
.main.boardmode .boardpanel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
/* Every pixel above the columns is a pixel of card you cannot see. The long
   explanation goes: the callout underneath already says what a card does, and
   the columns are labelled with the stage they hold. */
.main.boardmode .boardpanel>header{flex:0 0 auto;padding-bottom:var(--s2)}
.main.boardmode .boardpanel>header .sub{display:none}
.main.boardmode .hrow{gap:var(--s2)}
.main.boardmode .sbar{flex-basis:260px;max-width:300px}
.main.boardmode .callout{padding:8px var(--s3);margin-bottom:var(--s3);font-size:12.5px}
.main.boardmode .boardpanel>.body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.main.boardmode .callout{flex:0 0 auto}
/* One row, always. Wrapping splits the available height between rows, which
   left every column half as tall as the space it had; scrolling sideways keeps
   each one full height, which is the point of pinning the board. */
.main.boardmode .board{flex:1 1 auto;min-height:0;padding-bottom:0;
  grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(210px,1fr);
  align-items:stretch;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.main.boardmode .board::-webkit-scrollbar{height:8px}
.main.boardmode .board::-webkit-scrollbar-track{background:transparent}
.main.boardmode .board::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}
.main.boardmode .col{max-height:100%;height:100%}
.main.boardmode .cards{max-height:none;flex:1 1 auto;min-height:0}
.main.boardmode .foot{display:none}

/* -------------------------------------------------------------------- board */
/* Each column is a contained panel: a tinted header carrying a coloured accent
   bar and the count, over a body of white cards. The panel is what makes a
   board read as a board — transparent columns left the cards floating with
   nothing to group them. */
.board { display:grid; gap:var(--s3); align-items:start; padding-top:var(--s1);
  grid-template-columns:repeat(auto-fit,minmax(156px,1fr)) }
@media (max-width:1100px){ .board { grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:720px){ .board { grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* Past about seven stages nothing sensible fits on one row, so the board scrolls
   sideways as a kanban does rather than wrapping columns onto a second row,
   where they stop reading as a pipeline. */
.board.scrollx { grid-auto-flow:column; grid-template-columns:none;
  grid-auto-columns:minmax(208px,1fr); overflow-x:auto; padding-bottom:var(--s2);
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
  scroll-snap-type:x proximity }
.board.scrollx > .col { scroll-snap-align:start }
.board.scrollx::-webkit-scrollbar { height:8px }
.board.scrollx::-webkit-scrollbar-track { background:transparent }
.board.scrollx::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:999px }
@media (max-width:1100px){ .board.scrollx { grid-template-columns:none } }
@media (max-width:720px){ .board.scrollx { grid-template-columns:none; grid-auto-columns:minmax(168px,1fr) } }

/* A column is one surface: a coloured header welded to a sunken well of cards.
   The well is tinted and the cards are white, so a card reads as an object
   sitting in a column rather than as a slightly greyer patch of the column. */
.col { --c:#64748b; display:flex; flex-direction:column; min-width:0; min-height:0;
  background:var(--sunken); border-radius:16px; box-shadow:0 0 0 1px var(--line), var(--sh-1);
  overflow:hidden }

/* One tone per column drives the header, the avatar and the status chip. */
.colh { display:flex; align-items:center; gap:8px; padding:10px 12px; min-height:44px;
  background:var(--c); color:#fff }
.colh .ic { width:22px; height:22px; border-radius:50%; flex:0 0 auto; display:grid;
  place-items:center; background:rgba(255,255,255,.9); color:var(--c) }
.colh .ic svg { width:12px; height:12px }
/* Status names run to "Meeting Rescheduled"; wrapping to a second line beats
   clipping the word that distinguishes one column from its neighbour. */
.colh .cn { font-size:12.5px; font-weight:620; letter-spacing:-.012em; min-width:0;
  line-height:1.22; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical }
.colh .cc { margin-left:auto; flex:0 0 auto; font-size:11.5px; font-weight:650;
  background:rgba(0,0,0,.16); padding:2px 8px; border-radius:999px }

.col.blue   { --c:#2f6df6 }
.col.green  { --c:#16a34a }
.col.violet { --c:#8b5cf6 }
.col.amber  { --c:#e08a0b }
.col.red    { --c:#e0483a }
.col.cyan   { --c:#0891b2 }
.col.slate  { --c:#64748b }

.cards { display:flex; flex-direction:column; gap:7px; padding:9px;
  max-height:clamp(280px, calc(100vh - 380px), 660px);
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent }
.cards::-webkit-scrollbar { width:6px }
.cards::-webkit-scrollbar-track { background:transparent }
.cards::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:999px }

/* Says what the column is showing without making you read the button. */
.colf { flex:0 0 auto; padding:7px 12px 9px; font-size:10.5px; color:var(--ink-3);
  text-align:center; box-shadow:inset 0 1px 0 var(--line) }

.card { background:var(--surface); border-radius:11px; box-shadow:0 0 0 1px var(--line);
  padding:9px 10px; flex:0 0 auto; cursor:pointer;
  transition:box-shadow var(--t),transform var(--t) }
.card:hover { box-shadow:0 0 0 1px var(--c), var(--sh-2); transform:translateY(-1px) }
.card:focus-visible { outline:2px solid var(--c); outline-offset:1px }
/* An overdue follow-up is the one thing on a board worth interrupting a scan
   for, so it gets an edge rather than another word in the meta row. */
.card.late { box-shadow:inset 3px 0 0 var(--bad), 0 0 0 1px var(--line) }
.card.late:hover { box-shadow:inset 3px 0 0 var(--bad), 0 0 0 1px var(--c), var(--sh-2) }
.card .tag { display:inline-block; font-size:10px; font-weight:560; padding:2px 6px;
  border-radius:5px; margin-bottom:6px; max-width:100%; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  background:color-mix(in srgb,var(--c) 13%,#fff); color:var(--c) }
/* Two lines, so every card in a column is the same height and the column scans
   as a list. The full name is on the title attribute. */
.card .ct { margin:0; font-size:12.5px; font-weight:600; line-height:1.35; letter-spacing:-.008em;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.card .cfoot { margin-top:8px; display:flex; align-items:center; gap:7px }
.card .av { flex:0 0 auto; width:21px; height:21px; border-radius:50%; display:grid; place-items:center;
  font-size:9px; font-weight:650; background:color-mix(in srgb,var(--c) 15%,#fff); color:var(--c) }
.card .meta { margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end;
  align-items:center; gap:2px 7px; font-size:10.5px; color:var(--ink-3) }
.card .meta .m { display:inline-flex; align-items:center; gap:3px; white-space:nowrap }
.card .meta .m.crit { color:var(--bad); font-weight:600 }
.card .meta .m.dim { color:var(--ink-3); opacity:.72 }

.nocards { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:26px 0; color:var(--ink-3); font-size:11.5px }
.loadmore { flex:0 0 auto; border:1px dashed var(--line-2); background:transparent; color:var(--ink-2);
  border-radius:9px; padding:8px; font-size:11px; font-weight:560;
  transition:background var(--t),color var(--t),border-color var(--t) }
.loadmore:hover { background:var(--sunken); color:var(--accent); border-color:transparent }
.hrow { display:flex; flex-wrap:wrap; gap:var(--s2) }

/* ============================================================================
   Graphs — the whole picture on one page.
   Two accents carry it: yellow marks the one thing worth looking at, near-black
   carries the quantity. Cards are generous and rounded; the page wash supplies
   the warmth so the cards themselves can stay quiet.
   ========================================================================== */
.gpage{display:flex;flex-direction:column;gap:var(--s5)}
.gpage .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--s5)}

/* --- bento: the wide chart, then two square cards beside it --- */
.bento{display:grid;gap:var(--s5);grid-template-columns:1fr}
/* The day chart keeps the full row. Squeezed into a third of it, fourteen bars
   collapsed to about 135px tall and stopped being readable. */
@media (min-width:900px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento .wide{grid-column:1/-1}}
.panel.tall>.body{display:flex;flex-direction:column;justify-content:center;gap:var(--s4)}
.panel>.body.mid{align-items:center}
.under{font-size:13px;color:var(--ink-2);text-align:center}
.under b{font-weight:640;color:var(--ink)}
/* Facts under a chart: label left, figure right, one per line. */
.facts{margin:var(--s2) 0 0;width:100%}
.facts div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:9px var(--s2);border-radius:9px;transition:background var(--t)}
.facts div:hover{background:var(--surface-2)}
.facts div+div{box-shadow:inset 0 1px 0 var(--line)}
.facts dt{font-size:12.5px;color:var(--ink-3)}
.facts dd{margin:0;font-size:15px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}

/* --- the "open the rows behind this" arrow --- */
/* Keep the arrow on the title's row: letting it wrap below a long subtitle
   leaves it stranded in the card's whitespace. */
.panel>header:has(.go){flex-wrap:nowrap}
.go{border:0;background:var(--sunken);color:var(--ink-2);width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;flex:0 0 auto;transition:background var(--t),color var(--t),transform var(--t)}
.go:hover{background:var(--dark);color:var(--accent);transform:translate(1px,-1px)}

/* --- hero: sits on the page wash, not in a card --- */
.hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s5);padding:var(--s2) var(--s1) 0}
.heroL{flex:1 1 440px;min-width:0}
.tagpill{display:inline-block;padding:5px 14px;border-radius:999px;font-size:11.5px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;background:var(--surface);color:var(--ink-2);box-shadow:var(--sh-1)}
.hero h2{margin:var(--s3) 0 var(--s4);font-size:clamp(28px,4.2vw,46px);font-weight:300;
  line-height:1.1;letter-spacing:-.04em;max-width:18ch}
.hero p{margin:var(--s3) 0 0;font-size:13.5px;line-height:1.65;color:var(--ink-2);max-width:60ch}
.heroR{display:flex;gap:var(--s4);flex-wrap:wrap}
/* The reference's mesh-gradient stat cards: a label, one large figure, and the
   counts it was computed from, so the number is never unaccompanied. */
.statcard{border:0;padding:var(--s4) var(--s5);text-align:left;display:flex;flex-direction:column;
  gap:2px;min-width:186px;border-radius:var(--r-lg);color:#fff;box-shadow:var(--sh-2);
  transition:transform var(--t),box-shadow var(--t)}
.statcard:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.statcard b{font-size:clamp(32px,4.2vw,46px);font-weight:340;line-height:1.05;letter-spacing:-.045em}
.statcard .sl{font-size:12px;font-weight:550;opacity:.92}
.statcard .ss{font-size:11.5px;opacity:.78;margin-top:3px}
.statcard.g1{background:radial-gradient(120% 120% at 8% 12%,#8b5cf6 0%,transparent 55%),
  radial-gradient(120% 120% at 92% 88%,#2f6df6 0%,transparent 60%),linear-gradient(135deg,#5b7cf6,#3b5fe0)}
.statcard.g2{background:radial-gradient(120% 120% at 10% 10%,#22d3a7 0%,transparent 58%),
  radial-gradient(120% 120% at 90% 90%,#0e9f6e 0%,transparent 60%),linear-gradient(135deg,#19b98a,#0f9d63)}

/* --- labelled ratio strip, after the reference's capacity bar --- */
.mix{display:flex;gap:var(--s2);align-items:flex-end}
.mseg{min-width:64px;transition:transform var(--t)}
.mseg:hover{transform:translateY(-2px)}
.mpc{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:5px;font-weight:500}
.mfill{display:flex;align-items:center;height:46px;border-radius:999px;padding:0 var(--s4);
  font-size:13px;font-weight:550;white-space:nowrap;overflow:hidden}
.mseg.on .mfill{background:var(--accent);color:#fff}
.mseg.good .mfill{background:var(--good);color:#fff}
.mseg.ink .mfill{background:var(--dark);color:#fff}
.mseg.off .mfill{background:var(--surface);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2);
  background-image:repeating-linear-gradient(45deg,transparent 0 5px,rgba(22,21,15,.07) 5px 9px)}

/* --- svg charts --- */
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart .ax{font-family:Inter,system-ui,sans-serif;font-weight:500;fill:var(--ink-3)}
.chart .ax.hi{font-weight:660;fill:var(--ink)}
.chart .ax.co{font-weight:600;fill:#fff}
.bars .dbar .fill{transition:opacity var(--t)}
.bars:hover .dbar:not(:hover) .fill{opacity:.45}
.bars .dbar{cursor:default}
.bars .callout{pointer-events:none}
.chart .dot circle{transition:r var(--t)}
.chart .dot:hover circle{r:9}
.gauge{width:100%;max-width:250px;height:auto}
.gauge .gv{font:300 40px Inter,system-ui,sans-serif;fill:var(--ink);letter-spacing:-.04em}
.gauge .gl{font:500 12px Inter,system-ui,sans-serif;fill:var(--ink-3)}

.donutrow{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.donut{width:160px;height:160px;flex:0 0 auto}
.donut .slice{transition:opacity var(--t),transform var(--t);transform-origin:80px 80px;cursor:default}
.donutrow:hover .slice:not(.lit){opacity:.38}
.donut .slice.lit{transform:scale(1.045)}
.donut .dn{font:300 26px Inter,system-ui,sans-serif;fill:var(--ink);letter-spacing:-.04em}
.donut .dl2{font:500 11px Inter,system-ui,sans-serif;fill:var(--ink-3)}

.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1 1 180px}
.legend.inline{flex-direction:row;flex-wrap:wrap;gap:var(--s4);margin:var(--s3) 0 0}
.legend li{display:flex;align-items:center;gap:var(--s2);font-size:13px;border-radius:8px;
  transition:background var(--t)}
.legend li.lit{background:var(--sunken)}
.legend .sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.legend .sw.hatch{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);
  background-image:repeating-linear-gradient(45deg,transparent 0 2px,rgba(22,21,15,.3) 2px 4px)}
.legend .ll{color:var(--ink-2)}
.legend .lv{margin-left:auto;font-weight:600}
.legend .lp{width:46px;text-align:right;color:var(--ink-3);font-size:12px}
.legend.inline .lv,.legend.inline .lp{margin-left:0}

/* --- funnel / hour rows: label · track · figures --- */
.fn,.hr{display:flex;align-items:center;gap:var(--s3);padding:7px var(--s2);border-radius:10px;
  transition:background var(--t)}
.fn:hover,.hr:hover{background:var(--surface-2)}
.fl,.hl{flex:0 0 140px;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft,.ht{flex:1 1 auto;position:relative;height:18px;border-radius:999px;background:var(--track);overflow:hidden;min-width:60px}
.ff,.hf,.hc{position:absolute;inset:0 auto 0 0;border-radius:999px;transition:width 520ms cubic-bezier(.2,.7,.3,1)}
.hf{background:var(--track);box-shadow:inset 0 0 0 1px var(--line)}
.hc{background:var(--dark)}
.hr.peak .hc{background:var(--accent)}
.fv,.hv{flex:0 0 56px;text-align:right;font-weight:600;font-size:13px}
.fp,.hp{flex:0 0 52px;text-align:right;font-size:12.5px;color:var(--ink-3)}
/* A rate off a handful of dials is noise; show it, but stop it reading loud. */
.hp.thin{opacity:.42;font-style:italic}

/* --- the dials -> contacts -> connected chain --- */
.spreadtop{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);
  padding:var(--s3) var(--s4);margin-bottom:var(--s3);border-radius:var(--r);
  background:var(--sunken)}
.spreadtop span{display:flex;flex-direction:column;font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.spreadtop b{font-size:22px;font-weight:420;letter-spacing:-.03em;color:var(--ink);line-height:1.15}
.spreadtop .ar{color:var(--ink-3);align-self:center}
@media (max-width:640px){.spreadtop .ar{display:none}}

/* An instruction people need before they act belongs above the thing it is
   about, not in the grey subtitle they have already read past. */
.callout{display:flex;align-items:center;gap:10px;margin:0 0 var(--s4);padding:11px var(--s4);
  border-radius:var(--r);font-size:13px;line-height:1.55;color:var(--accent-ink);
  background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
.callout svg{flex:0 0 auto;color:var(--accent)}
.callout b{font-weight:650}
@media (max-width:640px){.callout{align-items:flex-start}.callout svg{margin-top:2px}}

/* The question a form answer is answering, when we have a name for it. */

/* --- search, inside the panels that list things --- */
.sbar{display:flex;align-items:center;gap:var(--s2);flex:1 1 320px;min-width:230px;max-width:460px}
.sfield{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center}
.sfield>svg{position:absolute;left:13px;color:var(--ink-3);pointer-events:none}
.sfield input{width:100%;border:0;background:var(--sunken);border-radius:999px;
  padding:9px 38px 9px 36px;font-size:13px;box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow var(--t),background var(--t)}
.sfield input::placeholder{color:var(--ink-3)}
.sfield input:focus{outline:0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--accent)}
.sfield input:focus+.sclear,.sfield input:focus~svg{color:var(--ink-2)}
.sclear{position:absolute;right:6px;border:0;background:transparent;color:var(--ink-3);
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  transition:background var(--t),color var(--t)}
.sclear:hover{background:var(--line);color:var(--ink)}
.sbar .btn.primary{flex:0 0 auto;padding:9px 18px}
.sbar .btn.primary:disabled{background:var(--track);color:var(--ink-3);cursor:default}
.mfil{margin-bottom:var(--s3);align-items:center}

/* While a search is applied the callout reports it instead of the tip. */
.callout.find{background:var(--surface-2);color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.callout.find svg{color:var(--ink-3)}
.callout.find b{color:var(--ink)}

@media (max-width:640px){
  .sbar{flex-basis:100%;max-width:none}
}

/* A recording telecrm will not let us play still says it exists. */
td.rec{white-space:nowrap}
td.rec audio{height:32px;max-width:200px}
.recy{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3);font-size:12px}

/* --- one lead, opened over the board --- */
/* A dialog rather than a page swap: the board stays where it was, so closing
   puts you back exactly where you were reading instead of at the top. */
.card[data-lead]{cursor:pointer}
.card[data-lead]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:var(--s5);
  background:rgba(17,24,39,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:fade 140ms ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* Rises as it opens, so the eye follows it off the board rather than having to
   find it. */
.sheet{width:min(1140px,100%);max-height:min(88vh,860px);display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);overflow:hidden;
  animation:rise 180ms cubic-bezier(.2,.7,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

.sheethead{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s4);padding:var(--s5) var(--s5) var(--s4);box-shadow:inset 0 -1px 0 var(--line)}
.lhead{min-width:0}
.eyebrow{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:5px}
.sheethead h2{font-size:21px;font-weight:600;letter-spacing:-.03em;line-height:1.2;
  overflow-wrap:break-word}
.sheethead .sub{margin:4px 0 0;font-size:13px;color:var(--ink-2)}
.sheetnav{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.sheetnav .count{font-size:12px;color:var(--ink-3);min-width:52px;text-align:center}
.nav{border:0;background:var(--sunken);color:var(--ink-2);width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;transition:background var(--t),color var(--t)}
.nav:hover:not(:disabled){background:var(--line);color:var(--ink)}
.nav:disabled{opacity:.35;cursor:default}
#leadprev svg{transform:rotate(180deg)}
.nav.close:hover{background:var(--bad-soft);color:var(--bad)}

/* Back to a split: history on the left, the lead's own facts pinned in a rail
   on the right, so switching tabs never costs you the numbers. */
.sheetbody{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 312px}
@media (max-width:860px){.sheetbody{grid-template-columns:minmax(0,1fr)}}
.sheetmain{min-width:0;display:flex;flex-direction:column;min-height:0}
.sheetside{border-left:1px solid var(--line);padding:var(--s4) var(--s4) var(--s5);
  overflow-y:auto;overscroll-behavior:contain;background:var(--surface-2);
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.sheetside::-webkit-scrollbar{width:7px}
.sheetside::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
@media (max-width:860px){.sheetside{border-left:0;box-shadow:inset 0 1px 0 var(--line)}}
.sidecard+.sidecard{margin-top:var(--s4)}
.sidecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3) var(--s4) var(--s4);box-shadow:var(--sh-1)}
.sidecard h3{margin:0 0 2px;font-size:10.5px;font-weight:650;letter-spacing:.055em;
  text-transform:uppercase;color:var(--ink-3)}

/* Dials, connects and talk time lead the rail as tiles: they are the answer to
   "has anyone actually worked this", and a row in a list buries them. */
.sidenums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);
  margin-bottom:var(--s4)}
.sidenums>div{display:flex;flex-direction:column;gap:1px;min-width:0;padding:9px 10px;
  border-radius:12px;background:linear-gradient(180deg,#e4ecfd 0%,#eef2fb 100%);
  border:1px solid rgba(47,109,246,.16)}
.sidenums .n{font-size:19px;font-weight:650;letter-spacing:-.03em;line-height:1.15;
  color:var(--accent-ink)}
.sidenums .k{font-size:9.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidenums .s{font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sidenums .good .n{color:var(--good)}
.sidenums .good{background:linear-gradient(180deg,var(--good-soft) 0%,#f2fbf5 100%);
  border-color:rgba(22,163,74,.2)}
.sidenums .bad .n{color:var(--bad)}
.sidenums .bad{background:linear-gradient(180deg,var(--bad-soft) 0%,#fef5f4 100%);
  border-color:rgba(224,72,58,.22)}

.ltabs{flex:0 0 auto;display:flex;gap:var(--s1);padding:0 var(--s5);
  box-shadow:inset 0 -1px 0 var(--line)}
.ltabs button{border:0;background:transparent;color:var(--ink-3);padding:11px 12px;font-size:13px;
  font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--t),border-color var(--t)}
.ltabs button:hover{color:var(--ink)}
.ltabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.ltabs .sn{color:var(--ink-3);font-weight:400;font-size:12px}

.lbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--s5) var(--s5);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.lbody::-webkit-scrollbar{width:7px}
.lbody::-webkit-scrollbar-track{background:transparent}
.lbody::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}
.lbody .tablewrap{max-height:none;margin:0;padding:0;overflow:visible}
.lbody thead th{top:0;background:var(--surface);z-index:3}
.lbody .tl,.lbody .fgroup:first-of-type,.lbody .empty{padding-top:var(--s4)}

.facts{margin:0}
.facts div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:8px 0;border-top:1px solid var(--line)}
.facts div:first-child{border-top:0}
.facts dt{font-size:12.5px;color:var(--ink-3);flex:0 0 auto}
.facts dd{margin:0;font-size:13.5px;font-weight:550;letter-spacing:-.01em;text-align:right;
  min-width:0;overflow-wrap:anywhere;white-space:normal}
/* "18 Sept" does not tell you the follow-up is nine days late. */
.facts dd .fs{display:block;font-size:11px;font-weight:400;color:var(--ink-3);line-height:1.35}
.facts .bad dd,.facts .bad dd .fs{color:var(--bad)}
.facts .accent dd{color:var(--accent-ink)}
.facts dd a{color:var(--accent);text-decoration:none}
.facts dd a:hover{text-decoration:underline}

.fgroup+.fgroup{margin-top:var(--s5)}
.fgroup h4{margin:0 0 var(--s2);font-size:11.5px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3)}
.fgroup dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:0 var(--s6)}
.fgroup dl>div{display:flex;gap:var(--s3);align-items:baseline;padding:8px 0;
  border-top:1px solid var(--line)}
.fgroup dt{flex:0 0 128px;font-size:12.5px;color:var(--ink-3)}
.fgroup dd{margin:0;font-size:13.5px;min-width:0;overflow-wrap:anywhere}
.fgroup dd a{color:var(--accent);text-decoration:none}
.fgroup dd a:hover{text-decoration:underline}

.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl-i{display:flex;gap:var(--s3);padding:10px 0}
.tl-i+.tl-i{border-top:1px solid var(--line)}
.tl-d{flex:0 0 74px;font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink-3);padding-top:2px}
.tl-i.call .tl-d{color:var(--accent)}
.tl-i.status .tl-d{color:var(--good)}
.tl-i.form .tl-d,.tl-i.task .tl-d{color:var(--warn)}
.tl-b{min-width:0;flex:1 1 auto}
.tl-t{font-size:13.5px;line-height:1.5}
.tl-m{font-size:12px;color:var(--ink-3);margin-top:2px}
.tl-note{margin:5px 0 0;font-size:13px;line-height:1.6;color:var(--ink);
  background:var(--sunken);border-radius:10px;padding:8px 11px;overflow-wrap:anywhere}
.tl-sys{margin:5px 0 0;font-size:12.5px}
.tl-sys summary{cursor:pointer;color:var(--ink-3);list-style:revert}
.tl-sys pre{margin:6px 0 0;padding:9px 11px;background:var(--sunken);border-radius:10px;
  font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;
  overflow-wrap:anywhere;color:var(--ink-2);max-height:220px;overflow:auto}
.fgrid{margin:6px 0 0;display:grid;gap:0;border-radius:10px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.fgrid>div{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:var(--s4);
  padding:9px var(--s4);align-items:baseline}
.fgrid>div:nth-child(odd){background:var(--surface-2)}
.fgrid dt{font-size:12.5px;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.fgrid dt.unnamed{color:var(--ink-3);font-style:italic}
.fgrid dd{margin:0;font-size:13.5px;line-height:1.6;min-width:0;overflow-wrap:anywhere}
.fgrid dd.dim{color:var(--ink-3)}
td.note{text-align:left;font-size:12.5px;line-height:1.55;color:var(--ink-2);
  min-width:200px;max-width:340px;white-space:normal;overflow-wrap:anywhere}
td.rec{white-space:nowrap}
td.rec audio{height:32px;max-width:180px}
.recy{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3);font-size:12px}

@media (max-width:640px){
  .modal{padding:0}
  .sheet{max-height:100vh;height:100vh;border-radius:0;width:100%}
  /* Title and controls stop competing for the same row: on a phone the nav
     goes above, and the name gets the full width. */
  .sheethead{padding:var(--s4);flex-direction:column;align-items:stretch;gap:var(--s3)}
  .sheetnav{order:-1;justify-content:flex-end}
  .sheetnav .pill{margin-right:auto}
  .sheethead h2{font-size:19px}
  .ltabs,.lbody{padding-left:var(--s4);padding-right:var(--s4)}
  .fgroup dt{flex-basis:104px}
  .fgrid>div{grid-template-columns:1fr;gap:2px;padding:8px var(--s3)}
  .tl-i{flex-direction:column;gap:2px}
  .tl-d{flex:none}
}

/* --- search, inside the panels that list things --- */
.sbar{display:flex;align-items:center;gap:var(--s2);flex:1 1 320px;min-width:230px;max-width:460px}
.sfield{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center}
.sfield>svg{position:absolute;left:13px;color:var(--ink-3);pointer-events:none}
.sfield input{width:100%;border:0;background:var(--sunken);border-radius:999px;
  padding:9px 38px 9px 36px;font-size:13px;box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow var(--t),background var(--t)}
.sfield input::placeholder{color:var(--ink-3)}
.sfield input:focus{outline:0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--accent)}
.sfield input:focus+.sclear,.sfield input:focus~svg{color:var(--ink-2)}
.sclear{position:absolute;right:6px;border:0;background:transparent;color:var(--ink-3);
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  transition:background var(--t),color var(--t)}
.sclear:hover{background:var(--line);color:var(--ink)}
.sbar .btn.primary{flex:0 0 auto;padding:9px 18px}
.sbar .btn.primary:disabled{background:var(--track);color:var(--ink-3);cursor:default}
.mfil{margin-bottom:var(--s3);align-items:center}

/* While a search is applied the callout reports it instead of the tip. */
.callout.find{background:var(--surface-2);color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.callout.find svg{color:var(--ink-3)}
.callout.find b{color:var(--ink)}

@media (max-width:640px){
  .sbar{flex-basis:100%;max-width:none}
}

/* A recording telecrm will not let us play still says it exists. */
td.rec{white-space:nowrap}
td.rec audio{height:32px;max-width:200px}
.recy{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3);font-size:12px}

/* --- one lead, opened from a board card --- */
/* The card is sized to the window and scrolls its own body. Letting it grow to
   the height of its content meant a long history pushed the whole page down and
   you lost the lead's own header while reading it. */
.card[data-lead]{cursor:pointer}
.card[data-lead]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.leadv{display:flex;flex-direction:column;max-height:calc(100vh - 150px);min-height:340px;overflow:hidden}
.leadv>header{flex:0 0 auto;align-items:flex-start;padding-bottom:var(--s3)}
.lhead{min-width:0}
.btn.back{margin:0 0 var(--s2) calc(var(--s3)*-1);padding-left:10px;color:var(--ink-2)}
.btn.back svg{transform:rotate(180deg)}
.btn.back:hover{color:var(--accent)}

.lstats{flex:0 0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:var(--s2) var(--s4);padding:0 var(--s5) var(--s4)}
.lstats dt{font-size:11.5px;color:var(--ink-3);margin-bottom:2px}
.lstats dd{margin:0;font-size:15px;font-weight:600;letter-spacing:-.02em}
.lstats dd.bad{color:var(--bad)}

.ltabs{flex:0 0 auto;display:flex;gap:var(--s1);padding:0 var(--s5);
  box-shadow:inset 0 -1px 0 var(--line)}
.ltabs button{border:0;background:transparent;color:var(--ink-3);padding:9px 12px;font-size:13px;
  font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--t),border-color var(--t)}
.ltabs button:hover{color:var(--ink)}
.ltabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.ltabs .sn{color:var(--ink-3);font-weight:400;font-size:12px}

/* No top padding: a sticky table header sticks to the padding edge, so any gap
   above it becomes a strip that rows scroll through. The tabs that need the
   breathing room add it themselves. */
.lbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--s5) var(--s5);scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent}
.lbody::-webkit-scrollbar{width:7px}
.lbody::-webkit-scrollbar-track{background:transparent}
.lbody::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}
/* The table's own overflow:auto would anchor its sticky header to a box that
   is not the one scrolling, so the header slides away. Hand scrolling to
   .lbody and the header sticks to the card instead. */
.lbody .tablewrap{max-height:none;margin:0;padding:0;overflow:visible}
.lbody thead th{top:0;background:var(--surface);z-index:3}
.lbody .tl,.lbody .fgroup:first-of-type,.lbody .empty{padding-top:var(--s4)}

.fgroup+.fgroup{margin-top:var(--s5)}
.fgroup h4{margin:0 0 var(--s2);font-size:11.5px;font-weight:650;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3)}
/* Wide enough that a company name or a URL has somewhere to go; at 240px the
   value column was narrower than its own label. */
.fgroup dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:0 var(--s6)}
.fgroup dl>div{display:flex;gap:var(--s3);align-items:baseline;padding:8px 0;
  border-top:1px solid var(--line)}
.fgroup dt{flex:0 0 132px;font-size:12.5px;color:var(--ink-3)}
.fgroup dd{margin:0;font-size:13.5px;min-width:0;overflow-wrap:anywhere}
.fgroup dd a{color:var(--accent);text-decoration:none}
.fgroup dd a:hover{text-decoration:underline}

/* What someone actually wrote, set apart from the event line above it. */
.tl-note{margin:5px 0 0;font-size:13px;line-height:1.6;color:var(--ink);
  background:var(--sunken);border-radius:10px;padding:8px 11px;overflow-wrap:anywhere}
/* Field and value, as telecrm shows the form. A long answer wraps in place
   rather than being squeezed into a chip shaped for the word "YES". */
.fgrid{margin:6px 0 0;display:grid;gap:0;border-radius:10px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.fgrid>div{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:var(--s4);
  padding:9px var(--s4);align-items:baseline}
.fgrid>div:nth-child(odd){background:var(--surface-2)}
.fgrid dt{font-size:12.5px;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.fgrid dt.unnamed{color:var(--ink-3);font-style:italic}
.fgrid dd{margin:0;font-size:13.5px;line-height:1.6;min-width:0;overflow-wrap:anywhere}
.fgrid dd.dim{color:var(--ink-3)}
@media (max-width:640px){
  .fgrid>div{grid-template-columns:1fr;gap:2px;padding:8px var(--s3)}
}

.tl-sys{margin:5px 0 0;font-size:12.5px}
.tl-sys summary{cursor:pointer;color:var(--ink-3);list-style:revert}
.tl-sys pre{margin:6px 0 0;padding:9px 11px;background:var(--sunken);border-radius:10px;
  font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;
  overflow-wrap:anywhere;color:var(--ink-2);max-height:220px;overflow:auto}
.tl-i.form .tl-d,.tl-i.task .tl-d{color:var(--warn)}
td.note{text-align:left;font-size:12.5px;line-height:1.55;color:var(--ink-2);
  min-width:220px;max-width:420px;white-space:normal;overflow-wrap:anywhere}

.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl-i{display:flex;gap:var(--s3);padding:10px 0}
.tl-i+.tl-i{border-top:1px solid var(--line)}
.tl-d{flex:0 0 74px;font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink-3);padding-top:2px}
.tl-i.call .tl-d{color:var(--accent)}
.tl-i.status .tl-d{color:var(--good)}
/* Grow, so a form table or a long note uses the card's width. */
.tl-b{min-width:0;flex:1 1 auto}
.tl-t{font-size:13.5px;line-height:1.5}
.tl-m{font-size:12px;color:var(--ink-3);margin-top:2px}

@media (max-width:640px){
  .leadv{max-height:calc(100vh - 90px)}
  .lstats{padding:0 var(--s4) var(--s3)}
  .ltabs,.lbody{padding-left:var(--s4);padding-right:var(--s4)}
  .fgroup dt{flex-basis:104px}
  .tl-i{flex-direction:column;gap:2px}
  .tl-d{flex:none}
}

/* --- ask --- */
.askp .thread{display:flex;flex-direction:column;gap:var(--s3);max-height:420px;overflow-y:auto;
  padding-right:var(--s1);margin-bottom:var(--s4);scrollbar-width:thin;
  scrollbar-color:var(--line-2) transparent}
.msg{display:flex}
.msg.me{justify-content:flex-end}
.bub{max-width:min(78ch,86%);border-radius:16px;padding:10px var(--s4);font-size:13.5px;line-height:1.62}
.msg.me .bub{background:var(--accent);color:#fff;border-bottom-right-radius:6px}
.msg.ai .bub{background:var(--sunken);color:var(--ink);border-bottom-left-radius:6px}
.bub p{margin:0 0 8px}
.bub p:last-child{margin:0}
.bub ul{margin:4px 0 8px;padding-left:18px}
.bub li{margin:2px 0}
.bub code{font-size:12.5px;background:rgba(17,24,39,.06);padding:1px 5px;border-radius:5px}
.mdt{width:100%;min-width:0;margin:6px 0 2px;border-collapse:collapse;font-size:12.5px}
.mdt th,.mdt td{padding:5px 9px;text-align:right;box-shadow:inset 0 -1px 0 var(--line);white-space:nowrap}
.mdt th:first-child,.mdt td:first-child{text-align:left;padding-left:0}
.mdt th{font-weight:550;color:var(--ink-3)}

.typing{display:flex;gap:4px;align-items:center;padding:14px var(--s4)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:blink 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.askhint{margin-bottom:var(--s4)}
.askhint p{margin:0 0 var(--s3);font-size:13px;color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{border:0;background:var(--sunken);color:var(--ink-2);border-radius:999px;padding:7px 14px;
  font-size:12.5px;text-align:left;transition:background var(--t),color var(--t),transform var(--t)}
.chip:hover{background:var(--accent-soft);color:var(--accent-ink);transform:translateY(-1px)}

.askbar{display:flex;gap:var(--s2);align-items:center}
.askbar input{flex:1 1 auto;min-width:0;border:0;background:var(--sunken);border-radius:999px;
  padding:11px var(--s4);font-size:13.5px;box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow var(--t),background var(--t)}
.askbar input:focus{outline:0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--accent)}
.askbar input:disabled{opacity:.6}
.btn.primary{background:var(--accent);color:#fff;padding:9px 18px;font-weight:550}
.btn.primary:hover:not(:disabled){background:var(--accent-ink)}
.askerr{margin:0 0 var(--s3);font-size:12.5px;color:var(--bad)}

/* --- one shared floating label --- */
.tip{position:fixed;top:0;left:0;z-index:60;pointer-events:none;
  background:var(--dark);color:#fff;font-size:12.5px;font-weight:500;letter-spacing:-.005em;
  padding:7px 12px;border-radius:10px;box-shadow:var(--sh-3);white-space:nowrap;max-width:92vw;
  opacity:0;transition:opacity 120ms ease}
.tip.on{opacity:1}

@media (max-width:820px){
  /* A 999px radius on a bar that has wrapped to three rows reads as a blob, and
     the period control is wider than a phone: square it off and let it scroll. */
  .bar{border-radius:var(--r-lg);padding:var(--s3);gap:var(--s2);position:static}
  .brand{padding:0;box-shadow:none;width:100%;margin:0 0 var(--s1)}
  .bar .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .bar .seg::-webkit-scrollbar{display:none}
  .seg button{white-space:nowrap}
  .spacer{display:none}
  .stamp{order:9}
}

@media (max-width:640px){
  .shell{padding:var(--s3)}
  .hero{padding:0}
  .heroR{gap:var(--s4)}
  .fl,.hl{flex-basis:92px;font-size:12px}
  .fp,.hp{display:none}
  .mseg{min-width:auto}
  .mfill{padding:0 var(--s3);font-size:12px}
}

/* The reason to pick up the phone, under the name it belongs to. A callback
   date says when; this says what to open with. */
.why{display:block;margin-top:4px;font-size:11.5px;font-weight:400;line-height:1.5;
  color:var(--ink-2);white-space:normal;max-width:52ch;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.why b{display:block;font-size:10px;font-weight:650;letter-spacing:.045em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:1px}
.why.none{color:var(--ink-3);font-style:italic}

/* --- board filters ------------------------------------------------------ */
/* One labelled row per dimension. Each option carries the count it would leave
   you with, so you can see a bucket is empty without clicking into it. */
/* Slides in from the right, the way the lead opens. The scrim is light on
   purpose: the columns keep rebuilding behind it as you choose, and a dim
   overlay would hide the thing you are filtering. */
.drawerwrap{position:fixed;inset:0;z-index:55;display:flex;justify-content:flex-end}
.drawerwrap .scrim{position:absolute;inset:0;background:rgba(17,24,39,.14);
  animation:fadein 160ms ease-out}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.drawer{position:relative;width:min(372px,100%);height:100%;display:flex;flex-direction:column;
  background:var(--surface);box-shadow:var(--sh-3);
  animation:slidein 210ms cubic-bezier(.2,.7,.3,1)}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
.drawerhead{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s4);padding:var(--s5) var(--s4) var(--s4);box-shadow:inset 0 -1px 0 var(--line)}
.drawerhead h2{font-size:19px;font-weight:600;letter-spacing:-.03em}
.drawerbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4);
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.drawerbody::-webkit-scrollbar{width:7px}
.drawerbody::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.drawerfoot{flex:0 0 auto;display:flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s4);box-shadow:inset 0 1px 0 var(--line);background:var(--surface-2)}
.drawerfoot .bfn{margin-right:auto;font-size:12px;color:var(--ink-3)}
.drawerfoot .bfn b{color:var(--ink);font-weight:650}
.drawerfoot .btn{padding:7px 14px;font-size:13px}
.drawerfoot .btn.primary{background:var(--dark);color:#fff}
.drawerfoot .btn.primary:hover{background:var(--dark-2)}
@media (max-width:480px){.drawer{width:100%}}

.bfrow{display:flex;flex-direction:column;gap:7px;min-width:0}
.bfrow h3{margin:0;font-size:10.5px;font-weight:650;letter-spacing:.055em;
  text-transform:uppercase;color:var(--ink-3)}
.bfo{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.bfb{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink-2);font-size:12px;font-weight:500;
  padding:4px 10px;border-radius:999px;white-space:nowrap;
  transition:background var(--t),color var(--t),border-color var(--t)}
.bfb:hover:not(:disabled){border-color:var(--accent);color:var(--ink)}
.bfb.on{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:600}
/* A chosen pill is near-black, and the generic hover above outspecifies it --
   without this its label is painted near-black on near-black and vanishes
   under the cursor. */
.bfb.on:hover:not(:disabled){background:var(--dark-2);border-color:var(--dark-2);color:#fff}
.bfb.on .sn{background:rgba(255,255,255,.2);color:#fff}
.bfb .sn{font-size:10.5px;font-weight:600;color:var(--ink-3);background:var(--sunken);
  padding:1px 6px;border-radius:999px}
.bfb.dead{opacity:.4;cursor:default}

/* What is currently on, and what it leaves you with. */
.bfchips{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:var(--s3)}
/* Scoped to the filter row: a bare .chip is already the Ask panel's suggestion
   button, and restyling that from here would be a change nobody asked for. */
.bfchips .chip{display:inline-flex;align-items:center;gap:5px;border:0;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink);font-size:12px;font-weight:550;
  padding:4px 10px;transform:none;transition:background var(--t)}
.bfchips .chip:hover{background:#d9e6fd;color:var(--accent-ink);transform:none}
.bfchips .chip.clear{background:transparent;color:var(--ink-3);text-decoration:underline}
.bfchips .chip.clear:hover{color:var(--ink);background:transparent}
.bfn{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.btn.ghost .sn.on{background:var(--accent);color:#fff;font-size:10.5px;font-weight:650;
  padding:1px 6px;border-radius:999px;margin-left:2px}

/* Already on screen before this render: rebuilt, but it should not re-enter.
   Scoped to the entrance animations by name rather than blanket `animation:
   none`, which would also stop the refresh spinner. */
.modal.nofx,.modal.nofx .sheet,
.drawerwrap.nofx .drawer,.drawerwrap.nofx .scrim{animation:none}

/* How old the figures are. Nothing refreshes on its own, so this is the only
   thing that says whether the numbers are a minute or a morning old. */
.freshat{flex:0 0 auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
@media (max-width:900px){.freshat{display:none}}
/* "Refreshing…" is wider than "Refresh"; without a floor the button resizes
   mid-click and can reflow onto its own line in a narrow bar. */
#refresh{min-width:126px;justify-content:center}

/* --- custom date range ---------------------------------------------------- */
.rangechip{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink);font-size:12px;font-weight:550;
  padding:6px 12px;white-space:nowrap;box-shadow:var(--sh-1);transition:background var(--t)}
.rangechip:hover{background:#d9e6fd}
.rangechip .sn{font-size:10.5px;font-weight:650;background:rgba(47,109,246,.16);
  padding:1px 6px;border-radius:999px}
.dinput{width:100%;border:1px solid var(--line-2);background:var(--surface);border-radius:10px;
  padding:9px 12px;font-size:13.5px;color-scheme:light}
.dinput:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.dnote{margin:0;font-size:12px;color:var(--ink-3);line-height:1.5}
.dnote b{color:var(--ink);font-weight:650}
.dwarn{margin:0;display:flex;align-items:flex-start;gap:7px;font-size:12px;line-height:1.5;
  color:var(--bad);background:var(--bad-soft);border-radius:10px;padding:9px 11px}
.dwarn svg{flex:0 0 auto;margin-top:1px}