/* Overview page layout, header and month navigator (#3456; Figma 25:40517 Main
 * 25:40670, header 25:40674, navigator 25:40681; collapsed sidebar 15:3497;
 * 1920 20:6627; empty 16:4288; active 50:18330; dark 52:25647).
 * Slots the other Overview issues fill: the cards (#3457) in .ov-cards, the
 * balance (#3458) in .ov-balance-slot, Active Reviews (#3459-#3461) in
 * #overview-recent, the Activity Log (#3462) in .ov-activity-slot (toggle
 * .ov-main.is-log-closed to drop its column), the period selector (#3463) on
 * [data-ov-month-label] (add .is-open to .ov-month-nav while it is open).
 * Tokens only; dark mode comes from tokens.css. */

/* Main 25:40670: 24px top, 40px left and right. */
.content:has(#overview-body) { padding: var(--space-6) 40px; }

/* The side column (balance card above, Activity Log below): 272px up to 1322px
   of content (every 1474 frame, 15:3497 included), growing linearly to 496px at
   1572px (the 1920 frame 20:6627). Proposed, not in Figma: the rule between. */
.overview-body { --ov-side: clamp(272px, calc(272px + (100% - 1322px) * 0.896), 496px); }
.overview-body > .stack { gap: var(--space-2); }
.overview-body #overview-audit:empty { display: none; }

/* Top cards row 25:40692: cards share what the side column leaves, 17px apart. */
.ov-top { display: grid; grid-template-columns: minmax(0, 1fr) var(--ov-side); gap: 17px; align-items: stretch; }
.ov-top > #overview-month, .ov-top > #overview-month > [data-ov-loading] { display: contents; }
/* auto-fit: two or three cards share the row at 1474 and wrap before one drops under 260px. */
.overview-body .ov-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 17px; margin-bottom: 0; }

/* Lower area 25:40807: Active Reviews, 16px, the Activity Log; one column when the log is closed (15:2893). */
.ov-main { display: grid; grid-template-columns: minmax(0, 1fr) var(--ov-side); gap: var(--space-4); align-items: start; }

/* Below 1100px (not in Figma): one column, cards wrap. */
@media (max-width: 1100px) {
  .ov-top, .ov-main { grid-template-columns: minmax(0, 1fr); }
}

/* Header 25:40674: 50px, title block left, navigator right-aligned at the top. */
.page-header.ov-header { flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3); min-height: 50px; margin: 0 0 var(--space-2); }
.ov-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov-header h1 { font: var(--type-h1); letter-spacing: 0; color: var(--fg-strong); }
.ov-header .subtitle { margin: 0; font: 700 14px/20px var(--font-sans); color: var(--fg-muted); }

/* Month navigator 25:40681: 35px, 17px sides, 8px gaps, a 120px label box. */
.ov-month-slot { display: flex; justify-content: flex-end; margin-left: auto; }
.ov-month-nav {
  display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; height: 35px; padding: 0 16px; /* 17px to the chevron, the 1px border included */
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.ov-month-label { box-sizing: border-box; min-width: 120px; padding: 0 var(--space-3); text-align: center; font: 700 14px/20px var(--font-sans); color: var(--fg-strong); white-space: nowrap; }
/* The chevrons: the DS icon-only ghost, a 24px hit target around a 16px glyph that
   keeps Figma's 16px footprint (the 4px overhang sits in the padding). */
.ov-header .ov-month-nav .btn-icon { --btn-box: 24px; --btn-glyph: 16px; margin: -4px; border-color: transparent; color: var(--fg-muted); }
.ov-header .ov-month-nav .btn-icon > svg { stroke-width: 2; }
.ov-header .ov-month-nav .btn-icon:disabled { opacity: 0.4; } /* next on the current month; proposed, not in Figma */

/* Active (50:18330, 20:7322): another period than the default, or the selector open. */
.ov-month-nav.is-active, .ov-month-nav.is-open { background: var(--accent-tint); border-color: var(--accent); }
.ov-month-nav.is-active .ov-month-label, .ov-month-nav.is-open .ov-month-label { font-family: var(--font-mono); }

/* Disabled (16:4288): nothing to navigate; the month alone. */
.ov-month-nav.is-disabled { border-color: var(--border-card); box-shadow: none; }
.ov-month-nav.is-disabled .ov-month-label { color: var(--fg-muted); }

/* The label is the period selector's trigger (#3463): the label box, as a button. */
button.ov-month-label { height: 100%; border: 0; background: none; cursor: pointer; border-radius: var(--radius-sm); }
button.ov-month-label:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Period selector (#3463, #3512; 20:6579, 20:6531, 20:6435): the DS popover with the selected period on top. */
.ui-popover.ov-period .ui-popover-body { gap: var(--space-4); }
.ov-period .ui-options { gap: var(--space-1); }
.ov-period-selected { display: grid; gap: 5px; padding: 10px var(--space-3); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius); }
/* --fg-muted, not Figma's gray 400: that is 2.5:1 on white, under WCAG AA (#3512). */
.ov-period-eyebrow, .ov-period-days { margin: 0; font: var(--type-code-eyebrow); color: var(--fg-muted); }
.ov-period-summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin: 0; }
.ov-period-summary strong { font: 600 13px/16px var(--font-sans); color: var(--fg-strong); }
.ov-period-days { color: var(--live-text); }
.ov-period .ui-option[aria-pressed="true"] .ui-option-name { font-weight: 600; }
.ov-period-today { margin: 0; font: 400 10px/12px var(--font-sans); color: var(--fg-muted); }
.ov-period .ui-popover-foot { background: var(--surface-raised); }
.ov-period .ov-period-cancel { flex: none; width: 126px; }
/* Custom period's footer (20:6218): Cancel 116 and Apply 164, right-aligned, not stretched. */
.ov-period.is-custom .ov-period-cancel { width: 116px; }
.ov-period.is-custom .ui-popover-foot > .btn-primary { flex: none; width: 164px; }
.ov-period .ov-period-more { display: block; color: var(--fg-muted); } /* Custom period's chevron (20:6435) */

