/* Repositories (#3493, design epic #3432; Nov-4 Figma /Repositories/main 42:8128):
 * the header with its count line and actions (42:8300), the search and filter
 * card (42:8316), the table with its Actions column and pages (42:8351), and the
 * public repositories policy banner (42:8493). repositories.ts draws it on the
 * design system's card, table, pagination, search, select and banner; this sheet
 * holds only the page's own sizes. Its own classes are page-specific by name
 * (.repos-*); every override of a shared class (.page-header, .ui-table, .btn,
 * .audit-cell ...) is nested under .repos-page, which out-specifies app.css and
 * console.css (loaded later).
 *
 * AA: Figma's #059669 actions (3.8:1) and #10b981 status text (2.5:1) ship as
 * --primary-text; the sub-line's #6b7280 as --fg-muted. */

/* The main column at Figma's width: 48 top, 40 sides (42:8297). */
.content:has(.repos-page) { padding: 48px 40px 40px; }
.page:has(> .repos-page) { max-width: none; }
.repos-page, .repos-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; } /* minmax: the table scrolls inside its card */
.repos-stack > .ui-banner { margin-top: var(--space-2); } /* 8 + 16: Figma's gap to the banner */

/* ---- Header (42:8300) ---- */
.repos-page .page-header { align-items: center; margin: 0; }
.repos-page .page-header h1 { margin: 0; font: 600 20px/28px var(--font-sans); letter-spacing: normal; color: var(--fg-strong); }
.repos-page .page-header .subtitle { margin: 2px 0 0; font: 700 14px/20px var(--font-sans); color: var(--fg-muted); }
.repos-page .page-header .subtitle:has(> #repos-summary:empty) { visibility: hidden; }
.repos-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.repos-header-actions > span:empty { display: none; }
.repos-header-actions .btn { height: 36px; }
.repos-header-actions .btn svg, .repos-page .btn .gh-mark { width: 14px; height: 14px; margin: 0; }

/* ---- Search and filter card (42:8316) ---- */
.repos-page .repos-filters { display: grid; gap: var(--space-4); padding: var(--space-4); box-shadow: var(--shadow-toolbar); border-color: var(--border); }
.repos-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.repos-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-left: var(--space-2); }
.repos-chips .dd-button, .repos-chips .select select { min-height: 35px; padding-top: 8px; padding-bottom: 8px; }
.repos-page .repos-updated { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 0 auto; font: var(--type-meta); color: var(--fg-muted); }

/* ---- Table (42:8351): header 47, cells 16 24 / 24 24, top-aligned ---- */
.repos-page .ui-table-card { border-radius: var(--radius-xl); }
.repos-page .repos-table { min-width: 1000px; table-layout: fixed; }
.repos-page .repos-table th { height: 47px; padding: 16px 24px; letter-spacing: var(--table-head-tracking); font-weight: 600; }
/* Repository, Status, Audit, Review settings; Actions takes the rest (29.5%). Figma draws 246 / 150 / 230 /
 * 270 / 260 of 1156: Repository and Audit give up a little so that, at the 1474 layout, the level line
 * ("Strong · $0.50/commit (org default)") and Actions with the kept Supply chain action each stay on one
 * line. Without the Review settings column (its scripts not loaded), the 24% falls to Actions. */
.repos-page .repos-table th:nth-child(1) { width: 17.5%; }
.repos-page .repos-table th:nth-child(2) { width: 12.5%; }
.repos-page .repos-table th:nth-child(3) { width: 16.5%; }
.repos-page .repos-table th:nth-child(4):not(:last-child) { width: 24%; }
.repos-page .repos-table th .btn-sort { padding: 0; min-height: 0; height: auto; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.repos-page .repos-table th .btn-sort:hover { color: var(--fg); }
.repos-page .repos-table td { padding: var(--space-6); vertical-align: top; }
.repos-page .repos-table td.ui-table-empty { padding: var(--space-7) var(--space-5); vertical-align: middle; }

/* Repository: the GitHub mark and the name, Inter SemiBold 14/20. */
.repos-name { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; font: 600 14px/20px var(--font-sans); color: var(--fg); text-decoration: none; }
.repos-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repos-name .gh-mark { flex: none; width: 15px; height: 16px; margin: 0; color: var(--fg); }
.repos-name:hover > span { text-decoration: underline; }

/* Status: the CONNECTED badge (42:8373), Inter Bold 10 uppercase with a 4px dot. */
.repos-status { white-space: normal; }
.repos-status .badge {
  gap: 6px; min-height: 21px; padding: 2px 8px; border-radius: var(--radius-sm);
  font: 700 10px/15px var(--font-sans); letter-spacing: normal; text-transform: uppercase;
}
.repos-status .badge::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: var(--radius-pill); background: currentColor; }
.repos-status .badge-success {
  background: color-mix(in srgb, var(--brand) 10%, transparent); border-color: color-mix(in srgb, var(--brand) 20%, transparent); color: var(--primary-text);
}
.repos-status > * + * { margin-top: var(--space-1); }
.repos-status [data-contract="oss-ultra"] { margin-left: var(--space-1); }

