/* The Console design (concept files): shell, Pull requests table, Review menu and
   dialog, Overview, Settings. Loaded after app.css and support-widget.css, so its
   rules win; colours come only from tokens.css. */
/* Pull requests table (Console concept): groups per repository, score squares,
   P0/P1/P2 chips, mono figures. Square, flat, no shadows. */
.pr-console { overflow: hidden; }
.pr-console .table { font-family: var(--font-sans); font-size: 12.5px; }
.pr-console .table th { height: 34px; padding: 0 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); background: var(--bg); text-align: left; white-space: nowrap; }
.pr-console .table td, .pr-console .table th[scope=row] { padding: 14px 12px; border-bottom: 0; border-top: 1px solid var(--border-soft); vertical-align: middle; }
.pr-console .table tbody.repo-group td { padding: 0; background: var(--bg); border-top: 1px solid var(--border); }
.group-toggle { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 16px; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.group-toggle svg { transition: transform 0.15s ease; }
.group-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.pr-console .table tbody tr:hover { background: transparent; }
.pr-console .table tbody.review-group tr:hover { background: var(--surface-sunken); }
.pr-console .title { font-family: var(--font-sans); font-size: 14px; font-weight: 500; text-wrap: pretty; }
.pr-console .pr-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pr-console .pr-cell { min-width: 220px; }
.pr-console .col-score, .pr-console th.col-num { width: 1%; } .pr-console .col-findings, .pr-console td[data-contract=pr-severity-count] { width: 1%; min-width: 106px; }
.pr-console td[data-contract=pr-severity-count] .sev-chips { position: static; }
.rescore-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 4px; padding: 0; border: 1px solid var(--fg-muted); border-radius: 50%; background: none; color: var(--fg-muted); font: italic 600 10px/1 serif; cursor: help; vertical-align: middle; }
.rescore-info:hover::after, .rescore-info:focus-visible::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 4px 8px; border-radius: var(--radius-sm); background: var(--fg); color: var(--surface); font: 400 var(--text-xs)/1.3 inherit; font-style: normal; white-space: nowrap; z-index: 5; pointer-events: none; }
/* Merge-safety meter (prScoreCell, 1:6872): five 12.8 squares, radius 1.28, gap 3,
 * filled to the score (a fractional square fills its share); the caption sits 6 below. */
.score-cell { display: inline-flex; flex-direction: column; gap: 6px; vertical-align: middle; }
.score-squares { display: inline-flex; gap: 3px; }
.score-squares i { position: relative; display: block; width: 12.8px; height: 12.8px; border-radius: 1.28px; background: var(--meter-empty); overflow: hidden; }
.score-squares b { display: block; height: 100%; }
.score-squares i.on.ok, .score-squares b.ok { background: var(--brand); } .score-squares i.on.mid, .score-squares b.mid { background: var(--risk-p1); } .score-squares i.on.low, .score-squares b.low { background: var(--risk-p0); }
.score-figure { font: var(--type-micro); text-transform: uppercase; color: var(--fg-muted); }
/* Risk breakdown chips (prSeverityChips, 1:6938): 24x24, radius 3, 1px border,
 * an inset shadow, Plex Mono Bold 10; "+n" P3 is a neutral chip. */