/* Custom period (#3512; 20:6218): 656 wide, the options in a 208px column on the left
   (raised surface, a divider right), the calendar on the right (20px padding). */
.ui-popover.ov-period.is-custom { width: min(656px, calc(100vw - 2 * var(--space-4))); }
.ui-popover.ov-period.is-custom .ui-popover-body { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 0; padding: 0; border-top: 1px solid var(--border-strong); }
.ov-period-side { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5) var(--space-3); background: var(--bg); border-right: 1px solid var(--border-strong); }
.ov-period-side .ui-option:not([aria-pressed="true"]) { background: var(--surface); border-color: var(--surface); }
.ov-period-side .ui-option:not([aria-pressed="true"]):hover { background: var(--surface-sunken); }
.ov-period-cal { display: grid; align-content: start; gap: var(--space-4); padding: var(--space-5); min-width: 0; }
.ov-cal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.ov-cal-field { display: grid; gap: 7px; min-width: 0; }
.ov-cal-input {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); box-sizing: border-box; height: 36px; margin: 0; padding: 0 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font: 500 12px/15px var(--font-sans); color: var(--fg-strong);
}
.ov-cal-input > svg { flex: none; width: 14px; height: 14px; color: var(--fg-muted); }
.ov-cal-input.is-empty { color: var(--fg-muted); font-weight: 400; }
.ov-cal-input.is-edited { border-color: var(--brand); }
.ov-cal-input.is-edited > svg { color: var(--brand); }
.ov-cal-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-strong); }
.ov-cal-count { display: flex; align-items: center; gap: 6px; margin: 0; font: 400 11px/14px var(--font-sans); color: var(--live-text); }
.ov-cal-count > svg { flex: none; width: 14px; height: 14px; }
.ov-cal-clear { padding: 0; border: 0; background: none; font: 500 11px/14px var(--font-sans); color: var(--live-text); cursor: pointer; border-radius: var(--radius-xs); }
.ov-cal-clear:hover { text-decoration: underline; }
.ov-cal-clear:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) {
  .ui-popover.ov-period.is-custom .ui-popover-body { grid-template-columns: minmax(0, 1fr); }
  .ov-period-side { border-right: 0; border-bottom: 1px solid var(--border-strong); }
}

@media (prefers-reduced-motion: reduce) { .ov-month-nav { transition: none; } }
:root[data-motion="reduce"] .ov-month-nav { transition: none; }

/* ==== Activity Log (#3462): Figma 25:41117 / 25:41120; closed 15:2893, collapsed 20:9341 ==== */
/* Open/close (not in Figma): the column narrows to nothing and the panel fades,
   200 ms ease-out; the panel keeps at least the 1474 frame's width meanwhile, clipped by the slot. */
