/* BuddyCRM — design system.
 *
 * Lifted from mockups/index.html rather than redesigned, so what was approved
 * is what ships. Same tokens, same class names; the markup is now driven by the
 * API instead of a static array.
 */

/* ==========================================================================
   BuddyCRM mockup. Static data, no back end. Everything here is clickable.
   Palette is the approved one: navy frame, purple action, orange reserved
   strictly for things that need a person.
   ========================================================================== */
:root{
  --nav:#16294B; --nav-2:#1F3A6E; --nav-ink:#C6D2E5; --nav-dim:#7286A8;
  --brand:#6D3FA0; --brand-ink:#5A3286; --alert:#E8590C;
  --ink:#1B2434; --ink-2:#46536A; --mute:#78849A;
  --line:#E1E6EE; --line-2:#EEF2F7;
  --card:#FFFFFF; --canvas:#EEF4FB;
  --ok:#186A4A; --ok-soft:#E8F3EE;
  --warn:#9A6510; --warn-soft:#FCF3E3;
  --no:#9E3324; --no-soft:#F8E7E4;
  --sys:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --rail:188px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:400 14px/1.55 var(--sys); background:var(--canvas); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.015em}

/* ------------------------------------------------------------------ rail */
.rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail); background:var(--nav);
  color:var(--nav-ink); display:flex; flex-direction:column; z-index:40;
  overflow-y:auto; scrollbar-width:none;
}
.rail::-webkit-scrollbar{width:0}
.railmark{padding:16px 16px 12px;line-height:0}
.railmark img{
  /* BuddyCRM's own mark, recoloured to white with its alpha preserved so the
     antialiased edges stay clean against the navy rather than fringing blue.
     Embedded at 280px and shown at 116px, so it stays sharp on hidpi screens. */
  width:116px;height:auto;display:block;
}
body.bc-rail-collapsed .railmark img{width:38px}
.grp{
  padding:13px 16px 4px; font-size:10px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--nav-dim);
}
.rail a.item{
  display:flex; align-items:center; gap:11px; padding:8px 16px;
  color:var(--nav-ink); font-size:13px; cursor:pointer;
}
.rail a.item:hover{background:rgba(255,255,255,.07);color:#fff}
.rail a.item.on{background:var(--nav-2);color:#fff;box-shadow:inset 3px 0 0 var(--alert)}
.ic{width:18px;text-align:center;opacity:.9;flex:none;font-size:13px}
.cnt{
  margin-left:auto; background:var(--alert); color:#fff; font-size:10.5px;
  font-weight:700; border-radius:10px; padding:1px 6px;
}
.railfoot{margin-top:auto;padding:14px 16px;font-size:11.5px;color:var(--nav-dim)}

/* --------------------------------------------------------------- top bar */
.top{
  position:fixed; top:0; left:var(--rail); right:0; height:56px; background:#fff;
  border-bottom:1px solid var(--line); display:flex; align-items:center;
  gap:14px; padding:0 18px; z-index:30;
}
.search{
  position:relative; flex:1; max-width:420px; display:flex; align-items:center;
  gap:8px; background:#F4F7FB; border:1px solid #DDE4EE; border-radius:8px;
  padding:7px 11px; color:#8A94A6; font-size:13px;
}
.kbd{
  margin-left:auto; font:700 10.5px/1 var(--sys); background:#fff;
  border:1px solid #DDE4EE; border-radius:4px; padding:4px 6px; color:#98A2B3;
}
.acts{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn{
  background:var(--brand); color:#fff; border:0; border-radius:7px;
  padding:8px 13px; font:600 12.5px var(--sys); display:inline-flex;
  align-items:center; gap:6px; cursor:pointer;
}
.btn:hover{background:var(--brand-ink)}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid #DCD3EA}
.btn.ghost:hover{background:#F6F2FB}
.btn.quiet{background:#fff;color:var(--ink-2);border:1px solid var(--line)}
.btn.quiet:hover{background:#F7F9FC}
.ico{
  width:32px;height:32px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;color:#5A6478;position:relative;cursor:pointer;font-size:15px;
}
.ico:hover{background:#F1F5FA}
.dot{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--alert)}
.av{
  width:31px;height:31px;border-radius:50%;background:#E8E3F2;color:var(--brand);
  display:flex;align-items:center;justify-content:center;font:700 12px var(--sys);flex:none;
}
.btn{white-space:nowrap}
.search span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The bar carries a lot at full width. Shed the optional parts before anything
   wraps, rather than letting the whole row collapse into three lines.
   
   Search and the toggle groups used to be dropped here too — search below
   1020px, `.who` below 860px. Both were wrong: search is how anybody finds
   anything in a CRM, and `.who` is not decoration, it is Week/Month on the
   calendar and Mine/Everyone on targets. They shrink and scroll on a narrow
   screen instead; see the phone section at the end of this file. */
@media (max-width:1180px){ .acts > span:first-child{display:none} }
@media (max-width:1020px){ .search{max-width:260px} }

/* ----------------------------------------------------------------- shell */
main{display:none}
.page{display:none;margin-left:var(--rail);padding:78px 26px 64px;max-width:1180px}
.page.on{display:block}
.ph{margin-bottom:16px}
.ph h1{font-size:21px;font-weight:600}
.ph p{margin:4px 0 0;color:var(--mute);font-size:13px;max-width:70ch}
.stamp{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mute);margin-bottom:7px;
}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px}
.pad{padding:16px 18px}

/* ------------------------------------------------------- stat strip */
/* Two equal columns on a wide screen, one on a phone. Use this rather than
   an inline grid-template-columns: an inline style cannot be overridden by
   a media query, so a view that writes one has silently opted out of the
   whole responsive layout. */
.two{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line-2)}
.stat{padding:14px 18px;border-right:1px solid var(--line-2)}
.stat:last-child{border-right:0}
.stat .k{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.stat .v{font-size:24px;font-weight:600;line-height:1.15;margin-top:5px;font-variant-numeric:tabular-nums}
.stat .s{font-size:11.5px;color:var(--mute);margin-top:2px}

/* ------------------------------------------------------- work queue */
.q{list-style:none;margin:0;padding:0}
.q > li{border-bottom:1px solid var(--line-2)}
.q > li:last-child{border-bottom:0}
.qrow{display:grid;grid-template-columns:26px 1fr auto;gap:3px 12px;padding:14px 18px;cursor:pointer}
.qrow:hover{background:#FAFBFD}
.rank{font-size:12px;font-weight:700;color:#B6BECC;font-variant-numeric:tabular-nums}
.qname{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.qval{text-align:right;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.qval small{display:block;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mute)}
.why{grid-column:2/4;font-size:13px;color:var(--ink-2)}
.ev{grid-column:2/4;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ev span{background:#F4F7FB;border:1px solid var(--line);border-radius:20px;
  padding:3px 10px;font-size:11.5px;color:var(--ink-2)}
.qact{grid-column:2/4;display:flex;gap:8px;margin-top:10px}
.tag{border-radius:4px;padding:2px 7px;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.no{background:var(--no-soft);color:var(--no)}
.tag.cool{background:#EEF2F8;color:#4B5A72}

/* ------------------------------------------------------------ drawer */
.scrim{position:fixed;inset:0;background:rgba(20,30,48,.42);z-index:50;display:none}
.scrim.on{display:block}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(540px,94vw);background:#fff;
  z-index:60;transform:translateX(100%);transition:transform .18s ease;
  display:flex;flex-direction:column;box-shadow:-18px 0 46px -22px rgba(20,30,48,.5);
}
.drawer.on{transform:none}
.dh{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;
  align-items:flex-start;justify-content:space-between;gap:12px}
.dh h2{font-size:17px;font-weight:600}
.dh p{margin:3px 0 0;font-size:12.5px;color:var(--mute)}
.dbody{padding:18px 20px;overflow:auto;flex:1}
.dfoot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:9px;
  align-items:center;background:#FCFDFE}
.x{border:0;background:none;font-size:20px;color:var(--mute);cursor:pointer;line-height:1}
.mail{border:1px solid var(--line);border-radius:9px;overflow:hidden}
.mail .sub{padding:11px 14px;border-bottom:1px solid var(--line-2);font-weight:600;font-size:13.5px}
.mail .bd{padding:14px;font-size:13.5px;line-height:1.62;white-space:pre-wrap;color:var(--ink-2)}
.note{background:#F4F7FB;border:1px solid var(--line);border-radius:8px;padding:11px 13px;
  font-size:12.5px;color:var(--ink-2);margin-top:14px}
.note b{color:var(--ink)}

.rechead{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:14px;flex-wrap:wrap}
.rechead > div:last-child{flex-wrap:wrap}
.roflag{max-width:100%}
/* Nothing on any screen may push the page sideways. */
html,body{max-width:100%;overflow-x:hidden}
.rechead h1{font-size:24px;font-weight:600}
.meta{color:var(--mute);font-size:13px;margin-top:3px}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.metric{padding:14px 16px;border-right:1px solid var(--line-2)}
.metric:last-child{border-right:0}
.metric .k{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.metric .v{font-size:21px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.metric .s{font-size:11.5px;color:var(--mute);margin-top:3px;line-height:1.45}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:20px 0 0}
.tabs button{all:unset;cursor:pointer;padding:10px 14px;font-size:13px;font-weight:600;
  color:var(--mute);border-bottom:2px solid transparent}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-current=true]{color:var(--brand);border-bottom-color:var(--brand)}
.tabp{display:none;padding:16px 0}
.tabp.on{display:block}
.kv{display:grid;grid-template-columns:170px 1fr;gap:9px 16px;font-size:13.5px}
.kv dt{color:var(--mute)}
.kv dd{margin:0}
table.grid{width:100%;border-collapse:collapse;font-size:13px}
table.grid th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);padding:9px 10px;
  border-bottom:1px solid var(--line);white-space:nowrap;background:#FAFBFD;
}
table.grid td{padding:9px 10px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.grid td.num,table.grid th.num{text-align:right;font-variant-numeric:tabular-nums}
table.grid input{
  width:100%;border:1px solid transparent;border-radius:5px;padding:5px 7px;
  font:inherit;background:transparent;color:inherit;
}
table.grid input:hover{border-color:var(--line)}
table.grid input:focus{border-color:var(--brand);outline:none;background:#fff}
table.grid input.num{text-align:right;font-variant-numeric:tabular-nums}
.totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:0;
  border-top:1px solid var(--line)}
.tot{padding:13px 16px;border-right:1px solid var(--line-2)}
.tot:last-child{border-right:0}
.tot .k{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.tot .v{font-size:20px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:3px;background:#EDF1F6;overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;background:var(--ok)}

.agents{display:grid;gap:12px}
.agent{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:15px 17px}
.agent .row1{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.agent h3{font-size:15px;font-weight:600}
.agent p{margin:3px 0 0;font-size:12.5px;color:var(--mute);max-width:64ch}
.lvl{display:flex;gap:0;margin-left:auto;border:1px solid var(--line);border-radius:7px;overflow:hidden;flex:none}
.lvl button{all:unset;cursor:pointer;padding:6px 11px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.lvl button:hover{background:#F4F7FB}
.lvl button[aria-pressed=true]{background:var(--nav-2);color:#fff}
.agent .foot{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line-2);font-size:12px;color:var(--mute)}
.agent .foot b{color:var(--ink);font-variant-numeric:tabular-nums}
.gate{background:var(--warn-soft);border:1px solid #F0E2C4;border-radius:8px;
  padding:10px 13px;font-size:12.5px;color:var(--warn);margin-top:11px}

/* ============================ permissions ============================== */
/* Read-only is the common case: most reps can see an account they do not own.
   Edit affordances are removed rather than disabled — a greyed button that
   never works is worse than no button — and one honest chip explains why,
   with a route to the person who can change it. */
.roflag{
  display:none; align-items:center; gap:7px; background:#F4F7FB;
  border:1px solid var(--line); border-radius:20px; padding:4px 12px;
  font-size:12px; color:var(--ink-2);
}
body.ro .roflag{display:inline-flex}
body.ro .canedit{display:none !important}
body.ro .editable{border-color:transparent !important;background:transparent !important;
  padding-left:0 !important;cursor:default}
body.ro .editable:hover{border-color:transparent !important}
.who{
  display:flex;align-items:center;gap:0;border:1px solid var(--line);
  border-radius:7px;overflow:hidden;flex:none;
}
.who button{all:unset;cursor:pointer;padding:6px 10px;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.who button:hover{background:#F4F7FB}
.who button[aria-pressed=true]{background:var(--nav-2);color:#fff}

/* ================================ charts =============================== */
.chartcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:15px 17px}
.chartcard h3{font-size:14px;font-weight:600}
.chartcard .cap{font-size:11.5px;color:var(--mute);margin:2px 0 12px}
.chartgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
svg .axis{stroke:var(--line);stroke-width:1}
svg .gridline{stroke:var(--line-2);stroke-width:1}
svg text{font:11px var(--sys);fill:var(--mute)}
svg text.val{fill:var(--ink);font-weight:600}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--ink-2)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}

.listhead{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:13px 17px;
  border-bottom:1px solid var(--line-2)}
.chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:5px 12px;
  font-size:12px;color:var(--ink-2);cursor:pointer}
.chip:hover{background:#F4F7FB}
.chip[aria-pressed=true]{background:var(--nav-2);border-color:var(--nav-2);color:#fff}
.score{display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.score i{display:block;width:44px;height:5px;border-radius:3px;background:#EDF1F6;overflow:hidden;position:relative}
.score i b{position:absolute;inset:0 auto 0 0;display:block;border-radius:3px}
.sla{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}

.week{display:grid;grid-template-columns:56px repeat(5,minmax(0,1fr));border-top:1px solid var(--line-2)}
.week .hr{font-size:11px;color:var(--mute);padding:6px 8px;text-align:right;border-right:1px solid var(--line-2)}
.week .cell{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);min-height:44px;padding:3px}
.week .dh{padding:9px 8px;font-size:12px;font-weight:700;border-right:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);background:#FAFBFD}
.week .dh small{display:block;font-weight:500;color:var(--mute)}
.ev2{border-radius:6px;padding:5px 7px;font-size:11.5px;line-height:1.35;margin-bottom:3px;cursor:pointer}
.ev2.visit{background:#E9EFF8;border-left:3px solid var(--nav-2);color:#1B2A47}
.ev2.call{background:#F3EEFA;border-left:3px solid var(--brand);color:#3F2560}
.ev2.sugg{background:#FFF3E9;border-left:3px dashed var(--alert);color:#7A3A0B}
.ev2 b{display:block}
.thread{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:11px}
.thread .th{padding:10px 13px;background:#FAFBFD;border-bottom:1px solid var(--line-2);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.thread .tb{padding:12px 13px;font-size:13px;color:var(--ink-2);line-height:1.6}
.pill{background:#EEF2F8;color:#4B5A72;border-radius:20px;padding:2px 9px;font-size:11px;font-weight:600}

/* The customer-facing document. Deliberately plainer than the app: a quote is
   read on a phone, forwarded, and printed by someone who is not our user. */
.doc{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  max-width:760px;padding:38px 42px;box-shadow:0 1px 2px rgba(27,36,52,.05),0 18px 44px -28px rgba(27,36,52,.4);
}
.doc .dhd{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;
  padding-bottom:20px;border-bottom:2px solid var(--nav)}
.doc .dhd h2{font-size:22px;font-weight:700;color:var(--nav)}
.doc .dmeta{font-size:12.5px;color:var(--ink-2);line-height:1.65;text-align:right}
.doc table{width:100%;border-collapse:collapse;margin:22px 0 0;font-size:13px}
.doc th{text-align:left;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);padding:9px 8px;border-bottom:1px solid var(--line)}
.doc td{padding:11px 8px;border-bottom:1px solid var(--line-2);vertical-align:top}
.doc td.n,.doc th.n{text-align:right;font-variant-numeric:tabular-nums}
.doc .sum{margin-left:auto;width:270px;margin-top:16px;font-size:13.5px}
.doc .sum div{display:flex;justify-content:space-between;padding:7px 0}
.doc .sum .tot{border-top:2px solid var(--nav);margin-top:5px;padding-top:11px;
  font-size:18px;font-weight:700;color:var(--nav)}
.doc .terms{margin-top:26px;padding-top:18px;border-top:1px solid var(--line-2);
  font-size:12px;color:var(--ink-2);line-height:1.7}
.accept{background:#F6F9FD;border:1px solid #D8E3F2;border-radius:10px;
  padding:20px 22px;margin:24px 0 0;text-align:center}
.accept h3{font-size:15px;font-weight:600;margin-bottom:5px}
.accept p{margin:0 0 14px;font-size:12.5px;color:var(--ink-2)}
.bigbtn{background:var(--ok);color:#fff;border:0;border-radius:8px;padding:12px 26px;
  font:600 14px var(--sys);cursor:pointer}
.bigbtn.no{background:#fff;color:var(--ink-2);border:1px solid var(--line)}
.viewtabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.viewtabs button{all:unset;cursor:pointer;padding:9px 14px;font-size:13px;font-weight:600;
  color:var(--mute);border-bottom:2px solid transparent}
.viewtabs button[aria-current=true]{color:var(--brand);border-bottom-color:var(--brand)}
.viewp{display:none}.viewp.on{display:block}
.track{display:flex;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-top:16px}
.track div{flex:1;padding:12px 14px;border-right:1px solid var(--line-2)}
.track div:last-child{border-right:0}
.track .k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.track .v{font-size:15px;font-weight:600;margin-top:3px}
@media print{
  .rail,.top,.viewtabs,.track,.note,.ph{display:none !important}
  .page{margin-left:0 !important;padding:0 !important}
  .doc{border:0;box-shadow:none;max-width:none;padding:0}
}

.board{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:10px;align-items:start}
.col{background:#F7F9FC;border:1px solid var(--line);border-radius:10px;padding:9px}
.colh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:3px 4px 9px}
.colh b{font-size:12.5px}
.colh span{font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.deal{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 11px;
  margin-bottom:8px;cursor:pointer;border-left:3px solid transparent}
.deal:hover{border-color:#C9D4E4;border-left-color:var(--nav-2)}
.deal.risk{border-left-color:var(--alert);background:#FFFBF7}
.deal b{display:block;font-size:12.5px;font-weight:600;line-height:1.35}
.deal .acct{font-size:11.5px;color:var(--mute);margin:2px 0 7px}
.deal .foot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.deal .amt{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.deal .age{font-size:10.5px;color:var(--mute)}
.deal .warn{font-size:11px;color:var(--alert);margin-top:6px;line-height:1.4}
.forecast{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:1080px){ .board{grid-template-columns:repeat(2,minmax(0,1fr))} .forecast{grid-template-columns:1fr} }

/* ---------------------------------------------------------- marketing */
.health{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.health > div{padding:13px 16px;border-right:1px solid var(--line-2)}
.health > div:last-child{border-right:0}
.health .k{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.health .v{font-size:19px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.health .s{font-size:11.5px;color:var(--mute);margin-top:2px}
.ok-v{color:var(--ok)} .warn-v{color:var(--warn)} .no-v{color:var(--no)}
.steps{display:flex;gap:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:16px}
.steps div{flex:1;padding:11px 14px;font-size:12.5px;font-weight:600;color:var(--mute);
  border-right:1px solid var(--line-2);display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff}
.steps div:last-child{border-right:0}
.steps div.on{background:var(--nav-2);color:#fff}
.steps div.done{color:var(--ok)}
.steps b{display:inline-flex;width:19px;height:19px;border-radius:50%;background:#EEF2F8;
  color:var(--ink-2);align-items:center;justify-content:center;font-size:11px;flex:none}
.steps div.on b{background:rgba(255,255,255,.22);color:#fff}
.steps div.done b{background:var(--ok-soft);color:var(--ok)}
.audbox{border:1px solid var(--line);border-radius:9px;padding:14px 16px;background:#FAFBFD}
.audbox code{font:12.5px ui-monospace,SFMono-Regular,Menlo,monospace;background:#fff;
  border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:#3F2560}
.gatelist{margin:12px 0 0;padding:0;list-style:none;font-size:13px}
.gatelist li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--line-2)}
.gatelist li:last-child{border-bottom:0}
.gatelist b{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- journeys */
.canvas{background:#FAFBFD;border:1px solid var(--line);border-radius:10px;padding:22px;overflow-x:auto}
.flow{display:flex;flex-direction:column;align-items:center;gap:0;min-width:420px}
.node{background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 15px;
  min-width:270px;max-width:340px;box-shadow:0 1px 2px rgba(27,36,52,.05)}
.node .nk{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.node .nt{font-size:13.5px;font-weight:600;margin-top:3px}
.node .nd{font-size:12px;color:var(--mute);margin-top:3px}
.node.trigger{border-left:3px solid var(--nav-2)}
.node.wait{border-left:3px solid #9AA6B8;background:#F7F9FC}
.node.cond{border-left:3px solid var(--warn)}
.node.act{border-left:3px solid var(--brand)}
.node.exit{border-left:3px solid var(--ok)}
.node .cnt2{float:right;font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;
  background:#EEF2F8;border-radius:20px;padding:1px 9px}
.link{width:2px;height:20px;background:#C9D4E4}
.split{display:flex;gap:26px;align-items:flex-start}
.split > div{display:flex;flex-direction:column;align-items:center}
.branchlab{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mute);padding:3px 0}

.formprev{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px 26px;max-width:440px}
.formprev h3{font-size:17px;font-weight:600;margin-bottom:4px}
.formprev p.sub{margin:0 0 16px;font-size:12.5px;color:var(--mute)}
.fld{margin-bottom:11px}
.fld label{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:4px}
.fld input{width:100%;border:1px solid #DDE4EE;border-radius:7px;padding:8px 10px;font:inherit;background:#FBFCFE}
.consent{display:flex;gap:9px;align-items:flex-start;background:#F6F9FD;border:1px solid #D8E3F2;
  border-radius:8px;padding:11px 13px;font-size:12px;color:var(--ink-2);line-height:1.5;margin:14px 0}
.consent input{margin-top:2px;flex:none}
.dns{width:100%;border-collapse:collapse;font:12px ui-monospace,SFMono-Regular,Menlo,monospace}
.dns th{text-align:left;font:700 10.5px var(--sys);letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);padding:8px 10px;border-bottom:1px solid var(--line)}
.dns td{padding:8px 10px;border-bottom:1px solid var(--line-2);word-break:break-all}

.srcrow{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--line-2)}
.srcrow:last-child{border-bottom:0}
.srcname{font-size:13.5px;font-weight:600}
.srcname small{display:block;font-weight:400;font-size:11.5px;color:var(--mute)}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--line);margin-left:5px}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li:before{content:"";position:absolute;left:-6px;top:3px;width:10px;height:10px;
  border-radius:50%;background:#C9D4E4;border:2px solid #fff}
.timeline li.allow:before{background:var(--ok)}
.timeline li.hold:before{background:var(--warn)}
.timeline li.deny:before{background:var(--no)}
.timeline .when{font-size:11.5px;color:var(--mute)}
.timeline .what{font-size:13.5px;font-weight:600;margin-top:1px}
.timeline .why{font-size:12.5px;color:var(--ink-2);margin-top:2px}
/* ------------------------------------------------------------- files */
.fhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fhead .stamp{margin-bottom:0}
.files{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.frow{display:flex;align-items:flex-start;gap:11px;padding:9px 8px;border-radius:8px}
.frow:hover{background:var(--canvas)}
.fico{font-size:17px;line-height:1.25;flex:none;width:22px;text-align:center}
.fmain{min-width:0;flex:1}
.fname{border:0;background:none;padding:0;font:inherit;font-weight:600;
  color:var(--brand);cursor:pointer;text-align:left;overflow-wrap:anywhere}
.fname:hover{text-decoration:underline}
.flink{border:0;background:none;padding:0;font:inherit;color:var(--brand);
  cursor:pointer;text-decoration:underline}
.drop{margin-top:12px;padding:15px;border:1.5px dashed var(--line);
  border-radius:9px;text-align:center;color:var(--mute);font-size:13px;
  cursor:pointer}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--canvas);
  color:var(--ink-2)}
.frow .x{font-size:17px;flex:none}

/* --------------------------------------------------- document design */
.docsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1180px){.docsplit{grid-template-columns:minmax(0,1fr)}}
.doccol{display:grid;gap:16px;align-content:start}
.docframe{width:100%;height:78vh;border:1px solid var(--line);border-radius:8px;
  background:#fff;margin-top:12px}
.blocks{list-style:none;margin:12px 0 10px;padding:0;display:grid;gap:2px}
.brow{display:flex;align-items:flex-start;gap:11px;padding:9px 8px;border-radius:8px}
.brow:hover{background:var(--canvas)}
.bord{flex:none;width:21px;height:21px;border-radius:5px;background:var(--canvas);
  border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--mute);
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.bmain{min-width:0;flex:1}
.bname{font-weight:600;font-size:13.5px}
.bacts{display:flex;gap:2px;flex:none}
.iconb{border:1px solid transparent;background:none;border-radius:6px;width:26px;
  height:26px;color:var(--mute);cursor:pointer;font-size:14px;line-height:1}
.iconb:hover:not(:disabled){background:var(--card);border-color:var(--line);color:var(--ink)}
.iconb:disabled{opacity:.3;cursor:default}
.mergebar{margin-top:6px;padding:11px 12px;background:var(--canvas);
  border:1px solid var(--line);border-radius:8px}
.mergebar code{font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--card);border:1px solid var(--line);border-radius:4px;padding:1px 4px}
.mergebtns{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.chipb{border:1px solid var(--line);background:var(--card);border-radius:20px;
  padding:3px 10px;font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink-2);cursor:pointer}
.chipb:hover{border-color:var(--brand);color:var(--brand)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.fgrid>.fld{align-self:start}
@media (max-width:620px){.fgrid{grid-template-columns:minmax(0,1fr)}}
/* .fld styled inputs only; the design screen also uses selects and textareas */
.fld textarea,.fld select{width:100%;border:1px solid #DDE4EE;border-radius:7px;
  padding:8px 10px;font:inherit;background:#FBFCFE}
.fld textarea{line-height:1.55}
.filterbox{border:1px solid var(--line);border-radius:7px;padding:6px 9px;
  font:inherit;font-size:13px;background:var(--card);color:var(--ink)}
.brow.inherited{opacity:.62}
.brow.off{opacity:.4}
.brow.off .bname{text-decoration:line-through}
.colourrow{display:flex;gap:8px;align-items:center}
.colourrow input.swatch{flex:none;width:42px;height:36px;padding:2px;
  border:1px solid #DDE4EE;border-radius:7px;background:#FBFCFE;cursor:pointer}
.colourrow input:not(.swatch){flex:1;font:inherit;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ------------------------------------------------- catalogue import */
.modes{display:grid;gap:6px}
.modes .moderow{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;
  border:1px solid var(--line);border-radius:8px;cursor:pointer;background:var(--card);
  font-weight:400;color:var(--ink);margin-bottom:0}
.modes .moderow.on{border-color:var(--brand);background:var(--canvas)}
.modes .moderow.risky.on{border-color:var(--no);background:var(--no-soft)}
.modes .moderow input{margin-top:3px;flex:none;width:auto}
.mapl{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:3px;font-size:12.5px}
.mapl code{font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--canvas);border:1px solid var(--line);border-radius:4px;padding:1px 4px}
.outgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.outcell{border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:var(--card)}
.outval{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.outval.ok{color:var(--ok)} .outval.no{color:var(--no)}
.warnbox{margin-top:12px;padding:11px 13px;border:1px solid var(--no);
  background:var(--no-soft);border-radius:8px;font-size:12.5px;line-height:1.55}
.btn.danger{background:var(--no);border-color:var(--no);color:#fff}
/* Destructive, but not shouting: a red block at the foot of a page reads
   as the thing to press. */
.btn.quiet.danger{background:none;border-color:var(--line);color:var(--no)}
.btn.quiet.danger:hover{border-color:var(--no);background:var(--no-soft)}
/* Scoped two deep on purpose: .fld label and .fld input are the same
   specificity as a bare .tickrow rule, so which one applied would come down to
   the order of this file. That is how the mode list came out stacked. */
.ticks{display:grid;gap:7px;margin-bottom:4px}
.ticks .tickrow label{display:flex;align-items:center;gap:8px;font-weight:400;
  color:var(--ink);margin-bottom:0;cursor:pointer;font-size:13.5px}
.ticks .tickrow input{width:auto;flex:none;margin:0}
.ticks .tickrow input:disabled+span{color:var(--mute)}
.ticks .tickrow .s{margin-left:24px}

/* --------------------------------------------------------- case thread */
.tline{list-style:none;margin:14px 0 0;padding:0 0 0 4px;display:grid;gap:0}
.tev{display:flex;gap:12px;padding:0 0 16px;position:relative}
.tev:not(:last-child)::before{content:'';position:absolute;left:4px;top:14px;
  bottom:-2px;width:1px;background:var(--line)}
.tdot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--line);
  margin-top:5px;box-shadow:0 0 0 3px var(--card)}
.tev:first-child .tdot{background:var(--brand)}
.tchange{font-size:13px;color:var(--ink);margin-top:2px}
.tnote{margin-top:6px;padding:9px 11px;background:var(--canvas);
  border:1px solid var(--line);border-radius:8px;font-size:13.5px;
  line-height:1.55;white-space:pre-wrap}

/* ------------------------------------------------------------ case mail */
.mails{display:grid;gap:10px;margin-top:12px}
.mailmsg{padding:11px 13px;border-radius:9px;border:1px solid var(--line);
  background:var(--card)}
.mailmsg.in{border-left:3px solid var(--brand)}
.mailmsg.out{border-left:3px solid var(--ok);background:var(--canvas)}
.mailsubj{font-weight:600;font-size:13.5px;margin:3px 0 5px}
.mailbody{font-size:13.5px;line-height:1.6;white-space:pre-wrap;
  overflow-wrap:anywhere}

/* ---------------------------------------------------------- settings */
.setlist{display:grid;gap:14px;margin-top:12px}
.setrow{display:flex;gap:12px;align-items:flex-start}
/* A setting whose control is a dropdown: label above, control below,
   because a select is wider than the column a tickbox lives in. */
.setrow-wide{display:grid;gap:9px}
.setctl{flex:none;width:26px;padding-top:2px}
.setctl input[type=checkbox]{width:16px;height:16px;margin:0}
.setctl input[type=number]{width:auto}
.setrow .bname{font-size:13.5px}

/* ------------------------------------------------------ quote builder */
.pfield{position:relative;margin-top:10px}
.psearch{position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:4px;
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 10px 28px rgba(16,32,56,.13);max-height:320px;overflow:auto}
.psearch:empty{display:none}
.prow{display:flex;gap:12px;align-items:center;padding:9px 12px;cursor:pointer;
  border-bottom:1px solid var(--line-2)}
.prow:last-child{border-bottom:0}
.prow.on{background:var(--canvas)}
.pmain{min-width:0;flex:1}
.pname{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pprice{flex:none;text-align:right;font-variant-numeric:tabular-nums;
  font-size:13px}
.qgrid{display:grid;grid-template-columns:90px minmax(0,1.4fr) 80px 130px;
  gap:0 12px;margin-top:12px}
.qgrid2{display:grid;grid-template-columns:130px minmax(0,1fr);gap:0 12px}
@media (max-width:720px){.qgrid,.qgrid2{grid-template-columns:minmax(0,1fr)}}
.qprev{min-height:44px}
.qprevrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  padding:11px 13px;background:var(--canvas);border:1px solid var(--line);
  border-radius:9px}
.qprice{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.warnpill{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}

/* ------------------------------------------------------- editable cells */
.cell{display:inline-block;min-width:62px;padding:2px 6px;border-radius:6px;
  border:1px solid transparent;cursor:text;font-variant-numeric:tabular-nums}
.cell:hover{border-color:var(--line);background:var(--card)}
.cell:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(109,74,201,.14)}
.cell .cellv{pointer-events:none}
input.cellin{width:88px;padding:2px 6px;border:1px solid var(--brand);
  border-radius:6px;font:inherit;font-variant-numeric:tabular-nums;
  text-align:right;background:var(--card)}

/* ------------------------------------------------------- email builder */
/* A page, not a drawer. The blocks stay at a readable width down the left and
   the email keeps its own 600px beside them, so what is on screen is close to
   what arrives. The preview sticks: scrolling a long email should not scroll
   the thing you are comparing it against out of view. */
.ebtop{display:flex;align-items:center;gap:14px;padding:0 0 12px;
  border-bottom:1px solid var(--line);margin-bottom:16px}
.ebname{font:600 20px/1.3 var(--sys);color:var(--ink);border:1px solid transparent;
  background:none;width:100%;padding:2px 6px;margin:-2px -6px;border-radius:6px;
  letter-spacing:-.015em}
.ebsubject{font:400 13.5px/1.5 var(--sys);color:var(--ink-2);border:1px solid transparent;
  background:none;width:100%;padding:2px 6px;margin:2px -6px 0;border-radius:6px}
.ebname:hover,.ebsubject:hover{border-color:var(--line)}
.ebname:focus,.ebsubject:focus{outline:0;border-color:var(--brand);background:var(--card)}
.savedmark{min-width:56px;text-align:right;white-space:nowrap}

.ebpage{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);
  gap:22px;align-items:start}
@media (max-width:1000px){.ebpage{grid-template-columns:minmax(0,1fr)}}
.ebleft{display:flex;flex-direction:column;gap:12px}
.ebright{position:sticky;top:18px;display:flex;flex-direction:column;gap:8px}

/* The palette is visible, not hidden behind a dropdown. Seven things you can
   add, all of them one click away. */
.ebpalette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ebadd{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);cursor:pointer;font:500 11px/1.2 var(--sys);
  color:var(--ink-2);text-align:center}
.ebadd:hover{border-color:var(--brand);color:var(--brand-ink);
  box-shadow:0 1px 3px rgba(27,36,52,.09)}
.ebglyph{font-size:16px;line-height:1;color:var(--ink)}
.ebadd:hover .ebglyph{color:var(--brand)}

.eblocks{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.eblock{min-width:0;border:1px solid var(--line);border-radius:8px;
  background:var(--card)}
.eblock.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(109,63,160,.09)}
.ebrow{display:flex;gap:10px;align-items:center;padding:9px 11px;
  cursor:pointer;min-width:0}
.ebkind{flex:0 0 auto;font:600 10.5px/1.4 var(--sys);letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);width:74px}
.ebmain2,.ebmain2>*{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ebmain2{flex:1}
.ebfields{padding:0 11px 12px;border-top:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:11px;margin-top:2px;padding-top:11px}
.ebfields .fld{margin:0}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}

.ebfold{border:1px solid var(--line);border-radius:8px;background:var(--card)}
.ebfoldhead{display:flex;width:100%;justify-content:space-between;
  align-items:center;gap:8px;padding:9px 11px;border:0;background:none;
  cursor:pointer;font:600 12px/1.4 var(--sys);color:var(--ink)}
.ebstyle{padding:0 11px 12px;display:flex;flex-direction:column;gap:11px}
.ebswatches{display:flex;flex-wrap:wrap;gap:10px}
.ebswatch{display:flex;flex-direction:column;align-items:center;gap:3px}
.ebswatch input[type=color]{width:38px;height:26px;padding:0;border:1px solid var(--line);
  border-radius:5px;background:none;cursor:pointer}

.ebframe{width:100%;height:calc(100vh - 190px);min-height:420px;
  border:1px solid var(--line);border-radius:8px;background:#fff}
.samplemail{width:100%;height:300px;border:0;background:#fff;
  border-top:1px solid var(--line)}
.plainpart{margin:0;padding:14px;background:var(--canvas);border:1px solid var(--line);
  border-radius:8px;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap;overflow-wrap:anywhere}


/* ------------------------------------------------------ marketing screens */
/* The audience rule builder. A row per rule, laid out so the eye reads
   "where <field> <is> <value>" as a sentence. */
.rules{display:grid;gap:7px;margin-top:10px}
.rule{display:grid;grid-template-columns:34px minmax(0,1.4fr) minmax(0,1fr)
  minmax(0,1.2fr) 30px;gap:7px;align-items:start}
.rule select,.rule input{width:100%}
@media (max-width:640px){
  .rule{grid-template-columns:minmax(0,1fr);gap:5px}
  .rule>span.s:first-child{display:none}
}

/* Which fields a form asks for. Checkboxes, wrapped, because the list is
   short and a multi-select hides what is chosen. */
.pickfields{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:9px}
.pick,.tickrow{display:flex;gap:7px;align-items:center;font-size:13.5px;
  color:var(--ink-2)}
.pick input,.tickrow input{width:auto;margin:0}

/* DNS records to publish. Monospace, and wrapping rather than truncating —
   a TXT record with the middle cut out is not something anyone can paste. */
.dnsrecs{display:grid;gap:9px;margin-top:11px}
.dnsrec{border:1px solid var(--line-2);border-radius:7px;padding:9px 11px;
  background:var(--canvas)}
.dnsrec code{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink);margin-left:7px;overflow-wrap:anywhere}
.dnsval{display:block;margin:6px 0 5px !important;overflow-wrap:anywhere}


/* --------------------------------------------------------------- journeys */
/* Numbered, because the order is the whole meaning of the list. */
.jsteps{display:grid;gap:8px;margin-top:11px}
.jstep{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);
  border-radius:9px;background:var(--card);padding:11px 13px;min-width:0}
.jstep.on{border-color:var(--brand);box-shadow:0 0 0 3px rgba(109,63,160,.09)}
.jstepnum{flex:0 0 24px;height:24px;border-radius:50%;background:var(--canvas);
  border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font:600 12px/1 var(--sys);color:var(--ink-2)}
.jstep.on .jstepnum{background:var(--brand);border-color:var(--brand);color:#fff}
.jstep .ebrow{cursor:pointer}
.jstep .ebfields{border-top:1px solid var(--line-2);margin-top:10px;
  padding:11px 0 0}


/* ----------------------------------------------------------------- agents */
/* Fact and wording, visibly different. The evidence block is tinted and the
   draft is in editable boxes, so a rep can see at a glance which half came out
   of the database and which half a model wrote. */
.evidence{margin-top:13px;padding:11px 13px;border-radius:8px;
  background:var(--canvas);border:1px solid var(--line-2)}


/* ---------------------------------------------------------------- mailbox */
/* Numbered setup steps. The numbers are the meaning here — these are done in
   order and somebody is following along in another window. */
ol.steps{margin:11px 0 0;padding-left:22px;display:grid;gap:7px}
ol.steps li{font-size:13px;line-height:1.55;color:var(--ink-2)}


/* A signal read out of email. The quote is set apart, because it is the one
   part somebody can check. */
.sigcard{border:1px solid var(--line);border-radius:9px;padding:12px 14px;
  background:var(--card)}
blockquote.said{margin:10px 0 0;padding:9px 13px;border-left:3px solid var(--brand);
  background:var(--canvas);border-radius:0 6px 6px 0;font-size:13.5px;
  line-height:1.6;color:var(--ink)}

/* The account history: six kinds of thing in one column.
 *
 * A rule down the left with a dot per entry, because the point of the column is
 * that these are the same kind of fact — something that happened with this
 * customer — regardless of which table each came out of. Colour carries the
 * kind so the shape of a relationship (all quotes, no contact; steady orders
 * and nothing else) reads before any of it is actually read. */
.chiprow{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 14px}
.empty{color:var(--mute);font-size:13px;padding:18px 2px}

.tl{list-style:none;margin:0;padding:0 0 0 22px;border-left:1px solid var(--line-2)}
.tl-row{position:relative;display:grid;gap:2px;padding:0 0 20px}
.tl-row:last-child{padding-bottom:2px}
.tl-dot{position:absolute;left:-27px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--line);box-shadow:0 0 0 3px #fff}
.tl-activity{background:#94A3B8}
.tl-email{background:#60A5FA}
.tl-meeting{background:#34D399}
.tl-quote{background:#FBBF24}
.tl-case{background:#F87171}
.tl-order{background:#10B981}
.tl-head{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.tl-title{font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;
  overflow-wrap:anywhere}
a.tl-title:hover{color:var(--brand);text-decoration:underline}
.tl-amt{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--ink-2)}
.tl-when{margin-left:auto;font-size:11.5px;color:var(--mute);white-space:nowrap}
.tl-detail{font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere}
.tl-who{font-size:11.5px;color:var(--mute)}
/* A colleague's email or meeting: the fact is on the record, the content is
   not, and it should not look like something that is merely collapsed. */
.tl-quiet .tl-title{font-weight:500;color:var(--ink-2)}
@media (max-width:640px){
  .tl-when{margin-left:0;width:100%}
}

/* Deciding which of your own emails belong on a customer's record.
 *
 * Laid out to be read rather than skimmed: whoever is looking at this is being
 * asked to make a judgement about each line, and a dense table encourages
 * ticking everything, which is the outcome the setting exists to avoid. */
.mrevlist{display:grid;gap:8px;max-height:420px;overflow-y:auto;padding:2px}
.mrev{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;
  align-items:start;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;background:#fff;cursor:pointer}
.mrev:hover{border-color:var(--brand)}
.mrev-top{display:flex;gap:10px;align-items:baseline}
.mrev-top b{font-size:13.5px;overflow-wrap:anywhere}
.mrev-when{margin-left:auto;font-size:11.5px;color:var(--mute);white-space:nowrap}
.mrev-snip{margin-top:5px;font-size:12.5px;color:var(--ink-2);
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.mrev-why{display:flex;gap:8px;align-items:center;margin-top:7px;flex-wrap:wrap}

/* Targets.
 *
 * The bar carries a marker for where the calendar says the person should be.
 * Without it a percentage says nothing: 60% of a quarter is excellent in week
 * four and a problem in week eleven, and the bar is the only place that
 * difference can be seen at a glance rather than worked out. */
.tgtlist{display:grid}
.tgtrow{display:grid;grid-template-columns:minmax(170px,1.1fr) minmax(0,2fr) auto;
  gap:18px;align-items:center;padding:15px 17px;
  border-bottom:1px solid var(--line-2)}
.tgtrow:last-child{border-bottom:0}
.tgtwho{font-size:13.5px;font-weight:600}
.tgtmid{display:grid;gap:7px}
.tgtbar{position:relative;height:9px;border-radius:5px;background:#EDF1F6;
  overflow:visible}
.tgtbar i{display:block;height:100%;border-radius:5px;background:var(--brand);
  max-width:100%}
/* Where the period says they should be. A line, not a fill — it is a
   comparison, not a quantity. */
.tgtbar u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);
  opacity:.55;border-radius:2px}
.tgtnums{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.tgtnums b{font-size:15px;font-variant-numeric:tabular-nums}
.tgtpct{margin-left:auto;font-size:12.5px;color:var(--mute);
  font-variant-numeric:tabular-nums}
.tgtend{display:flex;gap:9px;align-items:center;justify-content:flex-end}
@media (max-width:760px){
  .tgtrow{grid-template-columns:minmax(0,1fr);gap:11px}
  .tgtend{justify-content:flex-start}
}

/* The file library.
 *
 * A list, not a grid of thumbnails: people arrive here knowing roughly what
 * the file is called or which customer it was for, and are scanning names.
 * Thumbnails would mean fetching every file on the page to render it. */
.fllist{display:grid}
.flrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:12px 17px;border-bottom:1px solid var(--line-2)}
.flrow:last-child{border-bottom:0}
.flrow:hover{background:#FAFBFD}
.flicon{font-size:19px;color:var(--mute);width:22px;text-align:center}
.flname a{font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;
  overflow-wrap:anywhere}
.flname a:hover{color:var(--brand);text-decoration:underline}
.flmeta{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;margin-top:3px;
  font-size:12px;color:var(--mute)}
.flmeta a{color:var(--ink-2)}
.flsep{opacity:.5}
.flend{display:grid;justify-items:end;gap:2px;font-size:12px;color:var(--mute);
  font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:640px){
  .flrow{grid-template-columns:auto minmax(0,1fr)}
  .flend{grid-column:2;justify-items:start}
}

/* The shared inbox: what arrived, and what became of it. */
.inlist{display:grid}
.inrow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;
  gap:16px;align-items:center;padding:13px 17px;
  border-bottom:1px solid var(--line-2)}
.inrow:last-child{border-bottom:0}
.inrow:hover{background:#FAFBFD}
.insub{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.inout{font-size:12.5px;overflow-wrap:anywhere}
.inwhen{font-size:12px;color:var(--mute);white-space:nowrap;text-align:right}
@media (max-width:760px){
  .inrow{grid-template-columns:minmax(0,1fr);gap:7px}
  .inwhen{text-align:left}
}

/* File rows: what kind of document, and whether it lives here. */
.frowmeta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.flcat{color:var(--ink-2);font-weight:600}
.flplaces{color:var(--brand);font-weight:600}
.plainlist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.plainlist li{padding:9px 11px;border:1px solid var(--line);border-radius:8px}

/* The New button and its menu. */
.newwrap{position:relative}
.newmenu{position:absolute;right:0;top:calc(100% + 7px);z-index:60;
  min-width:186px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.14);
  padding:6px;display:grid;gap:2px}
.newmenu button{display:block;width:100%;text-align:left;border:0;
  background:transparent;padding:9px 11px;border-radius:7px;font-size:13.5px;
  color:var(--ink);cursor:pointer;font:inherit}
.newmenu button:hover{background:#F4F7FB;color:var(--brand)}

/* Search-and-choose, for lists too long to be a dropdown. */
.pickres{display:grid;gap:3px;max-height:210px;overflow:auto}
.pickrow{display:block;width:100%;text-align:left;border:1px solid var(--line);
  background:#fff;border-radius:7px;padding:8px 10px;font-size:13px;
  cursor:pointer;font:inherit;color:var(--ink)}
.pickrow:hover{border-color:var(--brand);background:#F4F7FB}
.formerr{margin:0;font-size:12.5px;color:var(--no);min-height:16px}

/* The rule builder: conditions and actions as rows of data. */
.condrow{display:grid;grid-template-columns:1.2fr 1fr 1.2fr auto;gap:8px;
  align-items:center}
.actrow{border:1px solid var(--line);border-radius:9px;padding:11px 12px;
  display:grid;gap:8px;background:#FAFBFD}
.tplcard{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  border:1px solid var(--line);border-radius:9px;padding:13px 14px}
.tplcard > div{min-width:0}
@media (max-width:640px){
  .condrow{grid-template-columns:minmax(0,1fr) auto}
  .tplcard{flex-direction:column}
}

/* The import preview: what each column was understood to mean. */
.mapgrid{display:grid;gap:5px;margin-top:8px}
.maprow{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:9px;
  align-items:baseline;font-size:12.5px}
.maprow code{background:#F4F7FB;border:1px solid var(--line);border-radius:5px;
  padding:2px 7px}
.maprow > span{color:var(--mute)}

/* The phone layout is NOT here.
 *
 * It lives at the end of web/shell.css, because shell.css is loaded after this
 * file and therefore wins. Having responsive rules in both is how `.stats`
 * ended up one-per-row on a phone while a rule in this file plainly said two:
 * the two files disagreed and the later one won silently. One place, and it is
 * the last one loaded. */

/* Ask. */
.askbox{width:100%;border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;font:inherit;font-size:14px;resize:vertical}
.askbox:focus{outline:2px solid var(--brand);outline-offset:-1px}
.askspec{background:#F4F7FB;border:1px solid var(--line);border-radius:8px;
  padding:11px 13px;font-size:11.5px;overflow-x:auto;margin:9px 0 0;
  white-space:pre;color:var(--ink-2)}

/* The pipeline board.
 *
 * Columns scroll sideways rather than shrinking: five stages squeezed into a
 * laptop makes every card two lines of wrapped text, which is the layout that
 * sends people back to the spreadsheet. */
.board{display:flex;gap:12px;overflow-x:auto;padding:14px 17px;
  align-items:flex-start;scrollbar-width:thin}
.boardcol{flex:0 0 268px;background:#F4F7FB;border:1px solid var(--line);
  border-radius:10px;padding:11px;display:grid;gap:9px;align-content:start;
  min-height:120px}
.boardcol.over{border-color:var(--brand);background:#F1ECFA}
.boardhead{display:flex;gap:8px;align-items:baseline}
.boardhead b{font-size:13px}
.boardn{margin-left:auto;background:var(--line);border-radius:10px;
  padding:1px 7px;font-size:11px;font-variant-numeric:tabular-nums}
.boardsum{display:flex;flex-direction:column;gap:1px;font-size:12px;
  font-variant-numeric:tabular-nums;color:var(--ink-2);
  padding-bottom:5px;border-bottom:1px solid var(--line-2)}
.deal{background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:9px 10px;display:grid;gap:3px;cursor:grab}
.deal:hover{border-color:var(--brand)}
.deal:active{cursor:grabbing}
.dealname{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.dealrow{display:flex;gap:8px;align-items:baseline;
  font-variant-numeric:tabular-nums}
.dealrow b{font-size:14px}
.dealmargin{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--ok)}
.dealmeta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;
  font-size:11px;color:var(--mute);margin-top:2px}
.dealred{color:var(--no);font-weight:600}
@media (max-width:900px){
  /* One column at a time on a phone: a board is a horizontal thing and
     pretending otherwise gives 40px columns. */
  .board{padding:11px 13px;scroll-snap-type:x mandatory}
  .boardcol{flex-basis:min(84vw,300px);scroll-snap-align:start}
}