.sev-chips { display: inline-flex; align-items: center; gap: 6px; }
.sev-chip, .sev-more { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 24px; height: 24px; padding: 0 4px; border: 1px solid var(--risk-p3-border); border-radius: var(--radius-xs); background: var(--risk-p3-bg); color: var(--fg-muted); box-shadow: var(--chip-inset); font: var(--type-badge-mono); line-height: 15px; }
.sev-chip.none { background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); }
.sev-p0.has { background: var(--risk-p0-bg); border-color: var(--risk-p0-border); color: var(--risk-p0-fg); }
.sev-p1.has { background: var(--risk-p1-bg); border-color: var(--risk-p1-border); color: var(--risk-p1-fg); }
.sev-p2.has { background: var(--risk-p2-bg); border-color: var(--risk-p2-border); color: var(--risk-p2-fg); }
/* No findings to break down: "No risks found", Plex Mono 11 (--fg-muted for AA). */
.risk-empty { font: 500 11px/15px var(--font-mono); color: var(--fg-muted); }
/* Issue cell (prIssueCell, 1:6879): the tracker's 18px tile above the key, Inter Bold 11. */
.issue-link { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; color: var(--fg); text-decoration: none; }
.issue-tile { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--fg); }
.issue-tile svg { width: 11px; height: 11px; }
.issue-tile-linear { background: var(--tracker-linear-bg); }
.issue-tile-jira { background: var(--ink); color: var(--ink-fg); }
.issue-link .issue-key { font: var(--type-label); border-bottom: 1px solid transparent; }
a.issue-link:hover .issue-key, a.issue-link:focus-visible .issue-key { border-bottom-color: currentColor; }
.ms-spin { animation: ms-spin var(--motion-spin-slow) linear infinite; transform-origin: center; } @keyframes ms-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ms-spin { animation: none; } }
.pr-console .table-wrap { overflow-x: auto; } .pr-console .table { min-width: 1060px; }
.pr-page { display: flex; flex-direction: column; gap: 12px; }
.pr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 13px; }
.pr-filter-slot { flex: 1; min-width: 0; } .pr-filter-slot .filter-row { margin: 0; }
.pr-console .score-figure, .pr-console .issue-link { white-space: nowrap; }
.pr-console td:first-child { padding-left: 16px; }

/* Console shell (concept): one full-width header, logo / org / page, over a
   narrow mono sidebar whose selected item is solid ink. */
:root { --sidebar-width: 236px; }
.shell { grid-template-rows: auto auto minmax(0, 1fr); }
@media (min-width: 861px) { .sidebar { position: sticky; top: 0; height: 100svh; } }
.sidebar-foot { display: none; }
.nav { gap: 2px; font-family: var(--font-sans); font-size: 13px; }
.nav a, .nav button { height: 36px; padding: 0 12px; border-radius: var(--radius); color: var(--fg-nav); }
.nav-foot a, .nav-foot button { border-bottom: 0; }
.nav svg { display: none; }
.nav-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.admin-badge { border: 1px solid var(--fg); border-radius: var(--radius-sm); } /* colours: .badge-system in app.css (System Admin) */
.content { padding: 24px; }
.pr-console td[data-contract="pr-status"], .pr-console td[data-contract="pass-readiness"] { white-space: nowrap; }

/* Focused screen (onboarding, issue 2398): the page alone on a blank background,
   like the sign-in screens. The shell's nav, top bar, Help widget and email
   banner are not shown; shell.ts setFocused() marks the shell per route. */
.shell[data-focused] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "main"; background: var(--bg); }
.shell[data-focused] > .sidebar, .shell[data-focused] > .topbar, .shell[data-focused] > .email-banner, .shell[data-focused] > .support-widget { display: none; }

/* Stepper (the Sentry flow, sentry-flow.ts): the current step is ink, done steps carry the tint. */
.ob-progress { margin-bottom: 24px; }
.ob-progress .muted { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.ob-progress ol { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
.ob-progress li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--fg-muted); }
.ob-progress li .step-badge { flex: none; }
.ob-progress li[aria-current="step"] { color: var(--fg); font-weight: 600; }
.ob-progress li[aria-current="step"] .step-badge { background: var(--action); border-color: var(--action); color: var(--action-fg); }
.ob-progress li.is-done .step-badge { background: var(--success-bg); border-color: var(--success-fg); color: var(--success-fg); }