.ov-main { transition: grid-template-columns var(--motion-slow) var(--ease-out), column-gap var(--motion-slow) var(--ease-out); }
.ov-main.is-log-closed { grid-template-columns: minmax(0, 1fr) 0px; column-gap: 0; }
.ov-activity-slot { min-width: 0; overflow: hidden; transition: opacity var(--motion-slow) var(--ease-out), visibility 0s linear 0s; }
.ov-main.is-log-closed > .ov-activity-slot { opacity: 0; visibility: hidden; transition: opacity var(--motion-slow) var(--ease-out), visibility 0s linear var(--motion-slow); }
.ov-activity-slot:empty { display: none; }

/* Panel 25:41120: 684 tall at most, the list scrolls inside it, 12px under the head. */
.ov-log { box-sizing: border-box; width: 100%; min-width: 272px; max-height: 684px; gap: var(--space-3); }
.ov-log-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ov-log .ui-panel-title { margin: 0; }
.ov-log .ui-panel-actions { gap: var(--space-1); }
/* CollapseBtn 25:41128: 20px, sunken fill, 1px border, radius 6. */
.ov-log .ui-panel-action { box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-sunken); }
.ov-log .ui-panel-action:hover { background: var(--surface-header); color: var(--fg); }
.ov-log .ui-panel-action svg { width: 12px; height: 12px; }
.ov-log-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ov-log-scroll { flex: 1 1 auto; scrollbar-width: none; } /* 25:40517: no scrollbar; the fade and "Scroll for more" say there is more */
.ov-log-scroll::-webkit-scrollbar { display: none; }
.ov-log .ui-scroll-hint { flex: none; }

/* Entry 25:41138: dot 8px 6px down, a 2px-gap text column. */
.activity-item .ui-dot { margin-top: 6px; }
.activity-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.activity-title { font: var(--type-body); font-weight: 600; color: var(--fg); }
/* A critical title is coral in Figma (#f08a7a, 2.6:1 on white): --danger-fg keeps it AA. */
.activity-critical .activity-title { color: var(--danger-fg); }
/* Detail 12/18 and time 11/16.5 are #9aa7a1 in Figma (2.5:1): --fg-muted keeps them AA. */
.activity-detail { font: var(--type-body-sm); line-height: 18px; color: var(--fg-muted); }
.activity-detail + .activity-when { padding-top: 2px; }
.activity-when { font: var(--type-meta); color: var(--fg-muted); }
.ov-log-more { display: flex; align-items: center; justify-content: center; margin: 0; padding: var(--space-3) var(--space-5); font: var(--type-meta); color: var(--fg-muted); }

/* Empty and error: the #3443 states, smaller. */
.ov-log .ms-state { padding: var(--space-6) var(--space-5); }
.ov-log .ms-state-icon { width: 48px; height: 48px; }
.ov-log .ms-state-icon svg { width: 28px; height: 28px; }

/* Reopen 15:3201: Secondary-active M after Refresh (label proposed, not in Figma). */
.page-header .btn.ov-log-reopen { border-color: var(--btn-secondary-active-border); } /* console.css's .page-header .btn draws a border Figma's has not */
.ov-log-reopen svg { width: 12px; height: 12px; }

@media (max-width: 1100px) {
  .ov-log { min-width: 0; }
  .ov-main.is-log-closed { grid-template-columns: minmax(0, 1fr); }
  .ov-main.is-log-closed > .ov-activity-slot { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ov-main, .ov-activity-slot, .ov-main.is-log-closed > .ov-activity-slot { transition: none; } }
:root[data-motion="reduce"] :is(.ov-main, .ov-activity-slot, .ov-main.is-log-closed > .ov-activity-slot) { transition: none; }
/* ==== end Activity Log ==== */

/* ==== Top cards (#3457): Findings addressed 25:40693, PRs & reviews 25:40732 ====
 * Data variants 20:7322 / 15:2893, empty 16:4288, dark 52:25647. The ds card
 * (.ui-card) and gauge (uiGauge) at Figma's metrics. AA deviations, as in
 * ds/surfaces.css: Figma's #adb5bd / #9ca3af labels and #10b981 "Clear" use
 * --fg-muted and --live-text. Severity tags use the reviews table's mapping
 * (proposed, not in Figma: the frames disagree). */
.ov-stat { display: flex; flex-direction: column; min-width: 0; min-height: 227px; padding: 19px 23px 0; }
.ov-stat-head { align-items: center; height: 32px; }
.ov-stat-head > .ui-tooltip-wrap { display: flex; }
/* The icon sits on the card's right edge: the tip opens leftward from it, so a
   centred 240px tip never runs past a 360px screen (axe-scan, #1251). */
.ov-stat-head > .ui-tooltip-wrap .ui-tooltip { left: auto; right: 0; transform: translateY(-2px); }
.ov-stat-head > .ui-tooltip-wrap:is(:hover, :focus-within, [data-tip-open]) .ui-tooltip { transform: none; }
.ov-stat-head > .ui-tooltip-wrap .ui-tooltip::after { left: auto; right: 10px; margin-left: 0; }
.ov-stat-eyebrow { color: var(--fg-muted); }
.ov-stat-sub { display: block; margin-top: 1px; letter-spacing: 0.2px; }
.ov-stat-icon { width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius); }
.ov-stat-icon svg { width: 16px; height: 16px; }
button.ov-stat-icon { cursor: help; }
button.ov-stat-icon:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* The gauge (25:40695): a 160x80 half-donut, outer r 80, inner r 62.4, in a 100px
   box. The ds arc is r 80 in a 200x112 box: drawn at 178px wide with an
   19.8-unit stroke it lands on Figma's 160px arc and 17.6px stroke. */
