/* Agency CRM shell — continues the Phase-1 design language (MPP red, white cards, #f6f6f8). */
:root {
  color-scheme: light;
  --red:#D6201F; --ink:#1a1a1a; --muted:#6b7280; --line:#e6e6e9; --bg:#f6f6f8; --card:#fff;
  --chip-bg:#eef0f3; --chip-red-bg:#fdecec; --green:#1a7f42; --green-bg:#e7f5ec;
  --warn-bg:#fff8e1; --warn-line:#f3e6a8; --col-bg:#eef0f3; --hover:#fafafa; --thead:#fafafa;
  --row-line:#f1f1f3; --chip-red-ink:#B21A19; --warn-ink:#7a5b00; --focus:#D6201F;
}
/* Dark mode — palette lifted from the MPP website tokens.css [data-theme="dark"] */
:root[data-theme="dark"] {
  color-scheme: dark;
  --red:#E53935; --ink:#F4EFE7; --muted:#9A9389; --line:#3A3833; --bg:#121110; --card:#1C1A17;
  --chip-bg:#26231F; --chip-red-bg:#3A1D1C; --green:#5FBF82; --green-bg:#1D2B22;
  --warn-bg:#2B2410; --warn-line:#4A3F1D; --col-bg:#1A1815; --hover:#26231F; --thead:#26231F;
  --row-line:#26231F; --chip-red-ink:#FF8A80; --warn-ink:#E8C46A; --focus:#E53935;
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif; color:var(--ink); background:var(--bg); }

