/* Avalon Dialer — one page, big buttons, laptop-first. */
* { box-sizing: border-box; margin: 0; }
:root {
  --bg: #0f1420; --panel: #1a2233; --line: #2c3750;
  --text: #e8edf7; --muted: #8794ad;
  --primary: #3b82f6; --primary-hi: #2563eb;
  --danger: #dc2626; --gold: #d4a017; --ok: #16a34a;
}
body { background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, Segoe UI, sans-serif; }
.hidden { display: none !important; }
.screen { min-height: 100vh; }
.muted { color: var(--muted); }
.err { color: #f87171; min-height: 1.3em; margin-top: 8px; white-space: pre-wrap; }
.kbd { font-size: 11px; opacity: .6; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }

/* buttons */
button { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 16px; cursor: pointer; }
button:hover { border-color: var(--primary); }
button.big { padding: 16px 20px; font-size: 17px; font-weight: 600; }
button.xl { padding: 26px 44px; font-size: 24px; }
button.primary { background: var(--primary); border-color: var(--primary-hi); }
button.primary:hover { background: var(--primary-hi); }
button.danger { background: #7f1d1d; border-color: var(--danger); }
button.gold { background: #7c5e0b; border-color: var(--gold); }
button.ghost { background: transparent; }
button:disabled { opacity: .45; cursor: default; }

/* login */
.login-box { max-width: 360px; margin: 18vh auto; background: var(--panel); padding: 32px;
  border-radius: 14px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.login-box input { font-size: 22px; padding: 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); text-align: center; letter-spacing: 4px; }

/* layout */
#topbar { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--panel); }
.pill { background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 12px; margin-left: 8px; font-size: 14px; color: var(--muted); }
.timer { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; color: var(--ok); margin-right: 14px; }
#stage { max-width: 860px; margin: 0 auto; padding: 24px 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.center { text-align: center; padding: 60px 24px; }

/* contact card */
.banner { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.banner.callback { color: var(--gold); font-weight: 700; }
#card h2 { font-size: 28px; margin-bottom: 14px; }
.cardgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 18px; margin-bottom: 12px; }
.cardgrid .k { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.cardgrid .v { font-size: 16px; }
.big-v { font-size: 20px; font-weight: 700; }
.lastnote { background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; font-size: 14px; color: var(--muted); white-space: pre-wrap;
  max-height: 90px; overflow-y: auto; margin-bottom: 16px; }
.dialrow { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }

/* dispositions */
.dispo-title { margin: 14px 0 10px; font-weight: 700; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, 1fr); } }

/* moment-card panel */
#desk { position: fixed; top: 0; right: 0; width: min(460px, 92vw); height: 100vh;
  background: var(--panel); border-left: 1px solid var(--line); z-index: 40;
  display: flex; flex-direction: column; }
.desk-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid var(--line); }
.edit-badge { font-size: 11px; letter-spacing: 1px; color: #4ade80; border: 1px solid #16a34a;
  border-radius: 4px; padding: 2px 7px; margin-left: 10px; vertical-align: 2px; }
.idle-tools { margin-top: 14px; }

#statusStrip { padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--bg);
  font-size: 12px; line-height: 1.7; color: var(--muted); }
#statusStrip b { color: var(--text); font-weight: 600; }
#statusStrip span { white-space: nowrap; }
#statusStrip span + span::before { content: " · "; color: var(--line); }

#chipStrip { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); }
.chip { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line); cursor: pointer; color: var(--muted); }
.chip:hover { border-color: var(--primary); color: var(--text); }
.chip.active { background: var(--primary); border-color: var(--primary-hi); color: #fff; }
.chip .hk { opacity: .55; font-weight: 400; margin-right: 4px; }

#cardsArea { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex;
  flex-direction: column; gap: 10px; }