.ov-findings .ui-gauge { height: 100px; margin-top: 3px; align-items: flex-start; }
.ov-findings .ui-gauge svg { width: 178px; height: 99.7px; margin-top: -9px; }
.ov-findings .ui-gauge-track, .ov-findings .ui-gauge-value { stroke-width: 19.8; }
.ov-findings .ui-gauge-figure { bottom: 14px; }
.ov-findings .ui-gauge-figure span { font: 700 8px/12px var(--font-sans); }
.ov-gauge-foot { display: flex; height: 14px; justify-content: space-between; gap: var(--space-2); margin-top: 6px; font: var(--type-micro); text-transform: uppercase; color: var(--fg-muted); }

/* A range too busy to read every merged PR's findings says whose it counted (#3512). */
.ov-findings-note { margin: 8px 0 0; font: var(--type-micro); color: var(--fg-muted); }

/* P0 / P1 / P2 (25:40706): addressed of total, "Clear" in green with nothing open. */
.ov-sev-row { display: flex; justify-content: space-between; margin: 6px 0 0; padding: 4px 16px 0; list-style: none; }
.ov-sev { display: flex; flex-direction: column; align-items: center; }
.ov-sev:nth-child(2) { padding: 0 24px; border-left: 1px solid var(--divider); border-right: 1px solid var(--divider); }
.ov-sev-tag { font: var(--type-badge-mono); line-height: 13px; }
.ov-sev-p0 { color: var(--risk-p0-fg); }
.ov-sev-p1 { color: var(--risk-p1-fg); }
.ov-sev-p2 { color: var(--risk-p2-fg); }
.ov-sev.is-clear .ov-sev-tag { color: var(--live-text); }
.ov-sev-value { font: 500 10px/14px var(--font-sans); letter-spacing: 0.1px; color: var(--fg-muted); white-space: nowrap; }

/* PRs & reviews rows (25:40733, 25:40740): 64px each, 6px under the header, 14px apart. */
.ov-ev-row { min-height: 64px; margin-top: 6px; }
.ov-ev-row + .ov-ev-row { margin-top: 14px; }
.ov-ev-label { margin: 0; font: 700 9px/14px var(--font-sans); letter-spacing: -0.27px; text-transform: uppercase; color: var(--fg-muted); }
.ov-ev-figure { display: flex; align-items: baseline; gap: var(--space-2); margin: 3px 0 0; height: 30px; }
.ov-ev-figure strong { font: var(--type-figure); color: var(--fg); }
.ov-ev-figure span[aria-hidden] { font: 700 12px/18px var(--font-sans); color: var(--fg-muted); }
.ov-ev-row .ui-progress { width: calc(100% - 9px); }

:root[data-motion="reduce"] .ov-findings .ui-gauge-value { transition: none; }
/* ==== end top cards (#3457) ==== */

/* ==== Balance card (#3458): Figma 25:40758; 1920 20:6627; low runway 20:7322; welcome gift
 * 16:4477 (icon 16:4501); dark 52:25647. The ds card at Figma's 25px padding and 24px gap; the
 * figures, runway and usage bar are the Billing card's (pages/billing.css). AA deviations, as on
 * the top cards: Figma's #adb5bd / #9ca3af labels use --fg-muted. Refill keeps the ds Primary in
 * dark (Figma samples a mint #34d399; the #3438 buttons decide). ==== */
.ov-balance { display: flex; flex-direction: column; gap: var(--space-6); min-height: 227px; padding: 25px; border-color: var(--divider); }
.ov-balance-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: 0 1px; }
.ov-balance .ov-balance-eyebrow { margin: 0; font: var(--type-eyebrow); letter-spacing: 0.5px; text-transform: uppercase; color: var(--fg-muted); }
/* Figures 12px under the header, the bar 16px under them, its labels 6px under the bar. */
.ov-balance-body { display: flex; flex-direction: column; gap: var(--space-4); margin-top: calc(12px - var(--space-6)); }
.ov-balance-body .billing-balance-row { margin-top: 0; }
.ov-balance-body .billing-balance-amount { color: var(--fg-strong); }
.ov-balance-usage .ui-progress { height: 8px; margin: 0; }
.ov-balance-usage .ui-progress > span { transition: width 600ms var(--ease-out); }
.ov-balance-usage .billing-balance-usage-foot { position: static; margin-top: 6px; }
.ov-balance-set-limit { display: inline-block; margin-top: var(--space-1); font: var(--type-micro); color: var(--primary-text); }
/* Actions: Secondary S 136 and Primary S 74 at 1474; at 1920 (20:6627) M, the Refill stretching. */
.ov-balance-actions { display: flex; gap: var(--space-2); margin-top: auto; padding: 0 1px; }
.ov-balance-actions .btn { --btn-glyph: 12px; flex: 0 0 auto; }
@container (min-width: 400px) {
  .ov-balance-actions .btn { --btn-h: 36px; --btn-font: var(--type-button-m); }
  .ov-balance-actions .btn-primary { flex: 1 1 auto; }
}
.ov-balance-slot { container-type: inline-size; }
.ov-balance-note { margin: 0; font: var(--type-body-sm); color: var(--fg-muted); }

/* Welcome gift (16:4477): 24px padding, 8px gap, Plex Mono throughout, no runway, bar or buttons. */
.ov-balance-gift { gap: var(--space-2); padding: var(--space-6); }
.ov-balance-gift .ov-balance-eyebrow { font-family: var(--font-mono); }
.ov-gift-title { display: flex; flex-direction: column; gap: 2px; margin: -2px 0 0; font: 700 10px/15px var(--font-mono); text-transform: uppercase; color: var(--fg-strong); }
.ov-gift-title span:first-child { letter-spacing: 0.5px; }
.ov-gift-title span + span { letter-spacing: 0.2px; }
.ov-gift-amount { display: flex; flex-direction: column; gap: var(--space-1); }
.ov-gift-amount p { margin: 0; }
.ov-gift-label { font: 700 9px/14px var(--font-mono); letter-spacing: -0.27px; text-transform: uppercase; color: var(--fg-muted); }
.ov-gift-figure { font: 700 26px/30px var(--font-mono); color: var(--fg-strong); }
.ov-balance-expiry { margin: 4px 0 0; font-size: 12px; color: var(--fg-muted); }
.ov-gift-tag { display: flex; align-items: center; gap: var(--space-2); }
.ov-gift-icon {
  display: grid; place-items: center; box-sizing: border-box; width: 28px; height: 28px;
  border: 1px solid var(--accent-tint-strong); border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--live-text);
  animation: ov-gift-wiggle 4s infinite;
}
.ov-gift-pill {
  padding: 6px 10px; border: 1px solid var(--accent-tint-strong); border-radius: var(--radius-pill); background: var(--surface);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.03); font: 700 10px/15px var(--font-mono); letter-spacing: 0.2px; text-transform: uppercase; color: var(--fg-strong);
}
/* The gift's wiggle (16:4501): still, a shake about its centre from 8.75% to 30%, still to the end of 4s; ease-in-out per segment. */
@keyframes ov-gift-wiggle {
  0%, 8.75% { transform: rotate(0deg); animation-timing-function: ease-in-out; }
  13.75% { transform: rotate(7deg); animation-timing-function: ease-in-out; }
  18.75% { transform: rotate(-6deg); animation-timing-function: ease-in-out; }
  23.75% { transform: rotate(3deg); animation-timing-function: ease-in-out; }
  30%, 100% { transform: rotate(0deg); }
}

/* A member (not in Figma) and a failed first read: the header and one line. */
.ov-balance-member { gap: var(--space-3); }

