/* Shared UI components (app/ui.ts). Colours come from tokens.css only; the
 * components that already existed keep their one implementation in
 * app.css, console.css or support-widget.css (see ui.ts's header). */

/* ---- Badge (issue 3440): the Figma status badge, 1:6892. 24 tall, radius 3, a
 * 1px border in the tone, Inter Bold 11, an optional 10px icon (badge()). ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box;
  min-height: 24px; padding: 4px 8px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: var(--radius-xs); font: var(--type-label); line-height: 14px; white-space: nowrap;
  background: var(--neutral-bg); color: var(--neutral-fg);
}
.badge > svg { flex: none; }
.badge-success { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.badge-warning { background: var(--warning-bg); color: var(--warning-fg); }
.badge-danger { background: var(--danger-bg); color: var(--danger-fg); }
.badge-info { background: var(--info-bg); color: var(--info-fg); }
/* connected: an integration that is healthy. */
.badge-connected { background: var(--surface); color: var(--success-fg); border: 1px solid color-mix(in srgb, var(--success-fg) 35%, transparent); }
/* Severity badge (25:39636, severity()): 30x24, Plex Mono Bold 10, the
 * reviews table's tints (one mapping everywhere, proposed). P3 text is
 * --fg-muted: Figma's grey on the P3 tint is 4.39:1. P1 text is --risk-p1-fg:
 * Figma's on the P1 tint is 4.31:1. */
.badge-severity { justify-content: center; min-width: 30px; height: 24px; padding: 0 6px; font: var(--type-badge-mono); }
.badge-sev-p0 { background: var(--risk-p0-bg); border-color: var(--risk-p0-border); color: var(--risk-p0-fg); }
.badge-sev-p1 { background: var(--risk-p1-bg); border-color: var(--risk-p1-border); color: var(--risk-p1-fg); }
.badge-sev-p2 { background: var(--risk-p2-bg); border-color: var(--risk-p2-border); color: var(--risk-p2-fg); }
.badge-sev-p3 { background: var(--risk-p3-bg); border-color: var(--risk-p3-border); color: var(--fg-muted); }

/* Type badge (uiTypeBadge, issue 3474; Review 23:37016, MCP 23:37084): radius 4,
 * padding 2x8, Plex Mono Bold 10, tracking .4, no border. Tones the Figma
 * doesn't draw come from the badge tones (issue 3440). AA deviations: Review text
 * is 2563eb (Figma draws 3b82f6, 3.4:1 on its tint), MCP/success text is
 * --live-text (Figma draws 059669, 3.6:1). Violet and dark are proposed, not in Figma;
 * the tones are tokens.css's --type-*. */
.badge-type {
  min-height: 0; padding: 2px 8px; border: 0; border-radius: var(--radius-sm);
  font: var(--type-badge-mono); line-height: 13px; letter-spacing: 0.4px;
}
.badge-type-review { background: var(--type-review-bg); color: var(--type-review-fg); }
.badge-type-success { background: var(--select-tint); color: var(--live-text); }
.badge-type-info { background: var(--info-bg); color: var(--info-fg); }
.badge-type-neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
.badge-type-violet { background: var(--type-violet-bg); color: var(--type-violet-fg); }
.badge-type-amber { background: var(--warning-bg); color: var(--warning-fg); }
/* Status badge (uiStatusBadge, "Off" 31:48256): Inter 11/16, padding 2x6.
 * Text is --fg-muted: Figma's grey is 3.9:1 on its tint. */
.badge-status { min-height: 0; padding: 2px 6px; border: 0; border-radius: var(--radius-sm); background: var(--surface-row); color: var(--fg-muted); font: var(--type-meta); line-height: 16px; }

/* Count pill and LIVE (1:7112, uiPill): 15 tall, pill radius, Inter Bold 10/15. */
.ui-pill { display: inline-flex; align-items: center; height: 15px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--live-bg); color: var(--live-text); font: var(--type-pill); letter-spacing: var(--type-pill-tracking); text-transform: uppercase; white-space: nowrap; }

/* Progress (uiProgress, 1:14740): an 8px pill track, the fill a 90deg brand
 * gradient (52:25915). A tone ("p1", "p2", "near", "over") fills it solid. */
.ui-progress { height: 8px; margin-top: 6px; background: var(--progress-track); border-radius: var(--radius-pill); overflow: hidden; }
.ui-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--progress-from), var(--progress-to)); }
.ui-progress-p1 > span { background: var(--high); }
.ui-progress-p2 > span { background: var(--medium-ink); }
.ui-progress-near > span { background: var(--warning-fg); }
.ui-progress-over > span { background: var(--danger-fg); }
.ui-progress-foot { display: flex; justify-content: space-between; margin-top: 6px; font: var(--type-micro); text-transform: uppercase; color: var(--fg-muted); }

/* Dots (uiDot): live 1:7121 and alert 1:7129 are 8px with a glow; neutral has
 * none. "sm" is the 6px status dot (42:8954). Static: Figma draws no pulse. */
.ui-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--dot-neutral); }
.ui-dot-live { background: var(--live-dot); box-shadow: var(--glow-live); }
.ui-dot-alert { background: var(--alert-dot); box-shadow: var(--glow-alert); }
.ui-dot-warn { background: var(--risk-p2); } /* a "Needs work" status option (issue 3459); no glow, proposed */
.ui-dot-sm { width: 6px; height: 6px; }

/* SegmentedControl (uiSegmented): toggle buttons, one pressed; tooltips on each tab. */
.ui-segment-wrap { position: relative; display: inline-flex; }
.ui-tip { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 5; width: max-content; max-width: 240px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font-size: 12px; font-weight: 400; line-height: 1.4; text-align: left; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.ui-segment-wrap:hover .ui-tip, .ui-segment-wrap:focus-within .ui-tip { display: block; }
/* A standalone tooltip: a small focusable "i" button (.ui-info) and its .ui-tip, linked by aria-describedby. */
.ui-tip-wrap { position: relative; display: inline-flex; vertical-align: middle; }
.ui-tip-wrap:hover .ui-tip, .ui-tip-wrap:focus-within .ui-tip { display: block; }
.ui-info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 1px solid var(--fg-muted); border-radius: 50%; background: none; color: var(--fg-muted); font: italic 600 11px/1 serif; cursor: help; }

/* Issues page: the verdict filter sits left above the table, with its count. */
.issues-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.issues-filters .ui-segmented { margin: 0; }

/* SearchInput (uiSearchInput) and SegmentedControl look: ds/forms.css. */

/* Sidebar (dark in both themes): the org switcher, the footer and the profile popover live in pages/shell-sidebar.css. */
.nav-dot[hidden] { display: none; }
.nav-foot button { position: relative; }