/* Review menu and Confirm review dialog (Console concept) */
.review-menu { position: relative; display: inline-flex; justify-content: flex-end; }
.review-menu-list { position: absolute; right: 0; bottom: 34px; z-index: 20; display: flex; flex-direction: column; width: 136px; padding: 4px; background: var(--surface); border: 1px solid var(--fg); border-radius: var(--radius-sm); text-align: left; }
.review-menu-list[hidden] { display: none; }
.review-menu-label { padding: 6px 8px 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
.review-menu-item { height: 32px; padding: 0 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.review-menu-item:hover, .review-menu-item:focus-visible { background: var(--fg); color: var(--surface); }
.review-menu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.review-confirm { width: min(440px, 100%); gap: 0; padding: 0; border: 1px solid var(--fg); }
.review-confirm .dialog-head { padding: 14px 12px 14px 20px; border-bottom: 1px solid var(--border); }
.review-confirm h2 { margin: 0; font-size: var(--text-base); line-height: 24px; }
.review-confirm-body { display: flex; flex-direction: column; gap: 18px; padding: 18px 20px 20px; }
.review-confirm-pr { display: flex; flex-direction: column; gap: 4px; font-weight: 500; } .review-confirm-pr .mono { font-size: 12px; font-weight: 400; }
.review-confirm-facts { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 13px; }
.review-confirm-facts > div { display: flex; justify-content: space-between; gap: 12px; min-height: 40px; align-items: center; padding: 0 12px; }
.review-confirm-facts > div + div { border-top: 1px solid var(--border-soft); }
.review-confirm-facts dt { color: var(--fg-muted); } .review-confirm-facts dd { margin: 0; font-weight: 600; }
.review-confirm .form-actions { justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); margin: 0; font-family: var(--font-sans); font-size: 13px; }
.pr-console td { white-space: nowrap; } .pr-console td.pr-col { white-space: normal; min-width: 240px; overflow: hidden; }
.review-menu-list { position: fixed; bottom: auto; }

/* Month cards (Console concept), shared by the Overview and Billing month charges. The Overview
   page layout, its header and its cards row: pages/overview.css (issue 3456). */
.ov-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
.ov-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px; }
.ov-card-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg-muted); }
.ov-figure { margin-top: 12px; font-size: 36px; font-weight: 600; line-height: 1.2; }
/* Gauge (uiGauge, 20:7501): a 180 degree arc, stroke 14, round caps, the
 * value a brand gradient swept in on load; no needle. The figure sits inside. */
.ui-gauge { position: relative; display: flex; justify-content: center; margin-top: 4px; }
.ui-gauge-track, .ui-gauge-value { fill: none; stroke-width: 14; stroke-linecap: round; }
.ui-gauge-track { stroke: var(--gauge-track); }
.ui-gauge-from { stop-color: var(--progress-from); } .ui-gauge-to { stop-color: var(--progress-to); }
.ui-gauge-value { transition: stroke-dashoffset .6s ease-out; }
.ui-gauge-figure { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; flex-direction: column; align-items: center; }
.ui-gauge-figure strong { font: var(--type-figure); color: var(--fg); }
.ui-gauge-figure span { font: var(--type-micro); letter-spacing: 0.5px; text-transform: uppercase; color: var(--fg-muted); }
@media (prefers-reduced-motion: reduce) { .ui-gauge-value { transition: none; } }