@media (prefers-reduced-motion: reduce) { .ov-gift-icon { animation: none; } .ov-balance-usage .ui-progress > span { transition: none; } }
:root[data-motion="reduce"] .ov-gift-icon { animation: none; }
:root[data-motion="reduce"] .ov-balance-usage .ui-progress > span { transition: none; }
/* ==== end balance card (#3458) ==== */

/* ==== Active Reviews header and toolbar (issue 3459): heading 25:40809, Search and
 * Filter Bar 25:40823, menus 50:18330, filtered 20:7322, refreshed 20:7937,
 * dark 52:25647. The ds search, segmented, select and buttons at this frame's
 * metrics. AA deviations as elsewhere: Figma's #6c757d / #adb5bd greys use
 * --fg-muted. ==== */
#overview-recent > section { display: flex; flex-direction: column; gap: var(--space-4); }
.ov-recent-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); }
.ov-recent-title { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.ov-recent-title h2 { margin: 0; font: var(--type-title); line-height: 24px; color: var(--fg-strong); }
.ov-recent-title .ui-pill { height: auto; padding: 2px 8px; }
.ov-recent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ov-recent-actions .ov-log-reopen { border-color: var(--btn-secondary-active-border); }

/* Refresh: loading spins the icon (ms-spin, 1 s; still under reduced motion,
   the label says Refreshing…); done (20:7937) is the ds disabled look. */
.ov-refresh[aria-busy="true"] { cursor: progress; }
:root[data-motion="reduce"] .ov-refresh .ms-spin { animation: none; }

/* Filter card 25:40823: 17px in (the border included), 16 between rows. */
.ov-filters {
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-toolbar);
}
.ov-filters .pr-search { gap: 11px; border-radius: var(--radius-md); background: var(--search-field-bg); }
.ov-filters .pr-search input { background: transparent; }
.ov-filters .pr-search:has(input:not(:placeholder-shown)) kbd { visibility: hidden; } /* not in Figma: the hint hides once there is text */

/* Controls row: the segments, 16 to the selects, 8 between. */
.ov-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ov-controls > .ui-segmented { margin: 0 var(--space-2) 0 0; padding: 1px; border-radius: var(--radius-md); border-color: var(--border); }
.ov-controls .ui-segment { border-color: var(--border); }
.ov-controls .ui-segmented > .ui-segment:first-child { border-radius: 5px 0 0 5px; }
.ov-controls .ui-segmented > .ui-segment:last-child { border-radius: 0 5px 5px 0; }
.ov-controls .ui-segment[aria-pressed="true"] { background: var(--surface-sunken); color: var(--fg-strong); }
.ov-controls .dd-button, .ov-controls .select select { min-height: 36px; padding: 9px 12px 9px 13px; border-radius: var(--radius-md); border-color: var(--border); }
.ov-controls .dd-value { color: var(--fg); }

/* Funnel (Secondary icon-only L, 35 square, radius 8); set: accent border and tint, a 12px count. */
.ov-funnel-wrap { position: relative; display: inline-flex; }
.ov-funnel { --btn-icon: var(--fg-secondary); }
.btn-icon.btn-secondary.ov-funnel.is-set { border-color: var(--accent); background: var(--accent-tint); }
.ov-funnel-count {
  position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 12px; height: 12px;
  border-radius: var(--radius-pill); background: var(--brand); color: var(--btn-on-fill); font: 700 8px/1 var(--font-sans); pointer-events: none;
}

/* Filter popover 50:18330: about 158 wide, radius 8, 12 in, 8 apart; its selects' lists hang out of it. */
.ui-popover.ov-filter-pop { width: 172px; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius); overflow: visible; }
.ov-pop-eyebrow { margin: 0; font: var(--type-code-eyebrow); font-size: 9px; letter-spacing: var(--type-code-eyebrow-tracking); text-transform: uppercase; color: var(--fg-subtle); }
.ov-filter-pop .select, .ov-filter-pop .dd { display: flex; width: 100%; }
.ov-filter-pop .dd-button { font: 500 11px/14px var(--font-sans); white-space: normal; }
.ov-filter-pop .dd-value .ui-dot { margin-right: 6px; vertical-align: 1px; }
.ov-pop-apply { width: 100%; margin-top: var(--space-1); }

