:root {
  --ink: #17201d;
  --muted: #68736f;
  --subtle: #8d9693;
  --canvas: #f5f7f6;
  --panel: #ffffff;
  --line: #dfe5e2;
  --line-strong: #cdd6d2;
  --green: #176b50;
  --green-dark: #10523e;
  --green-soft: #e8f4ef;
  --blue: #315d9d;
  --blue-soft: #edf3fb;
  --amber: #a66814;
  --amber-soft: #faf1df;
  --worked-line: rgba(23, 107, 80, .45);
  /* The board's whole palette, and deliberately not five competing hues. Four
     unrelated colours alternating down a block came out a barcode: every band
     shouting at the same volume, none of them readable.
     Time on the clock is ONE hue in three strengths, so the block reads at a
     glance as how much of it was the real work — the deepest green is talking
     to somebody, a step lighter is ready and waiting for the dialler, lighter
     still is wrap-up. Rank is the message; nobody has to learn three colours.
     That leaves the two things that are not time on the clock to carry their own
     hue: blue for a plan the week has not reached, red for a plan it reached and
     nobody worked. They are the exceptions, so they are the only hue changes.
     All opaque: these tile a block completely, and stacked as translucent washes
     they blend into each other until the block answers nothing. */
  --plan-fill: #cfe1fa;
  /* Hours still to come are the same blue, held back. Past-and-unworked is the
     solid plan; ahead-of-now is the plan waiting. Transparent was neither. */
  --plan-ahead: #e9f2fd;
  --plan-edge: #7aa9e4;
  --talk-fill: #7fd4ad;
  --ready-fill: #bfeada;
  --clock-fill: #a5e3c6;
  --wrap-fill: #f7c2c6;
  /* Missed has no colour of its own. The blue plan is drawn underneath every
     block and stays there, so an hour nobody worked is simply an hour nothing
     was painted over — the schedule showing through IS the reading, and it
     costs the board no second alarm colour to fight the first. */
  --missed-fill: transparent;
  /* The bars are 6px tall and sit on a grey track. At that size a wash reads as
     a smudge, so these are the saturated versions of the same three meanings the
     grid draws — full strength, because six pixels is all the room the colour
     gets. Blue is the plan and red is wrap-up in both places, so the bar under a
     day and the block above it can never be read as saying different things. */
  --bar-clock: #00a862;
  --bar-wrap: #e5484d;
  --bar-missed: #8fb8ec;
  /* An appointment is the thing the whole shift was bought to produce, so it
     wears the board's own colour of success rather than an unrelated accent.
     It has to survive being drawn ON a green block, so it is deliberately at
     the far end of the ramp from the fills — near-black green on the light
     board, near-white green on the dark one. */
  --set-mark: #054f34;
  --set-mark-soft: #cbeedd;
  --mark: #ffe6a1;
  --red: #a34040;
  --red-soft: #f9eaea;
  --purple: #675090;
  --purple-soft: #f0ebf7;
  --sidebar: 240px;
  --rail: 72px;
  --phone-width: 250px;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; overflow-x: hidden; overflow-x: clip; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(49, 93, 157, .18); outline-offset: 1px; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}

.v2-signin { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0, #eef6f2 0, var(--canvas) 42%); }
.signin-card { width: min(100%, 420px); display: grid; gap: 28px; padding: 34px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 24px 70px rgba(30, 43, 38, .12); }
.signin-brand { display: flex; align-items: center; gap: 11px; }
.signin-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.1; }
.signin-brand small { margin-top: 4px; color: var(--subtle); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.signin-card h1 { margin-bottom: 8px; font-size: 28px; }
.signin-card > div:nth-child(2) > p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.signin-card form { display: grid; gap: 16px; }
.signin-card form label { display: grid; gap: 7px; color: #48534f; font-size: 12px; font-weight: 700; }
.signin-card input { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; }
.signin-card form button { margin-top: 4px; }
.signin-error { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--red-soft); color: var(--red); font-size: 12px; }
.signin-note { margin: 0; color: var(--subtle); font-size: 11px; line-height: 1.5; }

.preview-data-banner { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 7px 20px; border-bottom: 1px solid #ead6a9; background: #fff8e8; color: #75551e; font-size: 11px; }
.preview-data-banner a { color: inherit; font-weight: 700; }
/* Backend unreachable: shown after several failed status polls in a row, cleared on the first success. */
.backend-banner { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 7px 20px; border-bottom: 1px solid #e6b8b8; background: #fdeeee; color: #8a2e2e; font-size: 11px; }
.backend-banner strong::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: currentColor; animation: backend-banner-pulse 1.2s ease-in-out infinite; vertical-align: 1px; }
@keyframes backend-banner-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.signout-button { padding: 8px; white-space: nowrap; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--rail); display: flex; flex-direction: column; padding: 18px 12px 16px; background: var(--panel); border-right: 1px solid var(--line); z-index: 20; overflow: hidden; transition: width .18s ease, box-shadow .18s ease; }
/* Inner content is laid out at the expanded width and clipped by the rail,
   so icons stay put while the panel slides open. */
.brand, .main-nav { width: calc(var(--sidebar) - 24px); }
.brand { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 6px 16px; border-bottom: 1px solid var(--line); flex: none; }
.brand-mark { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #f9c94c; background: #1c211f; font-size: 20px; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; opacity: 0; transition: opacity .14s ease; }
.brand strong { font-size: 15px; }
.brand small { margin-top: 4px; color: var(--subtle); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.main-nav { display: grid; gap: 3px; padding: 14px 0; align-content: start; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.nav-item { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 6px; border: 0; border-radius: 10px; background: transparent; color: #56615d; cursor: pointer; text-align: left; font-weight: 600; white-space: nowrap; transition: background .14s ease, color .14s ease; }
.nav-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: #8b9591; transition: background .14s ease, color .14s ease; }
.nav-ico svg { width: 17px; height: 17px; display: block; }
.nav-label { font-size: 14px; opacity: 0; transition: opacity .12s ease; }
.nav-item:hover { color: var(--ink); background: #f4f6f5; }
.nav-item:hover .nav-ico { color: var(--ink); }
.nav-item.active { color: var(--green-dark); }
.nav-item.active .nav-ico { color: var(--green); background: var(--green-soft); }
/* The rail pops out over the page on hover or keyboard focus (Claude-app
   style). The page is laid out against --rail, so nothing underneath moves. */
@media (min-width: 521px) {
  .sidebar:hover, .sidebar:has(:focus-visible) { width: var(--sidebar); box-shadow: 0 16px 44px rgba(21, 34, 28, .16); }
  .sidebar:hover .nav-label, .sidebar:has(:focus-visible) .nav-label,
  .sidebar:hover .brand > span:last-child, .sidebar:has(:focus-visible) .brand > span:last-child { opacity: 1; }
  .sidebar:hover .nav-item.active, .sidebar:has(:focus-visible) .nav-item.active { background: var(--green-soft); }
  .sidebar:hover .nav-item.active .nav-ico, .sidebar:has(:focus-visible) .nav-item.active .nav-ico { background: transparent; }
}
.main-area { min-height: 100vh; margin-left: var(--rail); padding-bottom: 28px; }
.topbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 28px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 15; }
.eyebrow { margin: 0 0 4px; color: var(--subtle); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 24px; line-height: 1.1; letter-spacing: -.025em; }
h2 { font-size: 18px; letter-spacing: -.02em; }
h3 { font-size: 15px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.account-button { min-width: 154px; height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; text-align: left; }
.account-summary { cursor: default; }
.account-button > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.account-button strong { font-size: 12px; }
.account-button small { margin-top: 1px; color: var(--subtle); font-size: 10px; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; }

.page { display: none; padding: 20px 28px 0; }
.page.active { display: block; }
button.primary, button.secondary { min-height: 40px; padding: 0 16px; border-radius: 9px; cursor: pointer; font-weight: 700; }
button.primary { border: 1px solid var(--green); background: var(--green); color: #fff; }
button.primary:hover { background: var(--green-dark); }
button.primary:disabled { border-color: #cbd6d2; background: #dbe3e0; color: #88928e; cursor: default; }
button.primary.danger-primary { border-color: var(--red); background: var(--red); }
button.primary.danger-primary:hover { background: #863434; }
button.secondary { border: 1px solid var(--line-strong); background: var(--panel); color: #46514d; }
button.secondary:hover { border-color: #aebbb6; background: #f9faf9; }
button.compact { min-height: 34px; padding-inline: 12px; font-size: 12px; }
button.full { width: 100%; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--blue); cursor: pointer; font-weight: 700; font-size: 12px; }
.call-log-lead-link { max-width: 220px; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.close-button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: #f0f3f1; cursor: pointer; font-size: 20px; }

.call-state-bar { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -20px -28px 18px; padding: 8px 28px; background: var(--panel); border-bottom: 1px solid var(--line); }
.call-state-copy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.call-state-copy strong { font-size: 12px; }
.call-state-copy > span:last-child { overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.state-pulse { width: 8px; height: 8px; flex: none; border-radius: 99px; background: #c98b31; box-shadow: 0 0 0 4px #fbf2e4; }
.call-state-bar.ready .state-pulse, .call-state-bar.dialing .state-pulse { background: #31b87e; box-shadow: 0 0 0 4px #e8f6f0; }
.call-state-bar.ringing .state-pulse { background: #315d9d; box-shadow: 0 0 0 4px #eaf0f9; animation: pulse 1.2s infinite; }
.call-state-bar.connected .state-pulse { background: #31b87e; box-shadow: 0 0 0 4px #e8f6f0; }
.call-state-bar.wrap .state-pulse { background: #a66814; box-shadow: 0 0 0 4px #fbf2e4; }
.call-state-bar.issue { background: #fffaf0; border-bottom-color: #eed7ae; }
.call-state-bar.issue .state-pulse { background: #c7771a; box-shadow: 0 0 0 4px #fbeed9; animation: pulse 1.2s infinite; }
/* Incoming call: a homeowner calling back, offered to this rep. */
.call-state-bar.incoming { background: #eef5ff; border-bottom-color: #c5d8f5; }
.call-state-bar.incoming .state-pulse { background: #315d9d; box-shadow: 0 0 0 4px #d6e4fa; animation: pulse .8s infinite; }
.call-state-bar.incoming .call-state-copy strong { color: #1f4b8c; white-space: nowrap; }
.incoming-call-actions { display: flex; align-items: center; gap: 8px; }
.incoming-countdown { min-width: 38px; padding: 4px 8px; border-radius: 99px; background: #fff; border: 1px solid #c5d8f5; color: #1f4b8c; font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.incoming-countdown.urgent { background: #fdecec; border-color: #f2b8b8; color: #a12626; }
button.accept-call { background: #1f9d5f; border-color: #1f9d5f; animation: accept-glow 1.2s ease-in-out infinite; }
button.accept-call:hover { background: #178a51; }
@keyframes accept-glow { 50% { box-shadow: 0 0 0 6px rgba(31,157,95,.18); } }
.call-state-bar.incoming .dial-action-control { display: none; }
/* Below a wide desktop the three controls no longer fit beside the caller's
   name; let them drop to their own line rather than run off the edge. */
@media (max-width: 1100px) {
  .call-state-bar.incoming { flex-wrap: wrap; }
  .call-state-bar.incoming .call-state-copy { flex: 1 1 100%; }
  .call-state-bar.incoming .dial-toolbar { margin-left: auto; }
}
@keyframes pulse { 50% { transform: scale(1.5); opacity: .65; } }
.dial-toolbar { display: flex; gap: 8px; flex: none; }
.dial-action-control { position: relative; }
#primaryDialAction[data-menu-enabled="true"]::after { content: "⌄"; margin-left: 7px; font-size: 10px; }
.dial-status-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 132px; overflow: hidden; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); box-shadow: 0 10px 28px rgba(30,43,38,.16); z-index: 30; }
.dial-status-menu button { width: 100%; min-height: 34px; display: flex; align-items: center; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; font-size: 11px; font-weight: 700; }
.dial-status-menu button:hover { background: #f5f7f6; }
.dial-status-menu button:disabled { color: var(--subtle); cursor: not-allowed; }
/* The campaign list keeps its own bounded scroll so it never grows over the
   dial workspace; overscroll containment stops wheel events from chaining
   into the outcome rail when the list hits its edge. */
#playlistOptions { max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-gutter: stable; }
.popover-head { display: flex; justify-content: space-between; margin-bottom: 10px; }
.popover-head > div { display: flex; flex-direction: column; }
.popover-head strong { font-size: 14px; }
.popover-head small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.playlist-option { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 9px; padding: 10px 8px; border-radius: 8px; cursor: pointer; }
.playlist-option:hover { background: #f6f8f7; }
.playlist-option > span { display: flex; flex-direction: column; }
.playlist-option strong { font-size: 12px; }
.playlist-option small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.playlist-option b { padding: 3px 6px; border-radius: 99px; color: var(--green); background: var(--green-soft); font-size: 9px; }

.resource-state { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 24px; color: var(--muted); text-align: center; }
.resource-state > span:first-child { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #eef2f0; color: var(--subtle); font-weight: 800; }
.resource-state strong { color: var(--ink); font-size: 13px; }
.resource-state small { max-width: 420px; font-size: 11px; line-height: 1.45; }
.resource-state > div { display: flex; gap: 8px; margin-top: 5px; }
.resource-state.error > span:first-child { background: var(--red-soft); color: var(--red); }
.loading-spinner { border: 3px solid #dfe7e3; border-top-color: var(--green) !important; border-radius: 50% !important; background: transparent !important; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#playlistResourceState .resource-state { min-height: 120px; padding: 12px 8px; }
#playlistResourceState .resource-state > div { flex-wrap: wrap; justify-content: center; }
.campaign-picker { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel); color: var(--muted); font-size: 11px; font-weight: 700; }
.campaign-picker select { max-width: 220px; border: 0; background: transparent; color: var(--ink); font-weight: 700; }
.table-card.resource-loading .table-wrap { opacity: .32; pointer-events: none; }

.dial-workspace { min-height: calc(100vh - 166px); display: grid; grid-template-columns: 188px minmax(360px, 1fr); gap: 10px; padding-right: calc(var(--phone-width) + 14px); }
.outcome-rail { display: block; align-self: start; max-height: calc(100vh - 166px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; scrollbar-gutter: stable; }
.lead-rail { display: none; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.outcome-rail.inactive { background: #fafbfa; }
.outcome-rail.attention { border-color: #d69a3a; box-shadow: 0 0 0 4px rgba(214,154,58,.16); }
.dial-workspace[data-call-state="ringing"] { grid-template-columns: 188px minmax(360px, 1fr); }
.dial-workspace[data-call-state="connected"], .dial-workspace[data-call-state="wrap"], .dial-workspace[data-call-state="incoming"] { grid-template-columns: 188px minmax(360px, 1fr) 248px; padding-right: calc(var(--phone-width) + 14px); }
.dial-workspace[data-call-state="connected"] .outcome-rail, .dial-workspace[data-call-state="connected"] .lead-rail, .dial-workspace[data-call-state="wrap"] .outcome-rail, .dial-workspace[data-call-state="wrap"] .lead-rail, .dial-workspace[data-call-state="incoming"] .outcome-rail, .dial-workspace[data-call-state="incoming"] .lead-rail { display: block; }
.conversation-panel { min-width: 0; min-height: 560px; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.workspace-tabs { min-height: 40px; display: flex; align-items: end; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; white-space: nowrap; }
.workspace-tabs button { min-height: 36px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; }
.workspace-tabs button.active { border-bottom-color: var(--green); color: var(--ink); }
.workspace-tabs button.has-suggestion::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--green); vertical-align: 1px; }
/* Script choice reads as pills, never as a second row of the underline tabs
   sitting directly above it. */
.script-tabs { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid var(--line); background: var(--canvas); }
/* Only the script pills scroll; the tools stay reachable at any width. */
.script-pills { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; white-space: nowrap; }
.script-tabs button[data-script] { min-height: 28px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--panel); color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 700; }
.script-tabs button[data-script]:hover { border-color: var(--muted); color: var(--ink); }
.script-tabs button[data-script].active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.script-tools { flex: none; display: flex; align-items: center; gap: 7px; }
.script-tabs .script-edit { min-height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--blue); cursor: pointer; font-size: 12px; font-weight: 700; }
/* Section rail: shows where the rep is in a long pitch and jumps them there. */
.workspace-content { display: none; }
.workspace-content.active { display: block; }
.dial-sms-workspace.active { height: calc(100% - 40px); min-height: 510px; }
.dial-sms-panel { min-height: 510px; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #f8faf9; }
.dial-sms-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.dial-sms-header > div { min-width: 0; }
.dial-sms-header h2 { margin: 1px 0 2px; font-size: 16px; }
.dial-sms-header span { display: block; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dial-sms-header label { min-width: 180px; display: grid; gap: 4px; color: var(--subtle); font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.dial-sms-header select { width: 100%; min-height: 34px; padding: 6px 28px 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 10px; font-weight: 700; text-transform: none; }
.dial-sms-state { min-height: 360px; }
.dial-sms-state.loading .empty-icon { background: transparent; }
.dial-sms-message-list { min-height: 340px; max-height: calc(100vh - 330px); overflow-y: auto; padding: 18px; }
.dial-sms-message-list article { width: fit-content; max-width: min(78%, 560px); margin: 0 0 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; background: #fff; }
.dial-sms-message-list article.outbound { margin-left: auto; border-color: #bed8cc; border-radius: 12px 12px 3px 12px; background: var(--green-soft); }
.dial-sms-message-list article.failed { border-color: #e5b7b7; background: var(--red-soft); }
.dial-sms-message-list p { margin: 0; font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
.dial-sms-message-list footer { display: flex; justify-content: flex-end; gap: 5px; margin-top: 5px; color: var(--subtle); font-size: 8px; }
.dial-sms-message-list article.inbound footer { justify-content: flex-start; }
.dial-sms-composer { display: grid; gap: 8px; padding: 11px 12px; border-top: 1px solid var(--line); background: var(--panel); }
.dial-sms-composer textarea { width: 100%; min-height: 64px; max-height: 130px; resize: vertical; padding: 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: #fff; font: inherit; font-size: 12px; line-height: 1.4; }
.dial-sms-composer > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dial-sms-composer-copy { min-width: 0; display: grid; gap: 2px; }
.dial-sms-composer-copy small { display: block; }
#dialSmsComposerStatus:empty { display: none; }
.dial-sms-composer small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.dial-sms-composer button { min-width: 78px; }
/* Jarren 2026-08-03: the script shows EXACTLY as uploaded — same font as
   the app, line breaks preserved, zero reformatting. */
.script-document { min-height: 300px; max-height: min(58vh, 620px); padding: 20px 28px 48px; overflow-y: auto; overscroll-behavior: contain; color: var(--ink); font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.script-document.script-empty { color: var(--muted); font-size: 13px; }
.script-tabs .script-delete { color: var(--red, #c0392b); }
.script-name-input { display: block; width: 100%; padding: 12px 24px 10px; border: 0; border-bottom: 1px solid #e5c16c; background: #fffdf6; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; }
.script-name-input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--amber); }
.script-editor { display: block; width: 100%; min-height: 420px; max-height: min(58vh, 620px); padding: 18px 24px; border: 0; background: #fffdf6; box-shadow: inset 0 0 0 2px #e5c16c; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; resize: vertical; }
.idle-message { display: none; }
.dial-workspace:not([data-call-state="idle"]):not([data-call-state="ready"]):not([data-call-state="dialing"]):not([data-call-state="ringing"]) .idle-message { display: none; }
.idle-mark { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 16px; background: var(--green-soft); color: var(--green); font-size: 26px; }
.idle-message h2 { margin-bottom: 7px; font-size: 21px; }
.idle-message > p { max-width: 530px; margin-bottom: 22px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.idle-selection { min-width: min(430px, 100%); max-width: 100%; display: flex; align-items: center; gap: 11px; margin-bottom: 18px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfa; text-align: left; }
.idle-selection > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); font-weight: 700; }
.idle-selection > div { display: flex; flex-direction: column; }
.idle-selection strong { font-size: 12px; }
.idle-selection small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.empty-state { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.empty-state h2 { margin: 12px 0 6px; }
.empty-state p { max-width: 470px; color: var(--muted); font-size: 12px; }
.empty-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-size: 24px; }
.coach-workspace { min-height: 510px; padding: 18px; background: #f8faf9; }
.coach-workspace.active { display: block; }
.live-coach-state { min-height: 430px; }
.live-coach-panel { margin: 0; padding: 18px; border: 1px solid #b8d7c0; border-radius: 12px; background: linear-gradient(135deg, #f1faf3, #fbfdfb); box-shadow: 0 8px 22px rgba(30, 92, 48, .08); }
.live-coach-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.live-coach-heading > span:first-child { display: grid; gap: 2px; }
.live-coach-heading small { color: var(--green-dark); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.live-coach-heading strong { font-size: 15px; }
.live-coach-intent { padding: 4px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 10px; font-weight: 700; }
.live-coach-frame { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; margin-top: 11px; padding: 9px 10px; border-radius: 9px; background: rgba(255, 255, 255, .72); }
.live-coach-frame[hidden] { display: none; }
.live-coach-frame > span { color: var(--green-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.live-coach-frame > strong { font-size: 12px; }
.live-coach-frame > small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; line-height: 1.35; }
.live-coach-panel blockquote { margin: 11px 0 7px; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.4; }
.live-coach-panel > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.live-coach-feedback { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.live-coach-feedback button { padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 10px; font-weight: 700; }
.live-coach-feedback button:hover { border-color: var(--green); color: var(--green-dark); }
.live-coach-feedback button.selected { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.live-coach-feedback button:disabled { cursor: default; opacity: .6; }
/* Jarren 2026-08-04: long transcripts were sprawling past the panel — the
   feed scrolls inside its own bounded box so far more fits on one screen. */
.transcript-feed { padding: 12px 16px; overflow-y: auto; max-height: calc(100vh - 300px); scrollbar-width: thin; }
.transcript-feed > div { position: relative; padding: 0 12px 10px 82px; }
.transcript-feed b { position: absolute; left: 0; color: var(--muted); font-size: 11px; }
.transcript-feed p { margin: 0; font-size: 13px; line-height: 1.45; }
/* Live transcript turns: speaker name runs inline, one paragraph per turn. */
.transcript-feed p.transcript-turn { margin: 0 0 6px; }
.transcript-feed .transcript-turn b { position: static; margin-right: 6px; color: var(--green-dark); font-size: 12px; }
.live-transcript-badge { display: inline-block; margin-left: 8px; color: var(--green); font-size: 11px; font-weight: 700; animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.transcript-feed time { position: absolute; right: 0; top: 0; color: var(--subtle); font-size: 10px; }
.history-list { padding: 22px 26px 8px; }
.history-list article { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding-bottom: 22px; }
.history-list article:not(:last-child)::after { content: ""; position: absolute; top: 11px; left: 4px; bottom: 0; width: 1px; background: var(--line); }
.timeline-dot { width: 9px; height: 9px; margin-top: 3px; border-radius: 50%; background: var(--green); }
.history-list strong { font-size: 12px; }
.history-list p { margin: 3px 0; color: var(--muted); font-size: 12px; }
.history-list small { color: var(--subtle); font-size: 10px; }
.timeline-dot.inbound { background: #315d9d; }
.timeline-dot.text { background: #a66814; }
.history-list .history-summary { color: var(--text); }
.history-list .history-note { font-style: italic; }
.history-list .history-body { color: var(--text); white-space: pre-wrap; }
.history-actions { display: flex; gap: 6px; margin-top: 6px; }
.history-actions button.compact { min-height: 28px; padding-inline: 10px; font-size: 11px; }
.history-extra { margin-top: 8px; display: grid; gap: 8px; }
.history-extra audio { width: 100%; max-width: 420px; }
.history-transcript { max-height: 240px; overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--text); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.history-error { color: #a12626; font-size: 12px; }
.user-inbound-settings { grid-column: 1 / -1; display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.user-inbound-settings input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--green); }
.user-inbound-settings .check-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.user-inbound-settings .greeting-row { display: grid; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.user-inbound-settings .greeting-row small { color: var(--muted); font-weight: 400; }
.user-inbound-settings .greeting-actions { display: flex; gap: 6px; }
.history-summary-card { margin: 18px 26px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.history-summary-card strong { font-size: 12px; }
.history-summary-card p { margin: 6px 0 4px; color: var(--text); font-size: 12px; line-height: 1.5; }
.history-summary-card small { color: var(--subtle); font-size: 10px; }
.notes-field { display: grid; gap: 7px; padding: 0 26px 24px; font-size: 11px; font-weight: 700; }
.notes-field textarea { min-height: 110px; resize: vertical; padding: 12px; border: 1px solid var(--line); border-radius: 9px; }
.map-placeholder { height: 390px; position: relative; overflow: hidden; background: #eef1ed; }
.map-grid { position: absolute; inset: -20px; background-image: linear-gradient(#d7ded8 1px, transparent 1px), linear-gradient(90deg, #d7ded8 1px, transparent 1px); background-size: 42px 42px; transform: rotate(4deg); }
.map-grid::before, .map-grid::after { content: ""; position: absolute; background: #fff; border: 1px solid #cfd8d1; }
.map-grid::before { width: 120%; height: 34px; top: 130px; left: -20px; transform: rotate(-18deg); }
.map-grid::after { width: 38px; height: 120%; top: -20px; left: 54%; transform: rotate(8deg); }
.map-pin { position: absolute; top: 44%; left: 50%; color: var(--red); font-size: 32px; text-shadow: 0 4px 8px rgba(0,0,0,.2); }
.map-search { display: flex; gap: 8px; padding: 12px 14px 0; }
.map-search input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.map-address { padding: 12px 14px 0; font-size: 11px; font-weight: 600; color: var(--ink); }
.map-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px; }
.map-actions button:disabled { color: var(--subtle); cursor: not-allowed; }
/* Campaign type picker + anchor section (slice 3). */
.ct-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 10px 0 4px; }
.ct-type { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; cursor: pointer; background: var(--panel); font: inherit; text-align: left; }
.ct-type:hover { border-color: var(--line-strong); }
.ct-type strong { font-size: 13.5px; }
.ct-type small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.ct-type[aria-checked="true"] { border-color: var(--green); background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green); }
.ct-type:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.ct-anchor-tag { margin-left: 6px; }
/* Dial-screen anchor map (slice 3): a static schematic, not a real map —
   the pins are proportioned by distance, not a real projection, so this is
   deliberately not pixel-accurate. */
.am-panel { border-bottom: 1px solid var(--line); padding: 14px 14px 16px; }
.am-map { position: relative; width: 100%; height: 260px; border-radius: 10px; overflow: hidden; background: #eef1ed; }
.am-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.am-pin small { font-size: 9px; font-weight: 700; color: var(--ink); background: rgba(255,255,255,.88); padding: 1px 4px; border-radius: 5px; white-space: nowrap; }
.am-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.am-pin-lead .am-dot-ring { width: 16px; height: 16px; background: var(--red); box-shadow: 0 0 0 4px rgba(163,64,64,.18), 0 1px 3px rgba(0,0,0,.25); }
.am-pin-presence .am-dot-pulse { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); animation: am-pulse 1.8s ease-in-out infinite; }
.am-pin-stale .am-dot-pulse { background: var(--subtle); box-shadow: none; animation: none; opacity: .7; }
.am-pin-green .am-dot { background: var(--green); }
.am-pin-blue .am-dot { background: var(--blue); }
.am-pin-close { transform: translate(-50%, -50%); }
.am-pin-close::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.am-pin-opening .am-dot-dashed { width: 18px; height: 18px; background: transparent; border: 2px dashed var(--green); box-shadow: none; }
@keyframes am-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--green-soft); } 50% { box-shadow: 0 0 0 7px var(--green-soft); } }
.am-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 9px; color: var(--muted); }
.am-legend span { display: inline-flex; align-items: center; gap: 4px; }
.am-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.am-swatch-ring { background: var(--red); }
.am-swatch-pulse { background: var(--green); }
.am-swatch-blue { background: var(--blue); }
.am-swatch-green { background: var(--green); }
.am-swatch-dashed { background: transparent; border: 1.5px dashed var(--green); }
.am-swatch-close { width: 6px; height: 6px; background: var(--green); }
.am-list { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.am-list-row { min-height: 0; padding: 10px 14px; }

.rail-heading { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.rail-heading p { margin: 0; }
.required-pill, .live-pill, .verified, .spots-pill { padding: 3px 7px; border-radius: 99px; background: var(--green-soft); color: var(--green); font-size: 9px; font-weight: 700; }
.result-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 10px; }
.result-buttons button { min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; text-align: left; font-size: 9px; font-weight: 700; }
.result-buttons button:hover, .result-buttons button.active { border-color: var(--green); background: var(--green-soft); }
.result-buttons button:disabled { opacity: .5; cursor: default; border-color: var(--line); background: var(--panel); }
.result-icon { font-size: 13px; }
.result-icon.gray { color: #7e8985; } .result-icon.blue { color: var(--blue); } .result-icon.green { color: var(--green); } .result-icon.amber { color: var(--amber); } .result-icon.purple { color: var(--purple); } .result-icon.red { color: var(--red); }
.followup-form { min-height: 80px; padding: 10px; border-top: 1px solid var(--line); }
.followup-form p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.followup-form label { display: grid; gap: 5px; margin-bottom: 9px; font-size: 9px; font-weight: 700; }
.followup-form input, .followup-form select, .followup-form textarea { width: 100%; min-height: 34px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 10px; }
/* Lead heat: rep's 1-10 read on the lead, saved with the result. Optional. */
.lead-heat { padding: 0 10px 10px; }
.lead-heat-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; color: var(--ink); font-size: 9px; font-weight: 700; }
.lead-heat-label small { color: var(--muted); font-weight: 600; }
.lead-heat-value-wrap { display: inline-flex; align-items: center; gap: 4px; }
.lead-heat-value { color: var(--muted); }
.lead-heat-value[data-heat-level="hot"] { color: #8f1d1d; }
.lead-heat-value[data-heat-level="warm"] { color: var(--amber); }
.lead-heat-value[data-heat-level="cold"] { color: var(--blue); }
#leadHeatClear { border: 0; padding: 0 2px; background: none; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; }
#leadHeatClear:hover { color: var(--ink); }
.lead-heat-slider { display: flex; align-items: center; gap: 8px; }
.lead-heat-slider small { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
/* Cold-to-hot gradient (light blue at 1, dark red at 10) revealed up to the
   thumb as it drags; the rest of the track stays gray. --heat-pct is set by
   renderLeadHeat, 0% when unrated. */
.lead-heat-slider input[type="range"] { flex: 1; min-width: 0; width: 100%; appearance: none; -webkit-appearance: none; height: 8px; margin: 9px 0; border-radius: 99px; background: linear-gradient(90deg, transparent 0 var(--heat-pct, 0%), var(--line-strong) var(--heat-pct, 0%) 100%), linear-gradient(90deg, #a9cdf0 0%, #e8b04e 45%, #d64545 75%, #8f1d1d 100%); cursor: pointer; }
.lead-heat-slider input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); border: 2px solid var(--ink); box-shadow: 0 1px 3px rgba(15, 30, 20, 0.3); }
.lead-heat-slider input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2px solid var(--ink); box-shadow: 0 1px 3px rgba(15, 30, 20, 0.3); }
.lead-heat-slider input[type="range"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.lead-heat[data-heat-level="cold"] input[type="range"]::-webkit-slider-thumb { border-color: var(--blue); }
.lead-heat[data-heat-level="warm"] input[type="range"]::-webkit-slider-thumb { border-color: var(--amber); }
.lead-heat[data-heat-level="hot"] input[type="range"]::-webkit-slider-thumb { border-color: #8f1d1d; }
.lead-heat[data-heat-level="cold"] input[type="range"]::-moz-range-thumb { border-color: var(--blue); }
.lead-heat[data-heat-level="warm"] input[type="range"]::-moz-range-thumb { border-color: var(--amber); }
.lead-heat[data-heat-level="hot"] input[type="range"]::-moz-range-thumb { border-color: #8f1d1d; }
.lead-heat-tag { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 5px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.lead-heat-tag[data-heat-level="hot"] { background: var(--green-soft); color: var(--green-dark); }
.lead-heat-tag[data-heat-level="warm"] { background: var(--amber-soft); color: var(--amber); }
.lead-heat-tag[data-heat-level="cold"] { background: var(--blue-soft); color: var(--blue); }
.result-notes { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 0 10px 10px; color: var(--ink); font-size: 9px; font-weight: 700; }
.result-notes span { color: var(--subtle); font-weight: 500; }
.result-notes textarea { grid-column: 1 / -1; width: 100%; min-height: 54px; resize: vertical; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font: inherit; font-weight: 500; line-height: 1.4; }
.outcome-rail > .primary { width: calc(100% - 20px); margin: 0 10px 12px; min-height: 38px; padding: 0 7px; font-size: 10px; }
.dial-campaigns { padding: 12px 10px 14px; border-top: 1px solid var(--line); background: #fbfcfb; }
/* My day: paid time leads, because that is the number that becomes a
   paycheck. Everything under it is supporting detail in plain rows. */
.dial-day { padding: 12px 10px 14px; border-top: 1px solid var(--line); background: #fbfcfb; }
.day-stats { display: grid; gap: 2px; }
/* The schedule line gets the full rail width; sharing a row with the D/W/M/Y
   toggle squeezed it into three lines. Scoped to .dial-day so it outranks the
   flex .dial-campaigns-heading rule further down this file. */
.dial-day .dial-day-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-content: normal; column-gap: 8px; }
.dial-day .dial-day-heading > small { grid-column: 1 / -1; margin-top: 2px; }
.day-clock { display: grid; gap: 1px; margin-bottom: 6px; padding: 8px 9px 9px; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 8px; background: var(--green-soft); }
.day-clock small { color: var(--green-dark); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.day-clock strong { font-size: 21px; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); }
.day-clock span { color: var(--muted); font-size: 9px; line-height: 1.35; }
/* Earnings, only ever rendered for a rep on an hourly plan. Quieter than the
   hours above it: the headline is still the time they worked. */
.day-earned { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px; margin-bottom: 6px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.day-earned span { color: var(--muted); font-size: 10px; font-weight: 700; }
.day-earned b { font-size: 14px; font-variant-numeric: tabular-nums; }
.day-earned small { grid-column: 1 / -1; color: var(--green-dark); font-size: 9px; font-weight: 600; line-height: 1.35; }
.day-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 2px; font-size: 11px; }
.day-stat span { color: var(--muted); font-weight: 600; }
.day-stat b { font-size: 12px; font-variant-numeric: tabular-nums; }
.day-stat[title] span { cursor: help; border-bottom: 1px dotted var(--line-strong); }
.day-note { margin: 6px 2px 0; color: var(--subtle); font-size: 9px; line-height: 1.4; }
.day-stats-empty { margin: 2px; color: var(--muted); font-size: 10px; line-height: 1.4; }
/* Closer-anchored campaign: "Spots to fill" card. Sits above My day in the
   outcome rail, same panel language as .dial-day right below it. */
.spots-card { border-top: 1px solid var(--line); background: #fbfcfb; }
.spots-card .rail-heading { border-bottom: 0; padding-bottom: 4px; }
.spots-recommendation { margin: 0 12px 8px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.spots-list { display: grid; gap: 6px; margin: 0; padding: 0 10px 10px; list-style: none; }
.spots-opening { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.spots-opening-time { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; }
.spots-opening small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.spots-empty { padding: 7px 9px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 10px; }
.spots-empty strong { display: block; font-size: 11px; }
.spots-empty small { color: var(--muted); font-size: 9px; }
/* Quiet, not alarming: an area running dry is information, never a block on
   booking any of the spots still listed above it. */
.spots-dry-note { margin: 0 10px 8px; padding: 7px 9px; border: 1px dashed var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); font-size: 10px; line-height: 1.4; }
.spots-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 12px; color: var(--muted); font-size: 10px; font-weight: 600; }
.spots-footer .link-button + .link-button { margin-left: auto; }
/* Pay plans. Every field is on screen at once — an admin setting someone's
   wages should see the whole structure, not discover it a step at a time. */
.pay-plan-editor { display: grid; gap: 12px; }
.pay-plan-editor label { display: grid; gap: 4px; font-size: 11px; font-weight: 700; }
.pay-plan-editor label small { color: var(--subtle); font-size: 9px; font-weight: 500; line-height: 1.4; }
.pay-plan-editor input, .pay-plan-editor select, .pay-plan-editor textarea { min-height: 34px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; font: inherit; font-size: 12px; font-weight: 500; }
.pay-plan-editor textarea { min-height: 48px; resize: vertical; }
.pay-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.pay-tier-editor { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.pay-tier-editor .card-heading { margin: 0; }
.pay-tier-rows { display: grid; gap: 6px; }
.pay-tier-row { display: grid; grid-template-columns: minmax(70px, 0.8fr) minmax(90px, 1fr) minmax(90px, 1fr) auto; align-items: center; gap: 8px; }
.pay-tier-head { color: var(--subtle); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.pay-tier-list { margin: 6px 0 0; padding-left: 16px; color: var(--ink); font-size: 11px; line-height: 1.6; }
.pay-tier-list b { font-variant-numeric: tabular-nums; }
.pay-tier-caption, .pay-flat-note { margin: 4px 0 0; color: var(--subtle); font-size: 10px; line-height: 1.45; }
.pay-assign-heading { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pay-history { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.pay-history h3 { margin: 0 0 6px; font-size: 11px; }
.pay-history ul { margin: 0; padding-left: 16px; color: var(--muted); font-size: 10px; line-height: 1.6; }
@media (max-width: 620px) {
  /* Stacked tier rows keep the money fields tappable on a phone. */
  .pay-tier-row { grid-template-columns: 1fr 1fr; }
  .pay-tier-head { display: none; }
  .pay-tier-row button { grid-column: 1 / -1; justify-self: start; }
}
.map-embed { display: block; width: 100%; height: min(52vh, 480px); border: 0; border-radius: 10px; }
/* Account menu: the rep's name opens Sign out (+ Sign in as for managers). */
.account-menu-wrap { position: relative; }
.account-menu-wrap .account-button { cursor: pointer; border: 0; font: inherit; }
.account-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 10px 28px rgba(30,43,38,.16); z-index: 45; }
/* Rows in the name dropdown: Settings, Dark mode, Log out. */
.account-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: 0; border-radius: 7px; background: none; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; }
.account-menu-item:hover { background: var(--canvas); }
.account-menu-item:focus-visible { outline: 2px solid var(--line-strong); outline-offset: -2px; }
.account-menu-ico { display: inline-flex; color: var(--muted); }
.account-menu-ico svg { width: 16px; height: 16px; }
.account-menu-item:hover .account-menu-ico { color: var(--ink); }
.account-menu-item.signout-button { color: var(--red); }
.account-menu-item.signout-button .account-menu-ico { color: var(--red); }
.account-caret { width: 14px; height: 14px; margin-left: 4px; color: var(--muted); transition: transform .15s ease; }
.account-button[aria-expanded="true"] .account-caret { transform: rotate(180deg); }
.account-impersonate { display: grid; gap: 5px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.account-impersonate small { color: var(--subtle); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.account-impersonate select { min-height: 32px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; font: inherit; font-size: 12px; }
.account-menu .signout-button { justify-self: stretch; }
/* Bill & files drop zone on the current lead. */
.lead-drop-zone { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1.5px dashed var(--line-strong); border-radius: 10px; background: #fbfcfb; cursor: pointer; }
.lead-drop-zone.is-dragging { border-color: var(--green); background: var(--green-soft); }
.lead-drop-zone > span:first-child { font-size: 15px; color: var(--green); }
.lead-drop-zone strong { display: block; font-size: 11px; }
.lead-drop-zone small { color: var(--muted); font-size: 9px; }
.lead-doc-list { display: grid; gap: 4px; margin-top: 7px; }
.lead-doc { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; text-align: left; font: inherit; }
.lead-doc:hover { border-color: var(--muted); }
.lead-doc > span:first-child { color: var(--blue); }
.lead-doc strong { display: block; overflow: hidden; max-width: 150px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lead-doc small { color: var(--muted); font-size: 9px; }
.lead-doc-empty { margin: 2px; color: var(--muted); font-size: 10px; }
.day-range { display: flex; gap: 2px; }
.day-range button { min-width: 22px; min-height: 20px; padding: 0 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); cursor: pointer; font-size: 9px; font-weight: 800; }
.day-range button.active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
/* Goals page: four plain inputs and a short progress list. */
/* Center popup for picking what to dial when the rep goes Ready. */
.campaign-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 40px)); max-height: min(78vh, 640px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 24px 60px rgba(18,27,24,.28); z-index: 40; }
.campaign-modal header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; }
.campaign-modal h2 { margin: 0 0 2px; font-size: 15px; }
.campaign-modal header small { color: var(--muted); font-size: 11px; }
.campaign-modal #playlistOptions { flex: 1; min-height: 0; max-height: none; overflow-y: auto; margin: 0 10px; padding: 2px 6px 8px; }
.campaign-modal #playlistResourceState { padding: 0 16px; }
.campaign-modal footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.campaign-modal footer > div { display: flex; gap: 8px; }
.dial-campaigns-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dial-campaigns-heading > span { min-width: 0; display: grid; gap: 2px; }
.dial-campaigns-heading strong { font-size: 11px; }
.dial-campaigns-heading small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.dial-campaigns #playlistOptions { max-height: min(40vh, 320px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 0; scrollbar-gutter: stable; }
.dial-campaigns .playlist-option { min-height: 44px; grid-template-columns: 17px minmax(0, 1fr); gap: 7px; padding: 7px 5px; border-bottom: 1px solid #edf1ef; }
.dial-campaigns .playlist-option:last-child { border-bottom: 0; }
.dial-campaigns .playlist-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }
.dial-campaigns .playlist-option strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dial-campaigns .playlist-option small { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.dial-campaigns .playlist-option b { display: none; }
.dial-campaigns #playlistResourceState .resource-state { min-height: 100px; padding: 12px 6px; }
.dial-campaigns #managePlaylists { margin: 9px 3px 0; font-size: 10px; }
.lead-head { min-height: 70px; display: flex; align-items: flex-start; justify-content: space-between; padding: 14px; border-bottom: 1px solid var(--line); }
.lead-head h2 { margin: 0; font-size: 16px; }
.lead-section { padding: 13px 14px; border-bottom: 1px solid var(--line); }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 11px; }
.lead-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.lead-fields label { min-width: 0; display: grid; gap: 3px; color: var(--subtle); font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.lead-fields label.wide { grid-column: 1 / -1; }
.lead-fields input { min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 10px; font-weight: 600; text-transform: none; }
.lead-fields input:not([readonly]) { padding: 6px 7px; border: 1px solid var(--line); border-radius: 6px; background: #fffdf6; }
.lead-anchor-line { grid-column: 1 / -1; margin-top: -2px; color: var(--green-dark); font-size: 11px; font-weight: 600; line-height: 1.3; }
.lead-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 12px 14px; }
.lead-actions button { min-height: 36px; font-size: 10px; }
.lead-actions #bookAppointment { grid-column: 1 / -1; }

.phone-dock { position: fixed; right: 18px; bottom: 18px; width: var(--phone-width); max-height: calc(100vh - 110px); border: 1px solid var(--line-strong); border-radius: 13px; background: var(--panel); box-shadow: 0 12px 34px rgba(27,41,35,.16); overflow: hidden; z-index: 18; }
.phone-header-row { display: block; }
.phone-header { min-width: 0; width: 100%; min-height: 48px; display: grid; grid-template-columns: 16px 1fr auto auto; align-items: center; gap: 9px; padding: 8px 10px 8px 12px; border: 0; background: var(--panel); cursor: pointer; text-align: left; }
.phone-timer { color: var(--green-dark); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.phone-state-icon { color: #32b77e; font-size: 11px; }
.phone-header > span:nth-child(2) { display: flex; flex-direction: column; }
.phone-header strong { font-size: 11px; }
.phone-header small { margin-top: 1px; color: var(--muted); font-size: 9px; }
.phone-chevron { color: var(--subtle); }
.phone-body { display: grid; gap: 8px; max-height: 0; padding: 0 10px; overflow: hidden; border-top: 0 solid var(--line); transition: max-height .2s ease, padding .2s ease, border-width .2s ease; }
.phone-dock.open .phone-body { max-height: 510px; padding: 10px; border-top-width: 1px; }
.phone-dock.open .phone-chevron { transform: rotate(180deg); }
.phone-runtime-status { min-height: 16px; margin: 0 2px 8px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.phone-dock:not(.keypad-open) .phone-keypad { display: none; }
.phone-number-row { display: grid; grid-template-columns: 1fr 34px; gap: 5px; }
.phone-number-row input, .phone-number-row button { min-width: 0; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.phone-number-row input { padding: 0 10px; font-size: 11px; }
.phone-number-row button { cursor: pointer; }
.phone-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.phone-keypad button { height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }
.phone-keypad button small { display: block; color: var(--subtle); font-size: 6px; letter-spacing: .12em; }
.phone-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.phone-tools button { min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; cursor: pointer; color: var(--muted); font-size: 7px; font-weight: 700; }
.phone-tools button span { color: var(--ink); font-size: 12px; }
.phone-tools button.active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.phone-tools .audio-settings-tool { border-color: #86c9ab; background: var(--green-soft); color: #146b4b; box-shadow: inset 0 0 0 1px rgba(20,107,75,.08); }
.phone-tools .audio-settings-tool span { color: #146b4b; font-size: 14px; }
.phone-tools .audio-settings-tool b { font-size: 7px; line-height: 1.05; }
.phone-tools .audio-settings-tool:hover, .phone-tools .audio-settings-tool:focus-visible { border-color: var(--green); background: #ddf6ea; outline: 2px solid rgba(28,147,97,.2); outline-offset: 1px; }
.audio-meter { height: 10px; margin-top: 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--soft); }
.audio-meter > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #dfb53e, var(--red)); transition: width .08s linear; }
.audio-test-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.audio-device-note { margin-top: 8px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.audio-level-grid { display: grid; gap: 14px; margin-top: 10px; }
.audio-level-control { display: grid; gap: 7px; }
.audio-level-control > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); font-size: 10px; font-weight: 700; }
.audio-level-control output { min-width: 42px; color: var(--green); text-align: right; }
.audio-level-control input[type="range"] { width: 100%; accent-color: var(--green); cursor: pointer; }
.audio-level-control small { color: var(--muted); font-size: 8px; font-weight: 500; line-height: 1.4; }
.call-button, .end-call-button { min-height: 38px; border: 0; border-radius: 9px; color: #fff; cursor: pointer; font-weight: 700; }
.call-button { background: var(--green); }
.end-call-button { background: var(--red); }
.phone-dock[data-phone-state="ringing"] .phone-state-icon { color: var(--blue); animation: pulse 1.1s infinite; }
.phone-dock[data-phone-state="connected"] .phone-state-icon { color: var(--green); }
.phone-dock[data-phone-state="wrap"] .phone-state-icon { color: var(--amber); }

.page-actions { min-height: 44px; display: flex; justify-content: flex-end; gap: 9px; margin-bottom: 14px; }
.search-field { min-width: 320px; height: 40px; display: flex; align-items: center; gap: 8px; margin-right: auto; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.search-field span { color: var(--subtle); }
.search-field input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 12px; }
.filter-chips { display: flex; gap: 7px; margin-bottom: 14px; }
.filter-chips button { min-height: 28px; padding: 0 9px; border: 1px solid #cbd9d3; border-radius: 99px; background: var(--green-soft); color: var(--green-dark); cursor: pointer; font-size: 10px; font-weight: 700; }
.filter-chips .clear-chip { border-color: transparent; background: transparent; color: var(--muted); }
.table-card, .settings-card, .schedule-list, .day-summary, .import-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.card-heading { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card-heading h2 { margin: 0 0 3px; }
.card-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.card-heading.provider-heading { min-height: 0; padding: 12px 18px 10px; border-bottom: 0; }
.card-heading.provider-heading h3 { margin: 0 0 2px; font-size: 12px; }
.view-actions { display: flex; gap: 8px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--subtle); background: #fafbfa; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
td { color: #414b47; font-size: 11px; }
td strong { color: var(--ink); }
td small { display: block; margin-top: 2px; color: var(--subtle); }
.status-tag { display: inline-flex; min-height: 23px; align-items: center; padding: 0 7px; border-radius: 99px; background: #eef2f0; color: #596560; font-size: 9px; font-weight: 700; }
.status-tag.green { background: var(--green-soft); color: var(--green); }
.status-tag.blue { background: var(--blue-soft); color: var(--blue); }
.status-tag.amber { background: var(--amber-soft); color: var(--amber); }
.row-action { width: 30px; height: 30px; border: 0; border-radius: 7px; background: #f2f4f3; cursor: pointer; }
.call-log-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.call-log-callback-action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.call-log-callback-action p { flex: 1 1 220px; margin: 0; color: var(--muted); font-size: 12px; }
.pagination { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 15px; color: var(--muted); font-size: 10px; }
.pagination label { display: flex; align-items: center; gap: 7px; }
.pagination select { height: 30px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.pagination > div { display: flex; gap: 4px; }
.pagination button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; }
.pagination button.active { border-color: var(--green); background: var(--green); color: #fff; }

.metric-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.overview-perf { margin-bottom: 14px; padding: 14px; }
.overview-perf .metric-strip { grid-template-columns: repeat(5, 1fr); margin-bottom: 0; }
.overview-perf .metric-strip article { min-height: 84px; }
#overviewAppointmentsCard, #overviewTeamCard { margin-bottom: 14px; padding: 14px; }
.appointment-row { display: grid; grid-template-columns: 74px 1fr auto auto; gap: 10px; align-items: center; }
.team-rows { display: grid; }
.team-row { display: grid; grid-template-columns: 1fr 76px 62px 62px 62px 76px; gap: 8px; align-items: center; padding: 9px 6px; border-bottom: 1px solid var(--line); }
.team-row:last-child { border-bottom: 0; }
.team-row b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.team-row span small { display: block; color: var(--muted); font-size: 9px; }
.team-row-head { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.team-row-head b, .team-row-head span { font-weight: 700; }
.team-row-total { background: var(--panel-strong, rgba(15, 30, 20, 0.04)); border-radius: 8px; }
@media (max-width: 980px) { .overview-perf .metric-strip { grid-template-columns: repeat(2, 1fr); } .team-row { grid-template-columns: 1fr 60px 50px 50px; } .team-row b:nth-child(5), .team-row b:nth-child(6) { display: none; } }
.metric-strip article { min-height: 104px; display: flex; flex-direction: column; justify-content: center; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.metric-strip small { color: var(--muted); font-size: 10px; }
.metric-strip strong { margin: 6px 0 2px; font-size: 24px; letter-spacing: -.04em; }
.metric-strip span { color: var(--subtle); font-size: 9px; }
.campaign-list { display: grid; }
.campaign-row { min-height: 76px; display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(4, minmax(72px, .7fr)) auto; align-items: center; gap: 18px; padding: 12px 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
.campaign-row:last-child { border-bottom: 0; }
.campaign-row:hover { background: #fafbfa; }
.campaign-row > div { display: flex; flex-direction: column; }
.campaign-row strong { font-size: 12px; }
.campaign-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.campaign-row .metric { color: var(--subtle); font-size: 9px; }
.campaign-row .metric b { margin-bottom: 3px; color: var(--ink); font-size: 13px; }

.import-layout { display: grid; grid-template-columns: 230px minmax(0, 720px); gap: 14px; justify-content: center; }
.step-list { align-self: start; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.step-list button { width: 100%; min-height: 60px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 9px; padding: 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; }
.step-list button:disabled { color: inherit; cursor: default; opacity: 1; }
.step-list button.active { background: var(--green-soft); }
.step-list b { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 10px; }
.step-list button.active b { border-color: var(--green); background: var(--green); color: #fff; }
.step-list span { display: flex; flex-direction: column; }
.step-list strong { font-size: 11px; }
.step-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.import-card { min-height: 520px; }
.import-step { display: none; padding: 30px; }
.import-step.active { display: block; }
.import-step h2 { margin-bottom: 7px; font-size: 22px; }
.import-step > p:not(.eyebrow) { color: var(--muted); font-size: 12px; }
.drop-zone { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 24px; border: 1px dashed #aebbb6; border-radius: 12px; background: #fafcfb; cursor: pointer; }
.drop-zone span { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 14px; background: var(--green-soft); color: var(--green); font-size: 24px; }
.drop-zone strong { font-size: 13px; }
.drop-zone small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.drop-zone input { display: none; }
.import-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 24px; }
.mapping-list { display: grid; margin-top: 22px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mapping-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 15px 15px 0; }
.mapping-heading strong { font-size: 11px; }
.mapping-heading + .mapping-list { margin-top: 10px; }
.mapping-list > div { min-height: 55px; display: grid; grid-template-columns: 1fr 30px 1fr; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.mapping-list > div:last-child { border-bottom: 0; }
.mapping-list span { font-size: 11px; font-weight: 700; }
.mapping-list .mapping-source { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.mapping-list .mapping-source small { color: var(--muted); font-size: 9px; font-weight: 500; }
.mapping-list b { color: var(--subtle); text-align: center; }
.mapping-list select, .form-grid input, .form-grid select { width: 100%; height: 36px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 11px; }
.mapping-status { margin-top: 10px; color: var(--green); font-size: 11px; font-weight: 700; }
.mapping-status.mapping-needed { color: var(--red); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 24px; }
.form-grid label { display: grid; gap: 6px; font-size: 10px; font-weight: 700; }
.form-grid label.wide { grid-column: 1 / -1; }
.form-grid label small { color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.4; }
.import-advanced, .drawer-advanced { margin-top: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfb; }
/* These were collapsed disclosures; the fields now show with a plain heading. */
.import-advanced > h3, .drawer-advanced-heading { margin: 0; padding: 13px 15px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 11px; font-weight: 800; }
.import-advanced > .form-grid { margin: 0; padding: 15px 15px 0; }
.import-advanced > .mapping-list { margin: 15px; background: #fff; }
.import-advanced > .mapping-status { margin: -5px 15px 15px; }
.safe-default-note { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 11px 13px; border-radius: 9px; background: var(--green-soft); color: var(--green-dark); font-size: 10px; }
.safe-default-note span { color: var(--muted); }
.import-campaign-destinations { margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; }
.import-campaign-destinations legend { padding: 0 5px; font-size: 10px; font-weight: 800; }
.import-campaign-destinations > small { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; line-height: 1.4; }
#importCampaignChoices { max-height: 190px; display: grid; gap: 6px; overflow-y: auto; }
.import-campaign-choice { min-height: 42px; display: grid !important; grid-template-columns: 18px 1fr; align-items: center; gap: 9px !important; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: pointer; }
.import-campaign-choice:has(input:checked) { border-color: #bdd8cc; background: var(--green-soft); }
.import-campaign-choice input { width: 16px !important; height: 16px !important; margin: 0; accent-color: var(--green); }
.import-campaign-choice span { display: grid; gap: 2px; }
.import-campaign-choice strong { font-size: 10px; }
.import-campaign-choice small { color: var(--muted); font-size: 8px; }
.import-campaign-choice.unavailable { background: #f5f6f4; color: var(--muted); cursor: not-allowed; opacity: .78; }
.campaign-create-option > span { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 10px; }
.campaign-create-option > span input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.review-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 22px; }
.review-grid article { min-height: 90px; display: flex; flex-direction: column; justify-content: center; padding: 13px; border: 1px solid var(--line); border-radius: 9px; }
.review-grid article.good { border-color: #bdd8cc; background: var(--green-soft); }
.review-grid strong { font-size: 20px; }
.review-grid span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.review-notice { display: flex; gap: 10px; margin-top: 18px; padding: 13px; border: 1px solid #ead4ac; border-radius: 9px; background: var(--amber-soft); }
.review-notice > span { width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #fff; color: var(--amber); font-weight: 700; }
.review-notice p { margin: 0; font-size: 10px; line-height: 1.5; }
.success-state { min-height: 440px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.success-state > span { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 24px; }
.success-state p { max-width: 430px; color: var(--muted); font-size: 12px; }
.success-actions { display: flex; gap: 8px; margin-top: 16px; }

.segmented { display: flex; margin-right: auto; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #eef2f0; }
.segmented button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; }
.segmented button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.segmented b { display: inline-grid; min-width: 18px; height: 18px; place-items: center; margin-left: 4px; border-radius: 99px; background: #e6ece9; font-size: 8px; }
.leads-workspace-tabs { width: max-content; margin: 0 0 14px; }
.leads-workspace-tabs button { min-width: 108px; }
.lead-filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
}
.lead-filter-bar label { min-width: 0; display: grid; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.lead-filter-bar select, .lead-filter-bar input { width: 100%; height: 34px; padding: 0 26px 0 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 10px; }
.lead-filter-bar input { padding-right: 8px; }
.lead-filter-bar select:focus, .lead-filter-bar input:focus { border-color: var(--green); outline: 2px solid var(--green-soft); }
/* Every filter is visible — no "More filters" disclosure to hunt through. */
.more-filters { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 8px; }
.more-filters > div { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 8px; }
.call-log-filter-bar { grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(120px, 1fr)) auto; }
.clear-log-filters { align-self: end; min-height: 34px; padding: 0 10px; }
.clear-lead-filters { min-width: 76px; min-height: 34px; flex: 0 0 auto; }
.lead-filter-summary { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; overflow: hidden; color: var(--muted); font-size: 10px; }
.lead-filter-summary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schedule-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 12px; }
.schedule-item { min-height: 74px; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.schedule-item.callback-item { width: 100%; border-top: 0; border-right: 0; border-left: 0; background: #fff; cursor: pointer; text-align: left; }
.schedule-item.callback-item:hover { background: #f8faf9; }
.schedule-item:last-child { border-bottom: 0; }
.schedule-item time { color: var(--green); font-size: 13px; font-weight: 700; }
.schedule-item > div { display: flex; flex-direction: column; }
.schedule-item strong { font-size: 12px; }
.schedule-item small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.day-summary { align-self: start; padding: 16px; }
.day-summary h3 { margin-bottom: 15px; }
.day-summary > div { min-height: 39px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.day-summary strong { color: var(--ink); }
.day-summary button { margin-top: 14px; }

.user-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; }
.user-card { padding: 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.user-card header { display: flex; align-items: center; gap: 10px; }
.user-card .avatar { width: 38px; height: 38px; }
.user-card header > span:nth-child(2) { display: flex; flex-direction: column; }
.user-card strong { font-size: 12px; }
.user-card small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.user-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 16px 0; }
.user-card dt { color: var(--subtle); font-size: 8px; text-transform: uppercase; }
.user-card dd { margin: 3px 0 0; font-size: 11px; font-weight: 700; }
.user-card footer { display: flex; justify-content: space-between; align-items: center; }

.settings-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 12px; }
.settings-nav { align-self: start; display: grid; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.settings-nav button { min-height: 42px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font-size: 11px; font-weight: 700; }
.settings-nav button.active { background: var(--green-soft); color: var(--green-dark); }
.script-settings-list article { min-height: 76px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 13px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.script-settings-list article > div { display: flex; flex-direction: column; }
.script-settings-list strong { font-size: 12px; }
.script-settings-list p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.script-settings-list article > span { padding: 4px 7px; border-radius: 99px; background: var(--green-soft); color: var(--green); font-size: 8px; font-weight: 700; }
.script-settings-list .settings-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0; border-radius: 0; background: transparent; color: inherit; }
.settings-row-actions small { color: var(--muted); font-size: 9px; font-weight: 700; }
.danger-text { color: var(--red) !important; }
.campaign-danger-zone { margin-top: 18px; border-color: #e8caca !important; background: #fffafa; }
.campaign-danger-zone p { color: var(--muted); }
.danger-button { min-height: 38px; padding: 0 14px; border: 1px solid #d9aaaa; border-radius: 7px; background: #fff; color: var(--red); cursor: pointer; font-weight: 700; }
.danger-button:hover { background: var(--red-soft); }
.drawer-help { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.script-editor-body { min-height: 360px !important; resize: vertical; line-height: 1.55; }
.compact-empty { min-height: 220px; }
.simple-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 18px; }
.simple-settings-grid article { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.simple-settings-grid strong { font-size: 12px; }
.settings-explainer { margin: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #f8faf9; }
.settings-explainer strong { font-size: 13px; }
.settings-explainer p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.integration-grid { display: grid; gap: 10px; padding: 18px; }
.integration-card { width: 100%; min-height: 72px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; text-align: left; }
.integration-card:hover { border-color: var(--line-strong); background: #f8faf9; }
.integration-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); font-weight: 800; }
.integration-card > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.integration-card strong { font-size: 12px; }
.integration-card small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.carrier-page-heading { align-items: flex-start; }
.carrier-key-warning { margin: 0 18px 18px; }
.drawer-form textarea[data-carrier-field], #carrierCsvText { width: 100%; min-height: 120px; resize: vertical; font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.carrier-primary-bar { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 10px; margin: 0 18px 18px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8faf9; }
.carrier-primary-bar label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }
.carrier-primary-bar select { min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); }
.carrier-primary-bar p { grid-column: 1 / -1; margin: 0; color: var(--subtle); font-size: 9px; }
.carrier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 18px 18px; }
.carrier-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.carrier-card.is-primary { border-color: #a9cdbd; box-shadow: inset 0 0 0 1px #d7e9e1; }
.carrier-card header { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.carrier-card header > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.carrier-card header strong, .carrier-card header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrier-card header strong { font-size: 13px; }
.carrier-card header small { color: var(--muted); font-size: 9px; }
.carrier-mark { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: 9px; background: var(--green-soft); color: var(--green-dark); font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.carrier-card-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 10px; }
.carrier-card-status strong { font-size: 12px; }
.carrier-capabilities { display: flex; flex-wrap: wrap; gap: 5px; min-height: 24px; }
.carrier-capabilities span { padding: 4px 6px; border-radius: 5px; background: #f0f3f1; color: var(--muted); font-size: 8px; font-weight: 700; }
.carrier-card dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 13px 0; }
.carrier-card dl div { padding: 8px; border: 1px solid var(--line); border-radius: 7px; }
.carrier-card dt { color: var(--muted); font-size: 8px; }
.carrier-card dd { margin: 4px 0 0; font-size: 14px; font-weight: 800; }
.carrier-card-error { margin: 0 0 10px; color: var(--red); font-size: 9px; line-height: 1.4; }
.carrier-card footer { display: flex; flex-wrap: wrap; gap: 7px; }
.carrier-inventory { margin: 0 18px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; }
.carrier-inventory .card-heading { margin: 0; border-bottom: 1px solid var(--line); }
.carrier-number-list { display: grid; }
.carrier-number-list article { min-height: 64px; display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(90px, auto) auto; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.carrier-number-list article:last-child { border-bottom: 0; }
.carrier-number-list article > span:first-child { min-width: 0; display: grid; gap: 3px; }
.carrier-number-list article strong, .carrier-number-list article small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrier-number-list article strong { font-size: 11px; }
.carrier-number-list article small, .carrier-number-linked { color: var(--muted); font-size: 9px; }
.carrier-charge-list { display: grid; }
.carrier-charge-list article { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.carrier-charge-list article:last-child { border-bottom: 0; }
.carrier-charge-list article span { min-width: 0; display: grid; gap: 3px; }
.carrier-charge-list article strong { font-size: 11px; }
.carrier-charge-list article small { color: var(--muted); font-size: 9px; }
.carrier-charge-list article b { flex: none; font-size: 11px; }
.carrier-billing-note { margin: 0; padding: 11px 14px; border-top: 1px solid var(--line); color: var(--subtle); font-size: 9px; line-height: 1.45; }
.carrier-setup-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.carrier-setup-head > div { min-width: 0; display: grid; gap: 3px; }
.carrier-setup-head p { margin: 0; }
.carrier-picker { display: grid; gap: 8px; margin-top: 14px; }
.carrier-picker button { min-height: 64px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); cursor: pointer; text-align: left; }
.carrier-picker button:hover { border-color: var(--line-strong); background: #f8faf9; }
.carrier-picker button > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.carrier-picker small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.carrier-safety-note { padding: 13px; border: 1px solid #cfe4da; border-radius: 9px; background: var(--green-soft); }
.carrier-safety-note p { margin-bottom: 0; }
.drawer-form label small { color: var(--subtle); font-size: 8px; font-weight: 500; line-height: 1.35; }

@media (max-width: 820px) {
  .carrier-grid { grid-template-columns: 1fr; }
  .carrier-number-list article { grid-template-columns: minmax(0, 1fr) auto; }
  .carrier-number-linked { grid-column: 1 / -1; }
}

.caller-number-list { display: grid; }
.caller-number-row { width: 100%; min-height: 78px; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(130px, .55fr) auto 18px; align-items: center; gap: 14px; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; text-align: left; }
.caller-number-row:hover { background: #f8faf9; }
.caller-number-row:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--green); outline-offset: -2px; }
.caller-number-main, .caller-number-usage { min-width: 0; display: flex; flex-direction: column; }
.caller-number-main strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.caller-number-main small, .caller-number-usage small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.caller-number-usage strong { font-size: 12px; }
.caller-number-usage i { width: 100%; height: 4px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #e8eeeb; }
.caller-number-usage b { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.caller-number-row .row-chevron { color: var(--subtle); font-size: 20px; text-align: right; }

.caller-history-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8faf9; }
.caller-history-head > div { min-width: 0; display: flex; flex-direction: column; }
.caller-history-head strong { font-size: 15px; }
.caller-history-head small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.caller-history-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.caller-history-metrics article { min-height: 88px; display: flex; flex-direction: column; justify-content: center; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.caller-history-metrics small { color: var(--muted); font-size: 9px; }
.caller-history-metrics strong { margin: 5px 0 2px; font-size: 21px; letter-spacing: -.03em; }
.caller-history-metrics span { color: var(--subtle); font-size: 8px; }
.caller-history-section { padding-top: 3px; }
.caller-history-toolbar, .caller-reputation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.caller-history-toolbar h3, .caller-reputation-heading h3 { margin: 0; }
.caller-history-toolbar p, .caller-reputation-heading p { margin: 4px 0 0; }
.caller-history-periods { flex: none; margin: 0; }
.caller-history-periods button { min-height: 28px; padding: 0 9px; }
.caller-usage-chart { height: 175px; display: flex; align-items: stretch; gap: 3px; margin-top: 15px; padding: 12px 8px 5px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(to top, rgba(225,232,228,.55) 1px, transparent 1px); background-size: 100% 25%; }
.caller-usage-column { min-width: 2px; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
.caller-usage-column i { width: min(100%, 12px); min-height: 2px; border-radius: 4px 4px 1px 1px; background: var(--green); transition: height .18s ease; }
.caller-usage-column small { width: 32px; min-height: 17px; color: var(--subtle); font-size: 6px; line-height: 1.2; text-align: center; }
.caller-campaign-usage, .caller-recent-list { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }
.caller-campaign-usage > div, .caller-recent-list > div { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border-bottom: 1px solid var(--line); font-size: 10px; }
.caller-campaign-usage > div:last-child, .caller-recent-list > div:last-child { border-bottom: 0; }
.caller-campaign-usage p, .caller-recent-list p { margin: 0; padding: 14px; }
.caller-recent-list > div > span:first-child { min-width: 0; display: flex; flex-direction: column; }
.caller-recent-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caller-recent-list small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.caller-recent-list > div > span:last-child { flex: none; color: var(--muted); font-size: 9px; }
.caller-reputation-note { margin-top: 10px !important; padding: 10px 11px; border-radius: 8px; background: #f4f6f5; }

.drawer-backdrop { position: fixed; inset: 0; background: rgba(18,27,24,.28); z-index: 39; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(500px, 92vw); display: flex; flex-direction: column; background: var(--panel); box-shadow: -18px 0 48px rgba(24,35,31,.18); transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility .22s; z-index: 40; }
.drawer.open { transform: translateX(0); visibility: visible; }
.drawer header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.drawer header h2 { margin: 0; }
.drawer-content { flex: 1; overflow-y: auto; padding: 20px; }
.drawer footer { min-height: 68px; display: flex; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--line); }
.drawer-section { margin-bottom: 22px; }
.drawer-section h3 { margin-bottom: 10px; }
.drawer-section p { color: var(--muted); font-size: 11px; line-height: 1.5; }
.condition-builder { display: grid; gap: 8px; }
.condition-row { display: grid; grid-template-columns: 1fr .8fr 1.2fr 28px; gap: 6px; }
.condition-row select, .condition-row input, .drawer-form input, .drawer-form select, .drawer-form textarea { width: 100%; min-height: 38px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 11px; }
.condition-row button { border: 0; border-radius: 7px; background: #f0f3f1; cursor: pointer; }
.drawer-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.drawer-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.drawer-form label.wide { grid-column: 1 / -1; }
.drawer-form .appointment-heat { grid-column: 1 / -1; padding: 4px 0 0; }
.drawer-form textarea { min-height: 95px; resize: vertical; }
/* Call result editor: heat toggle + admin-defined follow-up field builder. */
.drawer-form label.drawer-check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 11px; }
.drawer-form label.drawer-check input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--green); }
.form-fields-heading { margin: 18px 0 10px; }
.form-fields-heading h2 { font-size: 13px; }
.form-field-row { display: grid; grid-template-columns: 1fr 92px auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.form-field-row input, .form-field-row select { width: 100%; min-height: 34px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 11px; }
.form-field-row [data-field-options] { grid-column: 1 / -1; }
.form-field-row .form-field-required { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.form-field-row .form-field-required input { width: auto; min-height: 0; accent-color: var(--green); }
/* Follow-up fields the rep fills on the dial rail for configured results. */
.result-form-fields { display: grid; gap: 9px; margin-top: 10px; }
.result-form-fields label { display: grid; gap: 5px; color: var(--ink); font-size: 10px; font-weight: 700; }
.result-form-fields label span { color: var(--amber); font-weight: 600; }
.result-form-fields input, .result-form-fields select { width: 100%; min-height: 32px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--panel); font-size: 11px; }
.drawer-advanced { margin: 0 0 22px; }
.drawer-advanced .drawer-section { margin: 0; padding: 16px; border-bottom: 1px solid var(--line); }
.drawer-advanced .drawer-section:last-child { border-bottom: 0; }
.campaign-default-note { grid-column: 1 / -1; display: grid; gap: 3px; padding: 11px 12px; border-radius: 8px; background: var(--green-soft); color: var(--green-dark); font-size: 10px; }
.campaign-default-note span { color: var(--muted); font-size: 9px; line-height: 1.4; }
.campaign-list-search { display: grid; gap: 6px; margin: 12px 0 9px; color: var(--muted); font-size: 10px; font-weight: 700; }
.campaign-list-search input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.campaign-lead-list-library { max-height: 460px; display: grid; gap: 8px; overflow-y: auto; padding-right: 3px; overscroll-behavior: contain; }
.campaign-lead-list-card { border: 1px solid var(--line); border-radius: 9px; background: #fff; overflow: hidden; }
.campaign-lead-list-card.selected { border-color: #a9cdbd; box-shadow: 0 0 0 1px #d7e9e1 inset; }
.campaign-lead-list-heading { min-height: 54px; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.campaign-lead-list-heading > input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); }
.campaign-lead-list-heading > span { min-width: 0; display: grid; gap: 3px; }
.campaign-lead-list-heading strong, .campaign-lead-list-heading small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-lead-list-heading strong { font-size: 11px; }
.campaign-lead-list-heading small { color: var(--muted); font-size: 9px; }
.campaign-lead-list-card details { border-top: 1px solid var(--line); background: #fafcfb; }
.campaign-lead-list-card summary { padding: 9px 12px; cursor: pointer; color: var(--muted); font-size: 9px; font-weight: 800; }
.campaign-lead-list-card details > p { margin: 0; padding: 0 12px 9px; font-size: 9px; }
.campaign-list-facets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px 12px; }
.campaign-list-facets > section { min-width: 0; }
.campaign-list-facets > section > strong { display: block; margin-bottom: 6px; font-size: 9px; }
.campaign-facet-checks { max-height: 150px; display: grid; gap: 4px; overflow-y: auto; }
.campaign-facet-checks label { display: grid; grid-template-columns: 15px minmax(0, 1fr); align-items: center; gap: 6px; color: var(--ink); font-size: 9px; cursor: pointer; }
.campaign-facet-checks input { width: 14px; height: 14px; margin: 0; accent-color: var(--green); }
.campaign-facet-checks span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-facet-checks small { color: var(--muted); font-size: 8px; }
.campaign-list-empty { padding: 20px; border: 1px dashed var(--line); border-radius: 9px; text-align: center; }
.campaign-list-empty p { margin: 5px 0 0; }
.user-campaign-access { min-width: 0; grid-column: 1 / -1; margin-top: 3px; }
.campaign-access-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.campaign-access-heading > span { min-width: 0; display: grid; gap: 3px; }
.campaign-access-heading strong { color: var(--ink); font-size: 11px; }
.campaign-access-heading small { color: var(--muted); font-size: 9px; font-weight: 500; line-height: 1.4; }
.campaign-access-heading b { flex: none; padding: 5px 8px; border-radius: 99px; background: var(--green-soft); color: var(--green-dark); font-size: 9px; }
.campaign-access-list { max-height: 250px; display: grid; gap: 6px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: #f8faf9; overscroll-behavior: contain; }
.campaign-access-option { min-width: 0; min-height: 45px; display: grid !important; grid-template-columns: 17px minmax(0, 1fr); align-items: center; gap: 9px !important; padding: 7px 9px; border: 1px solid transparent; border-radius: 7px; background: #fff; cursor: pointer; }
.campaign-access-option:has(input:checked) { border-color: #bdd8cc; background: var(--green-soft); }
.campaign-access-option input { width: 16px !important; min-height: 16px !important; margin: 0; accent-color: var(--green); }
.campaign-access-option > span { min-width: 0; display: grid; gap: 2px; }
.campaign-access-option strong, .campaign-access-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-access-option strong { color: var(--ink); font-size: 10px; }
.campaign-access-option small { color: var(--muted); font-size: 8px; font-weight: 600; }
.campaign-access-empty { margin: 0; padding: 18px 10px; text-align: center; }
.user-detail-tabs { width: 100%; margin: 0 0 18px; }
.user-detail-tabs button { flex: 1; min-width: 0; padding-inline: 8px; }
.user-detail-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: -8px 0 16px; }
.user-detail-metrics span { min-width: 0; display: grid; gap: 3px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf9; }
.user-detail-metrics small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.user-detail-metrics strong { font-size: 14px; }
.user-detail-summary { margin: 0 0 8px; color: var(--muted); font-size: 10px; }
.user-detail-list { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.user-detail-list article { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.user-detail-list article:last-child { border-bottom: 0; }
.user-detail-list article > span { min-width: 0; display: grid; gap: 3px; }
.user-detail-list strong, .user-detail-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-detail-list strong { font-size: 11px; }
.user-detail-list small { color: var(--muted); font-size: 9px; }
.user-detail-list b { flex: none; max-width: 120px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.user-detail-empty { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; border: 1px dashed var(--line-strong); border-radius: 10px; text-align: center; }
.user-detail-empty strong { font-size: 13px; }
.user-detail-empty p { max-width: 310px; margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.user-detail-more { margin-top: 10px; }
.matching-count { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding: 11px 12px; border-radius: 8px; background: var(--green-soft); color: var(--green-dark); font-size: 10px; }
.matching-count strong { font-size: 14px; }

.toast { position: fixed; left: 50%; bottom: 24px; min-width: 310px; display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid #bdd8cc; border-radius: 10px; background: #f0faf5; box-shadow: 0 10px 30px rgba(0,0,0,.12); transform: translateX(-50%); z-index: 60; }
.toast > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font-size: 11px; }
.toast p { flex: 1; margin: 0; font-size: 11px; font-weight: 700; }
.toast button { border: 0; background: transparent; color: var(--blue); cursor: pointer; font-size: 10px; font-weight: 700; }
.toast { max-width: min(560px, calc(100vw - 48px)); }
.toast p { white-space: normal; overflow-wrap: anywhere; }
.toast[data-type="error"] { border-color: #e3b1b1; background: #fdf1f1; }
.toast[data-type="error"] > span { background: #c43d3d; }
.toast[data-type="warning"] { border-color: #e7d3ae; background: #fdf8ee; }
.toast[data-type="warning"] > span { background: #b9822c; }
.toast[data-type="info"] { border-color: #b8cbe5; background: #f0f5fd; }
.toast[data-type="info"] > span { background: var(--blue); }

@media (max-width: 1320px) {
  :root { --phone-width: 228px; }
  .page { padding-inline: 20px; }
  .call-state-bar { margin-inline: -20px; padding-inline: 20px; }
  .dial-workspace[data-call-state="ringing"] { grid-template-columns: 172px minmax(330px,1fr); }
  .dial-workspace { grid-template-columns: 172px minmax(330px,1fr); }
  .dial-workspace[data-call-state="connected"], .dial-workspace[data-call-state="wrap"], .dial-workspace[data-call-state="incoming"] { grid-template-columns: 172px minmax(330px,1fr) 220px; }
  .script-document { padding-inline: 22px; }
  .result-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  :root { --phone-width: 220px; }
  .dial-workspace { grid-template-columns: 166px minmax(320px,1fr); }
  .dial-workspace[data-call-state="ringing"] { grid-template-columns: 166px minmax(320px,1fr); }
  .dial-workspace[data-call-state="connected"], .dial-workspace[data-call-state="wrap"], .dial-workspace[data-call-state="incoming"] { grid-template-columns: 166px minmax(320px,1fr); }
  .dial-workspace[data-call-state="connected"] .lead-rail, .dial-workspace[data-call-state="wrap"] .lead-rail, .dial-workspace[data-call-state="incoming"] .lead-rail { grid-column: 1 / -1; display: grid; grid-template-columns: 170px 1fr 1fr 180px; align-items: stretch; }
  .lead-head, .lead-section { border-right: 1px solid var(--line); border-bottom: 0; }
  .metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .user-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  :root { --phone-width: 260px; }
  .account-button { min-width: 42px; width: 42px; }
  .account-button > span:not(.avatar) { display: none; }
  .dial-workspace { grid-template-columns: 1fr; padding-right: calc(var(--phone-width) + 12px); padding-bottom: 72px; }
  .dial-workspace[data-call-state="ringing"] { grid-template-columns: 1fr; }
  .dial-workspace[data-call-state="connected"], .dial-workspace[data-call-state="wrap"], .dial-workspace[data-call-state="incoming"] { grid-template-columns: 1fr; padding-right: calc(var(--phone-width) + 12px); }
  .outcome-rail, .lead-rail { grid-column: auto !important; }
  .phone-dock { width: var(--phone-width); right: 14px; bottom: 12px; }
  .user-grid, .schedule-layout, .settings-layout, .import-layout { grid-template-columns: 1fr; }
  /* Two short tiles per row instead of one tall one: six full-height cards
     pushed the work list itself below the fold on a phone. */
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric-strip article { min-height: 68px; padding: 10px 12px; }
  .metric-strip strong { margin: 2px 0 0; font-size: 20px; }
  .user-detail-metrics { grid-template-columns: 1fr 1fr; }
  .lead-filter-bar, .call-log-filter-bar { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .more-filters > div { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .step-list { display: flex; overflow-x: auto; }
  .step-list button { min-width: 150px; }
  /* The 1080 rule spreads the lead panel into 4 columns; in the single-column
     workspace it must stack again or it crushes on phones. */
  .dial-workspace[data-call-state="connected"] .lead-rail, .dial-workspace[data-call-state="wrap"] .lead-rail, .dial-workspace[data-call-state="incoming"] .lead-rail { display: block; }
  .lead-head, .lead-section { border-right: 0; border-bottom: 1px solid var(--line); }
  .page-actions { flex-wrap: wrap; }
  .search-field { min-width: 0; flex: 1 1 200px; }
  .card-heading { flex-wrap: wrap; }
  .campaign-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; position: relative; padding-right: 50px; }
  .campaign-row > div:first-child { grid-column: 1 / -1; }
  .campaign-row .row-action { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .simple-settings-grid { grid-template-columns: 1fr; }
  .pagination { flex-wrap: wrap; }
}

@media (max-width: 520px) {
  /* Phone layout: the icon rail moves to a bottom tab bar so content gets
     the full width. Same icons, same active states — just docked low. */
  .sidebar { inset: auto 0 0 0; width: auto; height: auto; flex-direction: row; align-items: center; padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px)); border-right: 0; border-top: 1px solid var(--line); }
  .brand { display: none; }
  .sidebar .main-nav { width: auto; flex: 1; display: flex; gap: 2px; padding: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .sidebar .main-nav::-webkit-scrollbar { display: none; }
  .nav-item { flex: none; width: 48px; min-height: 46px; justify-content: center; }
  .nav-label { display: none; }
  .main-area { margin-left: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .topbar { min-height: 60px; gap: 10px; padding: 10px 14px; }
  h1 { font-size: 20px; }
  .page { padding-inline: 12px; }
  .call-state-bar { flex-wrap: wrap; margin-inline: -12px; padding: 8px 12px; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); min-width: 0; }
  /* iOS Safari zooms the page when a focused control's text is under 16px;
     phone-size controls get 16px so focus never jumps the layout. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
  .leads-workspace-tabs { width: 100%; }
  .leads-workspace-tabs button { min-width: 0; flex: 1; padding-inline: 7px; }
  .lead-filter-bar { grid-template-columns: 1fr; }
  .more-filters > div { grid-template-columns: 1fr; }
  .dial-workspace { padding-right: 0; padding-bottom: 110px; }
  .dial-workspace[data-call-state="connected"], .dial-workspace[data-call-state="wrap"], .dial-workspace[data-call-state="incoming"] {
    padding-right: 0;
    padding-bottom: 400px;
  }
  .incoming-call-actions { flex-wrap: wrap; }
  .incoming-call-actions button { flex: 1 1 120px; min-height: 42px; }
  .phone-dock { width: min(300px, calc(100vw - 20px)); right: 10px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .dial-sms-header { align-items: stretch; flex-direction: column; }
  .dial-sms-header label { min-width: 0; }
  .dial-sms-message-list { padding: 12px; }
  .dial-sms-message-list article { max-width: 88%; }
  .dial-sms-composer > div { align-items: stretch; flex-direction: column; }
  .dial-sms-composer button { width: 100%; }
  .caller-number-row { grid-template-columns: minmax(0, 1fr) auto 16px; }
  .caller-number-usage { grid-column: 1 / -1; grid-row: 2; }
  .carrier-primary-bar { grid-template-columns: 1fr; }
  .carrier-primary-bar p { grid-column: auto; }
  .carrier-grid { padding-inline: 12px; }
  .carrier-inventory, .carrier-primary-bar { margin-inline: 12px; }
  .campaign-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
  .drawer-form { grid-template-columns: 1fr; }
  .condition-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .import-step { padding: 18px 14px; }
  .import-actions { flex-wrap: wrap; }
  .workspace-hero { padding: 18px; }
  .script-document { padding: 16px 14px 40px; }
  th, td { padding: 9px 10px; }
  .idle-selection { min-width: 0; width: 100%; }
  .idle-message > p { font-size: 12px; }
}

.workforce-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.workforce-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.workforce-toolbar input,
.workforce-toolbar select {
  min-width: 180px;
}

.workforce-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.workforce-metrics article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.workforce-metrics strong {
  display: block;
  margin-bottom: 4px;
  font-size: 22px;
}

.workforce-metrics span {
  color: var(--muted);
  font-size: 12px;
}

.workforce-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
}

.workforce-availability {
  align-self: start;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.workforce-availability > p {
  color: var(--muted);
  font-size: 13px;
}

.campaign-hours-card {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.campaign-hours-card:first-child {
  border-top: 0;
}

.campaign-hours-card strong,
.campaign-hours-card small {
  display: block;
}

.campaign-hours-card small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.45;
}

#scheduleSlots input,
#scheduleSlots select {
  min-width: 110px;
}

#scheduleSlots .slot-date {
  min-width: 145px;
}

.availability-editor {
  display: grid;
  gap: 8px;
}

.availability-row {
  display: grid;
  grid-template-columns: 30px 56px 1fr 1fr;
  gap: 8px;
  align-items: center;
}

@media (max-width: 1100px) {
  .workforce-metrics {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .workforce-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .workforce-metrics {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

/* Additive role-aware workspace */
.legacy-nav-item { display: none !important; }
.workspace-hero {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
  padding: 24px;
  border: 1px solid #cfe0d8;
  border-radius: 16px;
  background: linear-gradient(135deg, #f2faf6, #fff);
}
.workspace-hero h2 { margin: 0 0 7px; font-size: 23px; }
.workspace-hero p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.workspace-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
.focus-card { align-self: start; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.focus-card > div:first-child { padding: 18px; border-bottom: 1px solid var(--line); background: var(--amber-soft); }
.focus-card > div:first-child strong { display: block; font-size: 32px; letter-spacing: -.04em; }
.focus-card > div:first-child span { color: var(--muted); font-size: 10px; }
.focus-card > div:last-child { display: grid; }
.focus-card > div:last-child > button {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  text-align: left;
}
.focus-card > div:last-child > button:hover { background: #fafbfa; }
.focus-card > div:last-child > button span { min-width: 0; display: grid; gap: 3px; }
.focus-card > div:last-child strong, .focus-card > div:last-child small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-card > div:last-child small { color: var(--muted); font-size: 9px; }
.focus-card > div:last-child > p { margin: 0; padding: 18px; color: var(--muted); font-size: 11px; }
.work-queue { display: grid; }
.work-queue-item {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  text-align: left;
}
.work-queue-item:hover { background: #fafbfa; }
.work-queue-item.static { cursor: default; }
.work-queue-item time { color: var(--green-dark); font-size: 10px; font-weight: 800; }
.work-queue-item > span { min-width: 0; display: grid; gap: 3px; }
.work-queue-item strong, .work-queue-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-queue-item strong { font-size: 11px; }
.work-queue-item small { color: var(--muted); font-size: 9px; }
.appointments-toolbar { justify-content: space-between; }
/* The day in one line, above the table: what is on today, what is still
   unconfirmed, what is at risk, and who is next. */
.appointments-overview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--panel, rgba(128,128,128,.04));
}
.appointments-overview .overview-cell { display: grid; gap: 2px; min-width: 0; }
.appointments-overview .overview-cell strong { font-size: 16px; line-height: 1.2; }
.appointments-overview .overview-cell small { color: var(--muted); font-size: 11px; }
.appointments-overview .overview-next { flex: 1 1 200px; }
.appointments-overview .overview-next strong { font-size: 14px; font-weight: 600; }
.appointments-overview #startConfirming { margin-left: auto; }
@media (max-width: 720px) {
  .appointments-overview { gap: 12px; }
  .appointments-overview #startConfirming { margin-left: 0; width: 100%; }
}
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 99px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.appointment-household-link { display: block; }
.messages-layout {
  min-height: calc(100vh - 126px);
  display: grid;
  grid-template-columns: minmax(260px, 350px) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.message-inbox { min-width: 0; border-right: 1px solid var(--line); }
.message-search { display: grid; gap: 8px; padding: 16px; border-bottom: 1px solid var(--line); }
.message-search label { font-size: 15px; font-weight: 800; }
.message-search input {
  width: 100%;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.message-thread-list { display: grid; max-height: calc(100vh - 226px); overflow-y: auto; }
.message-thread-list > button {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  text-align: left;
}
.message-thread-list > button:hover, .message-thread-list > button.active { background: var(--green-soft); }
.message-thread-list > button > span { min-width: 0; display: grid; align-content: center; gap: 4px; }
.message-thread-list strong, .message-thread-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-thread-list strong { font-size: 11px; }
.message-thread-list small, .message-thread-list time { color: var(--muted); font-size: 9px; }
.message-thread-list b { min-width: 18px; display: grid; place-items: center; border-radius: 99px; background: var(--green); color: #fff; font-size: 8px; }
.message-conversation { min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.message-conversation > header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.message-conversation > header h2 { margin: 0; }
.message-conversation > header span { color: var(--muted); font-size: 9px; }
.message-list { min-height: 360px; max-height: calc(100vh - 276px); overflow-y: auto; padding: 20px; background: #f8faf9; }
.message-list article { width: fit-content; max-width: min(72%, 540px); margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; background: #fff; }
.message-list article.outbound { margin-left: auto; border-color: #bed8cc; border-radius: 12px 12px 3px 12px; background: var(--green-soft); }
.message-list p { margin: 0; font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
.message-list time { display: block; margin-top: 5px; color: var(--subtle); font-size: 8px; }
.message-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 12px; border-top: 1px solid var(--line); }
.message-composer textarea { min-height: 42px; max-height: 130px; resize: vertical; padding: 10px; border: 1px solid var(--line); border-radius: 9px; }
.lead-profile-summary { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfb; }
.lead-profile-summary > div { display: flex; gap: 6px; }
.lead-profile-summary p, .lead-profile-summary small { margin: 0; }
.contact-list { display: grid; gap: 10px; }
.contact-card { display: grid; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.contact-card header { min-height: 0; padding: 0; border: 0; }
.contact-card header > span:first-child { display: grid; gap: 3px; }
.contact-card header small { color: var(--muted); font-size: 9px; }
.activity-list { display: grid; gap: 12px; }
.activity-event { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: start; }
.activity-event p { margin: 3px 0; }
.drawer-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mode-callout { margin-bottom: 16px; padding: 12px; border-radius: 9px; background: var(--blue-soft); }
.mode-callout p { margin: 8px 0 0; }

@media (max-width: 980px) {
  .overview-grid { grid-template-columns: 1fr; }
  .workspace-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .messages-layout { grid-template-columns: 290px minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .workspace-hero { align-items: flex-start; flex-direction: column; }
  .appointments-toolbar { align-items: stretch; flex-direction: column; }
  .appointments-toolbar .segmented {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
  .appointments-toolbar .segmented button { flex: 0 0 auto; }
  #newAppointment { width: 100%; }
  [data-page-panel="appointments"] .table-card { min-width: 0; max-width: 100%; }
  [data-page-panel="appointments"] .card-heading { align-items: flex-start; flex-direction: column; }
  [data-page-panel="appointments"] .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
  .messages-layout { grid-template-columns: 1fr; }
  .message-inbox { border-right: 0; border-bottom: 1px solid var(--line); }
  .message-thread-list { max-height: 260px; }
  .message-list { max-height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.appointment-products { display: grid; gap: 6px; }
.appointment-products > strong { font-size: 11px; }
.appointment-product-options { display: flex; gap: 14px; flex-wrap: wrap; }
.appointment-product-options label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; cursor: pointer; }

.toast[data-position="top-left"] { left: 24px; right: auto; top: 20px; bottom: auto; transform: none; }
.pipeline-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .pipeline-grid { grid-template-columns: 1fr; } }
.pipeline-filter-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pipeline-filter { border: 1px solid var(--line, #d8ded9); background: transparent; border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 700; cursor: pointer; }
.pipeline-filter.active { background: var(--green); color: #fff; border-color: var(--green); }
.pipeline-row { cursor: pointer; }
.pipeline-row:hover td { background: #f2f6f3; }
.pipeline-callback { display: grid; gap: 2px; padding: 8px 6px; width: 100%; min-width: 0; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line, #e4e8e4); border-radius: 8px; cursor: pointer; font: inherit; color: inherit; }
.pipeline-callback:hover { background: rgba(23, 107, 80, 0.07); }
.pipeline-callback:last-child { border-bottom: 0; }
.pipeline-callback strong, .pipeline-callback small { overflow-wrap: anywhere; min-width: 0; }
.pipeline-callback small { color: var(--muted, #5f6d66); }
/* The generic focus-card button rules lay rows out as a nowrap flex line with
   ellipsis text; callbacks need the full name, time, and phone to wrap. */
.focus-card > div:last-child > button.pipeline-callback { display: grid; min-height: 0; align-items: start; justify-content: stretch; gap: 2px; padding: 8px 13px; }
.focus-card > div:last-child .pipeline-callback strong,
.focus-card > div:last-child .pipeline-callback small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; font-size: 11px; }
.focus-card > div:last-child .pipeline-callback strong { font-size: 13px; }
.pipeline-deal { display: block; margin-top: 3px; color: var(--muted, #5f6d66); font-size: 11px; }
.pipeline-kind { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line, #e4e8e4); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.pipeline-kind[data-kind="appointment"] { border-color: #176b50; color: #176b50; background: rgba(23, 107, 80, 0.08); }
.pipeline-kind[data-kind="callback"] { border-color: #2b5f9e; color: #2b5f9e; background: rgba(43, 95, 158, 0.08); }
.pipeline-kind[data-kind="call"] { color: var(--muted, #5f6d66); }
.pipeline-confirm { margin-left: 8px; vertical-align: middle; }

.abandon-rate-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.abandon-rate-chip[data-level="near"] { color: var(--amber); border-color: var(--amber); }
.abandon-rate-chip[data-level="over"] { color: var(--red); border-color: var(--red); }

.error-report-list article > div { min-width: 0; }
.error-report-list article strong { overflow-wrap: anywhere; }
.error-report-stack summary { cursor: pointer; font-size: 12px; color: var(--muted); margin-top: 4px; }
.error-report-stack pre { margin: 6px 0 0; padding: 8px 10px; background: #f5f7f6; border-radius: 8px; font-size: 11px; max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Settings → Pay & operations: registry-driven controls. */
.op-groups { padding: 18px; display: grid; gap: 22px; }
.op-group > h3 { margin: 0 0 4px; }
.op-group > p { margin: 0 0 10px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.op-setting { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: start; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.op-setting > div:first-child { min-width: 0; }
.op-setting strong { font-size: 12px; }
.op-setting p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.op-setting small { display: block; margin-top: 5px; color: var(--subtle); font-size: 10px; }
.op-setting.is-customized strong::after { content: "Changed"; margin-left: 7px; padding: 2px 6px; border-radius: 99px; background: var(--amber-soft); color: var(--amber); font-size: 8px; font-weight: 700; vertical-align: 1px; }
.op-control input[type="number"], .op-control input[type="date"], .op-control select { width: 100%; min-height: 36px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font: inherit; font-size: 12px; }
.op-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.op-toggle input { width: 17px; height: 17px; margin: 0; accent-color: var(--green); }
.op-checks { display: grid; gap: 6px; }
.op-checks label { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 7px; color: var(--ink); font-size: 11px; cursor: pointer; }
.op-checks input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }
.op-groups.is-readonly .op-control { opacity: .7; }
.op-control input[type="password"], .op-control input[type="text"] { width: 100%; min-height: 36px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font: inherit; font-size: 12px; }
.op-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 13px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfa; }
.op-footer p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.op-footer .status-tag { margin-right: 6px; }
.op-note { margin: 8px 2px 0; color: var(--subtle); font-size: 10px; line-height: 1.5; }
.calendar-share > div:first-child { min-width: 0; }
.calendar-share strong { display: block; margin-bottom: 3px; font-size: 12px; }
.calendar-share input { width: 100%; min-height: 34px; margin-top: 8px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--muted); font: inherit; font-size: 11px; }
.calendar-share-actions { flex: none; display: grid; gap: 6px; justify-items: end; }
@media (max-width: 820px) { .op-footer { flex-direction: column; } .calendar-share-actions { justify-items: start; } }
@media (max-width: 820px) { .op-setting { grid-template-columns: 1fr; gap: 9px; } .op-control { max-width: 320px; } }

/* Schedule: a week board you book by dragging, plus payroll.
   One lane per day. The blue block is the commitment; the time actually worked
   is drawn as a fill INSIDE it, so a gap in the fill is the gap in the day.
   Time on the clock outside every block gets a thin rule at the column edge. */
.schedule-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.schedule-week-pick { display: flex; align-items: center; gap: 6px; }
.schedule-week-pick strong { min-width: 152px; font-size: 15px; letter-spacing: -.015em; }
.schedule-week-pick button { min-width: 34px; }
.schedule-week-pick #scheduleThisWeek { margin-left: 6px; }
.schedule-toolbar-fields { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.schedule-toolbar-fields label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.schedule-toolbar-fields select, .schedule-toolbar-fields input { min-height: 34px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); font: inherit; font-size: 12px; }
.schedule-toolbar-fields input { width: 76px; }
.schedule-booked { display: flex; align-items: baseline; gap: 6px; margin: 0; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); line-height: 32px; }
.schedule-booked strong { font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.schedule-booked span { color: var(--muted); font-size: 11px; }
.schedule-booked[data-tone="met"] { border-color: #bedcd0; background: var(--green-soft); }
.schedule-booked[data-tone="met"] strong { color: var(--green-dark); }
.schedule-booked[data-tone="short"] { border-color: #e7d4b0; background: var(--amber-soft); }
.schedule-booked[data-tone="short"] strong { color: var(--amber); }
.schedule-save-state { margin: 0 0 9px; min-width: 46px; color: var(--subtle); font-size: 11px; font-weight: 600; }
.schedule-save-state[data-tone="warn"] { color: var(--amber); }
.schedule-save-state[data-tone="error"] { color: var(--red); }

.schedule-locked-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.schedule-locked-banner .review-notice { flex: 1; margin-top: 0; }
.schedule-change-request-form { display: grid; gap: 9px; margin-bottom: 14px; padding: 13px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel); }
.schedule-change-request-form label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.schedule-change-request-form textarea { min-height: 54px; resize: vertical; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: inherit; font: inherit; font-size: 12px; line-height: 1.4; }
.schedule-change-request-actions { display: flex; justify-content: flex-end; gap: 8px; }
.schedule-change-requests-empty { margin: 10px 2px 0; color: var(--muted); font-size: 11px; }

.schedule-board-card { position: relative; margin-bottom: 18px; }
.schedule-board-card .card-heading { min-height: 0; padding-bottom: 13px; border-bottom: 0; }
.schedule-campaign-pick { display: grid; gap: 6px; justify-items: end; text-align: right; }
.schedule-market-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.schedule-market-tabs button { min-height: 30px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--panel); color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; }
.schedule-market-tabs button.active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.schedule-market-name { font-size: 12px; }
/* The clock the board is read on. It sits with the market tabs because the two
   answer the same question — which hours am I looking at — and a rep who has
   moved states needs it as plainly as the campaign they dial. */
.schedule-zone { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.schedule-zone select { min-height: 28px; max-width: 210px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: 11px; font-weight: 600; }
.schedule-market-hours { color: var(--muted); font-size: 11px; }
/* The usual week, stated once above the board. A dial week is the same week
   over and over, so this row — not the grid — is the front door: pick the
   hours, tick the days, book them. Every field is on screen; nothing opens. */
.schedule-pattern { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 12px 18px 13px; border-top: 1px solid var(--line); background: var(--canvas); }
.schedule-pattern:empty { display: none; }
.schedule-pattern label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.schedule-pattern select { min-height: 32px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); font: inherit; font-size: 12px; }
.schedule-pattern-days { display: flex; gap: 4px; }
.schedule-pattern-days button { min-height: 32px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; }
/* The name until the row runs out of width, then the initial. Below that the
   toggles are seven equal cells and "Wednesday" cannot fit in any of them. */
.schedule-pattern-days .day-short { display: none; }
@media (max-width: 1180px) {
  .schedule-pattern-days button { width: 30px; padding: 0; }
  .schedule-pattern-days .day-full { display: none; }
  .schedule-pattern-days .day-short { display: inline; }
}
/* A ticked day is booked time, so it is the blue of the block it becomes —
   never the green this page reserves for time actually on the clock. The strip
   and the blocks under it are then visibly the same substance. */
.schedule-pattern-days button.active { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.schedule-pattern-days button:disabled { opacity: .45; cursor: default; }
.schedule-pattern [data-schedule-pattern-apply]:disabled { opacity: .5; cursor: default; }
/* The week's total against the commitment, so the row answers "is this enough"
   before a single block is drawn. */
/* What the button will change that the button itself cannot say: the days it
   restates, and the days it clears. Stated before it is pressed. */
.schedule-pattern-note { flex: 1 1 100%; margin-top: -2px; color: var(--muted); font-size: 11px; }
/* The total sits against the days that produce it, not adrift by the button:
   the row reads left to right as hours, days, what that comes to, then act. */
.schedule-pattern-total { align-self: center; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.schedule-pattern [data-schedule-pattern-apply] { margin-left: auto; }
.schedule-pattern-total[data-tone="met"] { color: var(--green-dark); }
.schedule-pattern-total[data-tone="short"] { color: var(--amber); }

/* The week on the clock, stated as the arithmetic that produces the rate rather
   than as a row of unrelated cards — the rate is the claim, the sum underneath
   is its proof, and a rep can check one against the other. */

/* Gesture help and the colour key share one quiet rule instead of two rows. */
.schedule-subhead { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 9px 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.schedule-subhead p { margin: 0; }
.schedule-subhead #scheduleHint { color: var(--muted); font-size: 11px; }
/* The key. Three colours mean three things and the board never says which, so
   it says it here: the name in the reader's weight, what it MEANS beside it.
   Paid and not paid is the distinction a rep actually cares about, so those are
   the words rather than a restatement of the colour. */
.schedule-legend { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin: 0; color: var(--subtle); font-size: 10px; }
.schedule-legend span { display: inline-flex; align-items: center; gap: 5px; }
.schedule-legend b { color: var(--ink); font-size: 11px; font-weight: 700; }
.schedule-legend i { flex: none; width: 14px; height: 10px; border-radius: 2px; }
/* Each key is the thing itself at legend size: the plan with its own left rail,
   the two washes exactly as they land on a block, and the appointment dash. */
.schedule-legend .key-booked { border-left: 3px solid var(--blue); background: var(--plan-fill); }
.schedule-legend .key-clock { background: var(--clock-fill); }
.schedule-legend .key-wrap { background: var(--wrap-fill); }
.schedule-legend i.key-set { width: 16px; height: 3px; border-radius: 1.5px; background: var(--set-mark); }
.sb-empty { margin: 0; padding: 14px 18px 0; color: var(--muted); font-size: 12px; }
.sb-editor-repeat { display: grid; gap: 5px; }
.sb-editor-repeat small { color: var(--muted); font-size: 10px; font-weight: 700; }
.sb-editor-days { display: flex; gap: 4px; }
.sb-editor-days button { flex: 1; min-width: 0; min-height: 30px; padding: 0; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--panel); color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; }
.sb-editor-days button.active { border-color: var(--green); background: var(--green-soft); color: var(--green-dark); }
.sb-editor-days button:disabled { opacity: .45; cursor: default; }

.schedule-board { overflow-x: auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 18px 10px; max-height: 612px; }
.schedule-board .sb-corner, .schedule-board .sb-head { position: sticky; top: 0; z-index: 6; background: var(--panel); }
.sb-gutter { touch-action: pan-y; }
.schedule-scope { margin: 0; padding: 8px 18px; text-align: right; }
.schedule-scope button { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; font-size: 12px; font-variant-numeric: tabular-nums; text-align: left; }
.schedule-scope button:hover { border-color: var(--ink); }
/* Wide enough for "Wednesday" to be written out, which is the whole reason the
   column has this minimum. The board scrolls sideways below that, as it always
   has — a name the reader has to expand is worse than a scrollbar. */
.sb-frame { --sb-rule: #e9edeb; display: grid; grid-template-columns: 50px repeat(7, minmax(108px, 1fr)); grid-template-rows: auto var(--sb-height); min-width: 806px; touch-action: pan-x; user-select: none; }
.sb-corner { display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 8px 9px 0; border-bottom: 1px solid var(--line-strong); color: var(--subtle); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* Named areas, not source order: the appointment chip is absent on most days,
   and under auto-flow its absence would pull the hours up into its place. */
.sb-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "day day" "hours sets" "seen seen"; align-items: baseline; gap: 1px 8px;
  padding: 8px 9px 13px; border-bottom: 1px solid var(--line-strong); }
/* Booked against worked, as the header's own bottom rule. Absolutely placed so
   it costs the header no row — a day's answer should not push the board down a
   line. The track is the plan, the fill is the day. */
.sb-mix { position: absolute; right: 9px; bottom: 4px; left: 9px; display: flex; height: 6px; overflow: hidden; border-radius: 3px; background: var(--line); }
.sb-mix i { flex: none; display: block; min-width: 1px; }
/* The bar gets its own four colours rather than the block's fills. The fills
   are a background a label sits on and are quiet by design; this is the only
   place the split is stated at all, so it is allowed to be legible. Time on a
   call is the brightest of them — it is the part of the shift the other three
   exist to produce. */
/* Hours worked against nothing booked are not a shortfall, and a track behind
   them would draw a plan that never existed. */
.sb-mix.is-unbooked { background: transparent; }
.sb-mix-mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--panel); opacity: .85; }
.sb-mix-clock { background: var(--bar-clock); }
.sb-mix-wrap { background: var(--bar-wrap); }
.sb-mix-missed { background: var(--bar-missed); }
.sb-head-day { grid-area: day; display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.sb-head-day strong { overflow: hidden; font-size: 12px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.sb-head-day small { flex: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sb-head-hours { grid-area: hours; font-size: 11px; font-variant-numeric: tabular-nums; }
.sb-head-hours b { color: var(--blue); }
.sb-head-hours em { color: var(--ink); font-style: normal; font-weight: 700; }
.sb-head-hours em.is-short { color: var(--ink); }
.sb-head-in { grid-area: seen; justify-self: end; min-height: 13px; color: var(--subtle); font-size: 10px; font-variant-numeric: tabular-nums; }
.sb-head.is-today { box-shadow: inset 0 -2px 0 var(--ink); }
.sb-gutter { position: relative; }
.sb-gutter span { position: absolute; right: 9px; transform: translateY(-6px); color: var(--subtle); font-size: 10px; font-variant-numeric: tabular-nums; }
.sb-col { position: relative; border-left: 1px solid var(--sb-rule); background:
  repeating-linear-gradient(to bottom, var(--sb-rule) 0, var(--sb-rule) 1px, transparent 1px, transparent var(--sb-hour));
  cursor: cell; }
.sb-col.is-closed { background-color: rgba(23, 32, 29, .035); cursor: default; }
.sb-col.is-today { background-color: rgba(23, 107, 80, .03); }
/* Hours the campaign never opens, so nothing can be drawn there. */
.sb-shut { position: absolute; left: 0; right: 0; background: rgba(23, 32, 29, .035); pointer-events: none; }
.sb-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--ink); pointer-events: none; z-index: 3; }
.sb-now::before { content: ''; position: absolute; top: -4px; left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.sb-blocks { position: absolute; inset: 0; }
/* The plan is a frame, not a fill. Booked time used to be a solid blue box
   taking most of the column while the hours actually worked were a 5px stripe
   against its edge — the plan shouting, the fact whispering. The blue now
   states itself in the border and the left bar, and the inside is left empty
   for the worked wash to fill. Unfilled space is then the time that went
   missing, readable across the whole week without squinting at one day. */
.sb-block { position: absolute; left: 3px; right: 3px; overflow: hidden; padding: 4px 20px 4px 7px; border: 0; border-left: 3px solid var(--blue); border-radius: 4px; background: var(--plan-fill); cursor: grab; }
/* Hours still ahead of the week: an outline, not a filled object. Nothing has
   happened in them yet, so there is nothing to report — and the lighter weight
   is what makes the drawn plan read as the thing you are still deciding. */
.sb-block.is-ahead { background: var(--plan-ahead); box-shadow: inset 0 0 0 1px var(--plan-edge); }
.sb-block.is-dragging { cursor: grabbing; box-shadow: 0 6px 18px rgba(23, 32, 29, .18); }
/* Both labels are addressed by class, never by element: .sb-fill is a span too,
   and an element selector here would out-rank its own positioning. */
.sb-block-when, .sb-block-note { position: relative; display: block; }
/* A column is 92px at the board's narrowest, and "11:15a–4:45p" does not fit
   in it. Clipping mid-glyph reads as a rendering fault; an ellipsis reads as a
   column too narrow to say it, and the title still carries the full times. */
.sb-block-when { overflow: hidden; font-size: 12px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.sb-block-note { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
/* On today's blocks the note stops reporting a length and reports where the
   rep stands right now, which is the only reading they can still act on. */
.sb-block-note[data-live] { font-weight: 700; }
.sb-block-note[data-live="soon"] { color: var(--blue); }
.sb-block-note[data-live="live"], .sb-block-note[data-live="kept"] { color: var(--green-dark); }
.sb-block-note[data-live="late"] { color: var(--amber); }
.sb-block-note[data-live="short"] { color: var(--red); }
/* Reality, drawn as one rail inside the commitment it was meant to cover: the
   gaps in the rail are the gaps in the day. A wash over the whole block muddies
   the blue and costs the block its identity as the thing you drag. */
/* These sit ON the blue, so they are opaque, not washes. A translucent green
   over --plan-fill muddies to gray and the board loses both readings at once. */
.sb-fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; }
.sb-fill i, .sb-worked-fill i { position: absolute; left: 0; right: 0; }
/* Time the block was supposed to cover and nobody did. It used to be the blue
   showing through — an absence the reader had to infer. Blue now means only
   the part of the plan the week has not reached, so this had to be said. */
.sb-fill-missed, .sb-worked-missed { background: var(--missed-fill); }
/* On the clock, deepest first. Talk is the strongest because it is the only one
   of the three that is the job itself; wrap-up is the palest because it is the
   job's paperwork. Wrap-up was amber, a fourth hue, and every short one cut a
   stripe across the green — the block came out banded rather than read. */
.sb-fill-talk, .sb-worked-talk { background: var(--talk-fill); }
.sb-fill-ready, .sb-worked-ready { background: var(--ready-fill); }
.sb-fill-wrap, .sb-worked-wrap { background: var(--wrap-fill); }
/* One green for a stretch the board has stopped splitting: between talk and
   ready in value, so a calmed block sits where its own detail would have. */
.sb-fill-clock, .sb-worked-clock { background: var(--clock-fill); }
/* On the clock outside every block — same rail, against the column edge. */
/* An appointment, at the minute it was set. It rides the worked rail (the block
   rail sits 7px in, the outside rail 8px, so one line covers both) and wears the
   one accent this page had left — blue is the plan, green the clock, red the
   wrap-up, amber the shortfall. The panel-coloured ring keeps the pip legible
   where it lands on top of the green.
   pointer-events stays off: a 9px target sitting on the drag surface would eat
   the gesture that draws and moves blocks, and the board's job is booking. */
/* An appointment is an event, not a stretch of time, so it points at the moment
   rather than sitting on it. A dot ON the rail obscured the rail; a notch cut
   THROUGH the rail read as the rail being severed. An arrowhead beside it does
   neither. */
/* An appointment is now something you press to see who it was, so it has to be
   a real target rather than 9px of arrowhead. Round reads as pressable, holds a
   count when several land together, and takes focus. The lane keeps
   pointer-events off so only the badges themselves take the gesture — the
   column underneath is still the surface you draw a block on. */
/* An 18px disc of solid purple, nineteen times over, was the loudest thing on a
   board whose every other colour had just been quietened down — it read as
   nineteen errors rather than nineteen wins. The ring keeps the same target and
   the same count and spends a quarter of the ink: purple on the outline, the
   panel showing through the middle, so it sits ON the day rather than blotting
   it. Sizes come off one custom property, since only the size and the fill
   differ between the three shapes. */
.sb-sets { position: absolute; top: 0; bottom: 0; right: 5px; width: 26px; pointer-events: none; z-index: 4; }
/* A dash flush against the block's right edge, like a mark on a ruler: it
   points at the minute without putting an object on top of the day. The button
   is 14px tall so there is something to press; the 3px rule inside it is the
   only part that shows. A cluster wears its count to the dash's left, since a
   number cannot live inside three pixels. */
.sb-set { position: absolute; right: 0; display: flex; align-items: center; justify-content: flex-end; gap: 3px;
  height: 14px; margin-top: -7px; padding: 0; border: 0; background: transparent; color: var(--set-mark);
  font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer; pointer-events: auto; }
.sb-set::after { content: ""; flex: none; width: 16px; height: 3px; border-radius: 1.5px; background: var(--set-mark); }
.sb-set[data-count="1"]::after { width: 12px; }
.sb-set:hover, .sb-set:focus-visible { outline: none; }
.sb-set:hover::after, .sb-set:focus-visible::after { width: 20px; height: 5px; }
/* The day's total, beside the day's name. Purple is the one colour on this
   board that does not mean time, so a number wearing it can only mean the
   thing the time was spent to get. */
.sb-head-sets { grid-area: sets; justify-self: end; min-width: 16px; height: 15px; padding: 0 4px; border: 0; border-radius: 8px; background: var(--set-mark-soft); color: var(--set-mark); cursor: pointer; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 15px; }
.sb-head-sets:hover, .sb-head-sets:focus-visible { outline: none; background: var(--set-mark); color: var(--panel); }
.schedule-set-popover { width: 250px; }
.sb-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-pop-x { padding: 0 4px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; }
.sb-pop-when { margin: -4px 0 0; color: var(--muted); font-size: 11px; }
.sb-pop-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; max-height: 190px; overflow-y: auto; }
.sb-pop-list li { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; }
.sb-pop-list b { font-size: 12px; font-variant-numeric: tabular-nums; }
.sb-pop-list span { font-size: 12px; }
.sb-pop-list small { grid-column: 2; color: var(--muted); font-size: 10px; text-transform: capitalize; }
.sb-pop-list small[data-status="cancelled"], .sb-pop-list small[data-status="canceled"] { color: var(--red); }
/* Time on the clock that no block covers gets the same panel a booked block
   gets, at the same width and with its hours on it. A 12px rail against the
   column edge said "someone dialled here" without saying when, and an unbooked
   week was nothing but rails — the board's whole question answered in slivers.
   Dashed and green rather than solid and blue: this is a fact, not a plan, and
   unlike a block there is nothing here to drag. Labels are addressed by class,
   never by element, so they can never out-rank the fill's own positioning. */
/* Same four fills as inside a block, deliberately. The board used to run a
   second, translucent palette out here, so one afternoon on the clock was one
   green inside the plan and a different green a pixel outside it — seven
   colours to say four things. What makes this panel different is that nothing
   was promised here, and that is said by its shape: no outline of its own, just
   the green rail and the word "not booked". The dashed border it used to wear
   was a fifth texture on a board that already had too many. */
.sb-worked-lane { position: absolute; inset: 0; pointer-events: none; }
.sb-worked { position: absolute; left: 3px; right: 3px; overflow: hidden; padding: 4px 20px 4px 7px; border: 0; border-left: 3px solid var(--green); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--worked-line); }
.sb-worked-fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.sb-worked-when, .sb-worked-note { position: relative; display: block; }
.sb-worked-when { overflow: hidden; font-size: 12px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.sb-worked-note { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
/* The adherence table below carries every one of these figures in a column
   that can be read down, so a strip of the same numbers above the board was
   the page saying the same thing twice. The bar's colours are named in the
   hint sentence instead, which costs no row. */
/* Which column is money and which is not, said once under the heading rather
   than left to be inferred from two column names that sound alike. */
.adherence-key { margin-top: 3px !important; color: var(--subtle) !important; font-size: 10px !important; }
/* Clock times read down a column, so they are tabular or the digits wander. */
.schedule-adherence td { font-variant-numeric: tabular-nums; }
/* Late in or early out is the one reading here that is bad news, so it is the
   one that gets a colour. Early in and late out stay quiet: they are fine. */
.schedule-adherence td small.is-late { color: var(--red); }
/* A rep who left and came back three times gets all three stretches, wrapped
   rather than pushing every column after it off the screen. */
.schedule-adherence .desk-runs { max-width: 190px; line-height: 1.45; white-space: normal; }
.schedule-adherence .status-tag + small { margin-top: 3px; }
.sb-block-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; opacity: 0; }
.sb-block:hover .sb-block-x, .sb-block:focus-within .sb-block-x { opacity: 1; }
/* No hover on a phone, so the remove control has to be visible on its own. */
@media (hover: none) { .sb-block-x { opacity: .8; } }
.sb-handle { position: absolute; left: 0; right: 0; height: 9px; cursor: ns-resize; }
.sb-handle-start { top: -1px; }
.sb-handle-end { bottom: -1px; }

.schedule-slot-editor { position: fixed; z-index: 40; width: 240px; display: grid; gap: 10px; padding: 13px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); box-shadow: 0 18px 40px rgba(23, 32, 29, .18); }
.sb-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-editor-head strong { font-size: 12px; }
.sb-editor-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.schedule-slot-editor label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.schedule-slot-editor input, .schedule-slot-editor select { min-height: 34px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); font: inherit; font-size: 12px; }
.sb-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Closer-anchored campaign: "Closer's calendar" tab (slice 2). The grid
   itself reuses the .sb-* schedule-board classes above for visual language;
   these are the new pieces around it plus block/column modifiers. */
.cc-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cc-closer { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; }
.cc-header select { min-height: 30px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); font-size: 11px; }
.cc-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.cc-nav button { min-height: 28px; padding: 0 10px; }
.cc-closer-name { display: flex; flex-direction: column; gap: 1px; }
.cc-dry-note { color: var(--muted); font-size: 10px; font-weight: 600; }
.cc-drive { font-variant-numeric: tabular-nums; color: var(--green-dark, #1f6b4a); font-weight: 600; }
.sb-block.is-booked .cc-drive { color: var(--muted); }
.cc-gap-drive { position: absolute; left: 3px; right: 3px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.cc-gap-drive span { max-width: 100%; overflow: hidden; padding: 1px 6px; border-radius: 99px; background: var(--line); color: var(--muted); font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cc-empty { margin: 10px 12px; color: var(--muted); font-size: 12px; }
.cc-tag { display: inline-block; margin-top: 2px; padding: 1px 5px; border-radius: 99px; background: var(--amber-soft); color: var(--amber); font-size: 8px; font-weight: 700; text-transform: uppercase; }
/* Off-hours band above 8a and below 8p: reuses .sb-shut (already themed for
   both light and dark) rather than a new modifier — same "closed" meaning. */
button.sb-block.is-open { width: auto; appearance: none; font: inherit; text-align: left; background: var(--panel); border: 1.5px dashed var(--line-strong); cursor: pointer; }
button.sb-block.is-open:hover { border-color: var(--blue); }
.sb-block.is-open .sb-block-note { color: var(--muted); }
/* Same specificity as button.sb-block.is-open above (type + 2 classes) so
   the golden accent actually wins on an open-and-golden block instead of
   losing to the plain open styling. */
button.sb-block.is-golden { border: 1.5px dashed var(--green); background: var(--green-soft); }
.sb-block.is-golden .sb-block-note { color: var(--green-dark); font-weight: 700; }
/* .sb-block's base rule (schedule board drag blocks) sets cursor: grab —
   the closer calendar borrows the same class for a plain, non-draggable
   booked-appointment block and inherited that cursor by mistake. */
.sb-block.is-booked { cursor: default; }

/* Retargeted booking drawer (slice 2) — the .bk-target block above the form
   when opening a drawer with a candidate slot already chosen. */
.bk-target { padding: 12px; border-bottom: 1px solid var(--line); background: var(--green-soft); }
.bk-target-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; }
.bk-target-sub { margin: 3px 0 10px; color: var(--muted); font-size: 11px; }
.bk-alternates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 10px; }
.bk-alternates span { color: var(--muted); font-weight: 700; }
.bk-alternates button.secondary.compact { min-height: 26px; padding: 0 8px; font-size: 10px; }
.bk-other-time { display: contents; }
.bk-other-time[hidden] { display: none; }

.payroll-card .payroll-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.payroll-card .payroll-controls span { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 820px) {
  .schedule-toolbar { align-items: flex-start; }
  .schedule-board { padding: 4px 14px 14px; }
  .schedule-subhead { padding: 9px 14px; }
  .schedule-pattern { padding: 12px 14px 13px; }
  /* Three rows on a phone — the two times side by side, the days, then the
     total and the button — instead of one field per line. */
  .schedule-pattern label { flex: 1; }
  .schedule-pattern-days { flex: 1 1 100%; }
  .schedule-pattern-days button { flex: 1; width: auto; }
  .schedule-board-card .card-heading { padding: 14px 14px 12px; }
  .schedule-toolbar-fields { width: 100%; }
  .schedule-booked { margin-left: auto; }
}

.dial-live-metrics { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dial-metric-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .dial-live-metrics { display: none; } }

/* ============================================================
   DARK MODE (append-only — nothing above this line changes).
   Applied via html[data-theme="dark"]; the toggle lives in the
   account menu and index.html restores it before first paint.
   Light stays the default and is untouched.
   ============================================================ */
/* The toggle lives in the account dropdown; only the moon/sun swap is its own. */
.theme-toggle-button .theme-ico-sun { display: none; }
[data-theme="dark"] .theme-toggle-button .theme-ico-moon { display: none; }
[data-theme="dark"] .theme-toggle-button .theme-ico-sun { display: block; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8e7e6;
  --muted: #a8a39e;
  --subtle: #89837d;
  --canvas: #161413;
  --panel: #1f1d1b;
  --line: #322e2a;
  --line-strong: #45403a;
  --green: #2f9e76;
  --green-dark: #6fcfa8;
  --green-soft: #17352a;
  --blue: #8ab2e4;
  --blue-soft: #1d2836;
  --amber: #d9a04a;
  --amber-soft: #33270f;
  --mark: #4d3c10;
  --red: #c05f5f;
  --red-soft: #341b1b;
  --purple: #a48fd0;
  --purple-soft: #2a2338;
  /* dark-only helpers (referenced nowhere in the light theme) */
  --dk-field: #2a2724;
  --dk-soft: #252220;
  --dk-hover: #2e2b27;
}

/* Form fields that hardcode a white background in the light theme. */
[data-theme="dark"] .signin-card input,
[data-theme="dark"] .dial-sms-header select,
[data-theme="dark"] .dial-sms-composer textarea,
[data-theme="dark"] .followup-form input,
[data-theme="dark"] .followup-form select,
[data-theme="dark"] .followup-form textarea,
[data-theme="dark"] .result-notes textarea,
[data-theme="dark"] .pay-plan-editor input,
[data-theme="dark"] .pay-plan-editor select,
[data-theme="dark"] .pay-plan-editor textarea,
[data-theme="dark"] .account-impersonate select,
[data-theme="dark"] .phone-number-row input,
[data-theme="dark"] .lead-filter-bar select,
[data-theme="dark"] .lead-filter-bar input,
[data-theme="dark"] .mapping-list select,
[data-theme="dark"] .form-grid input,
[data-theme="dark"] .form-grid select,
[data-theme="dark"] .condition-row select,
[data-theme="dark"] .condition-row input,
[data-theme="dark"] .drawer-form input,
[data-theme="dark"] .drawer-form select,
[data-theme="dark"] .drawer-form textarea,
[data-theme="dark"] .form-field-row input,
[data-theme="dark"] .form-field-row select,
[data-theme="dark"] .campaign-list-search input,
[data-theme="dark"] .op-control input[type="number"],
[data-theme="dark"] .op-control input[type="date"],
[data-theme="dark"] .op-control input[type="password"],
[data-theme="dark"] .op-control input[type="text"],
[data-theme="dark"] .op-control select,
[data-theme="dark"] .calendar-share input,
[data-theme="dark"] .map-search input,
[data-theme="dark"] .pagination select {
  /* background-color, not the shorthand: the select chevron is a
     background-image and the shorthand would wipe it in dark mode. */
  background-color: var(--dk-field);
  color: var(--ink);
}
/* The editable lead fields and script editor keep their "work in progress"
   warm cast, just darkened. */
[data-theme="dark"] .lead-fields input:not([readonly]) { background: #282619; }
[data-theme="dark"] .script-name-input { background: #26241a; border-bottom-color: #6e5a26; }
[data-theme="dark"] .script-editor { background: #26241a; box-shadow: inset 0 0 0 2px #6e5a26; }

/* Cards, rows, and buttons that hardcode white surfaces. */
[data-theme="dark"] .phone-keypad button,
[data-theme="dark"] .phone-number-row button,
[data-theme="dark"] .pagination button,
[data-theme="dark"] .import-campaign-choice,
[data-theme="dark"] .campaign-access-option,
[data-theme="dark"] .simple-settings-grid article,
[data-theme="dark"] .integration-card,
[data-theme="dark"] .caller-number-row,
[data-theme="dark"] .caller-history-metrics article,
[data-theme="dark"] .campaign-lead-list-card,
[data-theme="dark"] .user-detail-list,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .focus-card > div:last-child > button,
[data-theme="dark"] .work-queue-item,
[data-theme="dark"] .message-thread-list > button,
[data-theme="dark"] .message-list article,
[data-theme="dark"] .dial-sms-message-list article,
[data-theme="dark"] .schedule-item.callback-item,
[data-theme="dark"] .danger-button,
[data-theme="dark"] .review-notice > span,
[data-theme="dark"] .import-advanced > .mapping-list {
  background: var(--panel);
}

/* Soft washed sections (light #f8faf9 / #fafbfa / #fbfcfb family). */
[data-theme="dark"] .phone-tools button,
[data-theme="dark"] .settings-explainer,
[data-theme="dark"] .caller-history-head,
[data-theme="dark"] .campaign-access-list,
[data-theme="dark"] .user-detail-metrics span,
[data-theme="dark"] .dial-sms-panel,
[data-theme="dark"] .message-list,
[data-theme="dark"] .dial-campaigns,
[data-theme="dark"] .dial-day,
[data-theme="dark"] .spots-card,
[data-theme="dark"] .spots-opening,
[data-theme="dark"] .spots-empty,
[data-theme="dark"] .bk-target,
[data-theme="dark"] .pay-tier-editor,
[data-theme="dark"] .pay-history,
[data-theme="dark"] .lead-drop-zone,
[data-theme="dark"] .outcome-rail.inactive,
[data-theme="dark"] .idle-selection,
[data-theme="dark"] .drop-zone,
[data-theme="dark"] .campaign-lead-list-card details,
[data-theme="dark"] .lead-profile-summary,
[data-theme="dark"] .op-footer,
[data-theme="dark"] .import-advanced,
[data-theme="dark"] .drawer-advanced,
[data-theme="dark"] .import-campaign-choice.unavailable,
[data-theme="dark"] th {
  background: var(--dk-soft);
}

/* Hover washes. */
[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .dial-status-menu button:hover,
[data-theme="dark"] .playlist-option:hover,
[data-theme="dark"] .campaign-row:hover,
[data-theme="dark"] .schedule-item.callback-item:hover,
[data-theme="dark"] .caller-number-row:hover,
[data-theme="dark"] .integration-card:hover,
[data-theme="dark"] .focus-card > div:last-child > button:hover,
[data-theme="dark"] .work-queue-item:hover,
[data-theme="dark"] button.secondary:hover,
[data-theme="dark"] .pipeline-row:hover td {
  background: var(--dk-hover);
}

/* Chrome and one-offs. */
[data-theme="dark"] .topbar { background: rgba(26, 32, 29, .96); }
[data-theme="dark"] .v2-signin { background: radial-gradient(circle at 50% 0, #18241f 0, var(--canvas) 42%); }
[data-theme="dark"] .signin-card form label { color: var(--muted); }
[data-theme="dark"] .preview-data-banner { border-bottom-color: #57431d; background: #241c0c; color: #e2c179; }
[data-theme="dark"] .backend-banner { border-bottom-color: #5a2626; background: #2a1212; color: #f0a3a3; }
[data-theme="dark"] .nav-item { color: var(--muted); }
[data-theme="dark"] .nav-ico { color: var(--subtle); }
[data-theme="dark"] button.primary { color: #fff; }
[data-theme="dark"] button.primary:disabled { border-color: #423d38; background: #2d2a27; color: #837e78; }
[data-theme="dark"] button.primary.danger-primary:hover { background: #a54e4e; }
[data-theme="dark"] button.secondary { color: #cbc8c5; }
[data-theme="dark"] button.secondary:hover { border-color: #56504a; }
[data-theme="dark"] .close-button,
[data-theme="dark"] .row-action,
[data-theme="dark"] .condition-row button,
[data-theme="dark"] .resource-state > span:first-child,
[data-theme="dark"] .status-tag,
[data-theme="dark"] .segmented { background: #2d2a27; }
[data-theme="dark"] .resource-state.error > span:first-child { background: var(--red-soft); }
[data-theme="dark"] .status-tag { color: #afaba7; }
[data-theme="dark"] .segmented button.active { background: #413c37; color: var(--ink); }
[data-theme="dark"] .segmented b { background: #413c37; }
[data-theme="dark"] .loading-spinner { border-color: #423d38; }
[data-theme="dark"] td { color: #c4c1be; }
[data-theme="dark"] .state-pulse { box-shadow: 0 0 0 4px #3a2f1a; }
[data-theme="dark"] .call-state-bar.ready .state-pulse, [data-theme="dark"] .call-state-bar.dialing .state-pulse,
[data-theme="dark"] .call-state-bar.connected .state-pulse { box-shadow: 0 0 0 4px #1b3329; }
[data-theme="dark"] .call-state-bar.ringing .state-pulse { box-shadow: 0 0 0 4px #1e2836; }
[data-theme="dark"] .call-state-bar.wrap .state-pulse { box-shadow: 0 0 0 4px #3a2f1a; }
[data-theme="dark"] .call-state-bar.issue { background: #241c0c; border-bottom-color: #57431d; }
[data-theme="dark"] .call-state-bar.incoming { background: #141f33; border-bottom-color: #2a3f66; }
[data-theme="dark"] .call-state-bar.incoming .state-pulse { box-shadow: 0 0 0 4px #1e2f4d; }
[data-theme="dark"] .call-state-bar.incoming .call-state-copy strong { color: #9dbcf0; }
[data-theme="dark"] .incoming-countdown { background: #0f1727; border-color: #2a3f66; color: #9dbcf0; }
[data-theme="dark"] .incoming-countdown.urgent { background: #3a1a1a; border-color: #7a2e2e; color: #f0a0a0; }
[data-theme="dark"] .history-summary-card, [data-theme="dark"] .history-transcript { background: var(--panel); border-color: var(--line); }
[data-theme="dark"] .call-state-bar.issue .state-pulse { box-shadow: 0 0 0 4px #3a2f1a; }
[data-theme="dark"] .dial-campaigns .playlist-option { border-bottom-color: var(--line); }
[data-theme="dark"] .phone-tools .audio-settings-tool { border-color: #2f5c46; color: #7fd0ab; }
[data-theme="dark"] .phone-tools .audio-settings-tool span { color: #7fd0ab; }
[data-theme="dark"] .phone-tools .audio-settings-tool:hover, [data-theme="dark"] .phone-tools .audio-settings-tool:focus-visible { background: #1b3d2e; }
[data-theme="dark"] .filter-chips button { border-color: #2f5c46; }
[data-theme="dark"] .drop-zone { border-color: #56504a; }
[data-theme="dark"] .import-campaign-choice:has(input:checked),
[data-theme="dark"] .campaign-access-option:has(input:checked),
[data-theme="dark"] .review-grid article.good { border-color: #2f5c46; background: var(--green-soft); }
[data-theme="dark"] .review-notice { border-color: #57431d; }
[data-theme="dark"] .campaign-danger-zone { border-color: #5c3333 !important; background: #241616; }
[data-theme="dark"] .danger-button { border-color: #5c3333; }
[data-theme="dark"] .campaign-lead-list-card.selected { border-color: #2f5c46; box-shadow: 0 0 0 1px #1b3d2e inset; }
[data-theme="dark"] .toast { border-color: #2f5c46; background: #16281f; }
[data-theme="dark"] .toast[data-type="error"] { border-color: #6b3535; background: #2e1a1a; }
[data-theme="dark"] .toast[data-type="warning"] { border-color: #57431d; background: #241c0c; }
[data-theme="dark"] .toast[data-type="info"] { border-color: #33475f; background: #1a2430; }
[data-theme="dark"] .workspace-hero { border-color: #2f4a3d; background: linear-gradient(135deg, #16241d, var(--panel)); }
[data-theme="dark"] .caller-usage-chart { background: linear-gradient(to top, rgba(70, 64, 58, .55) 1px, transparent 1px); background-size: 100% 25%; }
[data-theme="dark"] .caller-number-usage i { background: #2d2a27; }
[data-theme="dark"] .caller-reputation-note,
[data-theme="dark"] .error-report-stack pre { background: #2d2a27; }
[data-theme="dark"] .carrier-primary-bar,
[data-theme="dark"] .carrier-picker button:hover,
[data-theme="dark"] .carrier-capabilities span { background: #2d2a27; }
[data-theme="dark"] .carrier-card.is-primary { border-color: #2f5c46; box-shadow: inset 0 0 0 1px #1b3d2e; }
[data-theme="dark"] .carrier-safety-note { border-color: #2f5c46; }
[data-theme="dark"] .map-placeholder { background: #2a2723; }
[data-theme="dark"] .map-grid { background-image: linear-gradient(#3c3833 1px, transparent 1px), linear-gradient(90deg, #3c3833 1px, transparent 1px); background-size: 42px 42px; }
[data-theme="dark"] .map-grid::before, [data-theme="dark"] .map-grid::after { background: #332f2b; border-color: #4a4540; }
[data-theme="dark"] .dial-sms-message-list article.outbound { border-color: #2f5c46; }
[data-theme="dark"] .dial-sms-message-list article.failed { border-color: #6b3535; }
[data-theme="dark"] .message-list article.outbound { border-color: #2f5c46; }
[data-theme="dark"] .lead-heat-value[data-heat-level="hot"] { color: #e08585; }
[data-theme="dark"] .lead-heat[data-heat-level="hot"] input[type="range"]::-webkit-slider-thumb { border-color: #e08585; }
[data-theme="dark"] .lead-heat[data-heat-level="hot"] input[type="range"]::-moz-range-thumb { border-color: #e08585; }
[data-theme="dark"] .sb-col.is-today { background-color: rgba(76, 196, 146, .06); }
[data-theme="dark"] .sb-frame { --sb-rule: #2b332f; }
[data-theme="dark"] .sb-col.is-closed,
[data-theme="dark"] .sb-shut { background-color: rgba(0, 0, 0, .22); }
[data-theme="dark"] .sb-now { border-top-color: #e7ece9; }
[data-theme="dark"] .sb-now::before { background: #e7ece9; }
[data-theme="dark"] .sb-head.is-today { box-shadow: inset 0 -2px 0 #e7ece9; }
[data-theme="dark"] .sb-block { background: var(--plan-fill); }
/* Every fill needs a dark twin or the theme's own colours win and the block
   comes out one solid green. The ramp inverts here: on a dark panel the LOUDEST
   band is the brightest one, so talk keeps its rank by getting lighter rather
   than deeper. Red is deliberately the dullest thing on the board — a saturated
   maroon slab at the top of five blocks was the first thing the eye hit, and it
   read as the week being broken rather than as an hour going unworked. */
[data-theme="dark"] { --worked-line: rgba(76, 196, 146, .45);
  --plan-ahead: #1a2942; --plan-fill: #24395f; --plan-edge: #5f92da; --talk-fill: #1f8a63; --ready-fill: #17614c; --clock-fill: #1a7355; --wrap-fill: #9c3341; --missed-fill: transparent;
  --bar-clock: #2fdc93; --bar-wrap: #ff5964; --bar-missed: #4b7ac4;
  --set-mark: #b6ffdc; --set-mark-soft: #10402f; }
[data-theme="dark"] .sb-head-hours b { color: #8fb4e6; }
[data-theme="dark"] .sb-head-hours em { color: var(--ink); }
[data-theme="dark"] .sb-head-hours em.is-short { color: var(--ink); }
[data-theme="dark"] .schedule-subhead { border-color: #2b332f; }
[data-theme="dark"] .schedule-booked[data-tone="met"] { border-color: #2f5c46; background: rgba(76, 196, 146, .12); }
[data-theme="dark"] .schedule-booked[data-tone="met"] strong { color: #6ecfa8; }
[data-theme="dark"] .schedule-booked[data-tone="short"] { border-color: #6b5630; background: rgba(216, 167, 88, .12); }
[data-theme="dark"] .schedule-booked[data-tone="short"] strong { color: #d8a758; }
[data-theme="dark"] .sb-block.is-dragging { box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
[data-theme="dark"] .schedule-slot-editor { box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
[data-theme="dark"] .schedule-campaign-pick button.active { color: #9ee3c4; }
/* The label beside it is muted; the value the rep chose is not, in either
   theme — `inherit` here would pick the label's grey up off the wrapper. */
[data-theme="dark"] .schedule-zone select { border-color: #3a443f; background-color: #1d2621; color: var(--ink); }
[data-theme="dark"] .schedule-toolbar-fields input,
[data-theme="dark"] .schedule-toolbar-fields select,
[data-theme="dark"] .schedule-slot-editor input,
[data-theme="dark"] .schedule-slot-editor select { border-color: #3a443f; background-color: #1d2621; color: inherit; }
[data-theme="dark"] .phone-state-icon { color: #4cc492; }
[data-theme="dark"] .pipeline-filter.active { color: #fff; }
/* The light-theme chip inks are near-black against the dark surface (~2.8:1),
   so the type badges get their own lifted pair. */
[data-theme="dark"] .pipeline-kind[data-kind="appointment"] { border-color: #3f7a63; color: #6ecfa8; background: rgba(110, 207, 168, 0.12); }
[data-theme="dark"] .pipeline-kind[data-kind="callback"] { border-color: #3d6390; color: #86b8f0; background: rgba(134, 184, 240, 0.12); }

/* Create-campaign drawer: plain-language chrome. The count pill answers "will
   this campaign actually have leads?" while the files are still being picked,
   which the form used to only answer by failing on save. */
.drawer-section h3 .campaign-count-pill { margin-left: 8px; padding: 4px 9px; border-radius: 99px; background: var(--green-soft); color: var(--green-dark); font-size: 9px; font-weight: 800; vertical-align: middle; }
.campaign-count-pill[data-state="empty"] { background: #f1f1ef; color: var(--muted); }
.campaign-count-pill[data-state="loading"] { background: #f1f1ef; color: var(--muted); }
.campaign-list-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.campaign-list-toolbar .campaign-list-search { flex: 1 1 220px; }
.campaign-bulk-actions { display: flex; gap: 6px; margin: 0 0 9px; }
.link-button { min-height: 32px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--green-dark); font-size: 9px; font-weight: 800; cursor: pointer; }
.link-button:hover:not(:disabled) { border-color: #a9cdbd; background: var(--green-soft); }
.link-button:disabled { opacity: 0.5; cursor: not-allowed; }
.field-required { padding: 2px 6px; border-radius: 99px; background: var(--green-soft); color: var(--green-dark); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.field-hint { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.campaign-filter-list { max-height: 168px; }
[data-theme="dark"] .campaign-count-pill[data-state="empty"],
[data-theme="dark"] .campaign-count-pill[data-state="loading"] { background: rgba(255, 255, 255, 0.06); color: var(--muted); }
[data-theme="dark"] .link-button { border-color: var(--line); background: transparent; color: #8fd3b4; }
[data-theme="dark"] .link-button:hover:not(:disabled) { border-color: #3f7a63; background: rgba(110, 207, 168, 0.12); }
.drawer-form label .field-label { display: flex; align-items: center; gap: 6px; }

/* Leads list: dials against the campaign cap. Callbacks and booked appointments
   are exempt from that ceiling in the dial engine, so they read as such. */
.lead-dials { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lead-dials strong { color: var(--ink); }
.lead-dials small { display: block; margin-top: 2px; color: var(--subtle); }

/* ── Campaign editor ────────────────────────────────────────────────────────
   Its own screen rather than the 480px drawer. Two panes: the manifest rail is
   the campaign as it stands right now, the work area is where you assemble it.
   Palette and family are the app's own; the type scale is the opinion — counts
   are set as tabular display figures because on this screen the numbers are
   the content, and everything around them is deliberately quiet. */
body.campaign-editor-open { overflow: hidden; }
.campaign-editor { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--canvas); }
.campaign-editor[hidden] { display: none; }
.campaign-editor-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--line); }
.campaign-editor-bar h2 { margin: 1px 0 0; font-size: 19px; letter-spacing: -0.01em; }
.campaign-editor-actions { display: flex; gap: 8px; }
.campaign-editor-layout { flex: 1 1 auto; overflow-y: auto; display: grid; grid-template-columns: 316px minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1400px; width: 100%; margin: 0 auto; padding: 20px 24px 72px; }
.campaign-editor-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* The manifest — the signature element. What this campaign is made of, always
   on screen, assembled band by band as sets are added. */
.campaign-manifest { position: sticky; top: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px 16px; }
.manifest-total b { display: block; font-size: 46px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.manifest-eyebrow { margin: 6px 0 0; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.manifest-bar { display: flex; gap: 2px; height: 8px; margin: 14px 0 12px; border-radius: 999px; overflow: hidden; background: var(--canvas); }
.manifest-band { display: block; height: 100%; min-width: 3px; border-radius: 999px; animation: manifest-grow 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.manifest-band[data-band="0"] { background: var(--green); }
.manifest-band[data-band="1"] { background: var(--blue); }
.manifest-band[data-band="2"] { background: var(--purple); }
.manifest-band[data-band="3"] { background: var(--amber); }
.manifest-band-empty { width: 100%; background: var(--line); animation: none; }
@keyframes manifest-grow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }

.manifest-sets { display: flex; flex-direction: column; gap: 2px; }
.manifest-set { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.manifest-set:last-child { border-bottom: 0; }
.manifest-swatch { width: 8px; height: 8px; border-radius: 2px; align-self: center; }
.manifest-swatch[data-band="0"] { background: var(--green); }
.manifest-swatch[data-band="1"] { background: var(--blue); }
.manifest-swatch[data-band="2"] { background: var(--purple); }
.manifest-swatch[data-band="3"] { background: var(--amber); }
.manifest-set-body { display: flex; flex-direction: column; min-width: 0; }
.manifest-set-body strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.manifest-set-body small { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.manifest-set > b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.manifest-remove { padding: 0; border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.manifest-remove:hover:not(:disabled) { color: var(--red); }
.manifest-remove:disabled { opacity: 0.4; cursor: not-allowed; }
.manifest-empty { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

.manifest-facts { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
.manifest-facts > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.manifest-facts dt { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--subtle); }
.manifest-facts dd { margin: 0; font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; }
.manifest-round { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); }

/* Work area. Each section header states its own current answer, so the whole
   form reads without scrolling back up. */
.campaign-editor-section { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.campaign-editor-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.campaign-editor-section > header h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.section-answer { font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.campaign-editor-section > p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.campaign-add-leads { border-color: var(--line-strong); }

.campaign-facet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.campaign-facet-grid.campaign-facet-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campaign-facet-grid > div > strong { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--subtle); margin-bottom: 5px; }
.campaign-facet-grid .campaign-access-list { max-height: 186px; }
.campaign-builder-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.campaign-file-option { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.campaign-file-option:hover { background: var(--green-soft); }
.campaign-file-option span { display: flex; flex-direction: column; }
.campaign-file-option small { color: var(--muted); font-size: 12px; }
.campaign-access-wide { max-height: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 2px; }
.compact-form { grid-template-columns: minmax(0, 1fr); gap: 8px; }

.dial-mode-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 14px; }
.dial-mode-card { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; cursor: pointer; background: var(--panel); }
.dial-mode-card:hover { border-color: var(--line-strong); }
.dial-mode-card span { display: flex; flex-direction: column; gap: 3px; }
.dial-mode-card strong { font-size: 13.5px; }
.dial-mode-card small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.dial-mode-card:has(input:checked) { border-color: var(--green); background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green); }
.dial-mode-card:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
/* .drawer-form label stretches its inputs to the full column, which turns a
   checkbox into a large blue block. Size it back to a checkbox. */
.campaign-toggle-row { display: flex !important; align-items: flex-start; gap: 9px; }
.campaign-toggle-row input[type="checkbox"] { flex: 0 0 auto; width: 16px; min-width: 16px; height: 16px; margin: 2px 0 0; }
.campaign-toggle-row span { display: flex; flex-direction: column; gap: 2px; }
.campaign-toggle-row strong { font-size: 13.5px; }
.campaign-toggle-row small { color: var(--muted); }

@media (max-width: 1080px) {
  .campaign-editor-layout { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 56px; gap: 14px; }
  .campaign-manifest { position: static; }
  .dial-mode-cards, .campaign-facet-grid, .campaign-facet-grid.campaign-facet-pair { grid-template-columns: minmax(0, 1fr); }
  .manifest-total b { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .manifest-band { animation: none; }
}

[data-theme="dark"] .manifest-bar { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .campaign-file-option:hover { background: rgba(110, 207, 168, 0.1); }
[data-theme="dark"] .dial-mode-card:has(input:checked) { background: rgba(110, 207, 168, 0.12); }

/* The base pill is scoped to `.drawer-section h3`, so the editor header needs
   its own. Empty and counting are quiet text; a real count fills in green. */
.campaign-editor-section > header .campaign-count-pill { margin: 0; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.campaign-editor-section > header .campaign-count-pill[data-state="ready"] { background: var(--green-soft); color: var(--green-dark); }
.campaign-editor-section > header .campaign-count-pill[data-state="empty"],
.campaign-editor-section > header .campaign-count-pill[data-state="loading"] { background: none; color: var(--muted); font-weight: 500; padding-inline: 0; }
[data-theme="dark"] .campaign-editor-section > header .campaign-count-pill[data-state="empty"],
[data-theme="dark"] .campaign-editor-section > header .campaign-count-pill[data-state="loading"] { background: none; }
.facet-search { width: 100%; margin-bottom: 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); font: inherit; font-size: 12.5px; color: var(--ink); }
.facet-search:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }

/* `.wide` is scoped to `label.wide`, so a wide <div> or <p> in the form silently
   fell back to one column. In the 480px drawer the form was single-column and it
   never showed; on a full screen it does. */
.campaign-editor-section .drawer-form > .wide { grid-column: 1 / -1; }
/* Day rows: a checkbox, not a stretched block, and times sized to a time. */
.campaign-editor-section .availability-row { grid-template-columns: 18px 44px 148px 148px; justify-content: start; gap: 10px; }
.campaign-editor-section .availability-row input[type="checkbox"] { width: 16px; min-width: 16px; height: 16px; margin: 0; }
.campaign-editor-section .availability-row span { font-size: 13px; color: var(--muted); }
.campaign-editor-section .availability-row input[type="checkbox"],
.campaign-toggle-row input[type="checkbox"] { min-height: 16px; }

/* Before a file is picked there are no facets to show, and three identical
   "pick a file" boxes just repeat themselves. Keep the column labels so the
   filters are visibly available, and say it once underneath. */
.campaign-facet-grid[data-state="empty"] { display: none; }
.campaign-facet-hint { display: none; margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.campaign-facet-grid[data-state="empty"] + .campaign-facet-hint { display: block; }

/* Per-file match count. The header pill totals the whole draft; this says which
   ticked file the total is coming from — and, more usefully, which one is
   contributing nothing. Only ticked rows carry it. */
.campaign-file-option .file-match { margin-left: auto; align-self: center; flex: 0 0 auto; padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.campaign-file-option .file-match[data-state="idle"] { display: none; }
.campaign-file-option .file-match[data-state="loading"],
.campaign-file-option .file-match[data-state="unknown"] { color: var(--subtle); font-weight: 500; }
.campaign-file-option .file-match[data-state="some"],
.campaign-file-option .file-match[data-state="all"] { background: var(--green-soft); color: var(--green-dark); }
.campaign-file-option .file-match[data-state="all"] { background: none; color: var(--muted); font-weight: 600; padding-inline: 0; }
.campaign-file-option .file-match[data-state="none"] { background: var(--red-soft); color: var(--red); }
[data-theme="dark"] .campaign-file-option .file-match[data-state="some"] { background: rgba(110, 207, 168, 0.14); color: #8fdcbb; }
[data-theme="dark"] .campaign-file-option .file-match[data-state="none"] { background: rgba(214, 122, 122, 0.14); color: #e29a9a; }

/* The lead total moved out of a 316px rail and into the top bar, so the work
   gets the whole width and the number sits next to the button that saves it. */
.campaign-editor-layout { grid-template-columns: minmax(0, 1fr); max-width: 1120px; }
.campaign-manifest { display: none; }
.campaign-editor-heading { min-width: 0; }
.campaign-editor-round { margin: 3px 0 0; font-size: 11.5px; color: var(--muted); }
.campaign-editor-round[hidden] { display: none; }
.campaign-editor-total { margin: 0 0 0 auto; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.campaign-editor-total b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.campaign-editor-total span { font-size: 12.5px; color: var(--muted); }
/* Added sets sit under the button that adds them. */
.manifest-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.manifest-bar { margin: 0 0 10px; }
.campaign-editor-section .manifest-set { padding: 9px 0; }
@media (max-width: 900px) {
  .campaign-editor-bar { flex-wrap: wrap; }
  .campaign-editor-total { margin-left: 0; order: 3; width: 100%; }
  .campaign-editor-actions { margin-left: auto; }
}

/* Checkbox lists inherit 10px/8px from the 480px drawer, which is unreadable on
   a full screen — a phone number and the place it calls from are the point of
   that row. Covers reps, numbers, facets, sources, ages, scripts and coaches. */
.campaign-editor-section .campaign-access-option { min-height: 42px; padding: 8px 10px; }
.campaign-editor-section .campaign-access-option strong { font-size: 13px; font-weight: 600; }
.campaign-editor-section .campaign-access-option small { font-size: 11.5px; font-weight: 500; }
.campaign-editor-section .campaign-access-option strong { font-variant-numeric: tabular-nums; }

/* A control switched off because the backend cannot store it yet. Stated in the
   form rather than removed silently, so it is obvious it is coming back. */
.field-pending { margin: 0; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 9px; background: var(--canvas); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
[data-theme="dark"] .field-pending { background: rgba(255, 255, 255, 0.03); }

/* The coach tab shipped after the dark pass and hardcoded its light surfaces,
   so in dark mode it was a near-white panel with near-white text — the one
   thing a rep must read mid-call. Dark twins for every hardcoded value. */
[data-theme="dark"] .coach-workspace { background: #1b1f1c; }
[data-theme="dark"] .live-coach-panel { border-color: #2f4636; background: linear-gradient(135deg, #1d2a20, #1a201b); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
[data-theme="dark"] .live-coach-frame { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .live-coach-feedback button { background: var(--panel); }

/* ---------------------------------------------------------------------------
   Live floor board
   A manager standing behind the reps sees who is on a call, who is waiting,
   and who is not dialing at all — in one look, without reading. That is what
   the colour carries here: green is talking, blue is in the queue waiting for
   the dialler, amber is wrap-up, and anything grey is not on the floor. Every
   value is a theme var, so the board follows the dark toggle with no twin.
   --------------------------------------------------------------------------- */
.floor-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.floor-toolbar small { margin-right: auto; color: var(--muted); font-size: 11px; }
.floor-live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); color: var(--ink); font-size: 11px; font-weight: 700; }
.floor-live-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--green); animation: floor-pulse 1.8s ease-in-out infinite; }
.floor-live.paused .floor-live-dot { background: var(--subtle); animation: none; }
@keyframes floor-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .floor-live-dot { animation: none; } }

.floor-counters { display: grid; grid-template-columns: repeat(8, minmax(96px, 1fr)); gap: 10px; margin-bottom: 20px; }
.floor-counter { padding: 14px 14px 12px; border: 1px solid var(--line); border-top: 3px solid var(--line-strong); border-radius: 12px; background: var(--panel); }
.floor-counter strong { display: block; margin-bottom: 3px; font-size: 26px; line-height: 1.1; }
.floor-counter span { color: var(--muted); font-size: 11px; line-height: 1.3; }
.floor-counter.floor-on_call { border-top-color: var(--green); }
.floor-counter.floor-waiting, .floor-counter.floor-ready { border-top-color: var(--blue); }
.floor-counter.floor-wrap { border-top-color: var(--amber); }
.floor-counter.floor-lines { border-top-color: var(--green); background: var(--green-soft); }
.floor-counter.floor-sessions { border-top-color: var(--blue); background: var(--blue-soft); }
@media (max-width: 1180px) { .floor-counters { grid-template-columns: repeat(4, minmax(96px, 1fr)); } }
@media (max-width: 640px) { .floor-counters { grid-template-columns: repeat(2, minmax(96px, 1fr)); } }

.floor-block { margin-bottom: 22px; }
.floor-block-heading { margin-bottom: 10px; }
.floor-block-heading h2 { margin: 0 0 2px; font-size: 14px; }
.floor-block-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.floor-empty { padding: 20px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--panel); color: var(--muted); font-size: 12px; }

.floor-sessions { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.floor-session { padding: 16px; border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 12px; background: var(--panel); }
.floor-session.dialing { border-left-color: var(--green); }
.floor-session.blocked { border-left-color: var(--amber); }
.floor-session.unknown { border-left-color: var(--red); }
.floor-session header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.floor-session header strong { display: block; font-size: 14px; }
.floor-session header small { color: var(--muted); font-size: 11px; }
.floor-session-message { margin: 0 0 10px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.floor-session-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.floor-session-stats span { display: block; }
.floor-session-stats small { display: block; min-height: 25px; margin-bottom: 2px; color: var(--muted); font-size: 10px; line-height: 1.25; }
.floor-session-stats strong { font-size: 15px; }
.floor-session-reps { margin: 10px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.floor-session-error { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--red-soft); color: var(--red); font-size: 11.5px; }

.floor-pill { flex-shrink: 0; padding: 4px 10px; border-radius: 99px; background: var(--canvas); color: var(--muted); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.floor-pill.dialing, .floor-pill.on_call { background: var(--green-soft); color: var(--green); }
.floor-pill.blocked, .floor-pill.wrap { background: var(--amber-soft); color: var(--amber); }
.floor-pill.unknown { background: var(--red-soft); color: var(--red); }
.floor-pill.waiting, .floor-pill.ready { background: var(--blue-soft); color: var(--blue); }

.floor-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.floor-agent { display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.floor-agent.idle { opacity: .62; }
.floor-agent header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.floor-agent header div { margin-right: auto; min-width: 0; }
.floor-agent header strong { display: block; font-size: 13.5px; }
.floor-agent header small { display: block; overflow: hidden; color: var(--muted); font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.floor-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 99px; background: var(--subtle); }
.floor-status-on_call .floor-dot { background: var(--green); animation: floor-pulse 1.8s ease-in-out infinite; }
.floor-status-waiting .floor-dot, .floor-status-ready .floor-dot { background: var(--blue); }
.floor-status-wrap .floor-dot { background: var(--amber); }
.floor-agent-session { padding: 9px 10px; border-radius: 9px; background: var(--canvas); }
.floor-agent-session strong { display: block; font-size: 12px; }
.floor-agent-session small { color: var(--muted); font-size: 10.5px; }
.floor-agent-call { margin-top: 8px; padding: 9px 10px; border-radius: 9px; background: var(--green-soft); }
.floor-agent-call-head { display: block; margin-bottom: 2px; color: var(--green); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.floor-agent-call strong { display: block; font-size: 12.5px; }
.floor-agent-call small { color: var(--muted); font-size: 10.5px; }
.floor-agent-warning { margin: 8px 0 0; padding: 8px 10px; border-radius: 9px; background: var(--red-soft); color: var(--red); font-size: 11px; line-height: 1.4; }
.floor-agent-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.floor-agent-stats small { display: block; margin-bottom: 1px; color: var(--muted); font-size: 9.5px; line-height: 1.25; }
.floor-agent-stats strong { font-size: 13px; }

/* Saving a call. The recording control has to be an anchor (a download needs
   one), so it borrows the secondary button's look to sit level with them. */
.drawer-download {
  display: inline-flex; align-items: center; min-height: 40px; margin-top: 10px;
  padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--panel); color: #46514d; font-weight: 700; font-size: 13px;
  text-decoration: none; cursor: pointer;
}
.drawer-download:hover { border-color: #aebbb6; background: #f9faf9; }
[data-theme="dark"] .drawer-download { color: #cbc8c5; }
[data-theme="dark"] .drawer-download:hover { border-color: #56504a; background: var(--dk-hover); }

/* Closer-anchored campaign: dial pins + closer availability (slice 4). */
.pin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; padding: 14px 18px; }
.pin-card { display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.pin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pin-card-head strong { font-size: 13.5px; }
.pin-address { color: var(--muted); font-size: 10.5px; }
.pin-progress { height: 6px; margin: 8px 0 2px; border-radius: 99px; overflow: hidden; background: var(--canvas); }
.pin-progress i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.pin-progress-label, .pin-meta { margin: 0; color: var(--muted); font-size: 10.5px; }
/* This pin widened as far as it is allowed to and found nothing new -- a
   state a manager has to notice, so it reads warmer than the meta lines. */
.pin-exhausted { margin: 0; color: var(--warn, #b45309); font-size: 10.5px; font-weight: 600; }
.pin-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pin-recommend { margin: 0 0 2px; font-size: 13px; font-weight: 700; }
.pin-price-line { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.pin-free-pool { margin: 0 0 10px; color: var(--green); font-size: 10.5px; font-weight: 700; }
.pin-availability-card { border-top: 1px solid var(--line); }
.av-list { display: grid; gap: 8px; padding: 0 18px 16px; }
.av-row { display: grid; grid-template-columns: minmax(120px, 1fr) auto auto; align-items: center; gap: 10px 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.av-name { font-size: 12.5px; }
.av-off-until { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10.5px; font-weight: 700; }
.av-off-until select, .av-off-until input { min-height: 30px; }
@media (max-width: 720px) { .av-row { grid-template-columns: 1fr; } }

.script-coach-note { display: block; margin: 4px 0 0; color: var(--muted); font-size: 10.5px; }
.script-coach-note:empty { display: none; }

.campaign-access-list .campaign-access-option span small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.script-default-warning { color: var(--warn, #b45309); }
/* ---- Confirmations queue -------------------------------------------------
   Rows carry every action inline. The whole point of this screen is that a
   setter never has to open a drawer to act on what they are looking at. */
.confirm-count {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 9px; background: #d7263d; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.confirm-priority { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: .85; }
.confirm-priority input { width: auto; margin: 0; }

.confirm-group-label {
  padding: 14px 18px 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; opacity: .55;
}
.confirm-row {
  display: grid; gap: 14px; align-items: center; padding: 14px 18px;
  grid-template-columns: 132px minmax(180px, 1.4fr) minmax(120px, 1fr) auto;
  border-top: 1px solid var(--border, rgba(128,128,128,.18));
}
.confirm-row:hover { background: rgba(128,128,128,.05); }
.confirm-row.is-passed { background: rgba(215,38,61,.06); }
.confirm-when { font-weight: 700; }
.confirm-when small,
.confirm-who small,
.confirm-meta small { display: block; font-weight: 400; opacity: .6; font-size: 12px; margin-top: 2px; }
.confirm-meta .confirm-cadence { opacity: .75; }
.confirm-name { background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--accent, #2f6fed); cursor: pointer; text-align: left; }
.confirm-name:hover { text-decoration: underline; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.confirm-actions button { white-space: nowrap; }
.confirm-actions .confirm-yes { background: #1c8b4b; border-color: #1c8b4b; color: #fff; }
.confirm-attempts { font-size: 12px; opacity: .7; }

@media (max-width: 780px) {
  .confirm-row { grid-template-columns: 1fr; gap: 8px; }
  .confirm-actions { justify-content: flex-start; }
}

/* ============================================================
   PHONE + TABLET DIAL SCREEN (append-only — nothing above this
   line changes). Jarren 2026-09-02.

   The dial screen is three desktop columns. Stacked on a small
   screen the rep meets the disposition buttons first, a wall of
   script second, and the homeowner's name about three screens
   down. Below 1024px this re-presents the same markup: the lead
   on top, the rails behind tabs on a phone or side by side on a
   tablet, and one primary action pinned to the bottom.

   Nothing here is new behaviour — .dial-compact and
   .dial-actionbar are proxies that click the desktop controls
   (see phone-shell.js), so every handler still lives in app.js.
   ============================================================ */

.dial-compact { display: none; }
.dial-actionbar { display: none; }

@media (max-width: 1024px) {
  :root { --topbar-h: 78px; --dial-bar-h: 74px; }

  /* --- the status strip: the existing bar, cut to what fits ---
     #callStateMessage and the live metrics are desk furniture. The
     dot, the state word and the one action button are not. */
  .call-state-bar {
    position: sticky; top: var(--topbar-h); z-index: 13;
    min-height: 44px; height: 44px; align-items: center; gap: 9px;
    padding: 0 14px; margin: -20px -20px 0; background: var(--panel);
    border-bottom: 1px solid var(--line); flex-wrap: nowrap; overflow: hidden;
  }
  .call-state-bar #callStateMessage,
  .call-state-bar .dial-live-metrics { display: none; }
  .call-state-bar .call-state-copy { min-width: 0; display: flex; align-items: center; gap: 8px; }
  .call-state-bar #callStateLabel { font-size: 13px; white-space: nowrap; }
  .call-state-bar .dial-toolbar { margin-left: auto; }
  /* app.js writes the current STATE into this button ("Paused", "Dialing",
     "On call"), which the dot and label beside it already say. Down here the
     action bar owns Ready/Pause, so the only job left for this button is
     opening the status menu — Break and Select campaigns live nowhere else.
     Relabelled in CSS so app.js keeps owning the text it writes. */
  .call-state-bar #primaryDialAction { min-height: 32px; font-size: 0; padding-inline: 14px; }
  .call-state-bar #primaryDialAction::after { content: "Menu"; font-size: 12px; font-weight: 700; }
  .call-state-bar #primaryDialAction[data-reconnect-audio="true"]::after { content: "Reconnect"; }

  /* --- the lead card --- */
  .dial-compact {
    display: block; position: sticky; top: calc(var(--topbar-h) + 44px); z-index: 12;
    margin-inline: -20px; background: var(--panel); border-bottom: 1px solid var(--line);
  }
  .dc-lead {
    display: block; width: 100%; text-align: left; border: 0; background: none;
    padding: 10px 16px 11px; cursor: pointer; font: inherit; color: inherit;
  }
  .dc-lead-top { display: flex; align-items: baseline; gap: 8px; }
  .dc-lead-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; letter-spacing: -.01em; }
  .dc-lead.empty .dc-lead-top strong { font-size: 15px; color: var(--subtle); }
  /* Wrap-up prints "Call 0:10 · Wrap 0:03" here, so the name yields first. */
  .dc-timer { flex: none; margin-left: auto; padding-left: 8px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
  .dc-chev { color: var(--subtle); font-size: 18px; line-height: 1; }
  .dc-lead.empty .dc-chev { display: none; }
  .dc-lead-line { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
  .dc-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .dc-fact {
    padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px;
    background: var(--canvas); font-size: 12px; font-weight: 600;
  }
  .dc-fact.hot { border-color: #ecd9b4; background: var(--amber-soft); color: var(--amber); }
  .dc-tabs { display: none; }

  /* --- two columns, and the floating dock stops eating the width --- */
  .dial-workspace,
  .dial-workspace[data-call-state="ringing"],
  .dial-workspace[data-call-state="connected"],
  .dial-workspace[data-call-state="wrap"] {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    padding-right: 0;
    padding-bottom: calc(var(--dial-bar-h) + 14px);
    min-height: 0;
  }
  .outcome-rail { max-height: none; }
  /* Thumb-sized results. The desk squeezes ten of these into a 188px rail at
     9px, which is a mouse target — a tablet has no mouse either. */
  .result-buttons { gap: 8px; padding: 12px; }
  .result-buttons button { min-height: 52px; padding: 9px 10px; border-radius: 11px; font-size: 13px; }
  .outcome-rail > .primary { min-height: 48px; font-size: 14px; }
  .followup-form, .result-notes { font-size: 13px; }
  .script-document { font-size: 15px; line-height: 1.6; }
  .conversation-panel { min-height: 420px; }
  /* The rail's own header repeats the card above it; the fields do not. */
  .dial-workspace[data-call-state="connected"] .lead-rail,
  .dial-workspace[data-call-state="wrap"] .lead-rail {
    /* !important only to answer the !important at the 820px breakpoint, which
       un-spans both rails for the old single-column stack. */
    grid-column: 1 / -1 !important;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
  .lead-rail .lead-head { display: none; }
  .lead-rail .lead-section { border-right: 1px solid var(--line); border-bottom: 0; }
  .lead-rail .lead-actions { grid-column: 1 / -1; }

  /* --- one action, pinned --- */
  .dial-actionbar {
    display: block; position: fixed; z-index: 17;
    left: var(--rail); right: 0; bottom: 0;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
    background: var(--panel); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(27,41,35,.07);
  }
  .dab-big {
    width: 100%; min-height: 52px; border: 0; border-radius: 13px;
    background: var(--green); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  }
  .dab-big.amber { background: var(--amber); }
  .dab-big.ghost { background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink); }
  .dab-big:disabled { background: #c3cbc8; color: #fff; cursor: default; }
  .dab-row { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 8px; }
  .dab-live {
    min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 1px solid var(--line-strong); border-radius: 13px; background: var(--panel);
    font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer;
  }
  .dab-live span { font-size: 16px; line-height: 1; }
  .dab-live.on { border-color: #ecd9b4; background: var(--amber-soft); color: var(--amber); }
  .dab-live.end { border-color: var(--red); background: var(--red); color: #fff; }

  /* --- the dock becomes a keypad sheet, opened from the bar --- */
  .phone-dock { display: none; }
  body.keypad-sheet-open .phone-dock {
    display: block; left: var(--rail); right: 0; width: auto;
    bottom: calc(var(--dial-bar-h) + env(safe-area-inset-bottom, 0px));
    max-height: 62vh; border-radius: 16px 16px 0 0; border-bottom: 0;
  }
  body.keypad-sheet-open .phone-dock .phone-body { max-height: 62vh; overflow-y: auto; padding-top: 16px; }
  /* As a sheet the dock only has to be a keypad. Its header repeats the status
     strip, and its Mute / Keypad / End call repeat the action bar an inch
     below it — so the sheet keeps the number row, the digits, and the two
     tools that live nowhere else. */
  body.keypad-sheet-open .phone-dock .phone-header-row,
  body.keypad-sheet-open .phone-dock #endCallButton,
  body.keypad-sheet-open .phone-dock [data-phone-tool="mute"],
  body.keypad-sheet-open .phone-dock [data-phone-tool="keypad"] { display: none; }
  body.keypad-sheet-open .phone-dock .phone-body::before {
    content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 99px; background: var(--line-strong);
  }
  body.keypad-sheet-open .phone-dock .phone-body { position: relative; }

  .main-area { padding-bottom: calc(var(--dial-bar-h) + 24px); }
}

/* --- phone: one rail at a time, behind the tabs --- */
@media (max-width: 520px) {
  :root { --topbar-h: 60px; }

  .call-state-bar { margin: -20px -12px 0; padding-inline: 12px; }
  .dial-compact { margin-inline: -12px; }
  .dc-lead { padding-inline: 14px; }

  .dc-tabs { display: flex; padding: 0 6px; border-top: 1px solid var(--line); }
  .dc-tabs button {
    flex: 1; min-height: 42px; padding: 0 4px; border: 0; border-bottom: 2px solid transparent;
    background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
  }
  .dc-tabs button.active { color: var(--green); border-bottom-color: var(--green); }

  .dial-workspace,
  .dial-workspace[data-call-state="ringing"],
  .dial-workspace[data-call-state="connected"],
  .dial-workspace[data-call-state="wrap"] {
    grid-template-columns: 1fr;
    padding-bottom: calc(var(--dial-bar-h) + 76px + env(safe-area-inset-bottom, 0px));
  }
  /* The tab picks the rail. Each is shown unconditionally when picked —
     the desktop hides the lead rail until a call connects, which on a
     phone would leave the Info tab blank. */
  .dial-workspace[data-dial-tab] > .outcome-rail,
  .dial-workspace[data-dial-tab] > .conversation-panel,
  .dial-workspace[data-dial-tab] > .lead-rail { display: none; }
  .dial-workspace[data-dial-tab="result"] > .outcome-rail { display: block; }
  .dial-workspace[data-dial-tab="script"] > .conversation-panel,
  .dial-workspace[data-dial-tab="text"] > .conversation-panel { display: block; }
  .dial-workspace[data-dial-tab="info"] > .lead-rail { display: block; }
  .lead-rail .lead-section { border-right: 0; border-bottom: 1px solid var(--line); }

  /* Text has its own tab, so the panel's own strip carries only the
     tools that do not: coach, transcript, history, maps. */
  /* Two pill rows is one more than a phone can spare, so both are cut to the
     height of the text: the top row is which tool, the second is which script. */
  .workspace-tabs { min-height: 34px; padding-inline: 10px; }
  .workspace-tabs button { min-height: 34px; font-size: 12px; }
  .script-tabs { padding: 6px 10px; }
  /* The panel clips and the document scrolls inside itself on the desk, which
     on a phone means a box that scrolls within a page that also scrolls, ending
     below the fold. Down here the document just grows and the page carries it. */
  .conversation-panel { overflow: visible; min-height: 0; }
  .workspace-content .script-document { max-height: none; overflow: visible; }
  .workspace-tabs [data-workspace-tab="text"] { display: none; }
  .dial-workspace[data-dial-tab="text"] .workspace-tabs { display: none; }
  /* My day sits at the foot of the Result tab — worth a glance between
     calls, never in the way of one. */
  .dial-day { padding: 12px 12px 16px; }

  /* Sits flush on top of the bottom icon nav, which carries the safe-area
     inset itself — so the bar clears the home indicator without adding it twice. */
  .dial-actionbar { left: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: 9px; }
  body.keypad-sheet-open .phone-dock { left: 0; bottom: calc(var(--dial-bar-h) + 56px + env(safe-area-inset-bottom, 0px)); }
  .main-area { padding-bottom: calc(76px + var(--dial-bar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* Dark twins for everything this block introduces. */
[data-theme="dark"] .dial-compact,
[data-theme="dark"] .dial-actionbar { background: var(--dk-panel, #151b18); }
[data-theme="dark"] .dc-fact { background: var(--dk-field, #1d2621); border-color: #3a443f; }
/* :not() so the two buttons that carry a meaning in their colour keep it —
   End call stays red and a held Mute/Keypad stays amber in both themes. */
[data-theme="dark"] .dab-live:not(.end):not(.on) { background: var(--dk-field, #1d2621); border-color: #3a443f; color: var(--ink); }
[data-theme="dark"] .dab-big.ghost { background: var(--dk-field, #1d2621); border-color: #3a443f; color: var(--ink); }

/* ============================================================
   NATIVE CONTROLS (append-only). Safari on iPad/iPhone draws
   checkboxes, radios, selects, sliders and date faces with its
   own chrome, so the same drawer looked like a different app on
   a rep's tablet than on the desk. Everything below draws the
   control itself out of the board's own tokens, so one set of
   pixels ships to every device. The native popup, wheel and
   date picker are untouched — only the closed face is ours.

   Specificity is deliberate. The drawing rules sit at one class
   worth of weight (an [attr] selector) so they beat the generic
   `.drawer-form input { width: 100% }` family that was
   stretching checkboxes into blocks, while the plain-default
   rules are wrapped in :where() at zero weight so a component
   that already chose a border or a height keeps it.
   ============================================================ */
:root {
  --field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2368736f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --field-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-5.9' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --field-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  /* Same glyph, lifted off the dark field. */
  --field-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a8a39e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Checkboxes and radios ------------------------------------ */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  border: 1px solid var(--line-strong);
  background-color: var(--panel);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  color: var(--ink);
  cursor: pointer;
  vertical-align: middle;
  transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease;
}
input[type="checkbox"] { border-radius: 5px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--green); }
input[type="checkbox"]:checked, input[type="radio"]:checked,
input[type="checkbox"]:indeterminate {
  border-color: var(--green);
  background-color: var(--green);
}
input[type="checkbox"]:checked { background-image: var(--field-check); }
input[type="checkbox"]:indeterminate { background-image: var(--field-dash); }
/* The radio's dot is an inset ring rather than an image, so it tracks the
   panel colour through a theme switch without a second data URI. */
input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--panel); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
  border-color: var(--line);
  background-color: var(--canvas);
  cursor: default;
  opacity: .6;
}
input[type="checkbox"]:disabled:checked, input[type="radio"]:disabled:checked {
  background-color: var(--subtle);
  border-color: var(--subtle);
}
/* This one asked for `width: auto` back when the box was native; with a drawn
   box that collapses it to nothing. */
.drawer-form label.drawer-check input[type="checkbox"] { width: 16px; min-height: 16px; }

/* --- Select faces --------------------------------------------- */
/* Popup/wheel behaviour is the platform's; only the closed face is redrawn. */
select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: var(--field-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
  cursor: pointer;
}
:where(select) {
  min-height: 34px;
  padding-left: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background-color: var(--panel);
  color: var(--ink);
  transition: border-color .14s ease;
}
:where(select):hover { border-color: var(--line-strong); }
select:disabled { cursor: default; opacity: .6; }
/* Pagination sizes its select to 30px to sit level with its buttons; the
   default min-height above would push it past them. */
.pagination select { min-height: 0; }

/* --- Date and time faces -------------------------------------- */
/* Left-aligned, same box as a text input. The pickers stay native. */
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="month"], input[type="week"] {
  appearance: none;
  -webkit-appearance: none;
}
:where(input[type="date"], input[type="time"], input[type="datetime-local"],
       input[type="month"], input[type="week"]) {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background-color: var(--panel);
  color: var(--ink);
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value,
input[type="week"]::-webkit-date-and-time-value {
  /* iOS centres the value inside the field and desktop does not. */
  margin: 0;
  min-height: 1.25em;
  text-align: left;
}
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit { padding: 0; }
input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* --- Range sliders -------------------------------------------- */
/* The element's own background is the track (the heat slider already worked
   this way), so the webkit/moz track pseudo-elements stay out of the paint
   and one rule covers every engine. */
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  height: 6px;
  /* The thumb is taller than the track and overhangs it, so the element
     carries the room for it rather than lapping onto its neighbours. */
  margin: 7px 0;
  border-radius: 999px;
  background-color: var(--line-strong);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 1px 3px rgba(15, 30, 20, .35);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 1px 3px rgba(15, 30, 20, .35);
  cursor: pointer;
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }
/* The heat slider paints a cold-to-hot gradient on the element itself; Firefox
   would otherwise draw an opaque track over it. */
.lead-heat-slider input[type="range"]::-moz-range-track { background: transparent; }
input[type="range"]:disabled { cursor: default; opacity: .6; }

/* --- File picker ---------------------------------------------- */
input[type="file"] { max-width: 100%; cursor: pointer; }
input[type="file"]::-webkit-file-upload-button {
  margin-right: 10px;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: 10px;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* --- Dark theme surfaces for the drawn controls ---------------- */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] { background-color: var(--dk-field); }
[data-theme="dark"] input[type="checkbox"]:checked,
[data-theme="dark"] input[type="radio"]:checked,
[data-theme="dark"] input[type="checkbox"]:indeterminate { background-color: var(--green); }
[data-theme="dark"] input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--dk-field); }
[data-theme="dark"] input[type="checkbox"]:disabled,
[data-theme="dark"] input[type="radio"]:disabled { background-color: var(--dk-soft); }
[data-theme="dark"] input[type="range"] { background-color: var(--line-strong); }
[data-theme="dark"] input[type="range"]::-webkit-slider-thumb,
[data-theme="dark"] input[type="range"]::-moz-range-thumb { border-color: var(--panel); }
[data-theme="dark"] input[type="file"]::-webkit-file-upload-button { background: var(--dk-field); }
[data-theme="dark"] input[type="file"]::file-selector-button { background: var(--dk-field); }

/* One action sheet for a lead or an appointment, mounted on every screen the
   object appears on. The "…" button opens it; the sheet itself is the ordinary
   drawer, so it inherits the drawer's own look. */
.lead-action-open { min-width: 34px; padding-left: 8px; padding-right: 8px; line-height: 1; }
.lead-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
.lead-action-grid button { width: 100%; }
.lead-action-summary p { margin: 0; line-height: 1.5; }
.lead-action-panel h3 { margin: 0 0 10px; font-size: 12px; }
.lead-action-panel [data-lead-action-save] { margin-top: 10px; }
/* The callback row keeps its own full-width button; the actions button rides
   beside it rather than inside it, which HTML does not allow. */
.callback-row { display: flex; align-items: center; gap: 8px; padding-right: 14px; border-bottom: 1px solid var(--line); }
.callback-row:last-child { border-bottom: 0; }
.callback-row .schedule-item.callback-item { flex: 1; border-bottom: 0; }
.sb-block.is-booked { cursor: pointer; }