/* pages-runs: History and the run page (mockups 30, 31, 32). Page layout only; components come from Proto.ui. */

/* ---------- run page ---------- */
.rp-run { --rp-gap: var(--space-block); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rp-gap); }
.rp-run > .page-header { margin-bottom: 0.25rem; }
/* The result is a section of its own, set apart from the facts above it. */
.rp-run > :is(.rp-output, .rp-output-skeleton) { margin-top: calc(var(--space-section) - var(--rp-gap)); }
/* The status badges and the report's name lead the header's facts as one item. */
.rp-run .page-header-meta > :first-child { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; }

/* The bar that keeps the run's name, status, selections and actions in view once the header has scrolled away. Its slot
   takes no room (the negative margin cancels the grid's gap), so showing the bar moves nothing under the pointer. */
.rp-sticky-slot { position: sticky; top: var(--sticky-top); z-index: 20; height: 0; margin-bottom: calc(-1 * var(--rp-gap)); }
.rp-sticky { position: absolute; inset-inline: 0; top: 0; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 0.5rem 0.75rem; background: var(--card); box-shadow: var(--shadow-raised); }
.rp-sticky[hidden] { display: none; }
.rp-sticky-row { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; }
.rp-sticky-selections { margin-inline-start: auto; }
.rp-sticky-line { margin-top: 0.375rem; color: var(--muted-foreground); font-size: var(--text-label); }
.rp-sticky-line b { color: var(--foreground); font-weight: 600; }

/* Status notices. */
.rp-cancelled { border-style: dashed; }
.rp-progress { display: flex; align-items: center; gap: 0.875rem; margin-top: 0.375rem; }
.rp-progress > .progress { width: 13.75rem; flex: none; }
.rp-reference { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin-top: 0.5rem; color: var(--foreground); }
.rp-reference code { background: var(--muted); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); }

/* Placeholders while the run works. */
.rp-output-skeleton { display: grid; gap: var(--space-section); }
@container main (width < 56rem) { .rp-tiles { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); } }
/* As tall as the measure tree's canvas (out-performance.js CANVAS.height), so the page does not jump. */
.rp-skeleton-tree { --box: 10.5rem; --pair-gap: 3.75rem; display: grid; justify-items: center; gap: 0.875rem; padding-block: 0.375rem; min-height: 710px; }
/* A level steps right by half a box and gap per --step, which centres its pair under the right-hand box above. */
.rp-skeleton-tree > div { display: flex; gap: var(--pair-gap); translate: calc(var(--step) * (var(--box) + var(--pair-gap)) / 2); }
/* Drawn smaller where the tree is (out-performance.css), so it keeps the tree's height there too. */
@container main (56rem <= width < 64rem) { .rp-skeleton-tree { zoom: 0.9; } }
@container main (width < 56rem) { .rp-skeleton-tree { --box: 9rem; --pair-gap: 1rem; } }
.rp-skeleton-box { width: var(--box); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.625rem; }

/* ---------- History ---------- */
#rp-history { display: grid; gap: 0.75rem; }
.rp-filters { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: center; }
.rp-filters .search-box { width: 17.5rem; max-width: 100%; }
.rp-filters > .field { width: auto; }
/* The eight columns fit a 1280 px window (mockup 31 pin 1): text cells wrap, the unavailable marker included, but not
   Run by, When or Period, so a name or date is never broken; narrower, the table scrolls inside its card. */
.rp-history-table :is(td, th[scope="row"]):not(.rp-actions) { white-space: normal; }
.rp-history-table td:is(:nth-child(3), :nth-child(4), :nth-child(7)) { white-space: nowrap; }
.rp-history-table td .badge { white-space: normal; height: auto; }
/* A period breaks between its two dates, never inside one; at 768 px the table scrolls instead (mockup 31 pin 1). */
.rp-history-table .rp-date { white-space: nowrap; }
.rp-history-table .rp-name { min-width: 9rem; }
.rp-history-table .rp-name a { font-weight: 600; text-decoration: none; }
.rp-history-table .rp-name a:hover { text-decoration: underline; }
.rp-history-table .rp-actions { width: 2.75rem; }
/* Renaming (mockup 31 state 4 pin 16): the field takes the cell's width and is at least as wide as the name, the
   column widening with it; Save and Cancel go under it, beside the hint. */
.rp-history-table .rp-name .inline-edit-row { flex-wrap: wrap; }
.rp-history-table .rp-name .inline-edit .input { flex: 1 0 100%; field-sizing: content; }
.rp-history-table .rp-name .inline-edit-hint { white-space: nowrap; }
.table-container .rp-history-table tr[data-renaming] > :is(td, th) { background: var(--accent); }

.rp-count { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; color: var(--muted-foreground); font-size: var(--text-label); }
.rp-count > .pager { flex: 1; padding-top: 0; }
.rp-count .btn[data-variant="link"] { height: auto; padding: 0; font-size: inherit; }