/* Settings (Console concept): mono labels, flat option cards, an ink code block, green save. */
.choice-legend { padding: 0; margin-bottom: var(--space-1); font-family: var(--font-sans); font-size: 11px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
.choice { gap: 14px; padding: 14px 16px; }
.choice strong { font-size: 15px; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.default-tag { margin-left: 4px; padding: 0 6px; border: 1px solid var(--accent); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--primary-text); } /* --accent text was below AA on the picked option (issue 3483) */
.page-header .btn { border-color: var(--fg); font-weight: 600; }
.code-snippet { padding: 14px 16px; background: var(--code-bg); color: var(--code-fg); font-family: var(--font-mono); font-size: 12px; line-height: 1.6; }
.code-block .code-snippet { background: var(--code-bg); border-color: var(--code-bg); }

/* Phones: the header and the filter row fit 360px with no sideways scroll. */
@media (max-width: 600px) {
  .pr-filter-slot { flex: 1 1 100%; }
  .pr-filter-slot .filter-row { flex-wrap: wrap; }
  .pr-toolbar .select, .pr-toolbar .dd, .pr-toolbar .dd-button { max-width: 100%; min-width: 0; }
  .pr-toolbar select { max-width: 100%; }
}

.sim-loaders { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 80; }
body:has(.view-as-banner:not([hidden])) .sim-loaders { bottom: calc(var(--space-4) + 56px); }

/* Phone width (issue 2269): 390px. Buttons and links inside .content (the page, not the
   header or sidebar) keep a 32px tap target. In the Pull requests table, the PR rows'
   Repository, Score and Actions cells stay on screen (sticky) while the other columns
   scroll inside .table-wrap; expanded commit rows scroll as before. Nothing is hidden. */
@media (max-width: 600px) {
  .content button, .content [role=button], .content .btn { min-height: 32px; min-width: 32px; }
  .content a[href] { min-height: 32px; min-width: 32px; }
  .content .rescore-info { min-height: 24px; min-width: 24px; }
  .content a[href]:not([class]) { display: inline-flex; align-items: center; min-height: 32px; }
  .pr-console .table th.col-repo, .pr-console .table td.col-repo { position: sticky; left: 0; z-index: 1; width: 112px; min-width: 112px; max-width: 112px; white-space: normal; background: var(--surface); overflow-wrap: anywhere; }
  .pr-console .table .expander-cell { position: sticky; left: 112px; z-index: 1; width: 40px; min-width: 40px; max-width: 40px; padding-left: 4px; padding-right: 4px; box-sizing: border-box; background: var(--surface); }
  .pr-console .table th.col-score, .pr-console .table td[data-contract=pr-status] { position: sticky; left: 152px; z-index: 1; background: var(--surface); }
  .pr-console .table th:last-child, .pr-console .table td[data-contract=pr-review-action] { position: sticky; right: 0; z-index: 1; background: var(--surface); }
}

/* A top-up credited (Billing return from Stripe): the pill counts up, glows
   green, and "+$25.00" floats up. The "Funds added successfully" popup says it (issue 3743). */
.credits-pill.crediting { animation: credit-pulse var(--motion-float) var(--ease-out); }
.credits-pill.crediting .balance { color: var(--success-fg); }
@keyframes credit-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success-fg) 45%, transparent); transform: scale(1); } 12% { transform: scale(1.06); } 30% { transform: scale(1); } 100% { box-shadow: 0 0 0 14px transparent; } }
.balance-added { position: absolute; right: 12px; top: 50%; font-size: var(--text-sm); font-weight: 700; color: var(--success-fg); white-space: nowrap; pointer-events: none; animation: added-float var(--motion-float-long) var(--ease-out) forwards; }
@keyframes added-float { 0% { opacity: 0; transform: translateY(-20%) scale(.8); } 15% { opacity: 1; transform: translateY(-80%) scale(1.15); } 100% { opacity: 0; transform: translateY(-260%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .credits-pill.crediting { animation: none; } .balance-added { display: none; } }

/* Overview (design): balance card beside the month cards, Active Reviews beside the Activity Log. */
.ov-balance-slot { min-width: 0; }
.ov-balance-slot > .ov-balance { height: 100%; box-sizing: border-box; }
.ov-balance-note { font-size: var(--text-sm); color: var(--fg-muted); margin-top: var(--space-1); }
.ov-balance-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

/* Settings page (issue 3250, design system): scoped to .settings-page so no other
 * page changes. Cards and section headings, buttons at the design's 36px,
 * Checkbox (16px, brand when on) for the add-on boxes, the switch in brand
 * green. Colours from tokens only. */
.settings-page .btn:focus-visible, .settings-page .switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.settings-page .choice strong { font-size: var(--text-base); }

/* Side navigation groups: Manage Org folds Integrations, Billing, Users, Settings; section labels head Workspace and System Admin. */
.nav a[hidden] { display: none; }
/* The join-request count sits on Settings inside the group: folded, it still shows as a dot on the group. */
.nav-group:not([open]):has(.nav-count) > summary .label::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--warning-fg); vertical-align: middle; }
.sidebar { overflow-y: auto; }

/* Risk breakdown legend (issue 3461, Figma 25:39629 / 50:17274): the header's
   swatch button and its rich tooltip (risk-legend.ts). Colors are the
   table's severity tokens, so dark mode follows them. */
.risk-legend-trigger {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  box-sizing: border-box; width: 18px; height: 18px; margin-left: 6px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--fg-muted); cursor: pointer;
  transition: background-color var(--motion-fast, 120ms) var(--ease-standard, ease-in-out), border-color var(--motion-fast, 120ms) var(--ease-standard, ease-in-out);
}
.risk-legend-trigger:hover { border-color: var(--border-control); background: var(--surface); color: var(--fg); }
.risk-legend-trigger[aria-expanded="true"] { border-color: var(--fg); background: var(--pressed-tint); color: var(--fg); box-shadow: inset 0 1px 2px var(--btn-secondary-active-inset); }
.risk-legend-trigger svg { width: 12px; height: 12px; }
.ui-popover.risk-legend { animation-duration: var(--motion-fast, 120ms); }
.risk-legend-rows { display: grid; gap: 10px; }
.risk-legend-head { display: flex; align-items: center; gap: 12px; }
.risk-legend-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 30px; height: 24px;
  border: 1px solid var(--risk-p3-border); border-radius: var(--radius-xs); background: var(--risk-p3-bg); color: var(--fg-muted); font: var(--type-badge-mono);
}
.risk-legend-badge.sev-p0 { background: var(--risk-p0-bg); border-color: var(--risk-p0-border); color: var(--risk-p0-fg); }
.risk-legend-badge.sev-p1 { background: var(--risk-p1-bg); border-color: var(--risk-p1-border); color: var(--risk-p1-fg); }
.risk-legend-badge.sev-p2 { background: var(--risk-p2-bg); border-color: var(--risk-p2-border); color: var(--risk-p2-fg); }
.risk-legend-name { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.risk-legend .risk-legend-title { font: 600 12px/16px var(--font-sans); color: var(--fg); }
.risk-legend-status { font: var(--type-caption); color: var(--fg-muted); }
.risk-legend-status.blocks { color: var(--risk-p0-fg); }
.risk-legend-row:nth-child(2) .risk-legend-status { color: var(--risk-p1-ink); }
.risk-legend-row:nth-child(3) .risk-legend-status { color: var(--risk-p2-fg); }
.risk-legend-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg-muted); cursor: pointer;
}
.risk-legend-toggle:hover { border-color: var(--border-control); background: var(--hover-tint); }
.risk-legend-toggle svg { stroke-width: 2.5; transition: transform var(--motion-fast, 120ms) var(--ease-out, ease-out); }
.risk-legend-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* The fold: rows 0fr -> 1fr animates the height; folded text is hidden from everyone. */
.risk-legend-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--motion-fast, 120ms) var(--ease-out, ease-out), visibility var(--motion-fast, 120ms); }
.risk-legend-body[data-collapsed] { grid-template-rows: 0fr; visibility: hidden; }
.risk-legend-body > div { display: grid; gap: 4px; min-height: 0; overflow: hidden; padding-left: 42px; }
.risk-legend-row { display: grid; }
.risk-legend-row:has(.risk-legend-body:not([data-collapsed])) { gap: 8px; }
.risk-legend .risk-legend-intro, .risk-legend .risk-legend-body p { font: 400 11px/16px var(--font-sans); color: var(--fg-muted); }
.risk-legend .risk-legend-body p.risk-legend-rule { font: 500 10px/16px var(--font-mono); color: var(--fg); }
.risk-legend .risk-legend-note { padding: 8px 6px 6px; border-radius: var(--radius-md); background: var(--surface-raised); font: var(--type-caption); color: var(--fg-muted); }
.risk-legend-note strong { font-weight: 600; color: var(--fg); }
@media (prefers-reduced-motion: reduce) {
  .risk-legend-trigger, .risk-legend-toggle svg, .risk-legend-body { transition: none; }
}