/* Layout: one long scrolling list of full-width lead rows under a thin sticky scoreboard. The row is the whole product. */
:root {
  --bg: #F3F0EB; --raised: #FFFFFF; --sunken: #E8E3DB; --ink: #201E1F; --muted: #5F5A55;
  --line: #DCD6CC; --line-strong: #8F8880;
  --volt: #C4E33C; --volt-ink: #4A5A06; --heat: #FE572A; --heat-ink: #B23211; --lean: #685BC7; --on-color: #201E1F;
  --t-talk: #EFEDF9; --t-appt: #FFE4D2; --t-sold: #E3F08F; --t-warm: #F7ECDD; --t-dnc: #FFE3DA; --t-bad: #E8E3DB;
  --c-warm: #E0B46F; --shadow: 0 1px 2px rgba(32,30,31,.08);
  --band: #201E1F; --band-ink: #F3F0EB; --band-muted: #B5AEA7; --band-line: rgba(243,240,235,.18);
  --display: "Bebas Neue", "Arial Narrow", sans-serif;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #201E1F; --raised: #2A2829; --sunken: #171516; --ink: #F3F0EB; --muted: #B5AEA7;
  --line: #3A3738; --line-strong: #77716C; --volt-ink: #C4E33C; --heat-ink: #FF8A68;
  --t-talk: #2F2C44; --t-appt: #4A2B1D; --t-sold: #454F17; --t-warm: #3B3226; --t-dnc: #4A241B; --t-bad: #171516;
  --band: #171516; --shadow: none; color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #201E1F; --raised: #2A2829; --sunken: #171516; --ink: #F3F0EB; --muted: #B5AEA7;
  --line: #3A3738; --line-strong: #77716C; --volt-ink: #C4E33C; --heat-ink: #FF8A68;
  --t-talk: #2F2C44; --t-appt: #4A2B1D; --t-sold: #454F17; --t-warm: #3B3226; --t-dnc: #4A241B; --t-bad: #171516;
  --band: #171516; --shadow: none; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--sans); padding-bottom: 72px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--band); }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--lean); outline-offset: 2px; }
.wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); max-width: 1500px; margin: 0 auto; }
.meta { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--band); color: var(--band-ink); overflow: hidden; border-bottom: 1px solid var(--band-line); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; padding-block: 12px; }
.logo { height: 40px; width: auto; display: block; flex: none; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 0; flex: 1; min-width: 0; }
.stat { padding: 0 22px; border-left: 1px solid var(--band-line); }
.stat b { display: block; font: 600 22px/1.15 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .meta { color: var(--band-muted); white-space: nowrap; }
.stat.key b { color: var(--volt); }
.stat.key.late b { color: var(--heat); }
.seg { display: inline-flex; background: rgba(243,240,235,.1); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: none; padding: 5px 12px; border-radius: 999px; font-weight: 500; font-size: 13px; color: var(--band-ink); }
.seg button[aria-pressed="true"] { background: var(--band-ink); color: #201E1F; }

.stale { margin: 10px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--t-dnc); border: 1px solid var(--heat); color: var(--ink); font-weight: 600; }
.stale[hidden] { display: none; }
.sample { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding-block: 10px; margin: 0; color: var(--muted); font-size: 13px; }
.keys { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
kbd { background: var(--raised); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; font: 500 11px/1.5 var(--mono); color: var(--ink); }

.panel { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; display: grid; gap: 12px; box-shadow: var(--shadow); }
.panelhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.panelhead h2 { margin: 0; font: 400 30px/1 var(--display); letter-spacing: .01em; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
.f { display: grid; gap: 4px; min-width: 0; }
.f select, .f input[type=search], .f input[type=date], .f input[type=text], .f input[type=tel], .f input[type=email] { background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 8px; max-width: 100%; }
.f input[type=search] { width: 190px; }
.f input[type=number] { width: 84px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 8px; }
.pills { display: flex; flex-wrap: wrap; gap: 5px; }
.pills button { border: 1px solid var(--line-strong); background: var(--raised); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 500; }
.pills button:hover { background: var(--sunken); }
.pills button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.check { display: flex; align-items: center; gap: 6px; padding-bottom: 7px; }
.ghost { background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 14px; font-weight: 500; }
.ghost:hover { background: var(--sunken); }
.spacer { flex: 1; }
.count { padding-bottom: 7px; font-variant-numeric: tabular-nums; color: var(--muted); }

.drawer { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; display: grid; gap: 10px; }
.drawer h2 { margin: 0; font-size: 15px; }
.drawer p { margin: 0; max-width: 72ch; }
.map { display: flex; flex-wrap: wrap; gap: 6px; }
.map span { background: var(--sunken); border-radius: 6px; padding: 3px 8px; font: 400 12px var(--mono); }
.newlead { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; align-items: end; }
.newlead input, .newlead select { width: 100%; }
.save { border: 0; border-radius: 999px; padding: 8px 18px; background: var(--ink); color: var(--bg); font-weight: 600; }

.list { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(180px, 1.15fr) 214px minmax(190px, 1.1fr) minmax(170px, .85fr); gap: 16px; padding: 14px 16px; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); transition: background-color .25s; scroll-margin: 90px 0 16px; }
.row > div { min-width: 0; }
.row { position: relative; }
.c-rec { padding-right: 34px; }
.rowmenu { position: absolute; top: 10px; right: 10px; z-index: 3; }
.menubtn { width: 30px; height: 28px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--raised); font-weight: 700; line-height: 1; }
.menubtn:hover, .menubtn[aria-expanded="true"] { background: var(--sunken); }
.menupop { position: absolute; top: 34px; right: 0; min-width: 220px; display: grid; gap: 2px; padding: 6px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.menupop[hidden] { display: none; }
.menupop [role="menuitem"] { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 6px; color: inherit; text-decoration: none; font-size: 14px; }
.menupop [role="menuitem"]:disabled { color: var(--muted); cursor: default; }
.menupop [role="menuitem"]:hover { background: var(--sunken); }
.menupop p { margin: 4px 6px 8px; font-size: 13px; }
.chip.danger { border-color: var(--heat-ink); color: var(--heat-ink); font-weight: 600; }
.row.talk { background: var(--t-talk); } .row.appt { background: var(--t-appt); } .row.sold { background: var(--t-sold); }
.row.warm { background: var(--t-warm); } .row.dnc { background: var(--t-dnc); } .row.bad { background: var(--t-bad); }
.row.sel { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.row.live { border-color: var(--heat); box-shadow: 0 0 0 2px var(--heat); }
.name { font-weight: 600; font-size: 15px; }
.leadtype { display: inline-block; margin: 3px 0 2px; padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--sunken); font-size: 12px; }
.phone { display: flex; align-items: center; gap: 6px; font: 500 14px var(--mono); margin-top: 1px; }
.copy { border: 0; background: none; padding: 0 2px; color: var(--muted); font: 500 11px var(--mono); text-decoration: underline; }
.email { color: var(--muted); overflow-wrap: anywhere; font-size: 13px; }
.place { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 6px; }
.clock { font: 600 17px/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.off { color: var(--heat-ink); font-size: 12px; font-weight: 600; }

textarea { width: 100%; height: 100%; min-height: 96px; resize: vertical; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px; display: block; }

/* One column the cell's own width: without minmax(0, 1fr) a dropdown sized to its longest option (wider in Windows fonts)
   stretched the button and dropdowns past the cell, over the lead's answers. Long text is cut off with an ellipsis instead. */
.cellcall { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; min-width: 0; }
.cellcall select, .cellcall .call { min-width: 0; max-width: 100%; }
.callwrap { position: relative; }
.call { width: 100%; border: 0; border-radius: 999px; padding: 11px 14px; background: var(--volt); color: var(--on-color); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.call:hover:not(:disabled) { filter: brightness(.95); }
.call.on { background: var(--heat); }
.call:disabled { background: var(--sunken); color: var(--muted); cursor: not-allowed; }
.badge { position: absolute; top: -7px; right: -5px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 13px/24px var(--sans); text-align: center; font-variant-numeric: tabular-nums; }

.dispowrap { position: relative; display: block; }
.dispowrap::after { content: ""; position: absolute; right: 12px; top: 50%; margin-top: -2px; border: 5px solid transparent; border-top-color: currentColor; border-bottom: 0; pointer-events: none; }
.dispo { appearance: none; -webkit-appearance: none; width: 100%; border: 1.5px solid var(--ink); border-radius: 8px; padding: 7px 28px 7px 10px; background: var(--raised); color: var(--ink); font-weight: 600; font-size: 13.5px; cursor: pointer; text-overflow: ellipsis; }
.dispo:hover { background: var(--sunken); }
.dispowrap.tagged .dispo { background: var(--sunken); border-color: var(--line-strong); }
.dispowrap.talk .dispo { background: var(--lean); border-color: var(--lean); color: #fff; } .dispowrap.talk { color: #fff; }
/* Appointment Set (and the pipeline steps after it) is orange, Sold is green (Josh, 11-09). */
.dispowrap.sold .dispo { background: var(--volt); border-color: var(--volt); color: var(--on-color); } .dispowrap.appt .dispo { background: var(--heat); border-color: var(--heat); color: var(--on-color); } .dispowrap.appt, .dispowrap.sold { color: var(--on-color); }
.dispowrap.warm .dispo { background: var(--c-warm); border-color: var(--c-warm); color: var(--on-color); } .dispowrap.warm { color: var(--on-color); }
.dispowrap.dnc .dispo { background: var(--heat); border-color: var(--heat); color: var(--on-color); } .dispowrap.dnc { color: var(--on-color); }
.dispowrap.bad .dispo { background: var(--line-strong); border-color: var(--line-strong); color: var(--on-color); } .dispowrap.bad { color: var(--on-color); }
.dispo option, .dispo optgroup { background: var(--raised); color: var(--ink); }

.auto { font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.trail { font-size: 12px; color: var(--muted); }
.result { font-size: 12.5px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { border: 1px solid var(--line-strong); background: var(--raised); border-radius: 999px; padding: 3px 9px; font-size: 12.5px; font-weight: 500; }
.chip:hover { background: var(--sunken); }
.demo { display: grid; gap: 5px; padding: 8px; border: 1px dashed var(--line-strong); border-radius: 8px; }

.answers { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; align-content: start; }
.answers dt { color: var(--muted); font-size: 13px; }
.answers dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.rec { display: grid; gap: 7px; align-content: start; font-size: 13px; }
.rec b { display: block; font-weight: 500; font-variant-numeric: tabular-nums; }
.sale { width: 100%; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; padding: 4px 8px; }
.histbtn { border: 0; background: none; padding: 0; text-align: left; font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }
.hist { list-style: none; margin: 0; padding: 6px 0 0; display: grid; gap: 3px; border-top: 1px solid var(--line-strong); }
.hist li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.hist span { color: var(--muted); }
.empty { padding: 36px 16px; text-align: center; color: var(--muted); background: var(--raised); border: 1px solid var(--line); border-radius: 12px; }

.toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; max-width: min(92vw, 640px); z-index: 6; opacity: 0; pointer-events: none; transition: opacity .2s; text-align: center; }
.toast.show { opacity: 1; }

/* Beyond the mockup: the signed-in user in the band, the row messages, the new-leads bar, the upload preview, login and invite. */
.seg .who { padding: 5px 4px 5px 10px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.msg { font-size: 12.5px; font-weight: 600; color: var(--heat-ink); }
.c-note { position: relative; display: flex; flex-direction: column; gap: 6px; }
.c-note textarea { flex: 1 1 auto; height: auto; } /* basis auto, so the height a drag sets counts */
.notekept { display: grid; gap: 5px; padding: 8px; border: 1px solid var(--heat); border-radius: 8px; font-size: 12.5px; background: var(--raised); }
#orphans .notekept { margin-bottom: 12px; }
.notekept b { color: var(--heat-ink); font-weight: 600; }
.notekept pre { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 140px; overflow-y: auto; }
.confirm { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--heat); border-radius: 8px; font-size: 12.5px; font-weight: 600; background: var(--raised); }
.notewarn { position: absolute; right: 7px; top: 7px; background: var(--heat); color: var(--on-color); border-radius: 6px; padding: 1px 7px; font-size: 12px; font-weight: 600; pointer-events: none; }
.assign { width: 100%; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; padding: 4px 8px; }
.newbar { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 6; border: 0; border-radius: 999px; padding: 8px 18px; background: var(--lean); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(32,30,31,.3); }
.more { height: 1px; }
.drawer-body { display: grid; gap: 10px; }
.counts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.warn { color: var(--heat-ink); font-weight: 600; }
.mapping { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; }
.mapping .f select { width: 100%; }
#upPreview .hist { max-width: 520px; }
.upfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.save:disabled { background: var(--sunken); color: var(--muted); cursor: not-allowed; }
.authpage { min-height: 100vh; padding-bottom: 0; display: flex; flex-direction: column; }
.authmain { flex: 1; display: grid; place-items: start center; padding: 40px 16px; }
.authcard { width: 100%; max-width: 400px; background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 22px; display: grid; gap: 14px; box-shadow: var(--shadow); }
.authcard h1 { margin: 0; font: 400 34px/1 var(--display); letter-spacing: .01em; }
.authcard p { margin: 0; }
.authcard form { display: grid; gap: 12px; }
.authcard .f input { width: 100%; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; }
.authcard a { color: inherit; font-weight: 600; }

@media (max-width: 1180px) {
  .row { grid-template-columns: minmax(0, 1fr) 214px minmax(0, 1fr); }
  .c-note { grid-column: 1 / -1; grid-row: 2; } .c-note textarea { min-height: 62px; }
  .c-ans { grid-column: 1 / -1; grid-row: 3; } .c-rec { grid-column: 3; grid-row: 1; } .c-call { grid-column: 2; grid-row: 1; }
}
@media (max-width: 720px) {
  .c-who { padding-right: 38px; } .c-rec { padding-right: 0; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .row > div { grid-column: 1 !important; grid-row: auto !important; }
  .c-who { order: 1; } .c-call { order: 2; } .c-note { order: 3; } .c-ans { order: 4; } .c-rec { order: 5; }
  .f, .f select, .f input[type=search] { width: 100%; }
  .keys { display: none; }
  header { position: static; }
  .newbar { top: 12px; }
  .stats { flex-basis: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 0; border-left: 0; }
  .stat b { font-size: 18px; }
  .stat .meta { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .row, .toast { transition: none; } }

/* appointments */
.apptline { display: grid; gap: 1px; margin-top: 6px; font-size: 12.5px; }
.apptline span { color: var(--muted); }
.apptline.failed .apptstatus, .apptline.not_in_ghl .apptstatus { color: var(--heat-ink); font-weight: 600; }
.apptline.cancelled b { text-decoration: line-through; color: var(--muted); }
.apptnew { display: inline-block; margin-left: 6px; background: var(--heat); color: var(--on-color); border-radius: 999px; padding: 0 8px; font-size: 11.5px; font-weight: 700; }
.cellcall > .chip[data-act="book"] { margin-top: 6px; }
.bookform { display: grid; gap: 6px; min-width: 0; margin-top: 8px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--raised); }
.bookform .meta { white-space: normal; }
.bookrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.bookrow input { width: 100%; min-width: 0; box-sizing: border-box; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; padding: 4px 6px; font-size: 13px; }
.booknote { font-size: 12px; color: var(--muted); }
.chip.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }
.chip:disabled { opacity: .5; cursor: default; }

/* phone panel: the header's ☎ (only during a call) opens a keypad, mute and hang up that stay put while the list scrolls */
.phonebtn { margin-left: auto; width: 38px; height: 34px; border: 1px solid var(--band-ink); border-radius: 999px; background: var(--volt); color: #201E1F; font-size: 18px; line-height: 1; }
.phonebtn.muted { background: var(--heat); }
.phonebtn:focus-visible, .keypad button:focus-visible, .phonectl button:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.phonebtn + .seg { margin-left: 0; }
.phonepanel { position: fixed; top: 72px; right: 16px; z-index: 6; width: 220px; display: grid; gap: 10px; padding: 12px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.phonepanel[hidden] { display: none; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.keypad button { height: 40px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--sunken); font: 600 17px var(--mono); }
.keypad button:active { background: var(--line); }
.phonectl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.phonectl button { height: 36px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--raised); font-weight: 600; }
.phonectl button[aria-pressed="true"] { background: var(--volt); border-color: var(--volt); color: #201E1F; }
.phonectl .hang { background: var(--heat); border-color: var(--heat); color: #201E1F; }
.phonepanel .meta { margin: 0; white-space: normal; }

/* second disposition */
.also { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.also select { flex: 1 1 0; width: 0; min-width: 0; text-overflow: ellipsis; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; padding: 3px 6px; font-size: 12.5px; }

/* multi-pick filters */
.multi { position: relative; }
.multi summary { list-style: none; cursor: pointer; min-width: 150px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 28px 6px 10px; white-space: nowrap; position: relative; }
.multi summary::-webkit-details-marker { display: none; }
.multi summary::after { content: "▾"; position: absolute; right: 10px; color: var(--muted); }
.multipop { position: absolute; z-index: 4; top: calc(100% + 4px); left: 0; min-width: 230px; max-height: 340px; overflow: auto; display: grid; gap: 4px; padding: 10px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.multipop .modes { display: grid; gap: 4px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px; }
.multipop .opts { display: grid; gap: 3px; }
.multipop label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.multipop .optgroup { margin-top: 6px; font: 600 11px var(--mono); text-transform: uppercase; color: var(--muted); }

/* call review: the Record call line on a live call, the review words in call history, and the open review under the row */
.recline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 26px; }
.rechint { font-size: 12px; color: var(--muted); }
.recclock { font-weight: 700; font-size: 13px; color: var(--heat-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.recline.paused .recclock { color: var(--muted); }
.linkbtn { border: 0; background: none; padding: 0; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.revnote { font-style: normal; font-size: 12px; color: var(--muted); }
.c-review { grid-column: 1 / -1; }
/* The Sold button's form opens across the whole row; a confirmed sale shows as a short locked summary in the record cell. */
.c-sale { grid-column: 1 / -1; }
.c-sale:empty { display: none; }
.saleform { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px; align-items: end; padding-top: 12px; border-top: 1px solid var(--line-strong); }
.saleform label { display: grid; gap: 3px; min-width: 0; }
.saleform input, .saleform select { width: 100%; min-width: 0; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 8px; font-size: 14px; }
.saleform .sf-actions { grid-column: 1 / -1; display: grid; gap: 6px; justify-items: start; }
.saleform.confirming { grid-template-columns: minmax(0, 1fr); align-items: start; }
.saleform.confirming p { margin: 0; }
.soldbtn { justify-self: stretch; width: 100%; padding: 7px 12px; border: 1.5px solid var(--ink); font-size: 13.5px; font-weight: 700; }
.soldbtn:hover { background: var(--volt); border-color: var(--volt); color: var(--on-color); }
.soldbtn.on { background: var(--sunken); }
.soldbox { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--volt); color: var(--on-color); }
.soldbox .meta, .soldbox .meta2 { color: inherit; opacity: .8; font-size: 12px; }
.soldbox b { font-size: 16px; font-weight: 700; }
.c-review:empty { display: none; }
.review { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 20px; padding-top: 12px; border-top: 1px solid var(--line-strong); font-size: 13px; }
.review section { min-width: 0; }
.review h4 { margin: 0 0 3px; }
.review p { margin: 0; overflow-wrap: anywhere; }
.review .revfull { grid-column: 1 / -1; display: grid; gap: 6px; justify-items: start; }
.review audio { width: min(100%, 480px); height: 36px; }
.needs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; }
.needs dt { color: var(--muted); }
.needs dd { margin: 0; overflow-wrap: anywhere; }
.objections { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.objections q { display: block; color: var(--muted); font-style: italic; overflow-wrap: anywhere; }
.handled { font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.handled.poorly { color: var(--heat-ink); }
.handled.well { color: var(--volt-ink); }
.transcript { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-width: 90ch; }
.transcript .ts { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .c-review { order: 6; } }

/* account menu: the ☰ beside the name opens screen-wide options (tour, shortcuts, report a problem, log out) */
.seg.acct { align-items: center; }
.acctbtn { display: inline-grid; place-items: center; width: 32px; height: 28px; border: 0; border-radius: 999px; background: none; color: var(--band-ink); }
.acctbtn:hover, .acctbtn[aria-expanded="true"] { background: rgba(243,240,235,.18); }
.acctbtn:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.acctmenu { position: fixed; z-index: 7; min-width: 220px; display: grid; gap: 2px; padding: 6px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); }
.acctmenu [role="menuitem"] { border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: inherit; }
.acctmenu [role="menuitem"]:hover, .acctmenu [role="menuitem"]:focus-visible { background: var(--sunken); outline: none; }
.acctmenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
.acctdialog { width: min(480px, calc(100vw - 32px)); border: 1px solid var(--line-strong); border-radius: 14px; padding: 20px; background: var(--raised); color: var(--ink); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
.acctdialog::backdrop { background: rgba(23, 21, 22, .55); }
.acctdialog h2 { margin: 0 0 10px; font: 400 30px/1 var(--display); letter-spacing: .01em; }
.acctdialog p { margin: 0 0 10px; }
.acctdialog textarea { width: 100%; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; resize: vertical; }
.acctdialog .f { margin-bottom: 10px; }
.acctdialog .check { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; font-weight: 500; }
.acctdialog .setrec { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.acctdialog .setrec strong { color: var(--ink); font-weight: 600; }
.dlgbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.keylist { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0 0 12px; align-items: center; }
.keylist dd { margin: 0; }

/* first-login tour: a dimmed screen, a spotlight on one part of it, and a card */
.tourshade { position: fixed; inset: 0; z-index: 40; }
.tourshade.dim { background: rgba(23, 21, 22, .62); }
.tourspot { position: fixed; z-index: 41; border-radius: 12px; box-shadow: 0 0 0 2px var(--volt), 0 0 0 9999px rgba(23, 21, 22, .62); pointer-events: none; transition: top .2s ease-out, left .2s ease-out, width .2s ease-out, height .2s ease-out; }
/* The card is the opposite of the page: dark on the light screen, Cloud Dancer on the dark one, so it never blends in. */
.tourcard { --tc-bg: #201E1F; --tc-ink: #F3F0EB; --tc-muted: #B5AEA7; --tc-line: rgba(243,240,235,.28);
  position: fixed; z-index: 42; width: min(380px, calc(100vw - 24px)); display: grid; gap: 8px; padding: 18px; background: var(--tc-bg); color: var(--tc-ink); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tourcard { --tc-bg: #F3F0EB; --tc-ink: #201E1F; --tc-muted: #5F5A55; --tc-line: rgba(32,30,31,.3); } }
:root[data-theme="dark"] .tourcard { --tc-bg: #F3F0EB; --tc-ink: #201E1F; --tc-muted: #5F5A55; --tc-line: rgba(32,30,31,.3); }
.tourcard .meta { color: var(--tc-muted); margin: 0; }
.tourcard h2 { margin: 0; font: 400 30px/1 var(--display); letter-spacing: .01em; }
.tourcard p { margin: 0; font-size: 14.5px; line-height: 1.55; }
/* A name on the screen ("Only show", "Hang up"): a Volt tag, so it reads as a thing to look for, not part of the sentence */
.tourcard .ui { background: var(--volt); color: #201E1F; font-weight: 600; padding: 1px 6px; border-radius: 5px; white-space: nowrap; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tourbtns { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tourbtns .spacer { flex: 1; }
.tourcard .chip { padding: 7px 14px; font-size: 13.5px; background: transparent; color: var(--tc-ink); border-color: var(--tc-line); }
.tourcard .chip.primary { background: var(--volt); border-color: var(--volt); color: #201E1F; }
.tourskip { border: 0; background: none; color: var(--tc-muted); padding: 6px 0; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.tourcard button:focus-visible { outline: 2px solid var(--tc-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tourspot { transition: none; } }
/* the tour's sample lead: the "no leads match" note steps aside while it's on the list */
.list:has(> [data-sample]) > .empty { display: none; }