/* Top bar + nav */
.topbar { display:flex; align-items:center; gap:14px; padding:12px 20px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.topbar .dot { width:10px; height:10px; border-radius:50%; background:var(--red); flex:0 0 auto; }
.topbar h1 { font-size:16px; margin:0; font-weight:650; }
.topbar .spacer { flex:1; }
.topbar .who { color:var(--muted); font-size:13px; }
#nav { display:flex; gap:2px; margin-left:10px; }
#nav a { text-decoration:none; color:var(--muted); font-size:14px; font-weight:550; padding:7px 12px; border-radius:8px; }
#nav a:hover { background:var(--bg); color:var(--ink); }
#nav a.active { color:var(--ink); box-shadow:inset 0 -2px 0 var(--red); border-radius:8px 8px 0 0; }

main { min-height:calc(100vh - 55px); }

/* Board */
.tabs { display:flex; gap:6px; padding:12px 20px 0; align-items:center; }
.tab { font:inherit; font-size:14px; font-weight:550; border:1px solid var(--line); background:var(--card); color:var(--muted); border-radius:9px 9px 0 0; border-bottom:none; padding:9px 16px; cursor:pointer; }
.tab.active { color:var(--ink); box-shadow:inset 0 -2px 0 var(--red); }
.tabs .count { margin-left:auto; font-size:13px; color:var(--muted); }
.tabs button.refresh { font:inherit; font-size:13px; border:1px solid var(--line); background:var(--card); border-radius:8px; padding:6px 12px; cursor:pointer; }
.tabs button.refresh:hover { border-color:#bbb; }
.board { display:flex; gap:14px; padding:14px 20px 18px; overflow-x:auto; align-items:flex-start; min-height:calc(100vh - 120px); }
.col { background:var(--col-bg); border-radius:12px; width:280px; flex:0 0 280px; display:flex; flex-direction:column; max-height:calc(100vh - 140px); }
.col h2 { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0; padding:12px 14px 8px; display:flex; justify-content:space-between; }
.col h2 .n { background:var(--card); border-radius:20px; padding:0 8px; color:var(--ink); font-weight:600; }
.col.drop { outline:2px dashed var(--red); outline-offset:-4px; }
.cards { padding:0 10px 12px; overflow-y:auto; display:flex; flex-direction:column; gap:9px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:11px 12px; cursor:grab; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.card:active { cursor:grabbing; }
.card .name { font-weight:600; margin-bottom:3px; }
.card .row { color:var(--muted); font-size:13px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.card .badge { background:var(--chip-red-bg); color:var(--chip-red-ink); font-size:11px; font-weight:600; padding:1px 7px; border-radius:20px; }
.card .tag { background:var(--col-bg); color:var(--muted); font-size:11px; padding:1px 7px; border-radius:20px; }
.empty { color:var(--muted); font-size:13px; padding:10px 12px; border:1px dashed var(--line); border-radius:10px; text-align:center; }
.note { color:var(--muted); font-size:13px; }

/* Slide-over lead panel */
.panel { position:fixed; top:0; right:0; height:100%; width:380px; max-width:90vw; background:var(--card); border-left:1px solid var(--line); box-shadow:-8px 0 24px rgba(0,0,0,.08); transform:translateX(100%); transition:transform .2s ease; z-index:10; display:flex; flex-direction:column; }
.panel.open { transform:translateX(0); }
.panel header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); }
.panel header h1 { font-size:16px; margin:0; font-weight:650; }
.panel .body { padding:16px 18px; overflow-y:auto; }
.panel .x { cursor:pointer; border:none; background:none; font-size:20px; color:var(--muted); }
.kv { margin:0 0 14px; }
.kv div { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid var(--row-line); font-size:14px; }
.kv div span:first-child { color:var(--muted); }
.sec { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:18px 0 8px; }
.msg { border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:8px; font-size:13px; }
.msg .meta { color:var(--muted); font-size:11px; margin-bottom:3px; display:flex; gap:6px; }

/* ── Contacts list ── */
.contacts-wrap { display:flex; min-height:calc(100vh - 55px); }
.side { width:230px; flex:0 0 230px; border-right:1px solid var(--line); background:var(--card); padding:14px 10px; }
.side h3 { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:14px 6px 6px; }
.side .seg { display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left; font:inherit; font-size:13.5px; padding:7px 10px; border:none; background:none; border-radius:8px; cursor:pointer; color:var(--ink); }
.side .seg:hover { background:var(--bg); }
.side .seg.active { background:var(--chip-red-bg); color:var(--red); font-weight:600; }
.side .seg .n { font-size:12px; color:var(--muted); }
.clist { flex:1; padding:16px 20px; min-width:0; }
.clist .bar { display:flex; gap:10px; margin-bottom:12px; align-items:center; flex-wrap:wrap; }
.clist input[type=search] { font:inherit; padding:8px 12px; border:1px solid var(--line); border-radius:9px; width:280px; background:var(--card); }
.btn { font:inherit; font-size:13.5px; font-weight:550; padding:8px 14px; border-radius:9px; border:1px solid var(--line); background:var(--card); cursor:pointer; }
.btn:hover { border-color:#bbb; }
.btn.primary { background:var(--red); border-color:var(--red); color:#fff; }
.btn.primary:hover { filter:brightness(.95); }
.btn.small { font-size:12.5px; padding:5px 10px; }
.btn.danger { color:var(--red); }
table.ct { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
table.ct th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); background:var(--thead); }
table.ct td { padding:10px 12px; border-bottom:1px solid var(--row-line); font-size:14px; vertical-align:middle; }
table.ct tr.row { cursor:pointer; }
table.ct tr.row:hover { background:var(--thead); }
.chip { display:inline-block; background:var(--col-bg); color:var(--muted); font-size:11px; padding:1px 8px; border-radius:20px; margin-right:4px; }
.chip.red { background:var(--chip-red-bg); color:var(--chip-red-ink); }
.chip.green { background:var(--green-bg); color:var(--green); }
.bulkbar { display:none; gap:8px; align-items:center; background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-ink); padding:8px 12px; border-radius:10px; margin-bottom:10px; }
.bulkbar.show { display:flex; }

/* ── Contact page ── */
.cpage { padding:18px 22px; max-width:1200px; }
.cpage .head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.cpage .head h2 { margin:0; font-size:22px; }
.cpage .cols { display:flex; gap:18px; align-items:flex-start; }
.cpage .left { width:340px; flex:0 0 340px; display:flex; flex-direction:column; gap:14px; }
.cpage .right { flex:1; min-width:0; }
.panelbox { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.panelbox h3 { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 10px; display:flex; justify-content:space-between; align-items:center; }
.fieldrow { display:flex; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--row-line); font-size:14px; align-items:center; }
.fieldrow span:first-child { color:var(--muted); flex:0 0 90px; }
.fieldrow .v { text-align:right; word-break:break-word; }
.editform { display:flex; flex-direction:column; gap:8px; }
.editform label { font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:3px; }
.editform input, .editform select, .editform textarea { font:inherit; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
/* Add-row form: even auto-fitting columns instead of a ragged flex-wrap */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px 14px; align-items:end; }
.form-grid label { font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:4px; min-width:0; }
.form-grid input, .form-grid select { font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); width:100%; box-sizing:border-box; }
.form-grid input:focus-visible, .form-grid select:focus-visible { outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus); }
.form-actions { display:flex; justify-content:flex-end; align-items:center; gap:14px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.form-sub { font-size:12px; font-weight:600; color:var(--ink); margin:16px 0 10px; }
.req { color:var(--red); }
.tabs2 { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.tabs2 button { font:inherit; font-size:14px; font-weight:550; padding:8px 14px; border:none; background:none; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; }
.tabs2 button.active { color:var(--ink); border-bottom-color:var(--red); }
.tl { display:flex; flex-direction:column; gap:0; }
.tl .item { display:flex; gap:12px; padding:10px 4px; border-bottom:1px solid var(--row-line); font-size:13.5px; }
.tl .item .ico { flex:0 0 26px; text-align:center; }
.tl .item .when { color:var(--muted); font-size:12px; white-space:nowrap; }
.tl .item .what { flex:1; min-width:0; }
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:flex-start; justify-content:center; padding-top:8vh; z-index:20; }
.modal-bg.show { display:flex; }
.modal { background:var(--card); border-radius:14px; padding:20px 22px; width:440px; max-width:92vw; max-height:80vh; overflow-y:auto; box-shadow:0 12px 48px rgba(0,0,0,.18); }
.modal h3 { margin:0 0 14px; font-size:17px; }
.modal .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.searchpick { position:relative; }
.searchpick .opts { position:absolute; top:100%; left:0; right:0; background:var(--card); border:1px solid var(--line); border-radius:8px; z-index:5; max-height:200px; overflow-y:auto; box-shadow:0 6px 20px rgba(0,0,0,.1); }
.searchpick .opts div { padding:8px 10px; cursor:pointer; font-size:13.5px; }
.searchpick .opts div:hover { background:var(--bg); }
.toast { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--bg); font-size:13.5px; padding:9px 16px; border-radius:10px; z-index:30; opacity:0; transition:opacity .2s; pointer-events:none; }
.toast.show { opacity:1; }

