/* =========================================================================
   Roomex Call QA — Apple-style app shell
   Semantic system tokens (light + dark), SF system font stack, 8pt grid.
   One tint (systemBlue) for interaction; green / orange / red ONLY mean a band.
   ========================================================================= */
:root {
  color-scheme: light;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --label: #000000;
  --label-2: rgba(60, 60, 67, 0.60);
  --label-3: rgba(60, 60, 67, 0.30);
  --bg: #F2F2F7;                 /* grouped background */
  --card: #FFFFFF;               /* grouped secondary */
  --card-2: #F2F2F7;
  --fill: rgba(120, 120, 128, 0.20);
  --fill-2: rgba(120, 120, 128, 0.16);
  --fill-3: rgba(118, 118, 128, 0.12);
  --fill-4: rgba(116, 116, 128, 0.08);
  --sep: rgba(60, 60, 67, 0.18);
  --tint: #007AFF;
  --chrome: rgba(246, 246, 248, 0.72);

  /* bands: fill colour + accessible text colour */
  --above: #34C759; --above-ink: #248A3D;
  --at:    #FF9500; --at-ink:    #C93400;
  --below: #FF3B30; --below-ink: #D70015;
  /* outcomes */
  --o-apptQ: #34C759; --o-apptU: #A7E3B5; --o-callback: #FF9500; --o-referral: #5856D6;
  --o-notInt: #AEAEB2; --o-noDM: #D1D1D6; --o-disq: #FF3B30;
  --sc-q: #007AFF; --sc-o: #12A18A; --sc-h: #8E5CF0;

  --r-lg: 16px; --r-md: 12px; --r-sm: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --label: #FFFFFF;
    --label-2: rgba(235, 235, 245, 0.60);
    --label-3: rgba(235, 235, 245, 0.30);
    --bg: #000000;
    --card: #1C1C1E;
    --card-2: #2C2C2E;
    --fill: rgba(120, 120, 128, 0.36);
    --fill-2: rgba(120, 120, 128, 0.32);
    --fill-3: rgba(118, 118, 128, 0.24);
    --fill-4: rgba(118, 118, 128, 0.18);
    --sep: rgba(84, 84, 88, 0.60);
    --tint: #0A84FF;
    --chrome: rgba(28, 28, 30, 0.72);
    --above: #30D158; --above-ink: #30D158;
    --at:    #FF9F0A; --at-ink:    #FF9F0A;
    --below: #FF453A; --below-ink: #FF6961;
    --o-apptQ: #30D158; --o-apptU: #1F6B34; --o-callback: #FF9F0A; --o-referral: #5E5CE6;
    --o-notInt: #636366; --o-noDM: #3A3A3C; --o-disq: #FF453A;
    --sc-q: #0A84FF; --sc-o: #30D1B0; --sc-h: #A98BFF;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--label); font: 15px/1.4 var(--font); letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: var(--tint); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 55%, transparent); outline-offset: 2px; border-radius: 8px; }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; }
.muted { color: var(--label-2); }
.sm { font-size: 13px; }
.xs { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- app shell: sidebar (chrome) + content ---------------------------- */
.app { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 20px 12px; display: flex; flex-direction: column; gap: 4px;
  background: var(--chrome); backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px);
  border-right: 0.5px solid var(--sep); overflow-y: auto; }
.brand { padding: 4px 12px 16px; }
.brand-name { font: 700 17px/1.2 var(--font-display); letter-spacing: -0.02em; }
.brand-sub { font-size: 12px; color: var(--label-2); margin-top: 2px; }
.side-h { font-size: 11px; font-weight: 600; color: var(--label-2); padding: 14px 12px 6px; letter-spacing: 0.02em; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px; border: none; background: transparent; border-radius: var(--r-sm); text-align: left; font-size: 14px; font-weight: 500; width: 100%; }
.nav-item svg { width: 18px; height: 18px; flex: none; color: var(--tint); }
.nav-item:hover { background: var(--fill-4); }
.nav-item.on { background: var(--fill-2); }
.side-foot { margin-top: auto; padding: 12px; font-size: 12px; color: var(--label-2); display: flex; flex-direction: column; gap: 8px; }
.side-campaign { padding: 0 12px; font-size: 13px; font-weight: 600; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.linkbtn { background: none; border: none; padding: 0; color: var(--tint); font-size: 13px; text-align: left; }

.content { min-width: 0; display: flex; flex-direction: column; }
.toolbar { position: sticky; top: 0; z-index: 20; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 32px;
  background: var(--chrome); backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px);
  border-bottom: 0.5px solid transparent; transition: border-color 200ms; }
.toolbar.scrolled { border-bottom-color: var(--sep); }
.toolbar-title { font-weight: 600; font-size: 15px; opacity: 0; transition: opacity 200ms; }
.toolbar.scrolled .toolbar-title { opacity: 1; }
.toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px 0 0; border: none; background: none; color: var(--tint); font-size: 15px; }
.back svg { width: 20px; height: 20px; }
.main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 8px 32px 64px; }
@media (prefers-reduced-transparency: reduce) { .sidebar, .toolbar, .tabbar { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ---- type ------------------------------------------------------------- */
.large-title { font: 700 34px/1.12 var(--font-display); letter-spacing: -0.025em; margin: 0; }
.title2 { font: 700 22px/1.2 var(--font-display); letter-spacing: -0.02em; margin: 0; }
.headline { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.subhead { font-size: 15px; color: var(--label-2); margin: 6px 0 0; }
.section-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 40px 0 12px; }
.section-h p { margin: 4px 0 0; font-size: 13px; color: var(--label-2); max-width: 640px; }
.caption-h { font-size: 13px; font-weight: 600; color: var(--label-2); text-transform: uppercase; letter-spacing: 0.02em; padding: 0 16px 6px; }

/* ---- surfaces --------------------------------------------------------- */
.card { background: var(--card); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow); min-width: 0; }
.card.pad-lg { padding: 24px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.grid3.fixed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.empty { padding: 56px 24px; text-align: center; color: var(--label-2); background: var(--card); border-radius: var(--r-lg); }
.empty b { display: block; color: var(--label); font-size: 17px; margin-bottom: 4px; }

/* inset grouped list */
.list { background: var(--card); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.row { display: grid; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px; position: relative; width: 100%; border: none; background: transparent; text-align: left; font-size: 15px; }
.row + .row::before { content: ""; position: absolute; top: 0; right: 0; left: 16px; height: 0.5px; background: var(--sep); }
button.row:hover, .row.tap:hover { background: var(--fill-4); }
button.row:active { background: var(--fill-3); }
.chev { width: 14px; height: 14px; color: var(--label-3); flex: none; }
.row-title { font-weight: 500; }
.row-sub { font-size: 13px; color: var(--label-2); margin-top: 1px; }

/* ---- badges ----------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.4; }
.badge-lg { font-size: 14px; padding: 5px 12px; }
.badge i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.b-above { color: var(--above-ink); background: color-mix(in srgb, var(--above) 16%, transparent); }
.b-at    { color: var(--at-ink);    background: color-mix(in srgb, var(--at) 18%, transparent); }
.b-below { color: var(--below-ink); background: color-mix(in srgb, var(--below) 15%, transparent); }
.b-above i { background: var(--above); } .b-at i { background: var(--at); } .b-below i { background: var(--below); }
.b-neutral { color: var(--label-2); background: var(--fill-3); }
.b-tint { color: var(--tint); background: color-mix(in srgb, var(--tint) 14%, transparent); }
.gate { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--label-2); border: 1px solid var(--label-3); border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.note { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13px; background: color-mix(in srgb, var(--at) 12%, transparent); color: var(--label); }

/* ---- controls --------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 16px; border: none; border-radius: 999px; font-size: 15px; font-weight: 600; }
.btn-filled { background: var(--tint); color: #fff; }
.btn-tinted { background: color-mix(in srgb, var(--tint) 14%, transparent); color: var(--tint); }
.btn-plain { background: none; color: var(--tint); padding: 0 4px; font-weight: 500; }
.btn:hover { filter: brightness(1.06); }
.btn:disabled { opacity: 0.4; cursor: default; filter: none; }
.popup { appearance: none; -webkit-appearance: none; min-height: 32px; padding: 4px 30px 4px 12px; border-radius: var(--r-sm); border: none; background: var(--fill-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 12'%3E%3Cpath d='M2 4.5 5 1.5 8 4.5M2 7.5 5 10.5 8 7.5' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center; font-size: 14px; font-weight: 500; }
.segmented { display: inline-flex; background: var(--fill-3); border-radius: 9px; padding: 2px; }
.segmented button { min-height: 28px; padding: 0 14px; border: none; background: none; border-radius: 7px; font-size: 13px; font-weight: 500; }
.segmented button.on { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04); font-weight: 600; }
.search { width: 100%; min-height: 36px; padding: 0 12px 0 32px; border: none; border-radius: 10px; background: var(--fill-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3Cpath d='M9.5 9.5 13 13' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 11px center; font-size: 15px; }
.search::placeholder { color: var(--label-2); }

/* ---- summary tiles (KPIs) ---------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; margin-top: 24px; }
.tile { background: var(--card); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow); }
.tile-l { font-size: 13px; font-weight: 600; color: var(--label-2); }
.tile.hero .tile-l { color: var(--tint); }
.tile-v { font: 700 34px/1.1 var(--font-display); letter-spacing: -0.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.tile-s { font-size: 13px; color: var(--label-2); margin-top: 4px; }
.tile-d { font-size: 13px; font-weight: 600; margin-top: 2px; color: var(--above-ink); }

/* ---- gauges ----------------------------------------------------------- */
.gauge { text-align: center; min-width: 0; }
.gauge-name { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
.gauge-sub { font-size: 13px; color: var(--label-2); margin-top: 10px; line-height: 1.4; }
.gauge-band { margin-top: 6px; }
.gauge-readout { margin-top: 6px; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.gauge-readout.lg { font: 600 20px/1.2 var(--font-display); letter-spacing: -0.02em; }
.gauge-val.sweep { animation: fillarc 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes fillarc { from { stroke-dasharray: 0 200; } }
.gauge-compact { width: 64px; margin: 0 auto; }
.needle.sweep { animation: sweep 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes sweep { from { transform: rotate(-90deg); } }

/* distribution bar */
.dist { display: flex; height: 8px; gap: 2px; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--label-2); margin-top: 8px; }
.legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }

/* outcome bars */
.mixbar { display: flex; gap: 2px; border-radius: 6px; overflow: hidden; }
.mixrow { display: grid; grid-template-columns: 10px minmax(0, 1fr) 40px 44px; gap: 12px; }
.mixrow i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.mixrow b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.mixrow span { text-align: right; font-size: 13px; color: var(--label-2); font-variant-numeric: tabular-nums; }

/* weekly columns */
.cols { display: flex; align-items: flex-end; gap: 10px; height: 200px; padding-bottom: 24px; position: relative; }
.cols::after { content: ""; position: absolute; left: 0; right: 0; bottom: 24px; height: 0.5px; background: var(--sep); }
.col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; position: relative; min-width: 0; }
.col > .seg:first-of-type { border-radius: 4px 4px 0 0; }
.col-v { font-size: 12px; font-weight: 600; text-align: center; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.col-l { position: absolute; bottom: -22px; left: -4px; right: -4px; font-size: 11px; text-align: center; color: var(--label-2); white-space: nowrap; }

/* rep snapshot rows */
.snap .row, .snap-hdr { grid-template-columns: 36px minmax(110px, 1.4fr) 80px repeat(3, 72px) 104px 14px; }
.snap-hdr { display: grid; gap: 12px; padding: 0 16px 6px; font-size: 12px; font-weight: 600; color: var(--label-2); }
.snap-hdr .c { text-align: center; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(180deg, #A1A1A6, #8E8E93); flex: none; letter-spacing: 0; }
.avatar.lg { width: 64px; height: 64px; font-size: 24px; }
.big-num { font: 700 22px/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ---- rep cards ---------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)); gap: 16px; margin-top: 16px; }
.repcard { display: flex; flex-direction: column; gap: 16px; }
.repcard-h { display: flex; align-items: center; gap: 12px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat { background: var(--card); border-radius: var(--r-md); padding: 10px 12px; }
.card .stat { background: var(--fill-4); }
.stat-v { font: 700 22px/1.1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-l { font-size: 12px; color: var(--label-2); margin-top: 2px; }
.sw-h { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sw { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 8px 0; border-top: 0.5px solid var(--sep); font-size: 14px; }
.sw-l { font-weight: 500; }
.sw-p { display: block; font-size: 12px; color: var(--label-2); font-weight: 400; }
.sw-v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.sw-t { grid-column: 2; font-size: 12px; color: var(--label-2); text-align: right; }
.ai { font-size: 14px; color: var(--label-2); background: var(--fill-4); border-radius: var(--r-md); padding: 10px 12px; }
.ai b { color: var(--label); font-weight: 600; }

/* criteria bars */
.crow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(60px, 1fr) 40px; gap: 12px; align-items: center; }
.track { position: relative; height: 6px; border-radius: 3px; background: var(--fill-3); }
.fill { height: 100%; border-radius: 3px; }
.tick { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--label); margin-left: -1px; }
.crow-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }

/* call rows */
.calls .row { grid-template-columns: 84px minmax(0, 1.4fr) auto 46px 96px 14px; }
.dots { display: flex; gap: 4px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* scorecard */
.summary { margin-top: 16px; font-size: 17px; line-height: 1.45; letter-spacing: -0.015em; }
.ck { grid-template-columns: 24px minmax(0, 1fr); align-items: start; font-size: 14px; }
.ck-ic { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; color: #fff; font-size: 12px; font-weight: 700; }
.ev { font-size: 13px; color: var(--label-2); margin-top: 2px; }
.coach-i { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; padding: 6px 0; }
.coach-n { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--tint) 14%, transparent); color: var(--tint); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tl { display: block; padding: 10px 16px; font-size: 14px; }
.tl-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 2px; color: var(--label-2); }
.tl-h b { color: var(--label); font-size: 13px; }

/* call review split view */
.split { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 24px; }
.files { position: sticky; top: 68px; }
.files .row { grid-template-columns: minmax(0, 1fr) auto; }
.files-list { max-height: calc(100vh - 220px); overflow-y: auto; }
.files .row.on { background: color-mix(in srgb, var(--tint) 12%, transparent); }
.pre { font-size: 13px; line-height: 1.6; white-space: pre-wrap; margin: 0; max-height: 640px; overflow: auto; }
.status-line { margin-top: 12px; font-size: 13px; color: var(--label-2); display: flex; align-items: center; gap: 8px; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--fill); border-top-color: var(--tint); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* guide */
.thr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.thr > div { background: var(--fill-4); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.thr b { font: 700 24px/1 var(--font-display); letter-spacing: -0.02em; }
.p { font-size: 15px; line-height: 1.5; margin: 8px 0; }
.crit-tbl .row { grid-template-columns: minmax(140px, 1fr) repeat(3, minmax(0, 1.2fr)); align-items: start; font-size: 13px; }
.crit-tbl .row.hd { min-height: 36px; font-size: 12px; font-weight: 600; color: var(--label-2); }
.crit-tbl .row > :first-child { font-weight: 600; font-size: 14px; }
.tbl-scroll { overflow-x: auto; border-radius: var(--r-lg); }
.tbl-scroll .list { min-width: 680px; }

/* ---- modal ---------------------------------------------------------- */
.modal { display: none; position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, 0.32); align-items: center; justify-content: center; padding: 16px; }
.modal-box { background: var(--card); border-radius: 14px; max-width: 420px; width: 100%; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }

/* ---- view transition (utility budget: a quick fade, nothing more) --- */
.fade-in { animation: fadein 180ms ease-out both; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .needle.sweep, .gauge-val.sweep, .fade-in { animation: none; }
}

/* ---- tab bar (compact width) ------------------------------------- */
.tabbar { display: none; }
.snap-hdr .abbr { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .toolbar { padding: 0 16px; }
  .main { padding: 8px 16px calc(96px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--chrome);
    backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); border-top: 0.5px solid var(--sep); }
  .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; border: none; background: none; font-size: 10px; font-weight: 500; color: var(--label-2); }
  .tabbar button svg { width: 24px; height: 24px; }
  .tabbar button.on { color: var(--tint); }
  .split { grid-template-columns: 1fr; }
  .files { position: static; }
  .files-list { max-height: 300px; }
  .snap .row, .snap-hdr { grid-template-columns: 36px minmax(0, 1fr) 56px repeat(3, 56px) 14px; }
  .snap .band-col { display: none; }
  .gauge-compact { width: 52px; }
}
@media (max-width: 600px) {
  .large-title { font-size: 30px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snap .row, .snap-hdr { grid-template-columns: minmax(0, 1fr) 40px repeat(3, 44px) 12px; gap: 6px; padding-left: 12px; padding-right: 12px; }
  .snap .av-col { display: none; }
  .gauge-compact { width: 44px; }
  .snap-hdr .full { display: none; }
  .snap-hdr .abbr { display: inline; }
  .calls .row { grid-template-columns: minmax(0, 1fr) auto 14px; }
  .calls .c-date, .calls .c-out, .calls .dots { display: none; }
  .thr { grid-template-columns: 1fr; }
  .grid3.fixed .gauge-name { font-size: 12px; }
  .card { padding: 16px; }
}

/* rep table + call list respond to their own width (the sidebar eats viewport space) */
.snap, .calls-wrap { container-type: inline-size; }
@container (max-width: 700px) {
  .snap .row, .snap-hdr { grid-template-columns: 36px minmax(0, 1fr) 56px repeat(3, 56px) 14px; }
  .snap .band-col { display: none; }
  .snap .gauge-compact { width: 52px; }
}
@container (max-width: 480px) {
  .snap .row, .snap-hdr { grid-template-columns: minmax(0, 1fr) 40px repeat(3, 44px) 12px; gap: 6px; padding-left: 12px; padding-right: 12px; }
  .snap .av-col { display: none; }
  .snap .gauge-compact { width: 44px; }
  .snap-hdr .full { display: none; }
  .snap-hdr .abbr { display: inline; }
}
@container (max-width: 560px) {
  .calls .row { grid-template-columns: minmax(0, 1fr) auto 14px; }
  .calls .c-date, .calls .c-out, .calls .dots { display: none; }
}
@media (max-width: 600px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tile { padding: 14px; }
  .tile-v { font-size: 28px; }
  .cols { gap: 6px; }
  .col:nth-child(even) .col-l { visibility: hidden; }
}

/* =====================================================================
   App views: player dock, timeline, transcript, tabs, coaching, leads
   ===================================================================== */
.ic { width: 12px; height: 12px; flex: none; }
.ts { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 5px; border: none; border-radius: 999px;
  background: color-mix(in srgb, var(--tint) 12%, transparent); color: var(--tint); font: 600 12px/1.6 var(--font);
  font-variant-numeric: tabular-nums; vertical-align: 1px; cursor: pointer; white-space: nowrap; }
.ts:hover { background: color-mix(in srgb, var(--tint) 20%, transparent); }
.ts-off { background: var(--fill-4); color: var(--label-2); cursor: default; padding: 1px 7px; }

/* timeline under the play button */
.tl-wrap { margin-top: 16px; }
.tl-bar { position: relative; height: 28px; border-radius: 8px; background: var(--fill-4); overflow: hidden; }
.tl-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--tint) 16%, transparent); border-right: 2px solid var(--tint); width: 0; pointer-events: none; }
.tl-mark { position: absolute; top: 5px; width: 10px; height: 18px; margin-left: -5px; border: 2px solid var(--card); border-radius: 5px; padding: 0; cursor: pointer; }
.tl-mark:disabled { cursor: default; }
.tl-mark:hover:not(:disabled), .tl-mark:focus-visible { transform: scaleY(1.15); }
.tl-above { background: var(--above); } .tl-below { background: var(--below); }
.tl-obj { background: var(--o-referral); } .tl-check { background: var(--tint); }
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--label-2); align-items: center; }
.tl-legend i { display: inline-block; width: 8px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; }
.tl-len { margin-left: auto; font-variant-numeric: tabular-nums; }