/* Menus (50:18330): radius 8, the popover shadow, 31px items, the chosen one sunken. */
#overview-recent .dd-list { padding: var(--space-2); border-radius: var(--radius); box-shadow: var(--shadow-popover); }
#overview-recent .dd-list [role=option] { min-height: 31px; padding: 7px var(--space-3); border-radius: var(--radius-md); font: 400 11px/16.5px var(--font-sans); color: var(--fg-muted); }
#overview-recent .dd-list [role=option] > span { display: inline-flex; align-items: center; gap: 6px; }
#overview-recent .dd-list [role=option][aria-selected=true] { background: var(--surface-sunken); color: var(--fg); font-weight: 400; }
#overview-recent .dd-list [role=option][aria-selected=true] .dd-check { display: none; }

/* Active filter chips 20:7322: one per filter, then Clear all; the x on hover or focus (not in Figma). */
.ov-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: calc(-1 * var(--space-1)) 0; }
.ov-chips + * { margin-top: 0; }
.ov-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--btn-secondary-fg); font: 700 10px/15px var(--font-sans); cursor: pointer;
}
.ov-chip-x { display: none; width: 10px; height: 10px; }
.ov-chip:is(:hover, :focus-visible) .ov-chip-x { display: block; }
.ov-chip:hover { border-color: var(--hover-border); }
.ov-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
#ov-recent-results { display: flex; flex-direction: column; gap: var(--space-4); }
/* ==== end Active Reviews toolbar (issue 3459) ==== */

/* ==== Active Reviews table (issue 3460; Figma 25:40860, 15:2893 / 20:6627 wide, 20:7322, 52:25647) ====
   The shared table (pages/pull-requests.css) in the Overview's card: radius 12,
   fixed columns with Pull request taking what is left, one-line titles, five
   rows' height kept on a short page (proposed), and the 68px footer 25:41105. */
#overview-recent .pr-console.pr-table-card { border-radius: var(--radius-xl); border-color: var(--border-strong); box-shadow: none; }
#overview-recent .pr-table-card .table-wrap { min-height: calc(56px + 5 * 73px); }
#overview-recent .pr-table-card .pr-history { min-width: 760px; table-layout: fixed; }
#overview-recent .pr-table-card .pr-history > thead th { height: 56px; }
#overview-recent .pr-table-card .pr-history .expander-cell { width: 48px; padding: 0 0 0 var(--space-4); }
#overview-recent .pr-table-card .pr-history .col-score { width: 110px; padding-left: 0; }
#overview-recent .pr-table-card .pr-history .col-issue { width: 70px; }
#overview-recent .pr-table-card .pr-history .col-findings { width: 145px; min-width: 0; }
#overview-recent .pr-table-card .pr-history .col-rounds { width: 65px; }
#overview-recent .pr-table-card .pr-history .col-cost { width: 71px; }
#overview-recent .pr-table-card .pr-history .col-activity { width: 79px; }
#overview-recent .pr-table-card .pr-history .col-action { width: 86px; padding-right: var(--space-2); text-align: left; }
/* The title gets the room (#3874): our row has a PR-state icon Figma's has not, so the
   cell's sides are 12px, not the Pull requests page's 20, and Actions is 86 (two 35px
   buttons, too large + skip, and its 8px sides) rather than 100, to keep more of a real title. */
#overview-recent .pr-table-card .pr-history .pr-col { padding-left: var(--space-3); padding-right: var(--space-3); }
#overview-recent .pr-table-card .pr-history td.pr-col { min-width: 0; }
#overview-recent .pr-table-card .pr-cell { min-width: 0; }
#overview-recent .pr-table-card .pr-text { min-width: 0; max-width: 100%; }
#overview-recent .pr-table-card .pr-text .title, #overview-recent .pr-table-card .pr-sub { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* An expanded PR's notes wrap inside the fixed-width card. */
#overview-recent .pr-table-card .pr-rounds-table td[colspan] { white-space: normal; }
#overview-recent .pr-table-card .ui-table-foot { min-height: 68px; padding: 17px var(--space-7) 16px; }
/* View all (the header's "All reviews" before #3460; not in Figma): a link before Previous / Next. */
#overview-recent .ui-pagination-buttons { align-items: center; }
#overview-recent .ov-view-all { margin-right: var(--space-3); font: 600 12px/16px var(--font-sans); color: var(--primary-text); text-decoration: none; }
#overview-recent .ov-view-all:hover { text-decoration: underline; }
/* ==== end Active Reviews table (issue 3460) ==== */

/* ==== Empty and error states (#3465): empty 16:4288 / 20:10564; error is not in
 * Figma (the #3443 error state in each section's frame). Loading: the page loader (#4179). ==== */