/* ── Analytics dashboard (M5) — pure-CSS bars + inline SVG sparkline, no chart libs ── */
.an-wrap { padding:18px 22px; max-width:1280px; margin:0 auto; }
.an-head { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.an-head h2 { margin:0; font-size:20px; }
.an-range { display:flex; gap:6px; }
.an-grid { display:grid; grid-template-columns:repeat(12, 1fr); gap:14px; }
.an-grid .panelbox { min-width:0; }
.span3 { grid-column:span 3; } .span4 { grid-column:span 4; } .span5 { grid-column:span 5; }
.span6 { grid-column:span 6; } .span12 { grid-column:span 12; }
@media (max-width:1000px) { .span3, .span4, .span5, .span6, .span7, .span8, .span9 { grid-column:span 12; } }
.an-cols2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.an-cols3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
@media (max-width:800px) { .an-cols2, .an-cols3 { grid-template-columns:1fr; } }
.statrow { display:flex; gap:26px; flex-wrap:wrap; margin-bottom:10px; }
.stat .v { font-size:22px; font-weight:650; }
.stat .l { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.bigstat { font-size:34px; font-weight:700; line-height:1.15; }
.bigstat small { display:block; font-size:12px; color:var(--muted); font-weight:500; }
.spark { width:100%; height:64px; display:block; }
.hbar { display:flex; align-items:center; gap:8px; font-size:13px; padding:3px 0; }
.hbar .lbl { flex:0 0 120px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbar .track { flex:1; background:var(--chip-bg); border-radius:4px; height:14px; overflow:hidden; }
.bar-h { display:block; height:100%; background:var(--chip-red-bg); border-right:2px solid var(--red); min-width:2px; }
.hbar .n { flex:0 0 36px; text-align:right; color:var(--muted); font-size:12.5px; }
.kvline { display:flex; justify-content:space-between; gap:10px; font-size:13.5px; padding:4px 0; border-bottom:1px solid var(--row-line); }
.kvline span:first-child { color:var(--muted); min-width:0; }
.fpipe { margin-bottom:14px; }
.fpipe-head { display:flex; align-items:center; gap:8px; margin:6px 0; }
.funnel-row { display:flex; gap:6px; overflow-x:auto; align-items:stretch; padding:4px 0 8px; }
.fstage { flex:1; min-width:104px; background:var(--thead); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.fstage .nm { font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fstage .cnt { font-size:18px; font-weight:650; }
.fstage .cnt small { font-size:11px; color:var(--muted); font-weight:500; }
.fstage .sub { font-size:11.5px; color:var(--muted); }
.fconv { align-self:center; text-align:center; font-size:11.5px; color:var(--muted); white-space:nowrap; flex:0 0 auto; line-height:1.2; }
.alert-red { background:var(--chip-red-bg); border-color:#f0b9b9; }
/* ── Today view (M7) → dashboard home (v3) ── */
.today { padding:18px 22px; max-width:1200px; margin:0 auto; }
.today .panelbox h3 { justify-content:flex-start; gap:8px; }
.today .panelbox h3 .n { background:var(--col-bg); border-radius:20px; padding:1px 9px; color:var(--ink); font-weight:600; }

/* Header band: Chicago date + KPI strip */
.today-head { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.today-head h2 { margin:0; font-size:21px; font-weight:650; letter-spacing:-0.01em; }
.today-date { color:var(--muted); font-size:14px; }
.today-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:16px; }
.kpi { display:block; text-decoration:none; font:inherit; text-align:left; color:inherit; width:100%; }
a.kpi, button.kpi { cursor:pointer; }
a.kpi:hover, button.kpi:hover { border-color:var(--muted); }
.kpi:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
.today-kpis .statcard .k { display:flex; gap:5px; align-items:center; }

/* Desktop: queue column + right widget rail. Mobile: single column, queue first. */
.today-layout { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:16px; align-items:start; }
.today-layout.no-rail { grid-template-columns:minmax(0, 1fr); }
.today-queue { display:flex; flex-direction:column; gap:14px; min-width:0; }
.today-rail { display:flex; flex-direction:column; gap:14px; min-width:0; }
.today .tag { background:var(--col-bg); color:var(--muted); font-size:11px; padding:1px 7px; border-radius:20px; white-space:nowrap; }
.today-widget-link { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.today-widget-link:hover { border-color:var(--muted); }
.today-widget-link .tw-ico { font-size:22px; flex:0 0 auto; }
.today-widget-link .tw-grow { flex:1; min-width:0; display:flex; flex-direction:column; }
.today-widget-link .tw-v { font-size:22px; font-weight:650; line-height:1.1; }
.today-widget-link .tw-l { font-size:12px; color:var(--muted); }
.today-widget-link .tw-go { color:var(--muted); font-size:18px; flex:0 0 auto; }
@media (max-width:900px) {
  .today-layout { grid-template-columns:1fr; }
  .today-queue { order:1; }
  .today-rail { order:2; }
}
.trow { display:flex; align-items:center; gap:12px; padding:9px 2px; border-bottom:1px solid var(--row-line); font-size:14px; flex-wrap:wrap; }
.trow:last-child { border-bottom:none; }
.trow .grow { flex:1; min-width:0; }
.trow a.name { font-weight:600; color:var(--ink); text-decoration:none; }
.trow a.name:hover { text-decoration:underline; }
.late { color:var(--red); font-weight:650; }
.unread-banner { background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:12px; padding:12px 16px; font-size:14px; display:flex; gap:6px; align-items:center; }
.allclear { text-align:center; padding:56px 20px; color:var(--muted); font-size:16px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
/* ── Templates + broadcasts (M4) ── */
.chip.yellow { background:var(--warn-bg); color:var(--warn-ink); }
.tpl-preview { width:100%; height:640px; border:1px solid var(--line); border-radius:10px; background:var(--card); }

/* ── Mobile pass (phone-first daily driving: Today, contacts, contact page, inbox) ── */
@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; padding: 10px 12px; }
  #nav { order: 10; width: 100%; margin-left: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #nav::-webkit-scrollbar { display: none; }
  #nav a { white-space: nowrap; font-size: 13.5px; padding: 6px 10px; }
  .contacts-wrap { flex-direction: column; }
  .side { width: 100%; flex-basis: auto; border-right: none; border-bottom: 1px solid var(--line); display: flex; overflow-x: auto; gap: 4px; padding: 8px 10px; }
  .side h3 { display: none; }
  .side .seg { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--line); border-radius: 20px; padding: 5px 11px; }
  .clist { padding: 12px 10px; }
  .clist input[type=search] { width: 100%; }
  table.ct th:nth-child(5), table.ct td:nth-child(5),
  table.ct th:nth-child(6), table.ct td:nth-child(6) { display: none; } /* tags + type cols */
  .cpage { padding: 12px 10px; }
  .cpage .cols { flex-direction: column; }
  .cpage .left { width: 100%; flex-basis: auto; }
  .board { padding: 10px 10px 14px; gap: 10px; }
  .col { width: 78vw; flex: 0 0 78vw; }
  .modal { width: 100%; max-width: 96vw; }
  .panelbox { padding: 12px 12px; }
  .tabs { flex-wrap: wrap; row-gap: 6px; }
  .tabs2 { overflow-x: auto; scrollbar-width: none; }
  .tabs2 button { white-space: nowrap; }
}

/* ── Impeccable recraft (product register): controls, states, motion, switcher ── */
input, select, textarea { color: var(--ink); accent-color: var(--red); }
::placeholder { color: var(--muted); opacity: 1; }
button { color: inherit; }

/* Focus is a first-class state — keyboard ring in the accent, both themes */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .tab:focus-visible, .seg:focus-visible { outline-offset: 1px; }

/* Interactive state vocabulary: rest → hover → active → disabled */
.btn { transition: border-color .15s ease-out, background-color .15s ease-out, transform .1s ease-out; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.primary:hover { filter: none; background: color-mix(in oklab, var(--red) 88%, black); }
:root[data-theme="dark"] .btn.primary:hover { background: color-mix(in oklab, var(--red) 88%, white); }
.card, .seg, .tab, #nav a, table.ct tr.row { transition: background-color .15s ease-out, border-color .15s ease-out, box-shadow .15s ease-out; }
.card:hover { border-color: color-mix(in oklab, var(--line) 40%, var(--muted)); }

/* Modal + panel motion: state feedback, 200ms, ease-out; no choreography */
.modal-bg { transition: opacity .15s ease-out; opacity: 0; pointer-events: none; display: flex; }
.modal-bg.show { opacity: 1; pointer-events: auto; }
.modal { transform: translateY(6px) scale(.985); transition: transform .2s cubic-bezier(.22,1,.36,1); }
.modal-bg.show .modal { transform: none; }
.toast { transition: opacity .2s ease-out, transform .2s ease-out; transform: translateX(-50%) translateY(4px); }
.toast.show { transform: translateX(-50%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Company switcher (GHL-style, top-left) ── */
.co-switch { position: relative; }
.co-switch > button { display: flex; align-items: center; gap: 7px; font: inherit; font-size: 13.5px; font-weight: 600;
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 6px 11px; cursor: pointer; color: var(--ink); max-width: 220px; }
.co-switch > button .caret { color: var(--muted); font-size: 10px; }
.co-switch > button:hover { border-color: var(--muted); }
.co-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; z-index: 15; display: none; }
.co-menu.open { display: block; }
.co-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: 14px;
  padding: 9px 10px; border: none; background: none; border-radius: 8px; cursor: pointer; color: var(--ink); }
.co-menu button:hover { background: var(--bg); }
.co-menu button.current { font-weight: 650; }
.co-menu button .dot2 { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.co-menu button.current .dot2 { background: var(--red); }
.co-menu .co-note { font-size: 11.5px; color: var(--muted); padding: 6px 10px 4px; border-top: 1px solid var(--row-line); margin-top: 4px; }

/* ── Timeline v2: rail + typed icon chips, readable hierarchy ── */
.tl { position: relative; padding-left: 2px; }
.tl::before { content: ''; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--row-line); }
.tl-item { position: relative; display: flex; gap: 12px; padding: 9px 4px 9px 0; align-items: flex-start; }
.tl-ico { position: relative; z-index: 1; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--chip-bg); border: 2px solid var(--card); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: 13px; }
.tl-ico.green { background: var(--green-bg); color: var(--green); }
.tl-ico.red { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.tl-body { flex: 1; min-width: 0; padding-top: 3px; }
.tl-title { font-size: 13.5px; font-weight: 550; }
.tl-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-when { font-size: 11.5px; color: var(--muted); white-space: nowrap; padding-top: 5px; }

/* ── Mobile-first architecture: bottom tab bar, card tables, snap board, panes ── */
.bottom-nav { display: none; }
.resp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.statcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.statcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.statcard .k { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.statcard .v { font-size: 20px; font-weight: 650; letter-spacing: -0.01em; }
.statcard .v.red { color: var(--chip-red-ink); }

@media (max-width: 820px) {
  body { padding-bottom: 62px; } /* room for the bottom bar */
  #nav { display: none; }        /* top tabs replaced by the bottom bar on phones */
  .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
    background: var(--card); border-top: 1px solid var(--line);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    text-decoration: none; color: var(--muted); font-size: 10.5px; padding: 6px 2px 4px; border-radius: 10px; }
  .bottom-nav a .bi { font-size: 19px; line-height: 1; }
  .bottom-nav a.active { color: var(--red); }
  .bottom-nav a:active { background: var(--bg); }
  .more-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 22; background: var(--card);
    border-radius: 16px 16px 0 0; border: 1px solid var(--line); border-bottom: none;
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .22s cubic-bezier(.22,1,.36,1); }
  .more-sheet.open { transform: none; }
  .more-sheet a { display: flex; align-items: center; gap: 12px; padding: 13px 8px; text-decoration: none;
    color: var(--ink); font-size: 15px; border-bottom: 1px solid var(--row-line); }
  .more-sheet a:last-child { border-bottom: none; }
  .sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 21; opacity: 0; pointer-events: none; transition: opacity .15s ease-out; }
  .sheet-bg.open { opacity: 1; pointer-events: auto; }

  /* Touch targets */
  .btn { min-height: 38px; }
  .btn.small { min-height: 32px; }

  /* Board: full-height snap pager — one stage per swipe */
  .board { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .col { width: 86vw; flex: 0 0 86vw; scroll-snap-align: center; max-height: calc(100vh - 210px); }

  /* Tables become cards (rows stack; each cell carries its label via data-label) */
  table.ct.cardable thead { display: none; }
  table.ct.cardable, table.ct.cardable tbody { display: block; }
  table.ct.cardable tr { display: block; border-bottom: 1px solid var(--line); padding: 10px 12px; }
  table.ct.cardable td { display: flex; justify-content: space-between; gap: 12px; border: none; padding: 3px 0; font-size: 13.5px; align-items: baseline; }
  table.ct.cardable td::before { content: attr(data-label); color: var(--muted); font-size: 11.5px; flex: 0 0 auto; }
  table.ct.cardable td:not([data-label])::before { content: none; }

  /* Inbox: single-pane flow (list ↔ thread) driven by .show-thread on the wrap */
  .inbox-wrap .side { display: flex; flex-direction: column; overflow-y: auto; max-height: none; border: none; width: 100%; }
  .inbox-wrap .side .seg { border: none; border-bottom: 1px solid var(--row-line); border-radius: 0; padding: 12px 10px; }
  .inbox-wrap #thread-wrap { display: none; }
  .inbox-wrap.show-thread .side { display: none; }
  .inbox-wrap.show-thread #thread-wrap { display: block; }
  .thread-back { display: inline-flex; }
}
@media (min-width: 821px) { .thread-back { display: none; } }
/* cmdk */
/* ⌘K command palette (F1): top-aligned overlay, token-only, both themes. Motion is
   state feedback (150ms ease-out fade + scale) — killed by the global reduced-motion rule. */
.cmdk-bg { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:flex-start; justify-content:center;
  padding:12vh 16px 0; z-index:20; opacity:0; pointer-events:none; transition:opacity .15s ease-out; }
.cmdk-bg.show { opacity:1; pointer-events:auto; }
.cmdk { background:var(--card); border:1px solid var(--line); border-radius:14px; width:100%; max-width:560px;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 12px 48px rgba(0,0,0,.18);
  transform:translateY(6px) scale(.985); transition:transform .15s ease-out; }
.cmdk-bg.show .cmdk { transform:none; }
.cmdk-input { font:inherit; font-size:15px; color:var(--ink); background:transparent; border:none;
  border-bottom:1px solid var(--line); padding:13px 16px; width:100%; }
.cmdk-input:focus, .cmdk-input:focus-visible { outline:none; } /* the dialog frames focus; a ring would double the border */
.cmdk-input::placeholder { color:var(--muted); }
.cmdk-list { overflow-y:auto; max-height:48vh; padding:6px; }
.cmdk-sec { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:8px 10px 4px; }
.cmdk-opt { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--ink); }
.cmdk-opt.active { background:var(--bg); }
.cmdk-opt .ico { flex:0 0 22px; text-align:center; }
.cmdk-opt .grow { flex:1; min-width:0; display:flex; flex-direction:column; }
.cmdk-opt .nm { font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-opt .sub { color:var(--muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-opt .hint { color:var(--muted); font-size:11px; flex:0 0 auto; }
.cmdk-empty { color:var(--muted); font-size:13px; text-align:center; padding:16px 12px; }
.cmdk-foot { display:flex; gap:14px; border-top:1px solid var(--line); color:var(--muted); font-size:11.5px; padding:7px 12px; }
.cmdk-foot kbd { font:inherit; font-size:10.5px; background:var(--chip-bg); border:1px solid var(--line); border-radius:4px; padding:0 4px; margin-right:3px; }
@media (max-width:820px) { .cmdk-bg { padding:8vh 10px 0; } .cmdk-list { max-height:56vh; } }
/* end cmdk */

/* ── App-wide chrome v2 (impeccable full-surface pass) ── */
/* Page rhythm: every page opens with the same header pattern */
.page-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px 0; flex-wrap: wrap; }
.page-head h2 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -0.01em; }
.page-head .count-chip { background: var(--chip-bg); color: var(--muted); font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 20px; }

/* Panel headers: calmer, consistent */
.panelbox h3 { font-size: 12px; letter-spacing: .05em; }
.panelbox h3 .note { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Skeleton loading (product register: skeletons, not spinners) */
@keyframes skel-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel { border-radius: 8px; height: 14px; margin: 10px 0;
  background: linear-gradient(90deg, var(--chip-bg) 25%, var(--row-line) 50%, var(--chip-bg) 75%);
  background-size: 200% 100%; animation: skel-sweep 1.2s linear infinite; }
.skel.lg { height: 22px; } .skel.w60 { width: 60%; } .skel.w40 { width: 40%; } .skel.w80 { width: 80%; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Initials avatar — contacts rows + contact page header */
.avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--chip-red-bg);
  color: var(--chip-red-ink); font-size: 13px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; }
.avatar.lg { flex-basis: 46px; width: 46px; height: 46px; font-size: 17px; }
.avatar.client { background: var(--green-bg); color: var(--green); }

/* Board cards v2: quieter surface, clear action row */
.card { padding: 12px 13px; }
.card .name { font-size: 14.5px; letter-spacing: -0.005em; }
.card .actions-row { border-top: 1px solid var(--row-line); margin-top: 9px; padding-top: 8px; display: flex; gap: 5px; }
.card .actions-row .btn.small { flex: 1; justify-content: center; display: inline-flex; align-items: center; }
.col h2 { padding: 13px 14px 9px; }
.col h2 .n { min-width: 26px; text-align: center; }

/* Tables: calmer rows, aligned numerics */
table.ct td { font-size: 13.5px; }
table.ct td strong { font-variant-numeric: tabular-nums; }

/* Login: brand presence without noise */
.login-card { border-top: 3px solid var(--red); }

/* Selection + scrollbar tuning */
::selection { background: var(--chip-red-bg); }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* Reviews (Phase A display) */
.rv-list { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 24px; }
.rv-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.rv-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rv-card-head strong { font-weight: 600; }
.rv-stars { color: #e8a33d; letter-spacing: 1px; white-space: nowrap; }
.rv-stars-off { color: var(--line); }
.rv-card-body { font-size: 15px; line-height: 1.55; color: var(--ink); }
.rv-card-body.note { color: var(--muted); }
.rv-card-foot { margin-top: 10px; }
.rv-pill { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--chip-bg); color: var(--muted); }
.rv-pill-ok { background: var(--green-bg); color: var(--green); }
.rv-pill-warn { background: var(--warn-bg); color: var(--warn-ink); }
.rv-reply { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.rv-reply-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rv-reply-posted { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--chip-bg); border-radius: 8px; padding: 8px 10px; }
.rv-reply-editor { margin-top: 8px; }
.rv-reply-box { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; line-height: 1.5; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); resize: vertical; }
.rv-reply-editbtns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.rv-reply-warn { margin-top: 6px; }

/* Contact-card outcome bar (CRM v3 module B). Token-only, no hardcoded colors. */
.outcome-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.outcome-bar .btn { flex: 0 0 auto; }
@media (max-width: 640px) { .outcome-bar .btn { flex: 1 1 auto; } }

/* ════════════════════════════════════════════════════════════════════════════
   MODULE F — Design foundations (CRM v3.1 experience wave)
   SVG icon system + shared scaffolding consumed by M1 (viewer/timeline),
   M3 (quotes), M5 (dashboard). Emoji-as-icon is retired — see DESIGN.md.
   Token-only, both themes, reduced-motion safe.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Icons: inline SVG from icons.js, sized by width/height attrs ── */
svg.icon { display: inline-block; vertical-align: -0.125em; flex: 0 0 auto; }
.icon-text { display: inline-flex; align-items: center; gap: 6px; }
/* leading icon inside a button: make the button a flex row so text + glyph align */
.btn.has-ico { display: inline-flex; align-items: center; gap: 6px; }
.btn.has-ico svg.icon { vertical-align: 0; }

/* ── Skeletons (product register: skeletons, never spinners) — `.skeleton` block ── */
.skeleton { display: block; border-radius: 8px; height: 14px; margin: 0;
  background: linear-gradient(90deg, var(--chip-bg) 25%, var(--row-line) 50%, var(--chip-bg) 75%);
  background-size: 200% 100%; animation: skel-sweep 1.2s linear infinite; }
.skeleton + .skeleton { margin-top: 10px; }
.skeleton.lg { height: 22px; }
.skeleton.sm { height: 10px; }
.skeleton.w80 { width: 80%; } .skeleton.w60 { width: 60%; } .skeleton.w40 { width: 40%; }
.skeleton.circle { width: 34px; height: 34px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ── Message viewer (.viewer) — full-screen modal, modal z-tier ── */
.viewer-bg { position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px;
  z-index: 20; opacity: 0; pointer-events: none; transition: opacity .15s ease-out; }
.viewer-bg.show { opacity: 1; pointer-events: auto; }
.viewer { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  width: 100%; max-width: 720px; max-height: 88vh; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,.2);
  transform: translateY(8px) scale(.99); transition: transform .2s cubic-bezier(.22,1,.36,1); }
.viewer-bg.show .viewer { transform: none; }
.viewer-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.viewer-subject { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; word-break: break-word; }
.viewer-x { flex: 0 0 auto; border: none; background: none; cursor: pointer; color: var(--muted);
  border-radius: 8px; padding: 4px; display: inline-flex; transition: background-color .15s ease-out, color .15s ease-out; }
.viewer-x:hover { background: var(--bg); color: var(--ink); }
.viewer-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.viewer-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--row-line); }
.viewer-body { flex: 1; min-height: 120px; overflow-y: auto; }
.viewer-text { padding: 18px 20px; margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--ink); }
.viewer-body iframe { display: block; width: 100%; height: 60vh; border: none; background: var(--card); }
.viewer-hint { display: flex; align-items: center; gap: 6px; padding: 10px 20px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--row-line); }
.viewer-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
@media (max-width: 820px) {
  .viewer-bg { padding: 0; }
  .viewer { max-width: 100%; height: 100vh; max-height: 100vh; border: none; border-radius: 0; }
  .viewer-body iframe { height: 100%; }
}