.tabs-call { flex-wrap: wrap; }
.tabs-call button { min-height: 32px; }

/* transcript */
.trx { max-height: 70vh; overflow-y: auto; position: relative; }
.trl { grid-template-columns: 64px minmax(0, 1fr); align-items: start; font-size: 14px; scroll-margin: 80px; }
.trl.rep { background: color-mix(in srgb, var(--tint) 4%, transparent); }
.trl.now { background: color-mix(in srgb, var(--tint) 14%, transparent); }
.trl.f-above { box-shadow: inset 3px 0 0 var(--above); } .trl.f-below { box-shadow: inset 3px 0 0 var(--below); }
.trl.f-obj { box-shadow: inset 3px 0 0 var(--o-referral); }
.trl-sp { font-size: 12px; font-weight: 600; color: var(--label-2); }
.trl-note { font-weight: 500; color: var(--label); }
.trl-text { margin-top: 1px; }
mark { background: color-mix(in srgb, var(--at) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* timing / objections / lead */
.ck3 { grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; }
.talkbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; }
.obj { grid-template-columns: 24px minmax(0, 1fr); align-items: start; }
.obj-q, .obj-a { margin-top: 8px; font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.obj-a { color: var(--label-2); }
.obj-g { margin-top: 8px; font-size: 13px; color: var(--label-2); background: var(--fill-4); border-radius: var(--r-sm); padding: 8px 10px; }
.kv { grid-template-columns: 130px minmax(0, 1fr); align-items: start; font-size: 14px; }
.mail { white-space: pre-wrap; font: 14px/1.5 var(--font); margin: 10px 0 0; color: var(--label); }

/* coaching + leads tables */
.pl { grid-template-columns: 72px minmax(0, 1fr) auto; align-items: start; }
.obj-tbl .row { grid-template-columns: minmax(220px, 2.4fr) repeat(4, minmax(70px, 0.8fr)); align-items: start; font-size: 14px; }
.obj-tbl .row.pace { grid-template-columns: minmax(120px, 1.4fr) repeat(5, minmax(70px, 1fr)); align-items: center; }
.obj-tbl .row.hd, .leads-tbl .row.hd { min-height: 36px; font-size: 12px; font-weight: 600; color: var(--label-2); }
.leads-tbl .row { grid-template-columns: minmax(150px, 1.3fr) minmax(130px, 1.1fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(150px, 1fr) minmax(140px, 1.2fr) 14px; align-items: start; }

/* persistent player dock */
.dock { position: fixed; z-index: 40; left: 272px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px;
  background: var(--chrome); backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px);
  border: 0.5px solid var(--sep); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); }
.dock[hidden] { display: none; }
body.has-dock .main { padding-bottom: 120px; }
.dock-btn { min-width: 36px; height: 36px; border: none; border-radius: 999px; background: var(--fill-4); font: 600 12px var(--font); color: var(--label); padding: 0 8px; }
.dock-btn:hover { background: var(--fill-3); }
.dock-main { width: 44px; height: 44px; background: var(--tint); color: #fff; display: flex; align-items: center; justify-content: center; }
.dock-main:hover { background: var(--tint); filter: brightness(1.08); }
.dock-main .ic { width: 16px; height: 16px; }
.dock-mid { flex: 1; min-width: 0; }
.dock-title { display: block; max-width: 100%; border: none; background: none; padding: 0; font: 600 13px var(--font); color: var(--label); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-title:hover { color: var(--tint); }
.dock-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--label-2); }
.dock-row input[type=range] { flex: 1; accent-color: var(--tint); min-width: 60px; }
#dock-err { color: var(--below-ink); }
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  background: var(--label); color: var(--bg); padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.toast[hidden] { display: none; }

@media (max-width: 900px) {
  .dock { left: 8px; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body.has-dock .main { padding-bottom: 190px; }
  #dock-back, #dock-fwd { display: none; }
}
@media (max-width: 600px) {
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .pl { grid-template-columns: minmax(0, 1fr) auto; }
  .pl > :first-child { grid-column: 1 / -1; }
  #dock-speed { display: none; }
}

/* ---- live scorecard ---- */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--above); margin-right: 6px; vertical-align: 1px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--above) 60%, transparent); animation: livepulse 2s ease-out infinite; }
@keyframes livepulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.sstack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.sw-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 0; }
.sc-wrap { overflow-x: auto; border-radius: var(--r-lg); }
.sc-list { min-width: 860px; }
.sc-list .row { grid-template-columns: 28px minmax(140px, 1.3fr) 56px minmax(150px, 1.6fr) repeat(3, 72px) repeat(3, 76px) 14px; }
.sc-list .row.hd { min-height: 36px; font-size: 12px; font-weight: 600; color: var(--label-2); }
.sc-list .c { text-align: center; }
.sc-rank { font: 700 15px var(--font-display); color: var(--label-2); text-align: center; }
.sc-call { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) 44px 14px; }
.ring-in { animation: ringdraw 900ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ringdraw { from { stroke-dashoffset: var(--circ); } }
@media (prefers-reduced-motion: reduce) { .ring-in, .live-dot { animation: none; } }
@media (max-width: 900px) { .tabbar { grid-template-columns: repeat(6, 1fr); } .tabbar button { font-size: 9.5px; } }
@media (max-width: 600px) { .sc-call { grid-template-columns: minmax(0, 1fr) 40px 12px; } .sc-call > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }