:root {
  --audit-expand-ms: 160ms;  /* the row panel's entry (#3497, proposed, not in Figma) */
}

/* Repository audit (#3497, design epic #3432; Nov-4 Figma /Repositories/view audit
 * 42:12070, dialog 42:14141): the Repositories page's View audit dialog, and the
 * audit card it holds (audit.ts), which the ready-audit notice dialog reuses.
 * The heading is the design system's modal head (ds/overlays.css), the table its
 * ui-table and expander (ds/surfaces.css), the buttons ds/buttons.css; this sheet
 * holds the audit's own sizes. Tokens only; dark mode comes from tokens.css.
 *
 * AA: Figma's #059669 actions (3.8:1) ship as --primary-text, its #10b981
 * eyebrow as the modal eyebrow's --live-text, its #6b7280 as --fg-muted. */

/* ---- The dialog (42:14141): 1080 wide, radius 12, the popover's 3-layer shadow ---- */
dialog.audit-repo-dialog {
  width: min(1080px, calc(100vw - 2 * var(--space-4))); max-width: none; max-height: calc(100vh - 2 * var(--space-4));
  padding: 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-xl);
  background: var(--surface); color: var(--fg); box-shadow: var(--shadow-popover);
}
dialog.audit-repo-dialog[open] { display: flex; flex-direction: column; animation: ui-modal-in 180ms var(--ease-out); }
dialog.audit-repo-dialog::backdrop { background: var(--overlay-scrim); -webkit-backdrop-filter: blur(var(--overlay-blur)); backdrop-filter: blur(var(--overlay-blur)); }

/* Heading (42:14142): 94 tall, 22 28, the eyebrow 6 above the title, close L on the right. */
.audit-modal-head.ui-modal-head {
  flex: none; grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: var(--space-4); row-gap: 6px;
  box-sizing: border-box; min-height: 94px; padding: 22px 28px; background: var(--surface);
}
.audit-modal-head .ui-modal-eyebrow { grid-column: 1; letter-spacing: 0.6px; }
.audit-modal-head .ui-modal-title { grid-column: 1; letter-spacing: -0.4px; }
.audit-modal-close { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

.audit-modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }

/* Footer (42:14307): 71 tall on the header tint, the open count left, the hint right. */
.audit-modal-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  box-sizing: border-box; min-height: 71px; padding: 0 28px; background: var(--surface-header); border-top: 1px solid var(--border-strong);
}
.audit-open-count, .audit-scroll-hint { display: flex; align-items: center; gap: 7px; margin: 0; font: 400 11px/14px var(--font-mono); color: var(--fg-muted); }
.audit-scroll-hint { font-size: 10px; }
.audit-scroll-hint[hidden] { display: none; }
.audit-scroll-hint svg { flex: none; width: 12px; height: 12px; }
.audit-dot { flex: none; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--brand); }

/* ---- The card: flat inside the dialog, one section after another ---- */
.audit-repo-dialog .audit-card { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--surface); }
.audit-repo-dialog .audit-card + .audit-card { border-top: 1px solid var(--border-strong); }

/* Summary bar (42:14152): 24 28, the lead and meta row left, the actions right. */
.audit-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) 28px; }
.audit-summary-main { display: grid; gap: 2px; min-width: 0; }
.audit-lead { margin: 0; font: var(--type-h1); color: var(--fg-strong); }
.audit-lead code { padding: 0; background: none; font: inherit; color: inherit; }
.audit-sub { margin: var(--space-1) 0 0; font: var(--type-body); line-height: 20px; color: var(--fg-muted); }
.audit-summary-main > [data-contract~="audit-withheld"] { margin: var(--space-1) 0 0; font: 400 12px/16px var(--font-sans); color: var(--fg-muted); }
.audit-summary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-left: auto; }

/* Meta row (42:14156): repository, a 1x16 rule, the branch chip, the commit line; 12 apart. */
.audit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-height: 22px; }
.audit-repo { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0; font: 600 13px/16px var(--font-sans); color: var(--fg-strong); }
.audit-repo .gh-mark { width: 16px; height: 16px; margin: 0; color: var(--fg-strong); }
.audit-meta-rule { width: 1px; height: 16px; background: var(--border-strong); }
.audit-branch { display: inline-flex; align-items: center; gap: 5px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--fg-strong); }
.audit-branch svg { flex: none; width: 13px; height: 13px; color: var(--fg-muted); }
.audit-branch code { padding: 0; background: none; font: 400 11px/14px var(--font-mono); color: inherit; }
.audit-commit { margin: 0; font: 400 12px/16px var(--font-sans); color: var(--fg-muted); }
.audit-commit code { padding: 0; background: none; font: inherit; color: inherit; }
.audit-commit a { color: var(--primary-text); text-decoration: underline; }
.audit-commit a code { font-family: var(--font-mono); }

/* Copy all prompts (42:14175): Primary M, 164 wide. */
.audit-master { display: contents; }
.audit-copy-all { min-width: 164px; }
.audit-prompt-text { margin: 0; padding: var(--space-3); overflow: auto; max-height: 240px; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); font: 400 12px/18px var(--font-mono); color: var(--fg); }
.audit-master > .audit-prompt-text:not([hidden]) { flex-basis: 100%; }

/* The status filter (#2551; not in Figma): before Copy all prompts. */
.audit-filter { display: inline-flex; align-items: center; gap: var(--space-2); font: 400 12px/16px var(--font-sans); color: var(--fg-muted); }
.audit-filter .select select { min-height: 36px; }

/* ---- Findings table (42:14183): the header 56 on the tint, rows 16 24 ---- */
.audit-table-wrap { overflow-x: auto; }
.audit-findings { min-width: 820px; table-layout: fixed; }
.audit-findings th {
  height: 56px; padding: 0 var(--space-4) 0 0; background: var(--surface-header);
  border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong);
  font: 500 10px/13px var(--font-mono); letter-spacing: 0.6px;
}
.audit-findings th.ui-col-expander { width: 64px; }
.audit-findings th:nth-child(2) { width: 80px; }
.audit-findings th:nth-child(3) { width: 100px; }
.audit-findings th:nth-child(5) { width: 238px; }
.audit-findings th:nth-child(6) { width: 200px; }
.audit-findings td { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-top: 0; vertical-align: middle; font: 400 13px/19.5px var(--font-sans); color: var(--fg-strong); }
.audit-findings .ui-col-expander { padding: var(--space-4) 0 var(--space-4) var(--space-6); text-align: left; }
.audit-finding > tr:first-child > td { border-bottom: 1px solid var(--border-strong); }
.audit-finding:has(> .audit-detail:not([hidden])) > tr:first-child > td { border-bottom: 0; }
.audit-findings .audit-detail > td { padding: 0 var(--space-6) var(--space-6) 64px; border-bottom: 1px solid var(--border-strong); }
.audit-findings tbody tr.audit-detail:hover { box-shadow: none; }
.audit-findings .ui-expander:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }

.audit-findings .title { display: block; font-weight: 600; letter-spacing: -0.025px; overflow-wrap: anywhere; }
.audit-note { margin: var(--space-1) 0 0; font: 400 11px/16px var(--font-sans); color: var(--fg-muted); }
.audit-note code { font-size: 11px; }
.audit-where { display: block; font: 400 11px/13.75px var(--font-sans); color: var(--fg-muted); overflow-wrap: anywhere; }

/* Actions (42:14204): Plex Mono SemiBold 11 text actions with a 14 icon; the status
 * actions (#2551, not in Figma) under the copy, in the muted ink. */
.audit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); }
.audit-action {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 11px/14px var(--font-mono); color: var(--primary-text); white-space: nowrap;
}
.audit-action:hover:not(:disabled) { text-decoration: underline; }
.audit-action:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }
.audit-action:disabled { color: var(--fg-muted); cursor: not-allowed; }
.audit-action-muted { color: var(--fg-muted); }

/* Copied (42:14272): the copy+check icon and "prompt copied" in muted ink at half
 * opacity, crossfading in 150ms and back after two seconds (audit.ts). */
.audit-copy-labels { display: inline-grid; }
.audit-copy-idle, .audit-copy-done { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: opacity var(--motion-base) var(--ease-standard); }
.audit-copy-labels svg { flex: none; width: 14px; height: 14px; }
.audit-copy-done { opacity: 0; }
[data-copied="1"] .audit-copy-idle { opacity: 0; }
[data-copied="1"] .audit-copy-done { opacity: 1; }
.audit-action[data-copied="1"] { color: var(--fg-muted); }
.audit-action[data-copied="1"] .audit-copy-done { opacity: .5; }

/* ---- The expanded panel (42:14212): an inset on the tint, Description and Suggested fix ---- */
.audit-panel {
  display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-header); animation: audit-panel-in var(--audit-expand-ms) var(--ease-out);
}
.audit-detail-part { display: grid; gap: var(--space-1); }
.audit-detail-part h4 { margin: 0; font: 600 12px/18px var(--font-sans); color: var(--fg-strong); }
.audit-detail-part p { margin: 0; font: 400 13px/21px var(--font-sans); color: var(--fg-strong); overflow-wrap: anywhere; }
.audit-detail-part .audit-problem { color: var(--fg-muted); }
.audit-fix code { padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--danger-bg); font: 400 13px/21px var(--font-mono); color: var(--danger-fg); }
.audit-panel > .audit-note { margin: 0; }
.audit-prompt > summary { width: max-content; min-height: 24px; padding: 2px 0; cursor: pointer; font: 600 12px/18px var(--font-sans); color: var(--fg-strong); }
.audit-prompt[open] > summary { margin-bottom: var(--space-2); }
@keyframes audit-panel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- Below the table: Maybe, Supply chain, running, failed ---- */
.audit-card .audit-maybe, .audit-card .audit-supply-chain > .card-body { padding: var(--space-4) 28px; }
.audit-card .audit-maybe > summary { cursor: pointer; font: 600 13px/20px var(--font-sans); color: var(--fg-strong); }
.audit-card .audit-maybe > p { font: 400 12px/18px var(--font-sans); color: var(--fg-muted); }
.audit-card .audit-maybe .audit-table-wrap { margin: var(--space-3) -28px 0; }
.audit-card .audit-supply-chain { border-top: 1px solid var(--border-strong); }
.audit-card .audit-supply-chain h3 { margin: 0 0 var(--space-1); font: var(--type-title-sm); color: var(--fg-strong); }
.audit-card .audit-supply-chain .muted { font: 400 12px/18px var(--font-sans); }
.audit-card .audit-running, .audit-card .audit-failed { padding: var(--space-7) 28px; border-top: 1px solid var(--border-strong); }

@media (prefers-reduced-motion: reduce) {
  dialog.audit-repo-dialog[open], .audit-panel { animation: none; }
  .audit-copy-idle, .audit-copy-done { transition: none; }
}

@media (max-width: 760px) {
  .audit-modal-head.ui-modal-head, .audit-summary { padding-left: var(--space-4); padding-right: var(--space-4); }
  .audit-modal-foot { padding: 0 var(--space-4); }
}

/* In the dialog the column header stays in view while the rows scroll (Figma 42:14176 sits above the scroll area). */
.audit-repo-dialog .audit-table-wrap { overflow: visible; }
.audit-repo-dialog .audit-findings thead th { position: sticky; top: 0; z-index: 2; }