/* ── Dashboard grid v2 (.dash) — main queue column + widget rail ── */
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.dash.no-rail { grid-template-columns: minmax(0, 1fr); }
.dash-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr; }
  .dash-main { order: 1; }
  .dash-rail { order: 2; }
}

/* ── KPI tiles (.kpis / .kpi) — actionable, clickable, focusable ── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { display: flex; flex-direction: column; gap: 4px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-align: left;
  color: inherit; font: inherit; text-decoration: none;
  transition: border-color .15s ease-out, box-shadow .15s ease-out, transform .12s ease-out; }
a.kpi, button.kpi { width: 100%; cursor: pointer; }
a.kpi:hover, button.kpi:hover { border-color: var(--muted); box-shadow: 0 2px 12px rgba(0,0,0,.06); transform: translateY(-1px); }
.kpi:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.kpi-k { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.kpi-v { font-size: 24px; font-weight: 650; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi-v.red { color: var(--chip-red-ink); }
.kpi-sub { font-size: 12px; color: var(--muted); }

/* ── Widget rail cards (.widget) + activity feed (.feed) ── */
.widget { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.widget > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.widget > h3 .n { background: var(--col-bg); border-radius: 20px; padding: 1px 9px; color: var(--ink); font-weight: 600; letter-spacing: 0; }
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px solid var(--row-line);
  font-size: 13px; color: inherit; text-decoration: none; border-radius: 6px; }
.feed-item:last-child { border-bottom: none; }
.feed-item.clickable { cursor: pointer; transition: background-color .15s ease-out; }
.feed-item.clickable:hover { background: var(--hover); }
.feed-item.clickable:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.feed-ico { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: var(--chip-bg); color: var(--muted);
  display: flex; align-items: center; justify-content: center; }
.feed-ico.green { background: var(--green-bg); color: var(--green); }
.feed-ico.red { background: var(--chip-red-bg); color: var(--chip-red-ink); }
.feed-body { flex: 1; min-width: 0; }
.feed-title { font-size: 13px; line-height: 1.4; }
.feed-title .name { font-weight: 600; color: var(--ink); }
.feed-when { margin-top: 1px; font-size: 11.5px; color: var(--muted); }

/* ── Sparkline (inline SVG, no chart lib) ── */
.sparkline { display: block; width: 100%; height: 36px; overflow: visible; }
.sparkline .spark-line { fill: none; stroke: var(--red); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sparkline .spark-area { fill: var(--chip-red-bg); stroke: none; opacity: .55; }
.sparkline .spark-dot { fill: var(--red); stroke: var(--card); stroke-width: 1.5; }

/* ── Form hint line ── */
.form-hint { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.form-hint .icon { color: var(--muted); }

/* ── Timeline v2 refinements: svg icon bubbles + clickable message rows ── */
.tl-ico svg.icon { width: 15px; height: 15px; }
.tl-item.clickable { cursor: pointer; border-radius: 8px; transition: background-color .15s ease-out; }
.tl-item.clickable:hover { background: var(--hover); }
.tl-item.clickable:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tl-go { flex: 0 0 auto; align-self: center; color: var(--muted); opacity: 0; transition: opacity .15s ease-out; }
.tl-item.clickable:hover .tl-go,
.tl-item.clickable:focus-visible .tl-go { opacity: 1; }

/* Widget-link glyph now an svg icon (was an emoji at 22px) */
.today-widget-link .tw-ico svg.icon { width: 22px; height: 22px; }

/* Dashboard summary sentence (v3.1 audit fix) */
.dash-summary { margin: 2px 0 16px; color: var(--muted); font-size: 14px; }

/* M3 Quotes surface — .qsurface. Tokens only, both themes, reduced-motion safe. */
.qsurface .qbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.qsurface .qsearch-wrap { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.qsurface .qsearch-wrap svg.icon { color: var(--muted); }
.qsurface .qsearch-wrap:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 25%, transparent); }
.qsurface .qsearch-wrap input[type=search] { font: inherit; border: 0; outline: 0; background: transparent; color: var(--ink); width: 260px; }
.qsurface .q-actions { display: flex; gap: 8px; justify-content: flex-end; }
.qsurface .q-plan-empty { color: var(--muted); }
@media (max-width: 640px) {
  .qsurface .qsearch-wrap { width: 100%; }
  .qsurface .qsearch-wrap input[type=search] { width: 100%; }
  .qsurface .q-actions { justify-content: flex-start; flex-wrap: wrap; }
}