/* Empty card 16:4506: the content width, 633 tall at 1474, radius 12; the column 55px down,
   28 between the art, the text and the button. */
.ov-empty { display: flex; justify-content: center; box-sizing: border-box; min-height: 633px; padding: 55px var(--space-6) var(--space-6); border-color: var(--border-strong); border-radius: var(--radius-xl); }
.ov-empty .ms-state { gap: 0; align-content: start; padding: 0; }
.ov-empty .ms-state-art { margin-bottom: 28px; }
.ov-empty .ms-state-title { font: 600 20px/28px var(--font-sans); color: var(--fg-strong); }
.ov-empty .ms-state-body { max-width: 520px; margin-top: var(--space-3); font: 400 14px/22px var(--font-sans); color: var(--fg-quiet); }
.ov-empty .ms-state-action { margin-top: 28px; }
.ov-empty-cta { --btn-icon: light-dark(var(--brand-mint), var(--btn-on-fill)); min-width: 200px; }
.ov-empty .btn.ov-empty-cta > svg { width: 16px; height: 16px; }
.ov-empty-note { margin: 0; font: var(--type-body-sm); color: var(--fg-muted); }

/* The illustration (16:4508): Figma's mints as shares of the brand on the surface, its greys as tokens. */
.ov-empty-art {
  --art-m12: color-mix(in srgb, var(--brand) 12%, var(--surface)); --art-m25: color-mix(in srgb, var(--brand) 25%, var(--surface));
  --art-m50: color-mix(in srgb, var(--brand) 50%, var(--surface)); --art-m80: color-mix(in srgb, var(--brand) 80%, var(--surface));
  --art-line: color-mix(in srgb, var(--border-strong) 60%, var(--surface));
  display: block; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.ov-art-halo { fill: var(--celebrate-halo); stroke: color-mix(in srgb, var(--celebrate-ring) 50%, var(--surface)); }
.ov-art-arc { stroke: color-mix(in srgb, var(--celebrate-ring) 50%, var(--surface)); }
.ov-art-spark { stroke: var(--celebrate-spark); }
.ov-art-ring { stroke: var(--celebrate-ring); }
.ov-art-dot, .ov-art-m25 { fill: var(--art-m25); }
.ov-art-m12 { fill: var(--art-m12); }
.ov-art-m50 { fill: var(--art-m50); }
.ov-art-m80 { fill: var(--art-m80); }
.ov-art-m100 { fill: var(--brand); }
.ov-art-panel { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.2; }
.ov-art-rule { stroke: var(--art-line); }
.ov-art-pill { fill: var(--surface-sunken); }
.ov-art-tile { fill: var(--surface-raised); stroke: var(--border-strong); }
.ov-art-trend { stroke: var(--art-m80); stroke-width: 1.6; }
.ov-art-hex { fill: var(--surface-raised); stroke: var(--border-strong); }
.ov-art-web { stroke: var(--art-line); stroke-width: .8; }
.ov-art-area { fill: var(--art-m50); fill-opacity: .65; stroke: var(--brand); stroke-width: 1.5; }
.ov-art-node { fill: var(--brand); stroke: var(--surface); stroke-width: .8; }
.ov-art-plus-disc { fill: var(--art-m25); stroke: var(--art-m50); }
.ov-art-plus { stroke: var(--brand); stroke-width: 2; }

/* A failed section: the #3443 error state in its card. The cards row's spans the cards. */
.ov-error { display: grid; place-items: center; }
.ov-error .ms-state { padding: var(--space-6) var(--space-5); }
.ov-month-error, .ov-balance-error { min-height: 227px; }
.ov-balance-slot > .ov-balance-error { box-sizing: border-box; height: 100%; }
.ov-balance-error .ms-state { padding: var(--space-4) var(--space-2); }
.ov-balance-error .ms-state-icon { width: 48px; height: 48px; }
.ov-balance-error .ms-state-icon svg { width: 28px; height: 28px; }
.ov-balance-error .ms-state-body { display: none; }

/* ==== end empty and error states (#3465) ==== */

/* A capped PR read (#3874): the footer's total ends in "+", an info button's tooltip says why. */
.ov-cap-status { display: inline-flex; align-items: center; gap: var(--space-1); }
.ov-cap-info { display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--fg-muted); cursor: help; }
.ov-cap-info:hover { color: var(--fg); }
.ov-cap-info:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ov-cap-info svg { width: 12px; height: 12px; }