.mcard { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
.mcard-trigger { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: #10141f; color: var(--text); border: 0; border-radius: 0;
  padding: 10px 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.mcard-trigger:hover { color: #fff; }
.mcard-trigger .caret { margin-left: auto; color: var(--muted); font-size: 12px; }
.badge { font-size: 10px; font-weight: 800; letter-spacing: 1px; border-radius: 4px; padding: 2px 6px; }
.badge.locked { background: #7f1d1d; color: #fecaca; }
.badge.yours { background: #14532d; color: #bbf7d0; }
.mcard-body { padding: 12px; }
.mcard-line { font-size: 19px; line-height: 1.45; border-radius: 8px; padding: 12px;
  border: 1px solid var(--line); background: var(--panel); }
.mcard.locked .mcard-line { border-color: var(--danger); background: rgba(220, 38, 38, .10); }
.mcard.custom .mcard-line { border-color: var(--ok); background: rgba(22, 163, 74, .10); }
.mcard-then { font-size: 13px; color: var(--muted); margin-top: 9px; line-height: 1.5; }
.mcard-tools { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.mcard-tools .linkish { background: none; border: none; color: var(--primary); font-size: 12px;
  cursor: pointer; padding: 0; }
.mcard-tools .linkish:hover { text-decoration: underline; }
.hearit { font-size: 12px; padding: 4px 10px; border-radius: 6px; }
.mcard textarea { width: 100%; min-height: 110px; font: 15px/1.45 system-ui, sans-serif;
  background: var(--panel); color: var(--text); border: 1px solid var(--ok);
  border-radius: 8px; padding: 10px; resize: vertical; box-sizing: border-box; }
.savestate { font-size: 11px; color: var(--muted); }
.savestate.err { color: #f87171; }

/* modal */
/* ABOVE .dispo (z-index 60). The disposition grid became a full-screen
   overlay, and every modal it opens — gatekeeper, callback, BOOKED,
   wrong trade — was rendering behind it, invisible and unclickable. */
#modalWrap { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 70;
  display: flex; align-items: center; justify-content: center; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 24px; width: min(460px, 92vw); }
.modal h3 { margin-bottom: 14px; }
.modal label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; }
.modal input, .modal select { width: 100%; font-size: 17px; padding: 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.modal .checkrow { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.modal .checkrow input { width: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* toast */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--primary); border-radius: 10px;
  padding: 12px 22px; z-index: 80; font-weight: 600; }

/* practice */
.practice-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.drillcard { text-align: left; padding: 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); cursor: pointer; }
.drillcard:hover { border-color: var(--primary); }
.drillcard .dname { font-weight: 700; margin-bottom: 4px; }
.drillcard .dstats { font-size: 13px; color: var(--muted); }
.drillcard .req { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #facc15;
  border: 1px solid #a16207; border-radius: 4px; padding: 1px 6px; margin-left: 8px; }
#chatLog { background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; height: 320px; overflow-y: auto; margin-bottom: 10px; }
.msg { margin-bottom: 10px; max-width: 85%; padding: 8px 12px; border-radius: 10px; font-size: 15px; }
.msg.you { background: #1d3a63; margin-left: auto; }
.msg.them { background: #262f42; }
.msg .who { font-size: 10px; letter-spacing: 1px; color: var(--muted); margin-bottom: 2px; }
.chatrow { display: flex; gap: 8px; }
.chatrow input { flex: 1; font-size: 16px; padding: 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text); }
#micBtn.live { background: #7f1d1d; border-color: var(--danger); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .6; } }
#gradeCard { border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; font-size: 15px; }
#gradeCard.pass { background: rgba(22,163,74,.15); border: 1px solid var(--ok); }
#gradeCard.fail { background: rgba(220,38,38,.12); border: 1px solid var(--danger); }
#gradeCard .verdict { font-size: 20px; font-weight: 800; margin-bottom: 6px; }

/* ---------- read-only queue preview (idle screen, outside the window) ---------- */
#queuePreview { margin-top: 18px; text-align: left; max-width: 640px;
  margin-left: auto; margin-right: auto; }
.qp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.qp-head strong { font-size: 15px; }
.qp-note { font-size: 12px; color: var(--muted); font-style: italic; width: 100%; }
.qp-row { padding: 10px 12px; margin-bottom: 6px; border-radius: 8px;
  background: var(--panel2, #1a2133); border-left: 3px solid var(--line); opacity: .75; }
.qp-row.on { opacity: 1; border-left-color: var(--ok); }
.qp-main { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.qp-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.qp-when { font-size: 12px; margin-top: 4px; }
.qp-open { color: var(--ok); font-weight: 600; }
.qp-shut { color: var(--muted); }
.qp-badge { font-size: 10px; letter-spacing: .5px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; background: #2a3450; color: var(--text); }
.qp-badge.cb { background: #7c5e10; color: #ffe9a8; }
.qp-badge.fresh { background: #24344d; color: var(--muted); }

/* ---------- brand lockup ---------- */
.brandlock{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.mark{width:30px;height:30px;border-radius:7px;flex:0 0 auto;
  background:linear-gradient(135deg,#e5b567,#a8763a);color:#20160a;
  display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:.02em}
.mark.sm{width:22px;height:22px;font-size:12px;border-radius:5px}
.wordmark{font-size:13px;letter-spacing:.16em;opacity:.85}
.wordmark b{font-weight:700}
.loginfoot{margin-top:16px;font-size:12px;line-height:1.55;opacity:.55}
#topbar .topleft{display:flex;align-items:center;gap:9px}

/* ---------- idle greeting ---------- */
.greeting{font-size:19px;margin-bottom:16px;line-height:1.35}
.greeting .ghint{display:block;font-size:12.5px;opacity:.5;margin-top:5px;font-weight:400}

/* ---------- demo mode ---------- */
.demobanner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#3a2f18;border:1px solid #6b5a29;color:#e8d9a8;
  padding:9px 13px;border-radius:9px;font-size:13px;margin-bottom:12px}
.demobanner .ghost.sm{margin-left:auto;padding:3px 9px;font-size:12px}

/* ---------- call-screen extras ---------- */
.tagrow{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 12px}
.tag{font-size:11px;padding:2px 9px;border-radius:99px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);opacity:.8}
.cbhistory{margin:10px 0;padding:10px 12px;border-radius:9px;
  background:rgba(229,181,103,.08);border:1px solid rgba(229,181,103,.25)}
.cbhistory .k{display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;opacity:.6;margin-bottom:5px}
.cbrow{font-size:13.5px;padding:2px 0}
.history{margin-top:12px;font-size:13px}
.history summary{cursor:pointer;opacity:.6;font-size:12px;
  text-transform:uppercase;letter-spacing:.06em}
.history summary:hover{opacity:.9}
.hrow{padding:8px 0;border-top:1px solid rgba(255,255,255,.07)}
.hwhen{display:block;font-size:11px;opacity:.45;margin-bottom:2px}
.hbody{white-space:pre-wrap;opacity:.85;line-height:1.5}

/* ---------- call state bar ----------
   One unmistakable strip. Colour and wording both change per phase, so
   "am I live?" is answerable from across the room, not by reading grey text. */
.callbar{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-radius:11px;margin-bottom:14px;border:1px solid transparent;
  font-size:15px;letter-spacing:.02em}
.callbar.hidden{display:none}
.cb-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:currentColor}
.cb-label{font-weight:700;letter-spacing:.06em}
.cb-timer{font-variant-numeric:tabular-nums;font-size:26px;font-weight:800;
  line-height:1;margin-left:2px}
.cb-hint{margin-left:auto;font-size:13px;opacity:.75;text-align:right}

/* connecting — we are working, nothing is wrong */
.callbar.dialing{background:rgba(229,181,103,.10);border-color:rgba(229,181,103,.35);color:#e5b567}
.callbar.dialing .cb-dot{animation:cb-pulse 1s ease-in-out infinite}

/* ringing — their phone is actually ringing */
.callbar.ringing{background:rgba(74,143,231,.12);border-color:rgba(74,143,231,.40);color:#79b0f5}
.callbar.ringing .cb-dot{animation:cb-pulse .6s ease-in-out infinite}

/* live — loudest state on the screen */
.callbar.live{background:rgba(78,168,122,.16);border-color:rgba(78,168,122,.55);color:#5fd39a;
  box-shadow:0 0 0 1px rgba(78,168,122,.18), 0 6px 22px rgba(78,168,122,.12)}
.callbar.live .cb-dot{width:13px;height:13px;animation:cb-live 1.4s ease-in-out infinite}
.callbar.live .cb-label{font-size:17px}

/* ended — deliberately flat */
.callbar.ended{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.55)}
.callbar.ended .cb-dot{opacity:.45;animation:none}

@keyframes cb-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes cb-live{0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(1.25)}}

/* the hangup button matters more once you are live */
.callbar.live ~ .dialrow #hangupBtn{box-shadow:0 0 0 2px rgba(201,90,90,.35)}

@media (prefers-reduced-motion: reduce){
  .cb-dot{animation:none !important}
}

/* ---------- disposition: blocking, centered, unmissable ----------
   This used to be an inline grid at the bottom of the card that was easy to
   scroll past. A call is not logged until one of these is picked, so it now
   covers the screen and Esc will not dismiss it. */
.dispo{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:24px;overflow-y:auto;
  background:rgba(6,10,18,.82);backdrop-filter:blur(3px)}
.dispo.hidden{display:none}
.dispo-panel{background:var(--panel,#161d2e);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:26px 28px 22px;max-width:780px;width:100%;
  box-shadow:0 24px 70px rgba(0,0,0,.55);outline:none;
  animation:dispo-in .16s ease-out}
@keyframes dispo-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1}}
.dispo-title{font-size:26px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px}
.dispo-who{opacity:.6;font-size:14px;margin-bottom:14px}
.dispo-warn{background:rgba(201,118,90,.13);border:1px solid rgba(201,118,90,.42);
  color:#e6b09a;border-radius:9px;padding:9px 13px;font-size:14px;margin-bottom:16px}
.dispo .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.dispo .grid .big{display:flex;align-items:center;gap:11px;text-align:left;
  padding:15px 16px;font-size:15.5px;line-height:1.25}
.dispo .grid .big b{flex:0 0 auto;width:26px;height:26px;border-radius:7px;
  background:rgba(255,255,255,.10);display:grid;place-items:center;
  font-size:13px;font-weight:800;opacity:.85}
.dispo-foot{display:flex;align-items:center;gap:12px;
  margin-top:16px;font-size:12.5px;opacity:.55}
.dispo-foot .ghost.sm{margin-left:auto;padding:4px 10px;font-size:12px;opacity:1}

/* AMD auto-logged: same overlay, already answered */
.dispo-auto{background:rgba(74,143,231,.12);border:1px solid rgba(74,143,231,.40);
  border-radius:11px;padding:16px 18px;margin-bottom:18px}
.da-head{font-size:17px;font-weight:700;margin-bottom:5px}
.da-sub{font-size:13.5px;opacity:.72;margin-bottom:13px;line-height:1.5}
.da-row{display:flex;gap:10px;flex-wrap:wrap}
.da-row .big{padding:11px 16px;font-size:14.5px}

/* AMD thinks it hears a recording — a hint, not a verdict. The bar stays
   green because the call is still live and still the caller's to judge. */
.callbar.live.suspect{border-color:rgba(229,181,103,.65);
  box-shadow:0 0 0 1px rgba(229,181,103,.22), 0 6px 22px rgba(229,181,103,.12)}
.callbar .cb-hint{max-width:52%}
.cb-sub{display:block;opacity:.8;font-size:12px;margin-top:2px}

/* A callback served ahead of its promised time. Gold, because it is still the
   right lead to be on — just not yet the promised minute. */
.banner.early{color:var(--gold,#e5b567);font-weight:700;text-transform:none;
  letter-spacing:0;font-size:14px}
.banner.early strong{text-decoration:underline;text-underline-offset:3px}

/* live feedback on the 72-hour rule while a booking is being captured */
.rulehint{font-size:13px;margin:-4px 0 10px;min-height:17px;line-height:1.4}
.rulehint.good{color:#5fd39a}
.rulehint.bad{color:#e08a6a;font-weight:600}

/* the outcome being written, acknowledged in the same frame as the click */
.dispo .grid .big.chosen{outline:2px solid var(--accent,#4a8fe7);outline-offset:1px;
  filter:brightness(1.12)}
.dispo.saving .grid .big{opacity:.45;cursor:progress}
.dispo.saving .grid .big.chosen{opacity:1}
.dispo.saving .grid .big.chosen::after{content:"saving…";margin-left:auto;
  font-size:12px;opacity:.8;font-weight:600;letter-spacing:.04em}
.dispo.saving .dispo-warn{visibility:hidden}

/* what Start Session actually does, said before it does it */
.startnote{font-size:13px;opacity:.55;margin:10px auto 0;max-width:380px;line-height:1.5}
.startnote strong{opacity:.9}

/* The day's owed work, on the idle screen. Quiet by default; the two spans
   that can carry bad news are the only coloured things in it. */
.dayline{font-size:13px;color:var(--muted);margin-top:14px;letter-spacing:.01em}
.dayline b{font-weight:600}
.dayline b.cb{color:var(--gold)}
.dayline b.slip{color:#f87171}
.gk-exact{display:flex;align-items:center;gap:8px;margin-top:14px;font-weight:500}
.gk-exact input[type=checkbox]{width:auto;margin:0}

/* Someone we have spoken to before. Green for a seasonal revive (good news,
   a warm re-open); red for a promise we broke, because that one should feel
   like it costs something to read. */
.priorstrip{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  margin:10px 0 4px;padding:8px 12px;border-radius:8px;font-size:12.5px;
  background:#12291d;border:1px solid #245c3a;color:#a9d9bd}
.priorstrip b{font-weight:700;letter-spacing:.04em;font-size:11px}
.priorstrip b.rev{color:#5fd08a}
.priorstrip.miss{background:#2a1417;border-color:#6b2b31;color:#e3b4b8}
.priorstrip b.miss{color:#f87171}
.priorstrip span{opacity:.9}

/* A card whose tone is "revive": same shape as any other, green edge so the
   caller sees at a glance this is not a cold open. */
.mcard.tone-revive{border-color:#245c3a}
.mcard.tone-revive .mcard-trigger{color:#8fd6ab}


/* A refused Save must be louder than the button that was just pressed. */
#mErr.shout{background:#5b1d1d;border:1px solid #a33;color:#ffdede;padding:10px 12px;
  border-radius:9px;font-size:15px;font-weight:600;margin:10px 0;line-height:1.4}
.invalid{outline:2px solid #c9765a !important;outline-offset:1px}
@keyframes shakex{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-6px)}}
.shake{animation:shakex .45s both}
@media (prefers-reduced-motion: reduce){.shake{animation:none}}

/* The Cal form, opened mid-call from the lead card. Deliberately prominent:
   this is the step that actually books the prospect. */
.callink{display:inline-block;margin:10px 0 4px;padding:10px 14px;border-radius:10px;
  background:#1f6fd0;color:#fff;text-decoration:none;font-weight:600;font-size:14px}
.callink:hover{background:#2a7ee4}

/* Click a day, click a time. The band colour carries the 24-72h rule onto the
   button itself, so the caller sees which days qualify before choosing. */
.pickrow{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.pick{padding:7px 10px;border-radius:8px;border:1px solid #2b3550;background:#141b2b;
  color:#e8edf7;font-size:13px;cursor:pointer;font-variant-numeric:tabular-nums;line-height:1.25}
.pick:hover{border-color:#4a8fe7}
.pick small{display:block;font-size:10px;opacity:.6;text-transform:uppercase;letter-spacing:.04em}
.pick.day.good{border-color:#2c5c46}
.pick.day.good small{color:#6fce9f;opacity:.9}
.pick.day.soon{border-color:#6b5a29}
.pick.day.far{opacity:.5}
.pick.picked{background:#1f6fd0;border-color:#1f6fd0;color:#fff;font-weight:600}
.pick.picked small{color:#dbe9ff;opacity:.85}

/* Inbound ring. Deliberately the loudest thing the app can draw: a returning
   prospect is worth more than whatever is on screen. */
#ring{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  background:rgba(6,10,18,.86);backdrop-filter:blur(3px)}
#ring.hidden{display:none}
.ring-card{background:#101827;border:2px solid #2f7de0;border-radius:16px;padding:34px 40px;
  text-align:center;max-width:520px;box-shadow:0 24px 70px rgba(0,0,0,.6);animation:ringpulse 1.1s ease-in-out infinite}
@keyframes ringpulse{0%,100%{border-color:#2f7de0}50%{border-color:#7fb4f5}}
.ring-eyebrow{font-size:12px;letter-spacing:.14em;color:#7fb4f5;font-weight:700}
.ring-who{font-size:30px;font-weight:700;margin:10px 0 4px;color:#fff}
.ring-where{color:#93a4bf;font-size:15px}
.ring-count{color:#6c7c96;font-size:13px;margin-top:12px;font-variant-numeric:tabular-nums}
.ring-actions{display:flex;gap:12px;justify-content:center;margin-top:22px}
@media (prefers-reduced-motion:reduce){.ring-card{animation:none}}

/* Can a prospect calling back actually reach this browser? Registration
   failed silently before, so a returning lead rang into nothing and the only
   evidence was in Twilio's logs an hour later. */
#statRing.ok{background:#173a2a;color:#6fce9f;border-color:#2c5c46}
#statRing.bad{background:#3b1d1d;color:#ff9c9c;border-color:#6b2b2b;font-weight:700}

/* They rang us. Different colour from a due callback so the two are never
   confused at a glance mid-call. */
.banner.inbound{background:#12331f;border-color:#2c6b45;color:#8ce6ad}

/* The line this call is going out on. A prospect asking "what number is this"
   needs an answer the caller can read, mid-sentence, without leaving the call. */
.cb-from{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;color:#cfe0f7;
  background:#1b2740;border:1px solid #2f4468;border-radius:7px;padding:3px 9px;font-size:13px}
#cDialFrom{font-variant-numeric:tabular-nums}

/* One line under every button saying what it means. A week in, the person who
   built this system still was not sure what some of them did; a caller on day
   one has no chance. */
.dispo-grid button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  text-align:left;padding:11px 13px;line-height:1.3}
.dispo-grid button small{font-size:11px;font-weight:400;opacity:.72;white-space:normal;line-height:1.35}
.dispo-grid button.gold small{opacity:.85}
.dispo-grid button.drop{border-color:#6b4a1f}
.dispo-grid button.drop small{color:#e8c07a;opacity:.9}

/* Pending bookings. The caller's own board: every booking that has not
   happened yet, and whether anyone has touched it. */
.pcount{background:#8a3b3b;color:#fff;border-radius:9px;padding:1px 6px;font-size:11px;font-weight:700;margin-left:5px}
.pcount.hidden{display:none}
#pendingList{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.pbook{border:1px solid #253048;border-radius:11px;padding:13px 15px;background:#111826}
.pbook.warn{border-color:#7a4a22;background:#1a1410}
.pbook-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.pbook-biz{font-weight:700;font-size:16px}
.pbook-when{color:#9fb3d1;font-variant-numeric:tabular-nums;font-size:14px}
.pbook-meta{color:#7f90ab;font-size:12.5px;margin-top:4px}
.pbook-flags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.pflag{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid #2b3550;color:#9fb3d1}
.pflag.ok{border-color:#2c5c46;color:#6fce9f}
.pflag.bad{border-color:#7a3030;color:#ff9c9c;font-weight:600}
.pflag.due{border-color:#7a5a22;color:#e8c07a;font-weight:600}
.pbook-actions{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.pbook-actions button{font-size:13px;padding:6px 11px}