/* Overview (app.png at 1536 × 1024) — built on the shared v3 classes in /styles.css (.label, .page-title, .select-btn, .menu,
   .card, .kpi, .card-head, .section-label, .card-link, .card-title, .card-sub, .empty-state, .checklist, .btn, .table).
   Everything here is scoped to .ov; the chart styles (.lrc-*) belong to /js/charts.js, which only the Overview uses.
   Measurements are CSS px at 1536 × 1024: content box x 246–1503, KPI row y 156–263, cards from y 280 to 1021. */

/* Inter's display optical size (opsz 32) comes from .app (styles.css), shared with every tab. */
.ov { position: relative; }
.ov-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Header ─────────────────────────────────────────── */
.ov-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; min-height: 92px; }
.ov-head-text { position: relative; z-index: 1; min-width: 0; padding-top: 1px; }
.ov-head .label { color: var(--text-3); letter-spacing: .085em; transform: translateY(1.5px); }
.ov-head .page-title { margin-top: 2px; color: #fbfcfb; font-size: 32.5px; line-height: 37px; letter-spacing: 0; }
.ov-head .page-sub { margin-top: 2px; color: #dadddc; font-size: 14.5px; line-height: 21px; }
/* Faint road network behind the header's right side (decorative, very low contrast). */
.ov-head-art { position: absolute; top: -13px; right: 82px; width: 520px; height: 110px; pointer-events: none; overflow: visible; }
.ov-head-lines path { fill: none; stroke: rgb(214 226 222 / .085); stroke-width: 1; }
.ov-head-lines .dim { stroke: rgb(214 226 222 / .05); }
.ov-head-dots rect { fill: rgb(214 226 222 / .12); }

/* Period select (header: 138 × 38; Performance card: 128 × 32). */
.ov-period { position: relative; z-index: 2; flex: none; }
.ov-period .select-btn { gap: 0; padding-top: 2px; color: var(--text); }
.ov-period-lg { margin-top: 7px; }
.ov-period-lg .select-btn { width: 138px; height: 38px; padding-right: 11px; padding-left: 10px; font-size: 11.1px; }
.ov-period-lg .ov-cal { width: 16px; height: 16px; margin-right: 10px; color: var(--text); }
.ov-period .chevron { width: 12px; height: 12px; color: var(--text-2); }
.ov-period-lg .chevron { width: 13px; height: 13px; }
.ov-period-sm .select-btn { width: 128px; height: 32px; padding-right: 12px; padding-left: 9px; border-color: var(--line); font-size: 10.75px; }
.ov-period-sm .ov-cal-sm { width: 14px; height: 14px; margin-right: 10px; color: var(--text-2); }
.ov-period-menu { min-width: 168px; }
.ov-period-menu .menu-check { opacity: 0; }
.ov-period-menu .checked .menu-check { opacity: 1; }

/* ── KPI row: six equal cards, 13px apart ───────────── */
/* app.png's six KPI cards are not equal: 193 / 195 / 194 / 202 / 206 / 205px at 1536. */
.ov-kpis { display: grid; grid-template-columns: minmax(0, 193fr) minmax(0, 195fr) minmax(0, 194fr) minmax(0, 202fr) minmax(0, 206fr) minmax(0, 205fr); gap: 13px; margin-top: 0; }
.ov-kpi { min-width: 0; min-height: 108px; padding: 15px 13px 14px 16px; }
.ov-kpi .kpi-label { overflow: hidden; color: #c6c9c8; font-size: 11.75px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.ov-kpi .kpi-arrow { display: grid; flex: none; color: var(--text-2); transition: translate var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.ov-kpi .kpi-arrow .icon { width: 13px; height: 13px; stroke-width: 1.6; }
.ov-kpi:hover .kpi-arrow { color: var(--text); translate: 2px 0; }
.ov-kpi .kpi-value { display: block; margin-top: 12px; color: #fbfcfb; overflow: hidden; font-size: 26px; font-weight: 400; line-height: 26px; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.ov-kpi .kpi-unit { display: block; margin-top: 8px; color: #e2e4e3; font-size: 11.75px; line-height: 14px; }
.ov-skel-num { width: 44px; height: 20px; margin-top: 3px; }
.ov-perf-value .ov-skel-num { width: 52px; height: 18px; }

/* ── Main grid: 857 | 387 (13px gap); the left column splits 440 | 404 ── */
.ov-grid { display: grid; grid-template-columns: minmax(0, 857fr) minmax(0, 387fr); gap: 13px; align-items: start; margin-top: 16px; }
.ov-col { display: grid; gap: 13px; min-width: 0; }
.ov-pair { display: grid; grid-template-columns: minmax(0, 440fr) minmax(0, 404fr); gap: 13px; }
.ov-card { display: flex; flex-direction: column; min-width: 0; padding: 16px 20px 18px 19px; }
.ov-radar { min-height: 300px; overflow: hidden; }
.ov-pair .ov-card { min-height: 236px; padding-bottom: 16px; }
.ov-pair-low .ov-card { min-height: 180px; padding-bottom: 14px; }
.ov-todo { min-height: 306px; }
.ov-activity { min-height: 176px; }
.ov-perf { min-height: 234px; }

/* Card head: section label + "View all". */
.ov-card .card-head { position: relative; z-index: 1; align-items: center; min-height: 14px; }
.ov-card .section-label { gap: 9px; color: #a6aaa9; font-size: 10px; letter-spacing: .01em; }
.ov-card .section-label .icon { width: 12px; height: 12px; color: #c9cccb; stroke-width: 2.1; }
.ov-card .card-link { margin: -4px -3px -4px 0; padding: 3px 0; color: #d6d9d8; font-size: 11.75px; line-height: 14px; }
.ov-card .card-link .icon { width: 12px; height: 12px; margin-left: -1px; stroke-width: 1.6; }
.ov-link-btn { border: 0; background: none; cursor: pointer; }
.ov-card .card-title { position: relative; z-index: 1; margin-top: 7px; color: #fbfcfb; font-size: 18.75px; line-height: 23px; letter-spacing: -.005em; }
.ov-card .card-sub { position: relative; z-index: 1; margin-top: 1px; color: #b1b5b4; font-size: 12.5px; line-height: 18px; }
.ov-body { position: relative; z-index: 1; display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.ov-busy { display: grid; gap: 10px; padding: 22px 0 6px; }
.ov-busy .skel:nth-child(1) { width: 62%; }
.ov-busy .skel:nth-child(2) { width: 48%; }
.ov-busy .skel:nth-child(3) { width: 55%; }

/* Empty states. Compact cards (Matches, Sequences, Appointments, Leads, Activity) and the larger Revenue Radar variant. */
.ov-empty { flex: 1 1 auto; justify-content: flex-start; padding: 0 8px; }
.ov-empty .empty-icon { width: 28px; height: 28px; margin-bottom: 0; color: #9da1a0; stroke-width: 1.25; }
.ov-empty .empty-title { margin-top: 12px; color: #fbfcfb; font-size: 14.5px; line-height: 18px; letter-spacing: -.003em; }
.ov-empty .empty-text { max-width: 220px; margin-top: 4px; color: #afb3b2; font-size: 11.4px; line-height: 12.75px; }
.ov-cta { --h: 26px; gap: 10px; margin-top: 6px; padding: 0 21px 0 24px; border-radius: var(--r-1); background: #f1f0eb; color: #0b0d0b; font-size: 11.9px; }
.ov-cta .icon { width: 12px; height: 12px; stroke-width: 1.9; }
.ov-cta:hover { background: #fbfaf6; }

.ov-matches .ov-empty, .ov-sequences .ov-empty { padding-top: 19px; }
.ov-pair-low .ov-empty { padding-top: 12.5px; }
.ov-appointments .empty-icon { width: 26px; height: 26px; }
.ov-pair-low .ov-empty .empty-title { margin-top: 8px; }
.ov-pair-low .ov-empty .empty-text { max-width: none; margin-top: 5px; font-size: 11.1px; line-height: 13px; }
.ov-activity .ov-empty { padding-top: 34px; }
.ov-activity .ov-empty .empty-title { margin-top: 9px; font-size: 13.6px; }
.ov-activity .ov-empty .empty-text { max-width: 296px; margin-top: 3px; font-size: 12px; line-height: 17px; }

/* Revenue Radar card: title 22.5px; empty state centred in the left 684px, the map on the right. */
.ov-radar .card-title { margin-top: 7px; font-size: 22.5px; line-height: 27px; }
.ov-radar .card-sub { margin-top: 3.5px; font-size: 12.8px; }
.ov-radar .ov-body { margin-right: 133px; }
.ov-empty-lg { padding-top: 36.5px; }
.ov-empty-lg .empty-icon { width: 40px; height: 40px; color: #7c807f; stroke-width: 1.05; }
.ov-empty-lg .empty-title { margin-top: 10px; font-size: 16.1px; line-height: 20px; }
.ov-empty-lg .empty-text { max-width: 270px; margin-top: 2px; color: #b3b7b6; font-size: 13.3px; line-height: 18px; }
.ov-empty-lg .ov-cta { --h: 33px; margin-top: 12px; padding: 0 25px 0 27px; background: #e3edde; font-size: 13.7px; }
.ov-empty-lg .ov-cta:hover { background: #edf4e9; }
.ov-empty-lg .ov-cta .icon { width: 13px; height: 13px; }
.ov-radar.has-rows .ov-body { margin-right: 0; }
.ov-radar.has-rows .ov-map { display: none; }

/* The map: 343 × 298 at the card's top-right, faint hairlines fading out from the highlighted block. */
.ov-map { position: absolute; top: 0; right: 0; width: 343px; height: 298px; pointer-events: none; }
/* Narrower cards: the map keeps its first lines at least 24px clear of the centred empty state (content ≈ 280px wide,
   centred in the card minus the 133px reserve) and slides right instead, clipped by the card. */
.ov-radar:not(.has-rows) .ov-map { right: auto; left: max(100% - 343px, 50% + 64px); }
.ov-map-grid path { fill: none; stroke: rgb(205 218 214 / .085); stroke-width: 1; shape-rendering: crispEdges; }
.ov-map-grid .dim { stroke: rgb(205 218 214 / .05); }
.ov-map-grid .hi { stroke: rgb(214 226 222 / .15); }
.ov-map-roads path { fill: none; stroke: rgb(205 218 214 / .1); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ov-map-roads .hi { stroke: rgb(214 226 222 / .2); }
.ov-map-roads .dim { stroke: rgb(205 218 214 / .055); }
.ov-map-dots rect { fill: rgb(214 226 222 / .2); }
.ov-map-marks rect { fill: rgb(214 226 222 / .24); stroke: rgb(226 234 230 / .3); stroke-width: 1; }
.ov-map-mark-cores rect { fill: rgb(240 246 242 / .85); }
.ov-map-focus { fill: rgb(214 226 222 / .03); stroke: rgb(232 238 230 / .62); stroke-width: 1.5; }
.ov-map-focus-core { fill: rgb(8 11 11 / .45); }
.ov-map-focus-dot { fill: #f2f6f0; }

/* Radar rows (populated): four single-line rows fit the card's 300px. */
.ov-table-wrap { margin: 12px 0 0; }
.ov-table th { padding: 0 12px 7px 0; }
.ov-table td { height: 35px; padding: 0 12px 0 0; color: var(--text-2); white-space: nowrap; }
.ov-table th:last-child, .ov-table td:last-child { padding-right: 0; text-align: right; }
.ov-table th:first-child, .ov-table td:first-child { width: 46%; }
.ov-table tbody tr:hover { background: transparent; }
.ov-unit { display: flex; align-items: baseline; gap: 8px; min-width: 0; max-width: 380px; border-radius: var(--r-1); }
.ov-unit strong { flex: 0 1 auto; min-width: 48px; overflow: hidden; color: var(--text); font-size: var(--fs-base); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.ov-unit small { flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; color: var(--text-4); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.ov-unit:hover strong { text-decoration: underline; text-decoration-color: var(--line-hover); text-underline-offset: 3px; }
.ov-table .level { min-width: 0; height: 20px; font-size: 11px; }

/* ── Your next steps ───────────────────────────────── */
.ov-checklist { margin: 9px -7px 0 0; }
.ov-todo { padding-bottom: 4px; }
.ov-todo .card-title { font-size: 19.2px; }
.ov-todo .card-sub { font-size: 12.2px; }
.ov-todo .check-row { min-height: 52.7px; padding: 0 0 0 4px; }
.ov-todo .check-row:last-child { border-bottom: 0; }
.ov-checklist .check-dot { border-color: #9fa3a2; }
.ov-checklist .check-text { padding: 0 12px 0 28px; }
.ov-checklist .check-text strong { color: #f1f3f2; font-size: 12.1px; line-height: 15px; }
.ov-checklist .check-text small { margin-top: 3px; color: #a3a7a6; font-size: 11px; line-height: 14px; }
.ov-checklist .check-row.is-done .check-text strong { color: var(--text-3); }
.ov-checklist .go-btn { width: 30px; height: 30px; border-color: #242927; background: #1b201d; color: var(--text); }
.ov-checklist .go-btn:hover { border-color: var(--line-hover); background: #232825; }
.ov-checklist .go-btn .icon { width: 13px; height: 13px; stroke-width: 1.7; transition: translate var(--dur-2) var(--ease-out); }
.ov-checklist .go-btn:hover .icon { translate: 1.5px 0; }
.ov-setup .ov-checklist { margin: 4px 0 0; }
.ov-setup .check-row { padding: 6px 0 6px 4px; }

/* ── Lists (populated cards) ───────────────────────── */
.ov-list { margin: 12px -6px 0; padding: 0; list-style: none; }
.ov-list li + li { border-top: 1px solid var(--line-faint); }
.ov-item { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 5px 6px; border-radius: var(--r-1); transition: background-color var(--dur-1) var(--ease-out); }
.ov-item:hover { background: rgb(255 255 255 / .025); }
.ov-item-main { flex: 1 1 auto; min-width: 0; }
.ov-item-main strong { display: block; overflow: hidden; color: var(--text); font-size: 12.5px; font-weight: 400; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.ov-item-main small { display: block; overflow: hidden; margin-top: 1px; color: var(--text-4); font-size: 11px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
/* The meta (a time, a score, a date) keeps its width up to 45% of the row; the title and detail lines give way first. */
.ov-item-meta { flex: 0 0 auto; min-width: 0; max-width: 45%; overflow: hidden; color: var(--text-2); font-size: 11.5px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.ov-item-meta.is-hot { color: var(--text); }
.ov-item-meta.is-due { color: var(--warn); }
.ov-item-meta.is-muted { color: var(--text-4); }
.ov-item-go { width: 12px; height: 12px; color: var(--text-4); transition: translate var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.ov-item:hover .ov-item-go { color: var(--text); translate: 2px 0; }
.ov-feed { margin-top: 9px; }
.ov-feed .ov-item { min-height: 38px; padding-top: 3px; padding-bottom: 3px; }
.ov-activity:has(.ov-feed) { padding-bottom: 12px; }
.ov-feed-icon { width: 14px; height: 14px; color: var(--text-3); }
.ov-feed .ov-item-meta { color: var(--text-4); font-size: 11px; }

/* ── Performance ───────────────────────────────────── */
.ov-perf .card-head { align-items: flex-start; }
.ov-perf .card-head .section-label { margin-top: -1px; }
.ov-period-sm { margin: -6px -3px -12px 0; }
.ov-perf-title { margin-top: 9px; color: #e3e6e5; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0; }
.ov-perf-value { margin-top: 5px; color: #fbfcfb; font-size: 23px; font-weight: 400; line-height: 26px; letter-spacing: -.01em; }
.ov-chart { position: relative; flex: none; height: 100px; margin-top: 15px; }

/* ── Failure ───────────────────────────────────────── */
.ov-error { margin-top: 0; }
.ov-error-card { display: grid; place-items: center; min-height: 360px; }
.ov-error-card .empty-state { padding: 48px 16px; }
.ov-error-card .empty-icon { width: 32px; height: 32px; color: var(--text-4); }
.ov-error-card .empty-title { margin-top: 14px; font-size: 16px; line-height: 20px; }
.ov-error-card .empty-text { max-width: 360px; margin-top: 6px; font-size: 12.5px; line-height: 18px; }
.ov-error-card .ov-cta { --h: 32px; margin-top: 16px; padding: 0 20px 0 22px; font-size: 12.5px; }
.ov-error-card .ov-cta .icon { width: 13px; height: 13px; }
.ov.is-loading .ov-main { opacity: .6; transition: opacity var(--dur-2) var(--ease-out); }

/* ── Charts (/js/charts.js) ────────────────────────── */
.lrc { position: relative; }
.lrc svg { display: block; overflow: visible; font-family: var(--font); }
.lrc svg:focus { outline: none; }
.lrc svg:focus-visible { outline: 1.5px solid rgb(226 233 220 / .6); outline-offset: 4px; border-radius: 2px; }
.lrc-grid { stroke: rgb(214 222 219 / .14); stroke-width: 1; stroke-dasharray: 2 4.3; shape-rendering: crispEdges; }
.lrc-vgrid { stroke: rgb(214 222 219 / .15); }
.lrc-base { stroke: rgb(226 230 229 / .68); stroke-width: 1.6; stroke-dasharray: 3 3.25; }
.lrc-ylabel, .lrc-xlabel { fill: #aeb2b1; font-size: 9.75px; }
.lrc-line { fill: none; stroke: #e6ece2; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lrc-cross { stroke: rgb(226 233 220 / .3); stroke-width: 1; stroke-dasharray: 2 3; shape-rendering: crispEdges; }
.lrc-marker { fill: var(--card); stroke: #eef2ec; stroke-width: 1.5; }
.lrc-empty { position: absolute; display: grid; place-items: center; margin: 0; color: var(--text-4); font-size: 11px; line-height: 1.3; text-align: center; pointer-events: none; }
.lrc-empty span { padding: 1px 8px; background: var(--card); }
.lrc-tip { position: absolute; z-index: 5; display: grid; gap: 1px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--overlay); box-shadow: var(--shadow); white-space: nowrap; pointer-events: none; }
.lrc-tip strong { color: var(--text); font-size: 12px; font-weight: 500; line-height: 15px; }
.lrc-tip small { color: var(--text-3); font-size: 11px; line-height: 14px; }

/* ── Responsive ────────────────────────────────────── */
/* Two columns: both end on the same line; the last card of the shorter column takes up the difference. */
@media (min-width: 1241px) {
  .ov-grid { align-items: stretch; }
  .ov-col { grid-template-rows: auto auto 1fr; }
}
/* Six KPI cards need ~159px each ("Revenue opportunity" + arrow); below that they wrap to 3 × 2. */
@media (max-width: 1400px) {
  .ov-grid { grid-template-columns: minmax(0, 857fr) minmax(340px, 387fr); }
  .ov-head-art { opacity: .6; }
}
@media (max-width: 1300px) {
  .ov-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1240px) {
  .ov-grid { grid-template-columns: minmax(0, 1fr); }
  .ov-col-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .ov-col-side .ov-perf { grid-column: 1 / -1; }
  .ov-activity .ov-body:has(> .ov-empty) { justify-content: center; }
  .ov-activity .ov-empty { flex: none; padding-top: 0; padding-bottom: 12px; }
  .ov-head-art { display: none; }
}
@media (max-width: 860px) {
  .ov-radar .ov-body { margin-right: 0; }
  .ov-map { opacity: .35; }
  .ov-radar:not(.has-rows) .ov-map { left: max(100% - 343px, 50% + 130px); }
  .ov-table th:nth-child(4), .ov-table td:nth-child(4) { display: none; }
}
@media (max-width: 640px) {
  .ov-head { flex-wrap: wrap; gap: 14px; min-height: 0; margin-bottom: 16px; }
  .ov-head .page-title { font-size: 26px; line-height: 31px; }
  .ov-head .page-sub { font-size: 13.5px; line-height: 20px; }
  .ov-period-lg { margin-top: 0; }
  .ov-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ov-kpi { min-height: 100px; }
  .ov-grid { margin-top: 12px; gap: 12px; }
  .ov-col, .ov-pair { gap: 12px; }
  .ov-pair, .ov-col-side { grid-template-columns: minmax(0, 1fr); }
  .ov-radar { min-height: 0; }
  .ov-map { width: 260px; height: 226px; opacity: .25; }
  .ov-radar:not(.has-rows) .ov-map { left: max(100% - 260px, 50% + 140px); }
  .ov-empty-lg { padding: 28px 0 8px; }
  .ov-pair .ov-card, .ov-pair-low .ov-card, .ov-todo, .ov-activity, .ov-perf { min-height: 0; }
  .ov-empty { padding-bottom: 6px; }
  .ov-activity .ov-empty { padding-top: 22px; }
  .ov-table { table-layout: fixed; }
  .ov-table th:first-child, .ov-table td:first-child { width: auto; }
  .ov-table th:nth-child(2) { width: 72px; }
  .ov-table th:nth-child(5) { width: 76px; }
  .ov-table th:nth-child(3), .ov-table td:nth-child(3) { display: none; }
  .ov-unit small { display: none; }
}
@media (max-width: 480px) {
  .ov-map { display: none; }
}
@media (max-width: 400px) {
  .ov-kpi { padding: 13px 11px 12px 13px; }
  .ov-kpi .kpi-value { font-size: 23px; }
  .ov-card { padding: 15px 15px 16px; }
  .ov-todo { padding-bottom: 4px; }
  .ov-checklist { margin-right: -4px; }
}