*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f4f5f7;--card:#ffffff;--ink:#1a2233;--muted:#66708a;
  --line:#e3e6ec;--accent:#2f5fe0;--accent-ink:#ffffff;
  --ok:#1a7f4e;--warn:#b26a00;--bad:#b3372f;--side:#141b2e;
}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.layout{display:flex;min-height:100vh}
.side{width:210px;background:var(--side);color:#c6cde0;padding:18px 0;flex-shrink:0}
.side .brand{color:#fff;font-weight:700;font-size:17px;padding:6px 20px 18px;display:block}
.side a.nav{display:block;padding:9px 20px;color:#aeb8d0;font-size:14px}
.side a.nav:hover,.side a.nav.active{background:#1e2740;color:#fff;text-decoration:none}
.main{flex:1;padding:26px 32px;max-width:1150px}

h1{font-size:21px;margin-bottom:16px}
h2{font-size:16px;margin:18px 0 10px}
.sub{color:var(--muted);font-size:13px}

.flash{background:#eef3ff;border:1px solid #c9d8ff;color:#20408a;
  padding:9px 14px;border-radius:8px;margin-bottom:16px;font-size:14px}

.cards{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:14px 18px;min-width:150px}
.card .big{font-size:24px;font-weight:700}
.card .lbl{color:var(--muted);font-size:12.5px;margin-top:2px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:18px;margin-bottom:18px}

table{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:#fafbfc}
td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
tr:last-child td{border-bottom:none}

.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;
  font-weight:600;background:#eef0f4;color:#444e66;white-space:nowrap}
.pill.queued,.pill.researched{background:#eef0f4}
.pill.drafted{background:#fdf3d7;color:#7a5b00}
.pill.contacted{background:#e3ecff;color:#20408a}
.pill.engaged{background:#dff3ff;color:#075a7a}
.pill.meeting_booked,.pill.trial_started{background:#ddf3e6;color:#135f3c}
.pill.not_interested,.pill.closed{background:#efefef;color:#666}
.pill.opted_out,.pill.escalated{background:#fde3e0;color:#8f2b24}
.pill.ok{background:#ddf3e6;color:#135f3c}
.pill.off{background:#fde3e0;color:#8f2b24}
.pill.idle{background:#ddf3e6;color:#135f3c}
.pill.normal{background:#fdf3d7;color:#7a5b00}
.pill.busy{background:#fde3e0;color:#8f2b24}
/* message states, so a held or queued message reads at a glance */
.pill.sent,.pill.handled{background:#ddf3e6;color:#135f3c}
.pill.queued{background:#e3ecff;color:#20408a}
.pill.held,.pill.draft{background:#fdf3d7;color:#7a5b00}
.pill.blocked,.pill.failed{background:#fde3e0;color:#8f2b24}
.pill.received{background:#dff3ff;color:#075a7a}
.pill.discarded{background:#efefef;color:#666}
/* meetings: what the calendar says, and how the guest answered */
.pill.booked,.pill.accepted{background:#ddf3e6;color:#135f3c}
.pill.proposed,.pill.needsAction,.pill.tentative{background:#fdf3d7;color:#7a5b00}
.pill.cancelled{background:#efefef;color:#666}
.pill.declined{background:#fde3e0;color:#8f2b24}
/* who someone is */
.pill.superadmin{background:#e7e0ff;color:#4b2ea8}
.pill.admin{background:#e3ecff;color:#20408a}

/* Buttons.
   Every colour below is set with two classes on purpose. `.small` is also a
   text utility (muted grey), and a one-class button rule loses to it: that is
   what turned "Withdraw acceptance" into grey text on red. */
button,.btn{background:var(--accent);color:var(--accent-ink);border:1px solid transparent;
  padding:8px 14px;border-radius:8px;font-size:14px;cursor:pointer;font-weight:600;
  line-height:1.2;display:inline-block;text-align:center;white-space:nowrap}
button:hover,.btn:hover{filter:brightness(1.08);text-decoration:none}
button:active,.btn:active{transform:translateY(1px)}
button:focus-visible,.btn:focus-visible,a:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
button:disabled,.btn:disabled{opacity:.55;cursor:not-allowed;filter:none}

/* size, never colour */
.btn.small,button.small{padding:4px 10px;font-size:12.5px}
.btn.small,button.small{color:var(--accent-ink)}

/* variants, after the size rule so they win */
.btn.danger,button.danger{background:var(--bad);color:#fff;border-color:transparent}
.btn.ghost,button.ghost{background:transparent;color:var(--accent);
  border-color:var(--accent)}
.btn.ghost:hover,button.ghost:hover{background:#f2f6ff;filter:none}
.btn.secondary,button.secondary{background:#fff;color:var(--accent);
  border-color:var(--accent)}
.btn.secondary:hover,button.secondary:hover{background:#f2f6ff;filter:none}
h3{font-size:14.5px;margin:0 0 6px}

input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink)}
textarea{min-height:110px;resize:vertical}
label{display:block;font-size:13px;font-weight:600;margin:12px 0 5px}
form.inline{display:inline}

.msg-row{display:flex;margin-bottom:10px}
.msg{max-width:70%;padding:10px 14px;border-radius:12px;font-size:14px}
.msg .meta{font-size:11.5px;color:var(--muted);margin-bottom:4px;white-space:normal}
.msg .body{white-space:pre-wrap}
.msg .body.rich{white-space:normal}
.msg .body.rich p{margin:0 0 10px}
.msg .body.rich p:last-child{margin-bottom:0}
.msg .subj{display:block;font-weight:700;margin-bottom:2px}
.msg-row.out{justify-content:flex-end}
.msg-row.out .msg{background:#e3ecff}
.msg-row.in .msg{background:#fff;border:1px solid var(--line)}
.msg-row .msg.draft{opacity:.65;border:1px dashed var(--accent)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}.main{padding:16px}.side{width:64px}
  .side .brand{font-size:11px;padding:6px 8px 14px}.side a.nav{padding:9px 8px;font-size:11px}}
.markdown{font-size:14px}
.markdown h2,.markdown h3{margin:10px 0 4px;font-size:14.5px}
.small{font-size:12.5px;color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}

/* Settings accordions: long page, one thing at a time */
details.section{background:var(--card);border:1px solid var(--line);
  border-radius:10px;margin-bottom:12px;padding:0 16px}
details.section>summary{cursor:pointer;padding:14px 0;font-size:15px;
  list-style:none;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
details.section>summary::-webkit-details-marker{display:none}
details.section>summary::before{content:"\25B8";color:var(--muted);
  display:inline-block;transition:transform .15s}
details.section[open]>summary::before{transform:rotate(90deg)}
details.section[open]>summary{border-bottom:1px solid var(--line);
  margin-bottom:14px}
details.section>.panel{border:none;padding:0 0 14px;margin:0 0 14px}
details.section>.panel+.panel{border-top:1px solid var(--line);padding-top:14px}
.settings-jump{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.settings-jump a{font-size:13px;padding:4px 10px;border:1px solid var(--line);
  border-radius:99px;background:var(--card)}

/* ---------------------------------------------------------------- fixes
   Found in an audit of the rendered views. Each one is a real failure
   mode, not a preference: text that cannot be read, content that escapes
   its box, or a control whose state is invisible. */

/* Long, unbreakable strings - provider error blobs, URLs, webhook tokens,
   email addresses - used to push tables and chat bubbles sideways. */
td,.msg .body,.msg .subj,.mono,.flash,.markdown{overflow-wrap:anywhere}
/* Headers wrap at spaces only: "WHEN (UTC)" in a narrow column was coming
   out one letter per line. */
th{overflow-wrap:normal;word-break:keep-all}
.nowrap{white-space:nowrap}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:18px}
/* Without this, one long cell (a message preview) starves its neighbours
   and names wrap one letter per line. */

.table-wrap>table{margin-bottom:0}

/* A provider failure can be several hundred characters; the flash used to
   grow to half the screen. */
.flash{max-height:8.5em;overflow:auto}

/* Message previews in lists: two lines, then stop. */
/* Two lines, clipped on the line boundary - not mid-glyph, which left a
   sliver of a third line under the row border. */
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.45;max-height:2.9em}

/* Which page you are on, in the sidebar. */
.side a.nav{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-left:3px solid transparent}
.side a.nav.active{background:#1e2740;color:#fff;border-left-color:var(--accent)}
.side .who{padding:14px 20px;color:#7c88a6;font-size:12px;line-height:1.5;
  border-top:1px solid #222c47;margin-top:10px;overflow-wrap:anywhere}

/* Buttons sitting next to each other in a table cell should not collide. */
.actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.actions form{display:inline-flex;gap:6px;align-items:center}
.actions input{width:auto;min-width:120px}

/* Checkbox rows: the box should not stretch to the full width. */
label.check{display:flex;gap:8px;align-items:flex-start;font-weight:400;
  font-size:13.5px;margin:8px 0}
label.check input{width:auto;margin-top:2px;flex:none}

/* Banners that carry a state, rather than a colour picked by hand. */
.notice{border-radius:10px;padding:16px 18px;margin-bottom:18px;
  border:1px solid var(--line);background:var(--card)}
.notice h2{margin-top:0}
.notice.warn{background:#fffdf6;border-color:#f0c98a}
.notice.bad{background:#fff7f6;border-color:#f0b6b0}
.notice.good{background:#f5fbf7;border-color:#b7e0c7}

/* Definition-style status lines: label left, value right, aligned. */
.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}
.facts dt{color:var(--muted)}
.facts dd{margin:0}

@media(max-width:900px){
  h1{font-size:19px}
  .cards{gap:10px}
  .card{flex:1 1 140px}
  .actions{justify-content:flex-start}
}

/* --- hand-picking modal ------------------------------------------------ */
.modal{position:fixed;inset:0;background:rgba(17,20,26,.45);z-index:50;
  display:none;align-items:flex-start;justify-content:center;padding:24px 16px;
  overflow:auto}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:12px;width:100%;max-width:900px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);display:flex;flex-direction:column;
  max-height:88vh}
.modal-head,.modal-foot{padding:14px 18px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
.modal-head{border-bottom:1px solid var(--line)}
.modal-foot{border-top:1px solid var(--line);background:#fbfbfd;
  border-radius:0 0 12px 12px}
.modal-head h2{margin:0;font-size:17px}
.modal-body{padding:14px 18px;overflow:auto}
.picker-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.picker-filters input,.picker-filters select{width:auto;flex:1 1 150px;margin:0}
.picker-filters input:first-child{flex:2 1 220px}
.picker-table table{margin:0}
.picker-pager{display:flex;justify-content:space-between;align-items:center;
  gap:10px;flex-wrap:wrap;margin-top:12px}
.modal-close{background:none;border:0;font-size:22px;line-height:1;cursor:pointer;
  color:var(--muted);padding:0 4px}
.modal-close:hover{color:var(--ink)}
@media (max-width:640px){
  .modal{padding:0}
  .modal-box{max-width:none;border-radius:0;max-height:100vh;height:100vh}
  .modal-foot{border-radius:0}
}

.draft-edit{margin-top:10px;padding:12px;border:1px solid var(--line);
  border-radius:8px;background:#fff}
.draft-edit textarea{min-height:150px}

/* --- list furniture: search, sortable headers, pager --------------------- */
.list-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-bottom:12px}
.list-controls input,.list-controls select{width:auto;margin:0;flex:0 1 auto}
.list-controls input[name="q"]{flex:1 1 240px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
a.sort-link{color:inherit;text-decoration:none;white-space:nowrap}
a.sort-link:hover{color:var(--ink);text-decoration:underline}
a.sort-link.on{color:var(--ink)}
a.sort-link .caret{margin-left:4px;font-size:11px}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.45;max-height:4.35em}

/* --- working hours: day chips and inline pickers ------------------------ */
.hours{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.hours-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hours-row select{width:auto;margin:0}
.hours-label{font-size:12px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;min-width:64px}
.daypick{display:inline-flex;border:1px solid var(--line);border-radius:8px;
  overflow:hidden}
.daypick .day{position:relative;display:inline-flex;align-items:center;
  justify-content:center;min-width:46px;padding:7px 10px;font-size:13px;
  cursor:pointer;margin:0;border-right:1px solid var(--line);
  background:#fff;color:var(--ink);user-select:none;transition:background .12s}
.daypick .day:last-child{border-right:0}
.daypick .day:hover{background:#eef1f3}
/* the chip follows the checkbox, so a click shows immediately. `.on` is the
   server's first paint and the fallback for browsers without :has() */
.daypick .day.on,
.daypick .day:has(input:checked){background:var(--ink);color:#fff;font-weight:600}
.daypick .day:has(input:checked):hover{background:#2b3a42}
/* hidden, but still focusable: display:none takes a control off the keyboard */
.daypick .day input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.daypick .day:focus-within{outline:2px solid var(--accent);outline-offset:-2px}

/* --- inline phone correction on the prospects list ---------------------- */
.phone-fix{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap}
.phone-fix input{margin:0;width:140px;padding:4px 6px;font-size:12px;
  border-color:var(--bad);color:var(--bad)}
.phone-fix .note{max-width:170px}
.btn.disabled{opacity:.4;cursor:default;pointer-events:none}
.panel.flash{animation:flash 1.1s ease-in-out 2}
@keyframes flash{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 3px var(--accent)}}
@media (prefers-reduced-motion: reduce){.panel.flash{animation:none;
  box-shadow:0 0 0 3px var(--accent)}}