/* Audit: Inter Medium 12/16 muted. */
.repos-page .audit-cell .audit-state { font: 500 12px/16px var(--font-sans); color: var(--fg-muted); }
.repos-page .audit-cell .audit-state + *, .repos-page .audit-cell [data-contract~="repo-pre-existing"] { margin-top: var(--space-1); }
.repos-page .audit-cell .btn-text { font: 500 12px/16px var(--font-sans); white-space: normal; text-align: left; }
.repos-page .audit-cell .inline-spinner { margin-right: 6px; vertical-align: -2px; }

/* Review settings: the level (Bold 12/16, a text button to its panel), then the trigger and authors (11/16.5). */
.repos-page .repos-level { display: block; max-width: 100%; font: 700 12px/16px var(--font-sans); color: var(--fg); text-align: left; white-space: normal; }
.repos-page .repos-level:hover { text-decoration: underline; }
.repos-page .repo-review-settings .muted { margin-top: var(--space-1); font: var(--type-meta); color: var(--fg-muted); }

/* Actions (42:8395): Plex Mono SemiBold 11 text actions with 14px icons, divided by 1x24 rules (8 each side).
 * Run audit and Start free audit (audit-paid.ts, .btn) take the same look (not in Figma).
 * Each action draws the rule before it; the row's left edge clips the first one on every line, so a wrapped
 * line starts clean. */
.repos-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) 17px; margin-left: -17px; padding-left: 17px; clip-path: inset(-6px -6px -6px 13px); }
.repos-action, .repos-page .repos-actions > .btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; height: auto; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; font: 600 11px/14px var(--font-mono); color: var(--primary-text); white-space: nowrap; box-shadow: none;
}
.repos-action svg { flex: none; width: 14px; height: 14px; }
.repos-action:hover:not(:disabled), .repos-page .repos-actions > .btn:hover:not(:disabled) { background: none; text-decoration: underline; }
.repos-action:disabled, .repos-page .repos-actions > .btn:disabled { background: none; color: var(--fg-muted); cursor: not-allowed; }
.repos-action:focus-visible, .repos-page .repos-actions > .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }
.repos-actions > .repos-action::before, .repos-actions > .btn::before {
  content: ""; position: absolute; left: -9px; top: 50%; width: 1px; height: 24px; margin-top: -12px; background: var(--border); pointer-events: none;
}
.repos-actions .audit-note { flex-basis: 100%; font: var(--type-meta); color: var(--fg-muted); }

/* Footer (42:8481): "Showing ..." and the pages, 17 32 16 on the header tint. */
.repos-page .ui-table-foot { min-height: 0; padding: 17px var(--space-7) var(--space-4); border-top-color: var(--divider); }
.repos-page .ui-pagination-status { color: var(--fg-muted); }
.repos-footnote { margin: 0; padding: var(--space-2) var(--space-7) var(--space-4); background: var(--surface-header); font: var(--type-meta); }

/* ---- Public repositories policy banner (42:8493) ---- */
.repos-policy { position: relative; overflow: hidden; padding: var(--space-7); border-radius: var(--radius-2xl); }
.repos-policy > :not([aria-hidden]) { position: relative; max-width: 900px; }
.repos-policy > .ui-banner-body { max-width: none; }
.repos-policy > p:not(.ui-banner-body) { margin: var(--space-2) 0 0; font: 400 13px/20px var(--font-sans); color: var(--fg-muted); }
.repos-policy > p:not(.ui-banner-body) .btn { margin-top: var(--space-1); }
.repos-policy-list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.repos-policy-list li { padding: 2px 8px; border-radius: var(--radius-sm); background: var(--surface-sunken); font: 500 12px/16px var(--font-mono); color: var(--fg); }
/* The faint cell grid in the top-right corner and the bar along the bottom edge. */
.repos-policy-cells {
  position: absolute; top: 0; right: 0; display: grid; grid-template-columns: repeat(7, 12px); gap: var(--space-1) 21px;
  padding: var(--space-4); opacity: .08; pointer-events: none;
}
.repos-policy-cells i, .repos-policy-bar i { display: block; background: color-mix(in srgb, var(--brand) var(--a), transparent); }
.repos-policy-cells i { width: 12px; height: 12px; border-radius: 2px; }
.repos-policy-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: var(--space-1); height: 4px; opacity: .2; pointer-events: none; }
.repos-policy-bar i { flex: 1; }

@media (max-width: 900px) {
  .content:has(.repos-page) { padding: var(--space-6) var(--space-4); }
  .repos-page .page-header { align-items: flex-start; }
  .repos-page .repos-updated { margin-left: 0; }
}